@kumologica/sdk 3.2.0-beta9 → 4.0.0-alpha2

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

@@ -1,805 +0,0 @@
-RED.tabs = (function () {
-  var defaultTabIcon = 'fa fa-lemon-o';
-
-  function createTabs(options) {
-    var tabs = {};
-    var pinnedTabsCount = 0;
-    var currentTabWidth;
-    var currentActiveTabWidth = 0;
-    var collapsibleMenu;
-
-    var ul = options.element || $('#' + options.id);
-    var wrapper = ul.wrap('<div>').parent();
-    var scrollContainer = ul.wrap('<div>').parent();
-    wrapper.addClass('red-ui-tabs');
-    if (options.vertical) {
-      wrapper.addClass('red-ui-tabs-vertical');
-    }
-    // Commented this, to disable for MVP the tabs
-    // if (options.addButton) {
-        // wrapper.addClass("red-ui-tabs-add");
-        // var addButton = $('<div class="red-ui-tab-button red-ui-tabs-add"><a href="#"><i class="fa fa-plus"></i></a></div>').appendTo(wrapper);
-        // addButton.find('a').click(function(evt) {
-        //     evt.preventDefault();
-        //     console.log('[tabs] options.addButton=', options.addButton);
-        //     if (typeof options.addButton === 'function') {
-        //         options.addButton();
-        //     } else if (typeof options.addButton === 'string') {
-        //         RED.actions.invoke(options.addButton);
-        //     }
-        // })
-        // if (typeof options.addButton === 'string') {
-        //     var l = options.addButton;
-        //     if (options.addButtonCaption) {
-        //         l = options.addButtonCaption
-        //     }
-        //     RED.popover.tooltip(addButton,l,options.addButton);
-        // }
-        // ul.on("dblclick", function(evt) {
-        //     var existingTabs = ul.children();
-        //     var clickX = evt.clientX;
-        //     var targetIndex = 0;
-        //     existingTabs.each(function(index) {
-        //         var pos = $(this).offset();
-        //         if (pos.left > clickX) {
-        //             return false;
-        //         }
-        //         targetIndex = index+1;
-        //     })
-        //     if (typeof options.addButton === 'function') {
-        //         options.addButton({index:targetIndex});
-        //     } else if (typeof options.addButton === 'string') {
-        //         RED.actions.invoke(options.addButton,{index:targetIndex});
-        //     }
-        // });
-    // }
-    // if (options.searchButton) {
-    //     wrapper.addClass("red-ui-tabs-search");
-    //     var searchButton = $('<div class="red-ui-tab-button red-ui-tabs-search"><a href="#"><i class="fa fa-list-ul"></i></a></div>').appendTo(wrapper);
-    //     searchButton.find('a').click(function(evt) {
-    //         evt.preventDefault();
-    //         if (typeof options.searchButton === 'function') {
-    //             options.searchButton()
-    //         } else if (typeof options.searchButton === 'string') {
-    //             RED.actions.invoke(options.searchButton);
-    //         }
-    //     })
-    //     if (typeof options.searchButton === 'string') {
-    //         var l = options.searchButton;
-    //         if (options.searchButtonCaption) {
-    //             l = options.searchButtonCaption
-    //         }
-    //         RED.popover.tooltip(searchButton,l,options.searchButton);
-    //     }
-
-    // }
-    var scrollLeft;
-    var scrollRight;
-
-    if (options.scrollable) {
-      wrapper.addClass('red-ui-tabs-scrollable');
-      scrollContainer.addClass('red-ui-tabs-scroll-container');
-      scrollContainer.scroll(updateScroll);
-      tabDivider = $(`<div class="red-ui-tab-divider"></div>`)
-        .prependTo(wrapper);
-      scrollRight = $(
-        '<div class="red-ui-tab-button red-ui-tab-scroll red-ui-tab-scroll-right"><a href="#"><i class="icofont-simple-right" style="font-size: 20px; position: relative; top: -1px;"></i></a></div>'
-      )
-        .prependTo(wrapper)
-        .find('a');
-      scrollRight
-        .on('mousedown', function (evt) {
-          scrollEventHandler(evt, '+=150');
-        })
-        .on('click', function (evt) {
-          evt.preventDefault();
-        });
-      scrollLeft = $(
-        `<div class="red-ui-tab-button red-ui-tab-scroll red-ui-tab-scroll-left"> <a href="#"> <i class="icofont-simple-left" style="font-size: 20px; position: relative; top: -1px;"></i></a></div>`
-      )
-        .prependTo(wrapper)
-        .find('a');
-      scrollLeft
-        .on('mousedown', function (evt) {
-          scrollEventHandler(evt, '-=150');
-        })
-        .on('click', function (evt) {
-          evt.preventDefault();
-        });
-
-      // tabDivider = $(`<div class="red-ui-tab-divider"></div>`)
-      // .prependTo(wrapper);
-
-      // let tabController = $(`<div id="tabController" class="red-ui-tab-button red-ui-tab-scroll" style="width:35px">
-      // <a href="#" style="width:0px"> 
-      //   <i class="fa fa-th-large" style="position: relative; top: -2px; padding: 0 10px; font-size: 15px;">
-      // </i></a></div>`)
-      // .prependTo(wrapper);
-    }
-
-    if (options.collapsible) {
-      wrapper.addClass('red-ui-tabs-collapsible');
-      wrapper.addClass('palette-background');
-      var collapsedButtonsRow = $(
-        '<div class="red-ui-tab-link-buttons sidebar-shortcuts-icons"></div>'
-      ).appendTo(wrapper);
-    }
-
-    function scrollEventHandler(evt, dir) {
-      evt.preventDefault();
-      if ($(this).hasClass('disabled')) {
-        return;
-      }
-      var currentScrollLeft = scrollContainer.scrollLeft();
-      scrollContainer.animate({ scrollLeft: dir }, 100);
-      var interval = setInterval(function () {
-        var newScrollLeft = scrollContainer.scrollLeft();
-        if (newScrollLeft === currentScrollLeft) {
-          clearInterval(interval);
-          return;
-        }
-        currentScrollLeft = newScrollLeft;
-        scrollContainer.animate({ scrollLeft: dir }, 100);
-      }, 100);
-      $(this).one('mouseup', function () {
-        clearInterval(interval);
-      });
-    }
-
-    ul.children().first().addClass('active');
-    ul.children().addClass('red-ui-tab');
-
-    function getSelection() {
-      var selection = ul.find('li.red-ui-tab.selected');
-      var selectedTabs = [];
-      selection.each(function () {
-        selectedTabs.push(tabs[$(this).find('a').attr('href').slice(1)]);
-      });
-      return selectedTabs;
-    }
-
-    function selectionChanged() {
-      options.onselect(getSelection());
-    }
-
-    function onTabClick(evt) {
-      evt.preventDefault();
-      var currentTab = ul.find('li.red-ui-tab.active');
-      var thisTab = $(this).parent();
-      var fireSelectionChanged = false;
-      if (options.onselect) {
-        if (evt.metaKey) {
-          if (thisTab.hasClass('selected')) {
-            thisTab.removeClass('selected');
-            if (thisTab[0] !== currentTab[0]) {
-              // Deselect background tab
-              // - don't switch to it
-              selectionChanged();
-              return;
-            } else {
-              // Deselect current tab
-              // - if nothing remains selected, do nothing
-              // - otherwise switch to first selected tab
-              var selection = ul.find('li.red-ui-tab.selected');
-              if (selection.length === 0) {
-                selectionChanged();
-                return;
-              }
-              thisTab = selection.first();
-            }
-          } else {
-            if (!currentTab.hasClass('selected')) {
-              var currentTabObj =
-                tabs[currentTab.find('a').attr('href').slice(1)];
-              // Auto select current tab
-              currentTab.addClass('selected');
-            }
-            thisTab.addClass('selected');
-          }
-          fireSelectionChanged = true;
-        } else if (evt.shiftKey) {
-          if (currentTab[0] !== thisTab[0]) {
-            var firstTab, lastTab;
-            if (currentTab.index() < thisTab.index()) {
-              firstTab = currentTab;
-              lastTab = thisTab;
-            } else {
-              firstTab = thisTab;
-              lastTab = currentTab;
-            }
-            ul.find('li.red-ui-tab').removeClass('selected');
-            firstTab.addClass('selected');
-            lastTab.addClass('selected');
-            firstTab.nextUntil(lastTab).addClass('selected');
-          }
-          fireSelectionChanged = true;
-        } else {
-          var selection = ul.find('li.red-ui-tab.selected');
-          if (selection.length > 0) {
-            selection.removeClass('selected');
-            fireSelectionChanged = true;
-          }
-        }
-      }
-
-      var thisTabA = thisTab.find('a');
-      if (options.onclick) {
-        options.onclick(tabs[thisTabA.attr('href').slice(1)]);
-      }
-      activateTab(thisTabA, {scroll: false}); // no-scroll
-
-      // Select the tab on the navigator
-      // console.log('[tabs] selecting tab with id:', evt.currentTarget.id)
-      RED.palette.navigator.selectTab(evt.currentTarget.id);
-      if (fireSelectionChanged) {
-        selectionChanged();
-      }
-      return false;
-    }
-
-    function updateScroll() {
-      if (ul.children().length !== 0) {
-        var sl = scrollContainer.scrollLeft();
-        var scWidth = scrollContainer.width();
-        var ulWidth = ul.width();
-        if (sl === 0) {
-          scrollLeft.addClass('tab-disabled');
-        } else {
-          // scrollLeft.show();
-          scrollLeft.removeClass('tab-disabled');
-        }
-        if (sl === ulWidth - scWidth) {
-          // scrollRight.hide();
-          scrollRight.addClass('tab-disabled');
-        } else {
-          scrollRight.removeClass('tab-disabled');
-        }
-      }
-    }
-    function onTabDblClick(evt) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      if (evt.metaKey || evt.shiftKey) {
-        return;
-      }
-      if (options.ondblclick) {
-        options.ondblclick(tabs[$(this).attr('href').slice(1)]);
-      }
-      return false;
-    }
-
-    function activateTab(link, opts) {
-      const scrollAllowed = opts? opts.scroll: true;
-      // console.log(`[tabs::activateTab] link: ${link}... scrollAllowed: ${scrollAllowed}`);
-
-      if (typeof link === 'string') {
-        link = ul.find("a[href='#" + link + "']");
-      }
-      if (link.length === 0) {
-        return;
-      }
-      if (!link.parent().hasClass('active')) {
-        // console.log(`[tabs::activateTab] link.parent is not active.`);
-        ul.children().removeClass('active');
-        ul.children().css({ transition: 'width 100ms' });
-        link.parent().addClass('active');
-        var parentId = link.parent().attr('id');
-        wrapper.find('.red-ui-tab-link-button').removeClass('active selected');
-        $('#' + parentId + '-link-button').addClass('active selected');
-        if (options.scrollable) {
-          var pos = link.parent().position().left;
-          // console.log(`[tabs::activateTab] pos: ${pos}`)
-          // const panelNavigatorWidth = 220;
-          // const tabNavigatorWidth = 21 * 2;
-          // const totalLeftWidth = panelNavigatorWidth + tabNavigatorWidth;
-          // console.log(`scrollContainer.width = `, scrollContainer.width());
-          if (scrollAllowed) {
-            // When starting the workspace, the width is 30, so we dont want to scroll. Just to make first tab fully visible and active
-            if (scrollContainer.width() < 100 ){
-              // console.log(`[tabs::activateTab] inital scroll`)
-              scrollContainer.animate({ scrollLeft: pos   }, 300);
-            }
-            else if (pos + 120 > scrollContainer.width()) {
-              // console.log(`[tabs::activateTab] jump to right`)
-              scrollContainer.animate({ scrollLeft: '+=' + (pos + 140 - scrollContainer.width()) }, 300);
-            } else {
-              // console.log(`[tabs::activateTab] jump to left`)
-              scrollContainer.animate({ scrollLeft: pos   }, 300);
-            }
-          }
-        }
-        if (options.onchange) {
-          options.onchange(tabs[link.attr('href').slice(1)]);
-        }
-
-        updateTabWidths();
-        setTimeout(function () {
-          ul.children().css({ transition: '' });
-        }, 100);
-      } else {
-        // console.log(`[tabs::activateTab] link.parent is active.`);
-        if (options.onsame) {
-          // hide the sidebar when you click on selected tab
-          options.onsame(tabs[link.attr('href').slice(1)]); //RED.actions.invoke('core:hide-sidebar');
-          link.parent().removeClass('active')
-          wrapper.find('.red-ui-tab-link-button').removeClass('active selected');
-        } else {
-          // otherwise do nothing, as user is clicking on a workspace tab that already is selected.
-        }
-        
-        
-        
-      }
-    }
-
-    function activatePreviousTab() {
-      var previous = ul.find('li.active').prev();
-      if (previous.length > 0) {
-        activateTab(previous.find('a'));
-      }
-    }
-    function activateNextTab() {
-      var next = ul.find('li.active').next();
-      if (next.length > 0) {
-        activateTab(next.find('a'));
-      }
-    }
-
-    function getTabsMaxWidthAvailable() {
-      const workspaceWidth = $('#main-container').width();
-
-      const paletteWidth = $('#palette').is(':hidden')? 0 : $('#palette').width();
-      const sidebarWidth = $('#sidebar').is(':hidden')? 0 : $('#sidebar').width();
-      const sidebarShortcuts = $('#sidebar-shortcuts').width();
-      const occupied = paletteWidth + sidebarWidth + sidebarShortcuts;
-
-      return workspaceWidth - occupied;
-    }
-
-    function updateTabWidths() {
-      if (options.vertical) {
-        return;
-      }
-      var tabs = ul.find('li.red-ui-tab');
-
-      // Update the width of the tabs container
-      $('#workspace').find('.red-ui-tabs').width(getTabsMaxWidthAvailable());
-
-      var width = wrapper.width();
-      var tabCount = tabs.size();
-      var tabWidth;
-
-      if (options.collapsible) {
-        tabWidth = width - collapsedButtonsRow.width() - 10;
-        if (tabWidth < 198) {
-          var delta = 198 - tabWidth;
-          var b = collapsedButtonsRow.find('a:last').prev();
-          while (b.is(':not(:visible)')) {
-            b = b.prev();
-          }
-          if (!b.hasClass('red-ui-tab-link-button-pinned')) {
-            b.hide();
-          }
-          tabWidth = width - collapsedButtonsRow.width() - 10;
-        } else {
-          var space = width - 198 - collapsedButtonsRow.width();
-          if (space > 40) {
-            collapsedButtonsRow.find('a:not(:visible):first').show();
-            tabWidth = width - collapsedButtonsRow.width() - 10;
-          }
-        }
-        tabs.css({ width: tabWidth });
-      } else {
-        var tabWidth = (width - 12 - tabCount * 6) / tabCount;
-        currentTabWidth = (100 * tabWidth) / width + '%';
-        currentActiveTabWidth = currentTabWidth + '%';
-        if (options.scrollable) {
-          tabWidth = Math.max(tabWidth, 150); // minimum width for the tab
-          currentTabWidth = tabWidth + 'px';
-          currentActiveTabWidth = 0;
-          var listWidth = Math.max(
-            wrapper.width(),
-            12 + (tabWidth + 6) * tabCount
-          );
-          ul.width(listWidth);
-          updateScroll();
-        } else if (options.hasOwnProperty('minimumActiveTabWidth')) {
-          if (tabWidth < options.minimumActiveTabWidth) {
-            tabCount -= 1;
-            tabWidth =
-              (width - 12 - options.minimumActiveTabWidth - tabCount * 6) /
-              tabCount;
-            currentTabWidth = (100 * tabWidth) / width + '%';
-            currentActiveTabWidth = options.minimumActiveTabWidth + 'px';
-          } else {
-            currentActiveTabWidth = 0;
-          }
-        }
-        // if (options.collapsible) {
-        //     console.log(currentTabWidth);
-        // }
-
-        tabs.css({ width: currentTabWidth });
-        if (tabWidth < 50) {
-          // ul.find(".red-ui-tab-close").hide();
-          ul.find('.red-ui-tab-icon').hide();
-          ul.find('.red-ui-tab-label').css({
-            paddingLeft: Math.min(12, Math.max(0, tabWidth - 38)) + 'px',
-          });
-        } else {
-          // ul.find(".red-ui-tab-close").show();
-          ul.find('.red-ui-tab-icon').show();
-          ul.find('.red-ui-tab-label').css({ paddingLeft: '' });
-        }
-        if (currentActiveTabWidth !== 0) {
-          ul.find('li.red-ui-tab.active').css({
-            width: options.minimumActiveTabWidth,
-          });
-          // ul.find("li.red-ui-tab.active .red-ui-tab-close").show();
-          ul.find('li.red-ui-tab.active .red-ui-tab-icon').show();
-          ul.find('li.red-ui-tab.active .red-ui-tab-label').css({
-            paddingLeft: '',
-          });
-        }
-      }
-    }
-
-    ul.find('li.red-ui-tab a')
-      .on('click', onTabClick)
-      .on('dblclick', onTabDblClick);
-    setTimeout(function () {
-      updateTabWidths();
-    }, 0);
-
-    function removeTab(id) {
-      if (options.onselect) {
-        var selection = ul.find('li.red-ui-tab.selected');
-        if (selection.length > 0) {
-          selection.removeClass('selected');
-          selectionChanged();
-        }
-      }
-      var li = ul.find("a[href='#" + id + "']").parent();
-      if (li.hasClass('active')) {
-        var tab = li.prev();
-        if (tab.size() === 0) {
-          tab = li.next();
-        }
-        activateTab(tab.find('a'));
-      }
-      li.remove();
-      if (tabs[id].pinned) {
-        pinnedTabsCount--;
-      }
-      if (options.onremove) {
-        options.onremove(tabs[id]);
-      }
-      delete tabs[id];
-      updateTabWidths();
-      collapsibleMenu = null;
-    }
-
-    return {
-      addTab: function (tab, targetIndex) {
-        // console.log('[tabs] addTab() invoked. tab=', tab);
-
-        if (options.onselect) {
-          var selection = ul.find('li.red-ui-tab.selected');
-          if (selection.length > 0) {
-            selection.removeClass('selected');
-            selectionChanged();
-          }
-        }
-        tabs[tab.id] = tab;
-        var li = $('<li/>', { class: 'red-ui-tab' });
-        if (ul.children().length === 0) {
-          targetIndex = undefined;
-        }
-        if (targetIndex === 0) {
-          li.prependTo(ul);
-        } else if (targetIndex > 0) {
-          li.insertAfter(ul.find('li:nth-child(' + targetIndex + ')'));
-        } else {
-          li.appendTo(ul);
-        }
-        li.attr('id', 'red-ui-tab-' + tab.id.replaceAll('.', '-'));
-        li.data('tabId', tab.id);
-
-        let tabSelector = `#red-ui-tab-${tab.id.replaceAll('.', '-')}`;
-        // Add context menu here
-        $.contextMenu({
-          // define which elements trigger this menu
-          selector: tabSelector,
-          trigger: 'right',
-          // define the elements of the menu
-          items: {
-              close: {name: "Close", callback: function(key, opt){ removeTab(tab.id);}},
-              closeOthers: {name: "Close Others", callback: function(key, opt){ 
-                RED.workspaces.closeAll();
-                RED.workspaces.showSafe(tab.id);
-              }},
-              closeAll: {name: "Close All", callback: function(key, opt){ RED.workspaces.closeAll() }},
-              
-              sep1: "---------",
-              OpenAll: {name: "Open All", callback: function(key, opt){ RED.workspaces.showAllSafe()}},
-          }
-        });
-
-
-        if (options.maximumTabWidth) {
-          li.css('maxWidth', options.maximumTabWidth + 'px');
-        }
-        var link = $('<a/>', {
-          id: tab.id,
-          href: '#' + tab.id,
-          class: 'red-ui-tab-label',
-        }).appendTo(li);
-        if (tab.icon) {
-          $('<img src="' + tab.icon + '" class="red-ui-tab-icon"/>').appendTo(
-            link
-          );
-        } else if (tab.iconClass) {
-          $('<i>', { class: 'red-ui-tab-icon ' + tab.iconClass }).appendTo(
-            link
-          );
-        }
-        var span = $('<span/>', { class: 'bidiAware' })
-          .text(tab.label)
-          .appendTo(link);
-        span.attr('dir', RED.text.bidi.resolveBaseTextDir(tab.label));
-        if (options.collapsible) {
-          li.addClass('red-ui-tab-pinned');
-          var pinnedLink = $(
-            `<a href="#${tab.id}" class="red-ui-tab-link-button sidebar-shortcut-icon"></a>`
-          );
-          if (tab.pinned) {
-            if (pinnedTabsCount === 0) {
-              pinnedLink.prependTo(collapsedButtonsRow);
-            } else {
-              pinnedLink.insertAfter(
-                collapsedButtonsRow.find('a.red-ui-tab-link-button-pinned:last')
-              );
-            }
-          } else {
-            if (options.menu !== false) {
-              pinnedLink.insertBefore(collapsedButtonsRow.find('a:last'));
-            } else {
-              pinnedLink.appendTo(collapsedButtonsRow);
-            }
-          }
-
-          pinnedLink.attr('id', li.attr('id') + '-link-button');
-          if (tab.iconClass) {
-            $(`<span class="tab-label ${tab.iconClass}"> </span>`).appendTo(
-              pinnedLink
-            );
-            // $('<i>', { class: tab.iconClass }).appendTo(pinnedLink);
-          } else {
-            $('<i>', { class: defaultTabIcon }).appendTo(pinnedLink);
-          }
-          pinnedLink.click(function (evt) {
-            evt.preventDefault();
-            activateTab(tab.id);
-          });
-          if (tab.pinned) {
-            pinnedLink.addClass('red-ui-tab-link-button-pinned');
-            pinnedTabsCount++;
-          }
-          RED.popover.tooltip($(pinnedLink), tab.name, tab.action);
-        }
-        link.on('click', onTabClick);
-        link.on('dblclick', onTabDblClick);
-
-        //if (tab.closeable) {
-          li.addClass('red-ui-tabs-closeable');
-          $(`<div class="tab-separator"></div>`).appendTo(li);
-          var closeLink = $('<a/>', {
-            href: '#',
-            class: 'red-ui-tab-close',
-          }).appendTo(li);
-          closeLink.append('<i class="icofont-close" style="font-size:16px !important" />');
-          closeLink.on('click', function (event) {
-            event.preventDefault();
-            removeTab(tab.id);
-          });
-          
-        //}
-
-        var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
-
-        // if (options.onselect) {
-        //   $('<i class="red-ui-tabs-badge-changed fa fa-circle"></i>').appendTo(
-        //     badges
-        //   );
-        //   $(
-        //     '<i class="red-ui-tabs-badge-selected fa fa-check-circle"></i>'
-        //   ).appendTo(badges);
-        // }
-        if (options.onadd) {
-          options.onadd(tab);
-        }
-        link.attr('title', tab.label);
-
-        // Activate the first tab by default. Except the Node info from the sidebar
-        if (link[0].text !== 'Node Info'){
-          if (ul.find('li.red-ui-tab').size() == 1) {
-            activateTab(link);
-          }
-        }
-
-        if (options.onreorder) {
-          var originalTabOrder;
-          var tabDragIndex;
-          var tabElements = [];
-          var startDragIndex;
-
-          li.draggable({
-            axis: 'x',
-            distance: 20,
-            start: function (event, ui) {
-              originalTabOrder = [];
-              tabElements = [];
-              ul.children().each(function (i) {
-                tabElements[i] = {
-                  el: $(this),
-                  text: $(this).text(),
-                  left: $(this).position().left,
-                  width: $(this).width(),
-                };
-                if ($(this).is(li)) {
-                  tabDragIndex = i;
-                  startDragIndex = i;
-                }
-                originalTabOrder.push($(this).data('tabId'));
-              });
-              ul.children().each(function (i) {
-                if (i !== tabDragIndex) {
-                  $(this).css({
-                    position: 'absolute',
-                    left: tabElements[i].left + 'px',
-                    width: tabElements[i].width + 2,
-                    transition: 'left 0.3s',
-                  });
-                }
-              });
-              if (!li.hasClass('active')) {
-                li.css({ zIndex: 1 });
-              }
-            },
-            drag: function (event, ui) {
-              ui.position.left +=
-                tabElements[tabDragIndex].left + scrollContainer.scrollLeft();
-              var tabCenter =
-                ui.position.left +
-                tabElements[tabDragIndex].width / 2 -
-                scrollContainer.scrollLeft();
-              for (var i = 0; i < tabElements.length; i++) {
-                if (i === tabDragIndex) {
-                  continue;
-                }
-                if (
-                  tabCenter > tabElements[i].left &&
-                  tabCenter < tabElements[i].left + tabElements[i].width
-                ) {
-                  if (i < tabDragIndex) {
-                    tabElements[i].left += tabElements[tabDragIndex].width + 8;
-                    tabElements[tabDragIndex].el
-                      .detach()
-                      .insertBefore(tabElements[i].el);
-                  } else {
-                    tabElements[i].left -= tabElements[tabDragIndex].width + 8;
-                    tabElements[tabDragIndex].el
-                      .detach()
-                      .insertAfter(tabElements[i].el);
-                  }
-                  tabElements[i].el.css({ left: tabElements[i].left + 'px' });
-
-                  tabElements.splice(
-                    i,
-                    0,
-                    tabElements.splice(tabDragIndex, 1)[0]
-                  );
-
-                  tabDragIndex = i;
-                  break;
-                }
-              }
-            },
-            stop: function (event, ui) {
-              ul.children().css({
-                position: 'relative',
-                left: '',
-                transition: '',
-              });
-              if (!li.hasClass('active')) {
-                li.css({ zIndex: '' });
-              }
-              updateTabWidths();
-              if (startDragIndex !== tabDragIndex) {
-                options.onreorder(
-                  originalTabOrder,
-                  $.makeArray(
-                    ul.children().map(function () {
-                      return $(this).data('tabId');
-                    })
-                  )
-                );
-              }
-              activateTab(tabElements[tabDragIndex].el.data('tabId'));
-            },
-          });
-        }
-        setTimeout(function () {
-          updateTabWidths();
-        }, 10);
-        collapsibleMenu = null;
-      },
-      removeTab: removeTab,
-      activateTab: activateTab,
-      nextTab: activateNextTab,
-      previousTab: activatePreviousTab,
-      resize: updateTabWidths,
-      count: function () {
-        return ul.find('li.red-ui-tab').size();
-      },
-      contains: function (id) {
-        return ul.find("a[href='#" + id + "']").length > 0;
-      },
-      renameTab: function (id, label) {
-        if (tabs[id]){
-          tabs[id].label = label;
-          var tab = ul.find("a[href='#" + id + "']");
-          tab.attr('title', label);
-          tab
-            .find('span.bidiAware')
-            .text(label)
-            .attr('dir', RED.text.bidi.resolveBaseTextDir(label));
-          updateTabWidths();
-        } else {
-          console.log('[tabs] Tab not found')
-        }
-        
-      },
-      selection: getSelection,
-      order: function (order) {
-        var existingTabOrder = $.makeArray(
-          ul.children().map(function () {
-            return $(this).data('tabId');
-          })
-        );
-        if (existingTabOrder.length !== order.length) {
-          return;
-        }
-        var i;
-        var match = true;
-        for (i = 0; i < order.length; i++) {
-          if (order[i] !== existingTabOrder[i]) {
-            match = false;
-            break;
-          }
-        }
-        if (match) {
-          return;
-        }
-        var existingTabMap = {};
-        var existingTabs = ul
-          .children()
-          .detach()
-          .each(function () {
-            existingTabMap[$(this).data('tabId')] = $(this);
-          });
-        for (i = 0; i < order.length; i++) {
-          existingTabMap[order[i]].appendTo(ul);
-        }
-      },
-      listTabs: () => {
-        return tabs;
-      }
-    };
-  }
-
-
-  return {
-    create: createTabs,
-  };
-})();