colorPicker
This commit is contained in:
oc
parent
05693a1a81
commit
42c4301472
@ -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;
|
||||
};
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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'>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user