diff --git a/Gruntfile.js b/Gruntfile.js index 39a2045f6..895f7cafe 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -126,7 +126,8 @@ module.exports = function(grunt) { "editor/js/ui/notifications.js", "editor/js/ui/subflow.js", "editor/js/ui/touch/radialMenu.js", - "editor/js/ui/typedInput.js" + "editor/js/ui/typedInput.js", + "editor/js/ui/editableList.js" ], dest: "public/red/red.js" }, diff --git a/editor/js/ui/editableList.js b/editor/js/ui/editableList.js new file mode 100644 index 000000000..6c43f1549 --- /dev/null +++ b/editor/js/ui/editableList.js @@ -0,0 +1,130 @@ +/** + * Copyright 2016 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($) { + + $.widget( "nodered.editableList", { + _create: function() { + var that = this; + + this.element.addClass('red-ui-editableList-list'); + this.uiWidth = this.element.width(); + this.uiContainer = this.element + .wrap( "
" ) + .parent(); + this.topContainer = this.uiContainer.wrap("
").parent(); + + this.topContainer.addClass('red-ui-editableList'); + + var addLabel = "foo"; + if (RED && RED._) { + addLabel = RED._("editableList.add"); + } + + var addButton = $(' '+addLabel+'').appendTo(this.topContainer); + addButton.click(function(evt) { + evt.preventDefault(); + that.addItem({}); + }); + + this.uiContainer.addClass("red-ui-editableList-container"); + + this.uiHeight = this.element.height(); + + var minHeight = this.element.css("minHeight"); + if (minHeight !== '0px') { + this.uiContainer.css("minHeight",minHeight); + this.element.css("minHeight",0); + } + + if (this.options.sortable) { + this.element.sortable({ + axis: "y", + update: function( event, ui ) { + if (that.options.updateOrder) { + that.options.updateOrder(that.items()); + } + }, + handle:".red-ui-editableList-item-handle", + cursor: "move" + }); + } + + this._resize(); + + // this.menu = this._createMenu(this.types, function(v) { that.type(v) }); + // this.type(this.options.default||this.types[0].value); + }, + _resize: function() { + var currentFullHeight = this.topContainer.height(); + var innerHeight = this.uiContainer.height(); + var delta = currentFullHeight - innerHeight; + this.uiContainer.height(this.uiHeight-delta); + if (this.options.resize) { + this.options.resize(); + } + if (this.options.resizeItem) { + var that = this; + this.element.children().each(function(i) { + that.options.resizeItem($(this).find(".red-ui-editableList-item-content")); + }); + } + }, + _destroy: function() { + }, + width: function(desiredWidth) { + this.uiWidth = desiredWidth; + this._resize(); + }, + height: function(desiredHeight) { + this.uiHeight = desiredHeight; + this._resize(); + }, + addItem: function(data) { + var that = this; + data = data || {}; + var li = $('
  • ').appendTo(this.element); + li.data('data',data); + var row = $('
    ').addClass("red-ui-editableList-item-content").appendTo(li); + if (this.options.sortable) { + $('').appendTo(li); + li.addClass("red-ui-editableList-item-sortable"); + } + if (this.options.deletable) { + var deleteButton = $('',{href:"#",class:"red-ui-editableList-item-delete editor-button editor-button-small"}).appendTo(li); + $('',{class:"fa fa-remove"}).appendTo(deleteButton); + li.addClass("red-ui-editableList-item-deletable"); + 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 (this.options.addItem) { + var index = that.element.children().length-1; + setTimeout(function() { + that.options.addItem(row,index,data); + },0); + } + }, + items: function() { + return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); }); + } + }); +})(jQuery); diff --git a/editor/sass/editableList.scss b/editor/sass/editableList.scss new file mode 100644 index 000000000..2dd01b592 --- /dev/null +++ b/editor/sass/editableList.scss @@ -0,0 +1,67 @@ +/** + * Copyright 2016 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. + **/ + + + .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; + } + + li { + position: relative; + background: #fff; + margin:0; + padding:8px 0px; + border-bottom: 1px solid $secondary-border-color; + + .red-ui-editableList-item-handle { + position: absolute; + top: 50%; + left: 2px; + margin-top: -7px; + color: #eee; + cursor: move; + } + .red-ui-editableList-item-delete { + position: absolute; + top: 50%; + right: 0px; + margin-top: -9px; + } + //.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 { + margin-right: 28px; + } + &.red-ui-editableList-item-deleting { + background: #fee; + } + } + + } diff --git a/editor/sass/style.scss b/editor/sass/style.scss index 19c89f188..2687d47fe 100644 --- a/editor/sass/style.scss +++ b/editor/sass/style.scss @@ -42,6 +42,7 @@ @import "flow"; @import "typedInput"; +@import "editableList"; @import "dragdrop"; diff --git a/nodes/core/logic/10-switch.html b/nodes/core/logic/10-switch.html index 78fa23f4e..f05ccfa9c 100644 --- a/nodes/core/logic/10-switch.html +++ b/nodes/core/logic/10-switch.html @@ -1,5 +1,5 @@