{"version":3,"sources":["AX6UIPalette.js"],"names":["_jqmin","require","_AX6UICore2","_AX6Info","_AX6Util","_AX6Mustache","frameTmpl","columnKeys","colorsTmpl","mousedown","_AX6Info2","default","supportTouch","mousemove","mouseup","onStateChanged","opts","that","ENM","call","this","getMousePosition","mouseObj","originalEvent","e","changedTouches","clientY","bindHandle","item","_this","originalTrackWidth","$track","width","clientX","pageX","config","colors","slider","handleWidth","pageY","handleLeft","trackWidth","amount","$handle","css","left","off","handleLeftToAmount","updatePreviewColor","amountToColor","_originalHandleLeft","position","handleMoveEvent","on","_originalHandleClientX","_selectedColor","toUpperCase","onClick","getAttribute","newHandleLeft","target","color","event","$preview","background-color","onUpdateColor","processor","_amount","lighten","darken","getHexValue","white","_color","normal","_uniqColor","colorToAmount","black","_diffColor","getHsl","l","color1","amountToHandleLeft","_this2","instanceId","da","document","_jqmin2","body","attr","xvar","resizerLived","repaint","selectedColor","box","innerWidth","height","_this3","$target","innerHeight","html","_AX6Mustache2","find","$","root","controls","list","forEach","c","_color1value","_color2value","value","r","b","_color0value","g","handleTop","el","handleHeight","render","$item","each","elIdx","idx","extend","_index","$label","setSelectedColor","push","AX6UIPalette","_classCallCheck","_this4","_possibleConstructorReturn","__proto__","Object","getPrototypeOf","theme","animateTime","preview","cellWidth","label","init","_this5","console","log","getError","setTimeout","trim","initOnce","initialized","sColor","_AX6Util2","minDiffColor","minDiffColorIndex","cidx","c1hsl","Math","abs","s","c2hsl","diffColor"],"mappings":"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","file":"AX6UIPalette.js","sourcesContent":["import jQuery from \"jqmin\";\nimport AX6UICore from \"./AX6UICore\";\nimport info from \"./AX6Info\";\nimport U from \"./AX6Util\";\nimport mustache from \"./AX6Mustache\";\n/* ~~~~~~~~~~~~~~~~~~ end of import  ~~~~~~~~~~~~~~~~~~~~ */\n\nconst frameTmpl = function (columnKeys) {\n  return `\n<div data-ax6ui-palette=\"\">\n<div data-ax6palette-container=\"root\">\n    <div data-ax6palette-container=\"colors\"></div>\n    <div data-ax6palette-container=\"controls\"></div>\n</div>\n</div>\n`;\n};\nconst colorsTmpl = function (columnKeys) {\n  return `\n{{#colors}}\n{{#list}}\n<div data-ax6palette-color=\"{{label}}\" data-ax6palette-color-index=\"{{@i}}\">\n    <div data-panel=\"color-preview\" style=\"padding:{{preview.cellPadding}}px;width:{{preview.cellWidth}}px;\">\n        <div data-panel=\"color-box\" style=\"width:{{preview.width}}px;height:{{preview.height}}px;\"><div data-panel=\"color\" style=\"background-color:{{value}};\"></div></div>\n    </div>\n    <div data-panel=\"color-label\" style=\"width:{{label.width}}px;\">{{label}}</div>\n    <div data-panel=\"color-slider\">\n        <div data-panel=\"color-track\" style=\"height:{{slider.trackHeight}}px;background: linear-gradient(90deg, {{_color0value}}, {{_color1value}}, {{_color2value}}); \">\n            <div data-panel=\"color-handle\">\n                <div data-panel=\"color-handle-after\" style=\"width:{{slider.handleWidth}}px;height:{{slider.handleWidth}}px;left:{{slider.handleLeft}}px;top:{{slider.handleLeft}}px;\"></div>\n            </div>\n        </div>\n    </div>\n</div>\n{{/list}}\n{{/colors}}\n`;\n};\nconst ENM = {\n  \"mousedown\": (info.supportTouch) ? \"touchstart\" : \"mousedown\",\n  \"mousemove\": (info.supportTouch) ? \"touchmove\" : \"mousemove\",\n  \"mouseup\": (info.supportTouch) ? \"touchend\" : \"mouseup\"\n};\nconst onStateChanged = function (opts, that) {\n  if (opts && opts.onStateChanged) {\n    opts.onStateChanged.call(that, that);\n  }\n  else if (this.onStateChanged) {\n    this.onStateChanged.call(that, that);\n  }\n\n  that = null;\n};\nconst getMousePosition = function (e) {\n  let mouseObj, originalEvent = (e.originalEvent) ? e.originalEvent : e;\n  mouseObj = ('changedTouches' in originalEvent && originalEvent.changedTouches) ? originalEvent.changedTouches[0] : originalEvent;\n  // clientX, Y 쓰면 스크롤에서 문제 발생\n  return {\n    clientX: mouseObj.pageX,\n    clientY: mouseObj.pageY\n  }\n};\nconst bindHandle = function (item) {\n  item.originalTrackWidth = item.$track.width();\n  item.trackWidth = item.originalTrackWidth - (this.config.colors.slider.handleWidth / 5);\n  let handleLeft = amountToHandleLeft.call(this, item, item._amount);\n\n  // handleLeft 가 범위를 벗어나면?\n  if (handleLeft < 0 || handleLeft > item.trackWidth) {\n    let amount;\n    handleLeft = handleLeft < 0 ? 0 : handleLeft > item.trackWidth ? item.trackWidth : handleLeft;\n    amount = handleLeftToAmount.call(this, item, handleLeft);\n    updatePreviewColor.call(this, item, amountToColor.call(this, item, amount));\n  }\n\n  item.$handle.css({left: handleLeft});\n  item.$item\n    .off(ENM[\"mousedown\"])\n    .on(ENM[\"mousedown\"], '[data-panel=\"color-handle\"]', (e) => {\n      let mouseObj = getMousePosition(e);\n      item._originalHandleClientX = mouseObj.clientX;\n      item._originalHandleLeft = item.$handle.position().left;\n      handleMoveEvent.on.call(this, item);\n      U.stopEvent(e.originalEvent);\n    })\n    .off(\"click\")\n    .on(\"click\", '[data-panel=\"color-label\"], [data-panel=\"color-preview\"]', (e) => {\n      if (this.onClick) {\n        this.onClick.call(item, '#' + item._selectedColor.toUpperCase(), e);\n      }\n    })\n    .on(\"click\", '[data-panel=\"color-track\"]', (e) => {\n      if (e.target.getAttribute(\"data-panel\") == \"color-track\") {\n        let mouseObj = getMousePosition(e),\n          newHandleLeft = mouseObj.clientX - item.$track.offset().left,\n          amount = handleLeftToAmount(item, newHandleLeft);\n\n        item.$handle.css({left: newHandleLeft});\n        updatePreviewColor.call(this, item, amountToColor.call(this, item, amount), e);\n\n        mouseObj = null;\n        newHandleLeft = null;\n        amount = null;\n      }\n    });\n};\nconst updatePreviewColor = function (item, color, event) {\n  item.$preview\n    .css({\"background-color\": '#' + color});\n  item.$label.html('#' + color.toUpperCase());\n  item._selectedColor = color;\n\n  if (event && this.onUpdateColor) {\n    this.onUpdateColor.call(item, '#' + item._selectedColor.toUpperCase());\n  }\n};\nconst amountToColor = function (item, amount) {\n  const processor = {\n    \"black\"(_color, _amount) {\n      return _color.lighten(this.config.colors.slider.amount / 2).darken(_amount).getHexValue();\n    },\n    \"white\"(_color, _amount) {\n      return _color.darken(this.config.colors.slider.amount / 2).darken(_amount).getHexValue();\n    },\n    \"normal\"(_color, _amount) {\n      return _color.darken(_amount).getHexValue();\n    }\n  };\n\n  if (item._uniqColor in processor) {\n    return processor[item._uniqColor].call(this, item._color, amount);\n  } else {\n    return processor[\"normal\"].call(this, item._color, amount);\n  }\n};\nconst colorToAmount = function (item, color) {\n  /// todo : 색상에 가까운 색 표현.\n  const processor = {\n    \"black\"(_color, _diffColor) {\n      let color1 = _color.lighten(this.config.colors.slider.amount / 2);\n      return (color1.getHsl().l - _diffColor.getHsl().l) * 100;\n    },\n    \"white\"(_color, _diffColor) {\n      let color1 = _color.darken(this.config.colors.slider.amount / 2);\n      return (color1.getHsl().l - _diffColor.getHsl().l) * 100;\n    },\n    \"normal\"(_color, _diffColor) {\n      return (_color.getHsl().l - _diffColor.getHsl().l) * 100;\n    }\n  };\n\n  if (item._uniqColor in processor) {\n    return processor[item._uniqColor].call(this, item._color, color);\n  } else {\n    return processor[\"normal\"].call(this, item._color, color);\n  }\n};\nconst handleLeftToAmount = function (item, handleLeft) {\n  return this.config.colors.slider.amount * (handleLeft - (item.trackWidth / 2)) / (item.originalTrackWidth / 2)\n};\nconst amountToHandleLeft = function (item, amount) {\n  return (amount * (item.originalTrackWidth / 2) / this.config.colors.slider.amount) + (item.trackWidth / 2)\n};\nconst handleMoveEvent = {\n  \"on\"(item) {\n    jQuery(document.body)\n      .on(ENM[\"mousemove\"] + \".ax6palette-\" + this.instanceId, (e) => {\n        let mouseObj = getMousePosition(e),\n          da = mouseObj.clientX - item._originalHandleClientX,\n          newHandleLeft = item._originalHandleLeft + da,\n          amount;\n\n        newHandleLeft = newHandleLeft < 0 ? 0 : newHandleLeft > item.trackWidth ? item.trackWidth : newHandleLeft;\n        item.$handle.css({left: newHandleLeft});\n        amount = handleLeftToAmount.call(this, item, newHandleLeft);\n\n        updatePreviewColor.call(this, item, amountToColor.call(this, item, amount), e);\n\n        mouseObj = null;\n        da = null;\n      })\n      .on(ENM[\"mouseup\"] + \".ax6palette-\" + this.instanceId, (e) => {\n        handleMoveEvent.off.call(this);\n        U.stopEvent(e);\n      })\n      .on(\"mouseleave.ax6palette-\" + this.instanceId, (e) => {\n        handleMoveEvent.off.call(this);\n        U.stopEvent(e);\n      });\n\n    jQuery(document.body)\n      .attr('unselectable', 'on')\n      .css('user-select', 'none')\n      .on('selectstart', false);\n  },\n  \"off\"() {\n    this.xvar.resizerLived = false;\n\n    jQuery(document.body)\n      .off(ENM[\"mousemove\"] + \".ax6palette-\" + this.instanceId)\n      .off(ENM[\"mouseup\"] + \".ax6palette-\" + this.instanceId)\n      .off(\"mouseleave.ax6palette-\" + this.instanceId);\n\n    jQuery(document.body)\n      .removeAttr('unselectable')\n      .css('user-select', 'auto')\n      .off('selectstart');\n  }\n};\nconst repaint = function (selectedColor) {\n  let box = {\n    width: this.$target.innerWidth(),\n    height: this.$target.innerHeight(),\n  };\n\n  // 패널 프레임 초기화\n  this.$target.html(mustache.render(frameTmpl.call(this), {}, this.config.columnKeys));\n\n\n  // 각 패널들을 캐싱~\n  this.$ = {\n    \"root\": this.$target.find('[data-ax6palette-container=\"root\"]'),\n    \"colors\": this.$target.find('[data-ax6palette-container=\"colors\"]'),\n    \"controls\": this.$target.find('[data-ax6palette-container=\"controls\"]'),\n  };\n\n  // todo : controls 나중에 고민하여 구현\n  // this.$[\"controls\"].css({height: this.config.controls.height});\n\n  /// colors.list 색상 범위 결정 / 초기화\n  this.config.colors.list.forEach((c) => {\n    c._color = U.color(c.value);\n    c._selectedColor = c._color.getHexValue();\n    if (c._color.r == 0 && c._color.g == 0 && c._color.b == 0) {\n      c._amount = this.config.colors.slider.amount;\n      c._uniqColor = \"black\";\n      c._color0value = \"#\" + c._color.lighten(this.config.colors.slider.amount).getHexValue();\n      c._color1value = \"#\" + c._color.lighten(this.config.colors.slider.amount / 2).getHexValue();\n      c._color2value = \"#\" + c._color.getHexValue();\n    } else if (c._color.r == 255 && c._color.g == 255 && c._color.b == 255) {\n      c._amount = -this.config.colors.slider.amount;\n      c._uniqColor = \"white\";\n      c._color0value = \"#\" + c._color.getHexValue();\n      c._color1value = \"#\" + c._color.darken(this.config.colors.slider.amount / 2).getHexValue();\n      c._color2value = \"#\" + c._color.darken(this.config.colors.slider.amount).getHexValue();\n    } else {\n      c._amount = 0;\n      c._color0value = \"#\" + c._color.lighten(this.config.colors.slider.amount).getHexValue();\n      c._color1value = \"#\" + c._color.getHexValue();\n      c._color2value = \"#\" + c._color.darken(this.config.colors.slider.amount).getHexValue();\n    }\n  });\n\n  // 색생조절 핸들의 위치 조정this.config.colors.list[minDiffColorIndex]\n  this.config.colors.slider.handleLeft = -this.config.colors.slider.handleWidth / 2;\n  this.config.colors.slider.handleTop = -this.config.colors.slider.handleHeight / 2;\n\n  // 팔렛트 컬러 패널 초기화\n  this.$[\"colors\"].html(mustache.render(colorsTmpl.call(this), this.config, this.config.columnKeys));\n\n  this.$[\"colors\"].find('[data-ax6palette-color-index]').each((elIdx, el) => {\n    let idx = el.getAttribute(\"data-ax6palette-color-index\");\n    let color = this.config.colors.list[idx];\n    let item = jQuery.extend({}, color);\n    item._index = idx;\n    item.$item = jQuery(el);\n    item.$preview = item.$item.find('[data-panel=\"color\"]');\n    item.$label = item.$item.find('[data-panel=\"color-label\"]');\n    item.$track = item.$item.find('[data-panel=\"color-track\"]');\n    item.$handle = item.$item.find('[data-panel=\"color-handle\"]');\n    bindHandle.call(this, item);\n    /////\n    this.colors.push(item);\n  });\n\n  if (selectedColor) {\n    this.setSelectedColor(selectedColor);\n  }\n};\n/* ~~~~~~~~~~~~~~~~~~ end of private  ~~~~~~~~~~~~~~~~~~~~ */\n\n/**\n * @class\n */\nclass AX6UIPalette extends AX6UICore {\n  /**\n   * @constructor\n   * @param config\n   * @param [config.theme]\n   * @param config.target\n   * @param [config.animateTime]\n   * @param {String} [config.selectedColor]\n   * @param {Object} [config.colors]\n   * @param {Object} [config.colors.preview]\n   * @param {Number} [config.colors.preview.width=24]\n   * @param {Number} [config.colors.preview.height=24]\n   * @param {Number} [config.colors.preview.cellWidth=30]\n   * @param {Object} [config.colors.label]\n   * @param {Number} [config.colors.label.width=80]\n   * @param {Object} [config.colors.slider]\n   * @param {Number} [config.colors.slider.trackHeight=8]\n   * @param {Number} [config.colors.slider.amount=32]\n   * @param {Number} [config.colors.slider.handleWidth=18]\n   * @param {Number} [config.colors.slider.handleHeight=18]\n   * @param {Object[]} [config.colors.list=[red,orange,yellow,green,blue,purple,black,white]]\n   * @param {String} config.colors.list[].label\n   * @param {String} config.colors.list[].value\n   * @param {Object} [config.controls]\n   * @param {Number} [config.controls.height=0]\n   * @param [config.onStateChanged]\n   * @param [config.onClick]\n   * @param [config.onUpdateColor]\n   * @example\n   * ```js\n   * myPalette = new Palette({\n     *  target: $('[data-ax5palette=\"01\"]'),\n     *  onClick: function (hexColor) {\n     *      alert(hexColor);\n     *  }\n     * });\n   *\n   * myPalette = new Palette({\n     *  target: $('[data-ax5palette=\"01\"]'),\n     *  colors: {\n     *      list: [\n     *          {label: \"red\", value: \"#ff0000\"},\n     *          {label: \"orange\", value: \"#ff9802\"},\n     *          {label: \"yellow\", value: \"#ffff00\"},\n     *          {label: \"skyblue\", value: \"#84e4ff\"},\n     *          {label: \"white\", value: \"#ffffff\"}\n     *      ]\n     *  }\n     *  onClick: function (hexColor) {\n     *\n     *  }\n     * });\n   * ```\n   */\n  constructor(config) {\n    super();\n\n    /**\n     * @member {JSON}\n     * @param config\n     * @param config.target\n     * @param [config.theme=default]\n     * @param [config.clickEventName=\"click\"]\n     * @param [config.animateTime=100]\n     * @param [config.colors]\n     * @param [config.colors.preview]\n     * @param [config.colors.preview.width=24]\n     * @param [config.colors.preview,height=24]\n     * @param [config.colors.preview.cellWidth=30]\n     * @param [config.colors.label]\n     * @param [config.colors.label.width=80]\n     * @param [config.colors.slider]\n     * @param [config.colors.slider.trackHeight=8]\n     * @param [config.colors.slider.amount=32]\n     * @param [config.colors.slider.handleWidth=18]\n     * @param [config.colors.slider.handleHeight=18]\n     * @param [config.colors.list]\n     * @param [config.colors.list[].label]\n     * @param [config.colors.list[].value]\n     * @param [config.controls]\n     * @param [config.controls.height=0]\n     * @param [config.columnKeys={}]\n     * @param [config.onStateChanged]\n     * @param [config.onClick]\n     */\n    this.config = {\n      clickEventName: \"click\",\n      theme: 'default',\n      animateTime: 100,\n      colors: {\n        preview: {\n          width: 24,\n          height: 24,\n          cellWidth: 30\n        },\n        label: {\n          width: 80\n        },\n        slider: {\n          trackHeight: 8,\n          amount: 32,\n          handleWidth: 18,\n          handleHeight: 18,\n        },\n        list: [\n          {label: \"red\", value: \"#ff0000\"},\n          {label: \"orange\", value: \"#ff9802\"},\n          {label: \"yellow\", value: \"#ffff00\"},\n          {label: \"green\", value: \"#00ff36\"},\n          {label: \"blue\", value: \"#0000ff\"},\n          {label: \"purple\", value: \"#ba00ff\"},\n          //{label: \"skyblue\", value: \"#84e4ff\"},\n          //{label: \"pink\", value: \"#ff77c4\"},\n          {label: \"black\", value: \"#000000\"},\n          {label: \"white\", value: \"#ffffff\"},\n        ],\n      },\n      controls: {\n        height: 0,\n      },\n      columnKeys: {}\n    };\n    jQuery.extend(true, this.config, config);\n\n    // 멤버 변수 초기화\n    /**\n     * @member {Object}\n     */\n    this.$target = null;\n    /**\n     * @member {Object}\n     */\n    this.xvar = {};\n    /**\n     * @member {Array}\n     */\n    this.colors = [];\n\n    this.init();\n  }\n\n  /**\n   * @method\n   * @param config\n   * @param [config.theme]\n   * @param config.target\n   * @param [config.animateTime]\n   * @param {String} [config.selectedColor]\n   * @param {Object} [config.colors]\n   * @param {Object} [config.colors.preview]\n   * @param {Number} [config.colors.preview.width=24]\n   * @param {Number} [config.colors.preview.height=24]\n   * @param {Number} [config.colors.preview.cellWidth=30]\n   * @param {Object} [config.colors.label]\n   * @param {Number} [config.colors.label.width=80]\n   * @param {Object} [config.colors.slider]\n   * @param {Number} [config.colors.slider.trackHeight=8]\n   * @param {Number} [config.colors.slider.amount=32]\n   * @param {Number} [config.colors.slider.handleWidth=18]\n   * @param {Number} [config.colors.slider.handleHeight=18]\n   * @param {Object[]} [config.colors.list=[red,orange,yellow,green,blue,purple,black,white]]\n   * @param {String} config.colors.list[].label\n   * @param {String} config.colors.list[].value\n   * @param {Object} [config.controls]\n   * @param {Number} [config.controls.height=0]\n   * @param [config.onStateChanged]\n   * @param [config.onClick]\n   * @param [config.onUpdateColor]\n   */\n  init() {\n    this.onStateChanged = this.config.onStateChanged;\n    delete this.config.onStateChanged;\n    this.onClick = this.config.onClick;\n    delete this.config.onClick;\n    this.onUpdateColor = this.config.onUpdateColor;\n    delete this.config.onUpdateColor;\n\n    if (!this.config.target) {\n      console.log(info.getError(\"ax6palette\", \"401\", \"setConfig\"));\n    }\n    this.$target = jQuery(this.config.target);\n\n    setTimeout(() => {\n      repaint.call(this, (this.config.selectedColor || \"\").trim()); // 팔렛트 그리기.\n    });\n\n    // init 호출 여부\n    this.initOnce();\n  }\n\n  /**\n   * @method\n   */\n  initOnce() {\n    if (this.initialized) return this;\n    this.initialized = true;\n  }\n\n  /**\n   * @method\n   * @return {AX6UIPalette}\n   */\n  repaint() {\n    repaint.call(this);\n    return this;\n  }\n\n  /**\n   * @method\n   * @param selectedColor\n   * @return {AX6UIPalette}\n   */\n  setSelectedColor(selectedColor) {\n    let sColor = U.color(selectedColor.trim());\n    // 지정된 색이 가장 가까운 파렛 검색\n    let minDiffColor = 255 * 3, minDiffColorIndex = -1;\n\n    this.colors.forEach(function (c, cidx) {\n      let c1hsl = c._color.getHsl(), c2hsl = sColor.getHsl();\n      let diffColor = Math.abs(c1hsl.h - c2hsl.h) + Math.abs(c1hsl.s - c2hsl.s) + Math.abs(c1hsl.l - c2hsl.l);\n      if (diffColor < minDiffColor) {\n        minDiffColor = diffColor;\n        minDiffColorIndex = cidx;\n      }\n    });\n\n    if (minDiffColorIndex > -1) {\n      let amount, handleLeft,\n        item = this.colors[minDiffColorIndex];\n\n      item._amount = colorToAmount.call(this, item, sColor);\n      handleLeft = amountToHandleLeft.call(this, item, item._amount);\n      //handleLeft = handleLeft < 0 ? 0 : handleLeft > item.trackWidth ? item.trackWidth : handleLeft;\n      item.$handle.css({left: handleLeft});\n\n      amount = handleLeftToAmount.call(this, item, handleLeft);\n      updatePreviewColor.call(this, item, amountToColor.call(this, item, amount));\n    }\n\n    return this;\n  }\n}\n\nexport default AX6UIPalette;"]}