|
| 1 | +(function (root) { |
| 2 | + |
| 3 | + /** |
| 4 | + * Piklor |
| 5 | + * Creates a new `Piklor` instance. |
| 6 | + * |
| 7 | + * @name Piklor |
| 8 | + * @function |
| 9 | + * @param {String|Element} sel The element where the color picker will live. |
| 10 | + * @param {Array} colors An array of strings representing colors. |
| 11 | + * @param {Object} options An object containing the following fields: |
| 12 | + * |
| 13 | + * - `open` (String|Element): The HTML element or query selector which will open the picker. |
| 14 | + * - `openEvent` (String): The open event (default: `"click"`). |
| 15 | + * - `style` (Object): Some style options: |
| 16 | + * - `display` (String): The display value when the picker is opened (default: `"block"`). |
| 17 | + * - `template` (String): The color item template. The `{color}` snippet will be replaced |
| 18 | + * with the color value (default: `"<div data-col=\"{color}\" style=\"background-color: {color}\"></div>"`). |
| 19 | + * - `autoclose` (Boolean): If `false`, the color picker will not be hided by default (default: `true`). |
| 20 | + * - `closeOnBlur` (Boolean): If `true`, the color picker will be closed when clicked outside of it (default: `false`). |
| 21 | + * |
| 22 | + * @return {Piklor} The `Piklor` instance. |
| 23 | + */ |
| 24 | + function Piklor(sel, colors, options) { |
| 25 | + var self = this; |
| 26 | + options = options || {}; |
| 27 | + options.open = self.getElm(options.open); |
| 28 | + options.openEvent = options.openEvent || "click"; |
| 29 | + options.style = Object(options.style); |
| 30 | + options.style.display = options.style.display || "inline-block"; |
| 31 | + options.closeOnBlur = options.closeOnBlur || false; |
| 32 | + options.template = options.template || "<div data-col=\"{color}\" style=\"background-color: {color}\"></div>"; |
| 33 | + self.elm = self.getElm(sel); |
| 34 | + self.cbs = []; |
| 35 | + self.isOpen = true; |
| 36 | + self.colors = colors; |
| 37 | + self.options = options; |
| 38 | + self.render(); |
| 39 | + |
| 40 | + // Handle the open element and event. |
| 41 | + if (options.open) { |
| 42 | + options.open.addEventListener(options.openEvent, function (ev) { |
| 43 | + self.isOpen ? self.close() : self.open(); |
| 44 | + ev.preventDefault(); |
| 45 | + return false; |
| 46 | + }); |
| 47 | + } |
| 48 | + |
| 49 | + // Click on colors |
| 50 | + self.elm.addEventListener("click", function (ev) { |
| 51 | + var col = ev.target.getAttribute("data-col"); |
| 52 | + if (!col) { return; } |
| 53 | + self.close(); |
| 54 | + self.set(col); |
| 55 | + }); |
| 56 | + |
| 57 | + if (options.closeOnBlur) { |
| 58 | + window.addEventListener("click", function (ev) { |
| 59 | + // check if we didn't click 'open' and 'color pallete' elements |
| 60 | + if (ev.target != options.open && ev.target != self.elm && self.isOpen) { |
| 61 | + self.close(); |
| 62 | + } |
| 63 | + }); |
| 64 | + } |
| 65 | + |
| 66 | + if (options.autoclose !== false) { |
| 67 | + self.close(); |
| 68 | + } |
| 69 | + } |
| 70 | + |
| 71 | + /** |
| 72 | + * getElm |
| 73 | + * Finds the HTML element. |
| 74 | + * |
| 75 | + * @name getElm |
| 76 | + * @function |
| 77 | + * @param {String|Element} el The HTML element or query selector. |
| 78 | + * @return {HTMLElement} The selected HTML element. |
| 79 | + */ |
| 80 | + Piklor.prototype.getElm = function (el) { |
| 81 | + if (typeof el === "string") { |
| 82 | + return document.querySelector(el); |
| 83 | + } |
| 84 | + return el; |
| 85 | + }; |
| 86 | + |
| 87 | + /** |
| 88 | + * render |
| 89 | + * Renders the colors. |
| 90 | + * |
| 91 | + * @name render |
| 92 | + * @function |
| 93 | + */ |
| 94 | + Piklor.prototype.render = function () { |
| 95 | + var self = this |
| 96 | + , html = "" |
| 97 | + ; |
| 98 | + |
| 99 | + self.colors.forEach(function (c) { |
| 100 | + html += self.options.template.replace(/\{color\}/g, c); |
| 101 | + }); |
| 102 | + |
| 103 | + self.elm.innerHTML = html; |
| 104 | + }; |
| 105 | + |
| 106 | + /** |
| 107 | + * close |
| 108 | + * Closes the color picker. |
| 109 | + * |
| 110 | + * @name close |
| 111 | + * @function |
| 112 | + */ |
| 113 | + Piklor.prototype.close = function () { |
| 114 | + this.elm.style.display = "none"; |
| 115 | + this.isOpen = false; |
| 116 | + }; |
| 117 | + |
| 118 | + /** |
| 119 | + * open |
| 120 | + * Opens the color picker. |
| 121 | + * |
| 122 | + * @name open |
| 123 | + * @function |
| 124 | + */ |
| 125 | + Piklor.prototype.open = function () { |
| 126 | + this.elm.style.display = this.options.style.display; |
| 127 | + this.isOpen = true; |
| 128 | + }; |
| 129 | + |
| 130 | + /** |
| 131 | + * colorChosen |
| 132 | + * Adds a new callback in the colorChosen callback buffer. |
| 133 | + * |
| 134 | + * @name colorChosen |
| 135 | + * @function |
| 136 | + * @param {Function} cb The callback function called with the selected color. |
| 137 | + */ |
| 138 | + Piklor.prototype.colorChosen = function (cb) { |
| 139 | + this.cbs.push(cb); |
| 140 | + }; |
| 141 | + |
| 142 | + /** |
| 143 | + * set |
| 144 | + * Sets the color picker color. |
| 145 | + * |
| 146 | + * @name set |
| 147 | + * @function |
| 148 | + * @param {String} c The color to set. |
| 149 | + * @param {Boolean} p If `false`, the `colorChosen` callbacks will not be called. |
| 150 | + */ |
| 151 | + Piklor.prototype.set = function (c, p) { |
| 152 | + var self = this; |
| 153 | + self.color = c; |
| 154 | + if (p === false) { return; } |
| 155 | + self.cbs.forEach(function (cb) { |
| 156 | + cb.call(self, c); |
| 157 | + }); |
| 158 | + }; |
| 159 | + |
| 160 | + root.Piklor = Piklor; |
| 161 | +})(this); |
0 commit comments