@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/common/editableList.js

@@ -0,0 +1,322 @@
+ 
+(function($) {
+
+/**
+ * options:
+ *   - addButton : boolean|string - text for add label, default 'add'
+ *   - 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
+ *   - filter : function(itemData) - called for each item to determine if it should be shown
+ *   - sort : function(itemDataA,itemDataB) - called to sort items
+ *   - scrollOnAdd : boolean - whether to scroll to newly added items
+ * methods:
+ *   - addItem(itemData)
+ *   - removeItem(itemData)
+ *   - width(width)
+ *   - height(height)
+ *   - items()
+ *   - empty()
+ *   - filter(filter)
+ *   - sort(sort)
+ *   - length()
+ */
+    $.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( "<div>" )
+                .parent();
+
+            if (this.options.header) {
+                this.options.header.addClass("red-ui-editableList-header");
+                this.borderContainer = this.uiContainer.wrap("<div>").parent();
+                this.borderContainer.prepend(this.options.header);
+                this.topContainer = this.borderContainer.wrap("<div>").parent();
+            } else {
+                this.topContainer = this.uiContainer.wrap("<div>").parent();
+            }
+            this.topContainer.addClass('red-ui-editableList');
+            if (this.options.class) {
+                this.topContainer.addClass(this.options.class);
+            }
+
+            if (this.options.addButton !== false) {
+                var addLabel;
+                if (typeof this.options.addButton === 'string') {
+                    addLabel = this.options.addButton
+                } else {
+                    addLabel = 'add';
+                }
+                $('<a href="#" class="editor-button editor-button-small red-ui-editableList-addButton" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
+                    .appendTo(this.topContainer)
+                    .click(function(evt) {
+                        evt.preventDefault();
+                        that.addItem({});
+                    });
+            }
+            if (this.element.css("position") === "absolute") {
+                ["top","left","bottom","right"].forEach(function(s) {
+                    var v = that.element.css(s);
+                    if (v!=="auto" && v!=="") {
+                        that.topContainer.css(s,v);
+                        that.uiContainer.css(s,"0");
+                        that.element.css(s,'auto');
+                    }
+                })
+                this.element.css("position","static");
+                this.topContainer.css("position","absolute");
+                this.uiContainer.css("position","absolute");
+
+            }
+            if (this.options.header) {
+                this.borderContainer.addClass("red-ui-editableList-border");
+            } else {
+                this.uiContainer.addClass("red-ui-editableList-border");
+            }
+            this.uiContainer.addClass("red-ui-editableList-container");
+
+            this.uiHeight = this.element.height();
+
+            this.activeFilter = this.options.filter||null;
+            this.activeSort = this.options.sort||null;
+            this.scrollOnAdd = this.options.scrollOnAdd;
+            if (this.scrollOnAdd === undefined) {
+                this.scrollOnAdd = true;
+            }
+            var minHeight = this.element.css("minHeight");
+            if (minHeight !== '0px') {
+                this.uiContainer.css("minHeight",minHeight);
+                this.element.css("minHeight",0);
+            }
+            var maxHeight = this.element.css("maxHeight");
+            if (maxHeight !== '0px') {
+                this.uiContainer.css("maxHeight",maxHeight);
+                this.element.css("maxHeight",null);
+            }
+            if (this.options.height !== 'auto') {
+                this.uiContainer.css("overflow-y","scroll");
+                if (!isNaN(this.options.height)) {
+                    this.uiHeight = this.options.height;
+                }
+            }
+            this.element.height('auto');
+
+            var attrStyle = this.element.attr('style');
+            var m;
+            if ((m = /width\s*:\s*(\d+%)/i.exec(attrStyle)) !== null) {
+                this.element.width('100%');
+                this.uiContainer.width(m[1]);
+            }
+            if (this.options.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.sortItems) {
+                            that.options.sortItems(that.items());
+                        }
+                    },
+                    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();
+
+            // 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;
+            if (this.uiHeight !== 0) {
+                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"),i);
+                });
+            }
+        },
+        _destroy: function() {
+        },
+        _refreshFilter: function() {
+            var that = this;
+            var count = 0;
+            if (!this.activeFilter) {
+                return this.element.children().show();
+            }
+            var items = this.items();
+            items.each(function (i,el) {
+                var data = el.data('data');
+                try {
+                    if (that.activeFilter(data)) {
+                        el.parent().show();
+                        count++;
+                    } else {
+                        el.parent().hide();
+                    }
+                } catch(err) {
+                    console.log(err);
+                    el.parent().show();
+                    count++;
+                }
+            });
+            return count;
+        },
+        _refreshSort: function() {
+            if (this.activeSort) {
+                var items = this.element.children();
+                var that = this;
+                items.sort(function(A,B) {
+                    return that.activeSort($(A).find(".red-ui-editableList-item-content").data('data'),$(B).find(".red-ui-editableList-item-content").data('data'));
+                });
+                $.each(items,function(idx,li) {
+                    that.element.append(li);
+                })
+            }
+        },
+        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 = $('<li>');
+            var added = false;
+            if (this.activeSort) {
+                var items = this.items();
+                var skip = false;
+                items.each(function(i,el) {
+                    if (added) { return }
+                    var itemData = el.data('data');
+                    if (that.activeSort(data,itemData) < 0) {
+                         li.insertBefore(el.closest("li"));
+                         added = true;
+                    }
+                });
+            }
+            if (!added) {
+                li.appendTo(this.element);
+            }
+            var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li);
+            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.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-removable");
+                deleteButton.click(function(evt) {
+                    evt.preventDefault();
+                    var data = row.data('data');
+                    li.addClass("red-ui-editableList-item-deleting")
+                    li.fadeOut(300, function() {
+                        $(this).remove();
+                        if (that.options.removeItem) {
+                            that.options.removeItem(data);
+                        }
+                    });
+                });
+            }
+            if (this.options.addItem) {
+                var index = that.element.children().length-1;
+                setTimeout(function() {
+                    that.options.addItem(row,index,data);
+                    if (that.activeFilter) {
+                        try {
+                            if (!that.activeFilter(data)) {
+                                li.hide();
+                            }
+                        } catch(err) {
+                        }
+                    }
+
+                    if (!that.activeSort && that.scrollOnAdd) {
+                        setTimeout(function() {
+                            that.uiContainer.scrollTop(that.element.height());
+                        },0);
+                    }
+                },0);
+            }
+        },
+        addItems: function(items) {
+            for (var i=0; i<items.length;i++) {
+                this.addItem(items[i]);
+            }
+        },
+        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();
+        },
+        filter: function(filter) {
+            if (filter !== undefined) {
+                this.activeFilter = filter;
+            }
+            return this._refreshFilter();
+        },
+        sort: function(sort) {
+            if (sort !== undefined) {
+                this.activeSort = sort;
+            }
+            return this._refreshSort();
+        },
+        length: function() {
+            return this.element.children().length;
+        },
+        show: function(item) {
+            var items = this.element.children().filter(function(f) {
+                return item === $(this).find(".red-ui-editableList-item-content").data('data');
+            });
+            if (items.length > 0) {
+                this.uiContainer.scrollTop(this.uiContainer.scrollTop()+items.position().top)
+            }
+        }
+    });
+})(jQuery);

package/src/app/ui/editor-client/src/js/ui/common/menu.js

@@ -0,0 +1,277 @@
+ 
+RED.menu = (function() {
+  var menuItems = {};
+
+  function createMenuItem(opt) {
+    var item;
+
+    if (opt !== null && opt.id) {
+      var themeSetting = RED.settings.theme('menu.' + opt.id);
+      if (themeSetting === false) {
+        return null;
+      }
+    }
+
+    function setInitialState() {
+      var savedStateActive = RED.settings.get('menu-' + opt.id);
+      if (opt.setting) {
+        // May need to migrate pre-0.17 setting
+
+        if (savedStateActive !== null) {
+          RED.settings.set(opt.setting, savedStateActive);
+          RED.settings.remove('menu-' + opt.id);
+        } else {
+          savedStateActive = RED.settings.get(opt.setting);
+        }
+      }
+      if (savedStateActive) {
+        link.addClass('active');
+        triggerAction(opt.id, true);
+      } else if (savedStateActive === false) {
+        link.removeClass('active');
+        triggerAction(opt.id, false);
+      } else if (opt.hasOwnProperty('selected')) {
+        if (opt.selected) {
+          link.addClass('active');
+        } else {
+          link.removeClass('active');
+        }
+        triggerAction(opt.id, opt.selected);
+      }
+    }
+
+    if (opt === null) {
+      item = $('<li class="divider"></li>');
+    } else {
+      item = $('<li></li>');
+
+      if (opt.group) {
+        item.addClass('menu-group-' + opt.group);
+      }
+      var linkContent =
+        '<a ' +
+        (opt.id ? 'id="' + opt.id + '" ' : '') +
+        'tabindex="-1" href="#">';
+      if (opt.toggle) {
+        linkContent += '<i class="fa fa-square pull-left"></i>';
+        linkContent += '<i class="fa fa-check-square pull-left"></i>';
+      }
+      if (opt.icon !== undefined) {
+        if (/\.png/.test(opt.icon)) {
+          linkContent += '<img src="' + opt.icon + '"/> ';
+        } else {
+          linkContent +=
+            '<i class="' +
+            (opt.icon ? opt.icon : '" style="display: inline-block;"') +
+            '"></i> ';
+        }
+      }
+
+      if (opt.sublabel) {
+        linkContent +=
+          '<span class="menu-label-container"><span class="menu-label">' +
+          opt.label +
+          '</span>' +
+          '<span class="menu-sublabel">' +
+          opt.sublabel +
+          '</span></span>';
+      } else {
+        linkContent += '<span class="menu-label">' + opt.label + '</span>';
+      }
+
+      linkContent += '</a>';
+
+      var link = $(linkContent).appendTo(item);
+
+      menuItems[opt.id] = opt;
+
+      if (opt.onselect) {
+        link.click(function(e) {
+          e.preventDefault();
+          if (
+            $(this)
+              .parent()
+              .hasClass('disabled')
+          ) {
+            return;
+          }
+          if (opt.toggle) {
+            var selected = isSelected(opt.id);
+            if (typeof opt.toggle === 'string') {
+              if (!selected) {
+                for (var m in menuItems) {
+                  if (menuItems.hasOwnProperty(m)) {
+                    var mi = menuItems[m];
+                    if (mi.id != opt.id && opt.toggle == mi.toggle) {
+                      setSelected(mi.id, false);
+                    }
+                  }
+                }
+                setSelected(opt.id, true);
+              }
+            } else {
+              setSelected(opt.id, !selected);
+            }
+          } else {
+            triggerAction(opt.id);
+          }
+        });
+        if (opt.toggle) {
+          setInitialState();
+        }
+      } else if (opt.href) {
+        link.attr('target', '_blank').attr('href', opt.href);
+      } else if (!opt.options) {
+        item.addClass('disabled');
+        link.click(function(event) {
+          event.preventDefault();
+        });
+      }
+      if (opt.options) {
+        item.addClass('dropdown-submenu pull-left');
+        var submenu = $(
+          '<ul id="' + opt.id + '-submenu" class="dropdown-menu"></ul>'
+        ).appendTo(item);
+
+        for (var i = 0; i < opt.options.length; i++) {
+          var li = createMenuItem(opt.options[i]);
+          if (li) {
+            li.appendTo(submenu);
+          }
+        }
+      }
+      if (opt.disabled) {
+        item.addClass('disabled');
+      }
+    }
+
+    return item;
+  }
+  function createMenu(options) {
+    var topMenu = $('<ul/>', { class: 'dropdown-menu pull-right' });
+
+    if (options.id) {
+      topMenu.attr({ id: options.id + '-submenu' });
+      var menuParent = $('#' + options.id);
+      if (menuParent.length === 1) {
+        topMenu.insertAfter(menuParent);
+      }
+    }
+
+    var lastAddedSeparator = false;
+    for (var i = 0; i < options.options.length; i++) {
+      var opt = options.options[i];
+      if (opt !== null || !lastAddedSeparator) {
+        var li = createMenuItem(opt);
+        if (li) {
+          li.appendTo(topMenu);
+          lastAddedSeparator = opt === null;
+        }
+      }
+    }
+    return topMenu;
+  }
+
+  function triggerAction(id, args) {
+    var opt = menuItems[id];
+    //console.log(opt);
+    var callback = opt.onselect;
+    if (typeof opt.onselect === 'string') {
+      callback = RED.actions.get(opt.onselect);
+      //console.log(callback);
+    }
+    if (callback) {
+      callback.call(opt, args);
+    } else {
+      //console.log('No callback for', id, opt.onselect);
+    }
+  }
+
+  function isSelected(id) {
+    return $('#' + id).hasClass('active');
+  }
+
+  function setSelected(id, state) {
+    if (isSelected(id) == state) {
+      return;
+    }
+    var opt = menuItems[id];
+    if (state) {
+      $('#' + id).addClass('active');
+    } else {
+      $('#' + id).removeClass('active');
+    }
+    if (opt && opt.onselect) {
+      triggerAction(opt.id, state);
+    }
+    RED.settings.set(opt.setting || 'menu-' + opt.id, state);
+  }
+
+  function toggleSelected(id) {
+    setSelected(id, !isSelected(id));
+  }
+
+  function setDisabled(id, state) {
+    if (state) {
+      $('#' + id)
+        .parent()
+        .addClass('disabled');
+    } else {
+      $('#' + id)
+        .parent()
+        .removeClass('disabled');
+    }
+  }
+
+  function addItem(id, opt) {
+    var item = createMenuItem(opt);
+    if (opt.group) {
+      var groupItems = $('#' + id + '-submenu').children(
+        '.menu-group-' + opt.group
+      );
+      if (groupItems.length === 0) {
+        item.appendTo('#' + id + '-submenu');
+      } else {
+        for (var i = 0; i < groupItems.length; i++) {
+          var groupItem = groupItems[i];
+          var label = $(groupItem)
+            .find('.menu-label')
+            .html();
+          if (opt.label < label) {
+            $(groupItem).before(item);
+            break;
+          }
+        }
+        if (i === groupItems.length) {
+          item.appendTo('#' + id + '-submenu');
+        }
+      }
+    } else {
+      item.appendTo('#' + id + '-submenu');
+    }
+  }
+  function removeItem(id) {
+    $('#' + id)
+      .parent()
+      .remove();
+  }
+
+  function setAction(id, action) {
+    var opt = menuItems[id];
+    if (opt) {
+      opt.onselect = action;
+    }
+  }
+
+  return {
+    init: createMenu,
+    setSelected: setSelected,
+    isSelected: isSelected,
+    toggleSelected: toggleSelected,
+    setDisabled: setDisabled,
+    addItem: addItem,
+    removeItem: removeItem,
+    setAction: setAction
+    //TODO: add an api for replacing a submenu - see library.js:loadFlowLibrary
+  };
+})();

package/src/app/ui/editor-client/src/js/ui/common/panels.js

@@ -0,0 +1,104 @@
+ 
+
+
+RED.panels = (function() {
+
+    function createPanel(options) {
+        var container = options.container || $("#"+options.id);
+        var children = container.children();
+        if (children.length !== 2) {
+            throw new Error("Container must have exactly two children");
+        }
+        var vertical = (!options.dir || options.dir === "vertical");
+        container.addClass("red-ui-panels");
+        if (!vertical) {
+            container.addClass("red-ui-panels-horizontal");
+        }
+        var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]);
+        var startPosition;
+        var panelSizes = [];
+        var modifiedSizes = false;
+        var panelRatio = 0.5;
+        separator.draggable({
+                axis: vertical?"y":"x",
+                containment: container,
+                scroll: false,
+                start:function(event,ui) {
+                    startPosition = vertical?ui.position.top:ui.position.left;
+
+                    panelSizes = [
+                        vertical?$(children[0]).height():$(children[0]).width(),
+                        vertical?$(children[1]).height():$(children[1]).width()
+                    ];
+                },
+                drag: function(event,ui) {
+                    var size = vertical?container.height():container.width();
+                    var delta = (vertical?ui.position.top:ui.position.left)-startPosition;
+                    var newSizes = [panelSizes[0]+delta,panelSizes[1]-delta];
+                    if (vertical) {
+                        $(children[0]).height(newSizes[0]);
+                        $(children[1]).height(newSizes[1]);
+                        ui.position.top -= delta;
+                    } else {
+                        $(children[0]).width(newSizes[0]);
+                        $(children[1]).width(newSizes[1]);
+                        ui.position.left -= delta;
+                    }
+                    if (options.resize) {
+                        options.resize(newSizes[0],newSizes[1]);
+                    }
+                    panelRatio = newSizes[0]/(size-8);
+                },
+                stop:function(event,ui) {
+                    modifiedSizes = true;
+                }
+        });
+
+        var panel = {
+            ratio: function(ratio) {
+                panelRatio = ratio;
+                modifiedSizes = true;
+                if (ratio === 0 || ratio === 1) {
+                    separator.hide();
+                } else {
+                    separator.show();
+                }
+                if (vertical) {
+                    panel.resize(container.height());
+                } else {
+                    panel.resize(container.width());
+                }
+            },
+            resize: function(size) {
+                var panelSizes;
+                if (vertical) {
+                    panelSizes = [$(children[0]).height(),$(children[1]).height()];
+                    container.height(size);
+                } else {
+                    panelSizes = [$(children[0]).width(),$(children[1]).width()];
+                    container.width(size);
+                }
+                if (modifiedSizes) {
+                    var topPanelSize = panelRatio*(size-8);
+                    var bottomPanelSize = size - topPanelSize - 8;
+                    panelSizes = [topPanelSize,bottomPanelSize];
+                    if (vertical) {
+                        $(children[0]).outerHeight(panelSizes[0]);
+                        $(children[1]).outerHeight(panelSizes[1]);
+                    } else {
+                        $(children[0]).outerWidth(panelSizes[0]);
+                        $(children[1]).outerWidth(panelSizes[1]);
+                    }
+                }
+                if (options.resize) {
+                    options.resize(panelSizes[0],panelSizes[1]);
+                }
+            }
+        }
+        return panel;
+    }
+
+    return {
+        create: createPanel
+    }
+})();