MAINHACK

Viewing / Editing File: vanilla-picker.js

File is not writable. Editing disabled.
/*!
 * vanilla-picker v2.7.2 (MODIFIED by Pagelayer)
 * https://vanilla-picker.js.org
 *
 * Copyright 2017-2019 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
 * Released under the ISC license.
 */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.Picker = factory());
}(this, (function () { 'use strict';

  var classCallCheck = function (instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  };

  var createClass = function () {
    function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
    };
  }();

  var slicedToArray = function () {
    function sliceIterator(arr, i) {
      var _arr = [];
      var _n = true;
      var _d = false;
      var _e = undefined;

      try {
        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
          _arr.push(_s.value);

          if (i && _arr.length === i) break;
        }
      } catch (err) {
        _d = true;
        _e = err;
      } finally {
        try {
          if (!_n && _i["return"]) _i["return"]();
        } finally {
          if (_d) throw _e;
        }
      }

      return _arr;
    }

    return function (arr, i) {
      if (Array.isArray(arr)) {
        return arr;
      } else if (Symbol.iterator in Object(arr)) {
        return sliceIterator(arr, i);
      } else {
        throw new TypeError("Invalid attempt to destructure non-iterable instance");
      }
    };
  }();

  String.prototype.startsWith = String.prototype.startsWith || function (needle) {
  	return this.indexOf(needle) === 0;
  };
  String.prototype.padStart = String.prototype.padStart || function (len, pad) {
  	var str = this;while (str.length < len) {
  		str = pad + str;
  	}return str;
  };

  var colorNames = { aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000', blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f', darkslateblue: '#483d8b', darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22', fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080', green: '#008000', greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa', mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500', orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080', rebeccapurple: '#663399', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', slategrey: '#708090', snow: '#fffafa', springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32' };

  function printNum(num) {
  	var decs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

  	var str = decs > 0 ? num.toFixed(decs).replace(/0+$/, '').replace(/\.$/, '') : num.toString();
  	return str || '0';
  }

  var Color = function () {
  	function Color(r, g, b, a) {
  		classCallCheck(this, Color);


  		var that = this;
  		function parseString(input) {

  			if (input.startsWith('hsl')) {
  				var _input$match$map = input.match(/([\-\d\.e]+)/g).map(Number),
  				    _input$match$map2 = slicedToArray(_input$match$map, 4),
  				    h = _input$match$map2[0],
  				    s = _input$match$map2[1],
  				    l = _input$match$map2[2],
  				    _a = _input$match$map2[3];

  				if (_a === undefined) {
  					_a = 1;
  				}

  				h /= 360;
  				s /= 100;
  				l /= 100;
  				that.hsla = [h, s, l, _a];
  			}

  			else if (input.startsWith('rgb')) {
  					var _input$match$map3 = input.match(/([\-\d\.e]+)/g).map(Number),
  					    _input$match$map4 = slicedToArray(_input$match$map3, 4),
  					    _r = _input$match$map4[0],
  					    _g = _input$match$map4[1],
  					    _b = _input$match$map4[2],
  					    _a2 = _input$match$map4[3];

  					if (_a2 === undefined) {
  						_a2 = 1;
  					}

  					that.rgba = [_r, _g, _b, _a2];
  				}

  				else {
  						if (input.startsWith('#')) {
  							that.rgba = Color.hexToRgb(input);
  						} else {
  							that.rgba = Color.nameToRgb(input) || Color.hexToRgb(input);
  						}
  					}
  		}

  		if (r === undefined) ;


  		else if (Array.isArray(r)) {
  				this.rgba = r;
  			}

  			else if (b === undefined) {
  					var color = r && '' + r;
  					if (color) {
  						parseString(color.toLowerCase());
  					}
  				} else {
  					this.rgba = [r, g, b, a === undefined ? 1 : a];
  				}
  	}


  	createClass(Color, [{
  		key: 'printRGB',
  		value: function printRGB(alpha) {
  			var rgb = alpha ? this.rgba : this.rgba.slice(0, 3),
  			    vals = rgb.map(function (x, i) {
  				return printNum(x, i === 3 ? 3 : 0);
  			});

  			return alpha ? 'rgba(' + vals + ')' : 'rgb(' + vals + ')';
  		}
  	}, {
  		key: 'printHSL',
  		value: function printHSL(alpha) {
  			var mults = [360, 100, 100, 1],
  			    suff = ['', '%', '%', ''];

  			var hsl = alpha ? this.hsla : this.hsla.slice(0, 3),

  			vals = hsl.map(function (x, i) {
  				return printNum(x * mults[i], i === 3 ? 3 : 1) + suff[i];
  			});

  			return alpha ? 'hsla(' + vals + ')' : 'hsl(' + vals + ')';
  		}
  	}, {
  		key: 'printHex',
  		value: function printHex(alpha) {
  			var hex = this.hex;
  			return alpha ? hex : hex.substring(0, 7);
  		}



  	}, {
  		key: 'rgba',
  		get: function get$$1() {
  			if (this._rgba) {
  				return this._rgba;
  			}
  			if (!this._hsla) {
  				throw new Error('No color is set');
  			}

  			return this._rgba = Color.hslToRgb(this._hsla);
  		},
  		set: function set$$1(rgb) {
  			if (rgb.length === 3) {
  				rgb[3] = 1;
  			}

  			this._rgba = rgb;
  			this._hsla = null;
  		}
  	}, {
  		key: 'rgbString',
  		get: function get$$1() {
  			return this.printRGB();
  		}
  	}, {
  		key: 'rgbaString',
  		get: function get$$1() {
  			return this.printRGB(true);
  		}


  	}, {
  		key: 'hsla',
  		get: function get$$1() {
  			if (this._hsla) {
  				return this._hsla;
  			}
  			if (!this._rgba) {
  				throw new Error('No color is set');
  			}

  			return this._hsla = Color.rgbToHsl(this._rgba);
  		},
  		set: function set$$1(hsl) {
  			if (hsl.length === 3) {
  				hsl[3] = 1;
  			}

  			this._hsla = hsl;
  			this._rgba = null;
  		}
  	}, {
  		key: 'hslString',
  		get: function get$$1() {
  			return this.printHSL();
  		}
  	}, {
  		key: 'hslaString',
  		get: function get$$1() {
  			return this.printHSL(true);
  		}


  	}, {
  		key: 'hex',
  		get: function get$$1() {
  			var rgb = this.rgba,
  			    hex = rgb.map(function (x, i) {
  				return i < 3 ? x.toString(16) : Math.round(x * 255).toString(16);
  			});

  			return '#' + hex.map(function (x) {
  				return x.padStart(2, '0');
  			}).join('');
  		},
  		set: function set$$1(hex) {
  			this.rgba = Color.hexToRgb(hex);
  		}
  	}], [{
  		key: 'hexToRgb',
  		value: function hexToRgb(input) {
  			var hex = (input.startsWith('#') ? input.slice(1) : input).replace(/^(\w{3})$/, '$1F') 
  			.replace(/^(\w)(\w)(\w)(\w)$/, '$1$1$2$2$3$3$4$4') 
  			.replace(/^(\w{6})$/, '$1FF'); 

  			if (!hex.match(/^([0-9a-fA-F]{8})$/)) {
  				throw new Error('Unknown hex color; ' + input);
  			}

  			var rgba = hex.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1) 
  			.map(function (x) {
  				return parseInt(x, 16);
  			}); 

  			rgba[3] = rgba[3] / 255;
  			return rgba;
  		}


  	}, {
  		key: 'nameToRgb',
  		value: function nameToRgb(input) {
  			var hex = colorNames[input];
  			if (hex) {
  				return Color.hexToRgb(hex);
  			}
  		}


  	}, {
  		key: 'rgbToHsl',
  		value: function rgbToHsl(_ref) {
  			var _ref2 = slicedToArray(_ref, 4),
  			    r = _ref2[0],
  			    g = _ref2[1],
  			    b = _ref2[2],
  			    a = _ref2[3];

  			r /= 255;
  			g /= 255;
  			b /= 255;

  			var max = Math.max(r, g, b),
  			    min = Math.min(r, g, b);
  			var h = void 0,
  			    s = void 0,
  			    l = (max + min) / 2;

  			if (max === min) {
  				h = s = 0; 
  			} else {
  				var d = max - min;
  				s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  				switch (max) {
  					case r:
  						h = (g - b) / d + (g < b ? 6 : 0);break;
  					case g:
  						h = (b - r) / d + 2;break;
  					case b:
  						h = (r - g) / d + 4;break;
  				}

  				h /= 6;
  			}

  			return [h, s, l, a];
  		}


  	}, {
  		key: 'hslToRgb',
  		value: function hslToRgb(_ref3) {
  			var _ref4 = slicedToArray(_ref3, 4),
  			    h = _ref4[0],
  			    s = _ref4[1],
  			    l = _ref4[2],
  			    a = _ref4[3];

  			var r = void 0,
  			    g = void 0,
  			    b = void 0;

  			if (s === 0) {
  				r = g = b = l; 
  			} else {
  				var hue2rgb = function hue2rgb(p, q, t) {
  					if (t < 0) t += 1;
  					if (t > 1) t -= 1;
  					if (t < 1 / 6) return p + (q - p) * 6 * t;
  					if (t < 1 / 2) return q;
  					if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
  					return p;
  				};

  				var q = l < 0.5 ? l * (1 + s) : l + s - l * s,
  				    p = 2 * l - q;

  				r = hue2rgb(p, q, h + 1 / 3);
  				g = hue2rgb(p, q, h);
  				b = hue2rgb(p, q, h - 1 / 3);
  			}

  			var rgba = [r * 255, g * 255, b * 255].map(Math.round);
  			rgba[3] = a;

  			return rgba;
  		}
  	}]);
  	return Color;
  }();

  var root = window;

  function dragTracker(options) {


      var ep = Element.prototype;
      if (!ep.matches) ep.matches = ep.msMatchesSelector || ep.webkitMatchesSelector;
      if (!ep.closest) ep.closest = function (s) {
          var node = this;
          do {
              if (node.matches(s)) return node;
              node = node.tagName === 'svg' ? node.parentNode : node.parentElement;
          } while (node);

          return null;
      };

      options = options || {};
      var container = options.container || options.doc.documentElement,
          selector = options.selector,
          callback = options.callback || console.log,
          callbackStart = options.callbackDragStart,
          callbackEnd = options.callbackDragEnd,

      callbackClick = options.callbackClick,
          propagate = options.propagateEvents,
          roundCoords = options.roundCoords !== false,
          dragOutside = options.dragOutside !== false,

      handleOffset = options.handleOffset || options.handleOffset !== false;
      var offsetToCenter = null;
      switch (handleOffset) {
          case 'center':
              offsetToCenter = true;break;
          case 'topleft':
          case 'top-left':
              offsetToCenter = false;break;
      }

      var dragState = void 0;

      function getMousePos(e, elm, offset, stayWithin) {
          var x = e.clientX,
              y = e.clientY;

          function respectBounds(value, min, max) {
              return Math.max(min, Math.min(value, max));
          }

          if (elm) {
              var bounds = elm.getBoundingClientRect();
              x -= bounds.left;
              y -= bounds.top;

              if (offset) {
                  x -= offset[0];
                  y -= offset[1];
              }
              if (stayWithin) {
                  x = respectBounds(x, 0, bounds.width);
                  y = respectBounds(y, 0, bounds.height);
              }

              if (elm !== container) {
                  var center = offsetToCenter !== null ? offsetToCenter
                  : elm.nodeName === 'circle' || elm.nodeName === 'ellipse';

                  if (center) {
                      x -= bounds.width / 2;
                      y -= bounds.height / 2;
                  }
              }
          }
          return roundCoords ? [Math.round(x), Math.round(y)] : [x, y];
      }

      function stopEvent(e) {
          e.preventDefault();
          if (!propagate) {
              e.stopPropagation();
          }
      }

      function onDown(e) {
          var target = void 0;
          if (selector) {
              target = selector instanceof Element ? selector.contains(e.target) ? selector : null : e.target.closest(selector);
          } else {
              target = {};
          }

          if (target) {
              stopEvent(e);

              var mouseOffset = selector && handleOffset ? getMousePos(e, target) : [0, 0],
                  startPos = getMousePos(e, container, mouseOffset);
              dragState = {
                  target: target,
                  mouseOffset: mouseOffset,
                  startPos: startPos,
                  actuallyDragged: false
              };

              if (callbackStart) {
                  callbackStart(target, startPos);
              }
          }
      }

      function onMove(e) {
          if (!dragState) {
              return;
          }
          stopEvent(e);

          var start = dragState.startPos,
              pos = getMousePos(e, container, dragState.mouseOffset, !dragOutside);

          dragState.actuallyDragged = dragState.actuallyDragged || start[0] !== pos[0] || start[1] !== pos[1];

          callback(dragState.target, pos, start);
      }

      function onEnd(e, cancelled) {
          if (!dragState) {
              return;
          }

          if (callbackEnd || callbackClick) {
              var isClick = !dragState.actuallyDragged,
                  pos = isClick ? dragState.startPos : getMousePos(e, container, dragState.mouseOffset, !dragOutside);

              if (callbackClick && isClick && !cancelled) {
                  callbackClick(dragState.target, pos);
              }
              if (callbackEnd) {
                  callbackEnd(dragState.target, pos, dragState.startPos, cancelled || isClick && callbackClick);
              }
          }
          dragState = null;
      }


      addEvent(container, 'mousedown', function (e) {
          if (isLeftButton(e)) {
              onDown(e);
          } else {
              onEnd(e, true);
          }
      });
      addEvent(container, 'touchstart', function (e) {
          return relayTouch(e, onDown);
      });

      addEvent(container, 'mousemove', function (e) {
          if (!dragState) {
              return;
          }

          if (isLeftButton(e)) {
              onMove(e);
          }
          else {
                  onEnd(e);
              }
      });
      addEvent(container, 'touchmove', function (e) {
          return relayTouch(e, onMove);
      });

      addEvent(container, 'mouseup', function (e) {
          if (dragState && !isLeftButton(e)) {
              onEnd(e);
          }
      });
      function onTouchEnd(e, cancelled) {
          onEnd(tweakTouch(e), cancelled);
      }
      addEvent(container, 'touchend', function (e) {
          return onTouchEnd(e);
      });
      addEvent(container, 'touchcancel', function (e) {
          return onTouchEnd(e, true);
      });

      function addEvent(target, type, handler) {
          target.addEventListener(type, handler);
      }
      function isLeftButton(e) {
          return e.buttons !== undefined ? e.buttons === 1 :
          e.which === 1;
      }
      function relayTouch(e, handler) {
          if (e.touches.length !== 1) {
              onEnd(e, true);return;
          }

          handler(tweakTouch(e));
      }
      function tweakTouch(e) {
          var touch = e.targetTouches[0];
          if (!touch) {
              touch = e.changedTouches[0];
          }

          touch.preventDefault = e.preventDefault.bind(e);
          touch.stopPropagation = e.stopPropagation.bind(e);
          return touch;
      }
  }


  var BG_TRANSP = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'2\' height=\'2\'%3E%3Cpath d=\'M1,0H0V1H2V2H1\' fill=\'lightgrey\'/%3E%3C/svg%3E")';
  var HUES = 360;
  var EVENT_KEY = 'keydown',
  EVENT_CLICK_OUTSIDE = 'mousedown',
      EVENT_TAB_MOVE = 'focusin';

  function parseHTML(htmlString, doc) {
      var div = doc.createElement('div');
      div.innerHTML = htmlString;
      return div.firstElementChild;
  }

  function $(selector, context) {
      return (context || document).querySelector(selector);
  }

  function addEvent(target, type, handler) {
      target.addEventListener(type, handler, false);
  }
  function stopEvent(e) {
      e.preventDefault();
      e.stopPropagation();
  }
  function onKey(target, keys, handler, stop) {
      addEvent(target, EVENT_KEY, function (e) {
          if (keys.indexOf(e.key) >= 0) {
              if (stop) {
                  stopEvent(e);
              }
              handler(e);
          }
      });
  }
  
	// Add the CSS
	function appendCSS(doc){
		
		if(doc.querySelector('#vanilla-picker-style')){
			return;
		}
		
		var style = document.createElement('style');
		style.id = 'vanilla-picker-style';
		
		doc.documentElement.firstElementChild 
.appendChild(style).textContent = '.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.layout_default.picker_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper::before{content:\'\';display:block;width:100%;height:0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.layout_default .picker_sl::before{content:\'\';display:block;padding-bottom:100%}.layout_default .picker_editor{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:6rem}.layout_default .picker_editor input{width:calc(100% + 2px);height:calc(100% + 2px)}.layout_default .picker_sample{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.layout_default .picker_done{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.picker_wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;background:#f2f2f2;-webkit-box-shadow:0 0 0 1px silver;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{margin:-1px}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid white;border-radius:100%;-webkit-box-shadow:0 0 3px 1px #67b9ff;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:-webkit-gradient(linear, left top, right top, from(red), color-stop(yellow), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(magenta), to(red));background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);-webkit-box-shadow:0 0 0 1px silver;box-shadow:0 0 0 1px silver}.picker_sl{position:relative;-webkit-box-shadow:0 0 0 1px silver;box-shadow:0 0 0 1px silver;background-image:-webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, rgba(255,255,255,0))),-webkit-gradient(linear, left bottom, left top, from(black), color-stop(50%, rgba(0,0,0,0))),-webkit-gradient(linear, left top, right top, from(gray), to(rgba(128,128,128,0)));background-image:linear-gradient(180deg, white, rgba(255,255,255,0) 50%),linear-gradient(0deg, black, rgba(0,0,0,0) 50%),linear-gradient(90deg, gray, rgba(128,128,128,0))}.picker_alpha,.picker_sample{position:relative;background:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'2\' height=\'2\'%3E%3Cpath d=\'M1,0H0V1H2V2H1\' fill=\'lightgrey\'/%3E%3C/svg%3E") left top/contain white;-webkit-box-shadow:0 0 0 1px silver;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:monospace;padding:.1em .2em}.picker_sample::before{content:\'\';position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_done button{-webkit-box-sizing:border-box;box-sizing:border-box;padding:.2em .5em;cursor:pointer}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;-webkit-box-shadow:0 0 10px 1px rgba(0,0,0,0.4);box-shadow:0 0 10px 1px rgba(0,0,0,0.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;-webkit-box-shadow:none;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1, -1);transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}';
	
	}
	
  var Picker = function () {


      function Picker(options) {
          var _this = this;

          classCallCheck(this, Picker);


          this.settings = {
              popup: 'right',
              layout: 'default',
              alpha: true,
              editor: true,
              editorFormat: 'hex'
          };

          this._openProxy = function (e) {
              return _this.openHandler(e);
          };

          this.onChange = null;
          this.onDone = null;
          this.onOpen = null;
          this.onClose = null;
		  
		  appendCSS(options.doc);

          this.setOptions(options);
      }



      createClass(Picker, [{
          key: 'setOptions',
          value: function setOptions(options) {
              if (!options) {
                  return;
              }
              var settings = this.settings;

              function transfer(source, target, skipKeys) {
                  for (var key in source) {
                      if (skipKeys && skipKeys.indexOf(key) >= 0) {
                          continue;
                      }

                      target[key] = source[key];
                  }
              }

              if (options instanceof HTMLElement) {
                  settings.parent = options;
              } else {


                  if (settings.parent && options.parent && settings.parent !== options.parent) {
                      settings.parent.removeEventListener('click', this._openProxy, false);
                      this._popupInited = false;
                  }

                  transfer(options, settings );

                  if (options.onChange) {
                      this.onChange = options.onChange;
                  }
                  if (options.onDone) {
                      this.onDone = options.onDone;
                  }
                  if (options.onOpen) {
                      this.onOpen = options.onOpen;
                  }
                  if (options.onClose) {
                      this.onClose = options.onClose;
                  }

                  var col = options.color || options.colour;
                  if (col) {
                      this._setColor(col);
                  }
              }

              var parent = settings.parent;
              if (parent && settings.popup && !this._popupInited) {

                  addEvent(parent, 'click', this._openProxy);

                  onKey(parent, [' ', 'Spacebar', 'Enter'], this._openProxy );


                  this._popupInited = true;
              } else if (options.parent && !settings.popup) {
                  this.show();
              }
          }


      }, {
          key: 'openHandler',
          value: function openHandler(e) {
              if (this.show()) {
                  e && e.preventDefault();

                  this.settings.parent.style.pointerEvents = 'none';

                  var toFocus = e && e.type === EVENT_KEY ? this._domEdit : this.domElement;
                  setTimeout(function () {
                      return toFocus.focus();
                  }, 100);

                  if (this.onOpen) {
                      this.onOpen(this.colour);
                  }
              }
          }


      }, {
          key: 'closeHandler',
          value: function closeHandler(e) {
              var event = e && e.type;
              var doHide = false;

              if (!e) {
                  doHide = true;
              }
              else if (event === EVENT_CLICK_OUTSIDE || event === EVENT_TAB_MOVE) {

                      if (!this.domElement.contains(e.target)) {
                          doHide = true;
                      }
                  }
                  else {
                          stopEvent(e);

                          doHide = true;
                      }

              if (doHide && this.hide()) {
                  this.settings.parent.style.pointerEvents = '';

                  if (event !== EVENT_CLICK_OUTSIDE) {
                      this.settings.parent.focus();
                  }

                  if (this.onClose) {
                      this.onClose(this.colour);
                  }
              }
          }


      }, {
          key: 'movePopup',
          value: function movePopup(options, open) {
              this.closeHandler();

              this.setOptions(options);
              if (open) {
                  this.openHandler();
              }
          }


      }, {
          key: 'setColor',
          value: function setColor(color, silent) {
              this._setColor(color, { silent: silent });
          }
      }, {
          key: '_setColor',
          value: function _setColor(color, flags) {
              if (typeof color === 'string') {
                  color = color.trim();
              }
              if (!color) {
                  return;
              }

              flags = flags || {};
              var c = void 0;
              try {
                  c = new Color(color);
              } catch (ex) {
                  if (flags.failSilently) {
                      return;
                  }
                  throw ex;
              }

              if (!this.settings.alpha) {
                  var hsla = c.hsla;
                  hsla[3] = 1;
                  c.hsla = hsla;
              }
              this.colour = this.color = c;
              this._setHSLA(null, null, null, null, flags);
          }

      }, {
          key: 'setColour',
          value: function setColour(colour, silent) {
              this.setColor(colour, silent);
          }


      }, {
          key: 'show',
          value: function show() {
              var parent = this.settings.parent;
              if (!parent) {
                  return false;
              }

              if (this.domElement) {
                  var toggled = this._toggleDOM(true);

                  this._setPosition();

                  return toggled;
              }

              var html = this.settings.template || '<div class="picker_wrapper" tabindex="-1"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_editor"><input aria-label="Type a color name or hex value"/></div><div class="picker_sample"></div><div class="picker_done"><button>Ok</button></div></div>';
              var wrapper = parseHTML(html, this.settings.doc);

              this.domElement = wrapper;
              this._domH = $('.picker_hue', wrapper);
              this._domSL = $('.picker_sl', wrapper);
              this._domA = $('.picker_alpha', wrapper);
              this._domEdit = $('.picker_editor input', wrapper);
              this._domSample = $('.picker_sample', wrapper);
              this._domOkay = $('.picker_done button', wrapper);

              wrapper.classList.add('layout_' + this.settings.layout);
              if (!this.settings.alpha) {
                  wrapper.classList.add('no_alpha');
              }
              if (!this.settings.editor) {
                  wrapper.classList.add('no_editor');
              }
              this._ifPopup(function () {
                  return wrapper.classList.add('popup');
              });

              this._setPosition();

              if (this.colour) {
                  this._updateUI();
              } else {
                  this._setColor('#0cf');
              }
              this._bindEvents();

              return true;
          }


      }, {
          key: 'hide',
          value: function hide() {
              return this._toggleDOM(false);
          }


      }, {
          key: '_bindEvents',
          value: function _bindEvents() {
              var _this2 = this;

              var that = this,
                  dom = this.domElement;

              addEvent(dom, 'click', function (e) {
                  return e.preventDefault();
              });


              function createDragConfig(container, callbackRelative) {

                  function relayDrag(_, pos) {
                      var relX = pos[0] / container.clientWidth,
                          relY = pos[1] / container.clientHeight;
                      callbackRelative(relX, relY);
                  }

                  var config = {
                      container: container,
                      dragOutside: false,
                      callback: relayDrag,
                      callbackDragStart: relayDrag,
                      propagateEvents: true
                  };
                  return config;
              }

              dragTracker(createDragConfig(this._domH, function (x, y) {
                  return that._setHSLA(x);
              }));

              dragTracker(createDragConfig(this._domSL, function (x, y) {
                  return that._setHSLA(null, x, 1 - y);
              }));

              if (this.settings.alpha) {
                  dragTracker(createDragConfig(this._domA, function (x, y) {
                      return that._setHSLA(null, null, null, 1 - y);
                  }));
              }


              var editInput = this._domEdit;
{
                  addEvent(editInput, 'input', function (e) {
                      that._setColor(this.value, { fromEditor: true, failSilently: true });
                  });
                  addEvent(editInput, 'focus', function (e) {
                      var input = this;
                      if (input.selectionStart === input.selectionEnd) {
                          input.select();
                      }
                  });
              }


              var popupCloseProxy = function popupCloseProxy(e) {
                  _this2._ifPopup(function () {
                      return _this2.closeHandler(e);
                  });
              };
              var onDoneProxy = function onDoneProxy(e) {
                  _this2._ifPopup(function () {
                      return _this2.closeHandler(e);
                  });
                  if (_this2.onDone) {
                      _this2.onDone(_this2.colour);
                  }
              };

              addEvent(this.settings.doc, EVENT_CLICK_OUTSIDE, popupCloseProxy);
              addEvent(this.settings.doc, EVENT_TAB_MOVE, popupCloseProxy); 
              onKey(dom, ['Esc', 'Escape'], popupCloseProxy);

              addEvent(this._domOkay, 'click', onDoneProxy);
              onKey(dom, ['Enter'], onDoneProxy);
          }


      }, {
          key: '_setPosition',
          value: function _setPosition() {
              var parent = this.settings.parent,
                  elm = this.domElement;

              if (parent !== elm.parentNode) {
                  parent.appendChild(elm);
              }

              this._ifPopup(function (popup) {

                  if (getComputedStyle(parent).position === 'static') {
                      parent.style.position = 'relative';
                  }

                  var cssClass = popup === true ? 'popup_right' : 'popup_' + popup;

                  ['popup_top', 'popup_bottom', 'popup_left', 'popup_right'].forEach(function (c) {
                      if (c === cssClass) {
                          elm.classList.add(c);
                      } else {
                          elm.classList.remove(c);
                      }
                  });

                  elm.classList.add(cssClass);
              });
          }


      }, {
          key: '_setHSLA',
          value: function _setHSLA(h, s, l, a, flags) {
              flags = flags || {};

              var col = this.colour,
                  hsla = col.hsla;

              [h, s, l, a].forEach(function (x, i) {
                  if (x || x === 0) {
                      hsla[i] = x;
                  }
              });
              col.hsla = hsla;

              this._updateUI(flags);

              if (this.onChange && !flags.silent) {
                  this.onChange(col);
              }
          }
      }, {
          key: '_updateUI',
          value: function _updateUI(flags) {
              if (!this.domElement) {
                  return;
              }
              flags = flags || {};

              var col = this.colour,
                  hsl = col.hsla,
                  cssHue = 'hsl(' + hsl[0] * HUES + ', 100%, 50%)',
                  cssHSL = col.hslString,
                  cssHSLA = col.hslaString;

              var uiH = this._domH,
                  uiSL = this._domSL,
                  uiA = this._domA,
                  thumbH = $('.picker_selector', uiH),
                  thumbSL = $('.picker_selector', uiSL),
                  thumbA = $('.picker_selector', uiA);

              function posX(parent, child, relX) {
                  child.style.left = relX * 100 + '%'; 
              }
              function posY(parent, child, relY) {
                  child.style.top = relY * 100 + '%'; 
              }


              posX(uiH, thumbH, hsl[0]);

              this._domSL.style.backgroundColor = this._domH.style.color = cssHue;


              posX(uiSL, thumbSL, hsl[1]);
              posY(uiSL, thumbSL, 1 - hsl[2]);

              uiSL.style.color = cssHSL;


              posY(uiA, thumbA, 1 - hsl[3]);

              var opaque = cssHSL,
                  transp = opaque.replace('hsl', 'hsla').replace(')', ', 0)'),
                  bg = 'linear-gradient(' + [opaque, transp] + ')';

              this._domA.style.backgroundImage = bg + ', ' + BG_TRANSP;


              if (!flags.fromEditor) {
                  var format = this.settings.editorFormat,
                      alpha = this.settings.alpha;

                  var value = void 0;
                  switch (format) {
                      case 'rgb':
                          value = col.printRGB(alpha);break;
                      case 'hsl':
                          value = col.printHSL(alpha);break;
                      default:
                          value = col.printHex(alpha);
                  }
                  this._domEdit.value = value;
              }


              this._domSample.style.color = cssHSLA;
          }
      }, {
          key: '_ifPopup',
          value: function _ifPopup(actionIf, actionElse) {
              if (this.settings.parent && this.settings.popup) {
                  actionIf && actionIf(this.settings.popup);
              } else {
                  actionElse && actionElse();
              }
          }
      }, {
          key: '_toggleDOM',
          value: function _toggleDOM(toVisible) {
              var dom = this.domElement;
              if (!dom) {
                  return false;
              }

              var displayStyle = toVisible ? '' : 'none',
                  toggle = dom.style.display !== displayStyle;

              if (toggle) {
                  dom.style.display = displayStyle;
              }
              return toggle;
          }


      }]);
      return Picker;
  }();

  return Picker;

})));
Cancel / Back
[ MAINHACK ]

Viewing / Editing File: vanilla-picker.js

Server Info

System Features

User Info
