mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Rename propertySelect to typedInput and add boolean opt
This commit is contained in:
Nick O'Leary
@@ -1,176 +0,0 @@
|
||||
/**
|
||||
* Copyright 2015 IBM Corp.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
(function($) {
|
||||
var allOptions = {
|
||||
msg: {value:"msg",label:"msg.",style:"code"},
|
||||
flow: {value:"flow",label:"flow.",style:"code"},
|
||||
global: {value:"global",label:"global.",style:"code"},
|
||||
str: {value:"str",label:"string",icon:"red/images/az.png"},
|
||||
num: {value:"num",label:"number",icon:"red/images/09.png"},
|
||||
json: {value:"json",label:"JSON",icon:"red/images/json.png"},
|
||||
re: {value:"re",label:"regular expression",icon:"red/images/re.png"}
|
||||
};
|
||||
var nlsd = false;
|
||||
|
||||
$.widget( "nodered.propertySelect", {
|
||||
_create: function() {
|
||||
if (!nlsd && RED && RED._) {
|
||||
for (var i in allOptions) {
|
||||
if (allOptions.hasOwnProperty(i)) {
|
||||
allOptions[i].label = RED._("propertySelect.type."+i,{defaultValue:allOptions[i].label});
|
||||
}
|
||||
}
|
||||
}
|
||||
nlsd = true;
|
||||
|
||||
var that = this;
|
||||
this.disarmClick = false;
|
||||
this.element.addClass('red-ui-propertySelect');
|
||||
this.uiWidth = this.element.width();
|
||||
|
||||
this.uiSelect = this.element
|
||||
.wrap( "<div>" )
|
||||
.parent();
|
||||
|
||||
["Top","Right","Bottom","Left"].forEach(function(d) {
|
||||
var m = that.element.css("margin"+d);
|
||||
that.uiSelect.css("margin"+d,m);
|
||||
that.element.css("margin"+d,0);
|
||||
});
|
||||
|
||||
this.uiSelect.addClass("red-ui-propertySelect-container");
|
||||
|
||||
this.selectTrigger = $('<a href="#" class="foo"><i class="fa fa-sort-desc"></i></a>').prependTo(this.uiSelect);
|
||||
this.selectLabel = $('<span>msg.</span>').appendTo(this.selectTrigger);
|
||||
|
||||
this.element.on('focus', function() {
|
||||
that.uiSelect.addClass('red-ui-propertySelect-focus');
|
||||
});
|
||||
this.element.on('blur', function() {
|
||||
that.uiSelect.removeClass('red-ui-propertySelect-focus');
|
||||
});
|
||||
|
||||
this.selectTrigger.click(function(event) {
|
||||
event.preventDefault();
|
||||
if (that.disarmClick) {
|
||||
that.disarmClick = false;
|
||||
return
|
||||
}
|
||||
that._showMenu();
|
||||
});
|
||||
this.options.options = this.options.options||Object.keys(allOptions);
|
||||
this._createMenu(this.options.options);
|
||||
this.type(this.options.default||this.options.options[0])
|
||||
this._delay(function() {
|
||||
//this._resize();
|
||||
});
|
||||
},
|
||||
_hideMenu: function() {
|
||||
$(document).off("mousedown.close-property-select");
|
||||
this.menu.hide();
|
||||
this.element.focus();
|
||||
},
|
||||
_createMenu: function(opts) {
|
||||
var that = this;
|
||||
this.menu = $("<div>").addClass("red-ui-propertySelect-options");
|
||||
opts.forEach(function(key) {
|
||||
var opt = allOptions[key];
|
||||
if (opt) {
|
||||
var op = $('<a href="#">').attr("value",opt.value).appendTo(that.menu);
|
||||
if (opt.label) {
|
||||
op.text(opt.label);
|
||||
}
|
||||
if (opt.icon) {
|
||||
$('<img>',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op);
|
||||
} else {
|
||||
op.css({paddingLeft: "18px"});
|
||||
}
|
||||
|
||||
op.click(function(event) {
|
||||
event.preventDefault();
|
||||
that.type(key);
|
||||
that._hideMenu();
|
||||
});
|
||||
}
|
||||
});
|
||||
this.menu.css({
|
||||
display: "none",
|
||||
});
|
||||
this.menu.appendTo(document.body);
|
||||
|
||||
},
|
||||
_showMenu: function() {
|
||||
var that = this;
|
||||
var pos = this.selectTrigger.offset();
|
||||
var height = this.selectTrigger.height();
|
||||
this.menu.css({
|
||||
top: (height+pos.top)+"px",
|
||||
left: (2+pos.left)+"px"
|
||||
});
|
||||
this.menu.slideDown(200);
|
||||
this._delay(function() {
|
||||
that.uiSelect.addClass('red-ui-propertySelect-focus');
|
||||
$(document).on("mousedown.close-property-select", function(event) {
|
||||
if(!$(event.target).closest(that.menu).length) {
|
||||
that._hideMenu();
|
||||
}
|
||||
if ($(event.target).closest(that.selectTrigger).length) {
|
||||
that.disarmClick = true;
|
||||
event.preventDefault();
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
_resize: function() {
|
||||
var labelWidth = this.selectTrigger.width();
|
||||
if (labelWidth === 0) {
|
||||
var newTrigger = this.selectTrigger.clone();
|
||||
newTrigger.css({
|
||||
position:"absolute",
|
||||
top:0,
|
||||
left:-1000
|
||||
}).appendTo(document.body);
|
||||
labelWidth = newTrigger.width()+4;
|
||||
newTrigger.remove();
|
||||
}
|
||||
this.element.width(this.uiWidth-labelWidth+4);
|
||||
},
|
||||
width: function(desiredWidth) {
|
||||
this.uiWidth = desiredWidth;
|
||||
this._resize();
|
||||
},
|
||||
_destroy: function() {
|
||||
this.menu.remove();
|
||||
},
|
||||
type: function(type) {
|
||||
if (!arguments.length) {
|
||||
return this.propertyType;
|
||||
} else {
|
||||
var opt = allOptions[type];
|
||||
if (opt) {
|
||||
this.propertyType = type;
|
||||
this.selectLabel.empty();
|
||||
if (opt.icon) {
|
||||
$('<img>',{src:opt.icon,style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
|
||||
} else {
|
||||
this.selectLabel.text(opt.label);
|
||||
}
|
||||
this._resize();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
275
editor/js/ui/typedInput.js
Normal file
275
editor/js/ui/typedInput.js
Normal file
@@ -0,0 +1,275 @@
|
||||
/**
|
||||
* Copyright 2015 IBM Corp.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
(function($) {
|
||||
var allOptions = {
|
||||
msg: {value:"msg",label:"msg.",validate:/^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]+)*/i},
|
||||
flow: {value:"flow",label:"flow.",validate:/^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]+)*/i},
|
||||
global: {value:"global",label:"global.",validate:/^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]+)*/i},
|
||||
str: {value:"str",label:"string",icon:"red/images/az.png"},
|
||||
num: {value:"num",label:"number",icon:"red/images/09.png",validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/},
|
||||
bool: {value:"bool",label:"boolean",icon:"red/images/bool.png",options:["true","false"]},
|
||||
json: {value:"json",label:"JSON",icon:"red/images/json.png", validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}}},
|
||||
re: {value:"re",label:"regular expression",icon:"red/images/re.png"}
|
||||
};
|
||||
var nlsd = false;
|
||||
|
||||
$.widget( "nodered.typedInput", {
|
||||
_create: function() {
|
||||
if (!nlsd && RED && RED._) {
|
||||
for (var i in allOptions) {
|
||||
if (allOptions.hasOwnProperty(i)) {
|
||||
allOptions[i].label = RED._("typedInput.type."+i,{defaultValue:allOptions[i].label});
|
||||
}
|
||||
}
|
||||
}
|
||||
nlsd = true;
|
||||
var that = this;
|
||||
|
||||
this.disarmClick = false;
|
||||
this.element.addClass('red-ui-typedInput');
|
||||
this.uiWidth = this.element.width();
|
||||
this.uiSelect = this.element
|
||||
.wrap( "<div>" )
|
||||
.parent();
|
||||
|
||||
["Right","Left"].forEach(function(d) {
|
||||
var m = that.element.css("margin"+d);
|
||||
that.uiSelect.css("margin"+d,m);
|
||||
that.element.css("margin"+d,0);
|
||||
});
|
||||
this.uiSelect.addClass("red-ui-typedInput-container");
|
||||
|
||||
if (this.options.typeField) {
|
||||
this.typeField = $(this.options.typeField).hide();
|
||||
} else {
|
||||
this.typeField = $("<input>",{type:'hidden'}).appendTo(this.uiSelect);
|
||||
}
|
||||
|
||||
this.selectTrigger = $('<a href="#"><i class="fa fa-sort-desc"></i></a>').prependTo(this.uiSelect);
|
||||
this.selectLabel = $('<span></span>').appendTo(this.selectTrigger);
|
||||
|
||||
this.element.on('focus', function() {
|
||||
that.uiSelect.addClass('red-ui-typedInput-focus');
|
||||
});
|
||||
this.element.on('blur', function() {
|
||||
that.uiSelect.removeClass('red-ui-typedInput-focus');
|
||||
});
|
||||
this.element.on('change', function() {
|
||||
that.validate();
|
||||
})
|
||||
|
||||
this.selectTrigger.click(function(event) {
|
||||
event.preventDefault();
|
||||
that._showMenu(that.menu,that.selectTrigger);
|
||||
});
|
||||
|
||||
this.options.options = this.options.options||Object.keys(allOptions);
|
||||
|
||||
if (this.options.options.filter(function(opt) { return allOptions[opt] && allOptions[opt].hasOwnProperty('options')}).length > 0) {
|
||||
// explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
|
||||
this.optionSelectTrigger = $('<a href="#" class="red-ui-typedInput-option-trigger" style="display:inline-block"><i class="fa fa-sort-desc"></i></a>').appendTo(this.uiSelect);
|
||||
this.optionSelectLabel = $('<span></span>').prependTo(this.optionSelectTrigger);
|
||||
this.optionSelectTrigger.click(function(event) {
|
||||
event.preventDefault();
|
||||
if (that.optionMenu) {
|
||||
that.optionMenu.css({
|
||||
minWidth:that.optionSelectLabel.width()
|
||||
});
|
||||
|
||||
that._showMenu(that.optionMenu,that.optionSelectLabel)
|
||||
}
|
||||
});
|
||||
}
|
||||
this.menu = this._createMenu(this.options.options, function(v) { that.type(v) });
|
||||
this.type(this.options.default||this.options.options[0]);
|
||||
},
|
||||
_hideMenu: function(menu) {
|
||||
$(document).off("mousedown.close-property-select");
|
||||
menu.hide();
|
||||
this.element.focus();
|
||||
},
|
||||
_createMenu: function(opts,callback) {
|
||||
var that = this;
|
||||
var menu = $("<div>").addClass("red-ui-typedInput-options");
|
||||
opts.forEach(function(key) {
|
||||
var opt = allOptions[key];
|
||||
if (!opt) {
|
||||
opt = {value:key,label:key};
|
||||
}
|
||||
var op = $('<a href="#">').attr("value",opt.value).appendTo(menu);
|
||||
if (opt.label) {
|
||||
op.text(opt.label);
|
||||
}
|
||||
if (opt.icon) {
|
||||
$('<img>',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op);
|
||||
} else {
|
||||
op.css({paddingLeft: "18px"});
|
||||
}
|
||||
|
||||
op.click(function(event) {
|
||||
event.preventDefault();
|
||||
callback(key);
|
||||
that._hideMenu(menu);
|
||||
});
|
||||
});
|
||||
menu.css({
|
||||
display: "none",
|
||||
});
|
||||
menu.appendTo(document.body);
|
||||
return menu;
|
||||
|
||||
},
|
||||
_showMenu: function(menu,relativeTo) {
|
||||
if (this.disarmClick) {
|
||||
this.disarmClick = false;
|
||||
return
|
||||
}
|
||||
var that = this;
|
||||
var pos = relativeTo.offset();
|
||||
var height = relativeTo.height();
|
||||
menu.css({
|
||||
top: (height+pos.top-3)+"px",
|
||||
left: (2+pos.left)+"px",
|
||||
});
|
||||
menu.slideDown(200);
|
||||
this._delay(function() {
|
||||
that.uiSelect.addClass('red-ui-typedInput-focus');
|
||||
$(document).on("mousedown.close-property-select", function(event) {
|
||||
if(!$(event.target).closest(menu).length) {
|
||||
that._hideMenu(menu);
|
||||
}
|
||||
if ($(event.target).closest(relativeTo).length) {
|
||||
that.disarmClick = true;
|
||||
event.preventDefault();
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
_getLabelWidth: function(label) {
|
||||
var labelWidth = label.width();
|
||||
if (labelWidth === 0) {
|
||||
var newTrigger = label.clone();
|
||||
newTrigger.css({
|
||||
position:"absolute",
|
||||
top:0,
|
||||
left:-1000
|
||||
}).appendTo(document.body);
|
||||
labelWidth = newTrigger.width()+4;
|
||||
newTrigger.remove();
|
||||
}
|
||||
return labelWidth;
|
||||
},
|
||||
_resize: function() {
|
||||
var labelWidth = this._getLabelWidth(this.selectTrigger);
|
||||
|
||||
var newWidth = this.uiWidth-labelWidth+4;
|
||||
this.element.width(newWidth);
|
||||
|
||||
if (this.optionSelectTrigger) {
|
||||
var triggerWidth = this._getLabelWidth(this.optionSelectTrigger);
|
||||
labelWidth = this._getLabelWidth(this.optionSelectLabel)-4;
|
||||
this.optionSelectLabel.width(labelWidth+(newWidth-triggerWidth));
|
||||
}
|
||||
},
|
||||
_destroy: function() {
|
||||
this.menu.remove();
|
||||
},
|
||||
width: function(desiredWidth) {
|
||||
this.uiWidth = desiredWidth;
|
||||
this._resize();
|
||||
},
|
||||
value: function(value) {
|
||||
if (!arguments.length) {
|
||||
return this.element.val();
|
||||
} else {
|
||||
if (allOptions[this.propertyType].options) {
|
||||
if (allOptions[this.propertyType].options.indexOf(value) === -1) {
|
||||
value = "";
|
||||
}
|
||||
this.optionSelectLabel.text(value);
|
||||
}
|
||||
this.element.val(value);
|
||||
this.element.trigger('change');
|
||||
}
|
||||
},
|
||||
type: function(type) {
|
||||
if (!arguments.length) {
|
||||
return this.propertyType;
|
||||
} else {
|
||||
var opt = allOptions[type];
|
||||
if (opt && this.propertyType !== type) {
|
||||
this.propertyType = type;
|
||||
this.typeField.val(type);
|
||||
this.selectLabel.empty();
|
||||
if (opt.icon) {
|
||||
$('<img>',{src:opt.icon,style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
|
||||
} else {
|
||||
this.selectLabel.text(opt.label);
|
||||
}
|
||||
if (opt.options) {
|
||||
if (this.optionSelectTrigger) {
|
||||
this.optionSelectTrigger.show();
|
||||
this.element.hide();
|
||||
var that = this;
|
||||
this.optionMenu = this._createMenu(opt.options,function(v){
|
||||
that.optionSelectLabel.text(v);
|
||||
that.value(v);
|
||||
});
|
||||
var currentVal = this.element.val();
|
||||
if (opt.options.indexOf(currentVal) !== -1) {
|
||||
this.optionSelectLabel.text(currentVal);
|
||||
} else {
|
||||
this.value(opt.options[0]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.optionMenu) {
|
||||
this.optionMenu.remove();
|
||||
this.optionMenu = null;
|
||||
}
|
||||
if (this.optionSelectTrigger) {
|
||||
this.optionSelectTrigger.hide();
|
||||
}
|
||||
this.element.show();
|
||||
this.element.trigger('change');
|
||||
}
|
||||
this._resize();
|
||||
}
|
||||
}
|
||||
},
|
||||
validate: function() {
|
||||
var result;
|
||||
var value = this.value();
|
||||
var type = this.type();
|
||||
if (allOptions[type] && allOptions[type].validate) {
|
||||
var val = allOptions[type].validate;
|
||||
if (typeof val === 'function') {
|
||||
result = val(value);
|
||||
} else {
|
||||
result = val.test(value);
|
||||
}
|
||||
} else {
|
||||
result = true;
|
||||
}
|
||||
if (result) {
|
||||
this.uiSelect.removeClass('input-error');
|
||||
} else {
|
||||
this.uiSelect.addClass('input-error');
|
||||
}
|
||||
return result;
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user