Skip to content

Commit

Permalink
Restrict SF value type according to input selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@knolleary
knolleary committed Jul 30, 2019
1 parent 11b7f07 commit 22b1c4c
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 14 deletions.
4 changes: 2 additions & 2 deletions packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ RED.popover = (function() {

var top = (targetHeight+pos.top);
if (top+panelHeight > $(window).height()) {
top -= (top+panelHeight)-$(window).height();
top -= (top+panelHeight)-$(window).height() + 5;
}
if (top < 0) {
panelHeight.height(panelHeight+top)
Expand All @@ -302,7 +302,7 @@ RED.popover = (function() {
panel.slideDown(100);

$(document).on("mousedown.red-ui-popover-panel-close", function(event) {
if(!$(event.target).closest(panel).length) {
if(!$(event.target).closest(panel).length && !$(event.target).closest(".red-ui-editor-dialog").length) {
if (closeCallback) {
closeCallback();
}
Expand Down
4 changes: 2 additions & 2 deletions packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@
},
_createMenu: function(menuOptions,opts,callback) {
var that = this;
var menu = $("<div>").addClass("red-ui-typedInput-options");
var menu = $("<div>").addClass("red-ui-typedInput-options red-ui-editor-dialog");
menu.opts = opts;
menu.callback = callback;
menuOptions.forEach(function(opt) {
Expand All @@ -385,7 +385,7 @@
}
var cb;
if (opts.multiple) {
cb = $('<input type="checkbox">').data('value',opt.value).prependTo(op);
cb = $('<input type="checkbox">').css("pointer-events","none").data('value',opt.value).prependTo(op).on("mousedown", function(evt) { evt.preventDefault() });
}

op.on("click", function(event) {
Expand Down
78 changes: 70 additions & 8 deletions packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -636,6 +636,9 @@ RED.editor = (function() {
if (env.ui.type === "input") {
inputCellInput.val(env.ui.opts.types.join(","));
}
var checkbox;
var selectBox;

inputCellInput.typedInput({
types: [
{value:"input",
Expand Down Expand Up @@ -675,17 +678,29 @@ RED.editor = (function() {
valueLabel: function(container,value) {
container.css("padding","0");

var select = $('<select></select>').appendTo(container);
selectBox = $('<select></select>').appendTo(container);
if (env.ui.opts && Array.isArray(env.ui.opts.opts)) {
env.ui.opts.opts.forEach(function(o) {
var label = lookupLabel(o.l, o.l["en-US"]||o.v, currentLocale);
$('<option>').val(o.v).text(label).appendTo(select);
// $('<option>').val((o.t||'str')+":"+o.v).text(label).appendTo(selectBox);
$('<option>').val(o.v).text(label).appendTo(selectBox);
})
}
selectBox.on('change', function(evt) {
var v = selectBox.val();
// var parts = v.split(":");
// var t = parts.shift();
// v = parts.join(":");
//
// valueField.typedInput("type",'str')
valueField.typedInput("value",v)
});
selectBox.val(valueField.typedInput("value"));
// selectBox.val(valueField.typedInput('type')+":"+valueField.typedInput("value"));
},
expand: {
icon: "fa-caret-down",
minWidth: 300,
minWidth: 400,
content: function(container) {
var content = $('<div class="red-ui-editor-subflow-ui-edit-panel">').appendTo(container);
var optList = $('<ol>').appendTo(content).editableList({
Expand All @@ -705,6 +720,14 @@ RED.editor = (function() {
return currentLocale;
})
itemData.input = $('<input type="text">').val(itemData.v).appendTo(row);

// Problem using a TI here:
// - this is in a popout panel
// - clicking the expand button in the TI will close the parent edit tray
// and open the type editor.
// - but it leaves the popout panel over the top.
// - there is no way to get back to the popout panel after closing the type editor
//.typedInput({default:itemData.t||'str', types:['str','num','bool','json','bin','env']});
itemData.input.on('keydown', function(evt) {
if (evt.keyCode === 13) {
// Enter or Tab
Expand All @@ -721,7 +744,6 @@ RED.editor = (function() {
} else {
var nextItem = optList.editableList('getItemAt',index+1);
if (nextItem.label) {
console.log(nextItem);
nextItem.label.focus()
}
}
Expand All @@ -748,17 +770,22 @@ RED.editor = (function() {
var data = el.data('data');
var l = data.label.val().trim();
var v = data.input.val();
// var t = data.input.typedInput('type');
// var v = data.input.typedInput('value');
if (l.length > 0) {
data.l = data.l || {};
data.l[currentLocale] = l;
}
data.v = v;

if (l.length > 0 || v.length > 0) {
vals.push({l:data.l,v:data.v});
var val = {l:data.l,v:data.v};
// if (t !== 'str') {
// val.t = t;
// }
vals.push(val);
}
});
console.log(vals);
env.ui.opts.opts = vals;
inputCellInput.typedInput('value',Date.now())
}
Expand All @@ -770,9 +797,12 @@ RED.editor = (function() {
label:"checkbox", icon:"fa fa-check-square-o",showLabel:false,
valueLabel: function(container,value) {
container.css("padding",0);
$('<input type="checkbox">').appendTo(container);
checkbox = $('<input type="checkbox">').appendTo(container);
checkbox.on('change', function(evt) {
valueField.typedInput('value',$(this).prop('checked')?"true":"false");
})
checkbox.prop('checked',valueField.typedInput('value')==="true");
}

},
{value:"spinner",
label:"spinner", icon:"fa fa-sort-numeric-asc", showLabel:false,
Expand Down Expand Up @@ -853,11 +883,43 @@ RED.editor = (function() {
// been updated.
inputCellInput.typedInput('value',Date.now())
}

switch (env.ui.type) {
case 'input':
valueField.typedInput('types',env.ui.opts.types);
break;
case 'select':
valueField.typedInput('types',['str']);
break;
case 'checkbox':
valueField.typedInput('types',['bool']);
break;
case 'spinner':
valueField.typedInput('types',['num'])
break;
default:
valueField.typedInput('types',['str','num','bool','json','bin','env'])
}
if (env.ui.type === 'checkbox') {
valueField.typedInput('type','bool');
} else if (env.ui.type === 'spinner') {
valueField.typedInput('type','num');
}
if (env.ui.type !== 'checkbox') {
checkbox = null;
}

}).on("change", function(evt,type) {
if (env.ui.type === 'input') {
env.ui.opts.types = inputCellInput.typedInput('value').split(",");
valueField.typedInput('types',env.ui.opts.types);
}
});
valueField.on("change", function(evt) {
if (checkbox) {
checkbox.prop('checked',$(this).typedInput('value')==="true")
}
})
// Set the input to the right type. This will trigger the 'typedinputtypechange'
// event handler (just above ^^) to update the value if needed
inputCellInput.typedInput('type',env.ui.type)
Expand Down
13 changes: 13 additions & 0 deletions packages/node_modules/@node-red/editor-client/src/sass/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -852,6 +852,19 @@ span.red-ui-editor-subflow-env-lang-icon {
border-left: 1px solid $secondary-border-color;
}
}
button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger {
border-radius: 0;
height: 34px;
}
.red-ui-typedInput-container {
border-radius: 0;
border: none;
input.red-ui-typedInput-input {
height: 34px;
border-right: none;
}
}

.red-ui-editor-subflow-env-lang-icon {
top: 1px;
right: 1px;
Expand Down
7 changes: 5 additions & 2 deletions packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,12 @@
text-decoration: none;
background: $workspace-button-background-active;
}
input[type="checkbox"] {
margin-right: 6px;
}
}
.red-ui-typedInput-icon {
margin-right: 4px;
margin-right: 6px;
}
}
button.red-ui-typedInput-type-select,
Expand All @@ -108,7 +111,7 @@ button.red-ui-typedInput-option-trigger
display:inline-block;
background: $form-button-background;
height: 32px;
line-height: 32px;
line-height: 30px;
min-width: 23px;
vertical-align: middle;
color: $form-text-color;
Expand Down

0 comments on commit 22b1c4c

Please sign in to comment.