Netsyms
/
colorPicker
mirror of https://github.com/PitPik/colorPicker.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge 65c071e350 into ab70f43f6f

Browse Source
pull/47/merge
Ruben Almeida 7 years ago committed by GitHub
parent ab70f43f6f 65c071e350
commit b92ee84acc
11 changed files with 98 additions and 78 deletions
Show Stats Download Patch File Download Diff File

6
color.all.min.js vendored
View File

File diff suppressed because one or more lines are too long

16
colorPicker.data.js
View File

File diff suppressed because one or more lines are too long

69
colorPicker.js
Unescape Escape View File

@ -1,8 +1,9 @@
;(function(window, undefined){
;(function(window, namespace){
"use strict"
var _data = window.ColorPicker, // will be deleted in buildView() and holds:
// window.ColorPicker = { // comes from colorPicker.data.js and will be overwritten.
var document = window.document,
_data = namespace.ColorPicker, // will be deleted in buildView() and holds:
// namespace.ColorPicker = { // comes from colorPicker.data.js and will be overwritten.
// _html: ..., // holds the HTML markup of colorPicker
// _cssFunc: ..., // CSS for all the sliders
// _cssMain: ..., // CSS of the GUI
@ -68,7 +69,8 @@
mode: 'rgb-b',
fps: 60, // 1000 / 60 = ~16.7ms
delayOffset: 8,
CSSPrefix: 'cp-',
CSSPrefixIsolate: '', //prevent classes with higher weight
CSSPrefix: 'cp-', //for internal classes
allMixDetails: true,
alphaBG: 'w',
imagePath: ''
@ -104,10 +106,10 @@
// actionCallback: undefined,
// convertCallback: undefined,
};
initInstance(this, options || {});
initInstance(this, options || {});
};
window.ColorPicker = ColorPicker; // export differently
namespace.ColorPicker = ColorPicker; // export differently
ColorPicker.addEvent = addEvent;
ColorPicker.removeEvent = removeEvent;
ColorPicker.getOrigin = getOrigin;
@ -198,7 +200,7 @@
memory[n] = {r: tmp[0], g: tmp[1], b: tmp[2], a: tmp[3]}
}
memos[n].style.cssText = 'background-color: ' + (memory && memory[n] !== undefined ?
color2string(memory[n]) + ';' + getOpacityCSS(memory[n]['a'] || 1) : 'rgb(0,0,0);');
color2string(memory[n]) + ';' + getOpacityCSS(memory[n]['a'] || 1) : 'rgb(0,0,0);');
}
};
@ -215,7 +217,7 @@
}
_isIE = document.createStyleSheet !== undefined && document.getElementById || !!window.MSInputMethodContext;
_doesOpacity = typeof document.body.style.opacity !== 'undefined';
_colorInstance = new Colors(THIS.options);
_colorInstance = new namespace.Colors(THIS.options);
// We transfer the responsibility to the instance of Color (to save space and memory)
delete THIS.options;
_options = _colorInstance.options;
@ -301,25 +303,27 @@
function buildView(THIS) {
var app = document.createElement('div'),
prefix = _options.CSSPrefix,
prefixIsolate = _options.CSSPrefixIsolate ? _options.CSSPrefixIsolate+' ':'',
urlData = 'data:image/png;base64,',
addStyleSheet = function(cssText, id) {
var style = document.createElement('style');
var style = document.createElement('style'),
head = document.head || document.getElementsByTagName("head")[0] || document.body;
style.setAttribute('type', 'text/css');
if (id) {
style.setAttribute('id', id);
}
if (!style.styleSheet) {
style.appendChild(document.createTextNode(cssText));
}
document.getElementsByTagName('head')[0].appendChild(style);
if (style.styleSheet) { // IE compatible
document.styleSheets[document.styleSheets.length-1].cssText = cssText;
style.styleSheet.cssText = cssText;
} else { //other browsers
style.innerHTML = cssText;
}
head.appendChild(style);
},
processCSS = function(doesBAS64){
// CSS - system
_data._cssFunc = _data._cssFunc.
replace(/‰/g, prefixIsolate).
replace(/§/g, prefix).
replace('_patches.png', doesBAS64 ? urlData + _data._patchesPng : _options.imagePath + '_patches.png').
replace('_vertical.png', doesBAS64 ? urlData + _data._verticalPng : _options.imagePath + '_vertical.png').
@ -329,6 +333,7 @@
// CSS - main
if (!_options.customCSS) {
_data._cssMain = _data._cssMain.
replace(/‰/g, prefixIsolate).
replace(/§/g, prefix).
replace('_bgs.png', doesBAS64 ? urlData + _data._bgsPng : _options.imagePath + '_bgs.png').
replace('_icons.png', doesBAS64 ? urlData + _data._iconsPng : _options.imagePath + '_icons.png').
@ -440,7 +445,10 @@
function installEventListeners(THIS, off) {
var onOffEvent = off ? removeEvent : addEvent;
onOffEvent(_nodes.colorPicker, 'mousedown', function(e) {
onOffEvent(_isIE ? document.body : window, 'mouseup', stopChange);
onOffEvent(_isIE ? document.body : window, 'touchend', stopChange);
function touchStart_MouseDown(e) {
var event = e || window.event,
page = getPageXY(event),
target = (event.button || event.which) < 2 ?
@ -494,6 +502,7 @@
_mainTarget.style.display = ''; // ??? for resizer...
_mouseMoveAction(event);
addEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
addEvent(_isIE ? document.body : window, 'touchmove', _mouseMoveAction);
_renderTimer = window[requestAnimationFrame](renderAll);
} else {
// console.log(className)
@ -506,7 +515,10 @@
return preventDefault(event);
// document.activeElement.blur();
}
});
};
onOffEvent(_nodes.colorPicker, 'mousedown', touchStart_MouseDown);
onOffEvent(_nodes.colorPicker, 'touchstart', touchStart_MouseDown);
onOffEvent(_nodes.colorPicker, 'click', function(e) {
focusInstance(THIS);
@ -530,8 +542,6 @@
});
}
addEvent(_isIE ? document.body : window, 'mouseup', stopChange);
// ------------------------------------------------------ //
// --------- Event listner's callback functions -------- //
// -------------------------------------------------------//
@ -546,6 +556,7 @@
// }
window[cancelAnimationFrame](_renderTimer);
removeEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
removeEvent(_isIE ? document.body : window, 'touchmove', _mouseMoveAction);
if (_delayState) { // hapens on inputs
_valueType = {type: 'alpha'};
renderAll();
@ -884,7 +895,7 @@
// think this over again, does this need to be like this??
if (buttonAction) {
preRenderAll(_colors);
_mouseMoveAction = _mouseMoveAction || true; // !!!! search for: // this is dirty...
_mouseMoveAction = _mouseMoveAction || true; // !!!! search for: // this is dirty...
stopChange(e, buttonAction);
}
}
@ -1036,7 +1047,7 @@
colors['rgbaMixBGMix' + bgType].WCAG2Ratio >= 7 ? 'green' :
colors['rgbaMixBGMix' + bgType].WCAG2Ratio >= 4.5 ? 'orange': '';
renderVars.noRGBZ = _options['no' + _options.mode.type.toUpperCase() + _options.mode.z] ?
(_options.mode.z === 'g' && colors.rgb.g < 0.59 || _options.mode.z === 'b' || _options.mode.z === 'r' ?
(_options.mode.z === 'g' && colors.rgb.g < 0.59 || _options.mode.z === 'b' || _options.mode.z === 'r' ?
'dark' : 'light') : undefined;
}
@ -1152,9 +1163,9 @@
colors._rgb.b !== colors.rgb.b
] : [];
if (tmp.join('') !== cashedVars.outOfGammut) {
nodes.rgb_r_labl.firstChild.data = tmp[0] ? '!' : ' ';
nodes.rgb_g_labl.firstChild.data = tmp[1] ? '!' : ' ';
nodes.rgb_b_labl.firstChild.data = tmp[2] ? '!' : ' ';
nodes.rgb_r_labl.firstChild.data = tmp[0] ? '!' : '.';
nodes.rgb_g_labl.firstChild.data = tmp[1] ? '!' : '.';
nodes.rgb_b_labl.firstChild.data = tmp[2] ? '!' : '.';
cashedVars.outOfGammut = tmp.join('');
}
if (renderVars.noRGBZ) {
@ -1290,16 +1301,18 @@
}
function getPageXY(e) {
var doc = window.document;
var doc = window.document,
_e = (typeof e.changedTouches !== 'undefined' && e.changedTouches.length)?
e.changedTouches[0] : e;
return {
X: e.pageX || e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft,
Y: e.pageY || e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop
X: _e.pageX || _e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft,
Y: _e.pageY || _e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop
};
}
function addEvent(obj, type, func) {
addEvent.cache = addEvent.cache || {
addEvent.cache = addEvent.cache || {
_get: function(obj, type, func, checkOnly) {
var cache = addEvent.cache[type] || [];
@ -1411,4 +1424,4 @@
return _renderTimer = null;
};
})(window);
})(window, CPNamespace||window);

10
colors.js
Unescape Escape View File

@ -44,7 +44,7 @@
// convertCallback: undefined,
// allMixDetails: false
};
initInstance(this, options || {});
initInstance(this, options || {});
},
initInstance = function(THIS, options) {
var matrix,
@ -156,7 +156,7 @@
};
Colors.prototype.toString = function(colorMode, forceAlpha) {
return ColorConverter.color2text((colorMode || 'rgb').toLowerCase(), this.colors, forceAlpha);
return ColorConverter.color2text((colorMode || 'rgb').toLowerCase(), this.colors, forceAlpha);
};
@ -374,12 +374,12 @@
color2text: function(colorMode, colors, forceAlpha) {
var alpha = forceAlpha !== false && _math.round(colors.alpha * 100) / 100,
hasAlpha = typeof alpha === 'number' &&
forceAlpha !== false && (forceAlpha || alpha !== 1),
forceAlpha !== false && (forceAlpha || alpha !== 1),
RGB = colors.RND.rgb,
HSL = colors.RND.hsl,
shouldBeHex = colorMode === 'hex' && hasAlpha,
isHex = colorMode === 'hex' && !shouldBeHex,
isRgb = colorMode === 'rgb' || shouldBeHex,
isRgb = colorMode === 'rgb' || shouldBeHex,
innerText = isRgb ? RGB.r + ', ' + RGB.g + ', ' + RGB.b :
!isHex ? HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' :
'#' + colors.HEX;
@ -729,4 +729,4 @@
// return Math.max(min, Math.min(max, value)); // faster??
return (value > max ? max : value < min ? min : value);
}
})(window);
})(window, CPNamespace||window);

10
index.html
Unescape Escape View File

@ -11,8 +11,7 @@
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<!-- <link href="developer/colorPicker.sys.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="developer/colorPicker.css" rel="stylesheet" type="text/css"> -->
<link href="index.css" rel="stylesheet" type="text/css">
<title>colorPicker_new</title>
<link href="index.css" rel="stylesheet" type="text/css"><title>colorPicker_new</title>
</head>
<body>
@ -22,15 +21,13 @@
<div id="contrastPatch"><div></div><i>-Test-</i></div>
<div id="colorValues">.</div>
<div id="sliders" class="sliders">
<div id="rgbr"><div></div></div>
<div id="rgbg"><div></div></div>
<div id="rgbb"><div></div></div>
<div id="hslh"><div></div></div>
<div id="hsls"><div></div></div>
<div id="hsll"><div></div></div>
<div id="hsls"><div></div></div> <div id="hsll"><div></div></div>
<!-- <div id="LabL"><div></div></div>
<div id="Laba"><div></div></div>
@ -70,6 +67,9 @@
<!-- <div id="model_display"></div> -->
<!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->
<script type="text/javascript">
var CPNamespace = window;
</script>
<script type="text/javascript" src="colors.js"></script>
<!-- script type="text/javascript" src="tools.js"></script -->
<script type="text/javascript" src="colorPicker.data.js"></script>

3
jQuery_implementation/index.html
Unescape Escape View File

@ -26,6 +26,9 @@ Calling the colorPicker on all inputs with the calssName 'color': <pre>$('input.
<input class="color" value="hsl(32, 95%, 23%)" />
</p>
<!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
<script type="text/javascript">
var CPNamespace = window;
</script>
<script type="text/javascript" src="../colors.js"></script>
<script type="text/javascript" src="../colorPicker.data.js"></script>
<script type="text/javascript" src="../colorPicker.js"></script>

6
jQuery_implementation/jQueryColorPicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
jQuery_implementation/jqColor.js
Unescape Escape View File

@ -1,4 +1,4 @@
(function ($, window) {
(function ($, window, namespace) {
$.fn.extend({
colorPicker: function(config) {
var renderCallback = function(colors, mode) {
@ -65,7 +65,7 @@
},
createInstance = function(elm, config) {
var initConfig = {
klass: window.ColorPicker,
klass: namespace.ColorPicker,
input: elm,
patch: elm,
isIE8: !!document.all && !document.addEventListener, // Opera???
@ -163,7 +163,7 @@
},
that = this,
colorPickers = $.fn.colorPicker.colorPickers || [], // this is a way to prevent data binding on HTMLElements
testColors = new window.Colors({
testColors = new namespace.Colors({
customBG: (config && config.customBG) || '#FFFFFF',
allMixDetails: true
});
@ -227,4 +227,4 @@
(options.secure ? '; secure' : '');
}
};
})(jQuery, this);
})(jQuery, this, CPNamespace||window);

5
javascript_implementation/index.html
Unescape Escape View File

@ -23,6 +23,9 @@ Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPi
<input class="color" value="hsla(32, 95%, 23%, 0.9)" />
</p>
<!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
<script type="text/javascript">
var CPNamespace = window;
</script>
<script type="text/javascript" src="../colors.js"></script>
<script type="text/javascript" src="../colorPicker.data.js"></script>
<script type="text/javascript" src="../colorPicker.js"></script>
@ -34,7 +37,7 @@ Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPi
<!-- <script type="text/javascript" src="jsColorPicker.min.js"></script> -->
<script type="text/javascript">
var colors = jsColorPicker('input.color', {
var colors = CPNamespace.jsColorPicker('input.color', {
customBG: '#222',
readOnly: true,
// patch: false,

37
javascript_implementation/jsColor.js
Unescape Escape View File

@ -1,5 +1,5 @@
(function (window) {
window.jsColorPicker = function(selectors, config) {
(function (window, namespace) {
namespace.jsColorPicker = function(selectors, config) {
var renderCallback = function(colors, mode) {
var options = this,
input = options.input,
@ -54,18 +54,18 @@
);
}
cookieTXT = '\'' + cookieTXT.join('\',\'') + '\'';
ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
namespace.ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
} else if (action === 'resizeApp') {
ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
namespace.ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
} else if (action === 'modeChange') {
var mode = colorPicker.color.options.mode;
ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z);
namespace.ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z);
}
},
createInstance = function(elm, config) {
var initConfig = {
klass: window.ColorPicker,
klass: namespace.ColorPicker,
input: elm,
patch: elm,
isIE8: !!document.all && !document.addEventListener, // Opera???
@ -77,14 +77,14 @@
/* --- regular colorPicker options from this point --- */
color: extractValue(elm),
initStyle: 'display: none',
mode: ColorPicker.docCookies('colorPickerMode') || 'hsv-h',
mode: namespace.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' +
memoryColors: namespace.ColorPicker.docCookies('colorPickerMemos' +
((config || {}).noAlpha ? 'NoAlpha' : '')),
size: ColorPicker.docCookies('colorPickerSize') || 1,
size: namespace.ColorPicker.docCookies('colorPickerSize') || 1,
renderCallback: renderCallback,
actionCallback: actionCallback
};
@ -95,10 +95,11 @@
return new initConfig.klass(initConfig);
},
doEventListeners = function(elm, multiple, off) {
var onOff = off ? 'removeEventListener' : 'addEventListener',
var ie8 = !document.addEventListener,
onOff = off ? (ie8?'detachEvent':'removeEventListener') : (ie8?'attachEvent':'addEventListener'),
focusListener = function(e) {
var input = this,
position = window.ColorPicker.getOrigin(input),
position = namespace.ColorPicker.getOrigin(input),
index = multiple ? Array.prototype.indexOf.call(elms, this) : 0,
colorPicker = colorPickers[index] ||
(colorPickers[index] = createInstance(this, config)),
@ -135,7 +136,7 @@
colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined),
animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0,
isColorPicker = colorPicker && (function(elm) {
while (elm) {
while (elm && elm instanceof HTMLElement) {
if ((elm.className || '').indexOf('cp-app') !== -1) return elm;
elm = elm.parentNode;
}
@ -166,11 +167,11 @@
}
},
// this is a way to prevent data binding on HTMLElements
colorPickers = window.jsColorPicker.colorPickers || [],
colorPickers = namespace.jsColorPicker.colorPickers || [],
elms = document.querySelectorAll(selectors),
testColors = new window.Colors({customBG: config.customBG, allMixDetails: true});
testColors = new namespace.Colors({customBG: config.customBG, allMixDetails: true});
window.jsColorPicker.colorPickers = colorPickers;
namespace.jsColorPicker.colorPickers = colorPickers;
for (var n = 0, m = elms.length; n < m; n++) {
var elm = elms[n];
@ -196,10 +197,10 @@
}
};
return window.jsColorPicker.colorPickers;
return namespace.jsColorPicker.colorPickers;
};
window.ColorPicker.docCookies = function(key, val, options) {
namespace.ColorPicker.docCookies = function(key, val, options) {
var encode = encodeURIComponent, decode = decodeURIComponent,
cookies, n, tmp, cache = {},
days;
@ -233,4 +234,4 @@
(options.secure ? '; secure' : '');
}
};
})(this);
})(this, CPNamespace||window);

6
javascript_implementation/jsColorPicker.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save