@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/typeSearch.js

@@ -0,0 +1,411 @@
+RED.typeSearch = (function () {
+  var shade;
+
+  var disabled = false;
+  var dialog = null;
+  var searchInput;
+  var searchResults;
+  var searchResultsDiv;
+  var selected = -1;
+  var visible = false;
+
+  var activeFilter = '';
+  var addCallback;
+  var cancelCallback;
+
+  var typesUsed = {};
+
+  function search(val) {
+    activeFilter = val.toLowerCase();
+    var visible = searchResults.editableList('filter');
+    searchResults.editableList('sort');
+    setTimeout(function () {
+      selected = 0;
+      searchResults.children().removeClass('selected');
+      searchResults.children(':visible:first').addClass('selected');
+    }, 100);
+  }
+
+  function ensureSelectedIsVisible() {
+    var selectedEntry = searchResults.find('li.selected');
+    if (selectedEntry.length === 1) {
+      var scrollWindow = searchResults.parent();
+      var scrollHeight = scrollWindow.height();
+      var scrollOffset = scrollWindow.scrollTop();
+      var y = selectedEntry.position().top;
+      var h = selectedEntry.height();
+      if (y + h > scrollHeight) {
+        scrollWindow.animate(
+          { scrollTop: '-=' + (scrollHeight - (y + h) - 10) },
+          50
+        );
+      } else if (y < 0) {
+        scrollWindow.animate({ scrollTop: '+=' + (y - 10) }, 50);
+      }
+    }
+  }
+
+  function createDialog() {
+    //shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#main-container");
+    dialog = $('<div>', {
+      id: 'red-ui-type-search',
+      class: 'red-ui-search red-ui-type-search',
+    }).appendTo('#main-container');
+    var searchDiv = $('<div>', { class: 'red-ui-search-container' }).appendTo(
+      dialog
+    );
+    searchInput = $('<input type="text" id="red-ui-type-search-input">')
+      .attr('placeholder', 'NodeSearch')
+      .appendTo(searchDiv)
+      .searchBox({
+        delay: 50,
+        change: function () {
+          search($(this).val());
+        },
+      });
+    searchInput.on('keydown', function (evt) {
+      var children = searchResults.children(':visible');
+      if (children.length > 0) {
+        if (evt.keyCode === 40) {
+          // Down
+          if (selected < children.length - 1) {
+            if (selected > -1) {
+              $(children[selected]).removeClass('selected');
+            }
+            selected++;
+          }
+          $(children[selected]).addClass('selected');
+          ensureSelectedIsVisible();
+          evt.preventDefault();
+        } else if (evt.keyCode === 38) {
+          // Up
+          if (selected > 0) {
+            if (selected < children.length) {
+              $(children[selected]).removeClass('selected');
+            }
+            selected--;
+          }
+          $(children[selected]).addClass('selected');
+          ensureSelectedIsVisible();
+          evt.preventDefault();
+        } else if ((evt.metaKey || evt.ctrlKey) && evt.keyCode === 13) {
+          // (ctrl or cmd) and enter
+          var index = Math.max(0, selected);
+          if (index < children.length) {
+            var n = $(children[index])
+              .find('.red-ui-editableList-item-content')
+              .data('data');
+            typesUsed[n.type] = Date.now();
+            if (n.def.outputs === 0) {
+              confirm(n);
+            } else {
+              addCallback(n.type, true);
+            }
+            $('#red-ui-type-search-input').val('').keyup();
+          }
+        } else if (evt.keyCode === 13) {
+          // Enter
+          var index = Math.max(0, selected);
+          if (index < children.length) {
+            // TODO: dips into editableList impl details
+            confirm(
+              $(children[index])
+                .find('.red-ui-editableList-item-content')
+                .data('data')
+            );
+          }
+        }
+      }
+    });
+
+    searchResultsDiv = $('<div>', {
+      class: 'red-ui-search-results-container',
+    }).appendTo(dialog);
+    searchResults = $('<ol>', {
+      id: 'search-result-list',
+      style: 'position: absolute;top: 0;bottom: 0;left: 0;right: 0;',
+    })
+      .appendTo(searchResultsDiv)
+      .editableList({
+        addButton: false,
+        filter: function (data) {
+          if (activeFilter === '') {
+            return true;
+          }
+          if (data.recent || data.common) {
+            return false;
+          }
+          return activeFilter === '' || data.index.indexOf(activeFilter) > -1;
+        },
+        sort: function (A, B) {
+          if (activeFilter === '') {
+            return A.i - B.i;
+          }
+
+          var Ai = A.index.indexOf(activeFilter);
+          var Bi = B.index.indexOf(activeFilter);
+          if (Ai === -1) {
+            return 1;
+          }
+          if (Bi === -1) {
+            return -1;
+          }
+          if (Ai === Bi) {
+            return sortTypeLabels(A, B);
+          }
+          return Ai - Bi;
+        },
+        addItem: function (container, i, object) {
+          var def = object.def;
+          object.index = object.type.toLowerCase();
+          if (object.separator) {
+            container.addClass('red-ui-search-result-separator');
+          }
+          var div = $('<a>', {
+            href: '#',
+            class: 'red-ui-search-result',
+          }).appendTo(container);
+
+          var nodeDiv = $('<div>', {
+            class: 'red-ui-search-result-node',
+          }).appendTo(div);
+          var colour = RED.utils.getNodeColor(object.type, def);
+          var icon_url = RED.utils.getNodeIcon(def);
+
+          //nodeDiv.css('backgroundColor',colour);
+
+          var iconContainer = $('<div/>', {
+            class: 'palette_icon_container',
+          }).appendTo(nodeDiv);
+          RED.utils.createIconElement(icon_url, iconContainer, false);
+
+          if (def.inputs > 0) {
+            $('<div/>', { class: 'red-ui-search-result-node-port' }).appendTo(
+              nodeDiv
+            );
+          }
+          if (def.outputs > 0) {
+            $('<div/>', {
+              class:
+                'red-ui-search-result-node-port red-ui-search-result-node-output',
+            }).appendTo(nodeDiv);
+          }
+
+          var contentDiv = $('<div>', {
+            class: 'red-ui-search-result-description',
+          }).appendTo(div);
+
+          var label = object.label;
+          object.index += '|' + label.toLowerCase();
+
+          $('<div>', { class: 'red-ui-search-result-node-label' })
+            .text(label)
+            .appendTo(contentDiv);
+
+          div.click(function (evt) {
+            evt.preventDefault();
+            confirm(object);
+          });
+        },
+        scrollOnAdd: false,
+      });
+  }
+  function confirm(def) {
+    hide();
+    typesUsed[def.type] = Date.now();
+    addCallback(def.type);
+  }
+
+  function handleMouseActivity(evt) {
+    if (visible) {
+      var t = $(evt.target);
+      while (t.prop('nodeName').toLowerCase() !== 'body') {
+        if (t.attr('id') === 'red-ui-type-search') {
+          return;
+        }
+        t = t.parent();
+      }
+      hide(true);
+      if (cancelCallback) {
+        cancelCallback();
+      }
+    }
+  }
+  function show(opts) {
+    if (!visible) {
+      RED.keyboard.add('*', 'escape', function () {
+        hide();
+        if (cancelCallback) {
+          cancelCallback();
+        }
+      });
+      if (dialog === null) {
+        createDialog();
+      }
+      visible = true;
+    } else {
+      dialog.hide();
+      searchResultsDiv.hide();
+    }
+    $(document).off('mousedown.type-search');
+    $(document).off('mouseup.type-search');
+    $(document).off('click.type-search');
+    setTimeout(function () {
+      $(document).on('mousedown.type-search', handleMouseActivity);
+      $(document).on('mouseup.type-search', handleMouseActivity);
+      $(document).on('click.type-search', handleMouseActivity);
+    }, 200);
+
+    refreshTypeList(opts);
+    addCallback = opts.add;
+    cancelCallback = opts.cancel;
+    RED.events.emit('type-search:open');
+    //shade.show();
+    if ($('#main-container').height() - opts.y - 150 < 0) {
+      opts.y = opts.y - 235;
+    }
+    dialog.css({ left: opts.x + 'px', top: opts.y + 'px' }).show();
+    searchResultsDiv.slideDown(300);
+    setTimeout(function () {
+      searchResultsDiv.find('.red-ui-editableList-container').scrollTop(0);
+      searchInput.focus();
+    }, 100);
+  }
+  function hide(fast) {
+    if (visible) {
+      RED.keyboard.remove('escape');
+      visible = false;
+      if (dialog !== null) {
+        searchResultsDiv.slideUp(fast ? 50 : 200, function () {
+          dialog.hide();
+          searchInput.searchBox('value', '');
+        });
+        //shade.hide();
+      }
+      RED.events.emit('type-search:close');
+      RED.view.focus();
+      $(document).off('mousedown.type-search');
+      $(document).off('mouseup.type-search');
+      $(document).off('click.type-search');
+    }
+  }
+  function getTypeLabel(type, def) {
+    var label = type;
+    if (typeof def.paletteLabel !== 'undefined') {
+      try {
+        label =
+          (typeof def.paletteLabel === 'function'
+            ? def.paletteLabel.call(def)
+            : def.paletteLabel) || '';
+        label += ' (' + type + ')';
+      } catch (err) {
+        console.log('Definition error: ' + type + '.paletteLabel', err);
+      }
+    }
+    return label;
+  }
+  function sortTypeLabels(a, b) {
+    var al = a.label.toLowerCase();
+    var bl = b.label.toLowerCase();
+    if (al < bl) {
+      return -1;
+    } else if (al === bl) {
+      return 0;
+    } else {
+      return 1;
+    }
+  }
+  function applyFilter(filter, type, def) {
+    return (
+      !filter ||
+      ((!filter.type || type === filter.type) &&
+        (!filter.input || def.inputs > 0) &&
+        (!filter.output || def.outputs > 0))
+    );
+  }
+  function refreshTypeList(opts) {
+    var i;
+    searchResults.editableList('empty');
+    searchInput.searchBox('value', '');
+    selected = -1;
+    var common = ['inject', 'function', 'change', 'switch'].filter(function (
+      t
+    ) {
+      return applyFilter(opts.filter, t, RED.nodes.getType(t));
+    });
+
+    var recentlyUsed = Object.keys(typesUsed);
+    recentlyUsed.sort(function (a, b) {
+      return typesUsed[b] - typesUsed[a];
+    });
+    recentlyUsed = recentlyUsed.filter(function (t) {
+      return (
+        applyFilter(opts.filter, t, RED.nodes.getType(t)) &&
+        common.indexOf(t) === -1
+      );
+    });
+
+    var items = [];
+    RED.nodes.registry.getNodeTypes().forEach(function (t) {
+      var def = RED.nodes.getType(t);
+      if (
+        def.category !== 'config' &&
+        t !== 'unknown' &&
+        t !== 'tab' &&
+        t !== 'debug'
+      ) {
+        items.push({ type: t, def: def, label: getTypeLabel(t, def) });
+      }
+    });
+    items.sort(sortTypeLabels);
+
+    var commonCount = 0;
+    var item;
+    var index = 0;
+    for (i = 0; i < common.length; i++) {
+      var itemDef = RED.nodes.getType(common[i]);
+      if (itemDef) {
+        item = {
+          type: common[i],
+          common: true,
+          def: itemDef,
+          i: index++,
+        };
+        item.label = getTypeLabel(item.type, item.def);
+        if (i === common.length - 1) {
+          item.separator = true;
+        }
+        searchResults.editableList('addItem', item);
+      }
+    }
+    for (i = 0; i < Math.min(5, recentlyUsed.length); i++) {
+      item = {
+        type: recentlyUsed[i],
+        def: RED.nodes.getType(recentlyUsed[i]),
+        recent: true,
+        i: index++,
+      };
+      item.label = getTypeLabel(item.type, item.def);
+      if (i === recentlyUsed.length - 1) {
+        item.separator = true;
+      }
+      searchResults.editableList('addItem', item);
+    }
+    for (i = 0; i < items.length; i++) {
+      if (applyFilter(opts.filter, items[i].type, items[i].def)) {
+        items[i].i = index++;
+        searchResults.editableList('addItem', items[i]);
+      }
+    }
+    setTimeout(function () {
+      selected = 0;
+      searchResults.children(':first').addClass('selected');
+    }, 100);
+  }
+
+  return {
+    show: show,
+    refresh: refreshTypeList,
+    hide: hide,
+  };
+})();