mirror of https://github.com/node-red/node-red.git
Update editableList apis
This commit is contained in:
Nick O'Leary
parent
69f83cb905
commit
ada1e624d8
|
|
@ -15,6 +15,27 @@
|
|||
**/
|
||||
(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", {
|
||||
_create: function() {
|
||||
var that = this;
|
||||
|
|
@ -28,17 +49,25 @@
|
|||
|
||||
this.topContainer.addClass('red-ui-editableList');
|
||||
|
||||
var addLabel = "foo";
|
||||
if (RED && RED._) {
|
||||
addLabel = RED._("editableList.add");
|
||||
if (this.options.addButton !== false) {
|
||||
var addLabel;
|
||||
if (typeof this.options.addButton === 'string') {
|
||||
addLabel = this.options.addButton
|
||||
} else {
|
||||
if (RED && RED._) {
|
||||
addLabel = RED._("editableList.add");
|
||||
} else {
|
||||
addLabel = 'add';
|
||||
}
|
||||
}
|
||||
$('<a href="#" class="editor-button editor-button-small" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
|
||||
.appendTo(this.topContainer)
|
||||
.click(function(evt) {
|
||||
evt.preventDefault();
|
||||
that.addItem({});
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
addButton.click(function(evt) {
|
||||
evt.preventDefault();
|
||||
that.addItem({});
|
||||
});
|
||||
|
||||
this.uiContainer.addClass("red-ui-editableList-container");
|
||||
|
||||
this.uiHeight = this.element.height();
|
||||
|
|
@ -48,18 +77,37 @@
|
|||
this.uiContainer.css("minHeight",minHeight);
|
||||
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) {
|
||||
this.element.sortable({
|
||||
var handle = (typeof this.options.sortable === 'string')?
|
||||
this.options.sortable :
|
||||
".red-ui-editableList-item-handle";
|
||||
var sortOptions = {
|
||||
axis: "y",
|
||||
update: function( event, ui ) {
|
||||
if (that.options.updateOrder) {
|
||||
that.options.updateOrder(that.items());
|
||||
if (that.options.sortItems) {
|
||||
that.options.sortItems(that.items());
|
||||
}
|
||||
},
|
||||
handle:".red-ui-editableList-item-handle",
|
||||
cursor: "move"
|
||||
});
|
||||
handle:handle,
|
||||
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();
|
||||
|
|
@ -71,7 +119,9 @@
|
|||
var currentFullHeight = this.topContainer.height();
|
||||
var innerHeight = this.uiContainer.height();
|
||||
var delta = currentFullHeight - innerHeight;
|
||||
this.uiContainer.height(this.uiHeight-delta);
|
||||
if (this.uiHeight != 0) {
|
||||
this.uiContainer.height(this.uiHeight-delta);
|
||||
}
|
||||
if (this.options.resize) {
|
||||
this.options.resize();
|
||||
}
|
||||
|
|
@ -96,22 +146,22 @@
|
|||
var that = this;
|
||||
data = data || {};
|
||||
var li = $('<li>').appendTo(this.element);
|
||||
li.data('data',data);
|
||||
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);
|
||||
li.addClass("red-ui-editableList-item-sortable");
|
||||
}
|
||||
if (this.options.deletable) {
|
||||
var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-delete editor-button editor-button-small"}).appendTo(li);
|
||||
if (this.options.removable) {
|
||||
var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(li);
|
||||
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
|
||||
li.addClass("red-ui-editableList-item-deletable");
|
||||
li.addClass("red-ui-editableList-item-removable");
|
||||
deleteButton.click(function() {
|
||||
li.addClass("red-ui-editableList-item-deleting")
|
||||
li.fadeOut(300, function() {
|
||||
$(this).remove();
|
||||
if (that.options.deleteItem) {
|
||||
that.options.deleteItem(li.data('data'));
|
||||
if (that.options.removeItem) {
|
||||
that.options.removeItem(row.data('data'));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -123,8 +173,20 @@
|
|||
},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() {
|
||||
return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); });
|
||||
},
|
||||
empty: function() {
|
||||
this.element.empty();
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -16,27 +16,28 @@
|
|||
|
||||
|
||||
.red-ui-editableList-container {
|
||||
min-height: 200px;
|
||||
border: 1px solid $form-input-border-color;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
overflow-y:scroll;
|
||||
|
||||
.red-ui-editableList-list {
|
||||
list-style-type:none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.red-ui-editabelList-item-placeholder {
|
||||
border: 2px dashed $secondary-border-color !important;
|
||||
}
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin:0;
|
||||
padding:8px 0px;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
|
||||
min-height: 20px;
|
||||
.red-ui-editableList-item-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -45,18 +46,21 @@
|
|||
color: #eee;
|
||||
cursor: move;
|
||||
}
|
||||
.red-ui-editableList-item-delete {
|
||||
.red-ui-editableList-item-remove {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
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-sortable .red-ui-editableList-item-content {
|
||||
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;
|
||||
}
|
||||
&.red-ui-editableList-item-deleting {
|
||||
|
|
|
|||
|
|
@ -173,17 +173,17 @@
|
|||
}
|
||||
selectField.change();
|
||||
},
|
||||
deleteItem: function(opt) {
|
||||
removeItem: function(opt) {
|
||||
var rules = $("#node-input-rule-container").editableList('items');
|
||||
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
|
||||
},
|
||||
resizeItem: resizeRule,
|
||||
updateOrder: function(rules) {
|
||||
sortItems: function(rules) {
|
||||
var rules = $("#node-input-rule-container").editableList('items');
|
||||
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
|
||||
},
|
||||
sortable: true,
|
||||
deletable: true
|
||||
removable: true
|
||||
});
|
||||
|
||||
for (var i=0;i<this.rules.length;i++) {
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@
|
|||
resizeRule(container);
|
||||
},
|
||||
resizeItem: resizeRule,
|
||||
deletable: true,
|
||||
removable: true,
|
||||
sortable: true
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue