frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Update editableList apis

This commit is contained in:
Nick O'Leary 2016-05-29 22:25:30 +01:00
parent 69f83cb905
commit ada1e624d8
4 changed files with 100 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
editor/js/ui/editableList.js
View File

@ -15,6 +15,27 @@
**/ **/
(function($) { (function($) {
/**
* options:
* - addButton : boolean|string - text for add label, default 'tab'
* - addable : boolean (true) - whether to show the add button
* - height : number|'auto'
* - resize : function - called when list as a whole is resized
* - resizeItem : function(item) - called to resize individual item
* - sortable : boolean|string - string is the css selector for handle
* - sortItems : function(items) - when order of items changes
* - connectWith : css selector of other sortables
* - removable : boolean - whether to display delete button on items
* - addItem : function(row,index,itemData) - when an item is added
* - removeItem : function(itemData) - called when an item is removed
* methods:
* - addItem(itemData)
* - removeItem(itemData)
* - width(width)
* - height(height)
* - items()
* - empty()
*/
$.widget( "nodered.editableList", { $.widget( "nodered.editableList", {
_create: function() { _create: function() {
var that = this; var that = this;
@ -28,16 +49,24 @@
this.topContainer.addClass('red-ui-editableList'); this.topContainer.addClass('red-ui-editableList');
var addLabel = "foo"; if (this.options.addButton !== false) {
var addLabel;
if (typeof this.options.addButton === 'string') {
addLabel = this.options.addButton
} else {
if (RED && RED._) { if (RED && RED._) {
addLabel = RED._("editableList.add"); addLabel = RED._("editableList.add");
} else {
addLabel = 'add';
} }
}
var addButton = $('<a href="#" class="editor-button editor-button-small" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>').appendTo(this.topContainer); $('<a href="#" class="editor-button editor-button-small" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
addButton.click(function(evt) { .appendTo(this.topContainer)
.click(function(evt) {
evt.preventDefault(); evt.preventDefault();
that.addItem({}); that.addItem({});
}); });
}
this.uiContainer.addClass("red-ui-editableList-container"); this.uiContainer.addClass("red-ui-editableList-container");
@ -48,18 +77,37 @@
this.uiContainer.css("minHeight",minHeight); this.uiContainer.css("minHeight",minHeight);
this.element.css("minHeight",0); this.element.css("minHeight",0);
} }
if (this.options.height !== 'auto') {
this.uiContainer.css("overflow-y","scroll");
if (!isNaN(this.options.height)) {
this.uiHeight = this.options.height;
}
}
if (this.options.sortable) { if (this.options.sortable) {
this.element.sortable({ var handle = (typeof this.options.sortable === 'string')?
this.options.sortable :
".red-ui-editableList-item-handle";
var sortOptions = {
axis: "y", axis: "y",
update: function( event, ui ) { update: function( event, ui ) {
if (that.options.updateOrder) { if (that.options.sortItems) {
that.options.updateOrder(that.items()); that.options.sortItems(that.items());
} }
}, },
handle:".red-ui-editableList-item-handle", handle:handle,
cursor: "move" cursor: "move",
}); tolerance: "pointer",
forcePlaceholderSize:true,
placeholder: "red-ui-editabelList-item-placeholder",
start: function(e, ui){
ui.placeholder.height(ui.item.height()-4);
}
};
if (this.options.connectWith) {
sortOptions.connectWith = this.options.connectWith;
}
this.element.sortable(sortOptions);
} }
this._resize(); this._resize();
@ -71,7 +119,9 @@
var currentFullHeight = this.topContainer.height(); var currentFullHeight = this.topContainer.height();
var innerHeight = this.uiContainer.height(); var innerHeight = this.uiContainer.height();
var delta = currentFullHeight - innerHeight; var delta = currentFullHeight - innerHeight;
if (this.uiHeight != 0) {
this.uiContainer.height(this.uiHeight-delta); this.uiContainer.height(this.uiHeight-delta);
}
if (this.options.resize) { if (this.options.resize) {
this.options.resize(); this.options.resize();
} }
@ -96,22 +146,22 @@
var that = this; var that = this;
data = data || {}; data = data || {};
var li = $('<li>').appendTo(this.element); var li = $('<li>').appendTo(this.element);
li.data('data',data);
var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li); var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li);
if (this.options.sortable) { row.data('data',data);
if (this.options.sortable === true) {
$('<i class="red-ui-editableList-item-handle fa fa-bars"></i>').appendTo(li); $('<i class="red-ui-editableList-item-handle fa fa-bars"></i>').appendTo(li);
li.addClass("red-ui-editableList-item-sortable"); li.addClass("red-ui-editableList-item-sortable");
} }
if (this.options.deletable) { if (this.options.removable) {
var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-delete editor-button editor-button-small"}).appendTo(li); var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(li);
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton); $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
li.addClass("red-ui-editableList-item-deletable"); li.addClass("red-ui-editableList-item-removable");
deleteButton.click(function() { deleteButton.click(function() {
li.addClass("red-ui-editableList-item-deleting") li.addClass("red-ui-editableList-item-deleting")
li.fadeOut(300, function() { li.fadeOut(300, function() {
$(this).remove(); $(this).remove();
if (that.options.deleteItem) { if (that.options.removeItem) {
that.options.deleteItem(li.data('data')); that.options.removeItem(row.data('data'));
} }
}); });
}); });
@ -123,8 +173,20 @@
},0); },0);
} }
}, },
removeItem: function(data) {
var items = this.element.children().filter(function(f) {
return data === $(this).find(".red-ui-editableList-item-content").data('data');
});
items.remove();
if (this.options.removeItem) {
this.options.removeItem(data);
}
},
items: function() { items: function() {
return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); }); return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); });
},
empty: function() {
this.element.empty();
} }
}); });
})(jQuery); })(jQuery);

16
editor/sass/editableList.scss
View File

@ -16,27 +16,28 @@
.red-ui-editableList-container { .red-ui-editableList-container {
min-height: 200px;
border: 1px solid $form-input-border-color; border: 1px solid $form-input-border-color;
border-radius: 4px; border-radius: 4px;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
overflow-y:scroll;
.red-ui-editableList-list { .red-ui-editableList-list {
list-style-type:none; list-style-type:none;
margin: 0; margin: 0;
} }
.red-ui-editabelList-item-placeholder {
border: 2px dashed $secondary-border-color !important;
}
li { li {
box-sizing: border-box;
position: relative; position: relative;
background: #fff; background: #fff;
margin:0; margin:0;
padding:8px 0px; padding:8px 0px;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
min-height: 20px;
.red-ui-editableList-item-handle { .red-ui-editableList-item-handle {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -45,18 +46,21 @@
color: #eee; color: #eee;
cursor: move; cursor: move;
} }
.red-ui-editableList-item-delete { .red-ui-editableList-item-remove {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0px; right: 0px;
margin-top: -9px; margin-top: -9px;
} }
&.ui-sortable-helper {
border-top: 1px solid $secondary-border-color;
}
//.red-ui-editableList-item-content { outline: 1px solid red} //.red-ui-editableList-item-content { outline: 1px solid red}
&.red-ui-editableList-item-sortable .red-ui-editableList-item-content { &.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
margin-left: 22px; margin-left: 22px;
} }
&.red-ui-editableList-item-deletable .red-ui-editableList-item-content { &.red-ui-editableList-item-removable .red-ui-editableList-item-content {
margin-right: 28px; margin-right: 28px;
} }
&.red-ui-editableList-item-deleting { &.red-ui-editableList-item-deleting {

6
nodes/core/logic/10-switch.html
View File

@ -173,17 +173,17 @@
} }
selectField.change(); selectField.change();
}, },
deleteItem: function(opt) { removeItem: function(opt) {
var rules = $("#node-input-rule-container").editableList('items'); var rules = $("#node-input-rule-container").editableList('items');
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); }); rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
}, },
resizeItem: resizeRule, resizeItem: resizeRule,
updateOrder: function(rules) { sortItems: function(rules) {
var rules = $("#node-input-rule-container").editableList('items'); var rules = $("#node-input-rule-container").editableList('items');
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); }); rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
}, },
sortable: true, sortable: true,
deletable: true removable: true
}); });
for (var i=0;i<this.rules.length;i++) { for (var i=0;i<this.rules.length;i++) {

2
nodes/core/logic/15-change.html
View File

@ -210,7 +210,7 @@
resizeRule(container); resizeRule(container);
}, },
resizeItem: resizeRule, resizeItem: resizeRule,
deletable: true, removable: true,
sortable: true sortable: true
}); });