Merge branch 'colorpicker' into v2.0

This commit is contained in:
Zhang Chen 2018-12-27 20:33:42 +08:00 committed by GitHub
commit ea8ec4fcfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 360 additions and 247 deletions

File diff suppressed because one or more lines are too long

View File

@ -385,13 +385,13 @@ return code;
*/; */;
setText_s setText_s
: '设置剧情文本的属性' '位置' SetTextPosition_List '偏移像素' EvalString? BGNL? '标题颜色' EvalString? '正文颜色' EvalString? '背景色' EvalString? '粗体' B_1_List BGNL? '标题字体大小' EvalString? '正文字体大小' EvalString? '打字间隔' EvalString? Newline : '设置剧情文本的属性' '位置' SetTextPosition_List '偏移像素' EvalString? BGNL? '标题颜色' EvalString? Colour '正文颜色' EvalString? Colour '背景色' EvalString? Colour BGNL? '粗体' B_1_List '标题字体大小' EvalString? '正文字体大小' EvalString? '打字间隔' EvalString? Newline
/* setText_s /* setText_s
tooltip : setText设置剧情文本的属性,颜色为RGB三元组或RGBA四元组,打字间隔为剧情文字添加的时间间隔,为整数或不填 tooltip : setText设置剧情文本的属性,颜色为RGB三元组或RGBA四元组,打字间隔为剧情文字添加的时间间隔,为整数或不填
helpUrl : https://h5mota.com/games/template/docs/#/event?id=settext%EF%BC%9A%E8%AE%BE%E7%BD%AE%E5%89%A7%E6%83%85%E6%96%87%E6%9C%AC%E7%9A%84%E5%B1%9E%E6%80%A7 helpUrl : https://h5mota.com/games/template/docs/#/event?id=settext%EF%BC%9A%E8%AE%BE%E7%BD%AE%E5%89%A7%E6%83%85%E6%96%87%E6%9C%AC%E7%9A%84%E5%B1%9E%E6%80%A7
default : [null,"","","","",null,"","",""] default : [null,"","",null,"",null,"",null,null,"","",""]
SetTextPosition_List_0 =SetTextPosition_List_0==='null'?'': ', "position": "'+SetTextPosition_List_0+'"'; SetTextPosition_List_0 =SetTextPosition_List_0==='null'?'': ', "position": "'+SetTextPosition_List_0+'"';
var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/; var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/;
if (EvalString_0) { if (EvalString_0) {
@ -1134,13 +1134,13 @@ return code;
*/; */;
setFg_0_s setFg_0_s
: '更改画面色调' EvalString '动画时间' Int? '不等待执行完毕' Bool Newline : '更改画面色调' EvalString Colour '动画时间' Int? '不等待执行完毕' Bool Newline
/* setFg_0_s /* setFg_0_s
tooltip : setFg: 更改画面色调,动画时间可不填 tooltip : setFg: 更改画面色调,动画时间可不填
helpUrl : https://h5mota.com/games/template/docs/#/event?id=setfg%EF%BC%9A%E6%9B%B4%E6%94%B9%E7%94%BB%E9%9D%A2%E8%89%B2%E8%B0%83 helpUrl : https://h5mota.com/games/template/docs/#/event?id=setfg%EF%BC%9A%E6%9B%B4%E6%94%B9%E7%94%BB%E9%9D%A2%E8%89%B2%E8%B0%83
default : ["255,255,255,1",500,false] default : ["255,255,255,1",'rgba(255,255,255,1)',500,false]
colour : this.soundColor colour : this.soundColor
var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/; var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/;
if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1'); if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
@ -1166,12 +1166,12 @@ return code;
*/; */;
screenFlash_s screenFlash_s
: '画面闪烁' EvalString '单次时间' Int '执行次数' Int? '不等待执行完毕' Bool Newline : '画面闪烁' EvalString Colour '单次时间' Int '执行次数' Int? '不等待执行完毕' Bool Newline
/* screenFlash_s /* screenFlash_s
tooltip : screenFlash: 画面闪烁,动画时间可不填 tooltip : screenFlash: 画面闪烁,动画时间可不填
helpUrl : https://h5mota.com/games/template/docs/#/event?id=screenFlash%EF%BC%9A%E7%94%BB%E9%9D%A2%E9%97%AA%E7%83%81 helpUrl : https://h5mota.com/games/template/docs/#/event?id=screenFlash%EF%BC%9A%E7%94%BB%E9%9D%A2%E9%97%AA%E7%83%81
default : ["255,255,255,1",500,1,false] default : ["255,255,255,1",'rgba(255,255,255,1)',500,1,false]
colour : this.soundColor colour : this.soundColor
var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/; var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/;
if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1'); if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
@ -1759,10 +1759,19 @@ Global_Value_List
: '血网伤害'|'中毒伤害'|'衰弱效果'|'红宝石效果'|'蓝宝石效果'|'绿宝石效果'|'红血瓶效果'|'蓝血瓶效果'|'黄血瓶效果'|'绿血瓶效果'|'破甲比例'|'反击比例'|'净化比例'|'仇恨增加值'|'行走速度'|'动画时间'|'楼层切换时间' : '血网伤害'|'中毒伤害'|'衰弱效果'|'红宝石效果'|'蓝宝石效果'|'绿宝石效果'|'红血瓶效果'|'蓝血瓶效果'|'黄血瓶效果'|'绿血瓶效果'|'破甲比例'|'反击比例'|'净化比例'|'仇恨增加值'|'行走速度'|'动画时间'|'楼层切换时间'
/*Global_Value_List ['lavaDamage','poisonDamage','weakValue', 'redJewel', 'blueJewel', 'greenJewel', 'redPotion', 'bluePotion', 'yellowPotion', 'greenPotion', 'breakArmor', 'counterAttack', 'purify', 'hatred', 'moveSpeed', 'animateSpeed', 'floorChangeTime']*/; /*Global_Value_List ['lavaDamage','poisonDamage','weakValue', 'redJewel', 'blueJewel', 'greenJewel', 'redPotion', 'bluePotion', 'yellowPotion', 'greenPotion', 'breakArmor', 'counterAttack', 'purify', 'hatred', 'moveSpeed', 'animateSpeed', 'floorChangeTime']*/;
Global_Flag_List Global_Flag_List
: '显示当前楼层'|'显示勇士图标'|'显示当前等级'|'启用生命上限'|'显示魔力值'|'显示魔防值'|'显示金币值'|'显示经验值'|'允许等级提升'|'升级扣除模式'|'显示钥匙数量'|'显示破炸飞'|'显示毒衰咒'|'显示当前技能'|'楼梯边才能楼传'|'开启加点'|'开启负伤'|'循环计算临界'|'允许轻按'|'允许走到将死领域'|'允许瞬间移动'|'阻激夹域后禁用快捷商店' : '显示当前楼层'|'显示勇士图标'|'显示当前等级'|'启用生命上限'|'显示魔力值'|'显示魔防值'|'显示金币值'|'显示经验值'|'允许等级提升'|'升级扣除模式'|'显示钥匙数量'|'显示破炸飞'|'显示毒衰咒'|'显示当前技能'|'楼梯边才能楼传'|'开启加点'|'开启负伤'|'循环计算临界'|'允许轻按'|'允许走到将死领域'|'允许瞬间移动'|'阻激夹域后禁用快捷商店'
/*Global_Flag_List ['enableFloor','enableName','enableLv', 'enableHPMax', 'enableMana', 'enableMDef', 'enableMoney', 'enableExperience', 'enableLevelUp', 'levelUpLeftMode', 'enableKeys', 'enablePZF', 'enableDebuff', 'enableSkill', 'flyNearStair', 'enableAddPoint', 'enableNegativeDamage', 'useLoop', 'enableGentleClick', 'canGoDeadZone', 'enableMoveDirectly', 'disableShopOnDamage']*/; /*Global_Flag_List ['enableFloor','enableName','enableLv', 'enableHPMax', 'enableMana', 'enableMDef', 'enableMoney', 'enableExperience', 'enableLevelUp', 'levelUpLeftMode', 'enableKeys', 'enablePZF', 'enableDebuff', 'enableSkill', 'flyNearStair', 'enableAddPoint', 'enableNegativeDamage', 'useLoop', 'enableGentleClick', 'canGoDeadZone', 'enableMoveDirectly', 'disableShopOnDamage']*/;
Colour
: 'sdeirughvuiyasdeb'+ //为了被识别为复杂词法规则
;
Angle
: 'sdeirughvuiyasdeb'+ //为了被识别为复杂词法规则
;
Bool: 'TRUE' Bool: 'TRUE'
| 'FALSE' | 'FALSE'
; ;
@ -2001,7 +2010,7 @@ ActionParser.prototype.parseAction = function() {
data.time, data.async||false, this.EvalString(data.text), this.next]); data.time, data.async||false, this.EvalString(data.text), this.next]);
break; break;
case "comment": // 注释 case "comment": // 注释
this.next = MotaActionBlocks['comment_s'].xmlText([this.EvalString(data.text),this.next]); this.next = MotaActionBlocks['comment_s'].xmlText([this.EvalString(data.text),this.next],null,data.text);
break; break;
case "setText": // 设置剧情文本的属性 case "setText": // 设置剧情文本的属性
var setTextfunc = function(a){return a?JSON.stringify(a).slice(1,-1):null;} var setTextfunc = function(a){return a?JSON.stringify(a).slice(1,-1):null;}
@ -2010,7 +2019,7 @@ ActionParser.prototype.parseAction = function() {
if (!/^\w+\.png$/.test(data.background)) if (!/^\w+\.png$/.test(data.background))
data.background=setTextfunc(data.background); data.background=setTextfunc(data.background);
this.next = MotaActionBlocks['setText_s'].xmlText([ this.next = MotaActionBlocks['setText_s'].xmlText([
data.position,data.offset,data.title,data.text,data.background,data.bold,data.titlefont,data.textfont,data.time,this.next]); data.position,data.offset,data.title,`rgba(${data.title})`,data.text,`rgba(${data.text})`,data.background,`rgba(${data.background})`,data.bold,data.titlefont,data.textfont,data.time,this.next]);
break; break;
case "tip": case "tip":
this.next = MotaActionBlocks['tip_s'].xmlText([ this.next = MotaActionBlocks['tip_s'].xmlText([
@ -2182,7 +2191,7 @@ ActionParser.prototype.parseAction = function() {
case "setFg": // 颜色渐变 case "setFg": // 颜色渐变
if(this.isset(data.color)){ if(this.isset(data.color)){
this.next = MotaActionBlocks['setFg_0_s'].xmlText([ this.next = MotaActionBlocks['setFg_0_s'].xmlText([
data.color,data.time||0,data.async||false,this.next]); data.color,`rgba(${data.color})`,data.time||0,data.async||false,this.next]);
} else { } else {
this.next = MotaActionBlocks['setFg_1_s'].xmlText([ this.next = MotaActionBlocks['setFg_1_s'].xmlText([
data.time||0,data.async||false,this.next]); data.time||0,data.async||false,this.next]);
@ -2190,7 +2199,7 @@ ActionParser.prototype.parseAction = function() {
break; break;
case "screenFlash": // 画面闪烁 case "screenFlash": // 画面闪烁
this.next = MotaActionBlocks['screenFlash_s'].xmlText([ this.next = MotaActionBlocks['screenFlash_s'].xmlText([
data.color,data.time||500,data.times||1,data.async||false,this.next]); data.color,`rgba(${data.color})`,data.time||500,data.times||1,data.async||false,this.next]);
break; break;
case "setWeather": // 更改天气 case "setWeather": // 更改天气
this.next = MotaActionBlocks['setWeather_s'].xmlText([ this.next = MotaActionBlocks['setWeather_s'].xmlText([

View File

@ -1,263 +1,263 @@
(function (window) { (function (window) {
window.jsColorPicker = function(selectors, config) { window.jsColorPicker = function(selectors, config) {
var renderCallback = function(colors, mode) { var renderCallback = function(colors, mode) {
var options = this, var options = this,
input = options.input, input = options.input,
patch = options.patch, patch = options.patch,
RGB = colors.RND.rgb, RGB = colors.RND.rgb,
HSL = colors.RND.hsl, HSL = colors.RND.hsl,
AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') + AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
(Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '', (Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
RGBInnerText = RGB.r + ',' + RGB.g + ',' + RGB.b, RGBInnerText = RGB.r + ',' + RGB.g + ',' + RGB.b,
RGBAText = RGBInnerText + ',' + colors.alpha, RGBAText = RGBInnerText + ',' + colors.alpha,
isAlpha = colors.alpha !== 1 && !options.isIE8, isAlpha = colors.alpha !== 1 && !options.isIE8,
colorMode = input.getAttribute('data-colorMode'); colorMode = input.getAttribute('data-colorMode');
patch.style.cssText = patch.style.cssText =
'color:' + (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd') + ';' + // Black...??? 'color:' + (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd') + ';' + // Black...???
'background-color: rgba(' + RGBAText + ');' + 'background-color: rgba(' + RGBAText + ');' +
'filter:' + (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9 'filter:' + (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : ''); 'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '');
input.value = RGBAText; input.value = RGBAText;
if (options.displayCallback) { if (options.displayCallback) {
options.displayCallback(colors, mode, options); options.displayCallback(colors, mode, options);
} }
}, },
extractValue = function(elm) { extractValue = function(elm) {
var val = elm.value || elm.getAttribute('value') || elm.style.backgroundColor || "0,0,0,1"; var val = elm.value || elm.getAttribute('value') || elm.style.backgroundColor || "0,0,0,1";
if (/^[0-9 ]+,[0-9 ]+,[0-9 ]+,[0-9. ]+$/.test(val)) return "rgba("+val+")"; if (/^[0-9 ]+,[0-9 ]+,[0-9 ]+,[0-9. ]+$/.test(val)) return "rgba("+val+")";
if (/^[0-9 ]+,[0-9 ]+,[0-9 ]+$/.test(val)) return "rgba("+val+",1)"; if (/^[0-9 ]+,[0-9 ]+,[0-9 ]+$/.test(val)) return "rgba("+val+",1)";
return null; return null;
}, },
actionCallback = function(event, action) { actionCallback = function(event, action) {
var options = this, var options = this,
colorPicker = colorPickers.current; colorPicker = colorPickers.current;
if (action === 'toMemory') { if (action === 'toMemory') {
var memos = colorPicker.nodes.memos, var memos = colorPicker.nodes.memos,
backgroundColor = '', backgroundColor = '',
opacity = 0, opacity = 0,
cookieTXT = []; cookieTXT = [];
for (var n = 0, m = memos.length; n < m; n++) { for (var n = 0, m = memos.length; n < m; n++) {
backgroundColor = memos[n].style.backgroundColor; backgroundColor = memos[n].style.backgroundColor;
opacity = memos[n].style.opacity; opacity = memos[n].style.opacity;
opacity = Math.round((opacity === '' ? 1 : opacity) * 100) / 100; opacity = Math.round((opacity === '' ? 1 : opacity) * 100) / 100;
cookieTXT.push(backgroundColor. cookieTXT.push(backgroundColor.
replace(/, /g, ','). replace(/, /g, ',').
replace('rgb(', 'rgba('). replace('rgb(', 'rgba(').
replace(')', ',' + opacity + ')') replace(')', ',' + opacity + ')')
); );
} }
cookieTXT = '\'' + cookieTXT.join('\',\'') + '\''; cookieTXT = '\'' + cookieTXT.join('\',\'') + '\'';
ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT); ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
} else if (action === 'resizeApp') { } else if (action === 'resizeApp') {
ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize); ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
} else if (action === 'modeChange') { } else if (action === 'modeChange') {
var mode = colorPicker.color.options.mode; var mode = colorPicker.color.options.mode;
ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z); ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z);
} }
}, },
createInstance = function(elm, config) { createInstance = function(elm, config) {
var initConfig = { var initConfig = {
klass: window.ColorPicker, klass: window.ColorPicker,
input: elm, input: elm,
patch: elm, patch: elm,
isIE8: !!document.all && !document.addEventListener, // Opera??? isIE8: !!document.all && !document.addEventListener, // Opera???
// *** animationSpeed: 200, // *** animationSpeed: 200,
// *** draggable: true, // *** draggable: true,
margin: {left: -1, top: 2}, margin: {left: -1, top: 2},
customBG: '#FFFFFF', customBG: '#FFFFFF',
// displayCallback: displayCallback, // displayCallback: displayCallback,
/* --- regular colorPicker options from this point --- */ /* --- regular colorPicker options from this point --- */
color: extractValue(elm), color: extractValue(elm),
initStyle: 'display: none', initStyle: 'display: none',
mode: ColorPicker.docCookies('colorPickerMode') || 'hsv-h', mode: ColorPicker.docCookies('colorPickerMode') || 'hsv-h',
// memoryColors: (function(colors, config) { // memoryColors: (function(colors, config) {
// return config.noAlpha ? // return config.noAlpha ?
// colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors; // colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors;
// })($.docCookies('colorPickerMemos'), config || {}), // })($.docCookies('colorPickerMemos'), config || {}),
memoryColors: ColorPicker.docCookies('colorPickerMemos' + memoryColors: ColorPicker.docCookies('colorPickerMemos' +
((config || {}).noAlpha ? 'NoAlpha' : '')), ((config || {}).noAlpha ? 'NoAlpha' : '')),
size: ColorPicker.docCookies('colorPickerSize') || 1, size: ColorPicker.docCookies('colorPickerSize') || 1,
renderCallback: renderCallback, renderCallback: renderCallback,
actionCallback: actionCallback actionCallback: actionCallback
}; };
for (var n in config) { for (var n in config) {
initConfig[n] = config[n]; initConfig[n] = config[n];
} }
return new initConfig.klass(initConfig); return new initConfig.klass(initConfig);
}, },
doEventListeners = function(elm, multiple, off) { doEventListeners = function(elm, multiple, off) {
var onOff = off ? 'removeEventListener' : 'addEventListener', var onOff = off ? 'removeEventListener' : 'addEventListener',
inputListener = function(e) { inputListener = function(e) {
var index = multiple ? Array.prototype.indexOf.call(elms, this) : 0, var index = multiple ? Array.prototype.indexOf.call(elms, this) : 0,
colorPicker = colorPickers[index] || colorPicker = colorPickers[index] ||
(colorPickers[index] = createInstance(this, config)), (colorPickers[index] = createInstance(this, config)),
options = colorPicker.color.options; options = colorPicker.color.options;
options.color = extractValue(elm); // brings color to default on reset options.color = extractValue(elm); // brings color to default on reset
//检查颜色合法性 //检查颜色合法性
if (options.color != null && options.color == options.color.match(/rgba\([0-9 ]+,[0-9 ]+,[0-9 ]+,[0-9. ]+\)/)[0]) { if (options.color != null && options.color == options.color.match(/rgba\([0-9 ]+,[0-9 ]+,[0-9 ]+,[0-9. ]+\)/)[0]) {
var chec = options.color.match(/[0-9.]+/g); var chec = options.color.match(/[0-9.]+/g);
if (chec.length != 4) if (chec.length != 4)
return; return;
for (var i = 0; i < 3; i++) { for (var i = 0; i < 3; i++) {
if (chec[i] != chec[i].match(/\d+/)[0] || +chec[i] < 0 || +chec[i] > 255) if (chec[i] != chec[i].match(/\d+/)[0] || +chec[i] < 0 || +chec[i] > 255)
return; return;
} }
if (chec[3] != chec[3].match(/\d+(\.\d+)?/)[0] || parseFloat(chec[3]) > 1 || parseFloat(chec[3] < 0)) if (chec[3] != chec[3].match(/\d+(\.\d+)?/)[0] || parseFloat(chec[3]) > 1 || parseFloat(chec[3] < 0))
return; return;
if (!multiple) { if (!multiple) {
colorPicker.setColor(extractValue(elm), undefined, undefined, true); colorPicker.setColor(extractValue(elm), undefined, undefined, true);
colorPicker.saveAsBackground(); colorPicker.saveAsBackground();
} }
colorPickers.current = colorPickers[index]; colorPickers.current = colorPickers[index];
} }
} }
focusListener = function(e) { focusListener = function(e) {
elm = document.getElementById("colorPicker"); elm = document.getElementById("colorPicker");
var input = elm, var input = elm,
position = window.ColorPicker.getOrigin(input), position = window.ColorPicker.getOrigin(input),
index = multiple ? Array.prototype.indexOf.call(elms, elm) : 0, index = multiple ? Array.prototype.indexOf.call(elms, elm) : 0,
colorPicker = colorPickers[index] || colorPicker = colorPickers[index] ||
(colorPickers[index] = createInstance(elm, config)), (colorPickers[index] = createInstance(elm, config)),
options = colorPicker.color.options, options = colorPicker.color.options,
colorPickerUI = colorPicker.nodes.colorPicker, colorPickerUI = colorPicker.nodes.colorPicker,
appendTo = (options.appendTo || document.body), appendTo = (options.appendTo || document.body),
isStatic = /static/.test(window.getComputedStyle(appendTo).position), isStatic = /static/.test(window.getComputedStyle(appendTo).position),
atrect = isStatic ? {left: 0, top: 0} : appendTo.getBoundingClientRect(), atrect = isStatic ? {left: 0, top: 0} : appendTo.getBoundingClientRect(),
waitTimer = 0; waitTimer = 0;
options.color = extractValue(elm); // brings color to default on reset options.color = extractValue(elm); // brings color to default on reset
colorPickerUI.style.cssText = colorPickerUI.style.cssText =
'position: absolute;' + (!colorPickers[index].cssIsReady ? 'display: none;' : '') + 'position: absolute;' + (!colorPickers[index].cssIsReady ? 'display: none;' : '') +
'left:' + (position.left + options.margin.left - atrect.left) + 'px;' + 'left:' + (position.left + options.margin.left - atrect.left) + 'px;' +
'top:' + (position.top + +input.offsetHeight + options.margin.top - atrect.top) + 'px;'; 'top:' + (position.top + +input.offsetHeight + options.margin.top - atrect.top) + 'px;';
if (!multiple) { if (!multiple) {
options.input = elm; options.input = elm;
options.patch = elm; // check again??? options.patch = elm; // check again???
colorPicker.setColor(extractValue(elm), undefined, undefined, true); colorPicker.setColor(extractValue(elm), undefined, undefined, true);
colorPicker.saveAsBackground(); colorPicker.saveAsBackground();
} }
colorPickers.current = colorPickers[index]; colorPickers.current = colorPickers[index];
appendTo.appendChild(colorPickerUI); appendTo.appendChild(colorPickerUI);
waitTimer = setInterval(function() { // compensating late style on onload in colorPicker waitTimer = setInterval(function() { // compensating late style on onload in colorPicker
if (colorPickers.current.cssIsReady) { if (colorPickers.current.cssIsReady) {
waitTimer = clearInterval(waitTimer); waitTimer = clearInterval(waitTimer);
colorPickerUI.style.display = 'block'; colorPickerUI.style.display = 'block';
} }
}, 10); }, 10);
}, },
mousDownListener = function(e) { mousDownListener = function(e) {
var colorPicker = colorPickers.current, var colorPicker = colorPickers.current,
colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined), colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined),
animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0, animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0,
isColorPicker = colorPicker && (function(elm) { isColorPicker = colorPicker && (function(elm) {
while (elm) { while (elm) {
if ((elm.className || '').indexOf('cpPanel') !== -1) return elm; if ((elm.className || '').indexOf('cpPanel') !== -1) return elm;
elm = elm.parentNode; elm = elm.parentNode;
} }
return false; return false;
})(e.target), })(e.target),
inputIndex = Array.prototype.indexOf.call(elms, e.target); inputIndex = Array.prototype.indexOf.call(elms, e.target);
if (isColorPicker && Array.prototype.indexOf.call(colorPickers, isColorPicker)) { if (isColorPicker && Array.prototype.indexOf.call(colorPickers, isColorPicker)) {
if (e.target === colorPicker.nodes.exit) { if (e.target === colorPicker.nodes.exit) {
colorPickerUI.parentNode.style.display = 'none'; colorPickerUI.parentNode.style.display = 'none';
document.activeElement.blur(); document.activeElement.blur();
} else { } else {
// ... // ...
} }
} else if (inputIndex !== -1) { } else if (inputIndex !== -1) {
// ... // ...
} else if (colorPickerUI) { } else if (colorPickerUI) {
colorPickerUI.parentNode.style.display = 'none'; colorPickerUI.parentNode.style.display = 'none';
} }
}; };
button = document.getElementById("colorSwitch"); button = document.getElementById("colorSwitch");
button[onOff]('click', focusListener); button[onOff]('click', focusListener);
elm[onOff]('input', inputListener); elm[onOff]('input', inputListener);
if (!colorPickers.evt || off) { if (!colorPickers.evt || off) {
colorPickers.evt = true; // prevent new eventListener for window colorPickers.evt = true; // prevent new eventListener for window
window[onOff]('mousedown', mousDownListener); window[onOff]('mousedown', mousDownListener);
} }
}, },
// this is a way to prevent data binding on HTMLElements // this is a way to prevent data binding on HTMLElements
colorPickers = window.jsColorPicker.colorPickers || [], colorPickers = window.jsColorPicker.colorPickers || [],
elms = document.querySelectorAll(selectors), elms = document.querySelectorAll(selectors),
testColors = new window.Colors({customBG: config.customBG, allMixDetails: true}); testColors = new window.Colors({customBG: config.customBG, allMixDetails: true});
window.jsColorPicker.colorPickers = colorPickers; window.jsColorPicker.colorPickers = colorPickers;
for (var n = 0, m = elms.length; n < m; n++) { for (var n = 0, m = elms.length; n < m; n++) {
var elm = elms[n]; var elm = elms[n];
if (config === 'destroy') { if (config === 'destroy') {
doEventListeners(elm, (config && config.multipleInstances), true); doEventListeners(elm, (config && config.multipleInstances), true);
if (colorPickers[n]) { if (colorPickers[n]) {
colorPickers[n].destroyAll(); colorPickers[n].destroyAll();
} }
} else { } else {
var color = extractValue(elm); var color = extractValue(elm);
var value = color.split('('); var value = color.split('(');
testColors.setColor(color); testColors.setColor(color);
if (config && config.init) { if (config && config.init) {
config.init(elm, testColors.colors); config.init(elm, testColors.colors);
} }
elm.setAttribute('data-colorMode', value[1] ? value[0].substr(0, 3) : 'HEX'); elm.setAttribute('data-colorMode', value[1] ? value[0].substr(0, 3) : 'HEX');
doEventListeners(elm, (config && config.multipleInstances), false); doEventListeners(elm, (config && config.multipleInstances), false);
if (config && config.readOnly) { if (config && config.readOnly) {
elm.readOnly = true; elm.readOnly = true;
} }
} }
}; };
return window.jsColorPicker.colorPickers; return window.jsColorPicker.colorPickers;
}; };
window.ColorPicker.docCookies = function(key, val, options) { window.ColorPicker.docCookies = function(key, val, options) {
var encode = encodeURIComponent, decode = decodeURIComponent, var encode = encodeURIComponent, decode = decodeURIComponent,
cookies, n, tmp, cache = {}, cookies, n, tmp, cache = {},
days; days;
if (val === undefined) { // all about reading cookies if (val === undefined) { // all about reading cookies
cookies = document.cookie.split(/;\s*/) || []; cookies = document.cookie.split(/;\s*/) || [];
for (n = cookies.length; n--; ) { for (n = cookies.length; n--; ) {
tmp = cookies[n].split('='); tmp = cookies[n].split('=');
if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value... if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value...
} }
if (!key) return cache; // return Json for easy access to all cookies if (!key) return cache; // return Json for easy access to all cookies
else return cache[key]; // easy access to cookies from here else return cache[key]; // easy access to cookies from here
} else { // write/delete cookie } else { // write/delete cookie
options = options || {}; options = options || {};
if (val === '' || options.expires < 0) { // prepare deleteing the cookie if (val === '' || options.expires < 0) { // prepare deleteing the cookie
options.expires = -1; options.expires = -1;
// options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted... // options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted...
} }
if (options.expires !== undefined) { // prepare date if any if (options.expires !== undefined) { // prepare date if any
days = new Date(); days = new Date();
days.setDate(days.getDate() + options.expires); days.setDate(days.getDate() + options.expires);
} }
document.cookie = encode(key) + '=' + encode(val) + document.cookie = encode(key) + '=' + encode(val) +
(days ? '; expires=' + days.toUTCString() : '') + (days ? '; expires=' + days.toUTCString() : '') +
(options.path ? '; path=' + options.path : '') + (options.path ? '; path=' + options.path : '') +
(options.domain ? '; domain=' + options.domain : '') + (options.domain ? '; domain=' + options.domain : '') +
(options.secure ? '; secure' : ''); (options.secure ? '; secure' : '');
} }
}; };
})(this); })(this);
// Added // Added
@ -285,4 +285,60 @@ function copyColor() {
colorPicker.select(); colorPicker.select();
document.execCommand("Copy"); document.execCommand("Copy");
doHide(); doHide();
} }
Blockly.FieldColour.prototype.createWidget_ = function() {
// Create the palette using Closure.
var picker = new goog.ui.ColorPicker();
picker.setSize(this.columns_ || Blockly.FieldColour.COLUMNS);
picker.setColors(this.colours_ || Blockly.FieldColour.COLOURS);
var div = Blockly.WidgetDiv.DIV;
picker.render(div);
picker.setSelectedColor(this.getValue());
Blockly.WidgetDiv.hide();
self=this;
var pb=self.sourceBlock_
var args = MotaActionBlocks[pb.type].args
var targetf=args[args.indexOf(self.name)-1]
var getValue=function(){
return self.getValue() // css颜色
// 也可以用 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();
c.setColor(newValue)
var rgbatext=`${c.colors.webSmart.r},${c.colors.webSmart.g},${c.colors.webSmart.b},${c.colors.alpha}` // 转成r,g,b,a文本
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
}));
return picker;
};

View File

@ -365,6 +365,54 @@ function omitedcheckUpdateFunction(event) {
MotaActionFunctions.workspace = function(){ MotaActionFunctions.workspace = function(){
return editor_blockly.workspace; return editor_blockly.workspace;
} }
// 因为在editor_blockly.parse里已经HTML转义过一次了,所以这里要覆盖掉以避免在注释中出现&lt;等
MotaActionFunctions.xmlText = function (ruleName,inputs,isShadow,comment) {
var rule = MotaActionBlocks[ruleName];
var blocktext = isShadow?'shadow':'block';
var xmlText = [];
xmlText.push('<'+blocktext+' type="'+ruleName+'">');
if(!inputs)inputs=[];
for (var ii=0,inputType;inputType=rule.argsType[ii];ii++) {
var input = inputs[ii];
var _input = '';
var noinput = (input===null || input===undefined);
if(noinput && inputType==='field') continue;
if(noinput) input = '';
if(inputType!=='field') {
var subList = false;
var subrulename = rule.args[ii];
subrulename=subrulename.split('_').slice(0,-1).join('_');
var subrule = MotaActionBlocks[subrulename];
if (subrule instanceof Array) {
subrulename=subrule[subrule.length-1];
subrule = MotaActionBlocks[subrulename];
subList = true;
}
_input = subrule.xmlText([],true);
if(noinput && !subList && !isShadow) {
//无输入的默认行为是: 如果语句块的备选方块只有一个,直接代入方块
input = subrule.xmlText();
}
}
xmlText.push('<'+inputType+' name="'+rule.args[ii]+'">');
xmlText.push(_input+input);
xmlText.push('</'+inputType+'>');
}
if(comment){
xmlText.push('<comment>');
xmlText.push(comment);
xmlText.push('</comment>');
}
var next = inputs[rule.args.length];
if (next) {//next
xmlText.push('<next>');
xmlText.push(next);
xmlText.push('</next>');
}
xmlText.push('</'+blocktext+'>');
return xmlText.join('');
}
})(); })();
`; `;