From 42c43014726b7952ed2991c8a857a03e5021cfab Mon Sep 17 00:00:00 2001 From: oc Date: Fri, 4 Jan 2019 02:26:12 +0800 Subject: [PATCH] colorPicker --- _server/colorPicker/jsColor.js | 92 +++++++++++++++++----------------- _server/css/editor.css | 5 +- _server/css/editor_mobile.css | 18 +++++++ editor-mobile.html | 10 +++- editor.html | 7 +-- 5 files changed, 79 insertions(+), 53 deletions(-) diff --git a/_server/colorPicker/jsColor.js b/_server/colorPicker/jsColor.js index c7e8365d..0dbc608c 100644 --- a/_server/colorPicker/jsColor.js +++ b/_server/colorPicker/jsColor.js @@ -118,8 +118,8 @@ } colorPickers.current = colorPickers[index]; } - } - focusListener = function(e) { + }, + createListener = function(e) { elm = document.getElementById("colorPicker"); var input = elm, position = window.ColorPicker.getOrigin(input), @@ -154,7 +154,7 @@ } }, 10); }, - mousDownListener = function(e) { + hideListener = function(e) { var colorPicker = colorPickers.current, colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined), animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0, @@ -180,15 +180,8 @@ colorPickerUI.parentNode.style.display = 'none'; } }; - button = document.getElementById("colorSwitch"); - button[onOff]('click', focusListener); elm[onOff]('input', inputListener); - - if (!colorPickers.evt || off) { - colorPickers.evt = true; // prevent new eventListener for window - - window[onOff]('mousedown', mousDownListener); - } + window.jsColorPicker.create = createListener; }, // this is a way to prevent data binding on HTMLElements colorPickers = window.jsColorPicker.colorPickers || [], @@ -272,19 +265,42 @@ var colors = jsColorPicker('input.color', { appendTo: document.getElementById("colorPanel"), size: 1, }); -function doHide() { - var oDiv = document.getElementById("colorPanel"); - if (oDiv.style.display == "none"){ - oDiv.style.display = "inline-block"; - } else { - oDiv.style.display = "none"; - } + +function openColorFromButton() { + delete window.jsColorPicker.confirm; + triggerColorPicker('414px', '53px'); } -function copyColor() { + +function confirmColor() { var colorPicker = document.getElementById("colorPicker"); - colorPicker.select(); - document.execCommand("Copy"); - doHide(); + if (window.jsColorPicker.confirm) { /* 存在块 */ + // 检测需要是合法数值 + var val = colorPicker.value; + if (/^[0-9 ]+,[0-9 ]+,[0-9 ]+,[0-9. ]+$/.test(val)) val = "rgba("+val+")"; + else if (/^[0-9 ]+,[0-9 ]+,[0-9 ]+$/.test(val)) val = "rgba("+val+",1)"; + else val = null; + if (val) window.jsColorPicker.confirm(val); + } + else { + colorPicker.select(); + document.execCommand("Copy"); + } + + triggerColorPicker(); +} + +function triggerColorPicker(left, top) { + var colorPanel = document.getElementById('colorPanel'); + if (colorPanel.style.display=='none' && left && top) { + colorPanel.style.display = "inline-block"; + colorPanel.style.left = left; + colorPanel.style.top = top; + window.jsColorPicker.create(); + } + else { + colorPanel.style.display = 'none'; + delete window.jsColorPicker.confirm; + } } Blockly.FieldColour.prototype.createWidget_ = function() { @@ -304,18 +320,11 @@ Blockly.FieldColour.prototype.createWidget_ = function() { var targetf=args[args.indexOf(self.name)-1] var getValue=function(){ - return self.getValue() // css颜色 + // return self.getValue() // css颜色 + return pb.getFieldValue(targetf); // 也可以用 pb.getFieldValue(targetf) 获得颜色块左边的域的内容 } - var getPosition=function(){ - return [ - Blockly.WidgetDiv.DIV.style.left, - Blockly.WidgetDiv.DIV.style.top, - Blockly.WidgetDiv.DIV.style.zIndex - ] // 画在这个位置刚好是颜色块下面 - } - var setValue=function(newValue){ // css颜色 self.setValue(newValue) var c=new Colors(); @@ -324,21 +333,12 @@ Blockly.FieldColour.prototype.createWidget_ = function() { pb.setFieldValue(rgbatext, targetf) // 放在颜色块左边的域中 } - // 没看出来这个插件要怎么通过 getValue getPosition setValue 绑定 - - // 创建一个 input[type=color] 来选颜色 - - var a = document.createElement('input'); - a.setAttribute('type','color') - a.setAttribute('value',getValue()) - a.oninput=function(){ - setValue(a.value) - } - a.dispatchEvent(new MouseEvent("click", { - "view": window, - "bubbles": true, - "cancelable": false - })); + setTimeout(function () { + document.getElementById("colorPicker").value = getValue(); + window.jsColorPicker.confirm = setValue; + // 设置位置 + triggerColorPicker(Blockly.WidgetDiv.DIV.style.left, Blockly.WidgetDiv.DIV.style.top); + }); return picker; }; \ No newline at end of file diff --git a/_server/css/editor.css b/_server/css/editor.css index 77c0b298..f9b6edcf 100644 --- a/_server/css/editor.css +++ b/_server/css/editor.css @@ -23,13 +23,12 @@ body { } #colorPanel { - position: absolute; - left: 130px; - top: 30px; + position: fixed; width: 168px; height: 205px; z-index: 240; padding: 4px 6px; + margin-top: 6px; background-color: #F5F5F5; box-sizing: border-box; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); diff --git a/_server/css/editor_mobile.css b/_server/css/editor_mobile.css index 8da52de2..aac74c44 100644 --- a/_server/css/editor_mobile.css +++ b/_server/css/editor_mobile.css @@ -455,4 +455,22 @@ div.row .rowtd .rowtext{ top:100vw; bottom: 0; width: 100vw; +} + +#colorPanel { + position: fixed; + width: 168px; + height: 205px; + z-index: 240; + padding: 4px 6px; + margin-top: 6px; + background-color: #F5F5F5; + box-sizing: border-box; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); +} + +#colorPicker { + margin: 2px 0; + border-radius: 3px; + width: 90px; } \ No newline at end of file diff --git a/editor-mobile.html b/editor-mobile.html index 7dbf1883..2c71fd1d 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -202,6 +202,10 @@ + @@ -337,6 +341,7 @@