').css({
position: "absolute",
right:"6px",
top: "6px",
"pointer-events":"all"
}).appendTo(container);
var eyeButton = $('
').css({
width:"20px"
}).appendTo(buttons).on("click", function(evt) {
evt.preventDefault();
var cursorPosition = that.input[0].selectionStart;
var currentType = that.input.attr("type");
if (currentType === "text") {
that.input.attr("type","password");
eyeCon.removeClass("fa-eye-slash").addClass("fa-eye");
setTimeout(function() {
that.input.focus();
that.input[0].setSelectionRange(cursorPosition, cursorPosition);
},50);
} else {
that.input.attr("type","text");
eyeCon.removeClass("fa-eye").addClass("fa-eye-slash");
setTimeout(function() {
that.input.focus();
that.input[0].setSelectionRange(cursorPosition, cursorPosition);
},50);
}
}).hide();
var eyeCon = $('
').css("margin-left","-2px").appendTo(eyeButton);
if (value === "__PWRD__") {
var innerContainer = $('
').css({
padding:"6px 6px",
borderRadius:"4px"
}).addClass("red-ui-typedInput-value-label-inactive").appendTo(container);
var editButton = $('
').appendTo(buttons).on("click", function(evt) {
evt.preventDefault();
innerContainer.hide();
container.css("background","none");
container.css("pointer-events","none");
that.input.val("");
that.element.val("");
that.elementDiv.show();
editButton.hide();
cancelButton.show();
eyeButton.show();
setTimeout(function() {
that.input.focus();
},50);
});
var cancelButton = $('
').css("margin-left","3px").appendTo(buttons).on("click", function(evt) {
evt.preventDefault();
innerContainer.show();
container.css("background","");
that.input.val("__PWRD__");
that.element.val("__PWRD__");
that.elementDiv.hide();
editButton.show();
cancelButton.hide();
eyeButton.hide();
that.input.attr("type","password");
eyeCon.removeClass("fa-eye-slash").addClass("fa-eye");
}).hide();
} else {
container.css("background","none");
container.css("pointer-events","none");
this.elementDiv.show();
eyeButton.show();
}
}
}
};
var nlsd = false;
$.widget( "nodered.typedInput", {
_create: function() {
try {
if (!nlsd && RED && RED._) {
for (var i in allOptions) {
if (allOptions.hasOwnProperty(i)) {
allOptions[i].label = RED._("typedInput.type."+i,{defaultValue:allOptions[i].label});
}
}
var contextStores = RED.settings.context.stores;
var contextOptions = contextStores.map(function(store) {
return {value:store,label: store, icon:'
'}
}).sort(function(A,B) {
if (A.value === RED.settings.context.default) {
return -1;
} else if (B.value === RED.settings.context.default) {
return 1;
} else {
return A.value.localeCompare(B.value);
}
})
if (contextOptions.length < 2) {
allOptions.flow.options = [];
allOptions.global.options = [];
} else {
allOptions.flow.options = contextOptions;
allOptions.global.options = contextOptions;
}
}
nlsd = true;
var that = this;
this.disarmClick = false;
this.input = $('
');
this.input.insertAfter(this.element);
this.input.val(this.element.val());
this.element.addClass('red-ui-typedInput');
this.uiWidth = this.element.outerWidth();
this.elementDiv = this.input.wrap("
").parent().addClass('red-ui-typedInput-input-wrap');
this.uiSelect = this.elementDiv.wrap( "
" ).parent();
var attrStyle = this.element.attr('style');
var m;
if ((m = /width\s*:\s*(calc\s*\(.*\)|\d+(%|px))/i.exec(attrStyle)) !== null) {
this.input.css('width','100%');
this.uiSelect.width(m[1]);
this.uiWidth = null;
} else if (this.uiWidth !== 0){
this.uiSelect.width(this.uiWidth);
}
["Right","Left"].forEach(function(d) {
var m = that.element.css("margin"+d);
that.uiSelect.css("margin"+d,m);
that.input.css("margin"+d,0);
});
["type","placeholder","autocomplete","data-i18n"].forEach(function(d) {
var m = that.element.attr(d);
that.input.attr(d,m);
});
this.defaultInputType = this.input.attr('type');
this.uiSelect.addClass("red-ui-typedInput-container");
this.element.attr('type','hidden');
if (!this.options.types && this.options.type) {
this.options.types = [this.options.type]
} else {
this.options.types = this.options.types||Object.keys(allOptions);
}
this.selectTrigger = $('
').prependTo(this.uiSelect);
$('
').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);
this.selectLabel = $('
').appendTo(this.selectTrigger);
this.valueLabelContainer = $('
').appendTo(this.uiSelect)
this.types(this.options.types);
if (this.options.typeField) {
this.typeField = $(this.options.typeField).hide();
var t = this.typeField.val();
if (t && this.typeMap[t]) {
this.options.default = t;
}
} else {
this.typeField = $("
",{type:'hidden'}).appendTo(this.uiSelect);
}
this.input.on('focus', function() {
that.uiSelect.addClass('red-ui-typedInput-focus');
});
this.input.on('blur', function() {
that.uiSelect.removeClass('red-ui-typedInput-focus');
});
this.input.on('change', function() {
that.validate();
that.element.val(that.value());
that.element.trigger('change',[that.propertyType,that.value()]);
});
this.input.on('keyup', function(evt) {
that.validate();
that.element.val(that.value());
that.element.trigger('keyup',evt);
});
this.input.on('paste', function(evt) {
that.validate();
that.element.val(that.value());
that.element.trigger('paste',evt);
});
this.input.on('keydown', function(evt) {
if (evt.keyCode >= 37 && evt.keyCode <= 40) {
evt.stopPropagation();
}
})
this.selectTrigger.on("click", function(event) {
event.preventDefault();
event.stopPropagation();
that._showTypeMenu();
});
this.selectTrigger.on('keydown',function(evt) {
if (evt.keyCode === 40) {
// Down
that._showTypeMenu();
}
evt.stopPropagation();
}).on('focus', function() {
that.uiSelect.addClass('red-ui-typedInput-focus');
}).on('blur', function() {
var opt = that.typeMap[that.propertyType];
if (opt.hasValue === false) {
that.uiSelect.removeClass('red-ui-typedInput-focus');
}
})
// explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
this.optionSelectTrigger = $('
').appendTo(this.uiSelect);
this.optionSelectLabel = $('
').prependTo(this.optionSelectTrigger);
RED.popover.tooltip(this.optionSelectLabel,function() {
return that.optionValue;
});
this.optionSelectTrigger.on("click", function(event) {
event.preventDefault();
event.stopPropagation();
that._showOptionSelectMenu();
}).on('keydown', function(evt) {
if (evt.keyCode === 40) {
// Down
that._showOptionSelectMenu();
}
evt.stopPropagation();
}).on('blur', function() {
that.uiSelect.removeClass('red-ui-typedInput-focus');
}).on('focus', function() {
that.uiSelect.addClass('red-ui-typedInput-focus');
});
this.optionExpandButton = $('
').appendTo(this.uiSelect);
this.optionExpandButtonIcon = $('
').appendTo(this.optionExpandButton);
// Used to remember selections per-type to restore them when switching between types
this.oldValues = {};
this.type(this.options.default||this.typeList[0].value);
}catch(err) {
console.log(err.stack);
}
},
_showTypeMenu: function() {
if (this.typeList.length > 1) {
this._showMenu(this.menu,this.selectTrigger);
var selected = this.menu.find("[value='"+this.propertyType+"']");
setTimeout(function() {
selected.trigger("focus");
},120);
} else {
this.input.trigger("focus");
}
},
_showOptionSelectMenu: function() {
if (this.optionMenu) {
this.optionMenu.css({
minWidth:this.optionSelectLabel.width()
});
this._showMenu(this.optionMenu,this.optionSelectTrigger);
var targetValue = this.optionValue;
if (this.optionValue === null || this.optionValue === undefined) {
targetValue = this.value();
}
var selectedOption = this.optionMenu.find("[value='"+targetValue+"']");
if (selectedOption.length === 0) {
selectedOption = this.optionMenu.children(":first");
}
selectedOption.trigger("focus");
}
},
_hideMenu: function(menu) {
$(document).off("mousedown.red-ui-typedInput-close-property-select");
menu.hide();
menu.css({
height: "auto"
});
if (menu.opts.multiple) {
var selected = [];
menu.find('input[type="checkbox"]').each(function() {
if ($(this).prop("checked")) {
selected.push($(this).data('value'))
}
})
menu.callback(selected);
}
if (this.elementDiv.is(":visible")) {
this.input.trigger("focus");
} else if (this.optionSelectTrigger.is(":visible")){
this.optionSelectTrigger.trigger("focus");
} else {
this.selectTrigger.trigger("focus");
}
},
_createMenu: function(menuOptions,opts,callback) {
var that = this;
var menu = $("
").addClass("red-ui-typedInput-options red-ui-editor-dialog");
menu.opts = opts;
menu.callback = callback;
menuOptions.forEach(function(opt) {
if (typeof opt === 'string') {
opt = {value:opt,label:opt};
}
var op = $('
').attr("value",opt.value).appendTo(menu);
if (opt.label) {
op.text(opt.label);
}
if (opt.title) {
op.prop('title', opt.title)
}
if (opt.icon) {
if (opt.icon.indexOf("<") === 0) {
$(opt.icon).prependTo(op);
} else if (opt.icon.indexOf("/") !== -1) {
$('
',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px; height: 18px;"}).prependTo(op);
} else {
$('
',{class:"red-ui-typedInput-icon "+opt.icon}).prependTo(op);
}
} else {
op.css({paddingLeft: "18px"});
}
if (!opt.icon && !opt.label) {
op.text(opt.value);
}
var cb;
if (opts.multiple) {
cb = $(' ').css("pointer-events","none").data('value',opt.value).prependTo(op).on("mousedown", function(evt) { evt.preventDefault() });
}
op.on("click", function(event) {
event.preventDefault();
event.stopPropagation();
if (!opts.multiple) {
callback(opt.value);
that._hideMenu(menu);
} else {
cb.prop("checked",!cb.prop("checked"));
}
});
});
menu.css({
display: "none"
});
menu.appendTo(document.body);
menu.on('keydown', function(evt) {
if (evt.keyCode === 40) {
evt.preventDefault();
// DOWN
$(this).children(":focus").next().trigger("focus");
} else if (evt.keyCode === 38) {
evt.preventDefault();
// UP
$(this).children(":focus").prev().trigger("focus");
} else if (evt.keyCode === 27) {
// ESCAPE
evt.preventDefault();
that._hideMenu(menu);
}
evt.stopPropagation();
})
return menu;
},
_showMenu: function(menu,relativeTo) {
if (this.disarmClick) {
this.disarmClick = false;
return
}
if (menu.opts.multiple) {
var selected = {};
this.value().split(",").forEach(function(f) {
selected[f] = true;
})
menu.find('input[type="checkbox"]').each(function() {
$(this).prop("checked",selected[$(this).data('value')])
})
}
var that = this;
var pos = relativeTo.offset();
var height = relativeTo.height();
var menuHeight = menu.height();
var top = (height+pos.top);
if (top+menuHeight > $(window).height()) {
top -= (top+menuHeight)-$(window).height()+5;
}
if (top < 0) {
menu.height(menuHeight+top)
top = 0;
}
menu.css({
top: top+"px",
left: (pos.left)+"px",
});
menu.slideDown(100);
this._delay(function() {
that.uiSelect.addClass('red-ui-typedInput-focus');
$(document).on("mousedown.red-ui-typedInput-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, done) {
var labelWidth = label.outerWidth();
if (labelWidth === 0) {
var wrapper = $('
').css({
position:"absolute",
"white-space": "nowrap",
top:-2000
}).appendTo(document.body);
var container = $('
').appendTo(wrapper);
var newTrigger = label.clone().appendTo(container);
setTimeout(function() {
labelWidth = newTrigger.outerWidth();
wrapper.remove();
done(labelWidth);
},50)
} else {
done(labelWidth);
}
},
_updateOptionSelectLabel: function(o) {
var opt = this.typeMap[this.propertyType];
this.optionSelectLabel.empty();
if (opt.hasValue) {
this.valueLabelContainer.empty();
this.valueLabelContainer.show();
} else {
this.valueLabelContainer.hide();
}
if (this.typeMap[this.propertyType].valueLabel) {
if (opt.multiple) {
this.typeMap[this.propertyType].valueLabel.call(this,opt.hasValue?this.valueLabelContainer:this.optionSelectLabel,o);
} else {
this.typeMap[this.propertyType].valueLabel.call(this,opt.hasValue?this.valueLabelContainer:this.optionSelectLabel,o.value);
}
}
if (!this.typeMap[this.propertyType].valueLabel || opt.hasValue) {
if (!opt.multiple) {
if (o.icon) {
if (o.icon.indexOf("<") === 0) {
$(o.icon).prependTo(this.optionSelectLabel);
} else if (o.icon.indexOf("/") !== -1) {
// url
$(' ',{src:mapDeprecatedIcon(o.icon),style:"height: 18px;"}).prependTo(this.optionSelectLabel);
} else {
// icon class
$('',{class:"red-ui-typedInput-icon "+o.icon}).prependTo(this.optionSelectLabel);
}
} else if (o.label) {
this.optionSelectLabel.text(o.label);
} else {
this.optionSelectLabel.text(o.value);
}
if (opt.hasValue) {
this.optionValue = o.value;
this.input.trigger('change',[this.propertyType,this.value()]);
}
} else {
this.optionSelectLabel.text(o.length+" selected");
}
}
},
_destroy: function() {
if (this.optionMenu) {
this.optionMenu.remove();
}
this.menu.remove();
this.uiSelect.remove();
},
types: function(types) {
var that = this;
var currentType = this.type();
this.typeMap = {};
this.typeList = types.map(function(opt) {
var result;
if (typeof opt === 'string') {
result = allOptions[opt];
} else {
result = opt;
}
that.typeMap[result.value] = result;
return result;
});
if (this.typeList.length < 2) {
this.selectTrigger.attr("tabindex", -1)
} else {
this.selectTrigger.attr("tabindex", 0)
}
this.selectTrigger.toggleClass("disabled", this.typeList.length === 1);
this.selectTrigger.find(".fa-caret-down").toggle(this.typeList.length > 1)
if (this.menu) {
this.menu.remove();
}
this.menu = this._createMenu(this.typeList,{},function(v) { that.type(v) });
if (currentType && !this.typeMap.hasOwnProperty(currentType)) {
this.type(this.typeList[0].value);
} else {
this.propertyType = null;
this.type(currentType);
}
},
width: function(desiredWidth) {
this.uiWidth = desiredWidth;
if (this.uiWidth !== null) {
this.uiSelect.width(this.uiWidth);
}
},
value: function(value) {
var that = this;
var opt = this.typeMap[this.propertyType];
if (!arguments.length) {
var v = this.input.val();
if (opt.export) {
v = opt.export(v,this.optionValue)
}
return v;
} else {
var selectedOption = [];
if (opt.options) {
var checkValues = [value];
if (opt.multiple) {
selectedOption = [];
checkValues = value.split(",");
}
checkValues.forEach(function(value) {
for (var i=0;i',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
}
else {
$('',{class:"red-ui-typedInput-icon "+opt.icon,style:"min-width: 13px; margin-right: 4px;"}).prependTo(this.selectLabel);
}
}
if (opt.hasValue === false || (opt.showLabel !== false && !opt.icon)) {
this.selectLabel.text(opt.label);
}
if (opt.label) {
this.selectTrigger.attr("title",opt.label);
} else {
this.selectTrigger.attr("title","");
}
if (opt.hasValue === false) {
this.selectTrigger.addClass("red-ui-typedInput-full-width");
} else {
this.selectTrigger.removeClass("red-ui-typedInput-full-width");
}
if (this.optionMenu) {
this.optionMenu.remove();
this.optionMenu = null;
}
if (opt.options) {
if (this.optionExpandButton) {
this.optionExpandButton.hide();
this.optionExpandButton.shown = false;
}
if (this.optionSelectTrigger) {
this.optionSelectTrigger.css({"display":"inline-flex"});
if (!opt.hasValue) {
this.optionSelectTrigger.css({"flex-grow":1})
this.elementDiv.hide();
this.valueLabelContainer.hide();
} else {
this.optionSelectTrigger.css({"flex-grow":0})
this.elementDiv.show();
this.valueLabelContainer.hide();
}
this.activeOptions = {};
opt.options.forEach(function(o) {
if (typeof o === 'string') {
that.activeOptions[o] = {label:o,value:o};
} else {
that.activeOptions[o.value] = o;
}
});
if (!that.activeOptions.hasOwnProperty(that.optionValue)) {
that.optionValue = null;
}
var op;
if (!opt.hasValue) {
var validValue = false;
var currentVal = this.input.val();
if (!opt.multiple) {
for (var i=0;i');
var content = opt.expand.content.call(that,container);
var panel = RED.popover.panel(container);
panel.container.css({
width:that.valueLabelContainer.width()
});
if (opt.expand.minWidth) {
panel.container.css({
minWidth: opt.expand.minWidth+"px"
});
}
panel.show({
target:that.optionExpandButton,
onclose:content.onclose,
align: "left"
});
}
})
} else {
this.optionExpandButton.shown = false;
this.optionExpandButton.hide();
}
}
this._trigger("typechange",null,this.propertyType);
this.input.trigger('change',[this.propertyType,this.value()]);
}
}
}
},
validate: function() {
var result;
var value = this.value();
var type = this.type();
if (this.typeMap[type] && this.typeMap[type].validate) {
var val = this.typeMap[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;
},
show: function() {
this.uiSelect.show();
},
hide: function() {
this.uiSelect.hide();
},
disable: function(val) {
if(val === undefined || !!val ) {
this.uiSelect.attr("disabled", "disabled");
} else {
this.uiSelect.attr("disabled", null); //remove attr
}
},
enable: function() {
this.uiSelect.attr("disabled", null); //remove attr
},
disabled: function() {
return this.uiSelect.attr("disabled") === "disabled";
}
});
})(jQuery);