Matt
parent
d02dd98700
commit
c4809047d5
|
|
@ -1,4 +1,4 @@
|
|||
#footer {
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
|
@ -13,23 +13,52 @@
|
|||
display: none;
|
||||
}
|
||||
#colors-tabs {
|
||||
width: 400px;
|
||||
width: 411px;
|
||||
}
|
||||
#colors-content {
|
||||
width: 400px;
|
||||
width: 411px;
|
||||
float: left;
|
||||
}
|
||||
.mcopy-light {
|
||||
background: #000;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
#light-status {
|
||||
width: 400px;
|
||||
width: 388px;
|
||||
float: right;
|
||||
}
|
||||
#light-status > div {
|
||||
position: relative;
|
||||
clear: both;
|
||||
}
|
||||
#light-status > div:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
#light-status form {
|
||||
float: left;
|
||||
line-height: 30px;
|
||||
width: 40%;
|
||||
}
|
||||
#light-status form span {
|
||||
width: 20px;
|
||||
margin-left: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
#light-status form input[type=text] {
|
||||
width: 40px;
|
||||
}
|
||||
#preview {
|
||||
margin-top: 40px;
|
||||
}
|
||||
#rgb {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
width: 411px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
#color {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
|
@ -37,3 +66,11 @@
|
|||
background-color: #000;
|
||||
float: right;
|
||||
}
|
||||
.cp-app {
|
||||
position: relative !important;
|
||||
border-radius: 0px !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
.cp-app .cp-memo {
|
||||
bottom: 2px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#footer{
|
||||
footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
|
@ -16,24 +16,52 @@
|
|||
}
|
||||
|
||||
#colors-tabs{
|
||||
width: 400px;
|
||||
width: 411px;
|
||||
}
|
||||
#colors-content{
|
||||
width: 400px;
|
||||
width: 411px;
|
||||
float: left;
|
||||
}
|
||||
.mcopy-light{
|
||||
background: #000;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
#light-status{
|
||||
width: 400px;
|
||||
width: 388px;
|
||||
float: right;
|
||||
>div{
|
||||
position: relative;
|
||||
clear: both;
|
||||
&:after{
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
form{
|
||||
float: left;
|
||||
line-height: 30px;
|
||||
width: 40%;
|
||||
span{
|
||||
width: 20px;
|
||||
margin-left: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
input[type=text]{
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#preview{
|
||||
margin-top: 40px;
|
||||
}
|
||||
#rgb{
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
width: 411px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
#color{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
|
@ -41,3 +69,12 @@
|
|||
background-color: #000;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.cp-app{
|
||||
position: relative !important;
|
||||
border-radius: 0px !important;
|
||||
top: 0px !important;
|
||||
.cp-memo{
|
||||
bottom: 2px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,9 @@ var scripts = [
|
|||
'./src/w2ui-1.4.3.min.js',
|
||||
'./src/moment.min.js',
|
||||
'./src/colors.js',
|
||||
'./src/colorPicker.data.js',
|
||||
'./src/colorPicker.js',
|
||||
'./src/jsColor.js',
|
||||
'./src/chroma.min.js',
|
||||
'./src/index.js'
|
||||
];
|
||||
|
|
|
|||
|
|
@ -13,19 +13,26 @@
|
|||
<nav id="toolbar"></nav>
|
||||
<div id="screens">
|
||||
<div id="controls" class="screen">
|
||||
<footer>
|
||||
<div id="log"></div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="light">
|
||||
<div id="light" class="screen">
|
||||
<div id="colors-tabs"></div>
|
||||
<div id="colors-content">
|
||||
<div id="rgb"></div>
|
||||
<div id="rgb-page" class="colors-page">
|
||||
<input id="rgb" value="rgb(0, 0, 0)" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="light-status">
|
||||
<form>
|
||||
<span>R</span><input type="text" value="0"/><br />
|
||||
<span>G</span><input type="text" value="0"/><br />
|
||||
<span>B</span><input type="text" value="0"/>
|
||||
</form>
|
||||
<div id="color"></div>
|
||||
<div>
|
||||
<form>
|
||||
<span>R</span><input type="text" value="0"/><br />
|
||||
<span>G</span><input type="text" value="0"/><br />
|
||||
<span>B</span><input type="text" value="0"/>
|
||||
</form>
|
||||
<div id="color"></div>
|
||||
</div>
|
||||
Preview
|
||||
<input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
|
||||
</div>
|
||||
|
|
|
|||
387
app/js/app.js
387
app/js/app.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
130
app/src/index.js
130
app/src/index.js
|
|
@ -1,6 +1,7 @@
|
|||
var remote = require('remote'),
|
||||
ipcRenderer = require('electron').ipcRenderer,
|
||||
light = {},
|
||||
nav = {},
|
||||
log = {};
|
||||
//console.log(ipcRenderer.sendSync('light', { 'fuck' : true }) );
|
||||
|
||||
|
|
@ -78,50 +79,137 @@ light.init = function () {
|
|||
{ id: 'kelvin', caption: 'Kelvin'}
|
||||
],
|
||||
onClick: function (event) {
|
||||
$('#colors-content').html('Tab: ' + event.target);
|
||||
//$('#colors-content').html('Tab: ' + event.target);
|
||||
}
|
||||
});
|
||||
/*var myColorPicker = new ColorPicker({
|
||||
color: '', // see Colors...
|
||||
mode: 'rgb-b', // initial mode the color picker is starting with
|
||||
fps: 60, // the framerate colorPicker refreshes the display if no 'requestAnimationFrame'
|
||||
delayOffset: 8, // pixels offset when shifting mouse up/down inside input fields before it starts acting as slider
|
||||
CSSPrefix: 'cp-', // the standard prefix for (almost) all class declarations (HTML, CSS)
|
||||
size: 0, // one of the 4 sizes: 0 = L (large), 1 = S, 2 = XS, 3 = XXS; resize to see what happens...
|
||||
allMixDetails: true, // see Colors...
|
||||
alphaBG: 'w', // initial 3rd layer bgColor (w = white, c = custom (customBG), b = black);
|
||||
customBG: '#808080', // see Colors...
|
||||
noAlpha: true, // disable alpha input (all sliders are gone and current alpha therefore locked)
|
||||
cmyOnly: false, // display CMY instead of CMYK
|
||||
memoryColors: [], // array of colors in memory section
|
||||
opacityPositionRelative: undefined, // render opacity slider arrows in px or %
|
||||
customCSS: undefined, // if external stylesheet, internal will be ignored...
|
||||
appendTo: document.body, // the HTMLElement the colorPicker will be appended to on initialization
|
||||
noRangeBackground: false, // performance option: doesn't render backgrounds in input fields if set to false
|
||||
textRight: false, // not supported yet. Make numbers appear aligned right
|
||||
noHexButton: false, // button next to HEX input could be used for some trigger...
|
||||
noResize: false, // enable / disable resizing of colorPicker
|
||||
noRGBr: false, // active / passive button right to RGB-R display. Disables rendering of 'real' color possibilities...
|
||||
noRGBg: false, // same as above
|
||||
noRGBb: false, // same as above
|
||||
CSSStrength: 'div.', // not in use
|
||||
devPicker: false, // uses existing HTML instead of internal template for developing
|
||||
renderCallback: function(colors, mode){
|
||||
|
||||
}, // callback on after rendering (for further rendering outside colorPicker)
|
||||
actionCallback: function(e, action){
|
||||
|
||||
}, // callback on any action within colorPicker (buttons, sliders, ...)
|
||||
convertCallback: function(colors, type){
|
||||
var a = colors.RND.rgb;
|
||||
light.display([a.r, a.g, a.b]);
|
||||
|
||||
}, // see Colors...
|
||||
});*/
|
||||
var colors = jsColorPicker('#rgb', {
|
||||
customBG: '#222',
|
||||
readOnly: true,
|
||||
size: 3,
|
||||
// patch: false,
|
||||
init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
|
||||
elm.style.backgroundColor = elm.value;
|
||||
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
|
||||
},
|
||||
convertCallback: function(colors, type){
|
||||
var a = colors.RND.rgb,
|
||||
rgb = [a.r, a.g, a.b];
|
||||
light.color = rgb;
|
||||
if (light.preview) {
|
||||
light.display(rgb);
|
||||
light.set(rgb);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
light.display([0, 0, 0]);
|
||||
$('#preview').on('change', function () {
|
||||
light.preview = $(this).prop('checked');
|
||||
if (light.preview) {
|
||||
light.display(light.color);
|
||||
light.set(light.color);
|
||||
} else {
|
||||
light.display([0,0,0]);
|
||||
light.set([0,0,0]);
|
||||
}
|
||||
});
|
||||
};
|
||||
//color = [0,0,0]
|
||||
light.set = function (rgb) {
|
||||
'use strict';
|
||||
light.current = rgb;
|
||||
console.log('color: ' + rgb.join(','));
|
||||
ipcRenderer.sendSync('light', rgb);
|
||||
};
|
||||
|
||||
light.display = function (rgb) {
|
||||
'use strict';
|
||||
for (var i = 0; i < 3; i++) {
|
||||
var str,
|
||||
i;
|
||||
for (i = 0; i < 3; i++) {
|
||||
rgb[i] = Math.floor(rgb[i]);
|
||||
$('#light-status form input').eq(i).val(rgb[i]);
|
||||
}
|
||||
light.color = rgb;
|
||||
$('#color').css('background-color', 'rgb(' + rgb.join(',') + ')');
|
||||
if (light.preview) {
|
||||
light.set(rgb);
|
||||
str = 'rgb(' + rgb.join(',') + ')';
|
||||
$('#color').css('background-color', str);
|
||||
$('.mcopy-light').css('background-color', str);
|
||||
};
|
||||
light.color_on = false;
|
||||
light.color_init = function () {
|
||||
'use strict';
|
||||
if (!light.color_on) {
|
||||
$('#rgb').focus();
|
||||
$('.cp-app').appendTo('#rgb-page');
|
||||
light.color_on = true;
|
||||
}
|
||||
};
|
||||
|
||||
nav.init = function () {
|
||||
'use strict';
|
||||
$('#toolbar').w2toolbar({
|
||||
name: 'toolbar',
|
||||
items: [
|
||||
{ type: 'radio', id: 'sequence', group: '1', caption: 'Sequence', icon: 'fa-star', checked: true },
|
||||
{ type: 'radio', id: 'script', group: '1', caption: 'Script', icon: 'fa-star-empty' },
|
||||
{ type: 'radio', id: 'controls', group: '1', caption: 'Controls', icon: 'fa-star-empty' },
|
||||
{ type: 'radio', id: 'light', group: '1', caption: 'Light', icon: 'mcopy-light' },
|
||||
{ type: 'spacer' },
|
||||
{ type: 'button', id: 'settings', group: '1', caption: 'Settings', icon: 'fa-home' }
|
||||
],
|
||||
onClick : function (event) {
|
||||
nav.change(event.target);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
nav.change = function (id) {
|
||||
'use strict';
|
||||
$('.screen').hide();
|
||||
$('#' + id).show();
|
||||
if (id === 'light') {
|
||||
light.color_init();
|
||||
}
|
||||
};
|
||||
|
||||
var init = function () {
|
||||
'use strict';
|
||||
$('#toolbar').w2toolbar({
|
||||
name: 'toolbar',
|
||||
items: [
|
||||
{ type: 'radio', id: 'item1', group: '1', caption: 'Sequence', icon: 'fa-star', checked: true },
|
||||
{ type: 'radio', id: 'item2', group: '1', caption: 'Script', icon: 'fa-star-empty' },
|
||||
{ type: 'radio', id: 'item3', group: '1', caption: 'Controls', icon: 'fa-star-empty' },
|
||||
{ type: 'radio', id: 'item4', group: '1', caption: 'Light', icon: 'fa-star-empty' },
|
||||
{ type: 'spacer' },
|
||||
{ type: 'button', id: 'item5', group: '1', caption: 'Settings', icon: 'fa-home' }
|
||||
],
|
||||
onClick : function (event) {
|
||||
|
||||
}
|
||||
});
|
||||
nav.init();
|
||||
log.init();
|
||||
light.init();
|
||||
};
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
(function ($, window) {
|
||||
$.fn.extend({
|
||||
colorPicker: function(config) {
|
||||
var renderCallback = function(colors, mode) {
|
||||
var options = this,
|
||||
$input = $(options.input),
|
||||
$patch = $(options.patch),
|
||||
RGB = colors.RND.rgb,
|
||||
HSL = colors.RND.hsl,
|
||||
AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
|
||||
(Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
|
||||
RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
|
||||
RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')',
|
||||
isAlpha = colors.alpha !== 1 && !options.isIE8,
|
||||
colorMode = $input.data('colorMode');
|
||||
|
||||
$patch.css({
|
||||
'color': (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd'), // Black...???
|
||||
'background-color': RGBAText,
|
||||
'filter' : (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
|
||||
'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '')
|
||||
});
|
||||
|
||||
$input.val(colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) :
|
||||
colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
|
||||
(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
|
||||
('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' +
|
||||
(isAlpha ? ', ' + colors.alpha : '') + ')')
|
||||
);
|
||||
|
||||
if (options.displayCallback) {
|
||||
options.displayCallback(colors, mode, options);
|
||||
}
|
||||
},
|
||||
actionCallback = function(event, action) {
|
||||
var options = this,
|
||||
colorPicker = colorPickers.current;
|
||||
|
||||
if (action === 'toMemery') {
|
||||
var memos = colorPicker.nodes.memos,
|
||||
$memo,
|
||||
backgroundColor = '',
|
||||
opacity = 0,
|
||||
cookieTXT = [];
|
||||
|
||||
for (var n = 0, m = memos.length; n < m; n++) {
|
||||
$memo = $(memos[n]);
|
||||
backgroundColor = $memo.css('background-color');
|
||||
opacity = Math.round($memo.css('opacity') * 100) / 100;
|
||||
cookieTXT.push(backgroundColor.
|
||||
replace(/, /g, ',').
|
||||
replace('rgb(', 'rgba(').
|
||||
replace(')', ',' + opacity + ')')
|
||||
);
|
||||
}
|
||||
cookieTXT = '\'' + cookieTXT.join('\',\'') + '\'';
|
||||
$.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
|
||||
} else if (action === 'resizeApp') {
|
||||
$.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
|
||||
} else if (action === 'modeChange') {
|
||||
var mode = colorPicker.color.options.mode;
|
||||
|
||||
$.docCookies('colorPickerMode', mode.type + '-' + mode.z);
|
||||
}
|
||||
},
|
||||
createInstance = function(elm, config) {
|
||||
var initConfig = {
|
||||
klass: window.ColorPicker,
|
||||
input: elm,
|
||||
patch: elm,
|
||||
isIE8: !!document.all && !document.addEventListener, // Opera???
|
||||
animationSpeed: 200,
|
||||
draggable: true,
|
||||
margin: {left: -1, top: 2},
|
||||
customBG: '#FFFFFF',
|
||||
// displayCallback: displayCallback,
|
||||
/* --- regular colorPicker options from this point --- */
|
||||
color: elm.value,
|
||||
initStyle: 'display: none',
|
||||
mode: $.docCookies('colorPickerMode') || 'hsv-h',
|
||||
// memoryColors: (function(colors, config) {
|
||||
// return config.noAlpha ?
|
||||
// colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors;
|
||||
// })($.docCookies('colorPickerMemos'), config || {}),
|
||||
memoryColors: $.docCookies('colorPickerMemos' + ((config || {}).noAlpha ? 'NoAlpha' : '')),
|
||||
size: $.docCookies('colorPickerSize') || 1,
|
||||
renderCallback: renderCallback,
|
||||
actionCallback: actionCallback
|
||||
};
|
||||
|
||||
for (var n in config) {
|
||||
initConfig[n] = config[n];
|
||||
}
|
||||
return new initConfig.klass(initConfig);
|
||||
},
|
||||
doEventListeners = function(elm, multiple, off) {
|
||||
var onOff = off ? 'off' : 'on';
|
||||
|
||||
$(elm)[onOff]('focus.colorPicker', function(e) {
|
||||
var $input = $(this),
|
||||
position = $input.offset(),
|
||||
index = multiple ? $(that).index(this) : 0,
|
||||
colorPicker = colorPickers[index] ||
|
||||
(colorPickers[index] = createInstance(this, config)),
|
||||
options = colorPicker.color.options,
|
||||
$colorPicker = $.ui && options.draggable ?
|
||||
$(colorPicker.nodes.colorPicker).draggable(
|
||||
{cancel: '.' + options.CSSPrefix + 'app div'}
|
||||
) : $(colorPicker.nodes.colorPicker);
|
||||
|
||||
options.color = elm.value; // brings color to default on reset
|
||||
$colorPicker.css({
|
||||
'position': 'absolute',
|
||||
'left': position.left + options.margin.left,
|
||||
'top': position.top + +$input.outerHeight(true) + options.margin.top
|
||||
});
|
||||
if (!multiple) {
|
||||
options.input = elm;
|
||||
options.patch = elm; // check again???
|
||||
colorPicker.setColor(elm.value, undefined, undefined, true);
|
||||
colorPicker.saveAsBackground();
|
||||
}
|
||||
colorPickers.current = colorPickers[index];
|
||||
$(options.appendTo || document.body).append($colorPicker);
|
||||
setTimeout(function() { // compensating late style on onload in colorPicker
|
||||
$colorPicker.show(colorPicker.color.options.animationSpeed);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
$(window)[onOff]('mousedown.colorPicker', function(e) {
|
||||
var colorPicker = colorPickers.current,
|
||||
$colorPicker = $(colorPicker ? colorPicker.nodes.colorPicker : undefined),
|
||||
animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0,
|
||||
isColorPicker = $(e.target).closest('.cp-app')[0],
|
||||
inputIndex = $(that).index(e.target);
|
||||
|
||||
if (isColorPicker && colorPicker && $(colorPickers).index(isColorPicker)) {
|
||||
if (e.target === colorPicker.nodes.exit) {
|
||||
$colorPicker.hide(animationSpeed);
|
||||
$(':focus').trigger('blur');
|
||||
} else {
|
||||
// buttons on colorPicker don't work any more
|
||||
// $(document.body).append(isColorPicker);
|
||||
}
|
||||
} else if (inputIndex !== -1) {
|
||||
// input fireld
|
||||
} else {
|
||||
$colorPicker.hide(animationSpeed);
|
||||
}
|
||||
});
|
||||
},
|
||||
that = this,
|
||||
colorPickers = $.fn.colorPicker.colorPickers || [], // this is a way to prevent data binding on HTMLElements
|
||||
testColors = new window.Colors({
|
||||
customBG: (config && config.customBG) || '#FFFFFF',
|
||||
allMixDetails: true
|
||||
});
|
||||
|
||||
$.fn.colorPicker.colorPickers = colorPickers;
|
||||
|
||||
$(this).each(function(idx, elm) {
|
||||
// doEventListeners(elm, (config && config.multipleInstances), true);
|
||||
$(elm).off('.colorPicker');
|
||||
$(window).off('.colorPicker');
|
||||
if (config !== 'destroy') {
|
||||
var value = elm.value.split('(');
|
||||
$(elm).data('colorMode', value[1] ? value[0].substr(0, 3) : 'HEX');
|
||||
doEventListeners(elm, (config && config.multipleInstances), false);
|
||||
if (config && config.readOnly) {
|
||||
elm.readOnly = true;
|
||||
}
|
||||
testColors.setColor(elm.value);
|
||||
if (config && config.init) {
|
||||
config.init(elm, testColors.colors);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
$.docCookies = function(key, val, options) {
|
||||
var encode = encodeURIComponent, decode = decodeURIComponent,
|
||||
cookies, n, tmp, cache = {},
|
||||
days;
|
||||
|
||||
if (val === undefined) { // all about reading cookies
|
||||
cookies = document.cookie.split('; ') || []; // easier for decoding then with RegExp search // .split(/;\s*/)
|
||||
for (n = cookies.length; n--; ) {
|
||||
tmp = cookies[n].split('=');
|
||||
if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value...
|
||||
}
|
||||
|
||||
if (!key) return cache; // return Json for easy access to all cookies
|
||||
else return cache[key]; // easy access to cookies from here
|
||||
} else { // write/delete cookie
|
||||
options = options || {};
|
||||
|
||||
if (val === '' || options.expires < 0) { // prepare deleteing the cookie
|
||||
options.expires = -1;
|
||||
// options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted...
|
||||
}
|
||||
|
||||
if (options.expires !== undefined) { // prepare date if any
|
||||
days = new Date();
|
||||
days.setDate(days.getDate() + options.expires);
|
||||
}
|
||||
|
||||
document.cookie = encode(key) + '=' + encode(val) +
|
||||
(days ? '; expires=' + days.toUTCString() : '') +
|
||||
(options.path ? '; path=' + options.path : '') +
|
||||
(options.domain ? '; domain=' + options.domain : '') +
|
||||
(options.secure ? '; secure' : '');
|
||||
}
|
||||
};
|
||||
})(jQuery, this);
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
(function (window) {
|
||||
window.jsColorPicker = function(selectors, config) {
|
||||
var renderCallback = function(colors, mode) {
|
||||
var options = this,
|
||||
input = options.input,
|
||||
patch = options.patch,
|
||||
RGB = colors.RND.rgb,
|
||||
HSL = colors.RND.hsl,
|
||||
AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
|
||||
(Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
|
||||
RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
|
||||
RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')',
|
||||
isAlpha = colors.alpha !== 1 && !options.isIE8,
|
||||
colorMode = input.getAttribute('data-colorMode');
|
||||
|
||||
patch.style.cssText =
|
||||
'color:' + (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd') + ';' + // Black...???
|
||||
'background-color:' + RGBAText + ';' +
|
||||
'filter:' + (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
|
||||
'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '');
|
||||
|
||||
input.value = (colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) :
|
||||
colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
|
||||
(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
|
||||
('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' +
|
||||
(isAlpha ? ', ' + colors.alpha : '') + ')')
|
||||
);
|
||||
|
||||
if (options.displayCallback) {
|
||||
options.displayCallback(colors, mode, options);
|
||||
}
|
||||
},
|
||||
extractValue = function(elm) {
|
||||
return elm.value || elm.getAttribute('value') || elm.style.backgroundColor || '#FFFFFF';
|
||||
},
|
||||
actionCallback = function(event, action) {
|
||||
var options = this,
|
||||
colorPicker = colorPickers.current;
|
||||
|
||||
if (action === 'toMemory') {
|
||||
var memos = colorPicker.nodes.memos,
|
||||
backgroundColor = '',
|
||||
opacity = 0,
|
||||
cookieTXT = [];
|
||||
|
||||
for (var n = 0, m = memos.length; n < m; n++) {
|
||||
backgroundColor = memos[n].style.backgroundColor;
|
||||
opacity = memos[n].style.opacity;
|
||||
opacity = Math.round((opacity === '' ? 1 : opacity) * 100) / 100;
|
||||
cookieTXT.push(backgroundColor.
|
||||
replace(/, /g, ',').
|
||||
replace('rgb(', 'rgba(').
|
||||
replace(')', ',' + opacity + ')')
|
||||
);
|
||||
}
|
||||
cookieTXT = '\'' + cookieTXT.join('\',\'') + '\'';
|
||||
ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
|
||||
} else if (action === 'resizeApp') {
|
||||
ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
|
||||
} else if (action === 'modeChange') {
|
||||
var mode = colorPicker.color.options.mode;
|
||||
|
||||
ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z);
|
||||
}
|
||||
},
|
||||
createInstance = function(elm, config) {
|
||||
var initConfig = {
|
||||
klass: window.ColorPicker,
|
||||
input: elm,
|
||||
patch: elm,
|
||||
isIE8: !!document.all && !document.addEventListener, // Opera???
|
||||
// *** animationSpeed: 200,
|
||||
// *** draggable: true,
|
||||
margin: {left: -1, top: 2},
|
||||
customBG: '#FFFFFF',
|
||||
// displayCallback: displayCallback,
|
||||
/* --- regular colorPicker options from this point --- */
|
||||
color: extractValue(elm),
|
||||
initStyle: 'display: block',
|
||||
mode: ColorPicker.docCookies('colorPickerMode') || 'hsv-h',
|
||||
// memoryColors: (function(colors, config) {
|
||||
// return config.noAlpha ?
|
||||
// colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors;
|
||||
// })($.docCookies('colorPickerMemos'), config || {}),
|
||||
memoryColors: ColorPicker.docCookies('colorPickerMemos' +
|
||||
((config || {}).noAlpha ? 'NoAlpha' : '')),
|
||||
size: ColorPicker.docCookies('colorPickerSize') || 1,
|
||||
renderCallback: renderCallback,
|
||||
actionCallback: actionCallback
|
||||
};
|
||||
|
||||
for (var n in config) {
|
||||
initConfig[n] = config[n];
|
||||
}
|
||||
return new initConfig.klass(initConfig);
|
||||
},
|
||||
doEventListeners = function(elm, multiple, off) {
|
||||
var onOff = off ? 'removeEventListener' : 'addEventListener',
|
||||
focusListener = function(e) {
|
||||
var input = this,
|
||||
position = window.ColorPicker.getOrigin(input),
|
||||
index = multiple ? Array.prototype.indexOf.call(elms, this) : 0,
|
||||
colorPicker = colorPickers[index] ||
|
||||
(colorPickers[index] = createInstance(this, config)),
|
||||
options = colorPicker.color.options,
|
||||
colorPickerUI = colorPicker.nodes.colorPicker;
|
||||
|
||||
options.color = extractValue(elm); // brings color to default on reset
|
||||
colorPickerUI.style.cssText =
|
||||
'position: absolute;' +
|
||||
'left:' + (position.left + options.margin.left) + 'px;' +
|
||||
'top:' + (position.top + +input.offsetHeight + options.margin.top) + 'px;';
|
||||
|
||||
if (!multiple) {
|
||||
options.input = elm;
|
||||
options.patch = elm; // check again???
|
||||
colorPicker.setColor(extractValue(elm), undefined, undefined, true);
|
||||
colorPicker.saveAsBackground();
|
||||
}
|
||||
colorPickers.current = colorPickers[index];
|
||||
(options.appendTo || document.body).appendChild(colorPickerUI);
|
||||
setTimeout(function() { // compensating late style on onload in colorPicker
|
||||
colorPickerUI.style.display = 'block';
|
||||
}, 0);
|
||||
},
|
||||
mousDownListener = function(e) {
|
||||
var colorPicker = colorPickers.current,
|
||||
colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined),
|
||||
animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0,
|
||||
isColorPicker = colorPicker && (function(elm) {
|
||||
while (elm) {
|
||||
if ((elm.className || '').indexOf('cp-app') !== -1) return elm;
|
||||
elm = elm.parentNode;
|
||||
}
|
||||
return false;
|
||||
})(e.target),
|
||||
inputIndex = Array.prototype.indexOf.call(elms, e.target);
|
||||
|
||||
if (isColorPicker && Array.prototype.indexOf.call(colorPickers, isColorPicker)) {
|
||||
if (e.target === colorPicker.nodes.exit) {
|
||||
//colorPickerUI.style.display = 'none';
|
||||
//document.activeElement.blur();
|
||||
} else {
|
||||
// ...
|
||||
}
|
||||
} else if (inputIndex !== -1) {
|
||||
// ...
|
||||
} else if (colorPickerUI) {
|
||||
//colorPickerUI.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
elm[onOff]('focus', focusListener);
|
||||
|
||||
if (!colorPickers.evt || off) {
|
||||
colorPickers.evt = true; // prevent new eventListener for window
|
||||
|
||||
window[onOff]('mousedown', mousDownListener);
|
||||
}
|
||||
},
|
||||
// this is a way to prevent data binding on HTMLElements
|
||||
colorPickers = window.jsColorPicker.colorPickers || [],
|
||||
elms = document.querySelectorAll(selectors),
|
||||
testColors = new window.Colors({customBG: config.customBG, allMixDetails: true});
|
||||
|
||||
window.jsColorPicker.colorPickers = colorPickers;
|
||||
|
||||
for (var n = 0, m = elms.length; n < m; n++) {
|
||||
var elm = elms[n];
|
||||
|
||||
if (config === 'destroy') {
|
||||
doEventListeners(elm, (config && config.multipleInstances), true);
|
||||
if (colorPickers[n]) {
|
||||
colorPickers[n].destroyAll();
|
||||
}
|
||||
} else {
|
||||
var color = extractValue(elm);
|
||||
var value = color.split('(');
|
||||
|
||||
testColors.setColor(color);
|
||||
if (config && config.init) {
|
||||
config.init(elm, testColors.colors);
|
||||
}
|
||||
elm.setAttribute('data-colorMode', value[1] ? value[0].substr(0, 3) : 'HEX');
|
||||
doEventListeners(elm, (config && config.multipleInstances), false);
|
||||
if (config && config.readOnly) {
|
||||
elm.readOnly = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return window.jsColorPicker.colorPickers;
|
||||
};
|
||||
|
||||
window.ColorPicker.docCookies = function(key, val, options) {
|
||||
var encode = encodeURIComponent, decode = decodeURIComponent,
|
||||
cookies, n, tmp, cache = {},
|
||||
days;
|
||||
|
||||
if (val === undefined) { // all about reading cookies
|
||||
cookies = document.cookie.split(/;\s*/) || [];
|
||||
for (n = cookies.length; n--; ) {
|
||||
tmp = cookies[n].split('=');
|
||||
if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value...
|
||||
}
|
||||
|
||||
if (!key) return cache; // return Json for easy access to all cookies
|
||||
else return cache[key]; // easy access to cookies from here
|
||||
} else { // write/delete cookie
|
||||
options = options || {};
|
||||
|
||||
if (val === '' || options.expires < 0) { // prepare deleteing the cookie
|
||||
options.expires = -1;
|
||||
// options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted...
|
||||
}
|
||||
|
||||
if (options.expires !== undefined) { // prepare date if any
|
||||
days = new Date();
|
||||
days.setDate(days.getDate() + options.expires);
|
||||
}
|
||||
|
||||
document.cookie = encode(key) + '=' + encode(val) +
|
||||
(days ? '; expires=' + days.toUTCString() : '') +
|
||||
(options.path ? '; path=' + options.path : '') +
|
||||
(options.domain ? '; domain=' + options.domain : '') +
|
||||
(options.secure ? '; secure' : '');
|
||||
}
|
||||
};
|
||||
})(this);
|
||||
Loading…
Reference in New Issue