feat: 平台首页商品装修添加字体颜色和更新装修组件库版本

package.json

@@ -65,7 +65,7 @@
     "crypto-js": "^4.0.0",
     "god": "^0.2.4",
     "lingxi-design": "^2.0.1",
-    "lingxi-design-ui": "^2.0.6",
+    "lingxi-design-ui": "^2.0.7",
     "lingxi-editor-core": "^2.0.1",
     "lingxi-web": "^1.0.6",
     "lint-staged": "^10.0.7",

src/pages/pageCustomized/components/SettingPanel/index.tsx

@@ -15,7 +15,7 @@ const SettingPanel: React.FC<SettingPanelPropsType> = (props) => {
   const { children, footer, onOK = () => {}, onCancel, confirmLoading = false } = props
 
   return (
-    <div className={styles.setting_panel}>
+    <div className={styles.setting_panel} id="setting_panel">
       <div className={styles.setting_panel_body}>
         {children}
       </div>

src/pages/pageCustomized/settingsPanel/propsSettings/components/PlatformGoods/index.less

@@ -107,6 +107,14 @@
   }
 }
 
+.color_picker {
+  position: relative;
+  top: 4px;
+  width: 24px;
+  height: 24px;
+  background-color: #303133;
+}
+
 .goods_item {
   display: flex;
   flex-wrap: nowrap;

src/pages/pageCustomized/settingsPanel/propsSettings/components/PlatformGoods/index.tsx

-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { Modal, Input, Select, Button, Drawer, message, Radio } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import { ColumnType } from 'antd/lib/table/interface';
@@ -20,8 +20,8 @@ import GoodsItem from './GoodsItem'
 import { cloneDeep } from 'lodash'
 import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './effect'
 import { productSchema } from './schema'
+import Colorpicker from '@/utils/colorpicker.js'
 import styles from './index.less'
-import { useEffect } from 'react';
 
 interface GoodsItemType {
   advertImg: string,
@@ -35,6 +35,7 @@ interface GoodsItemType {
   secondId: string | undefined,
   shopId:  number | undefined,
   thirdId: string | undefined,
+  fontColor: string
 }
 interface ShopInfo {
 	id: number;
@@ -115,10 +116,24 @@ const PlatformGoods: React.FC<PlatformGoodsProps> = (props) => {
     return newList
   }
 
+  const initColorPicker = () => {
+    // const obj = document.getElementById("picker");
+    Colorpicker.create({
+      el: "color-picker",
+      box: "drawer-box",
+      color: dataInfo.fontColor || "#303133",
+      change: (elem, hex) => {
+        elem.style.backgroundColor = hex;
+        changeNewProps('dataInfo', Object.assign(dataInfo, { fontColor: hex }))
+      }
+    })
+  }
+
   useEffect(() => {
     const enterpriseMallList = GlobalConfig.web.shopInfo.filter((item) => item.type === 1 && item.environment === 1)
     setMallSelectList(initMallList(enterpriseMallList))
     fetchCategoryTree()
+    initColorPicker()
   }, [])
 
   const fetchCategoryTree = () => {
@@ -240,13 +255,6 @@ const PlatformGoods: React.FC<PlatformGoodsProps> = (props) => {
     ref.current.reload(values)
   }
 
-  const assignData = (data: any, assignInfo: any) => {
-    const newData = cloneDeep(data)
-    const newObj = Object.assign(newData, {...assignInfo})
-    console.log(newObj, 'newObj')
-    return newObj
-  }
-
   const handleCategoryChange = (value: any, type: string) => {
     switch (type) {
       case 'first':
@@ -451,6 +459,12 @@ const PlatformGoods: React.FC<PlatformGoodsProps> = (props) => {
               <Input className={styles.setting_line_addItem_input} value={dataInfo.describe}  maxLength={14} onChange={(e) => handleChangeForKey(e.target.value, 'describe')} />
             </div>
           </div>
+          <div className={styles.setting_line_addItem_line}>
+            <div className={cx(styles.setting_line_addItem_line_label, styles.height32)}>字体颜色:</div>
+            <div className={styles.setting_line_addItem_line_brief}>
+                <div className={cx(styles.color_picker)} id="color-picker"></div>
+            </div>
+          </div>
         </div>
         <div className={styles.setting_title}>
           <span>分类商品设置</span>

src/pages/pageCustomized/settingsPanel/propsSettings/index.tsx

@@ -148,6 +148,7 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
       onClose={onClose}
       width={drawerWidth}
       visible={drawerVisible}
+      className="drawer-box"
     >
       {renderDrawerComponent()}
     </Drawer>

src/utils/colorpicker.js

+// (function () {
+
+	const util = {
+		css: function (elem, obj) {
+			for (const i in obj) {
+				elem.style[i] = obj[i];
+			}
+		},
+		hasClass: function (elem, classN) {
+			const className = elem.getAttribute("class");
+			return className.indexOf(classN) != -1;
+		}
+	};
+
+	function Colorpicker(opt) {
+		if (this === window) throw `Colorpicker: Can't call a function directly`;
+		this.init(opt);
+	};
+
+	Colorpicker.prototype = {
+		init(opt) {
+
+			const { el, initColor = "rgb(255,0,0)", allMode = ['hex', 'rgb'], color = '' } = opt;
+			let elem = document.getElementById(el);
+      console.log('elem', elem)
+			if (!(elem && elem.nodeType && elem.nodeType === 1)) {
+				throw `Colorpicker: not found  ID:${el}  HTMLElement,not ${{}.toString.call(el)}`;
+			}
+
+			this.Opt = {
+				...opt,
+				el,
+				initColor,
+				allMode,
+				color
+			}
+
+			this.bindElem = elem; // 绑定的元素
+			this.elem_wrap = null; // 最外层容器
+			this.fixedBg = null; // 拾色器后面固定定位的透明div 用于点击隐藏拾色器
+			this.elem_colorPancel = null; // 色彩面板
+			this.elem_picker = null; // 拾色器色块按钮
+			this.elem_barPicker1 = null; // 颜色条
+			this.elem_hexInput = null; // 显示hex的表单
+			this.elem_showColor = null; // 显示当前颜色
+			this.elem_showModeBtn = null; // 切换输入框模式按钮
+			this.elem_inputWrap = null; // 输入框外层容器
+
+			this.pancelLeft = 0;
+			this.pancelTop = 0;
+
+			this.downX = 0;
+			this.downY = 0;
+			this.moveX = 0;
+			this.moveY = 0;
+
+			this.pointLeft = 0;
+			this.pointTop = 0;
+
+			this.current_mode = 'hex'; // input框当前的模式
+
+			this.rgba = { r: 0, g: 0, b: 0, a: 1 };
+			this.hsb = { h: 0, s: 100, b: 100 };
+
+
+			// eslint-disable-next-line @typescript-eslint/no-this-alias
+			const _this = this, rgb = initColor.slice(4, -1).split(",");
+
+			this.rgba.r = parseInt(rgb[0]);
+			this.rgba.g = parseInt(rgb[1]);
+			this.rgba.b = parseInt(rgb[2]);
+
+			const body = opt.box ? document.getElementsByClassName(opt.box)[0] : document.getElementsByTagName("body")[0]
+			const	div = document.createElement("div");
+      console.log(body, 'body')
+			div.innerHTML = this.render();
+			body.appendChild(div);
+
+			this.elem_wrap = div;
+			this.fixedBg = div.children[0];
+			this.elem_colorPancel = div.getElementsByClassName("color-pancel")[0];
+			this.pancel_width = this.elem_colorPancel.offsetWidth;
+			this.pancel_height = this.elem_colorPancel.offsetHeight;
+			this.elem_picker = div.getElementsByClassName("pickerBtn")[0];
+			this.elem_colorPalette = div.getElementsByClassName("color-palette")[0];
+			this.elem_showColor = div.getElementsByClassName("colorpicker-showColor")[0];
+			this.elem_barPicker1 = div.getElementsByClassName("colorBar-color-picker")[0];
+			/*   this.elem_barPicker2 = div.getElementsByClassName("colorBar-opacity-picker")[0]; */
+			this.elem_hexInput = div.getElementsByClassName("colorpicker-hexInput")[0];
+			this.elem_showModeBtn = div.getElementsByClassName("colorpicker-showModeBtn")[0];
+			this.elem_inputWrap = div.getElementsByClassName("colorpicker-inputWrap")[0];
+			/*  this.elem_opacityPancel = this.elem_barPicker2.parentNode.parentNode.children[1]; */
+
+			// var rect = this.bindElem.getBoundingClientRect();
+			elem = this.bindElem;
+			let top = elem.offsetTop;
+			let left = elem.offsetLeft;
+			while (elem.offsetParent) {
+				top += elem.offsetParent.offsetTop;
+				left += elem.offsetParent.offsetLeft;
+				elem = elem.offsetParent;
+			}
+
+			this.pancelLeft = left + this.elem_colorPalette.clientWidth;
+			this.pancelTop = top + this.bindElem.offsetHeight;
+			util.css(div, {
+				"position": "absolute",
+				"zIndex": 2,
+				"display": 'none',
+				"left": left + "px",
+				"top": top + this.bindElem.offsetHeight + "px"
+			});
+
+			this.bindMove(this.elem_colorPancel, this.setPosition, true);
+			this.bindMove(this.elem_barPicker1.parentNode, this.setBar, false);
+			/*  this.bindMove(this.elem_barPicker2.parentNode,this.setBar,false); */
+
+			this.bindElem.addEventListener("click", function () {
+        console.log('click')
+				_this.show();
+			}, false);
+
+			this.fixedBg.addEventListener("click", function (e) {
+				_this.hide();
+			}, false)
+
+			this.elem_showModeBtn.addEventListener("click", function () {
+				_this.switch_current_mode();
+			}, false)
+
+			this.elem_wrap.addEventListener("input", function (e) {
+				const target = e.target, value = target.value;
+				_this.setColorByInput(value);
+			}, false);
+
+			this.elem_colorPalette.addEventListener("click", function (e) {
+				if (e.target.tagName.toLocaleLowerCase() == "p") {
+					const colorStr = e.target.style.background;
+					const rgb = colorStr.slice(4, -1).split(",");
+					const rgba = {
+						r: parseInt(rgb[0]),
+						g: parseInt(rgb[1]),
+						b: parseInt(rgb[2])
+					}
+					switch (_this.current_mode) {
+						case "hex":
+							_this.setColorByInput("#" + _this.rgbToHex(rgba))
+							break;
+						case 'rgb':
+							const inputs = _this.elem_wrap.getElementsByTagName("input")
+							inputs[0].value = rgba.r;
+							inputs[1].value = rgba.g;
+							inputs[2].value = rgba.b;
+							_this.setColorByInput(colorStr)
+							/* 	_this.hsb = _this.rgbToHsb(rgba); */
+							break;
+					}
+
+				}
+			}, false);
+
+			(color != '' && this.setColorByInput(color));
+		},
+		render: function () {
+			const tpl =
+				`<div style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;"></div>
+				<div style="position: inherit;z-index: 100;display: flex;box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px;">
+					<div style='width:180px;padding:10px;background: #f9f9f9;display: flex;flex-flow: row wrap;align-content: space-around;justify-content: space-around;' class='color-palette'>
+						${this.getPaletteColorsItem()}
+					</div>
+					<div class="colorpicker-pancel" style="background: rgb(255, 255, 255);box-sizing: initial; width: 225px; font-family: Menlo;">
+						<div style="width: 100%; padding-bottom: 55%; position: relative; border-radius: 2px 2px 0px 0px; overflow: hidden;">
+							<div class="color-pancel" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b})">
+								<style>
+									.saturation-white {background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));background: linear-gradient(to right, #fff, rgba(255,255,255,0));}
+									.saturation-black {background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));background: linear-gradient(to top, #000, rgba(0,0,0,0));}
+								</style>
+								<div class="saturation-white" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
+									<div class="saturation-black" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
+									</div>
+									<div class="pickerBtn" style="position: absolute; top: 0%; left: 100%; cursor: default;">
+										<div style="width: 12px; height: 12px; border-radius: 6px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; transform: translate(-6px, -6px);">
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div style="padding: 0 16px 20px;">
+							<div class="flexbox-fix" style="display: flex;align-items: center;height: 40px;">
+								<div style="width: 32px;">
+									<div style="width: 16px; height: 16px; border-radius: 8px; position: relative; overflow: hidden;">
+										<div class="colorpicker-showColor" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; background:rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b}); z-index: 2;"></div>
+										<div class="" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==&quot;) left center;"></div>
+									</div>
+								</div>
+								<div style="-webkit-box-flex: 1; flex: 1 1 0%;"><div style="height: 10px; position: relative;">
+									<div style="position: absolute; top: 0px;right: 0px; bottom: 0px; left: 0px;">
+										<div class="hue-horizontal" style="padding: 0px 2px; position: relative; height: 100%;">
+											<style>
+												.hue-horizontal {background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}
+												.hue-vertical {background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}
+											</style>
+											<div  class="colorBar-color-picker" style="position: absolute; left: 0%;">
+												<div style="width: 12px; height: 12px; border-radius: 6px; transform: translate(-6px, -1px); background-color: rgb(248, 248, 248); box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;">
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="flexbox-fix" style="display: flex;">
+							<div class="flexbox-fix colorpicker-inputWrap" style="-webkit-box-flex: 1; flex: 1 1 0%; display: flex; margin-left: -6px;">
+									${this.getInputTpl()}
+							</div>
+							<div class="colorpicker-showModeBtn" style="width: 32px; text-align: right; position: relative;">
+								<div style="margin-right: -4px;  cursor: pointer; position: relative;">
+									<svg viewBox="0 0 24 24" style="width: 24px; height: 24px; border: 1px solid transparent; border-radius: 5px;"><path fill="#333" d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"></path><path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"></path></svg>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>`;
+			return tpl;
+		},
+		getInputTpl: function () {
+			let current_mode_html = "";
+			switch (this.current_mode) {
+				case 'hex':
+					const hex = "#" + this.rgbToHex(this.HSBToRGB(this.hsb));
+					current_mode_html += `
+							<div style="padding-left: 6px; width: 100%;">
+								<div style="position: relative;">
+									<input class="colorpicker-hexInput" value="${hex}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">
+									<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">hex</span>
+								</div>
+							</div>`;
+					break;
+				case 'rgb':
+					for (let i = 0; i < 3; i++) {
+						current_mode_html +=
+							`<div style="padding-left: 6px; width: 100%;">
+								<div style="position: relative;">
+									<input class="colorpicker-hexInput" value="${this.rgba['rgb'[i]]}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">
+									<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">${'rgb'[i]}</span>
+								</div>
+							</div>`;
+					}
+          break;
+				default:
+          break;
+			}
+			return current_mode_html;
+		},
+		getPaletteColorsItem: function () {
+			let str = '';
+			const palette = ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)",
+				"rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)",
+				"rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)",
+				"rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)",
+				"rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)",
+				"rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)"]
+			palette.forEach(item => str += `<p style='width:20px;height:20px;background:${item};margin:0 5px;border: solid 1px #d0d0d0;'></p>`)
+			return str;
+		},
+		setPosition(x, y) {
+			const LEFT = parseInt(x - this.pancelLeft),
+				TOP = parseInt(y - this.pancelTop);
+
+			this.pointLeft = Math.max(0, Math.min(LEFT, this.pancel_width));
+			this.pointTop = Math.max(0, Math.min(TOP, this.pancel_height));
+
+			util.css(this.elem_picker, {
+				left: this.pointLeft + "px",
+				top: this.pointTop + "px"
+			})
+			this.hsb.s = parseInt(100 * this.pointLeft / this.pancel_width);
+			this.hsb.b = parseInt(100 * (this.pancel_height - this.pointTop) / this.pancel_height);
+
+			this.setShowColor();
+			this.setValue(this.rgba);
+
+		},
+		setBar: function (elem, x) {
+			const elem_bar = elem.getElementsByTagName("div")[0],
+				rect = elem.getBoundingClientRect(),
+				elem_width = elem.offsetWidth,
+				X = Math.max(0, Math.min(x - rect.x, elem_width));
+
+			if (elem_bar === this.elem_barPicker1) {
+				util.css(elem_bar, {
+					left: X + "px"
+				});
+				this.hsb.h = parseInt(360 * X / elem_width);
+			} else {
+				util.css(elem_bar, {
+					left: X + "px"
+				});
+				this.rgba.a = X / elem_width;
+			}
+
+			this.setPancelColor(this.hsb.h);
+			this.setShowColor();
+			this.setValue(this.rgba);
+
+		},
+		setPancelColor: function (h) {
+			const rgb = this.HSBToRGB({ h: h, s: 100, b: 100 });
+
+			util.css(this.elem_colorPancel, {
+				background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + this.rgba.a + ')'
+			});
+		},
+		setShowColor: function () {
+			const rgb = this.HSBToRGB(this.hsb);
+
+			this.rgba.r = rgb.r;
+			this.rgba.g = rgb.g;
+			this.rgba.b = rgb.b;
+
+			util.css(this.elem_showColor, {
+				background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + this.rgba.a + ')'
+			});
+		},
+		setValue: function (rgb) {
+			const hex = "#" + this.rgbToHex(rgb);
+			this.elem_inputWrap.innerHTML = this.getInputTpl();
+			this.Opt.change(this.bindElem, hex);
+		},
+		setColorByInput: function (value) {
+			// eslint-disable-next-line @typescript-eslint/no-this-alias
+			const _this = this;
+			switch (this.current_mode) {
+				case "hex":
+					value = value.slice(1);
+					if (value.length == 3) {
+						value = '#' + value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
+						this.hsb = this.hexToHsb(value);
+					} else if (value.length == 6) {
+						this.hsb = this.hexToHsb(value);
+					}
+					break;
+				case 'rgb':
+					const inputs = this.elem_wrap.getElementsByTagName("input"),
+						rgb = {
+							r: inputs[0].value ? parseInt(inputs[0].value) : 0,
+							g: inputs[1].value ? parseInt(inputs[1].value) : 0,
+							b: inputs[2].value ? parseInt(inputs[2].value) : 0
+						};
+
+					this.hsb = this.rgbToHsb(rgb);
+			}
+			this.changeViewByHsb();
+		},
+		changeViewByHsb: function () {
+			this.pointLeft = parseInt(this.hsb.s * this.pancel_width / 100);
+			this.pointTop = parseInt((100 - this.hsb.b) * this.pancel_height / 100);
+			util.css(this.elem_picker, {
+				left: this.pointLeft + "px",
+				top: this.pointTop + "px"
+			});
+
+			this.setPancelColor(this.hsb.h);
+			this.setShowColor();
+			util.css(this.elem_barPicker1, {
+				left: this.hsb.h / 360 * (this.elem_barPicker1.parentNode.offsetWidth) + "px"
+			});
+
+			const hex = '#' + this.rgbToHex(this.HSBToRGB(this.hsb));
+			this.Opt.change(this.bindElem, hex);
+		},
+		switch_current_mode: function () {
+			this.current_mode = this.current_mode == 'hex' ? 'rgb' : 'hex';
+			this.elem_inputWrap.innerHTML = this.getInputTpl();
+		},
+		bindMove: function (elem, fn, bool) {
+			// eslint-disable-next-line @typescript-eslint/no-this-alias
+			const _this = this;
+
+			elem.addEventListener("mousedown", function (e) {
+				_this.downX = e.pageX;
+				_this.downY = e.pageY;
+				bool ? fn.call(_this, _this.downX, _this.downY) : fn.call(_this, elem, _this.downX, _this.downY);
+
+				document.addEventListener("mousemove", mousemove, false);
+				function mousemove(e) {
+					_this.moveX = e.pageX;
+					_this.moveY = e.pageY;
+					bool ? fn.call(_this, _this.moveX, _this.moveY) : fn.call(_this, elem, _this.moveX, _this.moveY);
+					e.preventDefault();
+				}
+				document.addEventListener("mouseup", mouseup, false);
+				function mouseup(e) {
+
+					document.removeEventListener("mousemove", mousemove, false)
+					document.removeEventListener("mouseup", mouseup, false)
+				}
+			}, false);
+		},
+		show: function () {
+			util.css(this.elem_wrap, {
+				"display": "block"
+			})
+		},
+		hide: function () {
+			util.css(this.elem_wrap, {
+				"display": "none"
+			})
+		},
+		HSBToRGB: function (hsb) {
+			const rgb = {};
+			let h = Math.round(hsb.h);
+			const s = Math.round(hsb.s * 255 / 100);
+			const v = Math.round(hsb.b * 255 / 100);
+
+			if (s == 0) {
+				rgb.r = rgb.g = rgb.b = v;
+			} else {
+				const t1 = v;
+				const t2 = (255 - s) * v / 255;
+				const t3 = (t1 - t2) * (h % 60) / 60;
+
+				if (h == 360) h = 0;
+
+				if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3 }
+				else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3 }
+				else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3 }
+				else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3 }
+				else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3 }
+				else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3 }
+				else { rgb.r = 0; rgb.g = 0; rgb.b = 0 }
+			}
+
+			return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
+		},
+		rgbToHex: function (rgb) {
+			const hex = [
+				rgb.r.toString(16),
+				rgb.g.toString(16),
+				rgb.b.toString(16)
+			];
+			hex.map(function (str, i) {
+				if (str.length == 1) {
+					hex[i] = '0' + str;
+				}
+			});
+
+			return hex.join('');
+		},
+		hexToRgb: function (hex) {
+			const newHex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
+			return { r: newHex >> 16, g: (newHex & 0x00FF00) >> 8, b: (newHex & 0x0000FF) };
+		},
+		hexToHsb: function (hex) {
+			return this.rgbToHsb(this.hexToRgb(hex));
+		},
+		rgbToHsb: function (rgb) {
+			const hsb = { h: 0, s: 0, b: 0 };
+			const min = Math.min(rgb.r, rgb.g, rgb.b);
+			const max = Math.max(rgb.r, rgb.g, rgb.b);
+			const delta = max - min;
+			hsb.b = max;
+			hsb.s = max != 0 ? 255 * delta / max : 0;
+			if (hsb.s != 0) {
+				if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
+				else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
+				else hsb.h = 4 + (rgb.r - rgb.g) / delta;
+			} else hsb.h = -1;
+			hsb.h *= 60;
+			if (hsb.h < 0) hsb.h += 360;
+			hsb.s *= 100 / 255;
+			hsb.b *= 100 / 255;
+			return hsb;
+		}
+	}
+
+	Colorpicker.create = function (opt) {
+		return new Colorpicker(opt)
+	}
+
+	window.Colorpicker = Colorpicker;
+
+  module.exports = Colorpicker
+// })()