@kumologica/sdk 3.0.0

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

@@ -0,0 +1,268 @@
+RED.popover = (function () {
+  var deltaSizes = {
+    default: {
+      top: 10,
+      topTop: 30,
+      leftRight: 17,
+      leftLeft: 25,
+      leftBottom: 8,
+      leftTop: 11,
+    },
+    small: {
+      top: 6,
+      topTop: 20,
+      leftRight: 8,
+      leftLeft: 26,
+      leftBottom: 8,
+      leftTop: 9,
+    },
+  };
+  function createPopover(options) {
+    var target = options.target;
+    var direction = options.direction || 'right';
+    var trigger = options.trigger;
+    var content = options.content;
+    var delay = options.delay || { show: 750, hide: 50 };
+    var autoClose = options.autoClose;
+    var width = options.width || 'auto';
+    var size = options.size || 'default';
+    if (!deltaSizes[size]) {
+      throw new Error('Invalid RED.popover size value:', size);
+    }
+
+    var timer = null;
+    var active;
+    var div;
+
+    var openPopup = function (instant) {
+      if (active) {
+        div = $('<div class="red-ui-popover"></div>');
+        if (size !== 'default') {
+          div.addClass('red-ui-popover-size-' + size);
+        }
+        if (typeof content === 'function') {
+          var result = content.call(res);
+          if (result === null) {
+            return;
+          }
+          if (typeof result === 'string') {
+            div.text(result);
+          } else {
+            div.append(result);
+          }
+        } else {
+          div.html(content);
+        }
+        if (width !== 'auto') {
+          div.width(width);
+        }
+        div.appendTo('body');
+
+        var targetPos = target.offset();
+        var targetWidth = target.outerWidth();
+        var targetHeight = target.outerHeight();
+        var divHeight = div.height();
+        var divWidth = div.width();
+
+        var viewportTop = $(window).scrollTop();
+        var viewportLeft = $(window).scrollLeft();
+        var viewportBottom = viewportTop + $(window).height();
+        var viewportRight = viewportLeft + $(window).width();
+        var top = 0;
+        var left = 0;
+        var d = direction;
+        if (d === 'right') {
+          top =
+            targetPos.top +
+            targetHeight / 2 -
+            divHeight / 2 -
+            deltaSizes[size].top;
+          left = targetPos.left + targetWidth + deltaSizes[size].leftRight;
+        } else if (d === 'left') {
+          top =
+            targetPos.top +
+            targetHeight / 2 -
+            divHeight / 2 -
+            deltaSizes[size].top;
+          left = targetPos.left - deltaSizes[size].leftLeft - divWidth;
+        } else if (d === 'bottom') {
+          top = targetPos.top + targetHeight + deltaSizes[size].top;
+          left =
+            targetPos.left +
+            targetWidth / 2 -
+            divWidth / 2 -
+            deltaSizes[size].leftBottom;
+          if (left < 0) {
+            d = 'right';
+            top =
+              targetPos.top +
+              targetHeight / 2 -
+              divHeight / 2 -
+              deltaSizes[size].top;
+            left = targetPos.left + targetWidth + deltaSizes[size].leftRight;
+          } else if (left + divWidth > viewportRight) {
+            d = 'left';
+            top =
+              targetPos.top +
+              targetHeight / 2 -
+              divHeight / 2 -
+              deltaSizes[size].top;
+            left = targetPos.left - deltaSizes[size].leftLeft - divWidth;
+            if (top + divHeight + targetHeight / 2 + 5 > viewportBottom) {
+              top -= top + divHeight + targetHeight / 2 - viewportBottom + 5;
+            }
+          } else if (top + divHeight > viewportBottom) {
+            d = 'top';
+            top = targetPos.top - deltaSizes[size].topTop - divHeight;
+            left =
+              targetPos.left +
+              targetWidth / 2 -
+              divWidth / 2 -
+              deltaSizes[size].leftTop;
+          }
+        } else if (d === 'top') {
+          top = targetPos.top - deltaSizes[size].topTop - divHeight;
+          left =
+            targetPos.left +
+            targetWidth / 2 -
+            divWidth / 2 -
+            deltaSizes[size].leftTop;
+          if (top < 0) {
+            d = 'bottom';
+            top = targetPos.top + targetHeight + deltaSizes[size].top;
+            left =
+              targetPos.left +
+              targetWidth / 2 -
+              divWidth / 2 -
+              deltaSizes[size].leftBottom;
+          }
+        }
+        div.addClass('red-ui-popover-' + d).css({ top: top, left: left });
+
+        if (instant) {
+          div.show();
+        } else {
+          div.fadeIn('fast');
+        }
+      }
+    };
+    var closePopup = function (instant) {
+      $(document).off('mousedown.modal-popover-close');
+      if (!active) {
+        if (div) {
+          if (instant) {
+            div.remove();
+          } else {
+            div.fadeOut('fast', function () {
+              $(this).remove();
+            });
+          }
+          div = null;
+        }
+      }
+    };
+
+    if (trigger === 'hover') {
+      target.on('mouseenter', function (e) {
+        clearTimeout(timer);
+        active = true;
+        timer = setTimeout(openPopup, delay.show);
+      });
+      target.on('mouseleave disabled', function (e) {
+        if (timer) {
+          clearTimeout(timer);
+        }
+        if (active) {
+          active = false;
+          setTimeout(closePopup, delay.hide);
+        }
+      });
+    } else if (trigger === 'click') {
+      target.click(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        active = !active;
+        if (!active) {
+          closePopup();
+        } else {
+          openPopup();
+        }
+      });
+      if (autoClose) {
+        target.on('mouseleave disabled', function (e) {
+          if (timer) {
+            clearTimeout(timer);
+          }
+          if (active) {
+            active = false;
+            setTimeout(closePopup, autoClose);
+          }
+        });
+      }
+    } else if (trigger === 'modal') {
+      $(document).on('mousedown.modal-popover-close', function (event) {
+        var target = event.target;
+        while (target.nodeName !== 'BODY' && target !== div[0]) {
+          target = target.parentElement;
+        }
+        if (target.nodeName === 'BODY') {
+          active = false;
+          closePopup();
+        }
+      });
+    } else if (autoClose) {
+      setTimeout(function () {
+        active = false;
+        closePopup();
+      }, autoClose);
+    }
+    var res = {
+      setContent: function (_content) {
+        content = _content;
+        return res;
+      },
+      open: function (instant) {
+        active = true;
+        openPopup(instant);
+        return res;
+      },
+      close: function (instant) {
+        active = false;
+        closePopup(instant);
+        return res;
+      },
+    };
+    return res;
+  }
+
+  return {
+    create: createPopover,
+    tooltip: function (target, content, action) {
+      var label = content;
+      if (action) {
+        label = function () {
+          var label = content;
+          var shortcut = RED.keyboard.getShortcut(action);
+          if (shortcut && shortcut.key) {
+            label = $(
+              '<span>' +
+                content +
+                ' <span class="red-ui-popover-key">' +
+                RED.keyboard.formatKey(shortcut.key, true) +
+                '</span></span>'
+            );
+          }
+          return label;
+        };
+      }
+      return RED.popover.create({
+        target: target,
+        trigger: 'hover',
+        size: 'small',
+        direction: 'bottom',
+        content: label,
+        delay: { show: 750, hide: 50 },
+      });
+    },
+  };
+})();

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

@@ -0,0 +1,98 @@
+ 
+(function($) {
+
+/**
+ * options:
+ *   - minimumLength : the minimum length of text before firing a change event
+ *   - delay : delay, in ms, after a keystroke before firing change event
+ *
+ * methods:
+ *   - value([val]) - gets the current value, or, if `val` is provided, sets the value
+ *   - count - sets or clears a sub-label on the input. This can be used to provide
+ *             a feedback on the number of matches, or number of available entries to search
+ *   - change - trigger a change event
+ *
+ */
+
+    $.widget( "nodered.searchBox", {
+        _create: function() {
+            var that = this;
+
+            this.currentTimeout = null;
+            this.lastSent = "";
+            this.element.val("");
+            this.uiContainer = this.element.wrap("<div>").parent();
+            this.uiContainer.addClass("red-ui-searchBox-container");
+
+            $('<i class="fa fa-search"></i>').prependTo(this.uiContainer);
+            this.clearButton = $('<a href="#"><i class="fa fa-times"></i></a>').appendTo(this.uiContainer);
+            this.clearButton.on("click",function(e) {
+                e.preventDefault();
+                that.element.val("");
+                that._change("",true);
+                that.element.focus();
+            });
+
+            this.resultCount = $('<span>',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer);
+
+            this.element.val("");
+            this.element.on("keydown",function(evt) {
+                if (evt.keyCode === 27) {
+                    that.element.val("");
+                }
+            })
+            this.element.on("keyup",function(evt) {
+                that._change($(this).val());
+            });
+
+            this.element.on("focus",function() {
+                $("body").one("mousedown",function() {
+                    that.element.blur();
+                });
+            });
+
+        },
+        _change: function(val,instant) {
+            var fireEvent = false;
+            if (val === "") {
+                this.clearButton.hide();
+                fireEvent = true;
+            } else {
+                this.clearButton.show();
+                fireEvent = (val.length >= (this.options.minimumLength||0));
+            }
+            var current = this.element.val();
+            fireEvent = fireEvent && current !== this.lastSent;
+            if (fireEvent) {
+                if (!instant && this.options.delay > 0) {
+                    clearTimeout(this.currentTimeout);
+                    var that = this;
+                    this.currentTimeout = setTimeout(function() {
+                        that.lastSent = that.element.val();
+                        that._trigger("change");
+                    },this.options.delay);
+                } else {
+                    this._trigger("change");
+                }
+            }
+        },
+        value: function(val) {
+            if (val === undefined) {
+                return this.element.val();
+            } else {
+                this.element.val(val);
+                this._change(val);
+            }
+        },
+        count: function(val) {
+            if (val === undefined || val === null || val === "") {
+                this.resultCount.text("").hide();
+            } else {
+                this.resultCount.text(val).show();
+            }
+        },
+        change: function() {
+            this._trigger("change");
+        }
+    });
+})(jQuery);

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

@@ -0,0 +1,184 @@
+RED.stack = (function() {
+  function createStack(options) {
+    var container = options.container;
+    container.addClass('red-ui-stack');
+    var contentHeight = 0;
+    var entries = [];
+
+    var visible = true;
+    // TODO: make this a singleton function - and watch out for stacks no longer
+    //       in the DOM
+    var resizeStack = function() {
+      if (entries.length > 0) {
+        var headerHeight = 0;
+        entries.forEach(function(entry) {
+          headerHeight += entry.header.outerHeight();
+        });
+
+        var height = container.innerHeight();
+        contentHeight = height - headerHeight - (entries.length - 1);
+        entries.forEach(function(e) {
+          e.contentWrap.height(contentHeight);
+        });
+      }
+    };
+    if (options.fill && options.singleExpanded) {
+      $(window).resize(resizeStack);
+      $(window).focus(resizeStack);
+    }
+    return {
+      remove: function(entry) {
+        entries.remove(entry);
+      },
+
+      removeAll: function() {
+        entries = [];
+      },
+
+      add: function(entry) {
+        entries.push(entry);
+        entry.container = $('<div class="palette-category">').appendTo(
+          container
+        );
+        if (!visible) {
+          entry.container.hide();
+        }
+        var header = $('<div class="palette-header"></div>').appendTo(
+          entry.container
+        );
+        entry.header = header;
+        entry.contentWrap = $('<div></div>', {
+          style: 'position:relative'
+        }).appendTo(entry.container);
+        if (options.fill) {
+          entry.contentWrap.css('height', contentHeight);
+        }
+        entry.content = $('<div></div>').appendTo(entry.contentWrap);
+        if (entry.collapsible !== false) {
+          header.click(function() {
+            if (options.singleExpanded) {
+              if (!entry.isExpanded()) {
+                for (var i = 0; i < entries.length; i++) {
+                  if (entries[i].isExpanded()) {
+                    entries[i].collapse();
+                  }
+                }
+                entry.expand();
+              } else if (entries.length === 2) {
+                if (entries[0] === entry) {
+                  entries[0].collapse();
+                  entries[1].expand();
+                } else {
+                  entries[1].collapse();
+                  entries[0].expand();
+                }
+              }
+            } else {
+              entry.toggle();
+            }
+          });
+          var icon = $('<i class="fa fa-angle-down"></i>').appendTo(header);
+
+          if (entry.expanded) {
+            entry.container.addClass('palette-category-expanded');
+            icon.addClass('expanded');
+          } else {
+            entry.contentWrap.hide();
+          }
+        } else {
+          $(
+            '<i style="opacity: 0.5;" class="fa fa-angle-down expanded"></i>'
+          ).appendTo(header);
+          header.css('cursor', 'default');
+        }
+        entry.title = $(`<span id="${entry.titleId}"></span>`)
+          .html(entry.title)
+          .appendTo(header);
+
+        entry.toggle = function() {
+          if (entry.isExpanded()) {
+            entry.collapse();
+            return false;
+          } else {
+            entry.expand();
+            return true;
+          }
+        };
+        entry.expand = function() {
+          if (!entry.isExpanded()) {
+            if (entry.onexpand) {
+              entry.onexpand.call(entry);
+            }
+            if (options.singleExpanded) {
+              entries.forEach(function(e) {
+                if (e !== entry) {
+                  e.collapse();
+                }
+              });
+            }
+
+            icon.addClass('expanded');
+            entry.container.addClass('palette-category-expanded');
+            entry.contentWrap.slideDown(200);
+            return true;
+          }
+        };
+        entry.collapse = function() {
+          if (entry.isExpanded()) {
+            icon.removeClass('expanded');
+            entry.container.removeClass('palette-category-expanded');
+            entry.contentWrap.slideUp(200);
+            return true;
+          }
+        };
+        entry.isExpanded = function() {
+          return entry.container.hasClass('palette-category-expanded');
+        };
+        if (options.fill && options.singleExpanded) {
+          resizeStack();
+        }
+        return entry;
+      },
+
+      hide: function() {
+        visible = false;
+        entries.forEach(function(entry) {
+          entry.container.hide();
+        });
+        return this;
+      },
+
+      expandLastEntry: function() {
+        console.log('[stack] entries=', entries);
+        let numEntries = entries.length;
+        if (numEntries === 0) {
+          return;
+        } else if (numEntries === 1) {
+          entries[0].expand();
+        } else {
+          for (let i = 0; i < numEntries -1; i ++) {
+            entries[i].collapse();
+          }
+          entries[numEntries -1].expand();
+        }
+      },
+
+      show: function() {
+        visible = true;
+        entries.forEach(function(entry) {
+          entry.container.show();
+        });
+        return this;
+      },
+      resize: function() {
+        if (resizeStack) {
+          resizeStack();
+        }
+      }
+    };
+  }
+
+  return {
+    create: createStack
+  };
+})();