├── favicon.ico
├── README.md
├── index.html
├── style.css
├── script.js
└── jscolor.js
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MainakRepositor/Master-Piece/HEAD/favicon.ico
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Master Piece
2 |
3 | ### Your personal painting website
4 |
5 | ## Demo
6 |
7 | 
8 |
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Master-Piece
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
MASTER PIECE
15 |
16 |
17 |
18 | Brush
19 |
20 |
21 |
22 |
23 |
24 | 10
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
58 |
Made by Mainak
59 |
62 |
Please use application on larger screen
63 |
64 |
65 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | margin: 0;
9 | background-color: rgb(177, 177, 177);
10 | font-family: Oswald, sans-serif;
11 | overflow: hidden;
12 | }
13 | h1
14 | {
15 | color: white;
16 | margin-top: 0px;
17 |
18 | }
19 | #me
20 | {
21 | color: gold;
22 | }
23 | .top-bar {
24 | padding-left: 15px;
25 | height: 50px;
26 | width: 100%;
27 | position: fixed;
28 | background:linear-gradient(to left, green,red,blue);
29 | display: flex;
30 | justify-content: center;
31 | }
32 |
33 | /* Font Awesome Icons */
34 | .fas,
35 | .far {
36 | font-size: 25px;
37 | position: relative;
38 | top: 5px;
39 | background-color: rgb(6, 150, 160);
40 | color: rgb(15, 14, 14);
41 | padding: 5px;
42 | border-radius: 5px;
43 | width: 40px;
44 | text-align: center;
45 | cursor: pointer;
46 | }
47 |
48 | .fas:hover,
49 | .far:hover {
50 | filter: brightness(90%);
51 | }
52 |
53 | .fa-fill-drip {
54 | cursor: default;
55 | }
56 |
57 | .fa-undo-alt:hover,
58 | .fa-trash-alt:hover {
59 | color: rgb(223, 37, 37);
60 | }
61 |
62 | /* Tools */
63 | .active-tool {
64 | position: absolute;
65 | top: 9px;
66 | left: 5px;
67 | }
68 |
69 | .active-tool > span {
70 | background-color: rgb(82, 82, 82);
71 | border-radius: 5px;
72 | padding: 2.5px 16px;
73 | color: white;
74 | font-size: 20px;
75 | user-select: none;
76 | }
77 |
78 | .tool {
79 | position: relative;
80 | top: 3px;
81 | }
82 |
83 | .tool:not(:first-child) {
84 | margin-left: 8px;
85 | }
86 |
87 | .brush {
88 | background-color: rgb(114, 114, 114);
89 | height: 44px;
90 | width: 345px;
91 |
92 | }
93 |
94 | .brush > * {
95 | margin-left: 10px;
96 | color:aliceblue;
97 | }
98 |
99 | .size {
100 | min-width: 40px;
101 | height: 35px;
102 | position: relative;
103 | top: 4px;
104 | left: -5px;
105 | background-color: rgb(82, 82, 82);
106 | border-radius: 5px;
107 | padding: 2.5px 8px;
108 | color: white;
109 | font-size: 20px;
110 | user-select: none;
111 | }
112 |
113 | /* Custom Slider */
114 | .slider {
115 | -webkit-appearance: none;
116 | position: relative;
117 | left: -8px;
118 | width: 100px;
119 | height: 10px;
120 | background: rgb(177, 177, 177);
121 | outline: none;
122 | opacity: 0.7;
123 | cursor: pointer;
124 | -webkit-transition: 0.2s;
125 | transition: opacity 0.2s;
126 | }
127 |
128 | .slider:hover {
129 | opacity: 1;
130 | }
131 |
132 | .slider::-webkit-slider-thumb {
133 | -webkit-appearance: none;
134 | appearance: none;
135 | width: 10px;
136 | height: 10px;
137 | background: rgb(47, 47, 47);
138 | }
139 |
140 | .slider::-moz-range-thumb {
141 | width: 10px;
142 | height: 10px;
143 | background: rgb(47, 47, 47);
144 | }
145 |
146 | /* JS Color */
147 | .jscolor {
148 | border-style: solid;
149 | border-radius: 5px;
150 | height: 35px;
151 | width: 120px;
152 | margin-left: 3px;
153 | text-align: center;
154 | cursor: pointer;
155 | outline: none;
156 | }
157 |
158 | /* Canvas */
159 | canvas#canvas {
160 | position: absolute;
161 | top: 50px;
162 | cursor: crosshair;
163 | z-index: 10;
164 | }
165 |
166 | /* Mobile Message */
167 | .mobile-message {
168 | display: none;
169 | }
170 |
171 | /* Media Query: Mobile Devices */
172 | @media screen and (max-width: 800px) {
173 | .mobile-message {
174 | position: absolute;
175 | height: 100vh;
176 | width: 100%;
177 | background-color: rgb(0, 0, 0);
178 | color: white;
179 | display: flex;
180 | justify-content: center;
181 | align-items: center;
182 | text-align: center;
183 | z-index: 100;
184 | }
185 | }
186 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const BRUSH_TIME = 1500;
2 | const activeToolEl = document.getElementById('active-tool');
3 | const brushIcon = document.getElementById('brush');
4 | const brushColorBtn = document.getElementById('brush-color');
5 | const brushSize = document.getElementById('brush-size');
6 | const brushSlider = document.getElementById('brush-slider');
7 | const bucketColorBtn = document.getElementById('bucket-color');
8 | const eraser = document.getElementById('eraser');
9 | const clearCanvasBtn = document.getElementById('clear-canvas');
10 | const saveStorageBtn = document.getElementById('save-storage');
11 | const loadStorageBtn = document.getElementById('load-storage');
12 | const clearStorageBtn = document.getElementById('clear-storage');
13 | const downloadBtn = document.getElementById('download');
14 | const { body } = document;
15 |
16 | // Global Variables
17 | const canvas = document.createElement('canvas');
18 | canvas.id = 'canvas';
19 | const context = canvas.getContext('2d');
20 | body.appendChild(canvas);
21 | let currentSize = 10;
22 | let bucketColor = '#FFFFFF';
23 | let currentColor = '#A51DAB';
24 | let isEraser = false;
25 | let isMouseDown = false;
26 | let drawnArray = [];
27 |
28 | // Formatting Brush Size
29 | function displayBrushSize() {
30 | if (currentSize < 10) {
31 | brushSize.textContent = `0${currentSize}`;
32 | } else {
33 | brushSize.textContent = currentSize;
34 | }
35 | }
36 |
37 | // Setting Brush Size
38 | brushSlider.addEventListener('change', () => {
39 | currentSize = brushSlider.value;
40 | displayBrushSize();
41 | });
42 |
43 | // Setting Brush Color
44 | brushColorBtn.addEventListener('change', () => {
45 | isEraser = false;
46 | currentColor = `#${brushColorBtn.value}`;
47 | });
48 |
49 | // Setting Background Color
50 | bucketColorBtn.addEventListener('change', () => {
51 | bucketColor = `#${bucketColorBtn.value}`;
52 | createCanvas();
53 | restoreCanvas();
54 | });
55 |
56 | // Eraser
57 | eraser.addEventListener('click', () => {
58 | isEraser = true;
59 | currentColor = bucketColor;
60 | brushIcon.style.color = 'white';
61 | eraser.style.color = 'black';
62 | activeToolEl.textContent = 'Eraser';
63 | currentSize = 50;
64 | });
65 |
66 | // Switch back to Brush
67 | function switchToBrush() {
68 | isEraser = false;
69 | activeToolEl.textContent = 'Brush';
70 | brushIcon.style.color = 'black';
71 | eraser.style.color = 'white';
72 | currentColor = `#${brushColorBtn.value}`;
73 | currentSize = 10;
74 | brushSlider.value = 10;
75 | displayBrushSize();
76 | }
77 |
78 | function brushTimeSetTimeout(ms) {
79 | setTimeout(switchToBrush, ms);
80 | }
81 |
82 | // Create Canvas
83 | function createCanvas() {
84 | canvas.width = window.innerWidth;
85 | canvas.height = window.innerHeight - 50;
86 | context.fillStyle = bucketColor;
87 | context.fillRect(0, 0, canvas.width, canvas.height);
88 | switchToBrush();
89 | }
90 |
91 | // Clear Canvas
92 | clearCanvasBtn.addEventListener('click', () => {
93 | createCanvas();
94 | drawnArray = [];
95 | // Active Tool
96 | activeToolEl.textContent = 'Canvas Cleared';
97 | brushTimeSetTimeout(BRUSH_TIME);
98 | });
99 |
100 | // Draw what is stored in DrawnArray
101 | function restoreCanvas() {
102 | for (let i = 1; i < drawnArray.length; i++) {
103 | context.beginPath();
104 | context.moveTo(drawnArray[i - 1].x, drawnArray[i - 1].y);
105 | context.lineWidth = drawnArray[i].size;
106 | context.lineCap = 'round';
107 | if (drawnArray[i].eraser) {
108 | context.strokeStyle = bucketColor;
109 | } else {
110 | context.strokeStyle = drawnArray[i].color;
111 | }
112 | context.lineTo(drawnArray[i].x, drawnArray[i].y);
113 | context.stroke();
114 | }
115 | }
116 |
117 | // Store Drawn Lines in DrawnArray
118 | function storeDrawn(x, y, size, color, erase) {
119 | const line = {
120 | x,
121 | y,
122 | size,
123 | color,
124 | erase,
125 | };
126 | // console.log(line);
127 | drawnArray.push(line);
128 | }
129 |
130 | // Get Mouse Position
131 | function getMousePosition(event) {
132 | const boundaries = canvas.getBoundingClientRect();
133 | return {
134 | x: event.clientX - boundaries.left,
135 | y: event.clientY - boundaries.top,
136 | };
137 | }
138 |
139 | // Mouse Down
140 | canvas.addEventListener('mousedown', (event) => {
141 | isMouseDown = true;
142 | const currentPosition = getMousePosition(event);
143 | // console.log('mouse is clicked', currentPosition);
144 | context.moveTo(currentPosition.x, currentPosition.y);
145 | context.beginPath();
146 | context.lineWidth = currentSize;
147 | context.lineCap = 'round';
148 | context.strokeStyle = currentColor;
149 | });
150 |
151 | // Mouse Move
152 | canvas.addEventListener('mousemove', (event) => {
153 | if (isMouseDown) {
154 | const currentPosition = getMousePosition(event);
155 | // console.log('mouse is moving', currentPosition);
156 | context.lineTo(currentPosition.x, currentPosition.y);
157 | context.stroke();
158 | storeDrawn(
159 | currentPosition.x,
160 | currentPosition.y,
161 | currentSize,
162 | currentColor,
163 | isEraser,
164 | );
165 | } else {
166 | storeDrawn(undefined);
167 | }
168 | });
169 |
170 | // Mouse Up
171 | canvas.addEventListener('mouseup', () => {
172 | isMouseDown = false;
173 | // console.log('mouse is unclicked');
174 | });
175 |
176 | // Save to Local Storage
177 | saveStorageBtn.addEventListener('click', () => {
178 | localStorage.setItem('savedCanvas', JSON.stringify(drawnArray));
179 | // Active Tool
180 | activeToolEl.textContent = 'Canvas Saved';
181 | brushTimeSetTimeout(BRUSH_TIME);
182 | });
183 |
184 | // Load from Local Storage
185 | loadStorageBtn.addEventListener('click', () => {
186 | if (localStorage.getItem('savedCanvas')) {
187 | drawnArray = JSON.parse(localStorage.savedCanvas);
188 | restoreCanvas();
189 | // Active Tool
190 | activeToolEl.textContent = 'Canvas Loaded';
191 | brushTimeSetTimeout(BRUSH_TIME);
192 | } else {
193 | activeToolEl.textContent = 'No Canvas Found';
194 | brushTimeSetTimeout(BRUSH_TIME);
195 | }
196 | });
197 |
198 | // Clear Local Storage
199 | clearStorageBtn.addEventListener('click', () => {
200 | localStorage.removeItem('savedCanvas');
201 | // Active Tool
202 | activeToolEl.textContent = 'Local Storage Cleared';
203 | brushTimeSetTimeout(BRUSH_TIME);
204 | });
205 |
206 | // Download Image
207 | downloadBtn.addEventListener('click', () => {
208 | downloadBtn.href = canvas.toDataURL('image/jpeg', 1);
209 | downloadBtn.download = 'paint-example';
210 | // Active Tool
211 | activeToolEl.textContent = 'Image File Saved';
212 | brushTimeSetTimeout(BRUSH_TIME);
213 | });
214 |
215 | // Event Listener
216 | brushIcon.addEventListener('click', switchToBrush);
217 |
218 | // On Load
219 | createCanvas();
220 |
--------------------------------------------------------------------------------
/jscolor.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 |
4 | if (!window.jscolor) { window.jscolor = (function () {
5 |
6 |
7 | var jsc = {
8 |
9 |
10 | register : function () {
11 | jsc.attachDOMReadyEvent(jsc.init);
12 | jsc.attachEvent(document, 'mousedown', jsc.onDocumentMouseDown);
13 | jsc.attachEvent(document, 'touchstart', jsc.onDocumentTouchStart);
14 | jsc.attachEvent(window, 'resize', jsc.onWindowResize);
15 | },
16 |
17 |
18 | init : function () {
19 | if (jsc.jscolor.lookupClass) {
20 | jsc.jscolor.installByClassName(jsc.jscolor.lookupClass);
21 | }
22 | },
23 |
24 |
25 | tryInstallOnElements : function (elms, className) {
26 | var matchClass = new RegExp('(^|\\s)(' + className + ')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
27 |
28 | for (var i = 0; i < elms.length; i += 1) {
29 | if (elms[i].type !== undefined && elms[i].type.toLowerCase() == 'color') {
30 | if (jsc.isColorAttrSupported) {
31 | // skip inputs of type 'color' if supported by the browser
32 | continue;
33 | }
34 | }
35 | var m;
36 | if (!elms[i].jscolor && elms[i].className && (m = elms[i].className.match(matchClass))) {
37 | var targetElm = elms[i];
38 | var optsStr = null;
39 |
40 | var dataOptions = jsc.getDataAttr(targetElm, 'jscolor');
41 | if (dataOptions !== null) {
42 | optsStr = dataOptions;
43 | } else if (m[4]) {
44 | optsStr = m[4];
45 | }
46 |
47 | var opts = {};
48 | if (optsStr) {
49 | try {
50 | opts = (new Function ('return (' + optsStr + ')'))();
51 | } catch(eParseError) {
52 | jsc.warn('Error parsing jscolor options: ' + eParseError + ':\n' + optsStr);
53 | }
54 | }
55 | targetElm.jscolor = new jsc.jscolor(targetElm, opts);
56 | }
57 | }
58 | },
59 |
60 |
61 | isColorAttrSupported : (function () {
62 | var elm = document.createElement('input');
63 | if (elm.setAttribute) {
64 | elm.setAttribute('type', 'color');
65 | if (elm.type.toLowerCase() == 'color') {
66 | return true;
67 | }
68 | }
69 | return false;
70 | })(),
71 |
72 |
73 | isCanvasSupported : (function () {
74 | var elm = document.createElement('canvas');
75 | return !!(elm.getContext && elm.getContext('2d'));
76 | })(),
77 |
78 |
79 | fetchElement : function (mixed) {
80 | return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
81 | },
82 |
83 |
84 | isElementType : function (elm, type) {
85 | return elm.nodeName.toLowerCase() === type.toLowerCase();
86 | },
87 |
88 |
89 | getDataAttr : function (el, name) {
90 | var attrName = 'data-' + name;
91 | var attrValue = el.getAttribute(attrName);
92 | if (attrValue !== null) {
93 | return attrValue;
94 | }
95 | return null;
96 | },
97 |
98 |
99 | attachEvent : function (el, evnt, func) {
100 | if (el.addEventListener) {
101 | el.addEventListener(evnt, func, false);
102 | } else if (el.attachEvent) {
103 | el.attachEvent('on' + evnt, func);
104 | }
105 | },
106 |
107 |
108 | detachEvent : function (el, evnt, func) {
109 | if (el.removeEventListener) {
110 | el.removeEventListener(evnt, func, false);
111 | } else if (el.detachEvent) {
112 | el.detachEvent('on' + evnt, func);
113 | }
114 | },
115 |
116 |
117 | _attachedGroupEvents : {},
118 |
119 |
120 | attachGroupEvent : function (groupName, el, evnt, func) {
121 | if (!jsc._attachedGroupEvents.hasOwnProperty(groupName)) {
122 | jsc._attachedGroupEvents[groupName] = [];
123 | }
124 | jsc._attachedGroupEvents[groupName].push([el, evnt, func]);
125 | jsc.attachEvent(el, evnt, func);
126 | },
127 |
128 |
129 | detachGroupEvents : function (groupName) {
130 | if (jsc._attachedGroupEvents.hasOwnProperty(groupName)) {
131 | for (var i = 0; i < jsc._attachedGroupEvents[groupName].length; i += 1) {
132 | var evt = jsc._attachedGroupEvents[groupName][i];
133 | jsc.detachEvent(evt[0], evt[1], evt[2]);
134 | }
135 | delete jsc._attachedGroupEvents[groupName];
136 | }
137 | },
138 |
139 |
140 | attachDOMReadyEvent : function (func) {
141 | var fired = false;
142 | var fireOnce = function () {
143 | if (!fired) {
144 | fired = true;
145 | func();
146 | }
147 | };
148 |
149 | if (document.readyState === 'complete') {
150 | setTimeout(fireOnce, 1); // async
151 | return;
152 | }
153 |
154 | if (document.addEventListener) {
155 | document.addEventListener('DOMContentLoaded', fireOnce, false);
156 |
157 | // Fallback
158 | window.addEventListener('load', fireOnce, false);
159 |
160 | } else if (document.attachEvent) {
161 | // IE
162 | document.attachEvent('onreadystatechange', function () {
163 | if (document.readyState === 'complete') {
164 | document.detachEvent('onreadystatechange', arguments.callee);
165 | fireOnce();
166 | }
167 | })
168 |
169 | // Fallback
170 | window.attachEvent('onload', fireOnce);
171 |
172 | // IE7/8
173 | if (document.documentElement.doScroll && window == window.top) {
174 | var tryScroll = function () {
175 | if (!document.body) { return; }
176 | try {
177 | document.documentElement.doScroll('left');
178 | fireOnce();
179 | } catch (e) {
180 | setTimeout(tryScroll, 1);
181 | }
182 | };
183 | tryScroll();
184 | }
185 | }
186 | },
187 |
188 |
189 | warn : function (msg) {
190 | if (window.console && window.console.warn) {
191 | window.console.warn(msg);
192 | }
193 | },
194 |
195 |
196 | preventDefault : function (e) {
197 | if (e.preventDefault) { e.preventDefault(); }
198 | e.returnValue = false;
199 | },
200 |
201 |
202 | captureTarget : function (target) {
203 | // IE
204 | if (target.setCapture) {
205 | jsc._capturedTarget = target;
206 | jsc._capturedTarget.setCapture();
207 | }
208 | },
209 |
210 |
211 | releaseTarget : function () {
212 | // IE
213 | if (jsc._capturedTarget) {
214 | jsc._capturedTarget.releaseCapture();
215 | jsc._capturedTarget = null;
216 | }
217 | },
218 |
219 |
220 | fireEvent : function (el, evnt) {
221 | if (!el) {
222 | return;
223 | }
224 | if (document.createEvent) {
225 | var ev = document.createEvent('HTMLEvents');
226 | ev.initEvent(evnt, true, true);
227 | el.dispatchEvent(ev);
228 | } else if (document.createEventObject) {
229 | var ev = document.createEventObject();
230 | el.fireEvent('on' + evnt, ev);
231 | } else if (el['on' + evnt]) { // alternatively use the traditional event model
232 | el['on' + evnt]();
233 | }
234 | },
235 |
236 |
237 | classNameToList : function (className) {
238 | return className.replace(/^\s+|\s+$/g, '').split(/\s+/);
239 | },
240 |
241 |
242 | // The className parameter (str) can only contain a single class name
243 | hasClass : function (elm, className) {
244 | if (!className) {
245 | return false;
246 | }
247 | return -1 != (' ' + elm.className.replace(/\s+/g, ' ') + ' ').indexOf(' ' + className + ' ');
248 | },
249 |
250 |
251 | // The className parameter (str) can contain multiple class names separated by whitespace
252 | setClass : function (elm, className) {
253 | var classList = jsc.classNameToList(className);
254 | for (var i = 0; i < classList.length; i += 1) {
255 | if (!jsc.hasClass(elm, classList[i])) {
256 | elm.className += (elm.className ? ' ' : '') + classList[i];
257 | }
258 | }
259 | },
260 |
261 |
262 | // The className parameter (str) can contain multiple class names separated by whitespace
263 | unsetClass : function (elm, className) {
264 | var classList = jsc.classNameToList(className);
265 | for (var i = 0; i < classList.length; i += 1) {
266 | var repl = new RegExp(
267 | '^\\s*' + classList[i] + '\\s*|' +
268 | '\\s*' + classList[i] + '\\s*$|' +
269 | '\\s+' + classList[i] + '(\\s+)',
270 | 'g'
271 | );
272 | elm.className = elm.className.replace(repl, '$1');
273 | }
274 | },
275 |
276 |
277 | getStyle : function (elm) {
278 | return window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle;
279 | },
280 |
281 |
282 | setStyle : (function () {
283 | var helper = document.createElement('div');
284 | var getSupportedProp = function (names) {
285 | for (var i = 0; i < names.length; i += 1) {
286 | if (names[i] in helper.style) {
287 | return names[i];
288 | }
289 | }
290 | };
291 | var props = {
292 | borderRadius: getSupportedProp(['borderRadius', 'MozBorderRadius', 'webkitBorderRadius']),
293 | boxShadow: getSupportedProp(['boxShadow', 'MozBoxShadow', 'webkitBoxShadow'])
294 | };
295 | return function (elm, prop, value) {
296 | switch (prop.toLowerCase()) {
297 | case 'opacity':
298 | var alphaOpacity = Math.round(parseFloat(value) * 100);
299 | elm.style.opacity = value;
300 | elm.style.filter = 'alpha(opacity=' + alphaOpacity + ')';
301 | break;
302 | default:
303 | elm.style[props[prop]] = value;
304 | break;
305 | }
306 | };
307 | })(),
308 |
309 |
310 | setBorderRadius : function (elm, value) {
311 | jsc.setStyle(elm, 'borderRadius', value || '0');
312 | },
313 |
314 |
315 | setBoxShadow : function (elm, value) {
316 | jsc.setStyle(elm, 'boxShadow', value || 'none');
317 | },
318 |
319 |
320 | getElementPos : function (e, relativeToViewport) {
321 | var x=0, y=0;
322 | var rect = e.getBoundingClientRect();
323 | x = rect.left;
324 | y = rect.top;
325 | if (!relativeToViewport) {
326 | var viewPos = jsc.getViewPos();
327 | x += viewPos[0];
328 | y += viewPos[1];
329 | }
330 | return [x, y];
331 | },
332 |
333 |
334 | getElementSize : function (e) {
335 | return [e.offsetWidth, e.offsetHeight];
336 | },
337 |
338 |
339 | // get pointer's X/Y coordinates relative to viewport
340 | getAbsPointerPos : function (e) {
341 | if (!e) { e = window.event; }
342 | var x = 0, y = 0;
343 | if (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) {
344 | // touch devices
345 | x = e.changedTouches[0].clientX;
346 | y = e.changedTouches[0].clientY;
347 | } else if (typeof e.clientX === 'number') {
348 | x = e.clientX;
349 | y = e.clientY;
350 | }
351 | return { x: x, y: y };
352 | },
353 |
354 |
355 | // get pointer's X/Y coordinates relative to target element
356 | getRelPointerPos : function (e) {
357 | if (!e) { e = window.event; }
358 | var target = e.target || e.srcElement;
359 | var targetRect = target.getBoundingClientRect();
360 |
361 | var x = 0, y = 0;
362 |
363 | var clientX = 0, clientY = 0;
364 | if (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) {
365 | // touch devices
366 | clientX = e.changedTouches[0].clientX;
367 | clientY = e.changedTouches[0].clientY;
368 | } else if (typeof e.clientX === 'number') {
369 | clientX = e.clientX;
370 | clientY = e.clientY;
371 | }
372 |
373 | x = clientX - targetRect.left;
374 | y = clientY - targetRect.top;
375 | return { x: x, y: y };
376 | },
377 |
378 |
379 | getViewPos : function () {
380 | var doc = document.documentElement;
381 | return [
382 | (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
383 | (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
384 | ];
385 | },
386 |
387 |
388 | getViewSize : function () {
389 | var doc = document.documentElement;
390 | return [
391 | (window.innerWidth || doc.clientWidth),
392 | (window.innerHeight || doc.clientHeight),
393 | ];
394 | },
395 |
396 |
397 | redrawPosition : function () {
398 |
399 | if (jsc.picker && jsc.picker.owner) {
400 | var thisObj = jsc.picker.owner;
401 |
402 | var tp, vp;
403 |
404 | if (thisObj.fixed) {
405 | // Fixed elements are positioned relative to viewport,
406 | // therefore we can ignore the scroll offset
407 | tp = jsc.getElementPos(thisObj.targetElement, true); // target pos
408 | vp = [0, 0]; // view pos
409 | } else {
410 | tp = jsc.getElementPos(thisObj.targetElement); // target pos
411 | vp = jsc.getViewPos(); // view pos
412 | }
413 |
414 | var ts = jsc.getElementSize(thisObj.targetElement); // target size
415 | var vs = jsc.getViewSize(); // view size
416 | var ps = jsc.getPickerOuterDims(thisObj); // picker size
417 | var a, b, c;
418 | switch (thisObj.position.toLowerCase()) {
419 | case 'left': a=1; b=0; c=-1; break;
420 | case 'right':a=1; b=0; c=1; break;
421 | case 'top': a=0; b=1; c=-1; break;
422 | default: a=0; b=1; c=1; break;
423 | }
424 | var l = (ts[b]+ps[b])/2;
425 |
426 | // compute picker position
427 | if (!thisObj.smartPosition) {
428 | var pp = [
429 | tp[a],
430 | tp[b]+ts[b]-l+l*c
431 | ];
432 | } else {
433 | var pp = [
434 | -vp[a]+tp[a]+ps[a] > vs[a] ?
435 | (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
436 | tp[a],
437 | -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
438 | (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
439 | (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
440 | ];
441 | }
442 |
443 | var x = pp[a];
444 | var y = pp[b];
445 | var positionValue = thisObj.fixed ? 'fixed' : 'absolute';
446 | var contractShadow =
447 | (pp[0] + ps[0] > tp[0] || pp[0] < tp[0] + ts[0]) &&
448 | (pp[1] + ps[1] < tp[1] + ts[1]);
449 |
450 | jsc._drawPosition(thisObj, x, y, positionValue, contractShadow);
451 | }
452 | },
453 |
454 |
455 | _drawPosition : function (thisObj, x, y, positionValue, contractShadow) {
456 | var vShadow = contractShadow ? 0 : thisObj.shadowBlur; // px
457 |
458 | jsc.picker.wrap.style.position = positionValue;
459 | jsc.picker.wrap.style.left = x + 'px';
460 | jsc.picker.wrap.style.top = y + 'px';
461 |
462 | jsc.setBoxShadow(
463 | jsc.picker.boxS,
464 | thisObj.shadow ?
465 | new jsc.BoxShadow(0, vShadow, thisObj.shadowBlur, 0, thisObj.shadowColor) :
466 | null);
467 | },
468 |
469 |
470 | getPickerDims : function (thisObj) {
471 | var displaySlider = !!jsc.getSliderComponent(thisObj);
472 | var dims = [
473 | 2 * thisObj.insetWidth + 2 * thisObj.padding + thisObj.width +
474 | (displaySlider ? 2 * thisObj.insetWidth + jsc.getPadToSliderPadding(thisObj) + thisObj.sliderSize : 0),
475 | 2 * thisObj.insetWidth + 2 * thisObj.padding + thisObj.height +
476 | (thisObj.closable ? 2 * thisObj.insetWidth + thisObj.padding + thisObj.buttonHeight : 0)
477 | ];
478 | return dims;
479 | },
480 |
481 |
482 | getPickerOuterDims : function (thisObj) {
483 | var dims = jsc.getPickerDims(thisObj);
484 | return [
485 | dims[0] + 2 * thisObj.borderWidth,
486 | dims[1] + 2 * thisObj.borderWidth
487 | ];
488 | },
489 |
490 |
491 | getPadToSliderPadding : function (thisObj) {
492 | return Math.max(thisObj.padding, 1.5 * (2 * thisObj.pointerBorderWidth + thisObj.pointerThickness));
493 | },
494 |
495 |
496 | getPadYComponent : function (thisObj) {
497 | switch (thisObj.mode.charAt(1).toLowerCase()) {
498 | case 'v': return 'v'; break;
499 | }
500 | return 's';
501 | },
502 |
503 |
504 | getSliderComponent : function (thisObj) {
505 | if (thisObj.mode.length > 2) {
506 | switch (thisObj.mode.charAt(2).toLowerCase()) {
507 | case 's': return 's'; break;
508 | case 'v': return 'v'; break;
509 | }
510 | }
511 | return null;
512 | },
513 |
514 |
515 | onDocumentMouseDown : function (e) {
516 | if (!e) { e = window.event; }
517 | var target = e.target || e.srcElement;
518 |
519 | if (target._jscLinkedInstance) {
520 | if (target._jscLinkedInstance.showOnClick) {
521 | target._jscLinkedInstance.show();
522 | }
523 | } else if (target._jscControlName) {
524 | jsc.onControlPointerStart(e, target, target._jscControlName, 'mouse');
525 | } else {
526 | // Mouse is outside the picker controls -> hide the color picker!
527 | if (jsc.picker && jsc.picker.owner) {
528 | jsc.picker.owner.hide();
529 | }
530 | }
531 | },
532 |
533 |
534 | onDocumentTouchStart : function (e) {
535 | if (!e) { e = window.event; }
536 | var target = e.target || e.srcElement;
537 |
538 | if (target._jscLinkedInstance) {
539 | if (target._jscLinkedInstance.showOnClick) {
540 | target._jscLinkedInstance.show();
541 | }
542 | } else if (target._jscControlName) {
543 | jsc.onControlPointerStart(e, target, target._jscControlName, 'touch');
544 | } else {
545 | if (jsc.picker && jsc.picker.owner) {
546 | jsc.picker.owner.hide();
547 | }
548 | }
549 | },
550 |
551 |
552 | onWindowResize : function (e) {
553 | jsc.redrawPosition();
554 | },
555 |
556 |
557 | onParentScroll : function (e) {
558 | // hide the picker when one of the parent elements is scrolled
559 | if (jsc.picker && jsc.picker.owner) {
560 | jsc.picker.owner.hide();
561 | }
562 | },
563 |
564 |
565 | _pointerMoveEvent : {
566 | mouse: 'mousemove',
567 | touch: 'touchmove'
568 | },
569 | _pointerEndEvent : {
570 | mouse: 'mouseup',
571 | touch: 'touchend'
572 | },
573 |
574 |
575 | _pointerOrigin : null,
576 | _capturedTarget : null,
577 |
578 |
579 | onControlPointerStart : function (e, target, controlName, pointerType) {
580 | var thisObj = target._jscInstance;
581 |
582 | jsc.preventDefault(e);
583 | jsc.captureTarget(target);
584 |
585 | var registerDragEvents = function (doc, offset) {
586 | jsc.attachGroupEvent('drag', doc, jsc._pointerMoveEvent[pointerType],
587 | jsc.onDocumentPointerMove(e, target, controlName, pointerType, offset));
588 | jsc.attachGroupEvent('drag', doc, jsc._pointerEndEvent[pointerType],
589 | jsc.onDocumentPointerEnd(e, target, controlName, pointerType));
590 | };
591 |
592 | registerDragEvents(document, [0, 0]);
593 |
594 | if (window.parent && window.frameElement) {
595 | var rect = window.frameElement.getBoundingClientRect();
596 | var ofs = [-rect.left, -rect.top];
597 | registerDragEvents(window.parent.window.document, ofs);
598 | }
599 |
600 | var abs = jsc.getAbsPointerPos(e);
601 | var rel = jsc.getRelPointerPos(e);
602 | jsc._pointerOrigin = {
603 | x: abs.x - rel.x,
604 | y: abs.y - rel.y
605 | };
606 |
607 | switch (controlName) {
608 | case 'pad':
609 | // if the slider is at the bottom, move it up
610 | switch (jsc.getSliderComponent(thisObj)) {
611 | case 's': if (thisObj.hsv[1] === 0) { thisObj.fromHSV(null, 100, null); }; break;
612 | case 'v': if (thisObj.hsv[2] === 0) { thisObj.fromHSV(null, null, 100); }; break;
613 | }
614 | jsc.setPad(thisObj, e, 0, 0);
615 | break;
616 |
617 | case 'sld':
618 | jsc.setSld(thisObj, e, 0);
619 | break;
620 | }
621 |
622 | jsc.dispatchFineChange(thisObj);
623 | },
624 |
625 |
626 | onDocumentPointerMove : function (e, target, controlName, pointerType, offset) {
627 | return function (e) {
628 | var thisObj = target._jscInstance;
629 | switch (controlName) {
630 | case 'pad':
631 | if (!e) { e = window.event; }
632 | jsc.setPad(thisObj, e, offset[0], offset[1]);
633 | jsc.dispatchFineChange(thisObj);
634 | break;
635 |
636 | case 'sld':
637 | if (!e) { e = window.event; }
638 | jsc.setSld(thisObj, e, offset[1]);
639 | jsc.dispatchFineChange(thisObj);
640 | break;
641 | }
642 | }
643 | },
644 |
645 |
646 | onDocumentPointerEnd : function (e, target, controlName, pointerType) {
647 | return function (e) {
648 | var thisObj = target._jscInstance;
649 | jsc.detachGroupEvents('drag');
650 | jsc.releaseTarget();
651 | // Always dispatch changes after detaching outstanding mouse handlers,
652 | // in case some user interaction will occur in user's onchange callback
653 | // that would intrude with current mouse events
654 | jsc.dispatchChange(thisObj);
655 | };
656 | },
657 |
658 |
659 | dispatchChange : function (thisObj) {
660 | if (thisObj.valueElement) {
661 | if (jsc.isElementType(thisObj.valueElement, 'input')) {
662 | jsc.fireEvent(thisObj.valueElement, 'change');
663 | }
664 | }
665 | },
666 |
667 |
668 | dispatchFineChange : function (thisObj) {
669 | if (thisObj.onFineChange) {
670 | var callback;
671 | if (typeof thisObj.onFineChange === 'string') {
672 | callback = new Function (thisObj.onFineChange);
673 | } else {
674 | callback = thisObj.onFineChange;
675 | }
676 | callback.call(thisObj);
677 | }
678 | },
679 |
680 |
681 | setPad : function (thisObj, e, ofsX, ofsY) {
682 | var pointerAbs = jsc.getAbsPointerPos(e);
683 | var x = ofsX + pointerAbs.x - jsc._pointerOrigin.x - thisObj.padding - thisObj.insetWidth;
684 | var y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.insetWidth;
685 |
686 | var xVal = x * (360 / (thisObj.width - 1));
687 | var yVal = 100 - (y * (100 / (thisObj.height - 1)));
688 |
689 | switch (jsc.getPadYComponent(thisObj)) {
690 | case 's': thisObj.fromHSV(xVal, yVal, null, jsc.leaveSld); break;
691 | case 'v': thisObj.fromHSV(xVal, null, yVal, jsc.leaveSld); break;
692 | }
693 | },
694 |
695 |
696 | setSld : function (thisObj, e, ofsY) {
697 | var pointerAbs = jsc.getAbsPointerPos(e);
698 | var y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.insetWidth;
699 |
700 | var yVal = 100 - (y * (100 / (thisObj.height - 1)));
701 |
702 | switch (jsc.getSliderComponent(thisObj)) {
703 | case 's': thisObj.fromHSV(null, yVal, null, jsc.leavePad); break;
704 | case 'v': thisObj.fromHSV(null, null, yVal, jsc.leavePad); break;
705 | }
706 | },
707 |
708 |
709 | _vmlNS : 'jsc_vml_',
710 | _vmlCSS : 'jsc_vml_css_',
711 | _vmlReady : false,
712 |
713 |
714 | initVML : function () {
715 | if (!jsc._vmlReady) {
716 | // init VML namespace
717 | var doc = document;
718 | if (!doc.namespaces[jsc._vmlNS]) {
719 | doc.namespaces.add(jsc._vmlNS, 'urn:schemas-microsoft-com:vml');
720 | }
721 | if (!doc.styleSheets[jsc._vmlCSS]) {
722 | var tags = ['shape', 'shapetype', 'group', 'background', 'path', 'formulas', 'handles', 'fill', 'stroke', 'shadow', 'textbox', 'textpath', 'imagedata', 'line', 'polyline', 'curve', 'rect', 'roundrect', 'oval', 'arc', 'image'];
723 | var ss = doc.createStyleSheet();
724 | ss.owningElement.id = jsc._vmlCSS;
725 | for (var i = 0; i < tags.length; i += 1) {
726 | ss.addRule(jsc._vmlNS + '\\:' + tags[i], 'behavior:url(#default#VML);');
727 | }
728 | }
729 | jsc._vmlReady = true;
730 | }
731 | },
732 |
733 |
734 | createPalette : function () {
735 |
736 | var paletteObj = {
737 | elm: null,
738 | draw: null
739 | };
740 |
741 | if (jsc.isCanvasSupported) {
742 | // Canvas implementation for modern browsers
743 |
744 | var canvas = document.createElement('canvas');
745 | var ctx = canvas.getContext('2d');
746 |
747 | var drawFunc = function (width, height, type) {
748 | canvas.width = width;
749 | canvas.height = height;
750 |
751 | ctx.clearRect(0, 0, canvas.width, canvas.height);
752 |
753 | var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0);
754 | hGrad.addColorStop(0 / 6, '#F00');
755 | hGrad.addColorStop(1 / 6, '#FF0');
756 | hGrad.addColorStop(2 / 6, '#0F0');
757 | hGrad.addColorStop(3 / 6, '#0FF');
758 | hGrad.addColorStop(4 / 6, '#00F');
759 | hGrad.addColorStop(5 / 6, '#F0F');
760 | hGrad.addColorStop(6 / 6, '#F00');
761 |
762 | ctx.fillStyle = hGrad;
763 | ctx.fillRect(0, 0, canvas.width, canvas.height);
764 |
765 | var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height);
766 | switch (type.toLowerCase()) {
767 | case 's':
768 | vGrad.addColorStop(0, 'rgba(255,255,255,0)');
769 | vGrad.addColorStop(1, 'rgba(255,255,255,1)');
770 | break;
771 | case 'v':
772 | vGrad.addColorStop(0, 'rgba(0,0,0,0)');
773 | vGrad.addColorStop(1, 'rgba(0,0,0,1)');
774 | break;
775 | }
776 | ctx.fillStyle = vGrad;
777 | ctx.fillRect(0, 0, canvas.width, canvas.height);
778 | };
779 |
780 | paletteObj.elm = canvas;
781 | paletteObj.draw = drawFunc;
782 |
783 | } else {
784 | // VML fallback for IE 7 and 8
785 |
786 | jsc.initVML();
787 |
788 | var vmlContainer = document.createElement('div');
789 | vmlContainer.style.position = 'relative';
790 | vmlContainer.style.overflow = 'hidden';
791 |
792 | var hGrad = document.createElement(jsc._vmlNS + ':fill');
793 | hGrad.type = 'gradient';
794 | hGrad.method = 'linear';
795 | hGrad.angle = '90';
796 | hGrad.colors = '16.67% #F0F, 33.33% #00F, 50% #0FF, 66.67% #0F0, 83.33% #FF0'
797 |
798 | var hRect = document.createElement(jsc._vmlNS + ':rect');
799 | hRect.style.position = 'absolute';
800 | hRect.style.left = -1 + 'px';
801 | hRect.style.top = -1 + 'px';
802 | hRect.stroked = false;
803 | hRect.appendChild(hGrad);
804 | vmlContainer.appendChild(hRect);
805 |
806 | var vGrad = document.createElement(jsc._vmlNS + ':fill');
807 | vGrad.type = 'gradient';
808 | vGrad.method = 'linear';
809 | vGrad.angle = '180';
810 | vGrad.opacity = '0';
811 |
812 | var vRect = document.createElement(jsc._vmlNS + ':rect');
813 | vRect.style.position = 'absolute';
814 | vRect.style.left = -1 + 'px';
815 | vRect.style.top = -1 + 'px';
816 | vRect.stroked = false;
817 | vRect.appendChild(vGrad);
818 | vmlContainer.appendChild(vRect);
819 |
820 | var drawFunc = function (width, height, type) {
821 | vmlContainer.style.width = width + 'px';
822 | vmlContainer.style.height = height + 'px';
823 |
824 | hRect.style.width =
825 | vRect.style.width =
826 | (width + 1) + 'px';
827 | hRect.style.height =
828 | vRect.style.height =
829 | (height + 1) + 'px';
830 |
831 | // Colors must be specified during every redraw, otherwise IE won't display
832 | // a full gradient during a subsequential redraw
833 | hGrad.color = '#F00';
834 | hGrad.color2 = '#F00';
835 |
836 | switch (type.toLowerCase()) {
837 | case 's':
838 | vGrad.color = vGrad.color2 = '#FFF';
839 | break;
840 | case 'v':
841 | vGrad.color = vGrad.color2 = '#000';
842 | break;
843 | }
844 | };
845 |
846 | paletteObj.elm = vmlContainer;
847 | paletteObj.draw = drawFunc;
848 | }
849 |
850 | return paletteObj;
851 | },
852 |
853 |
854 | createSliderGradient : function () {
855 |
856 | var sliderObj = {
857 | elm: null,
858 | draw: null
859 | };
860 |
861 | if (jsc.isCanvasSupported) {
862 | // Canvas implementation for modern browsers
863 |
864 | var canvas = document.createElement('canvas');
865 | var ctx = canvas.getContext('2d');
866 |
867 | var drawFunc = function (width, height, color1, color2) {
868 | canvas.width = width;
869 | canvas.height = height;
870 |
871 | ctx.clearRect(0, 0, canvas.width, canvas.height);
872 |
873 | var grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
874 | grad.addColorStop(0, color1);
875 | grad.addColorStop(1, color2);
876 |
877 | ctx.fillStyle = grad;
878 | ctx.fillRect(0, 0, canvas.width, canvas.height);
879 | };
880 |
881 | sliderObj.elm = canvas;
882 | sliderObj.draw = drawFunc;
883 |
884 | } else {
885 | // VML fallback for IE 7 and 8
886 |
887 | jsc.initVML();
888 |
889 | var vmlContainer = document.createElement('div');
890 | vmlContainer.style.position = 'relative';
891 | vmlContainer.style.overflow = 'hidden';
892 |
893 | var grad = document.createElement(jsc._vmlNS + ':fill');
894 | grad.type = 'gradient';
895 | grad.method = 'linear';
896 | grad.angle = '180';
897 |
898 | var rect = document.createElement(jsc._vmlNS + ':rect');
899 | rect.style.position = 'absolute';
900 | rect.style.left = -1 + 'px';
901 | rect.style.top = -1 + 'px';
902 | rect.stroked = false;
903 | rect.appendChild(grad);
904 | vmlContainer.appendChild(rect);
905 |
906 | var drawFunc = function (width, height, color1, color2) {
907 | vmlContainer.style.width = width + 'px';
908 | vmlContainer.style.height = height + 'px';
909 |
910 | rect.style.width = (width + 1) + 'px';
911 | rect.style.height = (height + 1) + 'px';
912 |
913 | grad.color = color1;
914 | grad.color2 = color2;
915 | };
916 |
917 | sliderObj.elm = vmlContainer;
918 | sliderObj.draw = drawFunc;
919 | }
920 |
921 | return sliderObj;
922 | },
923 |
924 |
925 | leaveValue : 1<<0,
926 | leaveStyle : 1<<1,
927 | leavePad : 1<<2,
928 | leaveSld : 1<<3,
929 |
930 |
931 | BoxShadow : (function () {
932 | var BoxShadow = function (hShadow, vShadow, blur, spread, color, inset) {
933 | this.hShadow = hShadow;
934 | this.vShadow = vShadow;
935 | this.blur = blur;
936 | this.spread = spread;
937 | this.color = color;
938 | this.inset = !!inset;
939 | };
940 |
941 | BoxShadow.prototype.toString = function () {
942 | var vals = [
943 | Math.round(this.hShadow) + 'px',
944 | Math.round(this.vShadow) + 'px',
945 | Math.round(this.blur) + 'px',
946 | Math.round(this.spread) + 'px',
947 | this.color
948 | ];
949 | if (this.inset) {
950 | vals.push('inset');
951 | }
952 | return vals.join(' ');
953 | };
954 |
955 | return BoxShadow;
956 | })(),
957 |
958 |
959 | //
960 | // Usage:
961 | // var myColor = new jscolor( [, ])
962 | //
963 |
964 | jscolor : function (targetElement, options) {
965 |
966 | // General options
967 | //
968 | this.value = null; // initial HEX color. To change it later, use methods fromString(), fromHSV() and fromRGB()
969 | this.valueElement = targetElement; // element that will be used to display and input the color code
970 | this.styleElement = targetElement; // element that will preview the picked color using CSS backgroundColor
971 | this.required = true; // whether the associated text can be left empty
972 | this.refine = true; // whether to refine the entered color code (e.g. uppercase it and remove whitespace)
973 | this.hash = false; // whether to prefix the HEX color code with # symbol
974 | this.uppercase = true; // whether to show the color code in upper case
975 | this.onFineChange = null; // called instantly every time the color changes (value can be either a function or a string with javascript code)
976 | this.activeClass = 'jscolor-active'; // class to be set to the target element when a picker window is open on it
977 | this.overwriteImportant = false; // whether to overwrite colors of styleElement using !important
978 | this.minS = 0; // min allowed saturation (0 - 100)
979 | this.maxS = 100; // max allowed saturation (0 - 100)
980 | this.minV = 0; // min allowed value (brightness) (0 - 100)
981 | this.maxV = 100; // max allowed value (brightness) (0 - 100)
982 |
983 | // Accessing the picked color
984 | //
985 | this.hsv = [0, 0, 100]; // read-only [0-360, 0-100, 0-100]
986 | this.rgb = [255, 255, 255]; // read-only [0-255, 0-255, 0-255]
987 |
988 | // Color Picker options
989 | //
990 | this.width = 181; // width of color palette (in px)
991 | this.height = 101; // height of color palette (in px)
992 | this.showOnClick = true; // whether to display the color picker when user clicks on its target element
993 | this.mode = 'HSV'; // HSV | HVS | HS | HV - layout of the color picker controls
994 | this.position = 'bottom'; // left | right | top | bottom - position relative to the target element
995 | this.smartPosition = true; // automatically change picker position when there is not enough space for it
996 | this.sliderSize = 16; // px
997 | this.crossSize = 8; // px
998 | this.closable = false; // whether to display the Close button
999 | this.closeText = 'Close';
1000 | this.buttonColor = '#000000'; // CSS color
1001 | this.buttonHeight = 18; // px
1002 | this.padding = 12; // px
1003 | this.backgroundColor = '#FFFFFF'; // CSS color
1004 | this.borderWidth = 1; // px
1005 | this.borderColor = '#BBBBBB'; // CSS color
1006 | this.borderRadius = 8; // px
1007 | this.insetWidth = 1; // px
1008 | this.insetColor = '#BBBBBB'; // CSS color
1009 | this.shadow = true; // whether to display shadow
1010 | this.shadowBlur = 15; // px
1011 | this.shadowColor = 'rgba(0,0,0,0.2)'; // CSS color
1012 | this.pointerColor = '#4C4C4C'; // px
1013 | this.pointerBorderColor = '#FFFFFF'; // px
1014 | this.pointerBorderWidth = 1; // px
1015 | this.pointerThickness = 2; // px
1016 | this.zIndex = 1000;
1017 | this.container = null; // where to append the color picker (BODY element by default)
1018 |
1019 |
1020 | for (var opt in options) {
1021 | if (options.hasOwnProperty(opt)) {
1022 | this[opt] = options[opt];
1023 | }
1024 | }
1025 |
1026 |
1027 | this.hide = function () {
1028 | if (isPickerOwner()) {
1029 | detachPicker();
1030 | }
1031 | };
1032 |
1033 |
1034 | this.show = function () {
1035 | drawPicker();
1036 | };
1037 |
1038 |
1039 | this.redraw = function () {
1040 | if (isPickerOwner()) {
1041 | drawPicker();
1042 | }
1043 | };
1044 |
1045 |
1046 | this.importColor = function () {
1047 | if (!this.valueElement) {
1048 | this.exportColor();
1049 | } else {
1050 | if (jsc.isElementType(this.valueElement, 'input')) {
1051 | if (!this.refine) {
1052 | if (!this.fromString(this.valueElement.value, jsc.leaveValue)) {
1053 | if (this.styleElement) {
1054 | this.styleElement.style.backgroundImage = this.styleElement._jscOrigStyle.backgroundImage;
1055 | this.styleElement.style.backgroundColor = this.styleElement._jscOrigStyle.backgroundColor;
1056 | this.styleElement.style.color = this.styleElement._jscOrigStyle.color;
1057 | }
1058 | this.exportColor(jsc.leaveValue | jsc.leaveStyle);
1059 | }
1060 | } else if (!this.required && /^\s*$/.test(this.valueElement.value)) {
1061 | this.valueElement.value = '';
1062 | if (this.styleElement) {
1063 | this.styleElement.style.backgroundImage = this.styleElement._jscOrigStyle.backgroundImage;
1064 | this.styleElement.style.backgroundColor = this.styleElement._jscOrigStyle.backgroundColor;
1065 | this.styleElement.style.color = this.styleElement._jscOrigStyle.color;
1066 | }
1067 | this.exportColor(jsc.leaveValue | jsc.leaveStyle);
1068 |
1069 | } else if (this.fromString(this.valueElement.value)) {
1070 | // managed to import color successfully from the value -> OK, don't do anything
1071 | } else {
1072 | this.exportColor();
1073 | }
1074 | } else {
1075 | // not an input element -> doesn't have any value
1076 | this.exportColor();
1077 | }
1078 | }
1079 | };
1080 |
1081 |
1082 | this.exportColor = function (flags) {
1083 | if (!(flags & jsc.leaveValue) && this.valueElement) {
1084 | var value = this.toString();
1085 | if (this.uppercase) { value = value.toUpperCase(); }
1086 | if (this.hash) { value = '#' + value; }
1087 |
1088 | if (jsc.isElementType(this.valueElement, 'input')) {
1089 | this.valueElement.value = value;
1090 | } else {
1091 | this.valueElement.innerHTML = value;
1092 | }
1093 | }
1094 | if (!(flags & jsc.leaveStyle)) {
1095 | if (this.styleElement) {
1096 | var bgColor = '#' + this.toString();
1097 | var fgColor = this.isLight() ? '#000' : '#FFF';
1098 |
1099 | this.styleElement.style.backgroundImage = 'none';
1100 | this.styleElement.style.backgroundColor = bgColor;
1101 | this.styleElement.style.color = fgColor;
1102 |
1103 | if (this.overwriteImportant) {
1104 | this.styleElement.setAttribute('style',
1105 | 'background: ' + bgColor + ' !important; ' +
1106 | 'color: ' + fgColor + ' !important;'
1107 | );
1108 | }
1109 | }
1110 | }
1111 | if (!(flags & jsc.leavePad) && isPickerOwner()) {
1112 | redrawPad();
1113 | }
1114 | if (!(flags & jsc.leaveSld) && isPickerOwner()) {
1115 | redrawSld();
1116 | }
1117 | };
1118 |
1119 |
1120 | // h: 0-360
1121 | // s: 0-100
1122 | // v: 0-100
1123 | //
1124 | this.fromHSV = function (h, s, v, flags) { // null = don't change
1125 | if (h !== null) {
1126 | if (isNaN(h)) { return false; }
1127 | h = Math.max(0, Math.min(360, h));
1128 | }
1129 | if (s !== null) {
1130 | if (isNaN(s)) { return false; }
1131 | s = Math.max(0, Math.min(100, this.maxS, s), this.minS);
1132 | }
1133 | if (v !== null) {
1134 | if (isNaN(v)) { return false; }
1135 | v = Math.max(0, Math.min(100, this.maxV, v), this.minV);
1136 | }
1137 |
1138 | this.rgb = HSV_RGB(
1139 | h===null ? this.hsv[0] : (this.hsv[0]=h),
1140 | s===null ? this.hsv[1] : (this.hsv[1]=s),
1141 | v===null ? this.hsv[2] : (this.hsv[2]=v)
1142 | );
1143 |
1144 | this.exportColor(flags);
1145 | };
1146 |
1147 |
1148 | // r: 0-255
1149 | // g: 0-255
1150 | // b: 0-255
1151 | //
1152 | this.fromRGB = function (r, g, b, flags) { // null = don't change
1153 | if (r !== null) {
1154 | if (isNaN(r)) { return false; }
1155 | r = Math.max(0, Math.min(255, r));
1156 | }
1157 | if (g !== null) {
1158 | if (isNaN(g)) { return false; }
1159 | g = Math.max(0, Math.min(255, g));
1160 | }
1161 | if (b !== null) {
1162 | if (isNaN(b)) { return false; }
1163 | b = Math.max(0, Math.min(255, b));
1164 | }
1165 |
1166 | var hsv = RGB_HSV(
1167 | r===null ? this.rgb[0] : r,
1168 | g===null ? this.rgb[1] : g,
1169 | b===null ? this.rgb[2] : b
1170 | );
1171 | if (hsv[0] !== null) {
1172 | this.hsv[0] = Math.max(0, Math.min(360, hsv[0]));
1173 | }
1174 | if (hsv[2] !== 0) {
1175 | this.hsv[1] = hsv[1]===null ? null : Math.max(0, this.minS, Math.min(100, this.maxS, hsv[1]));
1176 | }
1177 | this.hsv[2] = hsv[2]===null ? null : Math.max(0, this.minV, Math.min(100, this.maxV, hsv[2]));
1178 |
1179 | // update RGB according to final HSV, as some values might be trimmed
1180 | var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
1181 | this.rgb[0] = rgb[0];
1182 | this.rgb[1] = rgb[1];
1183 | this.rgb[2] = rgb[2];
1184 |
1185 | this.exportColor(flags);
1186 | };
1187 |
1188 |
1189 | this.fromString = function (str, flags) {
1190 | var m;
1191 | if (m = str.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i)) {
1192 | // HEX notation
1193 | //
1194 |
1195 | if (m[1].length === 6) {
1196 | // 6-char notation
1197 | this.fromRGB(
1198 | parseInt(m[1].substr(0,2),16),
1199 | parseInt(m[1].substr(2,2),16),
1200 | parseInt(m[1].substr(4,2),16),
1201 | flags
1202 | );
1203 | } else {
1204 | // 3-char notation
1205 | this.fromRGB(
1206 | parseInt(m[1].charAt(0) + m[1].charAt(0),16),
1207 | parseInt(m[1].charAt(1) + m[1].charAt(1),16),
1208 | parseInt(m[1].charAt(2) + m[1].charAt(2),16),
1209 | flags
1210 | );
1211 | }
1212 | return true;
1213 |
1214 | } else if (m = str.match(/^\W*rgba?\(([^)]*)\)\W*$/i)) {
1215 | var params = m[1].split(',');
1216 | var re = /^\s*(\d*)(\.\d+)?\s*$/;
1217 | var mR, mG, mB;
1218 | if (
1219 | params.length >= 3 &&
1220 | (mR = params[0].match(re)) &&
1221 | (mG = params[1].match(re)) &&
1222 | (mB = params[2].match(re))
1223 | ) {
1224 | var r = parseFloat((mR[1] || '0') + (mR[2] || ''));
1225 | var g = parseFloat((mG[1] || '0') + (mG[2] || ''));
1226 | var b = parseFloat((mB[1] || '0') + (mB[2] || ''));
1227 | this.fromRGB(r, g, b, flags);
1228 | return true;
1229 | }
1230 | }
1231 | return false;
1232 | };
1233 |
1234 |
1235 | this.toString = function () {
1236 | return (
1237 | (0x100 | Math.round(this.rgb[0])).toString(16).substr(1) +
1238 | (0x100 | Math.round(this.rgb[1])).toString(16).substr(1) +
1239 | (0x100 | Math.round(this.rgb[2])).toString(16).substr(1)
1240 | );
1241 | };
1242 |
1243 |
1244 | this.toHEXString = function () {
1245 | return '#' + this.toString().toUpperCase();
1246 | };
1247 |
1248 |
1249 | this.toRGBString = function () {
1250 | return ('rgb(' +
1251 | Math.round(this.rgb[0]) + ',' +
1252 | Math.round(this.rgb[1]) + ',' +
1253 | Math.round(this.rgb[2]) + ')'
1254 | );
1255 | };
1256 |
1257 |
1258 | this.isLight = function () {
1259 | return (
1260 | 0.213 * this.rgb[0] +
1261 | 0.715 * this.rgb[1] +
1262 | 0.072 * this.rgb[2] >
1263 | 255 / 2
1264 | );
1265 | };
1266 |
1267 |
1268 | this._processParentElementsInDOM = function () {
1269 | if (this._linkedElementsProcessed) { return; }
1270 | this._linkedElementsProcessed = true;
1271 |
1272 | var elm = this.targetElement;
1273 | do {
1274 | // If the target element or one of its parent nodes has fixed position,
1275 | // then use fixed positioning instead
1276 | //
1277 | // Note: In Firefox, getComputedStyle returns null in a hidden iframe,
1278 | // that's why we need to check if the returned style object is non-empty
1279 | var currStyle = jsc.getStyle(elm);
1280 | if (currStyle && currStyle.position.toLowerCase() === 'fixed') {
1281 | this.fixed = true;
1282 | }
1283 |
1284 | if (elm !== this.targetElement) {
1285 | // Ensure to attach onParentScroll only once to each parent element
1286 | // (multiple targetElements can share the same parent nodes)
1287 | //
1288 | // Note: It's not just offsetParents that can be scrollable,
1289 | // that's why we loop through all parent nodes
1290 | if (!elm._jscEventsAttached) {
1291 | jsc.attachEvent(elm, 'scroll', jsc.onParentScroll);
1292 | elm._jscEventsAttached = true;
1293 | }
1294 | }
1295 | } while ((elm = elm.parentNode) && !jsc.isElementType(elm, 'body'));
1296 | };
1297 |
1298 |
1299 | // r: 0-255
1300 | // g: 0-255
1301 | // b: 0-255
1302 | //
1303 | // returns: [ 0-360, 0-100, 0-100 ]
1304 | //
1305 | function RGB_HSV (r, g, b) {
1306 | r /= 255;
1307 | g /= 255;
1308 | b /= 255;
1309 | var n = Math.min(Math.min(r,g),b);
1310 | var v = Math.max(Math.max(r,g),b);
1311 | var m = v - n;
1312 | if (m === 0) { return [ null, 0, 100 * v ]; }
1313 | var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
1314 | return [
1315 | 60 * (h===6?0:h),
1316 | 100 * (m/v),
1317 | 100 * v
1318 | ];
1319 | }
1320 |
1321 |
1322 | // h: 0-360
1323 | // s: 0-100
1324 | // v: 0-100
1325 | //
1326 | // returns: [ 0-255, 0-255, 0-255 ]
1327 | //
1328 | function HSV_RGB (h, s, v) {
1329 | var u = 255 * (v / 100);
1330 |
1331 | if (h === null) {
1332 | return [ u, u, u ];
1333 | }
1334 |
1335 | h /= 60;
1336 | s /= 100;
1337 |
1338 | var i = Math.floor(h);
1339 | var f = i%2 ? h-i : 1-(h-i);
1340 | var m = u * (1 - s);
1341 | var n = u * (1 - s * f);
1342 | switch (i) {
1343 | case 6:
1344 | case 0: return [u,n,m];
1345 | case 1: return [n,u,m];
1346 | case 2: return [m,u,n];
1347 | case 3: return [m,n,u];
1348 | case 4: return [n,m,u];
1349 | case 5: return [u,m,n];
1350 | }
1351 | }
1352 |
1353 |
1354 | function detachPicker () {
1355 | jsc.unsetClass(THIS.targetElement, THIS.activeClass);
1356 | jsc.picker.wrap.parentNode.removeChild(jsc.picker.wrap);
1357 | delete jsc.picker.owner;
1358 | }
1359 |
1360 |
1361 | function drawPicker () {
1362 |
1363 | // At this point, when drawing the picker, we know what the parent elements are
1364 | // and we can do all related DOM operations, such as registering events on them
1365 | // or checking their positioning
1366 | THIS._processParentElementsInDOM();
1367 |
1368 | if (!jsc.picker) {
1369 | jsc.picker = {
1370 | owner: null,
1371 | wrap : document.createElement('div'),
1372 | box : document.createElement('div'),
1373 | boxS : document.createElement('div'), // shadow area
1374 | boxB : document.createElement('div'), // border
1375 | pad : document.createElement('div'),
1376 | padB : document.createElement('div'), // border
1377 | padM : document.createElement('div'), // mouse/touch area
1378 | padPal : jsc.createPalette(),
1379 | cross : document.createElement('div'),
1380 | crossBY : document.createElement('div'), // border Y
1381 | crossBX : document.createElement('div'), // border X
1382 | crossLY : document.createElement('div'), // line Y
1383 | crossLX : document.createElement('div'), // line X
1384 | sld : document.createElement('div'),
1385 | sldB : document.createElement('div'), // border
1386 | sldM : document.createElement('div'), // mouse/touch area
1387 | sldGrad : jsc.createSliderGradient(),
1388 | sldPtrS : document.createElement('div'), // slider pointer spacer
1389 | sldPtrIB : document.createElement('div'), // slider pointer inner border
1390 | sldPtrMB : document.createElement('div'), // slider pointer middle border
1391 | sldPtrOB : document.createElement('div'), // slider pointer outer border
1392 | btn : document.createElement('div'),
1393 | btnT : document.createElement('span') // text
1394 | };
1395 |
1396 | jsc.picker.pad.appendChild(jsc.picker.padPal.elm);
1397 | jsc.picker.padB.appendChild(jsc.picker.pad);
1398 | jsc.picker.cross.appendChild(jsc.picker.crossBY);
1399 | jsc.picker.cross.appendChild(jsc.picker.crossBX);
1400 | jsc.picker.cross.appendChild(jsc.picker.crossLY);
1401 | jsc.picker.cross.appendChild(jsc.picker.crossLX);
1402 | jsc.picker.padB.appendChild(jsc.picker.cross);
1403 | jsc.picker.box.appendChild(jsc.picker.padB);
1404 | jsc.picker.box.appendChild(jsc.picker.padM);
1405 |
1406 | jsc.picker.sld.appendChild(jsc.picker.sldGrad.elm);
1407 | jsc.picker.sldB.appendChild(jsc.picker.sld);
1408 | jsc.picker.sldB.appendChild(jsc.picker.sldPtrOB);
1409 | jsc.picker.sldPtrOB.appendChild(jsc.picker.sldPtrMB);
1410 | jsc.picker.sldPtrMB.appendChild(jsc.picker.sldPtrIB);
1411 | jsc.picker.sldPtrIB.appendChild(jsc.picker.sldPtrS);
1412 | jsc.picker.box.appendChild(jsc.picker.sldB);
1413 | jsc.picker.box.appendChild(jsc.picker.sldM);
1414 |
1415 | jsc.picker.btn.appendChild(jsc.picker.btnT);
1416 | jsc.picker.box.appendChild(jsc.picker.btn);
1417 |
1418 | jsc.picker.boxB.appendChild(jsc.picker.box);
1419 | jsc.picker.wrap.appendChild(jsc.picker.boxS);
1420 | jsc.picker.wrap.appendChild(jsc.picker.boxB);
1421 | }
1422 |
1423 | var p = jsc.picker;
1424 |
1425 | var displaySlider = !!jsc.getSliderComponent(THIS);
1426 | var dims = jsc.getPickerDims(THIS);
1427 | var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);
1428 | var padToSliderPadding = jsc.getPadToSliderPadding(THIS);
1429 | var borderRadius = Math.min(
1430 | THIS.borderRadius,
1431 | Math.round(THIS.padding * Math.PI)); // px
1432 | var padCursor = 'crosshair';
1433 |
1434 | // wrap
1435 | p.wrap.style.clear = 'both';
1436 | p.wrap.style.width = (dims[0] + 2 * THIS.borderWidth) + 'px';
1437 | p.wrap.style.height = (dims[1] + 2 * THIS.borderWidth) + 'px';
1438 | p.wrap.style.zIndex = THIS.zIndex;
1439 |
1440 | // picker
1441 | p.box.style.width = dims[0] + 'px';
1442 | p.box.style.height = dims[1] + 'px';
1443 |
1444 | p.boxS.style.position = 'absolute';
1445 | p.boxS.style.left = '0';
1446 | p.boxS.style.top = '0';
1447 | p.boxS.style.width = '100%';
1448 | p.boxS.style.height = '100%';
1449 | jsc.setBorderRadius(p.boxS, borderRadius + 'px');
1450 |
1451 | // picker border
1452 | p.boxB.style.position = 'relative';
1453 | p.boxB.style.border = THIS.borderWidth + 'px solid';
1454 | p.boxB.style.borderColor = THIS.borderColor;
1455 | p.boxB.style.background = THIS.backgroundColor;
1456 | jsc.setBorderRadius(p.boxB, borderRadius + 'px');
1457 |
1458 | // IE hack:
1459 | // If the element is transparent, IE will trigger the event on the elements under it,
1460 | // e.g. on Canvas or on elements with border
1461 | p.padM.style.background =
1462 | p.sldM.style.background =
1463 | '#FFF';
1464 | jsc.setStyle(p.padM, 'opacity', '0');
1465 | jsc.setStyle(p.sldM, 'opacity', '0');
1466 |
1467 | // pad
1468 | p.pad.style.position = 'relative';
1469 | p.pad.style.width = THIS.width + 'px';
1470 | p.pad.style.height = THIS.height + 'px';
1471 |
1472 | // pad palettes (HSV and HVS)
1473 | p.padPal.draw(THIS.width, THIS.height, jsc.getPadYComponent(THIS));
1474 |
1475 | // pad border
1476 | p.padB.style.position = 'absolute';
1477 | p.padB.style.left = THIS.padding + 'px';
1478 | p.padB.style.top = THIS.padding + 'px';
1479 | p.padB.style.border = THIS.insetWidth + 'px solid';
1480 | p.padB.style.borderColor = THIS.insetColor;
1481 |
1482 | // pad mouse area
1483 | p.padM._jscInstance = THIS;
1484 | p.padM._jscControlName = 'pad';
1485 | p.padM.style.position = 'absolute';
1486 | p.padM.style.left = '0';
1487 | p.padM.style.top = '0';
1488 | p.padM.style.width = (THIS.padding + 2 * THIS.insetWidth + THIS.width + padToSliderPadding / 2) + 'px';
1489 | p.padM.style.height = dims[1] + 'px';
1490 | p.padM.style.cursor = padCursor;
1491 |
1492 | // pad cross
1493 | p.cross.style.position = 'absolute';
1494 | p.cross.style.left =
1495 | p.cross.style.top =
1496 | '0';
1497 | p.cross.style.width =
1498 | p.cross.style.height =
1499 | crossOuterSize + 'px';
1500 |
1501 | // pad cross border Y and X
1502 | p.crossBY.style.position =
1503 | p.crossBX.style.position =
1504 | 'absolute';
1505 | p.crossBY.style.background =
1506 | p.crossBX.style.background =
1507 | THIS.pointerBorderColor;
1508 | p.crossBY.style.width =
1509 | p.crossBX.style.height =
1510 | (2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
1511 | p.crossBY.style.height =
1512 | p.crossBX.style.width =
1513 | crossOuterSize + 'px';
1514 | p.crossBY.style.left =
1515 | p.crossBX.style.top =
1516 | (Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2) - THIS.pointerBorderWidth) + 'px';
1517 | p.crossBY.style.top =
1518 | p.crossBX.style.left =
1519 | '0';
1520 |
1521 | // pad cross line Y and X
1522 | p.crossLY.style.position =
1523 | p.crossLX.style.position =
1524 | 'absolute';
1525 | p.crossLY.style.background =
1526 | p.crossLX.style.background =
1527 | THIS.pointerColor;
1528 | p.crossLY.style.height =
1529 | p.crossLX.style.width =
1530 | (crossOuterSize - 2 * THIS.pointerBorderWidth) + 'px';
1531 | p.crossLY.style.width =
1532 | p.crossLX.style.height =
1533 | THIS.pointerThickness + 'px';
1534 | p.crossLY.style.left =
1535 | p.crossLX.style.top =
1536 | (Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2)) + 'px';
1537 | p.crossLY.style.top =
1538 | p.crossLX.style.left =
1539 | THIS.pointerBorderWidth + 'px';
1540 |
1541 | // slider
1542 | p.sld.style.overflow = 'hidden';
1543 | p.sld.style.width = THIS.sliderSize + 'px';
1544 | p.sld.style.height = THIS.height + 'px';
1545 |
1546 | // slider gradient
1547 | p.sldGrad.draw(THIS.sliderSize, THIS.height, '#000', '#000');
1548 |
1549 | // slider border
1550 | p.sldB.style.display = displaySlider ? 'block' : 'none';
1551 | p.sldB.style.position = 'absolute';
1552 | p.sldB.style.right = THIS.padding + 'px';
1553 | p.sldB.style.top = THIS.padding + 'px';
1554 | p.sldB.style.border = THIS.insetWidth + 'px solid';
1555 | p.sldB.style.borderColor = THIS.insetColor;
1556 |
1557 | // slider mouse area
1558 | p.sldM._jscInstance = THIS;
1559 | p.sldM._jscControlName = 'sld';
1560 | p.sldM.style.display = displaySlider ? 'block' : 'none';
1561 | p.sldM.style.position = 'absolute';
1562 | p.sldM.style.right = '0';
1563 | p.sldM.style.top = '0';
1564 | p.sldM.style.width = (THIS.sliderSize + padToSliderPadding / 2 + THIS.padding + 2 * THIS.insetWidth) + 'px';
1565 | p.sldM.style.height = dims[1] + 'px';
1566 | p.sldM.style.cursor = 'default';
1567 |
1568 | // slider pointer inner and outer border
1569 | p.sldPtrIB.style.border =
1570 | p.sldPtrOB.style.border =
1571 | THIS.pointerBorderWidth + 'px solid ' + THIS.pointerBorderColor;
1572 |
1573 | // slider pointer outer border
1574 | p.sldPtrOB.style.position = 'absolute';
1575 | p.sldPtrOB.style.left = -(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
1576 | p.sldPtrOB.style.top = '0';
1577 |
1578 | // slider pointer middle border
1579 | p.sldPtrMB.style.border = THIS.pointerThickness + 'px solid ' + THIS.pointerColor;
1580 |
1581 | // slider pointer spacer
1582 | p.sldPtrS.style.width = THIS.sliderSize + 'px';
1583 | p.sldPtrS.style.height = sliderPtrSpace + 'px';
1584 |
1585 | // the Close button
1586 | function setBtnBorder () {
1587 | var insetColors = THIS.insetColor.split(/\s+/);
1588 | var outsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
1589 | p.btn.style.borderColor = outsetColor;
1590 | }
1591 | p.btn.style.display = THIS.closable ? 'block' : 'none';
1592 | p.btn.style.position = 'absolute';
1593 | p.btn.style.left = THIS.padding + 'px';
1594 | p.btn.style.bottom = THIS.padding + 'px';
1595 | p.btn.style.padding = '0 15px';
1596 | p.btn.style.height = THIS.buttonHeight + 'px';
1597 | p.btn.style.border = THIS.insetWidth + 'px solid';
1598 | setBtnBorder();
1599 | p.btn.style.color = THIS.buttonColor;
1600 | p.btn.style.font = '12px sans-serif';
1601 | p.btn.style.textAlign = 'center';
1602 | try {
1603 | p.btn.style.cursor = 'pointer';
1604 | } catch(eOldIE) {
1605 | p.btn.style.cursor = 'hand';
1606 | }
1607 | p.btn.onmousedown = function () {
1608 | THIS.hide();
1609 | };
1610 | p.btnT.style.lineHeight = THIS.buttonHeight + 'px';
1611 | p.btnT.innerHTML = '';
1612 | p.btnT.appendChild(document.createTextNode(THIS.closeText));
1613 |
1614 | // place pointers
1615 | redrawPad();
1616 | redrawSld();
1617 |
1618 | // If we are changing the owner without first closing the picker,
1619 | // make sure to first deal with the old owner
1620 | if (jsc.picker.owner && jsc.picker.owner !== THIS) {
1621 | jsc.unsetClass(jsc.picker.owner.targetElement, THIS.activeClass);
1622 | }
1623 |
1624 | // Set the new picker owner
1625 | jsc.picker.owner = THIS;
1626 |
1627 | // The redrawPosition() method needs picker.owner to be set, that's why we call it here,
1628 | // after setting the owner
1629 | if (jsc.isElementType(container, 'body')) {
1630 | jsc.redrawPosition();
1631 | } else {
1632 | jsc._drawPosition(THIS, 0, 0, 'relative', false);
1633 | }
1634 |
1635 | if (p.wrap.parentNode != container) {
1636 | container.appendChild(p.wrap);
1637 | }
1638 |
1639 | jsc.setClass(THIS.targetElement, THIS.activeClass);
1640 | }
1641 |
1642 |
1643 | function redrawPad () {
1644 | // redraw the pad pointer
1645 | switch (jsc.getPadYComponent(THIS)) {
1646 | case 's': var yComponent = 1; break;
1647 | case 'v': var yComponent = 2; break;
1648 | }
1649 | var x = Math.round((THIS.hsv[0] / 360) * (THIS.width - 1));
1650 | var y = Math.round((1 - THIS.hsv[yComponent] / 100) * (THIS.height - 1));
1651 | var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);
1652 | var ofs = -Math.floor(crossOuterSize / 2);
1653 | jsc.picker.cross.style.left = (x + ofs) + 'px';
1654 | jsc.picker.cross.style.top = (y + ofs) + 'px';
1655 |
1656 | // redraw the slider
1657 | switch (jsc.getSliderComponent(THIS)) {
1658 | case 's':
1659 | var rgb1 = HSV_RGB(THIS.hsv[0], 100, THIS.hsv[2]);
1660 | var rgb2 = HSV_RGB(THIS.hsv[0], 0, THIS.hsv[2]);
1661 | var color1 = 'rgb(' +
1662 | Math.round(rgb1[0]) + ',' +
1663 | Math.round(rgb1[1]) + ',' +
1664 | Math.round(rgb1[2]) + ')';
1665 | var color2 = 'rgb(' +
1666 | Math.round(rgb2[0]) + ',' +
1667 | Math.round(rgb2[1]) + ',' +
1668 | Math.round(rgb2[2]) + ')';
1669 | jsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2);
1670 | break;
1671 | case 'v':
1672 | var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 100);
1673 | var color1 = 'rgb(' +
1674 | Math.round(rgb[0]) + ',' +
1675 | Math.round(rgb[1]) + ',' +
1676 | Math.round(rgb[2]) + ')';
1677 | var color2 = '#000';
1678 | jsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2);
1679 | break;
1680 | }
1681 | }
1682 |
1683 |
1684 | function redrawSld () {
1685 | var sldComponent = jsc.getSliderComponent(THIS);
1686 | if (sldComponent) {
1687 | // redraw the slider pointer
1688 | switch (sldComponent) {
1689 | case 's': var yComponent = 1; break;
1690 | case 'v': var yComponent = 2; break;
1691 | }
1692 | var y = Math.round((1 - THIS.hsv[yComponent] / 100) * (THIS.height - 1));
1693 | jsc.picker.sldPtrOB.style.top = (y - (2 * THIS.pointerBorderWidth + THIS.pointerThickness) - Math.floor(sliderPtrSpace / 2)) + 'px';
1694 | }
1695 | }
1696 |
1697 |
1698 | function isPickerOwner () {
1699 | return jsc.picker && jsc.picker.owner === THIS;
1700 | }
1701 |
1702 |
1703 | function blurValue () {
1704 | THIS.importColor();
1705 | }
1706 |
1707 |
1708 | // Find the target element
1709 | if (typeof targetElement === 'string') {
1710 | var id = targetElement;
1711 | var elm = document.getElementById(id);
1712 | if (elm) {
1713 | this.targetElement = elm;
1714 | } else {
1715 | jsc.warn('Could not find target element with ID \'' + id + '\'');
1716 | }
1717 | } else if (targetElement) {
1718 | this.targetElement = targetElement;
1719 | } else {
1720 | jsc.warn('Invalid target element: \'' + targetElement + '\'');
1721 | }
1722 |
1723 | if (this.targetElement._jscLinkedInstance) {
1724 | jsc.warn('Cannot link jscolor twice to the same element. Skipping.');
1725 | return;
1726 | }
1727 | this.targetElement._jscLinkedInstance = this;
1728 |
1729 | // Find the value element
1730 | this.valueElement = jsc.fetchElement(this.valueElement);
1731 | // Find the style element
1732 | this.styleElement = jsc.fetchElement(this.styleElement);
1733 |
1734 | var THIS = this;
1735 | var container =
1736 | this.container ?
1737 | jsc.fetchElement(this.container) :
1738 | document.getElementsByTagName('body')[0];
1739 | var sliderPtrSpace = 3; // px
1740 |
1741 | // For BUTTON elements it's important to stop them from sending the form when clicked
1742 | // (e.g. in Safari)
1743 | if (jsc.isElementType(this.targetElement, 'button')) {
1744 | if (this.targetElement.onclick) {
1745 | var origCallback = this.targetElement.onclick;
1746 | this.targetElement.onclick = function (evt) {
1747 | origCallback.call(this, evt);
1748 | return false;
1749 | };
1750 | } else {
1751 | this.targetElement.onclick = function () { return false; };
1752 | }
1753 | }
1754 |
1755 | /*
1756 | var elm = this.targetElement;
1757 | do {
1758 | // If the target element or one of its offsetParents has fixed position,
1759 | // then use fixed positioning instead
1760 | //
1761 | // Note: In Firefox, getComputedStyle returns null in a hidden iframe,
1762 | // that's why we need to check if the returned style object is non-empty
1763 | var currStyle = jsc.getStyle(elm);
1764 | if (currStyle && currStyle.position.toLowerCase() === 'fixed') {
1765 | this.fixed = true;
1766 | }
1767 |
1768 | if (elm !== this.targetElement) {
1769 | // attach onParentScroll so that we can recompute the picker position
1770 | // when one of the offsetParents is scrolled
1771 | if (!elm._jscEventsAttached) {
1772 | jsc.attachEvent(elm, 'scroll', jsc.onParentScroll);
1773 | elm._jscEventsAttached = true;
1774 | }
1775 | }
1776 | } while ((elm = elm.offsetParent) && !jsc.isElementType(elm, 'body'));
1777 | */
1778 |
1779 | // valueElement
1780 | if (this.valueElement) {
1781 | if (jsc.isElementType(this.valueElement, 'input')) {
1782 | var updateField = function () {
1783 | THIS.fromString(THIS.valueElement.value, jsc.leaveValue);
1784 | jsc.dispatchFineChange(THIS);
1785 | };
1786 | jsc.attachEvent(this.valueElement, 'keyup', updateField);
1787 | jsc.attachEvent(this.valueElement, 'input', updateField);
1788 | jsc.attachEvent(this.valueElement, 'blur', blurValue);
1789 | this.valueElement.setAttribute('autocomplete', 'off');
1790 | }
1791 | }
1792 |
1793 | // styleElement
1794 | if (this.styleElement) {
1795 | this.styleElement._jscOrigStyle = {
1796 | backgroundImage : this.styleElement.style.backgroundImage,
1797 | backgroundColor : this.styleElement.style.backgroundColor,
1798 | color : this.styleElement.style.color
1799 | };
1800 | }
1801 |
1802 | if (this.value) {
1803 | // Try to set the color from the .value option and if unsuccessful,
1804 | // export the current color
1805 | this.fromString(this.value) || this.exportColor();
1806 | } else {
1807 | this.importColor();
1808 | }
1809 | }
1810 |
1811 | };
1812 |
1813 |
1814 | //================================
1815 | // Public properties and methods
1816 | //================================
1817 |
1818 |
1819 | // By default, search for all elements with class="jscolor" and install a color picker on them.
1820 | //
1821 | // You can change what class name will be looked for by setting the property jscolor.lookupClass
1822 | // anywhere in your HTML document. To completely disable the automatic lookup, set it to null.
1823 | //
1824 | jsc.jscolor.lookupClass = 'jscolor';
1825 |
1826 |
1827 | jsc.jscolor.installByClassName = function (className) {
1828 | var inputElms = document.getElementsByTagName('input');
1829 | var buttonElms = document.getElementsByTagName('button');
1830 |
1831 | jsc.tryInstallOnElements(inputElms, className);
1832 | jsc.tryInstallOnElements(buttonElms, className);
1833 | };
1834 |
1835 |
1836 | jsc.register();
1837 |
1838 |
1839 | return jsc.jscolor;
1840 |
1841 |
1842 | })(); }
1843 |
--------------------------------------------------------------------------------