{ "version": 3, "sources": ["../../../node_modules/@rails/actioncable/src/adapters.js", "../../../node_modules/@rails/actioncable/src/logger.js", "../../../node_modules/@rails/actioncable/src/connection_monitor.js", "../../../node_modules/@rails/actioncable/src/internal.js", "../../../node_modules/@rails/actioncable/src/connection.js", "../../../node_modules/@rails/actioncable/src/subscription.js", "../../../node_modules/@rails/actioncable/src/subscription_guarantor.js", "../../../node_modules/@rails/actioncable/src/subscriptions.js", "../../../node_modules/@rails/actioncable/src/consumer.js", "../../../node_modules/@rails/actioncable/src/index.js", "../../../node_modules/@eastdesire/jscolor/jscolor.js", "../../../node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable_stream_source_element.js", "../../../node_modules/@hotwired/stimulus/dist/stimulus.js", "../../javascript/controllers/application.js", "../../../node_modules/@avo-hq/marksmith/dist/marksmith.esm.js", "../../javascript/controllers/account_controller.js", "../../javascript/controllers/color_picker_controller.js", "../../javascript/controllers/colourway_controller.js", "../../javascript/controllers/colourway_preview_controller.js", "../../javascript/controllers/dashboard_theme_controller.js", "../../javascript/controllers/favourite_controller.js", "../../javascript/controllers/file_upload_controller.js", "../../javascript/controllers/flash_message_controller.js", "../../javascript/controllers/folder_controller.js", "../../javascript/controllers/gallery_image_controller.js", "../../javascript/controllers/gallery_picker_controller.js", "../../../node_modules/el-transition/index.js", "../../javascript/controllers/help_menu_controller.js", "../../javascript/controllers/image_form_controller.js", "../../javascript/controllers/image_preview_controller.js", "../../javascript/controllers/image_set_status_controller.js", "../../javascript/controllers/image_toggle_controller.js", "../../javascript/controllers/lightbox_controller.js", "../../javascript/controllers/modal_controller.js", "../../javascript/controllers/navigation_controller.js", "../../javascript/controllers/people_actions_controller.js", "../../javascript/controllers/people_controller.js", "../../javascript/controllers/registration_controller.js", "../../javascript/controllers/showcase_controller.js", "../../javascript/controllers/timezone_controller.js", "../../javascript/controllers/index.js", "../../../node_modules/alpinejs/dist/module.esm.js", "../../javascript/application.js"], "sourcesContent": ["export default {\n logger: self.console,\n WebSocket: self.WebSocket\n}\n", "import adapters from \"./adapters\"\n\n// The logger is disabled by default. You can enable it with:\n//\n// ActionCable.logger.enabled = true\n//\n// Example:\n//\n// import * as ActionCable from '@rails/actioncable'\n//\n// ActionCable.logger.enabled = true\n// ActionCable.logger.log('Connection Established.')\n//\n\nexport default {\n log(...messages) {\n if (this.enabled) {\n messages.push(Date.now())\n adapters.logger.log(\"[ActionCable]\", ...messages)\n }\n },\n}\n", "import logger from \"./logger\"\n\n// Responsible for ensuring the cable connection is in good health by validating the heartbeat pings sent from the server, and attempting\n// revival reconnections if things go astray. Internal class, not intended for direct user manipulation.\n\nconst now = () => new Date().getTime()\n\nconst secondsSince = time => (now() - time) / 1000\n\nclass ConnectionMonitor {\n constructor(connection) {\n this.visibilityDidChange = this.visibilityDidChange.bind(this)\n this.connection = connection\n this.reconnectAttempts = 0\n }\n\n start() {\n if (!this.isRunning()) {\n this.startedAt = now()\n delete this.stoppedAt\n this.startPolling()\n addEventListener(\"visibilitychange\", this.visibilityDidChange)\n logger.log(`ConnectionMonitor started. stale threshold = ${this.constructor.staleThreshold} s`)\n }\n }\n\n stop() {\n if (this.isRunning()) {\n this.stoppedAt = now()\n this.stopPolling()\n removeEventListener(\"visibilitychange\", this.visibilityDidChange)\n logger.log(\"ConnectionMonitor stopped\")\n }\n }\n\n isRunning() {\n return this.startedAt && !this.stoppedAt\n }\n\n recordPing() {\n this.pingedAt = now()\n }\n\n recordConnect() {\n this.reconnectAttempts = 0\n this.recordPing()\n delete this.disconnectedAt\n logger.log(\"ConnectionMonitor recorded connect\")\n }\n\n recordDisconnect() {\n this.disconnectedAt = now()\n logger.log(\"ConnectionMonitor recorded disconnect\")\n }\n\n // Private\n\n startPolling() {\n this.stopPolling()\n this.poll()\n }\n\n stopPolling() {\n clearTimeout(this.pollTimeout)\n }\n\n poll() {\n this.pollTimeout = setTimeout(() => {\n this.reconnectIfStale()\n this.poll()\n }\n , this.getPollInterval())\n }\n\n getPollInterval() {\n const { staleThreshold, reconnectionBackoffRate } = this.constructor\n const backoff = Math.pow(1 + reconnectionBackoffRate, Math.min(this.reconnectAttempts, 10))\n const jitterMax = this.reconnectAttempts === 0 ? 1.0 : reconnectionBackoffRate\n const jitter = jitterMax * Math.random()\n return staleThreshold * 1000 * backoff * (1 + jitter)\n }\n\n reconnectIfStale() {\n if (this.connectionIsStale()) {\n logger.log(`ConnectionMonitor detected stale connection. reconnectAttempts = ${this.reconnectAttempts}, time stale = ${secondsSince(this.refreshedAt)} s, stale threshold = ${this.constructor.staleThreshold} s`)\n this.reconnectAttempts++\n if (this.disconnectedRecently()) {\n logger.log(`ConnectionMonitor skipping reopening recent disconnect. time disconnected = ${secondsSince(this.disconnectedAt)} s`)\n } else {\n logger.log(\"ConnectionMonitor reopening\")\n this.connection.reopen()\n }\n }\n }\n\n get refreshedAt() {\n return this.pingedAt ? this.pingedAt : this.startedAt\n }\n\n connectionIsStale() {\n return secondsSince(this.refreshedAt) > this.constructor.staleThreshold\n }\n\n disconnectedRecently() {\n return this.disconnectedAt && (secondsSince(this.disconnectedAt) < this.constructor.staleThreshold)\n }\n\n visibilityDidChange() {\n if (document.visibilityState === \"visible\") {\n setTimeout(() => {\n if (this.connectionIsStale() || !this.connection.isOpen()) {\n logger.log(`ConnectionMonitor reopening stale connection on visibilitychange. visibilityState = ${document.visibilityState}`)\n this.connection.reopen()\n }\n }\n , 200)\n }\n }\n\n}\n\nConnectionMonitor.staleThreshold = 6 // Server::Connections::BEAT_INTERVAL * 2 (missed two pings)\nConnectionMonitor.reconnectionBackoffRate = 0.15\n\nexport default ConnectionMonitor\n", "export default {\n \"message_types\": {\n \"welcome\": \"welcome\",\n \"disconnect\": \"disconnect\",\n \"ping\": \"ping\",\n \"confirmation\": \"confirm_subscription\",\n \"rejection\": \"reject_subscription\"\n },\n \"disconnect_reasons\": {\n \"unauthorized\": \"unauthorized\",\n \"invalid_request\": \"invalid_request\",\n \"server_restart\": \"server_restart\"\n },\n \"default_mount_path\": \"/cable\",\n \"protocols\": [\n \"actioncable-v1-json\",\n \"actioncable-unsupported\"\n ]\n}\n", "import adapters from \"./adapters\"\nimport ConnectionMonitor from \"./connection_monitor\"\nimport INTERNAL from \"./internal\"\nimport logger from \"./logger\"\n\n// Encapsulate the cable connection held by the consumer. This is an internal class not intended for direct user manipulation.\n\nconst {message_types, protocols} = INTERNAL\nconst supportedProtocols = protocols.slice(0, protocols.length - 1)\n\nconst indexOf = [].indexOf\n\nclass Connection {\n constructor(consumer) {\n this.open = this.open.bind(this)\n this.consumer = consumer\n this.subscriptions = this.consumer.subscriptions\n this.monitor = new ConnectionMonitor(this)\n this.disconnected = true\n }\n\n send(data) {\n if (this.isOpen()) {\n this.webSocket.send(JSON.stringify(data))\n return true\n } else {\n return false\n }\n }\n\n open() {\n if (this.isActive()) {\n logger.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`)\n return false\n } else {\n logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${protocols}`)\n if (this.webSocket) { this.uninstallEventHandlers() }\n this.webSocket = new adapters.WebSocket(this.consumer.url, protocols)\n this.installEventHandlers()\n this.monitor.start()\n return true\n }\n }\n\n close({allowReconnect} = {allowReconnect: true}) {\n if (!allowReconnect) { this.monitor.stop() }\n if (this.isActive()) {\n return this.webSocket.close()\n }\n }\n\n reopen() {\n logger.log(`Reopening WebSocket, current state is ${this.getState()}`)\n if (this.isActive()) {\n try {\n return this.close()\n } catch (error) {\n logger.log(\"Failed to reopen WebSocket\", error)\n }\n finally {\n logger.log(`Reopening WebSocket in ${this.constructor.reopenDelay}ms`)\n setTimeout(this.open, this.constructor.reopenDelay)\n }\n } else {\n return this.open()\n }\n }\n\n getProtocol() {\n if (this.webSocket) {\n return this.webSocket.protocol\n }\n }\n\n isOpen() {\n return this.isState(\"open\")\n }\n\n isActive() {\n return this.isState(\"open\", \"connecting\")\n }\n\n // Private\n\n isProtocolSupported() {\n return indexOf.call(supportedProtocols, this.getProtocol()) >= 0\n }\n\n isState(...states) {\n return indexOf.call(states, this.getState()) >= 0\n }\n\n getState() {\n if (this.webSocket) {\n for (let state in adapters.WebSocket) {\n if (adapters.WebSocket[state] === this.webSocket.readyState) {\n return state.toLowerCase()\n }\n }\n }\n return null\n }\n\n installEventHandlers() {\n for (let eventName in this.events) {\n const handler = this.events[eventName].bind(this)\n this.webSocket[`on${eventName}`] = handler\n }\n }\n\n uninstallEventHandlers() {\n for (let eventName in this.events) {\n this.webSocket[`on${eventName}`] = function() {}\n }\n }\n\n}\n\nConnection.reopenDelay = 500\n\nConnection.prototype.events = {\n message(event) {\n if (!this.isProtocolSupported()) { return }\n const {identifier, message, reason, reconnect, type} = JSON.parse(event.data)\n switch (type) {\n case message_types.welcome:\n this.monitor.recordConnect()\n return this.subscriptions.reload()\n case message_types.disconnect:\n logger.log(`Disconnecting. Reason: ${reason}`)\n return this.close({allowReconnect: reconnect})\n case message_types.ping:\n return this.monitor.recordPing()\n case message_types.confirmation:\n this.subscriptions.confirmSubscription(identifier)\n return this.subscriptions.notify(identifier, \"connected\")\n case message_types.rejection:\n return this.subscriptions.reject(identifier)\n default:\n return this.subscriptions.notify(identifier, \"received\", message)\n }\n },\n\n open() {\n logger.log(`WebSocket onopen event, using '${this.getProtocol()}' subprotocol`)\n this.disconnected = false\n if (!this.isProtocolSupported()) {\n logger.log(\"Protocol is unsupported. Stopping monitor and disconnecting.\")\n return this.close({allowReconnect: false})\n }\n },\n\n close(event) {\n logger.log(\"WebSocket onclose event\")\n if (this.disconnected) { return }\n this.disconnected = true\n this.monitor.recordDisconnect()\n return this.subscriptions.notifyAll(\"disconnected\", {willAttemptReconnect: this.monitor.isRunning()})\n },\n\n error() {\n logger.log(\"WebSocket onerror event\")\n }\n}\n\nexport default Connection\n", "// A new subscription is created through the ActionCable.Subscriptions instance available on the consumer.\n// It provides a number of callbacks and a method for calling remote procedure calls on the corresponding\n// Channel instance on the server side.\n//\n// An example demonstrates the basic functionality:\n//\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\", {\n// connected() {\n// // Called once the subscription has been successfully completed\n// },\n//\n// disconnected({ willAttemptReconnect: boolean }) {\n// // Called when the client has disconnected with the server.\n// // The object will have an `willAttemptReconnect` property which\n// // says whether the client has the intention of attempting\n// // to reconnect.\n// },\n//\n// appear() {\n// this.perform('appear', {appearing_on: this.appearingOn()})\n// },\n//\n// away() {\n// this.perform('away')\n// },\n//\n// appearingOn() {\n// $('main').data('appearing-on')\n// }\n// })\n//\n// The methods #appear and #away forward their intent to the remote AppearanceChannel instance on the server\n// by calling the `perform` method with the first parameter being the action (which maps to AppearanceChannel#appear/away).\n// The second parameter is a hash that'll get JSON encoded and made available on the server in the data parameter.\n//\n// This is how the server component would look:\n//\n// class AppearanceChannel < ApplicationActionCable::Channel\n// def subscribed\n// current_user.appear\n// end\n//\n// def unsubscribed\n// current_user.disappear\n// end\n//\n// def appear(data)\n// current_user.appear on: data['appearing_on']\n// end\n//\n// def away\n// current_user.away\n// end\n// end\n//\n// The \"AppearanceChannel\" name is automatically mapped between the client-side subscription creation and the server-side Ruby class name.\n// The AppearanceChannel#appear/away public methods are exposed automatically to client-side invocation through the perform method.\n\nconst extend = function(object, properties) {\n if (properties != null) {\n for (let key in properties) {\n const value = properties[key]\n object[key] = value\n }\n }\n return object\n}\n\nexport default class Subscription {\n constructor(consumer, params = {}, mixin) {\n this.consumer = consumer\n this.identifier = JSON.stringify(params)\n extend(this, mixin)\n }\n\n // Perform a channel action with the optional data passed as an attribute\n perform(action, data = {}) {\n data.action = action\n return this.send(data)\n }\n\n send(data) {\n return this.consumer.send({command: \"message\", identifier: this.identifier, data: JSON.stringify(data)})\n }\n\n unsubscribe() {\n return this.consumer.subscriptions.remove(this)\n }\n}\n", "import logger from \"./logger\"\n\n// Responsible for ensuring channel subscribe command is confirmed, retrying until confirmation is received.\n// Internal class, not intended for direct user manipulation.\n\nclass SubscriptionGuarantor {\n constructor(subscriptions) {\n this.subscriptions = subscriptions\n this.pendingSubscriptions = []\n }\n\n guarantee(subscription) {\n if(this.pendingSubscriptions.indexOf(subscription) == -1){ \n logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`)\n this.pendingSubscriptions.push(subscription) \n }\n else {\n logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`)\n }\n this.startGuaranteeing()\n }\n\n forget(subscription) {\n logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`)\n this.pendingSubscriptions = (this.pendingSubscriptions.filter((s) => s !== subscription))\n }\n\n startGuaranteeing() {\n this.stopGuaranteeing()\n this.retrySubscribing()\n }\n \n stopGuaranteeing() {\n clearTimeout(this.retryTimeout)\n }\n\n retrySubscribing() {\n this.retryTimeout = setTimeout(() => {\n if (this.subscriptions && typeof(this.subscriptions.subscribe) === \"function\") {\n this.pendingSubscriptions.map((subscription) => {\n logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`)\n this.subscriptions.subscribe(subscription)\n })\n }\n }\n , 500)\n }\n}\n\nexport default SubscriptionGuarantor", "import Subscription from \"./subscription\"\nimport SubscriptionGuarantor from \"./subscription_guarantor\"\nimport logger from \"./logger\"\n\n// Collection class for creating (and internally managing) channel subscriptions.\n// The only method intended to be triggered by the user is ActionCable.Subscriptions#create,\n// and it should be called through the consumer like so:\n//\n// App = {}\n// App.cable = ActionCable.createConsumer(\"ws://example.com/accounts/1\")\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\")\n//\n// For more details on how you'd configure an actual channel subscription, see ActionCable.Subscription.\n\nexport default class Subscriptions {\n constructor(consumer) {\n this.consumer = consumer\n this.guarantor = new SubscriptionGuarantor(this)\n this.subscriptions = []\n }\n\n create(channelName, mixin) {\n const channel = channelName\n const params = typeof channel === \"object\" ? channel : {channel}\n const subscription = new Subscription(this.consumer, params, mixin)\n return this.add(subscription)\n }\n\n // Private\n\n add(subscription) {\n this.subscriptions.push(subscription)\n this.consumer.ensureActiveConnection()\n this.notify(subscription, \"initialized\")\n this.subscribe(subscription)\n return subscription\n }\n\n remove(subscription) {\n this.forget(subscription)\n if (!this.findAll(subscription.identifier).length) {\n this.sendCommand(subscription, \"unsubscribe\")\n }\n return subscription\n }\n\n reject(identifier) {\n return this.findAll(identifier).map((subscription) => {\n this.forget(subscription)\n this.notify(subscription, \"rejected\")\n return subscription\n })\n }\n\n forget(subscription) {\n this.guarantor.forget(subscription)\n this.subscriptions = (this.subscriptions.filter((s) => s !== subscription))\n return subscription\n }\n\n findAll(identifier) {\n return this.subscriptions.filter((s) => s.identifier === identifier)\n }\n\n reload() {\n return this.subscriptions.map((subscription) =>\n this.subscribe(subscription))\n }\n\n notifyAll(callbackName, ...args) {\n return this.subscriptions.map((subscription) =>\n this.notify(subscription, callbackName, ...args))\n }\n\n notify(subscription, callbackName, ...args) {\n let subscriptions\n if (typeof subscription === \"string\") {\n subscriptions = this.findAll(subscription)\n } else {\n subscriptions = [subscription]\n }\n\n return subscriptions.map((subscription) =>\n (typeof subscription[callbackName] === \"function\" ? subscription[callbackName](...args) : undefined))\n }\n\n subscribe(subscription) {\n if (this.sendCommand(subscription, \"subscribe\")) {\n this.guarantor.guarantee(subscription)\n }\n }\n\n confirmSubscription(identifier) {\n logger.log(`Subscription confirmed ${identifier}`)\n this.findAll(identifier).map((subscription) =>\n this.guarantor.forget(subscription))\n }\n\n sendCommand(subscription, command) {\n const {identifier} = subscription\n return this.consumer.send({command, identifier})\n }\n}\n", "import Connection from \"./connection\"\nimport Subscriptions from \"./subscriptions\"\n\n// The ActionCable.Consumer establishes the connection to a server-side Ruby Connection object. Once established,\n// the ActionCable.ConnectionMonitor will ensure that its properly maintained through heartbeats and checking for stale updates.\n// The Consumer instance is also the gateway to establishing subscriptions to desired channels through the #createSubscription\n// method.\n//\n// The following example shows how this can be set up:\n//\n// App = {}\n// App.cable = ActionCable.createConsumer(\"ws://example.com/accounts/1\")\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\")\n//\n// For more details on how you'd configure an actual channel subscription, see ActionCable.Subscription.\n//\n// When a consumer is created, it automatically connects with the server.\n//\n// To disconnect from the server, call\n//\n// App.cable.disconnect()\n//\n// and to restart the connection:\n//\n// App.cable.connect()\n//\n// Any channel subscriptions which existed prior to disconnecting will\n// automatically resubscribe.\n\nexport default class Consumer {\n constructor(url) {\n this._url = url\n this.subscriptions = new Subscriptions(this)\n this.connection = new Connection(this)\n }\n\n get url() {\n return createWebSocketURL(this._url)\n }\n\n send(data) {\n return this.connection.send(data)\n }\n\n connect() {\n return this.connection.open()\n }\n\n disconnect() {\n return this.connection.close({allowReconnect: false})\n }\n\n ensureActiveConnection() {\n if (!this.connection.isActive()) {\n return this.connection.open()\n }\n }\n}\n\nexport function createWebSocketURL(url) {\n if (typeof url === \"function\") {\n url = url()\n }\n\n if (url && !/^wss?:/i.test(url)) {\n const a = document.createElement(\"a\")\n a.href = url\n // Fix populating Location properties in IE. Otherwise, protocol will be blank.\n a.href = a.href\n a.protocol = a.protocol.replace(\"http\", \"ws\")\n return a.href\n } else {\n return url\n }\n}\n", "import Connection from \"./connection\"\nimport ConnectionMonitor from \"./connection_monitor\"\nimport Consumer, { createWebSocketURL } from \"./consumer\"\nimport INTERNAL from \"./internal\"\nimport Subscription from \"./subscription\"\nimport Subscriptions from \"./subscriptions\"\nimport SubscriptionGuarantor from \"./subscription_guarantor\"\nimport adapters from \"./adapters\"\nimport logger from \"./logger\"\n\nexport {\n Connection,\n ConnectionMonitor,\n Consumer,\n INTERNAL,\n Subscription,\n Subscriptions,\n SubscriptionGuarantor,\n adapters,\n createWebSocketURL,\n logger,\n}\n\nexport function createConsumer(url = getConfig(\"url\") || INTERNAL.default_mount_path) {\n return new Consumer(url)\n}\n\nexport function getConfig(name) {\n const element = document.head.querySelector(`meta[name='action-cable-${name}']`)\n if (element) {\n return element.getAttribute(\"content\")\n }\n}\n", "/**\r\n * jscolor - JavaScript Color Picker\r\n *\r\n * @link http://jscolor.com\r\n * @license For open source use: GPLv3\r\n * For commercial use: JSColor Commercial License\r\n * @author Jan Odvarko - East Desire\r\n *\r\n * See usage examples at http://jscolor.com/examples/\r\n */\r\n\r\n\r\n(function (global, factory) {\r\n\r\n\t'use strict';\r\n\r\n\tif (typeof module === 'object' && typeof module.exports === 'object') {\r\n\t\t// Export jscolor as a module\r\n\t\tmodule.exports = global.document ?\r\n\t\t\tfactory (global) :\r\n\t\t\tfunction (win) {\r\n\t\t\t\tif (!win.document) {\r\n\t\t\t\t\tthrow new Error('jscolor needs a window with document');\r\n\t\t\t\t}\r\n\t\t\t\treturn factory(win);\r\n\t\t\t}\r\n\t\treturn;\r\n\t}\r\n\r\n\t// Default use (no module export)\r\n\tfactory(global);\r\n\r\n})(typeof window !== 'undefined' ? window : this, function (window) { // BEGIN factory\r\n\r\n// BEGIN jscolor code\r\n\r\n\r\n'use strict';\r\n\r\n\r\nvar jscolor = (function () { // BEGIN jscolor\r\n\r\nvar jsc = {\r\n\r\n\r\n\tinitialized : false,\r\n\r\n\tinstances : [], // created instances of jscolor\r\n\r\n\treadyQueue : [], // functions waiting to be called after init\r\n\r\n\r\n\tregister : function () {\r\n\t\tif (typeof window !== 'undefined' && window.document) {\r\n\t\t\tif (window.document.readyState !== 'loading') {\r\n\t\t\t\tjsc.pub.init();\r\n\t\t\t} else {\r\n\t\t\t\twindow.document.addEventListener('DOMContentLoaded', jsc.pub.init, false);\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tinstallBySelector : function (selector, rootNode) {\r\n\t\trootNode = rootNode ? jsc.node(rootNode) : window.document;\r\n\t\tif (!rootNode) {\r\n\t\t\tthrow new Error('Missing root node');\r\n\t\t}\r\n\r\n\t\tvar elms = rootNode.querySelectorAll(selector);\r\n\r\n\t\t// for backward compatibility with DEPRECATED installation/configuration using className\r\n\t\tvar matchClass = new RegExp('(^|\\\\s)(' + jsc.pub.lookupClass + ')(\\\\s*(\\\\{[^}]*\\\\})|\\\\s|$)', 'i');\r\n\r\n\t\tfor (var i = 0; i < elms.length; i += 1) {\r\n\r\n\t\t\tif (elms[i].jscolor && elms[i].jscolor instanceof jsc.pub) {\r\n\t\t\t\tcontinue; // jscolor already installed on this element\r\n\t\t\t}\r\n\r\n\t\t\tif (elms[i].type !== undefined && elms[i].type.toLowerCase() == 'color' && jsc.isColorAttrSupported) {\r\n\t\t\t\tcontinue; // skips inputs of type 'color' if supported by the browser\r\n\t\t\t}\r\n\r\n\t\t\tvar dataOpts, m;\r\n\r\n\t\t\tif (\r\n\t\t\t\t(dataOpts = jsc.getDataAttr(elms[i], 'jscolor')) !== null ||\r\n\t\t\t\t(elms[i].className && (m = elms[i].className.match(matchClass))) // installation using className (DEPRECATED)\r\n\t\t\t) {\r\n\t\t\t\tvar targetElm = elms[i];\r\n\r\n\t\t\t\tvar optsStr = '';\r\n\t\t\t\tif (dataOpts !== null) {\r\n\t\t\t\t\toptsStr = dataOpts;\r\n\r\n\t\t\t\t} else if (m) { // installation using className (DEPRECATED)\r\n\t\t\t\t\tconsole.warn('Installation using class name is DEPRECATED. Use data-jscolor=\"\" attribute instead.' + jsc.docsRef);\r\n\t\t\t\t\tif (m[4]) {\r\n\t\t\t\t\t\toptsStr = m[4];\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\tvar opts = null;\r\n\t\t\t\tif (optsStr.trim()) {\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\topts = jsc.parseOptionsStr(optsStr);\r\n\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\tconsole.warn(e + '\\n' + optsStr);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\ttry {\r\n\t\t\t\t\tnew jsc.pub(targetElm, opts);\r\n\t\t\t\t} catch (e) {\r\n\t\t\t\t\tconsole.warn(e);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tparseOptionsStr : function (str) {\r\n\t\tvar opts = null;\r\n\r\n\t\ttry {\r\n\t\t\topts = JSON.parse(str);\r\n\r\n\t\t} catch (eParse) {\r\n\t\t\tif (!jsc.pub.looseJSON) {\r\n\t\t\t\tthrow new Error('Could not parse jscolor options as JSON: ' + eParse);\r\n\t\t\t} else {\r\n\t\t\t\t// loose JSON syntax is enabled -> try to evaluate the options string as JavaScript object\r\n\t\t\t\ttry {\r\n\t\t\t\t\topts = (new Function ('var opts = (' + str + '); return typeof opts === \"object\" ? opts : {};'))();\r\n\t\t\t\t} catch (eEval) {\r\n\t\t\t\t\tthrow new Error('Could not evaluate jscolor options: ' + eEval);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn opts;\r\n\t},\r\n\r\n\r\n\tgetInstances : function () {\r\n\t\tvar inst = [];\r\n\t\tfor (var i = 0; i < jsc.instances.length; i += 1) {\r\n\t\t\t// if the targetElement still exists, the instance is considered \"alive\"\r\n\t\t\tif (jsc.instances[i] && jsc.instances[i].targetElement) {\r\n\t\t\t\tinst.push(jsc.instances[i]);\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn inst;\r\n\t},\r\n\r\n\r\n\tcreateEl : function (tagName) {\r\n\t\tvar el = window.document.createElement(tagName);\r\n\t\tjsc.setData(el, 'gui', true);\r\n\t\treturn el;\r\n\t},\r\n\r\n\r\n\tnode : function (nodeOrSelector) {\r\n\t\tif (!nodeOrSelector) {\r\n\t\t\treturn null;\r\n\t\t}\r\n\r\n\t\tif (typeof nodeOrSelector === 'string') {\r\n\t\t\t// query selector\r\n\t\t\tvar sel = nodeOrSelector;\r\n\t\t\tvar el = null;\r\n\t\t\ttry {\r\n\t\t\t\tel = window.document.querySelector(sel);\r\n\t\t\t} catch (e) {\r\n\t\t\t\tconsole.warn(e);\r\n\t\t\t\treturn null;\r\n\t\t\t}\r\n\t\t\tif (!el) {\r\n\t\t\t\tconsole.warn('No element matches the selector: %s', sel);\r\n\t\t\t}\r\n\t\t\treturn el;\r\n\t\t}\r\n\r\n\t\tif (jsc.isNode(nodeOrSelector)) {\r\n\t\t\t// DOM node\r\n\t\t\treturn nodeOrSelector;\r\n\t\t}\r\n\r\n\t\tconsole.warn('Invalid node of type %s: %s', typeof nodeOrSelector, nodeOrSelector);\r\n\t\treturn null;\r\n\t},\r\n\r\n\r\n\t// See https://stackoverflow.com/questions/384286/\r\n\tisNode : function (val) {\r\n\t\tif (typeof Node === 'object') {\r\n\t\t\treturn val instanceof Node;\r\n\t\t}\r\n\t\treturn val && typeof val === 'object' && typeof val.nodeType === 'number' && typeof val.nodeName === 'string';\r\n\t},\r\n\r\n\r\n\tnodeName : function (node) {\r\n\t\tif (node && node.nodeName) {\r\n\t\t\treturn node.nodeName.toLowerCase();\r\n\t\t}\r\n\t\treturn false;\r\n\t},\r\n\r\n\r\n\tremoveChildren : function (node) {\r\n\t\twhile (node.firstChild) {\r\n\t\t\tnode.removeChild(node.firstChild);\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tisTextInput : function (el) {\r\n\t\treturn el && jsc.nodeName(el) === 'input' && el.type.toLowerCase() === 'text';\r\n\t},\r\n\r\n\r\n\tisButton : function (el) {\r\n\t\tif (!el) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tvar n = jsc.nodeName(el);\r\n\t\treturn (\r\n\t\t\t(n === 'button') ||\r\n\t\t\t(n === 'input' && ['button', 'submit', 'reset'].indexOf(el.type.toLowerCase()) > -1)\r\n\t\t);\r\n\t},\r\n\r\n\r\n\tisButtonEmpty : function (el) {\r\n\t\tswitch (jsc.nodeName(el)) {\r\n\t\t\tcase 'input': return (!el.value || el.value.trim() === '');\r\n\t\t\tcase 'button': return (el.textContent.trim() === '');\r\n\t\t}\r\n\t\treturn null; // could not determine element's text\r\n\t},\r\n\r\n\r\n\t// See https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md\r\n\tisPassiveEventSupported : (function () {\r\n\t\tvar supported = false;\r\n\r\n\t\ttry {\r\n\t\t\tvar opts = Object.defineProperty({}, 'passive', {\r\n\t\t\t\tget: function () { supported = true; }\r\n\t\t\t});\r\n\t\t\twindow.addEventListener('testPassive', null, opts);\r\n\t\t\twindow.removeEventListener('testPassive', null, opts);\r\n\t\t} catch (e) {}\r\n\r\n\t\treturn supported;\r\n\t})(),\r\n\r\n\r\n\tisColorAttrSupported : (function () {\r\n\t\tvar elm = window.document.createElement('input');\r\n\t\tif (elm.setAttribute) {\r\n\t\t\telm.setAttribute('type', 'color');\r\n\t\t\tif (elm.type.toLowerCase() == 'color') {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn false;\r\n\t})(),\r\n\r\n\r\n\tdataProp : '_data_jscolor',\r\n\r\n\r\n\t// usage:\r\n\t// setData(obj, prop, value)\r\n\t// setData(obj, {prop:value, ...})\r\n\t//\r\n\tsetData : function () {\r\n\t\tvar obj = arguments[0];\r\n\r\n\t\tif (arguments.length === 3) {\r\n\t\t\t// setting a single property\r\n\t\t\tvar data = obj.hasOwnProperty(jsc.dataProp) ? obj[jsc.dataProp] : (obj[jsc.dataProp] = {});\r\n\t\t\tvar prop = arguments[1];\r\n\t\t\tvar value = arguments[2];\r\n\r\n\t\t\tdata[prop] = value;\r\n\t\t\treturn true;\r\n\r\n\t\t} else if (arguments.length === 2 && typeof arguments[1] === 'object') {\r\n\t\t\t// setting multiple properties\r\n\t\t\tvar data = obj.hasOwnProperty(jsc.dataProp) ? obj[jsc.dataProp] : (obj[jsc.dataProp] = {});\r\n\t\t\tvar map = arguments[1];\r\n\r\n\t\t\tfor (var prop in map) {\r\n\t\t\t\tif (map.hasOwnProperty(prop)) {\r\n\t\t\t\t\tdata[prop] = map[prop];\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn true;\r\n\t\t}\r\n\r\n\t\tthrow new Error('Invalid arguments');\r\n\t},\r\n\r\n\r\n\t// usage:\r\n\t// removeData(obj, prop, [prop...])\r\n\t//\r\n\tremoveData : function () {\r\n\t\tvar obj = arguments[0];\r\n\t\tif (!obj.hasOwnProperty(jsc.dataProp)) {\r\n\t\t\treturn true; // data object does not exist\r\n\t\t}\r\n\t\tfor (var i = 1; i < arguments.length; i += 1) {\r\n\t\t\tvar prop = arguments[i];\r\n\t\t\tdelete obj[jsc.dataProp][prop];\r\n\t\t}\r\n\t\treturn true;\r\n\t},\r\n\r\n\r\n\tgetData : function (obj, prop, setDefault) {\r\n\t\tif (!obj.hasOwnProperty(jsc.dataProp)) {\r\n\t\t\t// data object does not exist\r\n\t\t\tif (setDefault !== undefined) {\r\n\t\t\t\tobj[jsc.dataProp] = {}; // create data object\r\n\t\t\t} else {\r\n\t\t\t\treturn undefined; // no value to return\r\n\t\t\t}\r\n\t\t}\r\n\t\tvar data = obj[jsc.dataProp];\r\n\r\n\t\tif (!data.hasOwnProperty(prop) && setDefault !== undefined) {\r\n\t\t\tdata[prop] = setDefault;\r\n\t\t}\r\n\t\treturn data[prop];\r\n\t},\r\n\r\n\r\n\tgetDataAttr : function (el, name) {\r\n\t\tvar attrName = 'data-' + name;\r\n\t\tvar attrValue = el.getAttribute(attrName);\r\n\t\treturn attrValue;\r\n\t},\r\n\r\n\r\n\tsetDataAttr : function (el, name, value) {\r\n\t\tvar attrName = 'data-' + name;\r\n\t\tel.setAttribute(attrName, value);\r\n\t},\r\n\r\n\r\n\t_attachedGroupEvents : {},\r\n\r\n\r\n\tattachGroupEvent : function (groupName, el, evnt, func) {\r\n\t\tif (!jsc._attachedGroupEvents.hasOwnProperty(groupName)) {\r\n\t\t\tjsc._attachedGroupEvents[groupName] = [];\r\n\t\t}\r\n\t\tjsc._attachedGroupEvents[groupName].push([el, evnt, func]);\r\n\t\tel.addEventListener(evnt, func, false);\r\n\t},\r\n\r\n\r\n\tdetachGroupEvents : function (groupName) {\r\n\t\tif (jsc._attachedGroupEvents.hasOwnProperty(groupName)) {\r\n\t\t\tfor (var i = 0; i < jsc._attachedGroupEvents[groupName].length; i += 1) {\r\n\t\t\t\tvar evt = jsc._attachedGroupEvents[groupName][i];\r\n\t\t\t\tevt[0].removeEventListener(evt[1], evt[2], false);\r\n\t\t\t}\r\n\t\t\tdelete jsc._attachedGroupEvents[groupName];\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tpreventDefault : function (e) {\r\n\t\tif (e.preventDefault) { e.preventDefault(); }\r\n\t\te.returnValue = false;\r\n\t},\r\n\r\n\r\n\ttriggerEvent : function (el, eventName, bubbles, cancelable) {\r\n\t\tif (!el) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tvar ev = null;\r\n\r\n\t\tif (typeof Event === 'function') {\r\n\t\t\tev = new Event(eventName, {\r\n\t\t\t\tbubbles: bubbles,\r\n\t\t\t\tcancelable: cancelable\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\t// IE\r\n\t\t\tev = window.document.createEvent('Event');\r\n\t\t\tev.initEvent(eventName, bubbles, cancelable);\r\n\t\t}\r\n\r\n\t\tif (!ev) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\t// so that we know that the event was triggered internally\r\n\t\tjsc.setData(ev, 'internal', true);\r\n\r\n\t\tel.dispatchEvent(ev);\r\n\t\treturn true;\r\n\t},\r\n\r\n\r\n\ttriggerInputEvent : function (el, eventName, bubbles, cancelable) {\r\n\t\tif (!el) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif (jsc.isTextInput(el)) {\r\n\t\t\tjsc.triggerEvent(el, eventName, bubbles, cancelable);\r\n\t\t}\r\n\t},\r\n\r\n\r\n\teventKey : function (ev) {\r\n\t\tvar keys = {\r\n\t\t\t9: 'Tab',\r\n\t\t\t13: 'Enter',\r\n\t\t\t27: 'Escape',\r\n\t\t};\r\n\t\tif (typeof ev.code === 'string') {\r\n\t\t\treturn ev.code;\r\n\t\t} else if (ev.keyCode !== undefined && keys.hasOwnProperty(ev.keyCode)) {\r\n\t\t\treturn keys[ev.keyCode];\r\n\t\t}\r\n\t\treturn null;\r\n\t},\r\n\r\n\r\n\tstrList : function (str) {\r\n\t\tif (!str) {\r\n\t\t\treturn [];\r\n\t\t}\r\n\t\treturn str.replace(/^\\s+|\\s+$/g, '').split(/\\s+/);\r\n\t},\r\n\r\n\r\n\t// The className parameter (str) can only contain a single class name\r\n\thasClass : function (elm, className) {\r\n\t\tif (!className) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif (elm.classList !== undefined) {\r\n\t\t\treturn elm.classList.contains(className);\r\n\t\t}\r\n\t\t// polyfill\r\n\t\treturn -1 != (' ' + elm.className.replace(/\\s+/g, ' ') + ' ').indexOf(' ' + className + ' ');\r\n\t},\r\n\r\n\r\n\t// The className parameter (str) can contain multiple class names separated by whitespace\r\n\taddClass : function (elm, className) {\r\n\t\tvar classNames = jsc.strList(className);\r\n\r\n\t\tif (elm.classList !== undefined) {\r\n\t\t\tfor (var i = 0; i < classNames.length; i += 1) {\r\n\t\t\t\telm.classList.add(classNames[i]);\r\n\t\t\t}\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t// polyfill\r\n\t\tfor (var i = 0; i < classNames.length; i += 1) {\r\n\t\t\tif (!jsc.hasClass(elm, classNames[i])) {\r\n\t\t\t\telm.className += (elm.className ? ' ' : '') + classNames[i];\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\r\n\t// The className parameter (str) can contain multiple class names separated by whitespace\r\n\tremoveClass : function (elm, className) {\r\n\t\tvar classNames = jsc.strList(className);\r\n\r\n\t\tif (elm.classList !== undefined) {\r\n\t\t\tfor (var i = 0; i < classNames.length; i += 1) {\r\n\t\t\t\telm.classList.remove(classNames[i]);\r\n\t\t\t}\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t// polyfill\r\n\t\tfor (var i = 0; i < classNames.length; i += 1) {\r\n\t\t\tvar repl = new RegExp(\r\n\t\t\t\t'^\\\\s*' + classNames[i] + '\\\\s*|' +\r\n\t\t\t\t'\\\\s*' + classNames[i] + '\\\\s*$|' +\r\n\t\t\t\t'\\\\s+' + classNames[i] + '(\\\\s+)',\r\n\t\t\t\t'g'\r\n\t\t\t);\r\n\t\t\telm.className = elm.className.replace(repl, '$1');\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tgetCompStyle : function (elm) {\r\n\t\tvar compStyle = window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle;\r\n\r\n\t\t// Note: In Firefox, getComputedStyle returns null in a hidden iframe,\r\n\t\t// that's why we need to check if the returned value is non-empty\r\n\t\tif (!compStyle) {\r\n\t\t\treturn {};\r\n\t\t}\r\n\t\treturn compStyle;\r\n\t},\r\n\r\n\r\n\t// Note:\r\n\t// Setting a property to NULL reverts it to the state before it was first set\r\n\t// with the 'reversible' flag enabled\r\n\t//\r\n\tsetStyle : function (elm, styles, important, reversible) {\r\n\t\t// using '' for standard priority (IE10 apparently doesn't like value undefined)\r\n\t\tvar priority = important ? 'important' : '';\r\n\t\tvar origStyle = null;\r\n\r\n\t\tfor (var prop in styles) {\r\n\t\t\tif (styles.hasOwnProperty(prop)) {\r\n\t\t\t\tvar setVal = null;\r\n\r\n\t\t\t\tif (styles[prop] === null) {\r\n\t\t\t\t\t// reverting a property value\r\n\r\n\t\t\t\t\tif (!origStyle) {\r\n\t\t\t\t\t\t// get the original style object, but dont't try to create it if it doesn't exist\r\n\t\t\t\t\t\torigStyle = jsc.getData(elm, 'origStyle');\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif (origStyle && origStyle.hasOwnProperty(prop)) {\r\n\t\t\t\t\t\t// we have property's original value -> use it\r\n\t\t\t\t\t\tsetVal = origStyle[prop];\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// setting a property value\r\n\r\n\t\t\t\t\tif (reversible) {\r\n\t\t\t\t\t\tif (!origStyle) {\r\n\t\t\t\t\t\t\t// get the original style object and if it doesn't exist, create it\r\n\t\t\t\t\t\t\torigStyle = jsc.getData(elm, 'origStyle', {});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tif (!origStyle.hasOwnProperty(prop)) {\r\n\t\t\t\t\t\t\t// original property value not yet stored -> store it\r\n\t\t\t\t\t\t\torigStyle[prop] = elm.style[prop];\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\tsetVal = styles[prop];\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (setVal !== null) {\r\n\t\t\t\t\telm.style.setProperty(prop, setVal, priority);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tappendCss : function (css) {\r\n\t\tvar head = document.querySelector('head');\r\n\t\tvar style = document.createElement('style');\r\n\t\tstyle.innerText = css;\r\n\t\thead.appendChild(style);\r\n\t},\r\n\r\n\r\n\tappendDefaultCss : function (css) {\r\n\t\tjsc.appendCss(\r\n\t\t\t[\r\n\t\t\t\t'.jscolor-wrap, .jscolor-wrap div, .jscolor-wrap canvas { ' +\r\n\t\t\t\t'position:static; display:block; visibility:visible; overflow:visible; margin:0; padding:0; ' +\r\n\t\t\t\t'border:none; border-radius:0; outline:none; z-index:auto; float:none; ' +\r\n\t\t\t\t'width:auto; height:auto; left:auto; right:auto; top:auto; bottom:auto; min-width:0; min-height:0; max-width:none; max-height:none; ' +\r\n\t\t\t\t'background:none; clip:auto; opacity:1; transform:none; box-shadow:none; box-sizing:content-box; ' +\r\n\t\t\t\t'}',\r\n\t\t\t\t'.jscolor-wrap { clear:both; }',\r\n\t\t\t\t'.jscolor-wrap .jscolor-picker { position:relative; }',\r\n\t\t\t\t'.jscolor-wrap .jscolor-shadow { position:absolute; left:0; top:0; width:100%; height:100%; }',\r\n\t\t\t\t'.jscolor-wrap .jscolor-border { position:relative; }',\r\n\t\t\t\t'.jscolor-wrap .jscolor-palette { position:absolute; }',\r\n\t\t\t\t'.jscolor-wrap .jscolor-palette-sw { position:absolute; display:block; cursor:pointer; }',\r\n\t\t\t\t'.jscolor-wrap .jscolor-btn { position:absolute; overflow:hidden; white-space:nowrap; font:13px sans-serif; text-align:center; cursor:pointer; }',\r\n\t\t\t].join('\\n')\r\n\t\t);\r\n\t},\r\n\r\n\r\n\thexColor : function (r, g, b) {\r\n\t\treturn '#' + (\r\n\t\t\t('0' + Math.round(r).toString(16)).slice(-2) +\r\n\t\t\t('0' + Math.round(g).toString(16)).slice(-2) +\r\n\t\t\t('0' + Math.round(b).toString(16)).slice(-2)\r\n\t\t).toUpperCase();\r\n\t},\r\n\r\n\r\n\thexaColor : function (r, g, b, a) {\r\n\t\treturn '#' + (\r\n\t\t\t('0' + Math.round(r).toString(16)).slice(-2) +\r\n\t\t\t('0' + Math.round(g).toString(16)).slice(-2) +\r\n\t\t\t('0' + Math.round(b).toString(16)).slice(-2) +\r\n\t\t\t('0' + Math.round(a * 255).toString(16)).slice(-2)\r\n\t\t).toUpperCase();\r\n\t},\r\n\r\n\r\n\trgbColor : function (r, g, b) {\r\n\t\treturn 'rgb(' +\r\n\t\t\tMath.round(r) + ',' +\r\n\t\t\tMath.round(g) + ',' +\r\n\t\t\tMath.round(b) +\r\n\t\t')';\r\n\t},\r\n\r\n\r\n\trgbaColor : function (r, g, b, a) {\r\n\t\treturn 'rgba(' +\r\n\t\t\tMath.round(r) + ',' +\r\n\t\t\tMath.round(g) + ',' +\r\n\t\t\tMath.round(b) + ',' +\r\n\t\t\t(Math.round((a===undefined || a===null ? 1 : a) * 100) / 100) +\r\n\t\t')';\r\n\t},\r\n\r\n\r\n\tlinearGradient : (function () {\r\n\r\n\t\tfunction getFuncName () {\r\n\t\t\tvar stdName = 'linear-gradient';\r\n\t\t\tvar prefixes = ['', '-webkit-', '-moz-', '-o-', '-ms-'];\r\n\t\t\tvar helper = window.document.createElement('div');\r\n\r\n\t\t\tfor (var i = 0; i < prefixes.length; i += 1) {\r\n\t\t\t\tvar tryFunc = prefixes[i] + stdName;\r\n\t\t\t\tvar tryVal = tryFunc + '(to right, rgba(0,0,0,0), rgba(0,0,0,0))';\r\n\r\n\t\t\t\thelper.style.background = tryVal;\r\n\t\t\t\tif (helper.style.background) { // CSS background successfully set -> function name is supported\r\n\t\t\t\t\treturn tryFunc;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn stdName; // fallback to standard 'linear-gradient' without vendor prefix\r\n\t\t}\r\n\r\n\t\tvar funcName = getFuncName();\r\n\r\n\t\treturn function () {\r\n\t\t\treturn funcName + '(' + Array.prototype.join.call(arguments, ', ') + ')';\r\n\t\t};\r\n\r\n\t})(),\r\n\r\n\r\n\tsetBorderRadius : function (elm, value) {\r\n\t\tjsc.setStyle(elm, {'border-radius' : value || '0'});\r\n\t},\r\n\r\n\r\n\tsetBoxShadow : function (elm, value) {\r\n\t\tjsc.setStyle(elm, {'box-shadow': value || 'none'});\r\n\t},\r\n\r\n\r\n\tgetElementPos : function (e, relativeToViewport) {\r\n\t\tvar x=0, y=0;\r\n\t\tvar rect = e.getBoundingClientRect();\r\n\t\tx = rect.left;\r\n\t\ty = rect.top;\r\n\t\tif (!relativeToViewport) {\r\n\t\t\tvar viewPos = jsc.getViewPos();\r\n\t\t\tx += viewPos[0];\r\n\t\t\ty += viewPos[1];\r\n\t\t}\r\n\t\treturn [x, y];\r\n\t},\r\n\r\n\r\n\tgetElementSize : function (e) {\r\n\t\treturn [e.offsetWidth, e.offsetHeight];\r\n\t},\r\n\r\n\r\n\t// get pointer's X/Y coordinates relative to viewport\r\n\tgetAbsPointerPos : function (e) {\r\n\t\tvar x = 0, y = 0;\r\n\t\tif (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) {\r\n\t\t\t// touch devices\r\n\t\t\tx = e.changedTouches[0].clientX;\r\n\t\t\ty = e.changedTouches[0].clientY;\r\n\t\t} else if (typeof e.clientX === 'number') {\r\n\t\t\tx = e.clientX;\r\n\t\t\ty = e.clientY;\r\n\t\t}\r\n\t\treturn { x: x, y: y };\r\n\t},\r\n\r\n\r\n\t// get pointer's X/Y coordinates relative to target element\r\n\tgetRelPointerPos : function (e) {\r\n\t\tvar target = e.target || e.srcElement;\r\n\t\tvar targetRect = target.getBoundingClientRect();\r\n\r\n\t\tvar x = 0, y = 0;\r\n\r\n\t\tvar clientX = 0, clientY = 0;\r\n\t\tif (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) {\r\n\t\t\t// touch devices\r\n\t\t\tclientX = e.changedTouches[0].clientX;\r\n\t\t\tclientY = e.changedTouches[0].clientY;\r\n\t\t} else if (typeof e.clientX === 'number') {\r\n\t\t\tclientX = e.clientX;\r\n\t\t\tclientY = e.clientY;\r\n\t\t}\r\n\r\n\t\tx = clientX - targetRect.left;\r\n\t\ty = clientY - targetRect.top;\r\n\t\treturn { x: x, y: y };\r\n\t},\r\n\r\n\r\n\tgetViewPos : function () {\r\n\t\tvar doc = window.document.documentElement;\r\n\t\treturn [\r\n\t\t\t(window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),\r\n\t\t\t(window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)\r\n\t\t];\r\n\t},\r\n\r\n\r\n\tgetViewSize : function () {\r\n\t\tvar doc = window.document.documentElement;\r\n\t\treturn [\r\n\t\t\t(window.innerWidth || doc.clientWidth),\r\n\t\t\t(window.innerHeight || doc.clientHeight),\r\n\t\t];\r\n\t},\r\n\r\n\r\n\t// r: 0-255\r\n\t// g: 0-255\r\n\t// b: 0-255\r\n\t//\r\n\t// returns: [ 0-360, 0-100, 0-100 ]\r\n\t//\r\n\tRGB_HSV : function (r, g, b) {\r\n\t\tr /= 255;\r\n\t\tg /= 255;\r\n\t\tb /= 255;\r\n\t\tvar n = Math.min(Math.min(r,g),b);\r\n\t\tvar v = Math.max(Math.max(r,g),b);\r\n\t\tvar m = v - n;\r\n\t\tif (m === 0) { return [ null, 0, 100 * v ]; }\r\n\t\tvar h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);\r\n\t\treturn [\r\n\t\t\t60 * (h===6?0:h),\r\n\t\t\t100 * (m/v),\r\n\t\t\t100 * v\r\n\t\t];\r\n\t},\r\n\r\n\r\n\t// h: 0-360\r\n\t// s: 0-100\r\n\t// v: 0-100\r\n\t//\r\n\t// returns: [ 0-255, 0-255, 0-255 ]\r\n\t//\r\n\tHSV_RGB : function (h, s, v) {\r\n\t\tvar u = 255 * (v / 100);\r\n\r\n\t\tif (h === null) {\r\n\t\t\treturn [ u, u, u ];\r\n\t\t}\r\n\r\n\t\th /= 60;\r\n\t\ts /= 100;\r\n\r\n\t\tvar i = Math.floor(h);\r\n\t\tvar f = i%2 ? h-i : 1-(h-i);\r\n\t\tvar m = u * (1 - s);\r\n\t\tvar n = u * (1 - s * f);\r\n\t\tswitch (i) {\r\n\t\t\tcase 6:\r\n\t\t\tcase 0: return [u,n,m];\r\n\t\t\tcase 1: return [n,u,m];\r\n\t\t\tcase 2: return [m,u,n];\r\n\t\t\tcase 3: return [m,n,u];\r\n\t\t\tcase 4: return [n,m,u];\r\n\t\t\tcase 5: return [u,m,n];\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tparseColorString : function (str) {\r\n\t\tvar ret = {\r\n\t\t\trgba: null,\r\n\t\t\tformat: null // 'hex' | 'hexa' | 'rgb' | 'rgba'\r\n\t\t};\r\n\r\n\t\tvar m;\r\n\r\n\t\tif (m = str.match(/^\\W*([0-9A-F]{3,8})\\W*$/i)) {\r\n\t\t\t// HEX notation\r\n\r\n\t\t\tif (m[1].length === 8) {\r\n\t\t\t\t// 8-char notation (= with alpha)\r\n\t\t\t\tret.format = 'hexa';\r\n\t\t\t\tret.rgba = [\r\n\t\t\t\t\tparseInt(m[1].slice(0,2),16),\r\n\t\t\t\t\tparseInt(m[1].slice(2,4),16),\r\n\t\t\t\t\tparseInt(m[1].slice(4,6),16),\r\n\t\t\t\t\tparseInt(m[1].slice(6,8),16) / 255\r\n\t\t\t\t];\r\n\r\n\t\t\t} else if (m[1].length === 6) {\r\n\t\t\t\t// 6-char notation\r\n\t\t\t\tret.format = 'hex';\r\n\t\t\t\tret.rgba = [\r\n\t\t\t\t\tparseInt(m[1].slice(0,2),16),\r\n\t\t\t\t\tparseInt(m[1].slice(2,4),16),\r\n\t\t\t\t\tparseInt(m[1].slice(4,6),16),\r\n\t\t\t\t\tnull\r\n\t\t\t\t];\r\n\r\n\t\t\t} else if (m[1].length === 3) {\r\n\t\t\t\t// 3-char notation\r\n\t\t\t\tret.format = 'hex';\r\n\t\t\t\tret.rgba = [\r\n\t\t\t\t\tparseInt(m[1].charAt(0) + m[1].charAt(0),16),\r\n\t\t\t\t\tparseInt(m[1].charAt(1) + m[1].charAt(1),16),\r\n\t\t\t\t\tparseInt(m[1].charAt(2) + m[1].charAt(2),16),\r\n\t\t\t\t\tnull\r\n\t\t\t\t];\r\n\r\n\t\t\t} else {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n\t\t\treturn ret;\r\n\t\t}\r\n\r\n\t\tif (m = str.match(/^\\W*rgba?\\(([^)]*)\\)\\W*$/i)) {\r\n\t\t\t// rgb(...) or rgba(...) notation\r\n\r\n\t\t\tvar par = m[1].split(',');\r\n\t\t\tvar re = /^\\s*(\\d+|\\d*\\.\\d+|\\d+\\.\\d*)\\s*$/;\r\n\t\t\tvar mR, mG, mB, mA;\r\n\t\t\tif (\r\n\t\t\t\tpar.length >= 3 &&\r\n\t\t\t\t(mR = par[0].match(re)) &&\r\n\t\t\t\t(mG = par[1].match(re)) &&\r\n\t\t\t\t(mB = par[2].match(re))\r\n\t\t\t) {\r\n\t\t\t\tret.format = 'rgb';\r\n\t\t\t\tret.rgba = [\r\n\t\t\t\t\tparseFloat(mR[1]) || 0,\r\n\t\t\t\t\tparseFloat(mG[1]) || 0,\r\n\t\t\t\t\tparseFloat(mB[1]) || 0,\r\n\t\t\t\t\tnull\r\n\t\t\t\t];\r\n\r\n\t\t\t\tif (\r\n\t\t\t\t\tpar.length >= 4 &&\r\n\t\t\t\t\t(mA = par[3].match(re))\r\n\t\t\t\t) {\r\n\t\t\t\t\tret.format = 'rgba';\r\n\t\t\t\t\tret.rgba[3] = parseFloat(mA[1]) || 0;\r\n\t\t\t\t}\r\n\t\t\t\treturn ret;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn false;\r\n\t},\r\n\r\n\r\n\tparsePaletteValue : function (mixed) {\r\n\t\tvar vals = [];\r\n\r\n\t\tif (typeof mixed === 'string') { // input is a string of space separated color values\r\n\t\t\t// rgb() and rgba() may contain spaces too, so let's find all color values by regex\r\n\t\t\tmixed.replace(/#[0-9A-F]{3}\\b|#[0-9A-F]{6}([0-9A-F]{2})?\\b|rgba?\\(([^)]*)\\)/ig, function (val) {\r\n\t\t\t\tvals.push(val);\r\n\t\t\t});\r\n\t\t} else if (Array.isArray(mixed)) { // input is an array of color values\r\n\t\t\tvals = mixed;\r\n\t\t}\r\n\r\n\t\t// convert all values into uniform color format\r\n\r\n\t\tvar colors = [];\r\n\r\n\t\tfor (var i = 0; i < vals.length; i++) {\r\n\t\t\tvar color = jsc.parseColorString(vals[i]);\r\n\t\t\tif (color) {\r\n\t\t\t\tcolors.push(color);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn colors;\r\n\t},\r\n\r\n\r\n\tcontainsTranparentColor : function (colors) {\r\n\t\tfor (var i = 0; i < colors.length; i++) {\r\n\t\t\tvar a = colors[i].rgba[3];\r\n\t\t\tif (a !== null && a < 1.0) {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn false;\r\n\t},\r\n\r\n\r\n\tisAlphaFormat : function (format) {\r\n\t\tswitch (format.toLowerCase()) {\r\n\t\tcase 'hexa':\r\n\t\tcase 'rgba':\r\n\t\t\treturn true;\r\n\t\t}\r\n\t\treturn false;\r\n\t},\r\n\r\n\r\n\t// Canvas scaling for retina displays\r\n\t//\r\n\t// adapted from https://www.html5rocks.com/en/tutorials/canvas/hidpi/\r\n\t//\r\n\tscaleCanvasForHighDPR : function (canvas) {\r\n\t\tvar dpr = window.devicePixelRatio || 1;\r\n\t\tcanvas.width *= dpr;\r\n\t\tcanvas.height *= dpr;\r\n\t\tvar ctx = canvas.getContext('2d');\r\n\t\tctx.scale(dpr, dpr);\r\n\t},\r\n\r\n\r\n\tgenColorPreviewCanvas : function (color, separatorPos, specWidth, scaleForHighDPR) {\r\n\r\n\t\tvar sepW = Math.round(jsc.pub.previewSeparator.length);\r\n\t\tvar sqSize = jsc.pub.chessboardSize;\r\n\t\tvar sqColor1 = jsc.pub.chessboardColor1;\r\n\t\tvar sqColor2 = jsc.pub.chessboardColor2;\r\n\r\n\t\tvar cWidth = specWidth ? specWidth : sqSize * 2;\r\n\t\tvar cHeight = sqSize * 2;\r\n\r\n\t\tvar canvas = jsc.createEl('canvas');\r\n\t\tvar ctx = canvas.getContext('2d');\r\n\r\n\t\tcanvas.width = cWidth;\r\n\t\tcanvas.height = cHeight;\r\n\t\tif (scaleForHighDPR) {\r\n\t\t\tjsc.scaleCanvasForHighDPR(canvas);\r\n\t\t}\r\n\r\n\t\t// transparency chessboard - background\r\n\t\tctx.fillStyle = sqColor1;\r\n\t\tctx.fillRect(0, 0, cWidth, cHeight);\r\n\r\n\t\t// transparency chessboard - squares\r\n\t\tctx.fillStyle = sqColor2;\r\n\t\tfor (var x = 0; x < cWidth; x += sqSize * 2) {\r\n\t\t\tctx.fillRect(x, 0, sqSize, sqSize);\r\n\t\t\tctx.fillRect(x + sqSize, sqSize, sqSize, sqSize);\r\n\t\t}\r\n\r\n\t\tif (color) {\r\n\t\t\t// actual color in foreground\r\n\t\t\tctx.fillStyle = color;\r\n\t\t\tctx.fillRect(0, 0, cWidth, cHeight);\r\n\t\t}\r\n\r\n\t\tvar start = null;\r\n\t\tswitch (separatorPos) {\r\n\t\t\tcase 'left':\r\n\t\t\t\tstart = 0;\r\n\t\t\t\tctx.clearRect(0, 0, sepW/2, cHeight);\r\n\t\t\t\tbreak;\r\n\t\t\tcase 'right':\r\n\t\t\t\tstart = cWidth - sepW;\r\n\t\t\t\tctx.clearRect(cWidth - (sepW/2), 0, sepW/2, cHeight);\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t\tif (start !== null) {\r\n\t\t\tctx.lineWidth = 1;\r\n\t\t\tfor (var i = 0; i < jsc.pub.previewSeparator.length; i += 1) {\r\n\t\t\t\tctx.beginPath();\r\n\t\t\t\tctx.strokeStyle = jsc.pub.previewSeparator[i];\r\n\t\t\t\tctx.moveTo(0.5 + start + i, 0);\r\n\t\t\t\tctx.lineTo(0.5 + start + i, cHeight);\r\n\t\t\t\tctx.stroke();\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\tcanvas: canvas,\r\n\t\t\twidth: cWidth,\r\n\t\t\theight: cHeight,\r\n\t\t};\r\n\t},\r\n\r\n\r\n\t// if position or width is not set => fill the entire element (0%-100%)\r\n\tgenColorPreviewGradient : function (color, position, width) {\r\n\t\tvar params = [];\r\n\r\n\t\tif (position && width) {\r\n\t\t\tparams = [\r\n\t\t\t\t'to ' + {'left':'right', 'right':'left'}[position],\r\n\t\t\t\tcolor + ' 0%',\r\n\t\t\t\tcolor + ' ' + width + 'px',\r\n\t\t\t\t'rgba(0,0,0,0) ' + (width + 1) + 'px',\r\n\t\t\t\t'rgba(0,0,0,0) 100%',\r\n\t\t\t];\r\n\t\t} else {\r\n\t\t\tparams = [\r\n\t\t\t\t'to right',\r\n\t\t\t\tcolor + ' 0%',\r\n\t\t\t\tcolor + ' 100%',\r\n\t\t\t];\r\n\t\t}\r\n\r\n\t\treturn jsc.linearGradient.apply(this, params);\r\n\t},\r\n\r\n\r\n\tredrawPosition : function () {\r\n\r\n\t\tif (!jsc.picker || !jsc.picker.owner) {\r\n\t\t\treturn; // picker is not shown\r\n\t\t}\r\n\r\n\t\tvar thisObj = jsc.picker.owner;\r\n\r\n\t\tif (thisObj.container !== window.document.body) {\r\n\r\n\t\t\tjsc._drawPosition(thisObj, 0, 0, 'relative', false);\r\n\r\n\t\t} else {\r\n\r\n\t\t\tvar tp, vp;\r\n\r\n\t\t\tif (thisObj.fixed) {\r\n\t\t\t\t// Fixed elements are positioned relative to viewport,\r\n\t\t\t\t// therefore we can ignore the scroll offset\r\n\t\t\t\ttp = jsc.getElementPos(thisObj.targetElement, true); // target pos\r\n\t\t\t\tvp = [0, 0]; // view pos\r\n\t\t\t} else {\r\n\t\t\t\ttp = jsc.getElementPos(thisObj.targetElement); // target pos\r\n\t\t\t\tvp = jsc.getViewPos(); // view pos\r\n\t\t\t}\r\n\r\n\t\t\tvar ts = jsc.getElementSize(thisObj.targetElement); // target size\r\n\t\t\tvar vs = jsc.getViewSize(); // view size\r\n\t\t\tvar pd = jsc.getPickerDims(thisObj);\r\n\t\t\tvar ps = [pd.borderW, pd.borderH]; // picker outer size\r\n\t\t\tvar a, b, c;\r\n\t\t\tswitch (thisObj.position.toLowerCase()) {\r\n\t\t\t\tcase 'left': a=1; b=0; c=-1; break;\r\n\t\t\t\tcase 'right':a=1; b=0; c=1; break;\r\n\t\t\t\tcase 'top': a=0; b=1; c=-1; break;\r\n\t\t\t\tdefault: a=0; b=1; c=1; break;\r\n\t\t\t}\r\n\t\t\tvar l = (ts[b]+ps[b])/2;\r\n\r\n\t\t\t// compute picker position\r\n\t\t\tif (!thisObj.smartPosition) {\r\n\t\t\t\tvar pp = [\r\n\t\t\t\t\ttp[a],\r\n\t\t\t\t\ttp[b]+ts[b]-l+l*c\r\n\t\t\t\t];\r\n\t\t\t} else {\r\n\t\t\t\tvar pp = [\r\n\t\t\t\t\t-vp[a]+tp[a]+ps[a] > vs[a] ?\r\n\t\t\t\t\t\t(-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]) :\r\n\t\t\t\t\t\ttp[a],\r\n\t\t\t\t\t-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?\r\n\t\t\t\t\t\t(-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) :\r\n\t\t\t\t\t\t(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)\r\n\t\t\t\t];\r\n\t\t\t}\r\n\r\n\t\t\tvar x = pp[a];\r\n\t\t\tvar y = pp[b];\r\n\t\t\tvar positionValue = thisObj.fixed ? 'fixed' : 'absolute';\r\n\t\t\tvar contractShadow =\r\n\t\t\t\t(pp[0] + ps[0] > tp[0] || pp[0] < tp[0] + ts[0]) &&\r\n\t\t\t\t(pp[1] + ps[1] < tp[1] + ts[1]);\r\n\r\n\t\t\tjsc._drawPosition(thisObj, x, y, positionValue, contractShadow);\r\n\r\n\t\t}\r\n\r\n\t},\r\n\r\n\r\n\t_drawPosition : function (thisObj, x, y, positionValue, contractShadow) {\r\n\t\tvar vShadow = contractShadow ? 0 : thisObj.shadowBlur; // px\r\n\r\n\t\tjsc.picker.wrap.style.position = positionValue;\r\n\r\n\t\tif ( // To avoid unnecessary repositioning during scroll\r\n\t\t\tMath.round(parseFloat(jsc.picker.wrap.style.left)) !== Math.round(x) ||\r\n\t\t\tMath.round(parseFloat(jsc.picker.wrap.style.top)) !== Math.round(y)\r\n\t\t) {\r\n\t\t\tjsc.picker.wrap.style.left = x + 'px';\r\n\t\t\tjsc.picker.wrap.style.top = y + 'px';\r\n\t\t}\r\n\r\n\t\tjsc.setBoxShadow(\r\n\t\t\tjsc.picker.boxS,\r\n\t\t\tthisObj.shadow ?\r\n\t\t\t\tnew jsc.BoxShadow(0, vShadow, thisObj.shadowBlur, 0, thisObj.shadowColor) :\r\n\t\t\t\tnull);\r\n\t},\r\n\r\n\r\n\tgetPickerDims : function (thisObj) {\r\n\t\tvar w = 2 * thisObj.controlBorderWidth + thisObj.width;\r\n\t\tvar h = 2 * thisObj.controlBorderWidth + thisObj.height;\r\n\r\n\t\tvar sliderSpace = 2 * thisObj.controlBorderWidth + 2 * jsc.getControlPadding(thisObj) + thisObj.sliderSize;\r\n\r\n\t\tif (jsc.getSliderChannel(thisObj)) {\r\n\t\t\tw += sliderSpace;\r\n\t\t}\r\n\t\tif (thisObj.hasAlphaChannel()) {\r\n\t\t\tw += sliderSpace;\r\n\t\t}\r\n\r\n\t\tvar pal = jsc.getPaletteDims(thisObj, w);\r\n\r\n\t\tif (pal.height) {\r\n\t\t\th += pal.height + thisObj.padding;\r\n\t\t}\r\n\t\tif (thisObj.closeButton) {\r\n\t\t\th += 2 * thisObj.controlBorderWidth + thisObj.padding + thisObj.buttonHeight;\r\n\t\t}\r\n\r\n\t\tvar pW = w + (2 * thisObj.padding);\r\n\t\tvar pH = h + (2 * thisObj.padding);\r\n\r\n\t\treturn {\r\n\t\t\tcontentW: w,\r\n\t\t\tcontentH: h,\r\n\t\t\tpaddedW: pW,\r\n\t\t\tpaddedH: pH,\r\n\t\t\tborderW: pW + (2 * thisObj.borderWidth),\r\n\t\t\tborderH: pH + (2 * thisObj.borderWidth),\r\n\t\t\tpalette: pal,\r\n\t\t};\r\n\t},\r\n\r\n\r\n\tgetPaletteDims : function (thisObj, width) {\r\n\t\tvar cols = 0, rows = 0, cellW = 0, cellH = 0, height = 0;\r\n\t\tvar sampleCount = thisObj._palette ? thisObj._palette.length : 0;\r\n\r\n\t\tif (sampleCount) {\r\n\t\t\tcols = thisObj.paletteCols;\r\n\t\t\trows = cols > 0 ? Math.ceil(sampleCount / cols) : 0;\r\n\r\n\t\t\t// color sample's dimensions (includes border)\r\n\t\t\tcellW = Math.max(1, Math.floor((width - ((cols - 1) * thisObj.paletteSpacing)) / cols));\r\n\t\t\tcellH = thisObj.paletteHeight ? Math.min(thisObj.paletteHeight, cellW) : cellW;\r\n\t\t}\r\n\r\n\t\tif (rows) {\r\n\t\t\theight =\r\n\t\t\t\trows * cellH +\r\n\t\t\t\t(rows - 1) * thisObj.paletteSpacing;\r\n\t\t}\r\n\r\n\t\treturn {\r\n\t\t\tcols: cols,\r\n\t\t\trows: rows,\r\n\t\t\tcellW: cellW,\r\n\t\t\tcellH: cellH,\r\n\t\t\twidth: width,\r\n\t\t\theight: height,\r\n\t\t};\r\n\t},\r\n\r\n\r\n\tgetControlPadding : function (thisObj) {\r\n\t\treturn Math.max(\r\n\t\t\tthisObj.padding / 2,\r\n\t\t\t(2 * thisObj.pointerBorderWidth + thisObj.pointerThickness) - thisObj.controlBorderWidth\r\n\t\t);\r\n\t},\r\n\r\n\r\n\tgetPadYChannel : function (thisObj) {\r\n\t\tswitch (thisObj.mode.charAt(1).toLowerCase()) {\r\n\t\t\tcase 'v': return 'v'; break;\r\n\t\t}\r\n\t\treturn 's';\r\n\t},\r\n\r\n\r\n\tgetSliderChannel : function (thisObj) {\r\n\t\tif (thisObj.mode.length > 2) {\r\n\t\t\tswitch (thisObj.mode.charAt(2).toLowerCase()) {\r\n\t\t\t\tcase 's': return 's'; break;\r\n\t\t\t\tcase 'v': return 'v'; break;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn null;\r\n\t},\r\n\r\n\r\n\t// calls function specified in picker's property\r\n\ttriggerCallback : function (thisObj, prop) {\r\n\t\tif (!thisObj[prop]) {\r\n\t\t\treturn; // callback func not specified\r\n\t\t}\r\n\t\tvar callback = null;\r\n\r\n\t\tif (typeof thisObj[prop] === 'string') {\r\n\t\t\t// string with code\r\n\t\t\ttry {\r\n\t\t\t\tcallback = new Function (thisObj[prop]);\r\n\t\t\t} catch (e) {\r\n\t\t\t\tconsole.error(e);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t// function\r\n\t\t\tcallback = thisObj[prop];\r\n\t\t}\r\n\r\n\t\tif (callback) {\r\n\t\t\tcallback.call(thisObj);\r\n\t\t}\r\n\t},\r\n\r\n\r\n\t// Triggers a color change related event(s) on all picker instances.\r\n\t// It is possible to specify multiple events separated with a space.\r\n\ttriggerGlobal : function (eventNames) {\r\n\t\tvar inst = jsc.getInstances();\r\n\t\tfor (var i = 0; i < inst.length; i += 1) {\r\n\t\t\tinst[i].trigger(eventNames);\r\n\t\t}\r\n\t},\r\n\r\n\r\n\t_pointerMoveEvent : {\r\n\t\tmouse: 'mousemove',\r\n\t\ttouch: 'touchmove'\r\n\t},\r\n\t_pointerEndEvent : {\r\n\t\tmouse: 'mouseup',\r\n\t\ttouch: 'touchend'\r\n\t},\r\n\r\n\r\n\t_pointerOrigin : null,\r\n\r\n\r\n\tonDocumentKeyUp : function (e) {\r\n\t\tif (['Tab', 'Escape'].indexOf(jsc.eventKey(e)) !== -1) {\r\n\t\t\tif (jsc.picker && jsc.picker.owner) {\r\n\t\t\t\tjsc.picker.owner.tryHide();\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tonWindowResize : function (e) {\r\n\t\tjsc.redrawPosition();\r\n\t},\r\n\r\n\r\n\tonWindowScroll : function (e) {\r\n\t\tjsc.redrawPosition();\r\n\t},\r\n\r\n\r\n\tonParentScroll : function (e) {\r\n\t\t// hide the picker when one of the parent elements is scrolled\r\n\t\tif (jsc.picker && jsc.picker.owner) {\r\n\t\t\tjsc.picker.owner.tryHide();\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tonDocumentMouseDown : function (e) {\r\n\t\tvar target = e.target || e.srcElement;\r\n\r\n\t\tif (target.jscolor && target.jscolor instanceof jsc.pub) { // clicked targetElement -> show picker\r\n\t\t\tif (target.jscolor.showOnClick && !target.disabled) {\r\n\t\t\t\ttarget.jscolor.show();\r\n\t\t\t}\r\n\t\t} else if (jsc.getData(target, 'gui')) { // clicked jscolor's GUI element\r\n\t\t\tvar control = jsc.getData(target, 'control');\r\n\t\t\tif (control) {\r\n\t\t\t\t// jscolor's control\r\n\t\t\t\tjsc.onControlPointerStart(e, target, jsc.getData(target, 'control'), 'mouse');\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t// mouse is outside the picker's controls -> hide the color picker!\r\n\t\t\tif (jsc.picker && jsc.picker.owner) {\r\n\t\t\t\tjsc.picker.owner.tryHide();\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tonPickerTouchStart : function (e) {\r\n\t\tvar target = e.target || e.srcElement;\r\n\r\n\t\tif (jsc.getData(target, 'control')) {\r\n\t\t\tjsc.onControlPointerStart(e, target, jsc.getData(target, 'control'), 'touch');\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tonControlPointerStart : function (e, target, controlName, pointerType) {\r\n\t\tvar thisObj = jsc.getData(target, 'instance');\r\n\r\n\t\tjsc.preventDefault(e);\r\n\r\n\t\tvar registerDragEvents = function (doc, offset) {\r\n\t\t\tjsc.attachGroupEvent('drag', doc, jsc._pointerMoveEvent[pointerType],\r\n\t\t\t\tjsc.onDocumentPointerMove(e, target, controlName, pointerType, offset));\r\n\t\t\tjsc.attachGroupEvent('drag', doc, jsc._pointerEndEvent[pointerType],\r\n\t\t\t\tjsc.onDocumentPointerEnd(e, target, controlName, pointerType));\r\n\t\t};\r\n\r\n\t\tregisterDragEvents(window.document, [0, 0]);\r\n\r\n\t\tif (window.parent && window.frameElement) {\r\n\t\t\tvar rect = window.frameElement.getBoundingClientRect();\r\n\t\t\tvar ofs = [-rect.left, -rect.top];\r\n\t\t\tregisterDragEvents(window.parent.window.document, ofs);\r\n\t\t}\r\n\r\n\t\tvar abs = jsc.getAbsPointerPos(e);\r\n\t\tvar rel = jsc.getRelPointerPos(e);\r\n\t\tjsc._pointerOrigin = {\r\n\t\t\tx: abs.x - rel.x,\r\n\t\t\ty: abs.y - rel.y\r\n\t\t};\r\n\r\n\t\tswitch (controlName) {\r\n\t\tcase 'pad':\r\n\t\t\t// if the value slider is at the bottom, move it up\r\n\t\t\tif (jsc.getSliderChannel(thisObj) === 'v' && thisObj.channels.v === 0) {\r\n\t\t\t\tthisObj.fromHSVA(null, null, 100, null);\r\n\t\t\t}\r\n\t\t\tjsc.setPad(thisObj, e, 0, 0);\r\n\t\t\tbreak;\r\n\r\n\t\tcase 'sld':\r\n\t\t\tjsc.setSld(thisObj, e, 0);\r\n\t\t\tbreak;\r\n\r\n\t\tcase 'asld':\r\n\t\t\tjsc.setASld(thisObj, e, 0);\r\n\t\t\tbreak;\r\n\t\t}\r\n\t\tthisObj.trigger('input');\r\n\t},\r\n\r\n\r\n\tonDocumentPointerMove : function (e, target, controlName, pointerType, offset) {\r\n\t\treturn function (e) {\r\n\t\t\tvar thisObj = jsc.getData(target, 'instance');\r\n\t\t\tswitch (controlName) {\r\n\t\t\tcase 'pad':\r\n\t\t\t\tjsc.setPad(thisObj, e, offset[0], offset[1]);\r\n\t\t\t\tbreak;\r\n\r\n\t\t\tcase 'sld':\r\n\t\t\t\tjsc.setSld(thisObj, e, offset[1]);\r\n\t\t\t\tbreak;\r\n\r\n\t\t\tcase 'asld':\r\n\t\t\t\tjsc.setASld(thisObj, e, offset[1]);\r\n\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t\tthisObj.trigger('input');\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tonDocumentPointerEnd : function (e, target, controlName, pointerType) {\r\n\t\treturn function (e) {\r\n\t\t\tvar thisObj = jsc.getData(target, 'instance');\r\n\t\t\tjsc.detachGroupEvents('drag');\r\n\r\n\t\t\t// Always trigger changes AFTER detaching outstanding mouse handlers,\r\n\t\t\t// in case some color change that occured in user-defined onChange/onInput handler\r\n\t\t\t// intruded into current mouse events\r\n\t\t\tthisObj.trigger('input');\r\n\t\t\tthisObj.trigger('change');\r\n\t\t};\r\n\t},\r\n\r\n\r\n\tonPaletteSampleClick : function (e) {\r\n\t\tvar target = e.currentTarget;\r\n\t\tvar thisObj = jsc.getData(target, 'instance');\r\n\t\tvar color = jsc.getData(target, 'color');\r\n\r\n\t\t// when format is flexible, use the original format of this color sample\r\n\t\tif (thisObj.format.toLowerCase() === 'any') {\r\n\t\t\tthisObj._setFormat(color.format); // adapt format\r\n\t\t\tif (!jsc.isAlphaFormat(thisObj.getFormat())) {\r\n\t\t\t\tcolor.rgba[3] = 1.0; // when switching to a format that doesn't support alpha, set full opacity\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// if this color doesn't specify alpha, use alpha of 1.0 (if applicable)\r\n\t\tif (color.rgba[3] === null) {\r\n\t\t\tif (thisObj.paletteSetsAlpha === true || (thisObj.paletteSetsAlpha === 'auto' && thisObj._paletteHasTransparency)) {\r\n\t\t\t\tcolor.rgba[3] = 1.0;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tthisObj.fromRGBA.apply(thisObj, color.rgba);\r\n\r\n\t\tthisObj.trigger('input');\r\n\t\tthisObj.trigger('change');\r\n\r\n\t\tif (thisObj.hideOnPaletteClick) {\r\n\t\t\tthisObj.hide();\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tsetPad : function (thisObj, e, ofsX, ofsY) {\r\n\t\tvar pointerAbs = jsc.getAbsPointerPos(e);\r\n\t\tvar x = ofsX + pointerAbs.x - jsc._pointerOrigin.x - thisObj.padding - thisObj.controlBorderWidth;\r\n\t\tvar y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.controlBorderWidth;\r\n\r\n\t\tvar xVal = x * (360 / (thisObj.width - 1));\r\n\t\tvar yVal = 100 - (y * (100 / (thisObj.height - 1)));\r\n\r\n\t\tswitch (jsc.getPadYChannel(thisObj)) {\r\n\t\tcase 's': thisObj.fromHSVA(xVal, yVal, null, null); break;\r\n\t\tcase 'v': thisObj.fromHSVA(xVal, null, yVal, null); break;\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tsetSld : function (thisObj, e, ofsY) {\r\n\t\tvar pointerAbs = jsc.getAbsPointerPos(e);\r\n\t\tvar y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.controlBorderWidth;\r\n\t\tvar yVal = 100 - (y * (100 / (thisObj.height - 1)));\r\n\r\n\t\tswitch (jsc.getSliderChannel(thisObj)) {\r\n\t\tcase 's': thisObj.fromHSVA(null, yVal, null, null); break;\r\n\t\tcase 'v': thisObj.fromHSVA(null, null, yVal, null); break;\r\n\t\t}\r\n\t},\r\n\r\n\r\n\tsetASld : function (thisObj, e, ofsY) {\r\n\t\tvar pointerAbs = jsc.getAbsPointerPos(e);\r\n\t\tvar y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.controlBorderWidth;\r\n\t\tvar yVal = 1.0 - (y * (1.0 / (thisObj.height - 1)));\r\n\r\n\t\tif (yVal < 1.0) {\r\n\t\t\t// if format is flexible and the current format doesn't support alpha, switch to a suitable one\r\n\t\t\tvar fmt = thisObj.getFormat();\r\n\t\t\tif (thisObj.format.toLowerCase() === 'any' && !jsc.isAlphaFormat(fmt)) {\r\n\t\t\t\tthisObj._setFormat(fmt === 'hex' ? 'hexa' : 'rgba');\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tthisObj.fromHSVA(null, null, null, yVal);\r\n\t},\r\n\r\n\r\n\tcreatePadCanvas : function () {\r\n\r\n\t\tvar ret = {\r\n\t\t\telm: null,\r\n\t\t\tdraw: null\r\n\t\t};\r\n\r\n\t\tvar canvas = jsc.createEl('canvas');\r\n\t\tvar ctx = canvas.getContext('2d');\r\n\r\n\t\tvar drawFunc = function (width, height, type) {\r\n\t\t\tcanvas.width = width;\r\n\t\t\tcanvas.height = height;\r\n\r\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n\t\t\tvar hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0);\r\n\t\t\thGrad.addColorStop(0 / 6, '#F00');\r\n\t\t\thGrad.addColorStop(1 / 6, '#FF0');\r\n\t\t\thGrad.addColorStop(2 / 6, '#0F0');\r\n\t\t\thGrad.addColorStop(3 / 6, '#0FF');\r\n\t\t\thGrad.addColorStop(4 / 6, '#00F');\r\n\t\t\thGrad.addColorStop(5 / 6, '#F0F');\r\n\t\t\thGrad.addColorStop(6 / 6, '#F00');\r\n\r\n\t\t\tctx.fillStyle = hGrad;\r\n\t\t\tctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\r\n\t\t\tvar vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height);\r\n\t\t\tswitch (type.toLowerCase()) {\r\n\t\t\tcase 's':\r\n\t\t\t\tvGrad.addColorStop(0, 'rgba(255,255,255,0)');\r\n\t\t\t\tvGrad.addColorStop(1, 'rgba(255,255,255,1)');\r\n\t\t\t\tbreak;\r\n\t\t\tcase 'v':\r\n\t\t\t\tvGrad.addColorStop(0, 'rgba(0,0,0,0)');\r\n\t\t\t\tvGrad.addColorStop(1, 'rgba(0,0,0,1)');\r\n\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t\tctx.fillStyle = vGrad;\r\n\t\t\tctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\t\t};\r\n\r\n\t\tret.elm = canvas;\r\n\t\tret.draw = drawFunc;\r\n\r\n\t\treturn ret;\r\n\t},\r\n\r\n\r\n\tcreateSliderGradient : function () {\r\n\r\n\t\tvar ret = {\r\n\t\t\telm: null,\r\n\t\t\tdraw: null\r\n\t\t};\r\n\r\n\t\tvar canvas = jsc.createEl('canvas');\r\n\t\tvar ctx = canvas.getContext('2d');\r\n\r\n\t\tvar drawFunc = function (width, height, color1, color2) {\r\n\t\t\tcanvas.width = width;\r\n\t\t\tcanvas.height = height;\r\n\r\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n\t\t\tvar grad = ctx.createLinearGradient(0, 0, 0, canvas.height);\r\n\t\t\tgrad.addColorStop(0, color1);\r\n\t\t\tgrad.addColorStop(1, color2);\r\n\r\n\t\t\tctx.fillStyle = grad;\r\n\t\t\tctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\t\t};\r\n\r\n\t\tret.elm = canvas;\r\n\t\tret.draw = drawFunc;\r\n\r\n\t\treturn ret;\r\n\t},\r\n\r\n\r\n\tcreateASliderGradient : function () {\r\n\r\n\t\tvar ret = {\r\n\t\t\telm: null,\r\n\t\t\tdraw: null\r\n\t\t};\r\n\r\n\t\tvar canvas = jsc.createEl('canvas');\r\n\t\tvar ctx = canvas.getContext('2d');\r\n\r\n\t\tvar drawFunc = function (width, height, color) {\r\n\t\t\tcanvas.width = width;\r\n\t\t\tcanvas.height = height;\r\n\r\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n\t\t\tvar sqSize = canvas.width / 2;\r\n\t\t\tvar sqColor1 = jsc.pub.chessboardColor1;\r\n\t\t\tvar sqColor2 = jsc.pub.chessboardColor2;\r\n\r\n\t\t\t// dark gray background\r\n\t\t\tctx.fillStyle = sqColor1;\r\n\t\t\tctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\r\n\t\t\tif (sqSize > 0) { // to avoid infinite loop\r\n\t\t\t\tfor (var y = 0; y < canvas.height; y += sqSize * 2) {\r\n\t\t\t\t\t// light gray squares\r\n\t\t\t\t\tctx.fillStyle = sqColor2;\r\n\t\t\t\t\tctx.fillRect(0, y, sqSize, sqSize);\r\n\t\t\t\t\tctx.fillRect(sqSize, y + sqSize, sqSize, sqSize);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tvar grad = ctx.createLinearGradient(0, 0, 0, canvas.height);\r\n\t\t\tgrad.addColorStop(0, color);\r\n\t\t\tgrad.addColorStop(1, 'rgba(0,0,0,0)');\r\n\r\n\t\t\tctx.fillStyle = grad;\r\n\t\t\tctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\t\t};\r\n\r\n\t\tret.elm = canvas;\r\n\t\tret.draw = drawFunc;\r\n\r\n\t\treturn ret;\r\n\t},\r\n\r\n\r\n\tBoxShadow : (function () {\r\n\t\tvar BoxShadow = function (hShadow, vShadow, blur, spread, color, inset) {\r\n\t\t\tthis.hShadow = hShadow;\r\n\t\t\tthis.vShadow = vShadow;\r\n\t\t\tthis.blur = blur;\r\n\t\t\tthis.spread = spread;\r\n\t\t\tthis.color = color;\r\n\t\t\tthis.inset = !!inset;\r\n\t\t};\r\n\r\n\t\tBoxShadow.prototype.toString = function () {\r\n\t\t\tvar vals = [\r\n\t\t\t\tMath.round(this.hShadow) + 'px',\r\n\t\t\t\tMath.round(this.vShadow) + 'px',\r\n\t\t\t\tMath.round(this.blur) + 'px',\r\n\t\t\t\tMath.round(this.spread) + 'px',\r\n\t\t\t\tthis.color\r\n\t\t\t];\r\n\t\t\tif (this.inset) {\r\n\t\t\t\tvals.push('inset');\r\n\t\t\t}\r\n\t\t\treturn vals.join(' ');\r\n\t\t};\r\n\r\n\t\treturn BoxShadow;\r\n\t})(),\r\n\r\n\r\n\tflags : {\r\n\t\tleaveValue : 1 << 0,\r\n\t\tleaveAlpha : 1 << 1,\r\n\t\tleavePreview : 1 << 2,\r\n\t},\r\n\r\n\r\n\tenumOpts : {\r\n\t\tformat: ['auto', 'any', 'hex', 'hexa', 'rgb', 'rgba'],\r\n\t\tpreviewPosition: ['left', 'right'],\r\n\t\tmode: ['hsv', 'hvs', 'hs', 'hv'],\r\n\t\tposition: ['left', 'right', 'top', 'bottom'],\r\n\t\talphaChannel: ['auto', true, false],\r\n\t\tpaletteSetsAlpha: ['auto', true, false],\r\n\t},\r\n\r\n\r\n\tdeprecatedOpts : {\r\n\t\t// : ( can be null)\r\n\t\t'styleElement': 'previewElement',\r\n\t\t'onFineChange': 'onInput',\r\n\t\t'overwriteImportant': 'forceStyle',\r\n\t\t'closable': 'closeButton',\r\n\t\t'insetWidth': 'controlBorderWidth',\r\n\t\t'insetColor': 'controlBorderColor',\r\n\t\t'refine': null,\r\n\t},\r\n\r\n\r\n\tdocsRef : ' ' + 'See https://jscolor.com/docs/',\r\n\r\n\r\n\t//\r\n\t// Usage:\r\n\t// var myPicker = new JSColor( [, ])\r\n\t//\r\n\t// (constructor is accessible via both 'jscolor' and 'JSColor' name)\r\n\t//\r\n\r\n\tpub : function (targetElement, opts) {\r\n\r\n\t\tvar THIS = this;\r\n\r\n\t\tif (!opts) {\r\n\t\t\topts = {};\r\n\t\t}\r\n\r\n\t\tthis.channels = {\r\n\t\t\tr: 255, // red [0-255]\r\n\t\t\tg: 255, // green [0-255]\r\n\t\t\tb: 255, // blue [0-255]\r\n\t\t\th: 0, // hue [0-360]\r\n\t\t\ts: 0, // saturation [0-100]\r\n\t\t\tv: 100, // value (brightness) [0-100]\r\n\t\t\ta: 1.0, // alpha (opacity) [0.0 - 1.0]\r\n\t\t};\r\n\r\n\t\t// General options\r\n\t\t//\r\n\t\tthis.format = 'auto'; // 'auto' | 'any' | 'hex' | 'hexa' | 'rgb' | 'rgba' - Format of the input/output value\r\n\t\tthis.value = undefined; // INITIAL color value in any supported format. To change it later, use method fromString(), fromHSVA(), fromRGBA() or channel()\r\n\t\tthis.alpha = undefined; // INITIAL alpha value. To change it later, call method channel('A', )\r\n\t\tthis.random = false; // whether to randomize the initial color. Either true | false, or an array of ranges: [minV, maxV, minS, maxS, minH, maxH, minA, maxA]\r\n\t\tthis.onChange = undefined; // called when color changes. Value can be either a function or a string with JS code.\r\n\t\tthis.onInput = undefined; // called repeatedly as the color is being changed, e.g. while dragging a slider. Value can be either a function or a string with JS code.\r\n\t\tthis.valueElement = undefined; // element that will be used to display and input the color value\r\n\t\tthis.alphaElement = undefined; // element that will be used to display and input the alpha (opacity) value\r\n\t\tthis.previewElement = undefined; // element that will preview the picked color using CSS background\r\n\t\tthis.previewPosition = 'left'; // 'left' | 'right' - position of the color preview in previewElement\r\n\t\tthis.previewSize = 32; // (px) width of the color preview displayed in previewElement\r\n\t\tthis.previewPadding = 8; // (px) space between color preview and content of the previewElement\r\n\t\tthis.required = true; // whether the associated text input must always contain a color value. If false, the input can be left empty.\r\n\t\tthis.hash = true; // whether to prefix the HEX color code with # symbol (only applicable for HEX format)\r\n\t\tthis.uppercase = true; // whether to show the HEX color code in upper case (only applicable for HEX format)\r\n\t\tthis.forceStyle = true; // whether to overwrite CSS style of the previewElement using !important flag\r\n\r\n\t\t// Color Picker options\r\n\t\t//\r\n\t\tthis.width = 181; // width of the color spectrum (in px)\r\n\t\tthis.height = 101; // height of the color spectrum (in px)\r\n\t\tthis.mode = 'HSV'; // 'HSV' | 'HVS' | 'HS' | 'HV' - layout of the color picker controls\r\n\t\tthis.alphaChannel = 'auto'; // 'auto' | true | false - if alpha channel is enabled, the alpha slider will be visible. If 'auto', it will be determined according to color format\r\n\t\tthis.position = 'bottom'; // 'left' | 'right' | 'top' | 'bottom' - position relative to the target element\r\n\t\tthis.smartPosition = true; // automatically change picker position when there is not enough space for it\r\n\t\tthis.showOnClick = true; // whether to show the picker when user clicks its target element\r\n\t\tthis.hideOnLeave = true; // whether to automatically hide the picker when user leaves its target element (e.g. upon clicking the document)\r\n\t\tthis.palette = []; // colors to be displayed in the palette, specified as an array or a string of space separated color values (in any supported format)\r\n\t\tthis.paletteCols = 10; // number of columns in the palette\r\n\t\tthis.paletteSetsAlpha = 'auto'; // 'auto' | true | false - if true, palette colors that don't specify alpha will set alpha to 1.0\r\n\t\tthis.paletteHeight = 16; // maximum height (px) of a row in the palette\r\n\t\tthis.paletteSpacing = 4; // distance (px) between color samples in the palette\r\n\t\tthis.hideOnPaletteClick = false; // when set to true, clicking the palette will also hide the color picker\r\n\t\tthis.sliderSize = 16; // px\r\n\t\tthis.crossSize = 8; // px\r\n\t\tthis.closeButton = false; // whether to display the Close button\r\n\t\tthis.closeText = 'Close';\r\n\t\tthis.buttonColor = 'rgba(0,0,0,1)'; // CSS color\r\n\t\tthis.buttonHeight = 18; // px\r\n\t\tthis.padding = 12; // px\r\n\t\tthis.backgroundColor = 'rgba(255,255,255,1)'; // CSS color\r\n\t\tthis.borderWidth = 1; // px\r\n\t\tthis.borderColor = 'rgba(187,187,187,1)'; // CSS color\r\n\t\tthis.borderRadius = 8; // px\r\n\t\tthis.controlBorderWidth = 1; // px\r\n\t\tthis.controlBorderColor = 'rgba(187,187,187,1)'; // CSS color\r\n\t\tthis.shadow = true; // whether to display a shadow\r\n\t\tthis.shadowBlur = 15; // px\r\n\t\tthis.shadowColor = 'rgba(0,0,0,0.2)'; // CSS color\r\n\t\tthis.pointerColor = 'rgba(76,76,76,1)'; // CSS color\r\n\t\tthis.pointerBorderWidth = 1; // px\r\n\t\tthis.pointerBorderColor = 'rgba(255,255,255,1)'; // CSS color\r\n\t\tthis.pointerThickness = 2; // px\r\n\t\tthis.zIndex = 5000;\r\n\t\tthis.container = undefined; // where to append the color picker (BODY element by default)\r\n\r\n\t\t// Experimental\r\n\t\t//\r\n\t\tthis.minS = 0; // min allowed saturation (0 - 100)\r\n\t\tthis.maxS = 100; // max allowed saturation (0 - 100)\r\n\t\tthis.minV = 0; // min allowed value (brightness) (0 - 100)\r\n\t\tthis.maxV = 100; // max allowed value (brightness) (0 - 100)\r\n\t\tthis.minA = 0.0; // min allowed alpha (opacity) (0.0 - 1.0)\r\n\t\tthis.maxA = 1.0; // max allowed alpha (opacity) (0.0 - 1.0)\r\n\r\n\r\n\t\t// Getter: option(name)\r\n\t\t// Setter: option(name, value)\r\n\t\t// option({name:value, ...})\r\n\t\t//\r\n\t\tthis.option = function () {\r\n\t\t\tif (!arguments.length) {\r\n\t\t\t\tthrow new Error('No option specified');\r\n\t\t\t}\r\n\r\n\t\t\tif (arguments.length === 1 && typeof arguments[0] === 'string') {\r\n\t\t\t\t// getting a single option\r\n\t\t\t\ttry {\r\n\t\t\t\t\treturn getOption(arguments[0]);\r\n\t\t\t\t} catch (e) {\r\n\t\t\t\t\tconsole.warn(e);\r\n\t\t\t\t}\r\n\t\t\t\treturn false;\r\n\r\n\t\t\t} else if (arguments.length >= 2 && typeof arguments[0] === 'string') {\r\n\t\t\t\t// setting a single option\r\n\t\t\t\ttry {\r\n\t\t\t\t\tif (!setOption(arguments[0], arguments[1])) {\r\n\t\t\t\t\t\treturn false;\r\n\t\t\t\t\t}\r\n\t\t\t\t} catch (e) {\r\n\t\t\t\t\tconsole.warn(e);\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\t\t\t\tthis.redraw(); // immediately redraws the picker, if it's displayed\r\n\t\t\t\tthis.exposeColor(); // in case some preview-related or format-related option was changed\r\n\t\t\t\treturn true;\r\n\r\n\t\t\t} else if (arguments.length === 1 && typeof arguments[0] === 'object') {\r\n\t\t\t\t// setting multiple options\r\n\t\t\t\tvar opts = arguments[0];\r\n\t\t\t\tvar success = true;\r\n\t\t\t\tfor (var opt in opts) {\r\n\t\t\t\t\tif (opts.hasOwnProperty(opt)) {\r\n\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\tif (!setOption(opt, opts[opt])) {\r\n\t\t\t\t\t\t\t\tsuccess = false;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\t\tconsole.warn(e);\r\n\t\t\t\t\t\t\tsuccess = false;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tthis.redraw(); // immediately redraws the picker, if it's displayed\r\n\t\t\t\tthis.exposeColor(); // in case some preview-related or format-related option was changed\r\n\t\t\t\treturn success;\r\n\t\t\t}\r\n\r\n\t\t\tthrow new Error('Invalid arguments');\r\n\t\t}\r\n\r\n\r\n\t\t// Getter: channel(name)\r\n\t\t// Setter: channel(name, value)\r\n\t\t//\r\n\t\tthis.channel = function (name, value) {\r\n\t\t\tif (typeof name !== 'string') {\r\n\t\t\t\tthrow new Error('Invalid value for channel name: ' + name);\r\n\t\t\t}\r\n\r\n\t\t\tif (value === undefined) {\r\n\t\t\t\t// getting channel value\r\n\t\t\t\tif (!this.channels.hasOwnProperty(name.toLowerCase())) {\r\n\t\t\t\t\tconsole.warn('Getting unknown channel: ' + name);\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\t\t\t\treturn this.channels[name.toLowerCase()];\r\n\r\n\t\t\t} else {\r\n\t\t\t\t// setting channel value\r\n\t\t\t\tvar res = false;\r\n\t\t\t\tswitch (name.toLowerCase()) {\r\n\t\t\t\t\tcase 'r': res = this.fromRGBA(value, null, null, null); break;\r\n\t\t\t\t\tcase 'g': res = this.fromRGBA(null, value, null, null); break;\r\n\t\t\t\t\tcase 'b': res = this.fromRGBA(null, null, value, null); break;\r\n\t\t\t\t\tcase 'h': res = this.fromHSVA(value, null, null, null); break;\r\n\t\t\t\t\tcase 's': res = this.fromHSVA(null, value, null, null); break;\r\n\t\t\t\t\tcase 'v': res = this.fromHSVA(null, null, value, null); break;\r\n\t\t\t\t\tcase 'a': res = this.fromHSVA(null, null, null, value); break;\r\n\t\t\t\t\tdefault:\r\n\t\t\t\t\t\tconsole.warn('Setting unknown channel: ' + name);\r\n\t\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\t\t\t\tif (res) {\r\n\t\t\t\t\tthis.redraw(); // immediately redraws the picker, if it's displayed\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\r\n\t\t// Triggers given input event(s) by:\r\n\t\t// - executing on callback specified as picker's option\r\n\t\t// - triggering standard DOM event listeners attached to the value element\r\n\t\t//\r\n\t\t// It is possible to specify multiple events separated with a space.\r\n\t\t//\r\n\t\tthis.trigger = function (eventNames) {\r\n\t\t\tvar evs = jsc.strList(eventNames);\r\n\t\t\tfor (var i = 0; i < evs.length; i += 1) {\r\n\t\t\t\tvar ev = evs[i].toLowerCase();\r\n\r\n\t\t\t\t// trigger a callback\r\n\t\t\t\tvar callbackProp = null;\r\n\t\t\t\tswitch (ev) {\r\n\t\t\t\t\tcase 'input': callbackProp = 'onInput'; break;\r\n\t\t\t\t\tcase 'change': callbackProp = 'onChange'; break;\r\n\t\t\t\t}\r\n\t\t\t\tif (callbackProp) {\r\n\t\t\t\t\tjsc.triggerCallback(this, callbackProp);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// trigger standard DOM event listeners on the value element\r\n\t\t\t\tjsc.triggerInputEvent(this.valueElement, ev, true, true);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\t// h: 0-360\r\n\t\t// s: 0-100\r\n\t\t// v: 0-100\r\n\t\t// a: 0.0-1.0\r\n\t\t//\r\n\t\tthis.fromHSVA = function (h, s, v, a, flags) { // null = don't change\r\n\t\t\tif (h === undefined) { h = null; }\r\n\t\t\tif (s === undefined) { s = null; }\r\n\t\t\tif (v === undefined) { v = null; }\r\n\t\t\tif (a === undefined) { a = null; }\r\n\r\n\t\t\tif (h !== null) {\r\n\t\t\t\tif (isNaN(h)) { return false; }\r\n\t\t\t\tthis.channels.h = Math.max(0, Math.min(360, h));\r\n\t\t\t}\r\n\t\t\tif (s !== null) {\r\n\t\t\t\tif (isNaN(s)) { return false; }\r\n\t\t\t\tthis.channels.s = Math.max(0, Math.min(100, this.maxS, s), this.minS);\r\n\t\t\t}\r\n\t\t\tif (v !== null) {\r\n\t\t\t\tif (isNaN(v)) { return false; }\r\n\t\t\t\tthis.channels.v = Math.max(0, Math.min(100, this.maxV, v), this.minV);\r\n\t\t\t}\r\n\t\t\tif (a !== null) {\r\n\t\t\t\tif (isNaN(a)) { return false; }\r\n\t\t\t\tthis.channels.a = this.hasAlphaChannel() ?\r\n\t\t\t\t\tMath.max(0, Math.min(1, this.maxA, a), this.minA) :\r\n\t\t\t\t\t1.0; // if alpha channel is disabled, the color should stay 100% opaque\r\n\t\t\t}\r\n\r\n\t\t\tvar rgb = jsc.HSV_RGB(\r\n\t\t\t\tthis.channels.h,\r\n\t\t\t\tthis.channels.s,\r\n\t\t\t\tthis.channels.v\r\n\t\t\t);\r\n\t\t\tthis.channels.r = rgb[0];\r\n\t\t\tthis.channels.g = rgb[1];\r\n\t\t\tthis.channels.b = rgb[2];\r\n\r\n\t\t\tthis.exposeColor(flags);\r\n\t\t\treturn true;\r\n\t\t};\r\n\r\n\r\n\t\t// r: 0-255\r\n\t\t// g: 0-255\r\n\t\t// b: 0-255\r\n\t\t// a: 0.0-1.0\r\n\t\t//\r\n\t\tthis.fromRGBA = function (r, g, b, a, flags) { // null = don't change\r\n\t\t\tif (r === undefined) { r = null; }\r\n\t\t\tif (g === undefined) { g = null; }\r\n\t\t\tif (b === undefined) { b = null; }\r\n\t\t\tif (a === undefined) { a = null; }\r\n\r\n\t\t\tif (r !== null) {\r\n\t\t\t\tif (isNaN(r)) { return false; }\r\n\t\t\t\tr = Math.max(0, Math.min(255, r));\r\n\t\t\t}\r\n\t\t\tif (g !== null) {\r\n\t\t\t\tif (isNaN(g)) { return false; }\r\n\t\t\t\tg = Math.max(0, Math.min(255, g));\r\n\t\t\t}\r\n\t\t\tif (b !== null) {\r\n\t\t\t\tif (isNaN(b)) { return false; }\r\n\t\t\t\tb = Math.max(0, Math.min(255, b));\r\n\t\t\t}\r\n\t\t\tif (a !== null) {\r\n\t\t\t\tif (isNaN(a)) { return false; }\r\n\t\t\t\tthis.channels.a = this.hasAlphaChannel() ?\r\n\t\t\t\t\tMath.max(0, Math.min(1, this.maxA, a), this.minA) :\r\n\t\t\t\t\t1.0; // if alpha channel is disabled, the color should stay 100% opaque\r\n\t\t\t}\r\n\r\n\t\t\tvar hsv = jsc.RGB_HSV(\r\n\t\t\t\tr===null ? this.channels.r : r,\r\n\t\t\t\tg===null ? this.channels.g : g,\r\n\t\t\t\tb===null ? this.channels.b : b\r\n\t\t\t);\r\n\t\t\tif (hsv[0] !== null) {\r\n\t\t\t\tthis.channels.h = Math.max(0, Math.min(360, hsv[0]));\r\n\t\t\t}\r\n\t\t\tif (hsv[2] !== 0) { // fully black color stays black through entire saturation range, so let's not change saturation\r\n\t\t\t\tthis.channels.s = Math.max(0, this.minS, Math.min(100, this.maxS, hsv[1]));\r\n\t\t\t}\r\n\t\t\tthis.channels.v = Math.max(0, this.minV, Math.min(100, this.maxV, hsv[2]));\r\n\r\n\t\t\t// update RGB according to final HSV, as some values might be trimmed\r\n\t\t\tvar rgb = jsc.HSV_RGB(this.channels.h, this.channels.s, this.channels.v);\r\n\t\t\tthis.channels.r = rgb[0];\r\n\t\t\tthis.channels.g = rgb[1];\r\n\t\t\tthis.channels.b = rgb[2];\r\n\r\n\t\t\tthis.exposeColor(flags);\r\n\t\t\treturn true;\r\n\t\t};\r\n\r\n\r\n\t\t// DEPRECATED. Use .fromHSVA() instead\r\n\t\t//\r\n\t\tthis.fromHSV = function (h, s, v, flags) {\r\n\t\t\tconsole.warn('fromHSV() method is DEPRECATED. Using fromHSVA() instead.' + jsc.docsRef);\r\n\t\t\treturn this.fromHSVA(h, s, v, null, flags);\r\n\t\t};\r\n\r\n\r\n\t\t// DEPRECATED. Use .fromRGBA() instead\r\n\t\t//\r\n\t\tthis.fromRGB = function (r, g, b, flags) {\r\n\t\t\tconsole.warn('fromRGB() method is DEPRECATED. Using fromRGBA() instead.' + jsc.docsRef);\r\n\t\t\treturn this.fromRGBA(r, g, b, null, flags);\r\n\t\t};\r\n\r\n\r\n\t\tthis.fromString = function (str, flags) {\r\n\t\t\tif (!this.required && str.trim() === '') {\r\n\t\t\t\t// setting empty string to an optional color input\r\n\t\t\t\tthis.setPreviewElementBg(null);\r\n\t\t\t\tthis.setValueElementValue('');\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\r\n\t\t\tvar color = jsc.parseColorString(str);\r\n\t\t\tif (!color) {\r\n\t\t\t\treturn false; // could not parse\r\n\t\t\t}\r\n\t\t\tif (this.format.toLowerCase() === 'any') {\r\n\t\t\t\tthis._setFormat(color.format); // adapt format\r\n\t\t\t\tif (!jsc.isAlphaFormat(this.getFormat())) {\r\n\t\t\t\t\tcolor.rgba[3] = 1.0; // when switching to a format that doesn't support alpha, set full opacity\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tthis.fromRGBA(\r\n\t\t\t\tcolor.rgba[0],\r\n\t\t\t\tcolor.rgba[1],\r\n\t\t\t\tcolor.rgba[2],\r\n\t\t\t\tcolor.rgba[3],\r\n\t\t\t\tflags\r\n\t\t\t);\r\n\t\t\treturn true;\r\n\t\t};\r\n\r\n\r\n\t\tthis.randomize = function (minV, maxV, minS, maxS, minH, maxH, minA, maxA) {\r\n\t\t\tif (minV === undefined) { minV = 0; }\r\n\t\t\tif (maxV === undefined) { maxV = 100; }\r\n\t\t\tif (minS === undefined) { minS = 0; }\r\n\t\t\tif (maxS === undefined) { maxS = 100; }\r\n\t\t\tif (minH === undefined) { minH = 0; }\r\n\t\t\tif (maxH === undefined) { maxH = 359; }\r\n\t\t\tif (minA === undefined) { minA = 1; }\r\n\t\t\tif (maxA === undefined) { maxA = 1; }\r\n\r\n\t\t\tthis.fromHSVA(\r\n\t\t\t\tminH + Math.floor(Math.random() * (maxH - minH + 1)),\r\n\t\t\t\tminS + Math.floor(Math.random() * (maxS - minS + 1)),\r\n\t\t\t\tminV + Math.floor(Math.random() * (maxV - minV + 1)),\r\n\t\t\t\t((100 * minA) + Math.floor(Math.random() * (100 * (maxA - minA) + 1))) / 100\r\n\t\t\t);\r\n\t\t};\r\n\r\n\r\n\t\tthis.toString = function (format) {\r\n\t\t\tif (format === undefined) {\r\n\t\t\t\tformat = this.getFormat(); // format not specified -> use the current format\r\n\t\t\t}\r\n\t\t\tswitch (format.toLowerCase()) {\r\n\t\t\t\tcase 'hex': return this.toHEXString(); break;\r\n\t\t\t\tcase 'hexa': return this.toHEXAString(); break;\r\n\t\t\t\tcase 'rgb': return this.toRGBString(); break;\r\n\t\t\t\tcase 'rgba': return this.toRGBAString(); break;\r\n\t\t\t}\r\n\t\t\treturn false;\r\n\t\t};\r\n\r\n\r\n\t\tthis.toHEXString = function () {\r\n\t\t\treturn jsc.hexColor(\r\n\t\t\t\tthis.channels.r,\r\n\t\t\t\tthis.channels.g,\r\n\t\t\t\tthis.channels.b\r\n\t\t\t);\r\n\t\t};\r\n\r\n\r\n\t\tthis.toHEXAString = function () {\r\n\t\t\treturn jsc.hexaColor(\r\n\t\t\t\tthis.channels.r,\r\n\t\t\t\tthis.channels.g,\r\n\t\t\t\tthis.channels.b,\r\n\t\t\t\tthis.channels.a\r\n\t\t\t);\r\n\t\t};\r\n\r\n\r\n\t\tthis.toRGBString = function () {\r\n\t\t\treturn jsc.rgbColor(\r\n\t\t\t\tthis.channels.r,\r\n\t\t\t\tthis.channels.g,\r\n\t\t\t\tthis.channels.b\r\n\t\t\t);\r\n\t\t};\r\n\r\n\r\n\t\tthis.toRGBAString = function () {\r\n\t\t\treturn jsc.rgbaColor(\r\n\t\t\t\tthis.channels.r,\r\n\t\t\t\tthis.channels.g,\r\n\t\t\t\tthis.channels.b,\r\n\t\t\t\tthis.channels.a\r\n\t\t\t);\r\n\t\t};\r\n\r\n\r\n\t\tthis.toGrayscale = function () {\r\n\t\t\treturn (\r\n\t\t\t\t0.213 * this.channels.r +\r\n\t\t\t\t0.715 * this.channels.g +\r\n\t\t\t\t0.072 * this.channels.b\r\n\t\t\t);\r\n\t\t};\r\n\r\n\r\n\t\tthis.toCanvas = function () {\r\n\t\t\treturn jsc.genColorPreviewCanvas(this.toRGBAString()).canvas;\r\n\t\t};\r\n\r\n\r\n\t\tthis.toDataURL = function () {\r\n\t\t\treturn this.toCanvas().toDataURL();\r\n\t\t};\r\n\r\n\r\n\t\tthis.toBackground = function () {\r\n\t\t\treturn jsc.pub.background(this.toRGBAString());\r\n\t\t};\r\n\r\n\r\n\t\tthis.isLight = function () {\r\n\t\t\treturn this.toGrayscale() > 255 / 2;\r\n\t\t};\r\n\r\n\r\n\t\tthis.hide = function () {\r\n\t\t\tif (isPickerOwner()) {\r\n\t\t\t\tdetachPicker();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tthis.show = function () {\r\n\t\t\tdrawPicker();\r\n\t\t};\r\n\r\n\r\n\t\tthis.redraw = function () {\r\n\t\t\tif (isPickerOwner()) {\r\n\t\t\t\tdrawPicker();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tthis.getFormat = function () {\r\n\t\t\treturn this._currentFormat;\r\n\t\t};\r\n\r\n\r\n\t\tthis._setFormat = function (format) {\r\n\t\t\tthis._currentFormat = format.toLowerCase();\r\n\t\t};\r\n\r\n\r\n\t\tthis.hasAlphaChannel = function () {\r\n\t\t\tif (this.alphaChannel === 'auto') {\r\n\t\t\t\treturn (\r\n\t\t\t\t\tthis.format.toLowerCase() === 'any' || // format can change on the fly (e.g. from hex to rgba), so let's consider the alpha channel enabled\r\n\t\t\t\t\tjsc.isAlphaFormat(this.getFormat()) || // the current format supports alpha channel\r\n\t\t\t\t\tthis.alpha !== undefined || // initial alpha value is set, so we're working with alpha channel\r\n\t\t\t\t\tthis.alphaElement !== undefined // the alpha value is redirected, so we're working with alpha channel\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\treturn this.alphaChannel; // the alpha channel is explicitly set\r\n\t\t};\r\n\r\n\r\n\t\tthis.processValueInput = function (str) {\r\n\t\t\tif (!this.fromString(str)) {\r\n\t\t\t\t// could not parse the color value - let's just expose the current color\r\n\t\t\t\tthis.exposeColor();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tthis.processAlphaInput = function (str) {\r\n\t\t\tif (!this.fromHSVA(null, null, null, parseFloat(str))) {\r\n\t\t\t\t// could not parse the alpha value - let's just expose the current color\r\n\t\t\t\tthis.exposeColor();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tthis.exposeColor = function (flags) {\r\n\t\t\tvar colorStr = this.toString();\r\n\t\t\tvar fmt = this.getFormat();\r\n\r\n\t\t\t// reflect current color in data- attribute\r\n\t\t\tjsc.setDataAttr(this.targetElement, 'current-color', colorStr);\r\n\r\n\t\t\tif (!(flags & jsc.flags.leaveValue) && this.valueElement) {\r\n\t\t\t\tif (fmt === 'hex' || fmt === 'hexa') {\r\n\t\t\t\t\tif (!this.uppercase) { colorStr = colorStr.toLowerCase(); }\r\n\t\t\t\t\tif (!this.hash) { colorStr = colorStr.replace(/^#/, ''); }\r\n\t\t\t\t}\r\n\t\t\t\tthis.setValueElementValue(colorStr);\r\n\t\t\t}\r\n\r\n\t\t\tif (!(flags & jsc.flags.leaveAlpha) && this.alphaElement) {\r\n\t\t\t\tvar alphaVal = Math.round(this.channels.a * 100) / 100;\r\n\t\t\t\tthis.setAlphaElementValue(alphaVal);\r\n\t\t\t}\r\n\r\n\t\t\tif (!(flags & jsc.flags.leavePreview) && this.previewElement) {\r\n\t\t\t\tvar previewPos = null; // 'left' | 'right' (null -> fill the entire element)\r\n\r\n\t\t\t\tif (\r\n\t\t\t\t\tjsc.isTextInput(this.previewElement) || // text input\r\n\t\t\t\t\t(jsc.isButton(this.previewElement) && !jsc.isButtonEmpty(this.previewElement)) // button with text\r\n\t\t\t\t) {\r\n\t\t\t\t\tpreviewPos = this.previewPosition;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tthis.setPreviewElementBg(this.toRGBAString());\r\n\t\t\t}\r\n\r\n\t\t\tif (isPickerOwner()) {\r\n\t\t\t\tredrawPad();\r\n\t\t\t\tredrawSld();\r\n\t\t\t\tredrawASld();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tthis.setPreviewElementBg = function (color) {\r\n\t\t\tif (!this.previewElement) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tvar position = null; // color preview position: null | 'left' | 'right'\r\n\t\t\tvar width = null; // color preview width: px | null = fill the entire element\r\n\t\t\tif (\r\n\t\t\t\tjsc.isTextInput(this.previewElement) || // text input\r\n\t\t\t\t(jsc.isButton(this.previewElement) && !jsc.isButtonEmpty(this.previewElement)) // button with text\r\n\t\t\t) {\r\n\t\t\t\tposition = this.previewPosition;\r\n\t\t\t\twidth = this.previewSize;\r\n\t\t\t}\r\n\r\n\t\t\tvar backgrounds = [];\r\n\r\n\t\t\tif (!color) {\r\n\t\t\t\t// there is no color preview to display -> let's remove any previous background image\r\n\t\t\t\tbackgrounds.push({\r\n\t\t\t\t\timage: 'none',\r\n\t\t\t\t\tposition: 'left top',\r\n\t\t\t\t\tsize: 'auto',\r\n\t\t\t\t\trepeat: 'no-repeat',\r\n\t\t\t\t\torigin: 'padding-box',\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\t// CSS gradient for background color preview\r\n\t\t\t\tbackgrounds.push({\r\n\t\t\t\t\timage: jsc.genColorPreviewGradient(\r\n\t\t\t\t\t\tcolor,\r\n\t\t\t\t\t\tposition,\r\n\t\t\t\t\t\twidth ? width - jsc.pub.previewSeparator.length : null\r\n\t\t\t\t\t),\r\n\t\t\t\t\tposition: 'left top',\r\n\t\t\t\t\tsize: 'auto',\r\n\t\t\t\t\trepeat: position ? 'repeat-y' : 'repeat',\r\n\t\t\t\t\torigin: 'padding-box',\r\n\t\t\t\t});\r\n\r\n\t\t\t\t// data URL of generated PNG image with a gray transparency chessboard\r\n\t\t\t\tvar preview = jsc.genColorPreviewCanvas(\r\n\t\t\t\t\t'rgba(0,0,0,0)',\r\n\t\t\t\t\tposition ? {'left':'right', 'right':'left'}[position] : null,\r\n\t\t\t\t\twidth,\r\n\t\t\t\t\ttrue\r\n\t\t\t\t);\r\n\t\t\t\tbackgrounds.push({\r\n\t\t\t\t\timage: 'url(\\'' + preview.canvas.toDataURL() + '\\')',\r\n\t\t\t\t\tposition: (position || 'left') + ' top',\r\n\t\t\t\t\tsize: preview.width + 'px ' + preview.height + 'px',\r\n\t\t\t\t\trepeat: position ? 'repeat-y' : 'repeat',\r\n\t\t\t\t\torigin: 'padding-box',\r\n\t\t\t\t});\r\n\t\t\t}\r\n\r\n\t\t\tvar bg = {\r\n\t\t\t\timage: [],\r\n\t\t\t\tposition: [],\r\n\t\t\t\tsize: [],\r\n\t\t\t\trepeat: [],\r\n\t\t\t\torigin: [],\r\n\t\t\t};\r\n\t\t\tfor (var i = 0; i < backgrounds.length; i += 1) {\r\n\t\t\t\tbg.image.push(backgrounds[i].image);\r\n\t\t\t\tbg.position.push(backgrounds[i].position);\r\n\t\t\t\tbg.size.push(backgrounds[i].size);\r\n\t\t\t\tbg.repeat.push(backgrounds[i].repeat);\r\n\t\t\t\tbg.origin.push(backgrounds[i].origin);\r\n\t\t\t}\r\n\r\n\t\t\t// set previewElement's background-images\r\n\t\t\tvar sty = {\r\n\t\t\t\t'background-image': bg.image.join(', '),\r\n\t\t\t\t'background-position': bg.position.join(', '),\r\n\t\t\t\t'background-size': bg.size.join(', '),\r\n\t\t\t\t'background-repeat': bg.repeat.join(', '),\r\n\t\t\t\t'background-origin': bg.origin.join(', '),\r\n\t\t\t};\r\n\t\t\tjsc.setStyle(this.previewElement, sty, this.forceStyle);\r\n\r\n\r\n\t\t\t// set/restore previewElement's padding\r\n\t\t\tvar padding = {\r\n\t\t\t\tleft: null,\r\n\t\t\t\tright: null,\r\n\t\t\t};\r\n\t\t\tif (position) {\r\n\t\t\t\tpadding[position] = (this.previewSize + this.previewPadding) + 'px';\r\n\t\t\t}\r\n\r\n\t\t\tvar sty = {\r\n\t\t\t\t'padding-left': padding.left,\r\n\t\t\t\t'padding-right': padding.right,\r\n\t\t\t};\r\n\t\t\tjsc.setStyle(this.previewElement, sty, this.forceStyle, true);\r\n\t\t};\r\n\r\n\r\n\t\tthis.setValueElementValue = function (str) {\r\n\t\t\tif (this.valueElement) {\r\n\t\t\t\tif (jsc.nodeName(this.valueElement) === 'input') {\r\n\t\t\t\t\tthis.valueElement.value = str;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.valueElement.innerHTML = str;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tthis.setAlphaElementValue = function (str) {\r\n\t\t\tif (this.alphaElement) {\r\n\t\t\t\tif (jsc.nodeName(this.alphaElement) === 'input') {\r\n\t\t\t\t\tthis.alphaElement.value = str;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.alphaElement.innerHTML = str;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tthis._processParentElementsInDOM = function () {\r\n\t\t\tif (this._parentElementsProcessed) { return; }\r\n\t\t\tthis._parentElementsProcessed = true;\r\n\r\n\t\t\tvar elm = this.targetElement;\r\n\t\t\tdo {\r\n\t\t\t\t// If the target element or one of its parent nodes has fixed position,\r\n\t\t\t\t// then use fixed positioning instead\r\n\t\t\t\tvar compStyle = jsc.getCompStyle(elm);\r\n\t\t\t\tif (compStyle.position && compStyle.position.toLowerCase() === 'fixed') {\r\n\t\t\t\t\tthis.fixed = true;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (elm !== this.targetElement) {\r\n\t\t\t\t\t// Ensure to attach onParentScroll only once to each parent element\r\n\t\t\t\t\t// (multiple targetElements can share the same parent nodes)\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// Note: It's not just offsetParents that can be scrollable,\r\n\t\t\t\t\t// that's why we loop through all parent nodes\r\n\t\t\t\t\tif (!jsc.getData(elm, 'hasScrollListener')) {\r\n\t\t\t\t\t\telm.addEventListener('scroll', jsc.onParentScroll, false);\r\n\t\t\t\t\t\tjsc.setData(elm, 'hasScrollListener', true);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t} while ((elm = elm.parentNode) && jsc.nodeName(elm) !== 'body');\r\n\t\t};\r\n\r\n\r\n\t\tthis.tryHide = function () {\r\n\t\t\tif (this.hideOnLeave) {\r\n\t\t\t\tthis.hide();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tthis.set__palette = function (val) {\r\n\t\t\tthis.palette = val;\r\n\t\t\tthis._palette = jsc.parsePaletteValue(val);\r\n\t\t\tthis._paletteHasTransparency = jsc.containsTranparentColor(this._palette);\r\n\t\t};\r\n\r\n\r\n\t\tfunction setOption (option, value) {\r\n\t\t\tif (typeof option !== 'string') {\r\n\t\t\t\tthrow new Error('Invalid value for option name: ' + option);\r\n\t\t\t}\r\n\r\n\t\t\t// enum option\r\n\t\t\tif (jsc.enumOpts.hasOwnProperty(option)) {\r\n\t\t\t\tif (typeof value === 'string') { // enum string values are case insensitive\r\n\t\t\t\t\tvalue = value.toLowerCase();\r\n\t\t\t\t}\r\n\t\t\t\tif (jsc.enumOpts[option].indexOf(value) === -1) {\r\n\t\t\t\t\tthrow new Error('Option \\'' + option + '\\' has invalid value: ' + value);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t// deprecated option\r\n\t\t\tif (jsc.deprecatedOpts.hasOwnProperty(option)) {\r\n\t\t\t\tvar oldOpt = option;\r\n\t\t\t\tvar newOpt = jsc.deprecatedOpts[option];\r\n\t\t\t\tif (newOpt) {\r\n\t\t\t\t\t// if we have a new name for this option, let's log a warning and use the new name\r\n\t\t\t\t\tconsole.warn('Option \\'%s\\' is DEPRECATED, using \\'%s\\' instead.' + jsc.docsRef, oldOpt, newOpt);\r\n\t\t\t\t\toption = newOpt;\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// new name not available for the option\r\n\t\t\t\t\tthrow new Error('Option \\'' + option + '\\' is DEPRECATED');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tvar setter = 'set__' + option;\r\n\r\n\t\t\tif (typeof THIS[setter] === 'function') { // a setter exists for this option\r\n\t\t\t\tTHIS[setter](value);\r\n\t\t\t\treturn true;\r\n\r\n\t\t\t} else if (option in THIS) { // option exists as a property\r\n\t\t\t\tTHIS[option] = value;\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\r\n\t\t\tthrow new Error('Unrecognized configuration option: ' + option);\r\n\t\t}\r\n\r\n\r\n\t\tfunction getOption (option) {\r\n\t\t\tif (typeof option !== 'string') {\r\n\t\t\t\tthrow new Error('Invalid value for option name: ' + option);\r\n\t\t\t}\r\n\r\n\t\t\t// deprecated option\r\n\t\t\tif (jsc.deprecatedOpts.hasOwnProperty(option)) {\r\n\t\t\t\tvar oldOpt = option;\r\n\t\t\t\tvar newOpt = jsc.deprecatedOpts[option];\r\n\t\t\t\tif (newOpt) {\r\n\t\t\t\t\t// if we have a new name for this option, let's log a warning and use the new name\r\n\t\t\t\t\tconsole.warn('Option \\'%s\\' is DEPRECATED, using \\'%s\\' instead.' + jsc.docsRef, oldOpt, newOpt);\r\n\t\t\t\t\toption = newOpt;\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// new name not available for the option\r\n\t\t\t\t\tthrow new Error('Option \\'' + option + '\\' is DEPRECATED');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tvar getter = 'get__' + option;\r\n\r\n\t\t\tif (typeof THIS[getter] === 'function') { // a getter exists for this option\r\n\t\t\t\treturn THIS[getter](value);\r\n\r\n\t\t\t} else if (option in THIS) { // option exists as a property\r\n\t\t\t\treturn THIS[option];\r\n\t\t\t}\r\n\r\n\t\t\tthrow new Error('Unrecognized configuration option: ' + option);\r\n\t\t}\r\n\r\n\r\n\t\tfunction detachPicker () {\r\n\t\t\tjsc.removeClass(THIS.targetElement, jsc.pub.activeClassName);\r\n\t\t\tjsc.picker.wrap.parentNode.removeChild(jsc.picker.wrap);\r\n\t\t\tdelete jsc.picker.owner;\r\n\t\t}\r\n\r\n\r\n\t\tfunction drawPicker () {\r\n\r\n\t\t\t// At this point, when drawing the picker, we know what the parent elements are\r\n\t\t\t// and we can do all related DOM operations, such as registering events on them\r\n\t\t\t// or checking their positioning\r\n\t\t\tTHIS._processParentElementsInDOM();\r\n\r\n\t\t\tif (!jsc.picker) {\r\n\t\t\t\tjsc.picker = {\r\n\t\t\t\t\towner: null, // owner picker instance\r\n\t\t\t\t\twrap : jsc.createEl('div'),\r\n\t\t\t\t\tbox : jsc.createEl('div'),\r\n\t\t\t\t\tboxS : jsc.createEl('div'), // shadow area\r\n\t\t\t\t\tboxB : jsc.createEl('div'), // border\r\n\t\t\t\t\tpad : jsc.createEl('div'),\r\n\t\t\t\t\tpadB : jsc.createEl('div'), // border\r\n\t\t\t\t\tpadM : jsc.createEl('div'), // mouse/touch area\r\n\t\t\t\t\tpadCanvas : jsc.createPadCanvas(),\r\n\t\t\t\t\tcross : jsc.createEl('div'),\r\n\t\t\t\t\tcrossBY : jsc.createEl('div'), // border Y\r\n\t\t\t\t\tcrossBX : jsc.createEl('div'), // border X\r\n\t\t\t\t\tcrossLY : jsc.createEl('div'), // line Y\r\n\t\t\t\t\tcrossLX : jsc.createEl('div'), // line X\r\n\t\t\t\t\tsld : jsc.createEl('div'), // slider\r\n\t\t\t\t\tsldB : jsc.createEl('div'), // border\r\n\t\t\t\t\tsldM : jsc.createEl('div'), // mouse/touch area\r\n\t\t\t\t\tsldGrad : jsc.createSliderGradient(),\r\n\t\t\t\t\tsldPtrS : jsc.createEl('div'), // slider pointer spacer\r\n\t\t\t\t\tsldPtrIB : jsc.createEl('div'), // slider pointer inner border\r\n\t\t\t\t\tsldPtrMB : jsc.createEl('div'), // slider pointer middle border\r\n\t\t\t\t\tsldPtrOB : jsc.createEl('div'), // slider pointer outer border\r\n\t\t\t\t\tasld : jsc.createEl('div'), // alpha slider\r\n\t\t\t\t\tasldB : jsc.createEl('div'), // border\r\n\t\t\t\t\tasldM : jsc.createEl('div'), // mouse/touch area\r\n\t\t\t\t\tasldGrad : jsc.createASliderGradient(),\r\n\t\t\t\t\tasldPtrS : jsc.createEl('div'), // slider pointer spacer\r\n\t\t\t\t\tasldPtrIB : jsc.createEl('div'), // slider pointer inner border\r\n\t\t\t\t\tasldPtrMB : jsc.createEl('div'), // slider pointer middle border\r\n\t\t\t\t\tasldPtrOB : jsc.createEl('div'), // slider pointer outer border\r\n\t\t\t\t\tpal : jsc.createEl('div'), // palette\r\n\t\t\t\t\tbtn : jsc.createEl('div'),\r\n\t\t\t\t\tbtnT : jsc.createEl('div'), // text\r\n\t\t\t\t};\r\n\r\n\t\t\t\tjsc.picker.pad.appendChild(jsc.picker.padCanvas.elm);\r\n\t\t\t\tjsc.picker.padB.appendChild(jsc.picker.pad);\r\n\t\t\t\tjsc.picker.cross.appendChild(jsc.picker.crossBY);\r\n\t\t\t\tjsc.picker.cross.appendChild(jsc.picker.crossBX);\r\n\t\t\t\tjsc.picker.cross.appendChild(jsc.picker.crossLY);\r\n\t\t\t\tjsc.picker.cross.appendChild(jsc.picker.crossLX);\r\n\t\t\t\tjsc.picker.padB.appendChild(jsc.picker.cross);\r\n\t\t\t\tjsc.picker.box.appendChild(jsc.picker.padB);\r\n\t\t\t\tjsc.picker.box.appendChild(jsc.picker.padM);\r\n\r\n\t\t\t\tjsc.picker.sld.appendChild(jsc.picker.sldGrad.elm);\r\n\t\t\t\tjsc.picker.sldB.appendChild(jsc.picker.sld);\r\n\t\t\t\tjsc.picker.sldB.appendChild(jsc.picker.sldPtrOB);\r\n\t\t\t\tjsc.picker.sldPtrOB.appendChild(jsc.picker.sldPtrMB);\r\n\t\t\t\tjsc.picker.sldPtrMB.appendChild(jsc.picker.sldPtrIB);\r\n\t\t\t\tjsc.picker.sldPtrIB.appendChild(jsc.picker.sldPtrS);\r\n\t\t\t\tjsc.picker.box.appendChild(jsc.picker.sldB);\r\n\t\t\t\tjsc.picker.box.appendChild(jsc.picker.sldM);\r\n\r\n\t\t\t\tjsc.picker.asld.appendChild(jsc.picker.asldGrad.elm);\r\n\t\t\t\tjsc.picker.asldB.appendChild(jsc.picker.asld);\r\n\t\t\t\tjsc.picker.asldB.appendChild(jsc.picker.asldPtrOB);\r\n\t\t\t\tjsc.picker.asldPtrOB.appendChild(jsc.picker.asldPtrMB);\r\n\t\t\t\tjsc.picker.asldPtrMB.appendChild(jsc.picker.asldPtrIB);\r\n\t\t\t\tjsc.picker.asldPtrIB.appendChild(jsc.picker.asldPtrS);\r\n\t\t\t\tjsc.picker.box.appendChild(jsc.picker.asldB);\r\n\t\t\t\tjsc.picker.box.appendChild(jsc.picker.asldM);\r\n\r\n\t\t\t\tjsc.picker.box.appendChild(jsc.picker.pal);\r\n\r\n\t\t\t\tjsc.picker.btn.appendChild(jsc.picker.btnT);\r\n\t\t\t\tjsc.picker.box.appendChild(jsc.picker.btn);\r\n\r\n\t\t\t\tjsc.picker.boxB.appendChild(jsc.picker.box);\r\n\t\t\t\tjsc.picker.wrap.appendChild(jsc.picker.boxS);\r\n\t\t\t\tjsc.picker.wrap.appendChild(jsc.picker.boxB);\r\n\r\n\t\t\t\tjsc.picker.wrap.addEventListener('touchstart', jsc.onPickerTouchStart,\r\n\t\t\t\t\tjsc.isPassiveEventSupported ? {passive: false} : false);\r\n\t\t\t}\r\n\r\n\t\t\tvar p = jsc.picker;\r\n\r\n\t\t\tvar displaySlider = !!jsc.getSliderChannel(THIS);\r\n\t\t\tvar displayAlphaSlider = THIS.hasAlphaChannel();\r\n\t\t\tvar pickerDims = jsc.getPickerDims(THIS);\r\n\t\t\tvar crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);\r\n\t\t\tvar controlPadding = jsc.getControlPadding(THIS);\r\n\t\t\tvar borderRadius = Math.min(\r\n\t\t\t\tTHIS.borderRadius,\r\n\t\t\t\tMath.round(THIS.padding * Math.PI)); // px\r\n\t\t\tvar padCursor = 'crosshair';\r\n\r\n\t\t\t// wrap\r\n\t\t\tp.wrap.className = 'jscolor-wrap';\r\n\t\t\tp.wrap.style.width = pickerDims.borderW + 'px';\r\n\t\t\tp.wrap.style.height = pickerDims.borderH + 'px';\r\n\t\t\tp.wrap.style.zIndex = THIS.zIndex;\r\n\r\n\t\t\t// picker\r\n\t\t\tp.box.className = 'jscolor-picker';\r\n\t\t\tp.box.style.width = pickerDims.paddedW + 'px';\r\n\t\t\tp.box.style.height = pickerDims.paddedH + 'px';\r\n\r\n\t\t\t// picker shadow\r\n\t\t\tp.boxS.className = 'jscolor-shadow';\r\n\t\t\tjsc.setBorderRadius(p.boxS, borderRadius + 'px');\r\n\r\n\t\t\t// picker border\r\n\t\t\tp.boxB.className = 'jscolor-border';\r\n\t\t\tp.boxB.style.border = THIS.borderWidth + 'px solid';\r\n\t\t\tp.boxB.style.borderColor = THIS.borderColor;\r\n\t\t\tp.boxB.style.background = THIS.backgroundColor;\r\n\t\t\tjsc.setBorderRadius(p.boxB, borderRadius + 'px');\r\n\r\n\t\t\t// IE hack:\r\n\t\t\t// If the element is transparent, IE will trigger the event on the elements under it,\r\n\t\t\t// e.g. on Canvas or on elements with border\r\n\t\t\tp.padM.style.background = 'rgba(255,0,0,.2)';\r\n\t\t\tp.sldM.style.background = 'rgba(0,255,0,.2)';\r\n\t\t\tp.asldM.style.background = 'rgba(0,0,255,.2)';\r\n\r\n\t\t\tp.padM.style.opacity =\r\n\t\t\tp.sldM.style.opacity =\r\n\t\t\tp.asldM.style.opacity =\r\n\t\t\t\t'0';\r\n\r\n\t\t\t// pad\r\n\t\t\tp.pad.style.position = 'relative';\r\n\t\t\tp.pad.style.width = THIS.width + 'px';\r\n\t\t\tp.pad.style.height = THIS.height + 'px';\r\n\r\n\t\t\t// pad - color spectrum (HSV and HVS)\r\n\t\t\tp.padCanvas.draw(THIS.width, THIS.height, jsc.getPadYChannel(THIS));\r\n\r\n\t\t\t// pad border\r\n\t\t\tp.padB.style.position = 'absolute';\r\n\t\t\tp.padB.style.left = THIS.padding + 'px';\r\n\t\t\tp.padB.style.top = THIS.padding + 'px';\r\n\t\t\tp.padB.style.border = THIS.controlBorderWidth + 'px solid';\r\n\t\t\tp.padB.style.borderColor = THIS.controlBorderColor;\r\n\r\n\t\t\t// pad mouse area\r\n\t\t\tp.padM.style.position = 'absolute';\r\n\t\t\tp.padM.style.left = 0 + 'px';\r\n\t\t\tp.padM.style.top = 0 + 'px';\r\n\t\t\tp.padM.style.width = (THIS.padding + 2 * THIS.controlBorderWidth + THIS.width + controlPadding) + 'px';\r\n\t\t\tp.padM.style.height = (2 * THIS.controlBorderWidth + 2 * THIS.padding + THIS.height) + 'px';\r\n\t\t\tp.padM.style.cursor = padCursor;\r\n\t\t\tjsc.setData(p.padM, {\r\n\t\t\t\tinstance: THIS,\r\n\t\t\t\tcontrol: 'pad',\r\n\t\t\t})\r\n\r\n\t\t\t// pad cross\r\n\t\t\tp.cross.style.position = 'absolute';\r\n\t\t\tp.cross.style.left =\r\n\t\t\tp.cross.style.top =\r\n\t\t\t\t'0';\r\n\t\t\tp.cross.style.width =\r\n\t\t\tp.cross.style.height =\r\n\t\t\t\tcrossOuterSize + 'px';\r\n\r\n\t\t\t// pad cross border Y and X\r\n\t\t\tp.crossBY.style.position =\r\n\t\t\tp.crossBX.style.position =\r\n\t\t\t\t'absolute';\r\n\t\t\tp.crossBY.style.background =\r\n\t\t\tp.crossBX.style.background =\r\n\t\t\t\tTHIS.pointerBorderColor;\r\n\t\t\tp.crossBY.style.width =\r\n\t\t\tp.crossBX.style.height =\r\n\t\t\t\t(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';\r\n\t\t\tp.crossBY.style.height =\r\n\t\t\tp.crossBX.style.width =\r\n\t\t\t\tcrossOuterSize + 'px';\r\n\t\t\tp.crossBY.style.left =\r\n\t\t\tp.crossBX.style.top =\r\n\t\t\t\t(Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2) - THIS.pointerBorderWidth) + 'px';\r\n\t\t\tp.crossBY.style.top =\r\n\t\t\tp.crossBX.style.left =\r\n\t\t\t\t'0';\r\n\r\n\t\t\t// pad cross line Y and X\r\n\t\t\tp.crossLY.style.position =\r\n\t\t\tp.crossLX.style.position =\r\n\t\t\t\t'absolute';\r\n\t\t\tp.crossLY.style.background =\r\n\t\t\tp.crossLX.style.background =\r\n\t\t\t\tTHIS.pointerColor;\r\n\t\t\tp.crossLY.style.height =\r\n\t\t\tp.crossLX.style.width =\r\n\t\t\t\t(crossOuterSize - 2 * THIS.pointerBorderWidth) + 'px';\r\n\t\t\tp.crossLY.style.width =\r\n\t\t\tp.crossLX.style.height =\r\n\t\t\t\tTHIS.pointerThickness + 'px';\r\n\t\t\tp.crossLY.style.left =\r\n\t\t\tp.crossLX.style.top =\r\n\t\t\t\t(Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2)) + 'px';\r\n\t\t\tp.crossLY.style.top =\r\n\t\t\tp.crossLX.style.left =\r\n\t\t\t\tTHIS.pointerBorderWidth + 'px';\r\n\r\n\r\n\t\t\t// slider\r\n\t\t\tp.sld.style.overflow = 'hidden';\r\n\t\t\tp.sld.style.width = THIS.sliderSize + 'px';\r\n\t\t\tp.sld.style.height = THIS.height + 'px';\r\n\r\n\t\t\t// slider gradient\r\n\t\t\tp.sldGrad.draw(THIS.sliderSize, THIS.height, '#000', '#000');\r\n\r\n\t\t\t// slider border\r\n\t\t\tp.sldB.style.display = displaySlider ? 'block' : 'none';\r\n\t\t\tp.sldB.style.position = 'absolute';\r\n\t\t\tp.sldB.style.left = (THIS.padding + THIS.width + 2 * THIS.controlBorderWidth + 2 * controlPadding) + 'px';\r\n\t\t\tp.sldB.style.top = THIS.padding + 'px';\r\n\t\t\tp.sldB.style.border = THIS.controlBorderWidth + 'px solid';\r\n\t\t\tp.sldB.style.borderColor = THIS.controlBorderColor;\r\n\r\n\t\t\t// slider mouse area\r\n\t\t\tp.sldM.style.display = displaySlider ? 'block' : 'none';\r\n\t\t\tp.sldM.style.position = 'absolute';\r\n\t\t\tp.sldM.style.left = (THIS.padding + THIS.width + 2 * THIS.controlBorderWidth + controlPadding) + 'px';\r\n\t\t\tp.sldM.style.top = 0 + 'px';\r\n\t\t\tp.sldM.style.width = (\r\n\t\t\t\t\t(THIS.sliderSize + 2 * controlPadding + 2 * THIS.controlBorderWidth) +\r\n\t\t\t\t\t(displayAlphaSlider ? 0 : Math.max(0, THIS.padding - controlPadding)) // remaining padding to the right edge\r\n\t\t\t\t) + 'px';\r\n\t\t\tp.sldM.style.height = (2 * THIS.controlBorderWidth + 2 * THIS.padding + THIS.height) + 'px';\r\n\t\t\tp.sldM.style.cursor = 'default';\r\n\t\t\tjsc.setData(p.sldM, {\r\n\t\t\t\tinstance: THIS,\r\n\t\t\t\tcontrol: 'sld',\r\n\t\t\t});\r\n\r\n\t\t\t// slider pointer inner and outer border\r\n\t\t\tp.sldPtrIB.style.border =\r\n\t\t\tp.sldPtrOB.style.border =\r\n\t\t\t\tTHIS.pointerBorderWidth + 'px solid ' + THIS.pointerBorderColor;\r\n\r\n\t\t\t// slider pointer outer border\r\n\t\t\tp.sldPtrOB.style.position = 'absolute';\r\n\t\t\tp.sldPtrOB.style.left = -(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';\r\n\t\t\tp.sldPtrOB.style.top = '0';\r\n\r\n\t\t\t// slider pointer middle border\r\n\t\t\tp.sldPtrMB.style.border = THIS.pointerThickness + 'px solid ' + THIS.pointerColor;\r\n\r\n\t\t\t// slider pointer spacer\r\n\t\t\tp.sldPtrS.style.width = THIS.sliderSize + 'px';\r\n\t\t\tp.sldPtrS.style.height = jsc.pub.sliderInnerSpace + 'px';\r\n\r\n\r\n\t\t\t// alpha slider\r\n\t\t\tp.asld.style.overflow = 'hidden';\r\n\t\t\tp.asld.style.width = THIS.sliderSize + 'px';\r\n\t\t\tp.asld.style.height = THIS.height + 'px';\r\n\r\n\t\t\t// alpha slider gradient\r\n\t\t\tp.asldGrad.draw(THIS.sliderSize, THIS.height, '#000');\r\n\r\n\t\t\t// alpha slider border\r\n\t\t\tp.asldB.style.display = displayAlphaSlider ? 'block' : 'none';\r\n\t\t\tp.asldB.style.position = 'absolute';\r\n\t\t\tp.asldB.style.left = (\r\n\t\t\t\t\t(THIS.padding + THIS.width + 2 * THIS.controlBorderWidth + controlPadding) +\r\n\t\t\t\t\t(displaySlider ? (THIS.sliderSize + 3 * controlPadding + 2 * THIS.controlBorderWidth) : 0)\r\n\t\t\t\t) + 'px';\r\n\t\t\tp.asldB.style.top = THIS.padding + 'px';\r\n\t\t\tp.asldB.style.border = THIS.controlBorderWidth + 'px solid';\r\n\t\t\tp.asldB.style.borderColor = THIS.controlBorderColor;\r\n\r\n\t\t\t// alpha slider mouse area\r\n\t\t\tp.asldM.style.display = displayAlphaSlider ? 'block' : 'none';\r\n\t\t\tp.asldM.style.position = 'absolute';\r\n\t\t\tp.asldM.style.left = (\r\n\t\t\t\t\t(THIS.padding + THIS.width + 2 * THIS.controlBorderWidth + controlPadding) +\r\n\t\t\t\t\t(displaySlider ? (THIS.sliderSize + 2 * controlPadding + 2 * THIS.controlBorderWidth) : 0)\r\n\t\t\t\t) + 'px';\r\n\t\t\tp.asldM.style.top = 0 + 'px';\r\n\t\t\tp.asldM.style.width = (\r\n\t\t\t\t\t(THIS.sliderSize + 2 * controlPadding + 2 * THIS.controlBorderWidth) +\r\n\t\t\t\t\tMath.max(0, THIS.padding - controlPadding) // remaining padding to the right edge\r\n\t\t\t\t) + 'px';\r\n\t\t\tp.asldM.style.height = (2 * THIS.controlBorderWidth + 2 * THIS.padding + THIS.height) + 'px';\r\n\t\t\tp.asldM.style.cursor = 'default';\r\n\t\t\tjsc.setData(p.asldM, {\r\n\t\t\t\tinstance: THIS,\r\n\t\t\t\tcontrol: 'asld',\r\n\t\t\t})\r\n\r\n\t\t\t// alpha slider pointer inner and outer border\r\n\t\t\tp.asldPtrIB.style.border =\r\n\t\t\tp.asldPtrOB.style.border =\r\n\t\t\t\tTHIS.pointerBorderWidth + 'px solid ' + THIS.pointerBorderColor;\r\n\r\n\t\t\t// alpha slider pointer outer border\r\n\t\t\tp.asldPtrOB.style.position = 'absolute';\r\n\t\t\tp.asldPtrOB.style.left = -(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';\r\n\t\t\tp.asldPtrOB.style.top = '0';\r\n\r\n\t\t\t// alpha slider pointer middle border\r\n\t\t\tp.asldPtrMB.style.border = THIS.pointerThickness + 'px solid ' + THIS.pointerColor;\r\n\r\n\t\t\t// alpha slider pointer spacer\r\n\t\t\tp.asldPtrS.style.width = THIS.sliderSize + 'px';\r\n\t\t\tp.asldPtrS.style.height = jsc.pub.sliderInnerSpace + 'px';\r\n\r\n\r\n\t\t\t// palette\r\n\t\t\tp.pal.className = 'jscolor-palette';\r\n\t\t\tp.pal.style.display = pickerDims.palette.rows ? 'block' : 'none';\r\n\t\t\tp.pal.style.left = THIS.padding + 'px';\r\n\t\t\tp.pal.style.top = (2 * THIS.controlBorderWidth + 2 * THIS.padding + THIS.height) + 'px';\r\n\r\n\t\t\t// palette's color samples\r\n\r\n\t\t\tp.pal.innerHTML = '';\r\n\r\n\t\t\tvar chessboard = jsc.genColorPreviewCanvas('rgba(0,0,0,0)');\r\n\r\n\t\t\tvar si = 0; // color sample's index\r\n\t\t\tfor (var r = 0; r < pickerDims.palette.rows; r++) {\r\n\t\t\t\tfor (var c = 0; c < pickerDims.palette.cols && si < THIS._palette.length; c++, si++) {\r\n\t\t\t\t\tvar sampleColor = THIS._palette[si];\r\n\t\t\t\t\tvar sampleCssColor = jsc.rgbaColor.apply(null, sampleColor.rgba);\r\n\r\n\t\t\t\t\tvar sc = jsc.createEl('div'); // color sample's color\r\n\t\t\t\t\tsc.style.width = (pickerDims.palette.cellW - 2 * THIS.controlBorderWidth) + 'px';\r\n\t\t\t\t\tsc.style.height = (pickerDims.palette.cellH - 2 * THIS.controlBorderWidth) + 'px';\r\n\t\t\t\t\tsc.style.backgroundColor = sampleCssColor;\r\n\r\n\t\t\t\t\tvar sw = jsc.createEl('div'); // color sample's wrap\r\n\t\t\t\t\tsw.className = 'jscolor-palette-sw';\r\n\t\t\t\t\tsw.style.left =\r\n\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\tpickerDims.palette.cols <= 1 ? 0 :\r\n\t\t\t\t\t\t\tMath.round(10 * (c * ((pickerDims.contentW - pickerDims.palette.cellW) / (pickerDims.palette.cols - 1)))) / 10\r\n\t\t\t\t\t\t) + 'px';\r\n\t\t\t\t\tsw.style.top = (r * (pickerDims.palette.cellH + THIS.paletteSpacing)) + 'px';\r\n\t\t\t\t\tsw.style.border = THIS.controlBorderWidth + 'px solid';\r\n\t\t\t\t\tsw.style.borderColor = THIS.controlBorderColor;\r\n\t\t\t\t\tif (sampleColor.rgba[3] !== null && sampleColor.rgba[3] < 1.0) { // only create chessboard background if the sample has transparency\r\n\t\t\t\t\t\tsw.style.backgroundImage = 'url(\\'' + chessboard.canvas.toDataURL() + '\\')';\r\n\t\t\t\t\t\tsw.style.backgroundRepeat = 'repeat';\r\n\t\t\t\t\t\tsw.style.backgroundPosition = 'center center';\r\n\t\t\t\t\t}\r\n\t\t\t\t\tjsc.setData(sw, {\r\n\t\t\t\t\t\tinstance: THIS,\r\n\t\t\t\t\t\tcontrol: 'palette-sw',\r\n\t\t\t\t\t\tcolor: sampleColor,\r\n\t\t\t\t\t});\r\n\t\t\t\t\tsw.addEventListener('click', jsc.onPaletteSampleClick, false);\r\n\t\t\t\t\tsw.appendChild(sc);\r\n\t\t\t\t\tp.pal.appendChild(sw);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\r\n\t\t\t// the Close button\r\n\t\t\tfunction setBtnBorder () {\r\n\t\t\t\tvar insetColors = THIS.controlBorderColor.split(/\\s+/);\r\n\t\t\t\tvar outsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];\r\n\t\t\t\tp.btn.style.borderColor = outsetColor;\r\n\t\t\t}\r\n\t\t\tvar btnPadding = 15; // px\r\n\t\t\tp.btn.className = 'jscolor-btn jscolor-btn-close';\r\n\t\t\tp.btn.style.display = THIS.closeButton ? 'block' : 'none';\r\n\t\t\tp.btn.style.left = THIS.padding + 'px';\r\n\t\t\tp.btn.style.bottom = THIS.padding + 'px';\r\n\t\t\tp.btn.style.padding = '0 ' + btnPadding + 'px';\r\n\t\t\tp.btn.style.maxWidth = (pickerDims.contentW - 2 * THIS.controlBorderWidth - 2 * btnPadding) + 'px';\r\n\t\t\tp.btn.style.height = THIS.buttonHeight + 'px';\r\n\t\t\tp.btn.style.border = THIS.controlBorderWidth + 'px solid';\r\n\t\t\tsetBtnBorder();\r\n\t\t\tp.btn.style.color = THIS.buttonColor;\r\n\t\t\tp.btn.onmousedown = function () {\r\n\t\t\t\tTHIS.hide();\r\n\t\t\t};\r\n\t\t\tp.btnT.style.display = 'inline';\r\n\t\t\tp.btnT.style.lineHeight = THIS.buttonHeight + 'px';\r\n\t\t\tp.btnT.innerText = THIS.closeText;\r\n\r\n\t\t\t// reposition the pointers\r\n\t\t\tredrawPad();\r\n\t\t\tredrawSld();\r\n\t\t\tredrawASld();\r\n\r\n\t\t\t// If we are changing the owner without first closing the picker,\r\n\t\t\t// make sure to first deal with the old owner\r\n\t\t\tif (jsc.picker.owner && jsc.picker.owner !== THIS) {\r\n\t\t\t\tjsc.removeClass(jsc.picker.owner.targetElement, jsc.pub.activeClassName);\r\n\t\t\t}\r\n\r\n\t\t\t// Set a new picker owner\r\n\t\t\tjsc.picker.owner = THIS;\r\n\r\n\t\t\t// The redrawPosition() method needs picker.owner to be set, that's why we call it here,\r\n\t\t\t// after setting the owner\r\n\t\t\tjsc.redrawPosition();\r\n\r\n\t\t\tif (p.wrap.parentNode !== THIS.container) {\r\n\t\t\t\tTHIS.container.appendChild(p.wrap);\r\n\t\t\t}\r\n\r\n\t\t\tjsc.addClass(THIS.targetElement, jsc.pub.activeClassName);\r\n\t\t}\r\n\r\n\r\n\t\tfunction redrawPad () {\r\n\t\t\t// redraw the pad pointer\r\n\t\t\tvar yChannel = jsc.getPadYChannel(THIS);\r\n\t\t\tvar x = Math.round((THIS.channels.h / 360) * (THIS.width - 1));\r\n\t\t\tvar y = Math.round((1 - THIS.channels[yChannel] / 100) * (THIS.height - 1));\r\n\t\t\tvar crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);\r\n\t\t\tvar ofs = -Math.floor(crossOuterSize / 2);\r\n\t\t\tjsc.picker.cross.style.left = (x + ofs) + 'px';\r\n\t\t\tjsc.picker.cross.style.top = (y + ofs) + 'px';\r\n\r\n\t\t\t// redraw the slider\r\n\t\t\tswitch (jsc.getSliderChannel(THIS)) {\r\n\t\t\tcase 's':\r\n\t\t\t\tvar rgb1 = jsc.HSV_RGB(THIS.channels.h, 100, THIS.channels.v);\r\n\t\t\t\tvar rgb2 = jsc.HSV_RGB(THIS.channels.h, 0, THIS.channels.v);\r\n\t\t\t\tvar color1 = 'rgb(' +\r\n\t\t\t\t\tMath.round(rgb1[0]) + ',' +\r\n\t\t\t\t\tMath.round(rgb1[1]) + ',' +\r\n\t\t\t\t\tMath.round(rgb1[2]) + ')';\r\n\t\t\t\tvar color2 = 'rgb(' +\r\n\t\t\t\t\tMath.round(rgb2[0]) + ',' +\r\n\t\t\t\t\tMath.round(rgb2[1]) + ',' +\r\n\t\t\t\t\tMath.round(rgb2[2]) + ')';\r\n\t\t\t\tjsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2);\r\n\t\t\t\tbreak;\r\n\t\t\tcase 'v':\r\n\t\t\t\tvar rgb = jsc.HSV_RGB(THIS.channels.h, THIS.channels.s, 100);\r\n\t\t\t\tvar color1 = 'rgb(' +\r\n\t\t\t\t\tMath.round(rgb[0]) + ',' +\r\n\t\t\t\t\tMath.round(rgb[1]) + ',' +\r\n\t\t\t\t\tMath.round(rgb[2]) + ')';\r\n\t\t\t\tvar color2 = '#000';\r\n\t\t\t\tjsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2);\r\n\t\t\t\tbreak;\r\n\t\t\t}\r\n\r\n\t\t\t// redraw the alpha slider\r\n\t\t\tjsc.picker.asldGrad.draw(THIS.sliderSize, THIS.height, THIS.toHEXString());\r\n\t\t}\r\n\r\n\r\n\t\tfunction redrawSld () {\r\n\t\t\tvar sldChannel = jsc.getSliderChannel(THIS);\r\n\t\t\tif (sldChannel) {\r\n\t\t\t\t// redraw the slider pointer\r\n\t\t\t\tvar y = Math.round((1 - THIS.channels[sldChannel] / 100) * (THIS.height - 1));\r\n\t\t\t\tjsc.picker.sldPtrOB.style.top = (y - (2 * THIS.pointerBorderWidth + THIS.pointerThickness) - Math.floor(jsc.pub.sliderInnerSpace / 2)) + 'px';\r\n\t\t\t}\r\n\r\n\t\t\t// redraw the alpha slider\r\n\t\t\tjsc.picker.asldGrad.draw(THIS.sliderSize, THIS.height, THIS.toHEXString());\r\n\t\t}\r\n\r\n\r\n\t\tfunction redrawASld () {\r\n\t\t\tvar y = Math.round((1 - THIS.channels.a) * (THIS.height - 1));\r\n\t\t\tjsc.picker.asldPtrOB.style.top = (y - (2 * THIS.pointerBorderWidth + THIS.pointerThickness) - Math.floor(jsc.pub.sliderInnerSpace / 2)) + 'px';\r\n\t\t}\r\n\r\n\r\n\t\tfunction isPickerOwner () {\r\n\t\t\treturn jsc.picker && jsc.picker.owner === THIS;\r\n\t\t}\r\n\r\n\r\n\t\tfunction onValueKeyDown (ev) {\r\n\t\t\tif (jsc.eventKey(ev) === 'Enter') {\r\n\t\t\t\tif (THIS.valueElement) {\r\n\t\t\t\t\tTHIS.processValueInput(THIS.valueElement.value);\r\n\t\t\t\t}\r\n\t\t\t\tTHIS.tryHide();\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\tfunction onAlphaKeyDown (ev) {\r\n\t\t\tif (jsc.eventKey(ev) === 'Enter') {\r\n\t\t\t\tif (THIS.alphaElement) {\r\n\t\t\t\t\tTHIS.processAlphaInput(THIS.alphaElement.value);\r\n\t\t\t\t}\r\n\t\t\t\tTHIS.tryHide();\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\tfunction onValueChange (ev) {\r\n\t\t\tif (jsc.getData(ev, 'internal')) {\r\n\t\t\t\treturn; // skip if the event was internally triggered by jscolor\r\n\t\t\t}\r\n\r\n\t\t\tvar oldVal = THIS.valueElement.value;\r\n\r\n\t\t\tTHIS.processValueInput(THIS.valueElement.value); // this might change the value\r\n\r\n\t\t\tjsc.triggerCallback(THIS, 'onChange');\r\n\r\n\t\t\tif (THIS.valueElement.value !== oldVal) {\r\n\t\t\t\t// value was additionally changed -> let's trigger the change event again, even though it was natively dispatched\r\n\t\t\t\tjsc.triggerInputEvent(THIS.valueElement, 'change', true, true);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\tfunction onAlphaChange (ev) {\r\n\t\t\tif (jsc.getData(ev, 'internal')) {\r\n\t\t\t\treturn; // skip if the event was internally triggered by jscolor\r\n\t\t\t}\r\n\r\n\t\t\tvar oldVal = THIS.alphaElement.value;\r\n\r\n\t\t\tTHIS.processAlphaInput(THIS.alphaElement.value); // this might change the value\r\n\r\n\t\t\tjsc.triggerCallback(THIS, 'onChange');\r\n\r\n\t\t\t// triggering valueElement's onChange (because changing alpha changes the entire color, e.g. with rgba format)\r\n\t\t\tjsc.triggerInputEvent(THIS.valueElement, 'change', true, true);\r\n\r\n\t\t\tif (THIS.alphaElement.value !== oldVal) {\r\n\t\t\t\t// value was additionally changed -> let's trigger the change event again, even though it was natively dispatched\r\n\t\t\t\tjsc.triggerInputEvent(THIS.alphaElement, 'change', true, true);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\tfunction onValueInput (ev) {\r\n\t\t\tif (jsc.getData(ev, 'internal')) {\r\n\t\t\t\treturn; // skip if the event was internally triggered by jscolor\r\n\t\t\t}\r\n\r\n\t\t\tif (THIS.valueElement) {\r\n\t\t\t\tTHIS.fromString(THIS.valueElement.value, jsc.flags.leaveValue);\r\n\t\t\t}\r\n\r\n\t\t\tjsc.triggerCallback(THIS, 'onInput');\r\n\r\n\t\t\t// triggering valueElement's onInput\r\n\t\t\t// (not needed, it was dispatched normally by the browser)\r\n\t\t}\r\n\r\n\r\n\t\tfunction onAlphaInput (ev) {\r\n\t\t\tif (jsc.getData(ev, 'internal')) {\r\n\t\t\t\treturn; // skip if the event was internally triggered by jscolor\r\n\t\t\t}\r\n\r\n\t\t\tif (THIS.alphaElement) {\r\n\t\t\t\tTHIS.fromHSVA(null, null, null, parseFloat(THIS.alphaElement.value), jsc.flags.leaveAlpha);\r\n\t\t\t}\r\n\r\n\t\t\tjsc.triggerCallback(THIS, 'onInput');\r\n\r\n\t\t\t// triggering valueElement's onInput (because changing alpha changes the entire color, e.g. with rgba format)\r\n\t\t\tjsc.triggerInputEvent(THIS.valueElement, 'input', true, true);\r\n\t\t}\r\n\r\n\r\n\t\t// let's process the DEPRECATED 'options' property (this will be later removed)\r\n\t\tif (jsc.pub.options) {\r\n\t\t\t// let's set custom default options, if specified\r\n\t\t\tfor (var opt in jsc.pub.options) {\r\n\t\t\t\tif (jsc.pub.options.hasOwnProperty(opt)) {\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tsetOption(opt, jsc.pub.options[opt]);\r\n\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\tconsole.warn(e);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\t// let's apply configuration presets\r\n\t\t//\r\n\t\tvar presetsArr = [];\r\n\r\n\t\tif (opts.preset) {\r\n\t\t\tif (typeof opts.preset === 'string') {\r\n\t\t\t\tpresetsArr = opts.preset.split(/\\s+/);\r\n\t\t\t} else if (Array.isArray(opts.preset)) {\r\n\t\t\t\tpresetsArr = opts.preset.slice(); // slice() to clone\r\n\t\t\t} else {\r\n\t\t\t\tconsole.warn('Unrecognized preset value');\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// always use the 'default' preset. If it's not listed, append it to the end.\r\n\t\tif (presetsArr.indexOf('default') === -1) {\r\n\t\t\tpresetsArr.push('default');\r\n\t\t}\r\n\r\n\t\t// let's apply the presets in reverse order, so that should there be any overlapping options,\r\n\t\t// the formerly listed preset will override the latter\r\n\t\tfor (var i = presetsArr.length - 1; i >= 0; i -= 1) {\r\n\t\t\tvar pres = presetsArr[i];\r\n\t\t\tif (!pres) {\r\n\t\t\t\tcontinue; // preset is empty string\r\n\t\t\t}\r\n\t\t\tif (!jsc.pub.presets.hasOwnProperty(pres)) {\r\n\t\t\t\tconsole.warn('Unknown preset: %s', pres);\r\n\t\t\t\tcontinue;\r\n\t\t\t}\r\n\t\t\tfor (var opt in jsc.pub.presets[pres]) {\r\n\t\t\t\tif (jsc.pub.presets[pres].hasOwnProperty(opt)) {\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tsetOption(opt, jsc.pub.presets[pres][opt]);\r\n\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\tconsole.warn(e);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\t// let's set specific options for this color picker\r\n\t\tvar nonProperties = [\r\n\t\t\t// these options won't be set as instance properties\r\n\t\t\t'preset',\r\n\t\t];\r\n\t\tfor (var opt in opts) {\r\n\t\t\tif (opts.hasOwnProperty(opt)) {\r\n\t\t\t\tif (nonProperties.indexOf(opt) === -1) {\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tsetOption(opt, opts[opt]);\r\n\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\tconsole.warn(e);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\t//\r\n\t\t// Install the color picker on chosen element(s)\r\n\t\t//\r\n\r\n\r\n\t\t// Determine picker's container element\r\n\t\tif (this.container === undefined) {\r\n\t\t\tthis.container = window.document.body; // default container is BODY element\r\n\r\n\t\t} else { // explicitly set to custom element\r\n\t\t\tthis.container = jsc.node(this.container);\r\n\t\t}\r\n\r\n\t\tif (!this.container) {\r\n\t\t\tthrow new Error('Cannot instantiate color picker without a container element');\r\n\t\t}\r\n\r\n\r\n\t\t// Fetch the target element\r\n\t\tthis.targetElement = jsc.node(targetElement);\r\n\r\n\t\tif (!this.targetElement) {\r\n\t\t\t// temporarily customized error message to help with migrating from versions prior to 2.2\r\n\t\t\tif (typeof targetElement === 'string' && /^[a-zA-Z][\\w:.-]*$/.test(targetElement)) {\r\n\t\t\t\t// targetElement looks like valid ID\r\n\t\t\t\tvar possiblyId = targetElement;\r\n\t\t\t\tthrow new Error('If \\'' + possiblyId + '\\' is supposed to be an ID, please use \\'#' + possiblyId + '\\' or any valid CSS selector.');\r\n\t\t\t}\r\n\r\n\t\t\tthrow new Error('Cannot instantiate color picker without a target element');\r\n\t\t}\r\n\r\n\t\tif (this.targetElement.jscolor && this.targetElement.jscolor instanceof jsc.pub) {\r\n\t\t\tthrow new Error('Color picker already installed on this element');\r\n\t\t}\r\n\r\n\r\n\t\t// link this instance with the target element\r\n\t\tthis.targetElement.jscolor = this;\r\n\t\tjsc.addClass(this.targetElement, jsc.pub.className);\r\n\r\n\t\t// register this instance\r\n\t\tjsc.instances.push(this);\r\n\r\n\r\n\t\t// if target is BUTTON\r\n\t\tif (jsc.isButton(this.targetElement)) {\r\n\r\n\t\t\tif (this.targetElement.type.toLowerCase() !== 'button') {\r\n\t\t\t\t// on buttons, always force type to be 'button', e.g. in situations the target