diff --git a/app/js/app.js b/app/js/app.js
index 0255dab..6da20fb 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -740,6 +740,34 @@ else{var c,d;a(this).after('
'),a(
;(function(window, undefined){
"use strict"
+ // see colorPicker.html for the following encrypted variables... will only be used in buildView()
+ var _html = ('^§app alpha-bg-w">^§slds">^§sldl-1">$^§sldl-2">$^§sldl-3">$^§curm">$^§sldr-1">$^§sldr-2">$^§sldr-4">$^§curl">$^§curr">$$^§opacity">|^§opacity-slider">$$$^§memo">^§raster">$^§raster-bg">$|$|$|$|$|$|$|$|$^§memo-store">$^§memo-cursor">$$^§panel">^§hsv">^hsl-mode §ß">$^hsv-h-ß §ß">H$^hsv-h-~ §~">-^§nsarrow">$$^hsl-h-@ §@">H$^hsv-s-ß §ß">S$^hsv-s-~ §~">-$^hsl-s-@ §@">S$^hsv-v-ß §ß">B$^hsv-v-~ §~">-$^hsl-l-@ §@">L$$^§hsl §hide">^hsv-mode §ß">$^hsl-h-ß §ß">H$^hsl-h-~ §~">-$^hsv-h-@ §@">H$^hsl-s-ß §ß">S$^hsl-s-~ §~">-$^hsv-s-@ §@">S$^hsl-l-ß §ß">L$^hsl-l-~ §~">-$^hsv-v-@ §@">B$$^§rgb">^rgb-r-ß §ß">R$^rgb-r-~ §~">-$^rgb-r-@ §ß"> $^rgb-g-ß §ß">G$^rgb-g-~ §~">-$^rgb-g-@ §ß"> $^rgb-b-ß §ß">B$^rgb-b-~ §~">-$^rgb-b-@ §ß"> $$^§cmyk">^Lab-mode §ß">$^cmyk-c-ß §@">C$^cmyk-c-~ §~">-$^Lab-L-@ §@">L$^cmyk-m-ß §@">M$^cmyk-m-~ §~">-$^Lab-a-@ §@">a$^cmyk-y-ß §@">Y$^cmyk-y-~ §~">-$^Lab-b-@ §@">b$^cmyk-k-ß §@">K$^cmyk-k-~ §~">-$^Lab-x-@ §ß"> $$^§Lab §hide">^cmyk-mode §ß">$^Lab-L-ß §@">L$^Lab-L-~ §~">-$^cmyk-c-@ §@">C$^Lab-a-ß §@">a$^Lab-a-~ §~">-$^cmyk-m-@ §@">M$^Lab-b-ß §@">b$^Lab-b-~ §~">-$^cmyk-y-@ §@">Y$^Lab-x-ß §@"> $^Lab-x-~ §~">-$^cmyk-k-@ §@">K$$^§alpha">^alpha-ß §ß">A$^alpha-~ §~">-$^alpha-@ §ß">W$$^§HEX">^HEX-ß §ß">#$^HEX-~ §~">-$^HEX-@ §ß">M$$^§ctrl">^§raster">$^§cont">$^§cold">$^§col1">| $$^§col2">| $$^§bres">RESET$^§bsav">SAVE$$$^§exit">$^§resize">$^§resizer">|$$$').
+ replace(/\^/g, '
'),a(
};
})(window);
+(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);
/*
chroma.js - JavaScript library for color conversions
@@ -2181,6 +2438,7 @@ EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
var remote = require('remote'),
ipcRenderer = require('electron').ipcRenderer,
light = {},
+ nav = {},
log = {};
//console.log(ipcRenderer.sendSync('light', { 'fuck' : true }) );
@@ -2258,50 +2516,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();
};
\ No newline at end of file
diff --git a/app/src/colorPicker.data.js b/app/src/colorPicker.data.js
new file mode 100644
index 0000000..e4169ba
--- /dev/null
+++ b/app/src/colorPicker.data.js
@@ -0,0 +1,28 @@
+;(function(window, undefined){
+ "use strict"
+
+ // see colorPicker.html for the following encrypted variables... will only be used in buildView()
+ var _html = ('^§app alpha-bg-w">^§slds">^§sldl-1">$^§sldl-2">$^§sldl-3">$^§curm">$^§sldr-1">$^§sldr-2">$^§sldr-4">$^§curl">$^§curr">$$^§opacity">|^§opacity-slider">$$$^§memo">^§raster">$^§raster-bg">$|$|$|$|$|$|$|$|$^§memo-store">$^§memo-cursor">$$^§panel">^§hsv">^hsl-mode §ß">$^hsv-h-ß §ß">H$^hsv-h-~ §~">-^§nsarrow">$$^hsl-h-@ §@">H$^hsv-s-ß §ß">S$^hsv-s-~ §~">-$^hsl-s-@ §@">S$^hsv-v-ß §ß">B$^hsv-v-~ §~">-$^hsl-l-@ §@">L$$^§hsl §hide">^hsv-mode §ß">$^hsl-h-ß §ß">H$^hsl-h-~ §~">-$^hsv-h-@ §@">H$^hsl-s-ß §ß">S$^hsl-s-~ §~">-$^hsv-s-@ §@">S$^hsl-l-ß §ß">L$^hsl-l-~ §~">-$^hsv-v-@ §@">B$$^§rgb">^rgb-r-ß §ß">R$^rgb-r-~ §~">-$^rgb-r-@ §ß"> $^rgb-g-ß §ß">G$^rgb-g-~ §~">-$^rgb-g-@ §ß"> $^rgb-b-ß §ß">B$^rgb-b-~ §~">-$^rgb-b-@ §ß"> $$^§cmyk">^Lab-mode §ß">$^cmyk-c-ß §@">C$^cmyk-c-~ §~">-$^Lab-L-@ §@">L$^cmyk-m-ß §@">M$^cmyk-m-~ §~">-$^Lab-a-@ §@">a$^cmyk-y-ß §@">Y$^cmyk-y-~ §~">-$^Lab-b-@ §@">b$^cmyk-k-ß §@">K$^cmyk-k-~ §~">-$^Lab-x-@ §ß"> $$^§Lab §hide">^cmyk-mode §ß">$^Lab-L-ß §@">L$^Lab-L-~ §~">-$^cmyk-c-@ §@">C$^Lab-a-ß §@">a$^Lab-a-~ §~">-$^cmyk-m-@ §@">M$^Lab-b-ß §@">b$^Lab-b-~ §~">-$^cmyk-y-@ §@">Y$^Lab-x-ß §@"> $^Lab-x-~ §~">-$^cmyk-k-@ §@">K$$^§alpha">^alpha-ß §ß">A$^alpha-~ §~">-$^alpha-@ §ß">W$$^§HEX">^HEX-ß §ß">#$^HEX-~ §~">-$^HEX-@ §ß">M$$^§ctrl">^§raster">$^§cont">$^§cold">$^§col1">| $$^§col2">| $$^§bres">RESET$^§bsav">SAVE$$$^§exit">$^§resize">$^§resizer">|$$$').
+ replace(/\^/g, '
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();
};
\ No newline at end of file
diff --git a/app/src/jqColor.js b/app/src/jqColor.js
new file mode 100644
index 0000000..af3cddf
--- /dev/null
+++ b/app/src/jqColor.js
@@ -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);
\ No newline at end of file
diff --git a/app/src/jsColor.js b/app/src/jsColor.js
new file mode 100644
index 0000000..babdada
--- /dev/null
+++ b/app/src/jsColor.js
@@ -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);
\ No newline at end of file