colorPicker

_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);
-
+                window.jsColorPicker.create = createListener;
-                if (!colorPickers.evt || off) {
-                    colorPickers.evt = true; // prevent new eventListener for window
-
-                    window[onOff]('mousedown', mousDownListener);
-                }
             },
             // 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");
+function openColorFromButton() {
-    if (oDiv.style.display == "none"){
+    delete window.jsColorPicker.confirm;
-        oDiv.style.display = "inline-block";
+    triggerColorPicker('414px', '53px');
-    } else {
-        oDiv.style.display = "none";
-    }
 }
-function copyColor() {
+
+function confirmColor() {
     var colorPicker = document.getElementById("colorPicker");
-    colorPicker.select();
+    if (window.jsColorPicker.confirm) { /* 存在块 */
-    document.execCommand("Copy");
+        // 检测需要是合法数值
-    doHide();
+        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 绑定
+    setTimeout(function () {
-
+        document.getElementById("colorPicker").value = getValue();
-    // 创建一个 input[type=color] 来选颜色
+        window.jsColorPicker.confirm = setValue;
-
+        // 设置位置
-    var a = document.createElement('input');
+        triggerColorPicker(Blockly.WidgetDiv.DIV.style.left, Blockly.WidgetDiv.DIV.style.top);
-    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
-    }));
 
     return picker;
 };

_server/css/editor.css

@@ -23,13 +23,12 @@ body {
 }
 
 #colorPanel {
-    position: absolute;
+    position: fixed;
-    left: 130px;
-    top: 30px;
     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);

_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;
 }

editor-mobile.html

@@ -202,6 +202,10 @@
                     <div class="searchLogo"></div>
                     <input type="text" id="searchBlock" placeholder="搜索图块"/>
                 </div>
+                <div id="colorPanel" class="cpPanel" style="display: none">
+                    <input class="color" id="colorPicker" value="255,215,0,1"/>
+                    <button onclick="confirmColor()">确定</button>
+                </div>
                 <xml id="toolbox" style="display:none">
                 </xml>
             </h3>
@@ -337,6 +341,7 @@
 <!-- <script>/* -->
 <div id='gameGroup' style='display:none'>
     <p id='mainTips'>请稍后...</p>
+    <img id='musicBtn'>
     <div id='startPanel'>
         <div id='startTop'>
             <div id='startTopProgressBar'>
@@ -436,7 +441,7 @@
         <img class="tools" id='img-book'>
         <img class="tools" id='img-fly'>
         <img class="tools" id='img-toolbox'>
-        <img class="tools" id='img-shop'>
+        <img class="tools" id='img-keyboard'>
         <img class="tools" id='img-save'>
         <img class="tools" id='img-load'>
         <img class="tools" id='img-settings'>
@@ -530,6 +535,9 @@ if (location.protocol.indexOf("http")!=0) {
 <script src="_server/CodeMirror/codeMirror.bundle.min.js"></script>
 <script src="_server/CodeMirror/jshint.min.js"></script>
 <script src="_server/CodeMirror/codeMirror.plugin.min.js"></script>
+<!-- colorPicker -->
+<script type="text/javascript" src="_server/colorPicker/color.all.min.js"></script>
+<script type="text/javascript" src="_server/colorPicker/jsColor.js"></script>
 
 </body>
 </html>

editor.html

@@ -196,10 +196,10 @@
                 <div style="position: relative; display: inline-block; margin-left: 10px">
                     <div class="searchLogo"></div>
                     <input type="text" id="searchBlock" placeholder="搜索图块"/>
-                    <button id = "colorSwitch" class="cpPanel" onclick="doHide()" style="margin-left:5px">颜色选择器</button>
+                    <button id = "colorSwitch" class="cpPanel" onclick="openColorFromButton()" style="margin-left:5px">颜色选择器</button>
                     <div id="colorPanel" class="cpPanel" style="display: none">
                         <input class="color" id="colorPicker" value="255,215,0,1"/>
-                        <button onclick="copyColor()">复制</button>
+                        <button onclick="confirmColor()">确定</button>
                     </div>
                 </div>
                 <xml id="toolbox" style="display:none">
@@ -324,6 +324,7 @@
 <!-- <script>/* -->
 <div id='gameGroup' style='display:none'>
     <p id='mainTips'>请稍后...</p>
+    <img id='musicBtn'>
     <div id='startPanel'>
         <div id='startTop'>
             <div id='startTopProgressBar'>
@@ -423,7 +424,7 @@
         <img class="tools" id='img-book'>
         <img class="tools" id='img-fly'>
         <img class="tools" id='img-toolbox'>
-        <img class="tools" id='img-shop'>
+        <img class="tools" id='img-keyboard'>
         <img class="tools" id='img-save'>
         <img class="tools" id='img-load'>
         <img class="tools" id='img-settings'>