mirror of
https://github.com/YunoHost-Apps/chtickynotes_ynh.git
synced 2024-09-03 18:15:57 +02:00
Created
Copied from ynh-chtickynotes and begining of boards management
This commit is contained in:
Chtixof
parent
a02b12114b
commit
c63ca08270
29 changed files with 14311 additions and 0 deletions
21
LICENSE.txt
Normal file
21
LICENSE.txt
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2014 Chtixof
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
17
README.md
Normal file
17
README.md
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
# chtickynotes_ynh : sticky notes for Yunohost #
|
||||||
|
|
||||||
|
chtickynotes_ynh is packaged to be installed on a [Yunohost](https://yunohost.org) server.
|
||||||
|
|
||||||
|
chtickynotes_ynh is a "simple post-it" application. Its main features are:
|
||||||
|
- notes movable and resizable
|
||||||
|
- edit note by just typing on it (or CTRL-V to paste chunks of HTML)
|
||||||
|
- menu on each note to change its color, and so on
|
||||||
|
- global menu to change board, and so on
|
||||||
|
- autosave every 10 seconds
|
||||||
|
- storage on the server (not on the browser local storage)
|
||||||
|
|
||||||
|
**Screen shot:**<br>
|
||||||
|
|
||||||
|
|
||||||
|
chtickynotes_ynh core is based on [Post It All!](https://github.com/txusko/PostItAll).
|
||||||
|
|
||||||
18
conf/nginx.conf
Normal file
18
conf/nginx.conf
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
location PATHTOCHANGE {
|
||||||
|
|
||||||
|
alias WWWPATH ;
|
||||||
|
|
||||||
|
index index.html index.php ;
|
||||||
|
try_files $uri $uri/ index.php;
|
||||||
|
location ~ [^/]\.php(/|$) {
|
||||||
|
fastcgi_split_path_info ^(.+?\.php)(/.*)$;
|
||||||
|
fastcgi_pass unix:/var/run/php5-fpm.sock;
|
||||||
|
fastcgi_index index.php;
|
||||||
|
include fastcgi_params;
|
||||||
|
fastcgi_param REMOTE_USER $remote_user;
|
||||||
|
fastcgi_param PATH_INFO $fastcgi_path_info;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Include SSOWAT user panel.
|
||||||
|
include conf.d/yunohost_panel.conf.inc;
|
||||||
|
}
|
||||||
31
manifest.json
Normal file
31
manifest.json
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "ChtickyNotes",
|
||||||
|
"id": "chtickynotes",
|
||||||
|
"description": {
|
||||||
|
"en": "Generic sticky notes for all purpose",
|
||||||
|
"fr": "Des post-its génériques à tout faire"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"developer": {
|
||||||
|
"name": "chtixof"
|
||||||
|
},
|
||||||
|
"multi_instance": "false",
|
||||||
|
"arguments": {
|
||||||
|
"install" : [ {
|
||||||
|
"name": "domain",
|
||||||
|
"ask": {
|
||||||
|
"en": "Choose a domain for ChtickyNotes",
|
||||||
|
"en": "Choisissez un domaine pour ChtickyNotes"
|
||||||
|
},
|
||||||
|
"example": "domain.org"
|
||||||
|
},{
|
||||||
|
"name": "path",
|
||||||
|
"ask": {
|
||||||
|
"en": "Choose a path for ChtickyNotes",
|
||||||
|
"en": "Choisissez un chemin pour ChtickyNotes"
|
||||||
|
},
|
||||||
|
"example": "/chtickynotes",
|
||||||
|
"default": "/chtickynotes"
|
||||||
|
} ]
|
||||||
|
}
|
||||||
|
}
|
||||||
15
scripts/backup
Normal file
15
scripts/backup
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
#!/bin/bash
|
||||||
|
app=chtickynotes
|
||||||
|
|
||||||
|
# The parameter $1 is the backup directory location
|
||||||
|
# which will be compressed afterward
|
||||||
|
backup_dir=$1/apps/$app
|
||||||
|
mkdir -p $backup_dir
|
||||||
|
|
||||||
|
# Backup sources & data
|
||||||
|
sudo cp -a /var/www/$app/. $backup_dir/sources
|
||||||
|
|
||||||
|
# Copy Nginx and YunoHost parameters to make the script "standalone"
|
||||||
|
sudo cp -a /etc/yunohost/apps/$app/. $backup_dir/yunohost
|
||||||
|
domain=$(sudo yunohost app setting $app domain)
|
||||||
|
sudo cp -a /etc/nginx/conf.d/$domain.d/$app.conf $backup_dir/nginx.conf
|
||||||
28
scripts/install
Normal file
28
scripts/install
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
#!/bin/bash
|
||||||
|
# Installation de ChtickyNotes dans Yunohost
|
||||||
|
app=chtickynotes
|
||||||
|
|
||||||
|
# Retrieve arguments
|
||||||
|
domain=$1
|
||||||
|
path=$2
|
||||||
|
|
||||||
|
# Check domain/path availability
|
||||||
|
sudo yunohost app checkurl $domain$path -a $app
|
||||||
|
if [[ ! $? -eq 0 ]]; then
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Copy files to the right place with the right permissions
|
||||||
|
final_path=/var/www/$app
|
||||||
|
sudo mkdir -p $final_path
|
||||||
|
sudo cp -a ../sources/* $final_path
|
||||||
|
sudo chown -R www-data: $final_path
|
||||||
|
|
||||||
|
# Modify Nginx configuration file and copy it to Nginx conf directory
|
||||||
|
sed -i "s@PATHTOCHANGE@$path@g" ../conf/nginx.conf
|
||||||
|
sed -i "s@WWWPATH@$final_path@g" ../conf/nginx.conf
|
||||||
|
sudo cp ../conf/nginx.conf /etc/nginx/conf.d/$domain.d/$app.conf
|
||||||
|
|
||||||
|
# Reload nginx and regenerate SSOwat conf
|
||||||
|
sudo service nginx reload
|
||||||
|
sudo yunohost app ssowatconf
|
||||||
15
scripts/remove
Normal file
15
scripts/remove
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
#!/bin/bash
|
||||||
|
app=chtickynotes
|
||||||
|
|
||||||
|
# Retrieve arguments
|
||||||
|
domain=$(sudo yunohost app setting $app domain)
|
||||||
|
|
||||||
|
# Remove sources
|
||||||
|
sudo rm -rf /var/www/$app
|
||||||
|
|
||||||
|
# Remove configuration files
|
||||||
|
sudo rm -f /etc/nginx/conf.d/$domain.d/$app.conf
|
||||||
|
|
||||||
|
# Restart services
|
||||||
|
sudo service nginx reload
|
||||||
|
sudo yunohost app ssowatconf
|
||||||
16
scripts/restore
Normal file
16
scripts/restore
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
#!/bin/bash
|
||||||
|
app=chtickynotes
|
||||||
|
|
||||||
|
# The parameter $1 is the uncompressed restore directory location
|
||||||
|
backup_dir=$1/apps/$app
|
||||||
|
|
||||||
|
# Restore sources & data
|
||||||
|
sudo cp -a $backup_dir/sources/. /var/www/$app
|
||||||
|
|
||||||
|
# Restore Nginx and YunoHost parameters
|
||||||
|
sudo cp -a $backup_dir/yunohost/. /etc/yunohost/apps/$app
|
||||||
|
domain=$(sudo yunohost app setting $app domain)
|
||||||
|
sudo cp -a $backup_dir/nginx.conf /etc/nginx/conf.d/$domain.d/$app.conf
|
||||||
|
|
||||||
|
# Restart webserver
|
||||||
|
sudo service nginx reload
|
||||||
24
scripts/upgrade
Normal file
24
scripts/upgrade
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
#!/bin/bash
|
||||||
|
app=chtickynotes
|
||||||
|
|
||||||
|
# Retrieve arguments
|
||||||
|
domain=$(sudo yunohost app setting $app domain)
|
||||||
|
path=$(sudo yunohost app setting $app path)
|
||||||
|
|
||||||
|
# Remove trailing "/" for next commands
|
||||||
|
path=${path%/}
|
||||||
|
|
||||||
|
# Copy source files
|
||||||
|
final_path=/var/www/$app
|
||||||
|
sudo mkdir -p $final_path
|
||||||
|
sudo cp -a ../sources/* $final_path
|
||||||
|
|
||||||
|
# Modify Nginx configuration file and copy it to Nginx conf directory
|
||||||
|
sed -i "s@PATHTOCHANGE@$path@g" ../conf/nginx.conf
|
||||||
|
sed -i "s@WWWPATH@$final_path@g" ../conf/nginx.conf
|
||||||
|
sudo cp ../conf/nginx.conf /etc/nginx/conf.d/$domain.d/$app.conf
|
||||||
|
|
||||||
|
# Restart services
|
||||||
|
sudo service nginx reload
|
||||||
|
sudo yunohost app ssowatconf
|
||||||
|
|
||||||
10
sources/fav.php
Normal file
10
sources/fav.php
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?php
|
||||||
|
$text=file_get_contents('php://input');
|
||||||
|
if ($text!="") {
|
||||||
|
file_put_contents('allnotes.json', $text);
|
||||||
|
header("Cache-Control: no-cache, must-revalidate");
|
||||||
|
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
|
||||||
|
header("Content-Type: application/json; charset=utf-8");
|
||||||
|
echo($text);
|
||||||
|
}
|
||||||
|
?>
|
||||||
250
sources/index.html
Normal file
250
sources/index.html
Normal file
|
|
@ -0,0 +1,250 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<title>ChtickyNotes
|
||||||
|
</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<link rel="stylesheet" href="libs/jquery-ui-1.10.0.custom.css">
|
||||||
|
<link rel="stylesheet" href="libs/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="libs/bootstrap-responsive.min.css">
|
||||||
|
<link rel="stylesheet" href="libs/jquery.minicolors.css">
|
||||||
|
<link rel="stylesheet" href="plugin/jquery.postitall.css">
|
||||||
|
<link rel="stylesheet" href="libs/main.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #41444f;
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
#chtimenu {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
#chtimenu a, .chme a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#chtimenu a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#saved {
|
||||||
|
position:absolute;
|
||||||
|
}
|
||||||
|
#saveallnotes {
|
||||||
|
position:absolute;
|
||||||
|
background: #41444f;
|
||||||
|
}
|
||||||
|
#chtoption {
|
||||||
|
background-image: url(data:image/gif;base64,R0lGODlhDQANALsAAMXFxbe3t76+vtvb2729vbi4uLy8vMHBwbm5ueHh4dra2tPT07e4t9TU1ODg4JmZmSH5BAEAAA8ALAAAAAANAA0AAAQvsIVJaxmIiM25OQMgjiSQPGiqruy6VHBwZV39hWV5tnz/vDEKQ1HQ1DwHRa7kiAAAOw==);
|
||||||
|
position:absolute;
|
||||||
|
top:15px;
|
||||||
|
right:15px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.chme {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
z-index: 100000;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
#chtoptmenu {
|
||||||
|
width: 275px;
|
||||||
|
height: 40px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
#chlist {
|
||||||
|
width: 400px;
|
||||||
|
height: 40px;
|
||||||
|
top: 45px;
|
||||||
|
}
|
||||||
|
.chme label{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
#chtoptmenu ul {
|
||||||
|
top: 30px;
|
||||||
|
width: 275px;
|
||||||
|
}
|
||||||
|
#chlist ul {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.chme ul {
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.chme ul li {
|
||||||
|
font: 14px;
|
||||||
|
margin-right: -4px;
|
||||||
|
position: relative;
|
||||||
|
padding: 5px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #555;
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.chme ul li:hover { background: #666; }
|
||||||
|
.center { text-align: center; }
|
||||||
|
.float-left { float: left; }
|
||||||
|
.float-right { float: right; }
|
||||||
|
.vertical-bottom { vertical-align: bottom; }
|
||||||
|
.vertical-middle { vertical-align: middle; }
|
||||||
|
.vertical-top { vertical-align: top; }
|
||||||
|
.clear { clear: both; }
|
||||||
|
.red { color: red; }
|
||||||
|
.red a { color: red; font-weight: bold; text-decoration: none; }
|
||||||
|
.red a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 7]>
|
||||||
|
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
|
||||||
|
<![endif]-->
|
||||||
|
<div id="chtimenu">
|
||||||
|
<a id="addanote" href="javascript:void(0)">Add a note</a>
|
||||||
|
<span id="saved">(saved)</span>
|
||||||
|
<a id="saveallnotes" href="javascript:void(0)">Save all notes</a>
|
||||||
|
</div>
|
||||||
|
<div id="addanote_result">
|
||||||
|
</div>
|
||||||
|
<div id="chtoption">
|
||||||
|
</div>
|
||||||
|
<div id="chtoptmenu" class="chme">
|
||||||
|
<ul>
|
||||||
|
<li id="chboard">Change board</li>
|
||||||
|
<li><a href="javascript:alert('tbd')">Background color</a></li>
|
||||||
|
<li><a href="javascript:alert('tbd')">Title</a></li>
|
||||||
|
<li><a href="javascript:alert('tbd')">This board is shared. Make it private?</a></li>
|
||||||
|
<li><a href="javascript:alert('tbd')">Delete this board</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="chlist" class="chme">
|
||||||
|
<ul>
|
||||||
|
<li>First Board (shared)</li>
|
||||||
|
<li>Second Board (shared)</li>
|
||||||
|
<li><New board></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||||
|
<script>window.jQuery || document.write('<script src="libs/jquery-1.9.1.min.js"><\/script>')</script>
|
||||||
|
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
|
||||||
|
<script>window.jQuery || document.write('<script src="libs/jquery-ui-1.10.1.min.js"><\/script>')</script>
|
||||||
|
<script src="libs/bootstrap.min.js"></script>
|
||||||
|
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer="defer"></script>
|
||||||
|
<script src="libs/jquery.minicolors.js"></script>
|
||||||
|
<script src="plugin/jquery.postitall.js"></script>
|
||||||
|
<script src="libs/main.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
function saveallnotes(){}
|
||||||
|
|
||||||
|
//global reqini for ajax
|
||||||
|
var reqini = new XMLHttpRequest();
|
||||||
|
|
||||||
|
//here we go
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
//Minicolors for the form
|
||||||
|
$('.minicolors').minicolors();
|
||||||
|
|
||||||
|
//Add a note
|
||||||
|
$('#addanote').click(function() {
|
||||||
|
$('#addanote_result').postitall();
|
||||||
|
});
|
||||||
|
|
||||||
|
// set function to save all notes in the z-index order
|
||||||
|
saveallnotes=function() {
|
||||||
|
var allnotes=[];
|
||||||
|
var req = new XMLHttpRequest();
|
||||||
|
$('.PIApostit').each(function() {
|
||||||
|
var thisone=$(this).postitall('options');
|
||||||
|
allnotes.push({
|
||||||
|
"date": thisone.date,
|
||||||
|
"showdate": thisone.showdate,
|
||||||
|
"title": thisone.title,
|
||||||
|
"backgroundcolor": thisone.backgroundcolor,
|
||||||
|
"textcolor": thisone.textcolor,
|
||||||
|
"posX": thisone.posX,
|
||||||
|
"posY": thisone.posY,
|
||||||
|
"height": thisone.height,
|
||||||
|
"width": thisone.width,
|
||||||
|
"description": thisone.description,
|
||||||
|
"zindex": parseInt($(this).css('z-index'))
|
||||||
|
});
|
||||||
|
});
|
||||||
|
allnotes.sort(function (a,b) {
|
||||||
|
if (a.zindex < b.zindex)
|
||||||
|
return -1;
|
||||||
|
if (a.zindex > b.zindex)
|
||||||
|
return 1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
allnotes.forEach(function(thisone){
|
||||||
|
delete thisone.zindex;
|
||||||
|
});
|
||||||
|
|
||||||
|
text=JSON.stringify(allnotes);
|
||||||
|
//ajax out
|
||||||
|
req.open("POST", "fav.php", true);
|
||||||
|
req.setRequestHeader("Content-type", "application/json");
|
||||||
|
req.onreadystatechange = function()
|
||||||
|
{
|
||||||
|
if (req.readyState == 4) {
|
||||||
|
$('#saveallnotes').hide(); //=(saved)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
req.send(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#saveallnotes').click(saveallnotes); // set function to link
|
||||||
|
|
||||||
|
$('#chtoption').click(function () { // set function to menu for options
|
||||||
|
$('#chtoptmenu').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.chme').mouseleave(function(){
|
||||||
|
$(this).hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#chboard').click(function () {
|
||||||
|
$('#chlist').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ajax in
|
||||||
|
reqini.open("GET", "allnotes.json", true);
|
||||||
|
reqini.onreadystatechange = function()
|
||||||
|
{
|
||||||
|
if (reqini.readyState == 4) {
|
||||||
|
text=reqini.responseText;
|
||||||
|
try {
|
||||||
|
JSON.parse(text);
|
||||||
|
} catch (e) {
|
||||||
|
text = '[]';
|
||||||
|
}
|
||||||
|
JSON.parse(text).forEach(function(note){
|
||||||
|
$('#addanote_result').postitall(note);
|
||||||
|
});
|
||||||
|
$('.PIApostit').postitall('isittosave','#saveallnotes'); // prevents to save on load! and sets id to hide/show
|
||||||
|
$('#saveallnotes').hide(); //=(saved)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reqini.send(null);
|
||||||
|
});
|
||||||
|
// timer to save every 10 s. if required
|
||||||
|
window.setInterval(function () {
|
||||||
|
if($('.PIApostit').postitall('isittosave')){saveallnotes()}
|
||||||
|
}, 10000);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1109
sources/libs/bootstrap-responsive.css
vendored
Normal file
1109
sources/libs/bootstrap-responsive.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
9
sources/libs/bootstrap-responsive.min.css
vendored
Normal file
9
sources/libs/bootstrap-responsive.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6158
sources/libs/bootstrap.css
vendored
Normal file
6158
sources/libs/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
2268
sources/libs/bootstrap.js
vendored
Normal file
2268
sources/libs/bootstrap.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
9
sources/libs/bootstrap.min.css
vendored
Normal file
9
sources/libs/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
sources/libs/bootstrap.min.js
vendored
Normal file
6
sources/libs/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
sources/libs/jquery-1.9.1.min.js
vendored
Normal file
5
sources/libs/jquery-1.9.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1174
sources/libs/jquery-ui-1.10.0.custom.css
vendored
Normal file
1174
sources/libs/jquery-ui-1.10.0.custom.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
5
sources/libs/jquery-ui-1.10.1.min.js
vendored
Normal file
5
sources/libs/jquery-ui-1.10.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1174
sources/libs/jquery-ui.css
vendored
Normal file
1174
sources/libs/jquery-ui.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
278
sources/libs/jquery.minicolors.css
Normal file
278
sources/libs/jquery.minicolors.css
Normal file
|
|
@ -0,0 +1,278 @@
|
||||||
|
.minicolors {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-focus {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors.minicolors-theme-default .minicolors-input {
|
||||||
|
margin: 0px;
|
||||||
|
margin-right: 3px;
|
||||||
|
border: solid 1px #CCC;
|
||||||
|
font: 14px sans-serif;
|
||||||
|
width: 65px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .04);
|
||||||
|
padding: 2px;
|
||||||
|
margin-right: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-theme-default.minicolors .minicolors-input {
|
||||||
|
vertical-align: middle;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-theme-default.minicolors-swatch-left .minicolors-input {
|
||||||
|
margin-left: -1px;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-theme-default.minicolors-focus .minicolors-input,
|
||||||
|
.minicolors-theme-default.minicolors-focus .minicolors-swatch {
|
||||||
|
border-color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-hidden {
|
||||||
|
position: absolute;
|
||||||
|
left: -9999em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-swatch {
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: left;
|
||||||
|
background: url(jquery.minicolors.png) -80px 0;
|
||||||
|
border: solid 1px #CCC;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-swatch SPAN {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: none;
|
||||||
|
box-shadow: inset 0 9px 0 rgba(255, 255, 255, .1);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Panel */
|
||||||
|
.minicolors-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 26px;
|
||||||
|
left: 0;
|
||||||
|
width: 173px;
|
||||||
|
height: 152px;
|
||||||
|
background: white;
|
||||||
|
border: solid 1px #CCC;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-position-top .minicolors-panel {
|
||||||
|
top: -156px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-position-left .minicolors-panel {
|
||||||
|
left: -83px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-position-left.minicolors-with-opacity .minicolors-panel {
|
||||||
|
left: -104px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-with-opacity .minicolors-panel {
|
||||||
|
width: 194px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors .minicolors-grid {
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 1px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
background: url(jquery.minicolors.png) -120px 0;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors .minicolors-grid-inner {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider-saturation .minicolors-grid {
|
||||||
|
background-position: -420px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider-saturation .minicolors-grid-inner {
|
||||||
|
background: url(jquery.minicolors.png) -270px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider-brightness .minicolors-grid {
|
||||||
|
background-position: -570px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider-brightness .minicolors-grid-inner {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider-wheel .minicolors-grid {
|
||||||
|
background-position: -720px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider,
|
||||||
|
.minicolors-opacity-slider {
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 152px;
|
||||||
|
width: 20px;
|
||||||
|
height: 150px;
|
||||||
|
background: white url(jquery.minicolors.png) 0 0;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider-saturation .minicolors-slider {
|
||||||
|
background-position: -60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider-brightness .minicolors-slider {
|
||||||
|
background-position: -20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-slider-wheel .minicolors-slider {
|
||||||
|
background-position: -20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-opacity-slider {
|
||||||
|
left: 173px;
|
||||||
|
background-position: -40px 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-with-opacity .minicolors-opacity-slider {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pickers */
|
||||||
|
.minicolors-grid .minicolors-picker {
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
left: 70px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border: solid 1px black;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: -6px;
|
||||||
|
margin-left: -6px;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-grid .minicolors-picker SPAN {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: solid 2px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-picker {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 18px;
|
||||||
|
height: 2px;
|
||||||
|
background: white;
|
||||||
|
border: solid 1px black;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline controls */
|
||||||
|
.minicolors-inline .minicolors-input,
|
||||||
|
.minicolors-inline .minicolors-swatch {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-inline .minicolors-panel {
|
||||||
|
position: relative;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Bootstrap Theme (theme: 'bootstrap')
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Input styles */
|
||||||
|
.minicolors-theme-bootstrap .minicolors-input {
|
||||||
|
padding: 4px 6px;
|
||||||
|
padding-left: 30px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #CCC;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #555;
|
||||||
|
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 19px;
|
||||||
|
margin: 0px;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When the input has focus */
|
||||||
|
.minicolors-theme-bootstrap.minicolors-focus .minicolors-input {
|
||||||
|
border-color: #6fb8f1;
|
||||||
|
box-shadow: 0 0 10px #6fb8f1;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Swatch styles */
|
||||||
|
.minicolors-theme-bootstrap .minicolors-swatch {
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 4px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle swatch position (left = default / right) */
|
||||||
|
.minicolors-theme-bootstrap.minicolors-swatch-position-right .minicolors-input {
|
||||||
|
padding-left: 6px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-theme-bootstrap.minicolors-swatch-position-right .minicolors-swatch {
|
||||||
|
left: auto;
|
||||||
|
right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Panel styles */
|
||||||
|
.minicolors-theme-bootstrap .minicolors-panel {
|
||||||
|
top: 28px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle panel positions (top / left) */
|
||||||
|
.minicolors-theme-bootstrap.minicolors-position-top .minicolors-panel {
|
||||||
|
top: -154px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minicolors-theme-bootstrap.minicolors-position-left .minicolors-panel {
|
||||||
|
left: -63px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Don't forget to adjust the left position in case the opacity slider is visible! */
|
||||||
|
.minicolors-theme-bootstrap.minicolors-position-left.minicolors-with-opacity .minicolors-panel {
|
||||||
|
left: -84px;
|
||||||
|
}
|
||||||
857
sources/libs/jquery.minicolors.js
Normal file
857
sources/libs/jquery.minicolors.js
Normal file
|
|
@ -0,0 +1,857 @@
|
||||||
|
/*
|
||||||
|
* jQuery MiniColors: A tiny color picker built on jQuery
|
||||||
|
*
|
||||||
|
* Copyright Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/)
|
||||||
|
*
|
||||||
|
* Dual-licensed under the MIT and GPL Version 2 licenses
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
if(jQuery) (function($) {
|
||||||
|
|
||||||
|
// Yay, MiniColors!
|
||||||
|
$.minicolors = {
|
||||||
|
// Default settings
|
||||||
|
defaultSettings: {
|
||||||
|
animationSpeed: 100,
|
||||||
|
animationEasing: 'swing',
|
||||||
|
change: null,
|
||||||
|
changeDelay: 0,
|
||||||
|
control: 'hue',
|
||||||
|
defaultValue: '',
|
||||||
|
hide: null,
|
||||||
|
hideSpeed: 100,
|
||||||
|
inline: false,
|
||||||
|
letterCase: 'lowercase',
|
||||||
|
opacity: false,
|
||||||
|
position: 'default',
|
||||||
|
show: null,
|
||||||
|
showSpeed: 100,
|
||||||
|
swatchPosition: 'left',
|
||||||
|
textfield: true,
|
||||||
|
theme: 'default'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
$.extend($.fn, {
|
||||||
|
minicolors: function(method, data) {
|
||||||
|
|
||||||
|
switch(method) {
|
||||||
|
|
||||||
|
// Destroy the control
|
||||||
|
case 'destroy':
|
||||||
|
$(this).each( function() {
|
||||||
|
destroy($(this));
|
||||||
|
});
|
||||||
|
return $(this);
|
||||||
|
|
||||||
|
// Hide the color picker
|
||||||
|
case 'hide':
|
||||||
|
hide();
|
||||||
|
return $(this);
|
||||||
|
|
||||||
|
// Get/set opacity
|
||||||
|
case 'opacity':
|
||||||
|
if( data === undefined ) {
|
||||||
|
// Getter
|
||||||
|
return $(this).attr('data-opacity');
|
||||||
|
} else {
|
||||||
|
// Setter
|
||||||
|
$(this).each( function() {
|
||||||
|
refresh($(this).attr('data-opacity', data));
|
||||||
|
});
|
||||||
|
return $(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get an RGB(A) object based on the current color/opacity
|
||||||
|
case 'rgbObject':
|
||||||
|
return rgbObject($(this), method === 'rgbaObject');
|
||||||
|
|
||||||
|
// Get an RGB(A) string based on the current color/opacity
|
||||||
|
case 'rgbString':
|
||||||
|
case 'rgbaString':
|
||||||
|
return rgbString($(this), method === 'rgbaString')
|
||||||
|
|
||||||
|
// Get/set settings on the fly
|
||||||
|
case 'settings':
|
||||||
|
if( data === undefined ) {
|
||||||
|
return $(this).data('minicolors-settings');
|
||||||
|
} else {
|
||||||
|
// Setter
|
||||||
|
$(this).each( function() {
|
||||||
|
var settings = $(this).data('minicolors-settings') || {};
|
||||||
|
destroy($(this));
|
||||||
|
$(this).minicolors($.extend(true, settings, data));
|
||||||
|
});
|
||||||
|
return $(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show the color picker
|
||||||
|
case 'show':
|
||||||
|
show( $(this).eq(0) );
|
||||||
|
return $(this);
|
||||||
|
|
||||||
|
// Get/set the hex color value
|
||||||
|
case 'value':
|
||||||
|
if( data === undefined ) {
|
||||||
|
// Getter
|
||||||
|
return $(this).val();
|
||||||
|
} else {
|
||||||
|
// Setter
|
||||||
|
$(this).each( function() {
|
||||||
|
refresh($(this).val(data));
|
||||||
|
});
|
||||||
|
return $(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initializes the control
|
||||||
|
case 'create':
|
||||||
|
default:
|
||||||
|
if( method !== 'create' ) data = method;
|
||||||
|
$(this).each( function() {
|
||||||
|
init($(this), data);
|
||||||
|
});
|
||||||
|
return $(this);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize input elements
|
||||||
|
function init(input, settings) {
|
||||||
|
|
||||||
|
var minicolors = $('<span class="minicolors" />'),
|
||||||
|
defaultSettings = $.minicolors.defaultSettings;
|
||||||
|
|
||||||
|
// Do nothing if already initialized
|
||||||
|
if( input.data('minicolors-initialized') ) return;
|
||||||
|
|
||||||
|
// Handle settings
|
||||||
|
settings = $.extend(true, {}, defaultSettings, settings);
|
||||||
|
|
||||||
|
// The wrapper
|
||||||
|
minicolors
|
||||||
|
.addClass('minicolors-theme-' + settings.theme)
|
||||||
|
.addClass('minicolors-swatch-position-' + settings.swatchPosition)
|
||||||
|
.toggleClass('minicolors-swatch-left', settings.swatchPosition === 'left')
|
||||||
|
.toggleClass('minicolors-with-opacity', settings.opacity);
|
||||||
|
|
||||||
|
// Custom positioning
|
||||||
|
if( settings.position !== undefined ) {
|
||||||
|
$.each(settings.position.split(' '), function() {
|
||||||
|
minicolors.addClass('minicolors-position-' + this);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// The input
|
||||||
|
input
|
||||||
|
.addClass('minicolors-input')
|
||||||
|
.data('minicolors-initialized', true)
|
||||||
|
.data('minicolors-settings', settings)
|
||||||
|
.prop('size', 7)
|
||||||
|
.prop('maxlength', 7)
|
||||||
|
.wrap(minicolors)
|
||||||
|
.after(
|
||||||
|
'<span class="minicolors-panel minicolors-slider-' + settings.control + '">' +
|
||||||
|
'<span class="minicolors-slider">' +
|
||||||
|
'<span class="minicolors-picker"></span>' +
|
||||||
|
'</span>' +
|
||||||
|
'<span class="minicolors-opacity-slider">' +
|
||||||
|
'<span class="minicolors-picker"></span>' +
|
||||||
|
'</span>' +
|
||||||
|
'<span class="minicolors-grid">' +
|
||||||
|
'<span class="minicolors-grid-inner"></span>' +
|
||||||
|
'<span class="minicolors-picker"><span></span></span>' +
|
||||||
|
'</span>' +
|
||||||
|
'</span>'
|
||||||
|
);
|
||||||
|
|
||||||
|
// Prevent text selection in IE
|
||||||
|
input.parent().find('.minicolors-panel').on('selectstart', function() { return false; }).end();
|
||||||
|
|
||||||
|
// Detect swatch position
|
||||||
|
if( settings.swatchPosition === 'left' ) {
|
||||||
|
// Left
|
||||||
|
input.before('<span class="minicolors-swatch"><span></span></span>');
|
||||||
|
} else {
|
||||||
|
// Right
|
||||||
|
input.after('<span class="minicolors-swatch"><span></span></span>');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disable textfield
|
||||||
|
if( !settings.textfield ) input.addClass('minicolors-hidden');
|
||||||
|
|
||||||
|
// Inline controls
|
||||||
|
if( settings.inline ) input.parent().addClass('minicolors-inline');
|
||||||
|
|
||||||
|
updateFromInput(input, false, true);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Returns the input back to its original state
|
||||||
|
function destroy(input) {
|
||||||
|
|
||||||
|
var minicolors = input.parent();
|
||||||
|
|
||||||
|
// Revert the input element
|
||||||
|
input
|
||||||
|
.removeData('minicolors-initialized')
|
||||||
|
.removeData('minicolors-settings')
|
||||||
|
.removeProp('size')
|
||||||
|
.removeProp('maxlength')
|
||||||
|
.removeClass('minicolors-input');
|
||||||
|
|
||||||
|
// Remove the wrap and destroy whatever remains
|
||||||
|
minicolors.before(input).remove();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Refresh the specified control
|
||||||
|
function refresh(input) {
|
||||||
|
updateFromInput(input);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shows the specified dropdown panel
|
||||||
|
function show(input) {
|
||||||
|
|
||||||
|
var minicolors = input.parent(),
|
||||||
|
panel = minicolors.find('.minicolors-panel'),
|
||||||
|
settings = input.data('minicolors-settings');
|
||||||
|
|
||||||
|
// Do nothing if uninitialized, disabled, inline, or already open
|
||||||
|
if( !input.data('minicolors-initialized') ||
|
||||||
|
input.prop('disabled') ||
|
||||||
|
minicolors.hasClass('minicolors-inline') ||
|
||||||
|
minicolors.hasClass('minicolors-focus')
|
||||||
|
) return;
|
||||||
|
|
||||||
|
hide();
|
||||||
|
|
||||||
|
minicolors.addClass('minicolors-focus');
|
||||||
|
panel
|
||||||
|
.stop(true, true)
|
||||||
|
.fadeIn(settings.showSpeed, function() {
|
||||||
|
if( settings.show ) settings.show.call(input);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hides all dropdown panels
|
||||||
|
function hide() {
|
||||||
|
|
||||||
|
$('.minicolors-input').each( function() {
|
||||||
|
|
||||||
|
var input = $(this),
|
||||||
|
settings = input.data('minicolors-settings'),
|
||||||
|
minicolors = input.parent();
|
||||||
|
|
||||||
|
// Don't hide inline controls
|
||||||
|
if( settings.inline ) return;
|
||||||
|
|
||||||
|
minicolors.find('.minicolors-panel').fadeOut(settings.hideSpeed, function() {
|
||||||
|
if(minicolors.hasClass('minicolors-focus')) {
|
||||||
|
if( settings.hide ) settings.hide.call(input);
|
||||||
|
}
|
||||||
|
minicolors.removeClass('minicolors-focus');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Moves the selected picker
|
||||||
|
function move(target, event, animate) {
|
||||||
|
|
||||||
|
var input = target.parents('.minicolors').find('.minicolors-input'),
|
||||||
|
settings = input.data('minicolors-settings'),
|
||||||
|
picker = target.find('[class$=-picker]'),
|
||||||
|
offsetX = target.offset().left,
|
||||||
|
offsetY = target.offset().top,
|
||||||
|
x = Math.round(event.pageX - offsetX),
|
||||||
|
y = Math.round(event.pageY - offsetY),
|
||||||
|
duration = animate ? settings.animationSpeed : 0,
|
||||||
|
wx, wy, r, phi;
|
||||||
|
|
||||||
|
|
||||||
|
// Touch support
|
||||||
|
if( event.originalEvent.changedTouches ) {
|
||||||
|
x = event.originalEvent.changedTouches[0].pageX - offsetX;
|
||||||
|
y = event.originalEvent.changedTouches[0].pageY - offsetY;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Constrain picker to its container
|
||||||
|
if( x < 0 ) x = 0;
|
||||||
|
if( y < 0 ) y = 0;
|
||||||
|
if( x > target.width() ) x = target.width();
|
||||||
|
if( y > target.height() ) y = target.height();
|
||||||
|
|
||||||
|
// Constrain color wheel values to the wheel
|
||||||
|
if( target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid') ) {
|
||||||
|
wx = 75 - x;
|
||||||
|
wy = 75 - y;
|
||||||
|
r = Math.sqrt(wx * wx + wy * wy);
|
||||||
|
phi = Math.atan2(wy, wx);
|
||||||
|
if( phi < 0 ) phi += Math.PI * 2;
|
||||||
|
if( r > 75 ) {
|
||||||
|
r = 75;
|
||||||
|
x = 75 - (75 * Math.cos(phi));
|
||||||
|
y = 75 - (75 * Math.sin(phi));
|
||||||
|
}
|
||||||
|
x = Math.round(x);
|
||||||
|
y = Math.round(y);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Move the picker
|
||||||
|
if( target.is('.minicolors-grid') ) {
|
||||||
|
picker
|
||||||
|
.stop(true)
|
||||||
|
.animate({
|
||||||
|
top: y + 'px',
|
||||||
|
left: x + 'px'
|
||||||
|
}, duration, settings.animationEasing, function() {
|
||||||
|
updateFromControl(input, target);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
picker
|
||||||
|
.stop(true)
|
||||||
|
.animate({
|
||||||
|
top: y + 'px'
|
||||||
|
}, duration, settings.animationEasing, function() {
|
||||||
|
updateFromControl(input, target);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sets the input based on the color picker values
|
||||||
|
function updateFromControl(input, target) {
|
||||||
|
|
||||||
|
function getCoords(picker, container) {
|
||||||
|
|
||||||
|
var left, top;
|
||||||
|
if( !picker.length || !container ) return null;
|
||||||
|
left = picker.offset().left;
|
||||||
|
top = picker.offset().top;
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: left - container.offset().left + (picker.outerWidth() / 2),
|
||||||
|
y: top - container.offset().top + (picker.outerHeight() / 2)
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var hue, saturation, brightness, rgb, x, y, r, phi,
|
||||||
|
|
||||||
|
hex = input.val(),
|
||||||
|
opacity = input.attr('data-opacity'),
|
||||||
|
|
||||||
|
// Helpful references
|
||||||
|
minicolors = input.parent(),
|
||||||
|
settings = input.data('minicolors-settings'),
|
||||||
|
panel = minicolors.find('.minicolors-panel'),
|
||||||
|
swatch = minicolors.find('.minicolors-swatch'),
|
||||||
|
|
||||||
|
// Panel objects
|
||||||
|
grid = minicolors.find('.minicolors-grid'),
|
||||||
|
slider = minicolors.find('.minicolors-slider'),
|
||||||
|
opacitySlider = minicolors.find('.minicolors-opacity-slider'),
|
||||||
|
|
||||||
|
// Picker objects
|
||||||
|
gridPicker = grid.find('[class$=-picker]'),
|
||||||
|
sliderPicker = slider.find('[class$=-picker]'),
|
||||||
|
opacityPicker = opacitySlider.find('[class$=-picker]'),
|
||||||
|
|
||||||
|
// Picker positions
|
||||||
|
gridPos = getCoords(gridPicker, grid),
|
||||||
|
sliderPos = getCoords(sliderPicker, slider),
|
||||||
|
opacityPos = getCoords(opacityPicker, opacitySlider);
|
||||||
|
|
||||||
|
// Handle colors
|
||||||
|
if( target.is('.minicolors-grid, .minicolors-slider') ) {
|
||||||
|
|
||||||
|
// Determine HSB values
|
||||||
|
switch(settings.control) {
|
||||||
|
|
||||||
|
case 'wheel':
|
||||||
|
// Calculate hue, saturation, and brightness
|
||||||
|
x = (grid.width() / 2) - gridPos.x;
|
||||||
|
y = (grid.height() / 2) - gridPos.y;
|
||||||
|
r = Math.sqrt(x * x + y * y);
|
||||||
|
phi = Math.atan2(y, x);
|
||||||
|
if( phi < 0 ) phi += Math.PI * 2;
|
||||||
|
if( r > 75 ) {
|
||||||
|
r = 75;
|
||||||
|
gridPos.x = 69 - (75 * Math.cos(phi));
|
||||||
|
gridPos.y = 69 - (75 * Math.sin(phi));
|
||||||
|
}
|
||||||
|
saturation = keepWithin(r / 0.75, 0, 100);
|
||||||
|
hue = keepWithin(phi * 180 / Math.PI, 0, 360);
|
||||||
|
brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
|
||||||
|
hex = hsb2hex({
|
||||||
|
h: hue,
|
||||||
|
s: saturation,
|
||||||
|
b: brightness
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update UI
|
||||||
|
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'saturation':
|
||||||
|
// Calculate hue, saturation, and brightness
|
||||||
|
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width())), 0, 360);
|
||||||
|
saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
|
||||||
|
brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
|
||||||
|
hex = hsb2hex({
|
||||||
|
h: hue,
|
||||||
|
s: saturation,
|
||||||
|
b: brightness
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update UI
|
||||||
|
slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
|
||||||
|
minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'brightness':
|
||||||
|
// Calculate hue, saturation, and brightness
|
||||||
|
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width())), 0, 360);
|
||||||
|
saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
|
||||||
|
brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
|
||||||
|
hex = hsb2hex({
|
||||||
|
h: hue,
|
||||||
|
s: saturation,
|
||||||
|
b: brightness
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update UI
|
||||||
|
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
|
||||||
|
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
// Calculate hue, saturation, and brightness
|
||||||
|
hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height())), 0, 360);
|
||||||
|
saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
|
||||||
|
brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
|
||||||
|
hex = hsb2hex({
|
||||||
|
h: hue,
|
||||||
|
s: saturation,
|
||||||
|
b: brightness
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update UI
|
||||||
|
grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust case
|
||||||
|
input.val( convertCase(hex, settings.letterCase) );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle opacity
|
||||||
|
if( target.is('.minicolors-opacity-slider') ) {
|
||||||
|
if( settings.opacity ) {
|
||||||
|
opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
|
||||||
|
} else {
|
||||||
|
opacity = 1;
|
||||||
|
}
|
||||||
|
if( settings.opacity ) input.attr('data-opacity', opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set swatch color
|
||||||
|
swatch.find('SPAN').css({
|
||||||
|
backgroundColor: hex,
|
||||||
|
opacity: opacity
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle change event
|
||||||
|
doChange(input, hex, opacity);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sets the color picker values from the input
|
||||||
|
function updateFromInput(input, preserveInputValue, firstRun) {
|
||||||
|
|
||||||
|
var hex,
|
||||||
|
hsb,
|
||||||
|
opacity,
|
||||||
|
x, y, r, phi,
|
||||||
|
|
||||||
|
// Helpful references
|
||||||
|
minicolors = input.parent(),
|
||||||
|
settings = input.data('minicolors-settings'),
|
||||||
|
swatch = minicolors.find('.minicolors-swatch'),
|
||||||
|
|
||||||
|
// Panel objects
|
||||||
|
grid = minicolors.find('.minicolors-grid'),
|
||||||
|
slider = minicolors.find('.minicolors-slider'),
|
||||||
|
opacitySlider = minicolors.find('.minicolors-opacity-slider'),
|
||||||
|
|
||||||
|
// Picker objects
|
||||||
|
gridPicker = grid.find('[class$=-picker]'),
|
||||||
|
sliderPicker = slider.find('[class$=-picker]'),
|
||||||
|
opacityPicker = opacitySlider.find('[class$=-picker]');
|
||||||
|
|
||||||
|
// Determine hex/HSB values
|
||||||
|
hex = convertCase(parseHex(input.val(), true), settings.letterCase);
|
||||||
|
if( !hex ) hex = convertCase(parseHex(settings.defaultValue, true));
|
||||||
|
hsb = hex2hsb(hex);
|
||||||
|
|
||||||
|
// Update input value
|
||||||
|
if( !preserveInputValue ) input.val(hex);
|
||||||
|
|
||||||
|
// Determine opacity value
|
||||||
|
if( settings.opacity ) {
|
||||||
|
// Get from data-opacity attribute and keep within 0-1 range
|
||||||
|
opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
|
||||||
|
if( isNaN(opacity) ) opacity = 1;
|
||||||
|
input.attr('data-opacity', opacity);
|
||||||
|
swatch.find('SPAN').css('opacity', opacity);
|
||||||
|
|
||||||
|
// Set opacity picker position
|
||||||
|
y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
|
||||||
|
opacityPicker.css('top', y + 'px');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update swatch
|
||||||
|
swatch.find('SPAN').css('backgroundColor', hex);
|
||||||
|
|
||||||
|
// Determine picker locations
|
||||||
|
switch(settings.control) {
|
||||||
|
|
||||||
|
case 'wheel':
|
||||||
|
// Set grid position
|
||||||
|
r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
|
||||||
|
phi = hsb.h * Math.PI / 180;
|
||||||
|
x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
|
||||||
|
y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
|
||||||
|
gridPicker.css({
|
||||||
|
top: y + 'px',
|
||||||
|
left: x + 'px'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set slider position
|
||||||
|
y = 150 - (hsb.b / (100 / grid.height()));
|
||||||
|
if( hex === '' ) y = 0;
|
||||||
|
sliderPicker.css('top', y + 'px');
|
||||||
|
|
||||||
|
// Update panel color
|
||||||
|
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'saturation':
|
||||||
|
// Set grid position
|
||||||
|
x = keepWithin((5 * hsb.h) / 12, 0, 150);
|
||||||
|
y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
|
||||||
|
gridPicker.css({
|
||||||
|
top: y + 'px',
|
||||||
|
left: x + 'px'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set slider position
|
||||||
|
y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
|
||||||
|
sliderPicker.css('top', y + 'px');
|
||||||
|
|
||||||
|
// Update UI
|
||||||
|
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
|
||||||
|
minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
|
||||||
|
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'brightness':
|
||||||
|
// Set grid position
|
||||||
|
x = keepWithin((5 * hsb.h) / 12, 0, 150);
|
||||||
|
y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
|
||||||
|
gridPicker.css({
|
||||||
|
top: y + 'px',
|
||||||
|
left: x + 'px'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set slider position
|
||||||
|
y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
|
||||||
|
sliderPicker.css('top', y + 'px');
|
||||||
|
|
||||||
|
// Update UI
|
||||||
|
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
|
||||||
|
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
// Set grid position
|
||||||
|
x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
|
||||||
|
y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
|
||||||
|
gridPicker.css({
|
||||||
|
top: y + 'px',
|
||||||
|
left: x + 'px'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set slider position
|
||||||
|
y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
|
||||||
|
sliderPicker.css('top', y + 'px');
|
||||||
|
|
||||||
|
// Update panel color
|
||||||
|
grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle change event
|
||||||
|
if( !firstRun ) doChange(input, hex, opacity);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Runs the change and changeDelay callbacks
|
||||||
|
function doChange(input, hex, opacity) {
|
||||||
|
|
||||||
|
var settings = input.data('minicolors-settings');
|
||||||
|
|
||||||
|
// Only run if it actually changed
|
||||||
|
if( hex + opacity !== input.data('minicolors-lastChange') ) {
|
||||||
|
|
||||||
|
// Remember last-changed value
|
||||||
|
input.data('minicolors-lastChange', hex + opacity);
|
||||||
|
|
||||||
|
// Fire change event
|
||||||
|
if( settings.change ) {
|
||||||
|
if( settings.changeDelay ) {
|
||||||
|
// Call after a delay
|
||||||
|
clearTimeout(input.data('minicolors-changeTimeout'));
|
||||||
|
input.data('minicolors-changeTimeout', setTimeout( function() {
|
||||||
|
settings.change.call(input, hex, opacity);
|
||||||
|
}, settings.changeDelay));
|
||||||
|
} else {
|
||||||
|
// Call immediately
|
||||||
|
settings.change.call(input, hex, opacity);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generates an RGB(A) object based on the input's value
|
||||||
|
function rgbObject(input) {
|
||||||
|
var hex = parseHex($(input).val(), true),
|
||||||
|
rgb = hex2rgb(hex),
|
||||||
|
opacity = $(input).attr('data-opacity');
|
||||||
|
if( !rgb ) return null;
|
||||||
|
if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
|
||||||
|
return rgb;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Genearates an RGB(A) string based on the input's value
|
||||||
|
function rgbString(input, alpha) {
|
||||||
|
var hex = parseHex($(input).val(), true),
|
||||||
|
rgb = hex2rgb(hex),
|
||||||
|
opacity = $(input).attr('data-opacity');
|
||||||
|
if( !rgb ) return null;
|
||||||
|
if( opacity === undefined ) opacity = 1;
|
||||||
|
if( alpha ) {
|
||||||
|
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
|
||||||
|
} else {
|
||||||
|
return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Converts to the letter case specified in settings
|
||||||
|
function convertCase(string, letterCase) {
|
||||||
|
return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parses a string and returns a valid hex string when possible
|
||||||
|
function parseHex(string, expand) {
|
||||||
|
string = string.replace(/[^A-F0-9]/ig, '');
|
||||||
|
if( string.length !== 3 && string.length !== 6 ) return '';
|
||||||
|
if( string.length === 3 && expand ) {
|
||||||
|
string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
|
||||||
|
}
|
||||||
|
return '#' + string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keeps value within min and max
|
||||||
|
function keepWithin(value, min, max) {
|
||||||
|
if( value < min ) value = min;
|
||||||
|
if( value > max ) value = max;
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Converts an HSB object to an RGB object
|
||||||
|
function hsb2rgb(hsb) {
|
||||||
|
var rgb = {};
|
||||||
|
var h = Math.round(hsb.h);
|
||||||
|
var s = Math.round(hsb.s * 255 / 100);
|
||||||
|
var v = Math.round(hsb.b * 255 / 100);
|
||||||
|
if(s === 0) {
|
||||||
|
rgb.r = rgb.g = rgb.b = v;
|
||||||
|
} else {
|
||||||
|
var t1 = v;
|
||||||
|
var t2 = (255 - s) * v / 255;
|
||||||
|
var t3 = (t1 - t2) * (h % 60) / 60;
|
||||||
|
if( h === 360 ) h = 0;
|
||||||
|
if( h < 60 ) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
|
||||||
|
else if( h < 120 ) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
|
||||||
|
else if( h < 180 ) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
|
||||||
|
else if( h < 240 ) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
|
||||||
|
else if( h < 300 ) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
|
||||||
|
else if( h < 360 ) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
|
||||||
|
else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
r: Math.round(rgb.r),
|
||||||
|
g: Math.round(rgb.g),
|
||||||
|
b: Math.round(rgb.b)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Converts an RGB object to a hex string
|
||||||
|
function rgb2hex(rgb) {
|
||||||
|
var hex = [
|
||||||
|
rgb.r.toString(16),
|
||||||
|
rgb.g.toString(16),
|
||||||
|
rgb.b.toString(16)
|
||||||
|
];
|
||||||
|
$.each(hex, function(nr, val) {
|
||||||
|
if (val.length === 1) hex[nr] = '0' + val;
|
||||||
|
});
|
||||||
|
return '#' + hex.join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Converts an HSB object to a hex string
|
||||||
|
function hsb2hex(hsb) {
|
||||||
|
return rgb2hex(hsb2rgb(hsb));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Converts a hex string to an HSB object
|
||||||
|
function hex2hsb(hex) {
|
||||||
|
var hsb = rgb2hsb(hex2rgb(hex));
|
||||||
|
if( hsb.s === 0 ) hsb.h = 360;
|
||||||
|
return hsb;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Converts an RGB object to an HSB object
|
||||||
|
function rgb2hsb(rgb) {
|
||||||
|
var hsb = { h: 0, s: 0, b: 0 };
|
||||||
|
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||||
|
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||||
|
var delta = max - min;
|
||||||
|
hsb.b = max;
|
||||||
|
hsb.s = max !== 0 ? 255 * delta / max : 0;
|
||||||
|
if( hsb.s !== 0 ) {
|
||||||
|
if( rgb.r === max ) {
|
||||||
|
hsb.h = (rgb.g - rgb.b) / delta;
|
||||||
|
} else if( rgb.g === max ) {
|
||||||
|
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||||
|
} else {
|
||||||
|
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
hsb.h = -1;
|
||||||
|
}
|
||||||
|
hsb.h *= 60;
|
||||||
|
if( hsb.h < 0 ) {
|
||||||
|
hsb.h += 360;
|
||||||
|
}
|
||||||
|
hsb.s *= 100/255;
|
||||||
|
hsb.b *= 100/255;
|
||||||
|
return hsb;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Converts a hex string to an RGB object
|
||||||
|
function hex2rgb(hex) {
|
||||||
|
hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||||
|
return {
|
||||||
|
r: hex >> 16,
|
||||||
|
g: (hex & 0x00FF00) >> 8,
|
||||||
|
b: (hex & 0x0000FF)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle events
|
||||||
|
$(document)
|
||||||
|
// Hide on clicks outside of the control
|
||||||
|
.on('mousedown.minicolors touchstart.minicolors', function(event) {
|
||||||
|
if( !$(event.target).parents().add(event.target).hasClass('minicolors') ) {
|
||||||
|
hide();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// Start moving
|
||||||
|
.on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
|
||||||
|
var target = $(this);
|
||||||
|
event.preventDefault();
|
||||||
|
$(document).data('minicolors-target', target);
|
||||||
|
move(target, event, true);
|
||||||
|
})
|
||||||
|
// Move pickers
|
||||||
|
.on('mousemove.minicolors touchmove.minicolors', function(event) {
|
||||||
|
var target = $(document).data('minicolors-target');
|
||||||
|
if( target ) move(target, event);
|
||||||
|
})
|
||||||
|
// Stop moving
|
||||||
|
.on('mouseup.minicolors touchend.minicolors', function() {
|
||||||
|
$(this).removeData('minicolors-target');
|
||||||
|
})
|
||||||
|
// Toggle panel when swatch is clicked
|
||||||
|
.on('mousedown.minicolors touchstart.minicolors', '.minicolors-swatch', function(event) {
|
||||||
|
var input = $(this).parent().find('.minicolors-input'),
|
||||||
|
minicolors = input.parent();
|
||||||
|
if( minicolors.hasClass('minicolors-focus') ) {
|
||||||
|
hide(input);
|
||||||
|
} else {
|
||||||
|
show(input);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// Show on focus
|
||||||
|
.on('focus.minicolors', '.minicolors-input', function(event) {
|
||||||
|
var input = $(this);
|
||||||
|
if( !input.data('minicolors-initialized') ) return;
|
||||||
|
show(input);
|
||||||
|
})
|
||||||
|
// Fix hex on blur
|
||||||
|
.on('blur.minicolors', '.minicolors-input', function(event) {
|
||||||
|
var input = $(this),
|
||||||
|
settings = input.data('minicolors-settings');
|
||||||
|
if( !input.data('minicolors-initialized') ) return;
|
||||||
|
|
||||||
|
// Parse Hex
|
||||||
|
input.val(parseHex(input.val(), true));
|
||||||
|
|
||||||
|
// Is it blank?
|
||||||
|
if( input.val() === '' ) input.val(parseHex(settings.defaultValue, true));
|
||||||
|
|
||||||
|
// Adjust case
|
||||||
|
input.val( convertCase(input.val(), settings.letterCase) );
|
||||||
|
|
||||||
|
})
|
||||||
|
// Handle keypresses
|
||||||
|
.on('keydown.minicolors', '.minicolors-input', function(event) {
|
||||||
|
var input = $(this);
|
||||||
|
if( !input.data('minicolors-initialized') ) return;
|
||||||
|
switch(event.keyCode) {
|
||||||
|
case 9: // tab
|
||||||
|
hide();
|
||||||
|
break;
|
||||||
|
case 27: // esc
|
||||||
|
hide();
|
||||||
|
input.blur();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// Update on keyup
|
||||||
|
.on('keyup.minicolors', '.minicolors-input', function(event) {
|
||||||
|
var input = $(this);
|
||||||
|
if( !input.data('minicolors-initialized') ) return;
|
||||||
|
updateFromInput(input, true);
|
||||||
|
})
|
||||||
|
// Update on paste
|
||||||
|
.on('paste.minicolors', '.minicolors-input', function(event) {
|
||||||
|
var input = $(this);
|
||||||
|
if( !input.data('minicolors-initialized') ) return;
|
||||||
|
setTimeout( function() {
|
||||||
|
updateFromInput(input, true);
|
||||||
|
}, 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
BIN
sources/libs/jquery.minicolors.png
Normal file
BIN
sources/libs/jquery.minicolors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
150
sources/libs/main.css
Normal file
150
sources/libs/main.css
Normal file
|
|
@ -0,0 +1,150 @@
|
||||||
|
body {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
color: #5a5a5a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float_right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.float_left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom container */
|
||||||
|
.container {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1000px;
|
||||||
|
}
|
||||||
|
.container > hr {
|
||||||
|
margin: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main marketing message and sign up button */
|
||||||
|
.jumbotron {
|
||||||
|
margin: 80px 0px 40px 0px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.jumbotron h1 {
|
||||||
|
font-size: 100px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.jumbotron .lead {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
.jumbotron .btn {
|
||||||
|
font-size: 21px;
|
||||||
|
padding: 14px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Customize the navbar links to be fill the entire space of the .navbar */
|
||||||
|
.navbar .navbar-inner {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.navbar .nav {
|
||||||
|
margin: 0;
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.navbar .nav li {
|
||||||
|
display: table-cell;
|
||||||
|
width: 1%;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
.navbar .nav li a {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
border-left: 1px solid rgba(255,255,255,.75);
|
||||||
|
border-right: 1px solid rgba(0,0,0,.1);
|
||||||
|
}
|
||||||
|
.navbar .nav li:first-child a {
|
||||||
|
border-left: 0;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .nav li:last-child a {
|
||||||
|
border-right: 0;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MARKETING CONTENT -------------------------------------------------- */
|
||||||
|
|
||||||
|
/* Center align the text within the three columns below the carousel */
|
||||||
|
.marketing .span4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.marketing h2 {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.marketing .span4 p {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Featurettes ------------------------- */
|
||||||
|
|
||||||
|
.featurette-divider {
|
||||||
|
margin: 80px 0; /* Space out the Bootstrap <hr> more */
|
||||||
|
}
|
||||||
|
.featurette {
|
||||||
|
/*padding-top: 120px;*/ /* Vertically center images part 1: add padding above and below text. */
|
||||||
|
overflow: hidden; /* Vertically center images part 2: clear their floats. */
|
||||||
|
}
|
||||||
|
.featurette-image {
|
||||||
|
/*margin-top: -120px;*/ /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
|
||||||
|
.featurette-image.pull-left {
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
.featurette-image.pull-right {
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Thin out the marketing headings */
|
||||||
|
.featurette-heading {
|
||||||
|
font-size: 50px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* RESPONSIVE CSS -------------------------------------------------- */
|
||||||
|
|
||||||
|
@media (max-width: 979px) {
|
||||||
|
|
||||||
|
.featurette {
|
||||||
|
height: auto;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.featurette-image.pull-left,
|
||||||
|
.featurette-image.pull-right {
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
max-width: 40%;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
|
||||||
|
.featurette-heading {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.featurette .lead {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
30
sources/libs/main.js
Normal file
30
sources/libs/main.js
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
//Navigation menu scroll
|
||||||
|
$(function() {
|
||||||
|
$('.navegable').click(function() {
|
||||||
|
$('#navigation li').removeClass('active');
|
||||||
|
$(this).parent('li').addClass('active');
|
||||||
|
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
|
||||||
|
var $target = $(this.hash);
|
||||||
|
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
|
||||||
|
if ($target.length) {
|
||||||
|
var targetOffset = $target.offset().top - 80;
|
||||||
|
$('html,body').animate({scrollTop: targetOffset}, 1000);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function GetSitePath() {
|
||||||
|
var rootPath = window.location.protocol + "//" + window.location.host;
|
||||||
|
var path = window.location.pathname;
|
||||||
|
if (path.lastIndexOf("/") == 0) {
|
||||||
|
path = path.substring(1);
|
||||||
|
}
|
||||||
|
path = path.substr(0,path.lastIndexOf("/"));
|
||||||
|
if (path != "") {
|
||||||
|
rootPath = rootPath + path + '/';
|
||||||
|
}
|
||||||
|
return rootPath;
|
||||||
|
}
|
||||||
|
|
||||||
0
sources/libs/plugin.css
Normal file
0
sources/libs/plugin.css
Normal file
169
sources/plugin/jquery.postitall.css
Normal file
169
sources/plugin/jquery.postitall.css
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
.PIAtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.PIAdate {
|
||||||
|
float:left;
|
||||||
|
line-height:10px;
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
.minicolors-panel {
|
||||||
|
border: solid 20px #555;
|
||||||
|
}
|
||||||
|
#chmenu {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
z-index: 100000;
|
||||||
|
width: 275px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
#chmenu label{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.PIAtoolbar .PIAchopt {
|
||||||
|
background-image: url(data:image/gif;base64,R0lGODlhDQANAMwAAF5eXm5ubktLS29vb0xMTFlZWVxcXFBQUGRkZE5OTqWlpbS0tLa1tU9PT01OTU1NTZSUlJOTk6Sjo6WmpaSkpLOzs2VlZaenp5GSkXBwcO/v7wAAAAAAAAAAAAAAAAAAACH5BAEAABoALAAAAAANAA0AAAU7IPQQZFkm12EAbNsW1pQNdG0zWq7vfM9HBIFwOEwoVK5kAaEYBJ7Q6MJHreYwQSLRIWmski8ExRktV0IAOw==);
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
#chmenu ul {
|
||||||
|
top: 20px;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 275px;
|
||||||
|
}
|
||||||
|
#chmenu ul li {
|
||||||
|
font: 14px;
|
||||||
|
margin-right: -4px;
|
||||||
|
position: relative;
|
||||||
|
padding: 5px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #555;
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#chmenu ul li:hover { background: #666; }
|
||||||
|
.center { text-align: center; }
|
||||||
|
.float-left { float: left; }
|
||||||
|
.float-right { float: right; }
|
||||||
|
.vertical-bottom { vertical-align: bottom; }
|
||||||
|
.vertical-middle { vertical-align: middle; }
|
||||||
|
.vertical-top { vertical-align: top; }
|
||||||
|
.clear { clear: both; }
|
||||||
|
.red { color: red; }
|
||||||
|
.red a { color: red; font-weight: bold; text-decoration: none; }
|
||||||
|
.red a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* Postit */
|
||||||
|
.PIApostit {
|
||||||
|
/*color: #333;
|
||||||
|
min-width:130px;
|
||||||
|
min-height:150px;*/
|
||||||
|
padding:4px;
|
||||||
|
font-size:85%;
|
||||||
|
position:absolute;
|
||||||
|
display: none;
|
||||||
|
z-index: 9995;
|
||||||
|
|
||||||
|
background: -moz-linear-gradient(top, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0) 100%);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.46)), color-stop(100%,rgba(255,255,255,0)));
|
||||||
|
background: -webkit-linear-gradient(top, rgba(255,255,255,0.46) 0%,rgba(255,255,255,0) 100%);
|
||||||
|
background: -o-linear-gradient(top, rgba(255,255,255,0.46) 0%,rgba(255,255,255,0) 100%);
|
||||||
|
background: -ms-linear-gradient(top, rgba(255,255,255,0.46) 0%,rgba(255,255,255,0) 100%);
|
||||||
|
background: linear-gradient(to bottom, rgba(255,255,255,0.46) 0%,rgba(255,255,255,0) 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75ffffff', endColorstr='#00ffffff',GradientType=0 );
|
||||||
|
|
||||||
|
}
|
||||||
|
.PIAicon {
|
||||||
|
cursor: pointer;
|
||||||
|
float: left;
|
||||||
|
width:20px;
|
||||||
|
height:20px;
|
||||||
|
background-position: center;
|
||||||
|
margin-right: 2px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
/*background-color: #ffd;
|
||||||
|
-webkit-border-radius: 4px 4px 4px 4px;
|
||||||
|
-moz-border-radius: 4px 4px 4px 4px;
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
border: 1px solid #bbb;*/
|
||||||
|
}
|
||||||
|
.PIApostit div.PIAtoolbar {
|
||||||
|
text-align:left;
|
||||||
|
cursor: move;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
height: 16px;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.PIApostit div.PIAeditable {
|
||||||
|
clear: both;
|
||||||
|
cursor:pointer;
|
||||||
|
position:relative;
|
||||||
|
min-height:50px;
|
||||||
|
}
|
||||||
|
/** xxx **/
|
||||||
|
.PIAeditable > input, .PIAeditable > textarea, .PIAeditable[contenteditable="true"], .PIAeditable > select {
|
||||||
|
border: 0px;
|
||||||
|
background-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PIApostit div.PIAeditable:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.PIApostit div.PIAcontent {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-resizable-helper { border: 1px dotted gray; }
|
||||||
|
|
||||||
|
/* FLIP-CARD */
|
||||||
|
.panel {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
border:1px solid gray;
|
||||||
|
-moz-box-shadow:4px 4px 4px #999999;
|
||||||
|
-webkit-box-shadow:4px 4px 4px #999999;
|
||||||
|
box-shadow:4px 4px 4px #999999;
|
||||||
|
|
||||||
|
-webkit-perspective: 600px;
|
||||||
|
-moz-perspective: 600px;
|
||||||
|
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* -- make sure to declare a default for every property that you want animated -- */
|
||||||
|
/* -- general styles, including Y axis rotation -- */
|
||||||
|
.panel .front {
|
||||||
|
float: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
|
||||||
|
width: 99%;
|
||||||
|
height: 99%;
|
||||||
|
|
||||||
|
-moz-transform: rotateX(0deg) rotateY(0deg); /* FF3.5/3.6 */
|
||||||
|
-o-transform: rotateX(0deg) rotateY(0deg); /* Opera 10.5 */
|
||||||
|
-webkit-transform: rotateX(0deg) rotateY(0deg); /* Saf3.1+ */
|
||||||
|
transform: rotateX(0deg) rotateY(0deg); /* Newer browsers (incl IE9) */
|
||||||
|
/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
|
||||||
|
/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
|
||||||
|
|
||||||
|
-webkit-transform-style: preserve-3d;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
-moz-transform-style: preserve-3d;
|
||||||
|
-moz-backface-visibility: hidden;
|
||||||
|
-o-transform-style: preserve-3d;
|
||||||
|
-o-backface-visibility: hidden;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
|
||||||
|
/* -- transition is the magic sauce for animation -- */
|
||||||
|
-o-transition: all .4s ease-in-out;
|
||||||
|
-ms-transition: all .4s ease-in-out;
|
||||||
|
-moz-transition: all .4s ease-in-out;
|
||||||
|
-webkit-transition: all .4s ease-in-out;
|
||||||
|
transition: all .4s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
465
sources/plugin/jquery.postitall.js
Normal file
465
sources/plugin/jquery.postitall.js
Normal file
|
|
@ -0,0 +1,465 @@
|
||||||
|
/**
|
||||||
|
* jquery.postitall.js specific to ChtickyNotes by chtixof
|
||||||
|
* written on the basis of jquery.postitall.js v0.1 - 2015
|
||||||
|
* Original notice:
|
||||||
|
* jQuery Post It All Plugin - released under MIT License
|
||||||
|
* Author: Javi Filella <txusko@gmail.com>
|
||||||
|
* http://github.com/txusko/PostItAll
|
||||||
|
* Copyright (c) 2013 Javi Filella
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person
|
||||||
|
* obtaining a copy of this software and associated documentation
|
||||||
|
* files (the "Software"), to deal in the Software without
|
||||||
|
* restriction, including without limitation the rights to use,
|
||||||
|
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
* copies of the Software, and to permit persons to whom the
|
||||||
|
* Software is furnished to do so, subject to the following
|
||||||
|
* conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be
|
||||||
|
* included in all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||||
|
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
|
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||||
|
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||||
|
* OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Global Vars
|
||||||
|
var options;
|
||||||
|
var nextid = -1;
|
||||||
|
var zindex=9995;
|
||||||
|
var tobesaved=false;
|
||||||
|
var cssidsave="";
|
||||||
|
var actson;
|
||||||
|
|
||||||
|
// for css color settings
|
||||||
|
function rgb2hex(rgb) {
|
||||||
|
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
|
||||||
|
|
||||||
|
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
||||||
|
function hex(x) {
|
||||||
|
return ("0" + parseInt(x).toString(16)).slice(-2);
|
||||||
|
}
|
||||||
|
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// actions in case of any change
|
||||||
|
function settobesaved() {
|
||||||
|
tobesaved=true;
|
||||||
|
if(cssidsave!=="") {
|
||||||
|
$(cssidsave).css("display", "");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// menu items to select color
|
||||||
|
function selcolor(idli,idinput,label,cssatt,optvar){
|
||||||
|
$(idli).html("");
|
||||||
|
$(idli).append($('<label />',{'for': idinput}).html(label+' '))
|
||||||
|
.append($('<input />', {
|
||||||
|
'class': 'minicolors',
|
||||||
|
'id': idinput,
|
||||||
|
'type': 'text',
|
||||||
|
'value': rgb2hex($(actson).css(cssatt)),
|
||||||
|
'width': '75px'
|
||||||
|
}));
|
||||||
|
$('#'+idinput).minicolors({
|
||||||
|
change: function (hex) {
|
||||||
|
$(actson).css(cssatt, hex);
|
||||||
|
$(actson).data('PIA-options')[optvar]=hex;
|
||||||
|
settobesaved();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// displays option menu
|
||||||
|
function chopt(e) {
|
||||||
|
//right position
|
||||||
|
$('#chmenu').css('left',$(this).offset().left);
|
||||||
|
$('#chmenu').css('top',$(this).offset().top);
|
||||||
|
//what note menu acts on
|
||||||
|
actson = $(this).parent().parent().parent();
|
||||||
|
//set bgcolor
|
||||||
|
selcolor('#chbg', 'minicolors_bg', 'Background-color','background-color','backgroundcolor');
|
||||||
|
//set text color
|
||||||
|
selcolor('#chco', 'minicolors_tx', 'Text-color','color','textcolor');
|
||||||
|
//set hide/show date
|
||||||
|
$('#chda').html(actson.data('PIA-options').showdate ? 'Hide the date' : 'Display the date');
|
||||||
|
//show
|
||||||
|
$('#chmenu').show();
|
||||||
|
}
|
||||||
|
|
||||||
|
// action menu delete
|
||||||
|
function chdelete(e) {
|
||||||
|
$('#chmenu').hide();
|
||||||
|
destroy($(actson));
|
||||||
|
e.preventDefault();
|
||||||
|
return(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// action menu clone
|
||||||
|
function chclone(e) {
|
||||||
|
var options = $.extend({},$(actson).data('PIA-options'));
|
||||||
|
$('#chmenu').hide();
|
||||||
|
options.posX=(parseInt(options.posX)+50)+"px";
|
||||||
|
options.posY=(parseInt(options.posY)-50)+"px";
|
||||||
|
delete options.id;
|
||||||
|
delete options.date;
|
||||||
|
$('#addanote_result').postitall(options);
|
||||||
|
return(0);
|
||||||
|
}
|
||||||
|
// action menu display date
|
||||||
|
function chdate(e) {
|
||||||
|
$('#chmenu').hide();
|
||||||
|
actson.data('PIA-options').showdate = !actson.data('PIA-options').showdate ;
|
||||||
|
if (actson.data('PIA-options').showdate) {
|
||||||
|
$(".PIAdate",actson).show();
|
||||||
|
} else {
|
||||||
|
$(".PIAdate",actson).hide();
|
||||||
|
}
|
||||||
|
return(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
//Destroy object
|
||||||
|
function destroy(obj) {
|
||||||
|
var id = obj.data('PIA-id');
|
||||||
|
options = obj.data('PIA-options');
|
||||||
|
//Destroy object
|
||||||
|
obj
|
||||||
|
.removeData('PIA-id')
|
||||||
|
.removeData('PIA-settings')
|
||||||
|
.hide("slow", function () {
|
||||||
|
$(this).remove();
|
||||||
|
});
|
||||||
|
settobesaved();
|
||||||
|
}
|
||||||
|
|
||||||
|
//Autoresize postit
|
||||||
|
function autoresize(obj) {
|
||||||
|
var id = obj.data('PIA-id');
|
||||||
|
options = obj.data('PIA-options');
|
||||||
|
if (options.autoheight) {
|
||||||
|
var posY = $('#idPostIt_' + id).parent().css('left'),
|
||||||
|
posX = $('#idPostIt_' + id).parent().css('top'),
|
||||||
|
divWidth = $('#idPostIt_' + id).width(),
|
||||||
|
divHeight = $('#idPostIt_' + id).find('.PIAeditable').height(),
|
||||||
|
minDivHeight = options.minHeight;
|
||||||
|
if (divHeight >= minDivHeight) {
|
||||||
|
divHeight += 50;
|
||||||
|
options.height = divHeight;
|
||||||
|
obj.css('height', divHeight);
|
||||||
|
if ($.ui) {
|
||||||
|
if (options.resizable) {
|
||||||
|
obj.resizable({
|
||||||
|
minHeight: divHeight
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (divHeight < minDivHeight) {
|
||||||
|
options.height = minDivHeight;
|
||||||
|
minDivHeight += 50;
|
||||||
|
obj.css('height', minDivHeight);
|
||||||
|
}
|
||||||
|
options.posY = posY;
|
||||||
|
options.posX = posX;
|
||||||
|
options.width = divWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set options
|
||||||
|
function setOptions(opt, save) {
|
||||||
|
if (typeof opt !== 'object') {
|
||||||
|
opt = {};
|
||||||
|
}
|
||||||
|
if (save === undefined) {
|
||||||
|
save = false;
|
||||||
|
}
|
||||||
|
options = $.extend(options, opt);
|
||||||
|
/*jslint unparam: true*/
|
||||||
|
$.each(['onChange', 'onSelect', 'onRelease', 'onDblClick'], function (i, e) {
|
||||||
|
if (typeof options[e] !== 'function') {
|
||||||
|
options[e] = function () { return undefined; };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/*jslint unparam: false*/
|
||||||
|
if (save) {
|
||||||
|
settobesaved();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Create a postit
|
||||||
|
function create(obj, options) {
|
||||||
|
|
||||||
|
obj.data('PIA-id', nextid)
|
||||||
|
.data('PIA-options', options);
|
||||||
|
//Postit editable content
|
||||||
|
if (options.description === "") {
|
||||||
|
if (obj.html() !== "") {
|
||||||
|
options.description = obj.html();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//Front page: toolbar
|
||||||
|
var barCursor = "cursor: inherit;";
|
||||||
|
if (options.draggable) {
|
||||||
|
barCursor = "cursor: move;";
|
||||||
|
}
|
||||||
|
var toolbar = $('<div />', {
|
||||||
|
'id': 'pia_toolbar_' + nextid.toString(),
|
||||||
|
'class': 'PIAtoolbar',
|
||||||
|
'style': barCursor
|
||||||
|
});
|
||||||
|
//Drag support without jQuery UI
|
||||||
|
if (!$.ui) {
|
||||||
|
if (options.draggable) {
|
||||||
|
toolbar.drags();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toolbar.html('<span class="PIAdate">'+options.date+'</span><span class="PIAtitle"></span>');
|
||||||
|
|
||||||
|
//Menu icon
|
||||||
|
toolbar.append($('<div />', {'class': 'PIAchopt PIAicon'}).click(chopt));
|
||||||
|
//Front page: content
|
||||||
|
var content = $('<div />', {
|
||||||
|
'id': 'pia_editable_' + nextid.toString(),
|
||||||
|
'class': 'PIAeditable PIAcontent'
|
||||||
|
}).change(function () {
|
||||||
|
options.description = $(this).html();
|
||||||
|
obj.data('PIA-options', options);
|
||||||
|
autoresize(obj);
|
||||||
|
settobesaved();
|
||||||
|
}).attr('contenteditable', true).html(options.description);
|
||||||
|
|
||||||
|
//Create postit
|
||||||
|
var postit = $('<div />', { 'id': 'idPostIt_' + nextid.toString(), 'data-id': nextid })
|
||||||
|
.append(toolbar).append(content);
|
||||||
|
//Convert relative position to prevent height and width in html layout
|
||||||
|
if (options.position === "relative") {
|
||||||
|
options.position = "absolute";
|
||||||
|
options.posX = obj.offset().top + parseInt(options.posX, 10) ;
|
||||||
|
options.posX += "px";
|
||||||
|
options.posY = obj.offset().left + parseInt(options.posY, 10) ;
|
||||||
|
options.posY += "px";
|
||||||
|
}
|
||||||
|
//Modify final Postit Object
|
||||||
|
obj.removeClass()
|
||||||
|
.addClass('block panel PIApostit')
|
||||||
|
.css('z-index', zindex++)
|
||||||
|
.css('position', options.position)
|
||||||
|
.css('left', options.posY)
|
||||||
|
.css('top', options.posX)
|
||||||
|
.css('width', options.width + 'px')
|
||||||
|
.css('height', (options.height + 30) + 'px') //Increase 30 pixels for the toolbar
|
||||||
|
.css('background-color', options.backgroundcolor)
|
||||||
|
.css('color', options.textcolor);
|
||||||
|
obj.html(postit)
|
||||||
|
.on('focus', '[contenteditable]', function () {
|
||||||
|
var objeto = $(this);
|
||||||
|
objeto.data('before', objeto.html());
|
||||||
|
return objeto;
|
||||||
|
}).on('blur keyup paste', '[contenteditable]', function () {
|
||||||
|
var objeto = $(this);
|
||||||
|
if (objeto.data('before') !== objeto.html()) {
|
||||||
|
objeto.data('before', objeto.html());
|
||||||
|
objeto.trigger('change');
|
||||||
|
}
|
||||||
|
return objeto;
|
||||||
|
}).click(function () {
|
||||||
|
$(this).css('z-index', zindex++);
|
||||||
|
settobesaved();
|
||||||
|
}).load(function () {
|
||||||
|
//Autoresize to fit content when content load is done
|
||||||
|
autoresize($(this));
|
||||||
|
});
|
||||||
|
if ($.ui) {
|
||||||
|
if (options.draggable) {
|
||||||
|
obj.draggable({
|
||||||
|
handle: ".PIAtoolbar",
|
||||||
|
scroll: false,
|
||||||
|
start: function () {
|
||||||
|
$(this).css('z-index', zindex++);
|
||||||
|
$(this).draggable('disable');
|
||||||
|
},
|
||||||
|
stop: function () {
|
||||||
|
$(this).draggable('enable');
|
||||||
|
autoresize($(this));
|
||||||
|
settobesaved();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (options.resizable) {
|
||||||
|
obj.resizable({
|
||||||
|
animate: false,
|
||||||
|
helper: 'ui-resizable-helper',
|
||||||
|
minHeight: options.minHeight,
|
||||||
|
minWidth: options.minWidth,
|
||||||
|
stop: function () {
|
||||||
|
autoresize($(this));
|
||||||
|
settobesaved();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
obj.slideDown('slow', function () {
|
||||||
|
});
|
||||||
|
settobesaved();
|
||||||
|
//chaining
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize elements
|
||||||
|
function init(obj, opt) {
|
||||||
|
if (++nextid===0) {
|
||||||
|
obj.append($('<div />', { 'id' : 'chmenu'}).mouseleave(function(){$(this).hide();})
|
||||||
|
.append($('<ul/>')
|
||||||
|
.append($('<li/>',{'id': 'chbg'}))
|
||||||
|
.append($('<li/>',{'id': 'chco'}))
|
||||||
|
.append($('<li/>',{'id': 'chda'}).click(chdate))
|
||||||
|
.append($('<li/>').click(chclone).append('Clone'))
|
||||||
|
.append($('<li/>').click(chdelete).append('Delete'))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//Default options
|
||||||
|
options = $.extend({}, $.fn.postitall.defaults);
|
||||||
|
options.id=nextid;
|
||||||
|
options.date= (new Date ()).toLocaleDateString () +'<br>'+ (new Date ()).toLocaleTimeString();
|
||||||
|
|
||||||
|
//Set options
|
||||||
|
if (typeof opt !== 'object') {
|
||||||
|
opt = {};
|
||||||
|
}
|
||||||
|
setOptions(opt);
|
||||||
|
|
||||||
|
var PIAcontent = $('<div />', { 'id' : 'newPostIt_' + nextid });
|
||||||
|
obj.append(PIAcontent);
|
||||||
|
return create(PIAcontent, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// PLUGIN Public methods
|
||||||
|
$.extend($.fn, {
|
||||||
|
postitall: function (method, data) {
|
||||||
|
//Debugging
|
||||||
|
var debugging = true; // or true
|
||||||
|
if (typeof console === "undefined") {
|
||||||
|
console = {
|
||||||
|
log: function () { return undefined; }
|
||||||
|
};
|
||||||
|
} else if (!debugging || console.log === undefined) {
|
||||||
|
console.log = function () { return undefined; };
|
||||||
|
}
|
||||||
|
switch (method) {
|
||||||
|
// Destroy the control
|
||||||
|
case 'destroy':
|
||||||
|
$(this).each(function () {
|
||||||
|
destroy($(this));
|
||||||
|
});
|
||||||
|
return $(this);
|
||||||
|
// Get/set options on the fly
|
||||||
|
case 'options':
|
||||||
|
if (data === undefined) {
|
||||||
|
return $(this).data('PIA-options');
|
||||||
|
}
|
||||||
|
// Setter
|
||||||
|
$(this).each(function () {
|
||||||
|
options = $(this).data('PIA-options') || {};
|
||||||
|
destroy($(this));
|
||||||
|
$(this).postitall($.extend(true, options, data));
|
||||||
|
});
|
||||||
|
return $(this);
|
||||||
|
case 'isittosave':
|
||||||
|
var answer=tobesaved;
|
||||||
|
tobesaved=false;
|
||||||
|
if (data !== undefined) {
|
||||||
|
cssidsave=data;
|
||||||
|
}
|
||||||
|
return (answer);
|
||||||
|
// Initializes the control
|
||||||
|
default:
|
||||||
|
//case 'create' :
|
||||||
|
if (method !== 'create') {
|
||||||
|
data = method;
|
||||||
|
}
|
||||||
|
$(this).each(function () {
|
||||||
|
init($(this), data);
|
||||||
|
});
|
||||||
|
return $(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Default Plugin Vars
|
||||||
|
$.fn.postitall.defaults = {
|
||||||
|
// Basic Settings
|
||||||
|
showdate : true,
|
||||||
|
backgroundcolor : '#FFFC7F', //Background color
|
||||||
|
textcolor : '#333333', //Text color
|
||||||
|
position : 'absolute', //Position absolute or relative
|
||||||
|
posX : '50px', //top position
|
||||||
|
posY : '15px', //left position
|
||||||
|
height : 180, //height
|
||||||
|
width : 200, //width
|
||||||
|
minHeight : 152, //resizable min-width
|
||||||
|
minWidth : 131, //resizable min-height
|
||||||
|
description : '', //content
|
||||||
|
title : '',
|
||||||
|
autoheight : true, //Set autoheight feature on or off
|
||||||
|
draggable : true, //Set draggable feature on or off
|
||||||
|
resizable : true, //Set resizable feature on or off
|
||||||
|
removable : true, //Set removable feature on or off
|
||||||
|
// Callbacks / Event Handlers
|
||||||
|
onChange: function () { return undefined; },
|
||||||
|
onSelect: function () { return undefined; },
|
||||||
|
onDblClick: function () { return undefined; },
|
||||||
|
onRelease: function () { return undefined; }
|
||||||
|
};
|
||||||
|
|
||||||
|
//Drag postits
|
||||||
|
//used if jQuery UI is not loaded
|
||||||
|
$.fn.drags = function (opt) {
|
||||||
|
|
||||||
|
opt = $.extend({handle: "", cursor: "move"}, opt);
|
||||||
|
|
||||||
|
var $el = this;
|
||||||
|
if (opt.handle !== "") {
|
||||||
|
$el = this.find(opt.handle);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
|
||||||
|
var $drag;
|
||||||
|
if (opt.handle === "") {
|
||||||
|
$drag = $(this).parent().parent().parent().addClass('draggable');
|
||||||
|
} else {
|
||||||
|
$drag = $(this).parent().parent().parent().addClass('active-handle').parent().addClass('draggable');
|
||||||
|
}
|
||||||
|
var z_idx = $drag.css('z-index'),
|
||||||
|
drg_h = $drag.outerHeight(),
|
||||||
|
drg_w = $drag.outerWidth(),
|
||||||
|
pos_y = $drag.offset().top + drg_h - e.pageY,
|
||||||
|
pos_x = $drag.offset().left + drg_w - e.pageX;
|
||||||
|
$drag.css('z-index', 1000000).parents().on("mousemove", function (e) {
|
||||||
|
$('.draggable').offset({
|
||||||
|
top: e.pageY + pos_y - drg_h,
|
||||||
|
left: e.pageX + pos_x - drg_w
|
||||||
|
}).on("mouseup", function () {
|
||||||
|
$(this).removeClass('draggable').css('z-index', z_idx);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
e.preventDefault(); // disable selection
|
||||||
|
}).on("mouseup", function () {
|
||||||
|
if (opt.handle === "") {
|
||||||
|
$(this).removeClass('draggable');
|
||||||
|
} else {
|
||||||
|
$(this).removeClass('active-handle').parent().removeClass('draggable');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
Loading…
Add table
Reference in a new issue