Home Reference Source

cables_dev/cables_ui/src/ui/elements/tabpanel/tabpanel.js

  1. import { Events, Logger, ele, TalkerAPI } from "cables-shared-client";
  2. import { utils } from "cables";
  3. import { getHandleBarHtml } from "../../utils/handlebars.js";
  4. import { notify, notifyError } from "../notification.js";
  5. import { gui } from "../../gui.js";
  6. import { platform } from "../../platform.js";
  7. import { contextMenu } from "../contextmenu.js";
  8. import { editorSession } from "./editor_session.js";
  9. import { userSettings } from "../../components/usersettings.js";
  10. import Tab from "./tab.js";
  12. /**
  13.  * @typedef TabPanelOptions
  14.  * @property {String} [name]
  15.  * @property {boolean} [closable]
  16.  * @property {boolean} [noUserSetting] - does not store last opened tab in userSettings
  17.  */
  19. /**
  20.  * a tab panel, that can contain tabs
  21.  *
  22.  * @export
  23.  * @class TabPanel
  24.  * @extends {Events}
  25.  */
  26. export default class TabPanel extends Events
  27. {
  28.     static EVENT_RESIZE = "resize";
  30.     /** @type {TabPanelOptions} */
  31.     #options;
  32.     #eleId;
  34.     /**
  35.      * @param {String} eleId
  36.      * @param {TabPanelOptions} options
  37.      */
  38.     constructor(eleId, options = {})
  39.     {
  40.         super();
  41.         this._log = new Logger("TabPanel " + eleId);
  43.         this.#options = options;
  44.         this.id = utils.uuid();
  45.         this.#eleId = eleId;
  46.         this._tabs = [];
  47.         this._eleContentContainer = null;
  48.         this._eleTabPanel = null;
  49.         this.showTabListButton = false;
  50.         this._dynCmds = [];
  52.         this._eleTabPanel = document.createElement("div");
  53.         this._eleTabPanel.classList.add("tabpanel");
  54.         this._eleTabPanel.innerHTML = "";
  56.         const el = ele.byId(this.#eleId);
  57.         if (!el)
  58.         {
  59.             this._log.error("could not find ele " + this.#eleId);
  60.             return;
  61.         }
  62.         el.appendChild(this._eleTabPanel);
  64.         this._eleContentContainer = document.createElement("div");
  65.         this._eleContentContainer.classList.add("contentcontainer");
  66.         this._eleContentContainer.innerHTML = "";
  67.         el.appendChild(this._eleContentContainer);
  69.         this.on(TabPanel.EVENT_RESIZE, () =>
  70.         {
  71.             for (let i = 0; i < this._tabs.length; i++) this._tabs[i].emitEvent(Tab.EVENT_RESIZE);
  72.         });
  73.     }
  75.     /**
  76.      * @param {string} title
  77.      * @returns {string}
  78.      */
  79.     getUniqueTitle(title)
  80.     {
  81.         const existingTab = this.getTabByTitle(title);
  82.         let count = 0;
  83.         while (existingTab)
  84.         {
  85.             count++;
  86.             if (!this.getTabByTitle(title + " (" + count + ")")) break;
  87.         }
  89.         if (count > 0)
  90.             title = title + " (" + count + ")";
  92.         return title;
  93.     }
  95.     updateHtml()
  96.     {
  97.         let html = "";
  98.         html += getHandleBarHtml("tabpanel_bar", { "id": this.id, "tabs": this._tabs });
  99.         this._eleTabPanel.innerHTML = html;
  101.         const editortabList = document.getElementById("editortabList" + this.id);
  102.         if (!editortabList)
  103.         {
  104.             this._log.warn("no editortabList?!?");
  105.             return;
  106.         }
  107.         if (!this.showTabListButton)
  108.         {
  109.             editortabList.style.display = "none";
  110.             editortabList.parentElement.style["padding-left"] = "0";
  111.         }
  112.         else
  113.         {
  114.             editortabList.parentElement.style["padding-left"] = "34px";
  116.             editortabList.style.display = "block";
  117.             editortabList.addEventListener(
  118.                 "pointerdown",
  119.                 (e) =>
  120.                 {
  121.                     const items = [];
  122.                     for (let i = 0; i < this._tabs.length; i++)
  123.                     {
  124.                         const tab = this._tabs[i];
  125.                         items.push({
  126.                             "title": tab.options.name,
  127.                             "func": () => { this.activateTab(tab.id); }
  128.                         });
  129.                     }
  130.                     contextMenu.show(
  131.                         {
  132.                             "items": items
  133.                         }, e.target);
  134.                 },
  135.             );
  136.         }
  138.         for (let i = 0; i < this._dynCmds.length; i++) gui.cmdPalette.removeDynamic(this._dynCmds[i]);
  140.         for (let i = 0; i < this._tabs.length; i++)
  141.         {
  142.             if (window.gui && this.#eleId == "maintabs")
  143.             {
  144.                 const t = this._tabs[i];
  146.                 const cmd = gui.cmdPalette.addDynamic("tab", "Tab " + t.title, () =>
  147.                 {
  148.                     gui.maintabPanel.show(true);
  150.                     this.activateTab(t.id, true);
  151.                 }, t.icon || "edit");
  152.                 this._dynCmds.push(cmd);
  153.             }
  155.             // ----------------
  157.             ele.clickable(ele.byId("editortab" + this._tabs[i].id), (e) =>
  158.             {
  159.                 if (e.target.dataset.id) this.activateTab(e.target.dataset.id, true);
  160.             });
  162.             if (this._tabs[i].options.closable)
  163.             {
  164.                 document.getElementById("editortab" + this._tabs[i].id).addEventListener(
  165.                     "pointerdown",
  166.                     function (e)
  167.                     {
  168.                         if (e.button == 1) if (e.target.dataset.id) this.closeTab(e.target.dataset.id);
  169.                     }.bind(this),
  170.                 );
  171.             }
  173.             if (document.getElementById("closetab" + this._tabs[i].id))
  174.             {
  175.                 document.getElementById("closetab" + this._tabs[i].id).addEventListener(
  176.                     "pointerdown",
  177.                     function (e)
  178.                     {
  179.                         this.closeTab(e.target.dataset.id);
  180.                     }.bind(this),
  181.                 );
  182.             }
  183.         }
  185.         this.scrollToActiveTab();
  186.     }
  188.     /**
  189.      * @param {string} name
  190.      */
  191.     activateTabByName(name)
  192.     {
  193.         name = name || "";
  194.         let found = false;
  195.         let tab = null;
  196.         for (let i = 0; i < this._tabs.length; i++)
  197.         {
  198.             if (this._tabs[i].title.toLowerCase() === name.toLowerCase() ||
  199.                 (this._tabs[i].options.name || "").toLowerCase() === name.toLowerCase())
  200.             {
  201.                 tab = this._tabs[i];
  202.                 this.activateTab(tab.id);
  203.                 found = true;
  204.             }
  205.             else this._tabs[i].deactivate();
  206.         }
  208.         if (!found) this._log.log("[activateTabByName] could not find tab", name);
  210.         this.updateHtml();
  211.         return tab;
  212.     }
  214.     scrollToActiveTab()
  215.     {
  216.         const tab = this.getActiveTab();
  217.         const w = this._eleTabPanel.clientWidth;
  218.         if (!tab) return;
  219.         let left = document.getElementById("editortab" + tab.id).offsetLeft;
  220.         left += document.getElementById("editortab" + tab.id).clientWidth;
  221.         left += 25;
  223.         const tabContainer = document.querySelector("#maintabs .tabs");
  224.         if (tabContainer && left > w) tabContainer.scrollLeft = left;
  225.     }
  227.     /**
  228.      * @param {string} id
  229.      */
  230.     activateTab(id)
  231.     {
  232.         let found = null;
  233.         for (let i = 0; i < this._tabs.length; i++)
  234.         {
  235.             if (this._tabs[i].id === id)
  236.             {
  237.                 found = this._tabs[i];
  238.                 this.emitEvent("onTabActivated", this._tabs[i]);
  239.                 this._tabs[i].activate();
  240.             }
  241.         }
  243.         if (found)
  244.             for (let i = 0; i < this._tabs.length; i++)
  245.                 if (this._tabs[i].id != id)
  246.                     this._tabs[i].deactivate();
  248.         this.updateHtml();
  250.         if (editorSession && editorSession.loaded() && gui.finishedLoading()) this.saveCurrentTabUsersettings();
  251.         return found;
  252.     }
  254.     loadCurrentTabUsersettings()
  255.     {
  256.         if (this.#options.noUserSetting) return;
  257.         let found = false;
  258.         for (let i = 0; i < this._tabs.length; i++)
  259.         {
  260.             if (userSettings.get("tabsLastTitle_" + this.#eleId) == this._tabs[i].title)
  261.             {
  262.                 this.activateTab(this._tabs[i].id);
  263.                 found = true;
  264.                 break;
  265.             }
  266.         }
  267.     }
  269.     saveCurrentTabUsersettings()
  270.     {
  271.         if (this.#options.noUserSetting) return;
  272.         const activeTab = this.getActiveTab();
  274.         if (!activeTab) return;
  275.         userSettings.set("tabsLastTitle_" + this.#eleId, activeTab.title);
  276.     }
  278.     /**
  279.      * @param {string} dataId
  280.      */
  281.     getTabByDataId(dataId)
  282.     {
  283.         for (let i = 0; i < this._tabs.length; i++) if (this._tabs[i].dataId == dataId) return this._tabs[i];
  284.     }
  286.     /**
  287.      * @param {string} title
  288.      */
  289.     getTabByTitle(title)
  290.     {
  291.         for (let i = 0; i < this._tabs.length; i++) if (this._tabs[i].title == title) return this._tabs[i];
  292.     }
  294.     /**
  295.      * @param {string} id
  296.      */
  297.     getTabById(id)
  298.     {
  299.         for (let i = 0; i < this._tabs.length; i++) if (this._tabs[i].id == id) return this._tabs[i];
  300.     }
  302.     closeAllTabs()
  303.     {
  304.         while (this._tabs.length) this.closeTab(this._tabs[0].id);
  305.     }
  307.     /**
  308.      * @param {string} id
  309.      */
  310.     closeTab(id)
  311.     {
  312.         let tab = null;
  313.         let idx = 0;
  314.         for (let i = 0; i < this._tabs.length; i++)
  315.         {
  316.             if (this._tabs[i].id == id)
  317.             {
  318.                 tab = this._tabs[i];
  319.                 // tab.emitEvent("close");
  320.                 this._tabs.splice(i, 1);
  321.                 idx = i;
  322.                 break;
  323.             }
  324.         }
  325.         if (!tab) return;
  327.         this.emitEvent("onTabRemoved", tab);
  328.         tab.remove();
  330.         if (idx > this._tabs.length - 1) idx = this._tabs.length - 1;
  331.         if (this._tabs[idx]) this.activateTab(this._tabs[idx].id);
  333.         this.updateHtml();
  334.     }
  336.     /**
  337.      * @param {string} id
  338.      * @param {boolean} changed
  339.      */
  340.     setChanged(id, changed)
  341.     {
  342.         if (this.getTabById(id)) this.getTabById(id).options.wasChanged = changed;
  343.         this.updateHtml();
  344.     }
  346.     /**
  347.      * @param {number} num
  348.      */
  349.     setTabNum(num)
  350.     {
  351.         const tab = this._tabs[Math.min(this._tabs.length, num)];
  352.         this.activateTab(tab.id);
  353.     }
  355.     /**
  356.      * @returns {number}
  357.      */
  358.     getNumTabs()
  359.     {
  360.         return this._tabs.length;
  361.     }
  363.     /**
  364.      * @returns {Tab}
  365.      */
  366.     cycleActiveTab()
  367.     {
  368.         if (this._tabs.length <= 1) return;
  370.         for (let i = 1; i < this._tabs.length; i++)
  371.             if (this._tabs[i - 1].active)
  372.                 return this.activateTab(this._tabs[i].id);
  374.         return this.activateTab(this._tabs[0].id);
  375.     }
  377.     /**
  378.      * @returns {Tab}
  379.      */
  380.     getActiveTab()
  381.     {
  382.         for (let i = 0; i < this._tabs.length; i++) if (this._tabs[i].active) return this._tabs[i];
  383.     }
  385.     updateSize()
  386.     {
  387.         for (let i = 0; i < this._tabs.length; i++) this._tabs[i].updateSize();
  388.     }
  390.     getSaveButton()
  391.     {
  392.         const t = this.getActiveTab();
  393.         if (!t) return;
  395.         const b = t.getSaveButton();
  396.         if (b) return b;
  397.     }
  399.     /**
  400.      * @param {Tab} tab
  401.      * @param {boolean} [activate]
  402.      * @returns {Tab}
  403.      */
  404.     addTab(tab, activate)
  405.     {
  406.         if (tab.options.singleton)
  407.         {
  408.             const t = this.getTabByTitle(tab.title);
  409.             if (t)
  410.             {
  411.                 this.activateTab(t.id);
  412.                 this.emitEvent("onTabAdded", t, true);
  414.                 if (activate) this.activateTab(t.id);
  415.                 return t;
  416.             }
  417.         }
  419.         tab.initHtml(this._eleContentContainer);
  420.         this._tabs.push(tab);
  422.         if (activate) this.activateTab(tab.id);
  424.         this.updateHtml();
  425.         this.emitEvent("onTabAdded", tab, false);
  427.         return tab;
  428.     }
  430.     /**
  431.      * @param {String} title
  432.      * @param {String} url
  433.      * @param {Object} options
  434.      * @param {boolean} userInteraction
  435.      * @returns {Tab}
  436.      */
  437.     addIframeTab(title, url, options, userInteraction)
  438.     {
  439.         const iframeTab = this.addTab(new CABLES.UI.Tab(title, options));
  440.         const id = utils.uuid();
  442.         const html = "<div class=\"loading\" id=\"loading" + id + "\" style=\"position:absolute;left:45%;top:34%\"></div><iframe id=\"iframe" + id + "\" allow=\"clipboard-write\" style=\"border:none;width:100%;height:100%\" src=\"" + url + "\" onload=\"document.getElementById('loading" + id + "').style.display='none';\"></iframe";
  443.         iframeTab.contentEle.innerHTML = html;
  444.         iframeTab.contentEle.style.padding = "0px";
  445.         let buttons = "";
  446.         let uri = url;
  447.         if (options.gotoUrl)uri = options.gotoUrl;
  449.         buttons += "<a class=\"button-small \" href=\"" + uri + "\" target=\"_blank\"><span class=\"icon nomargin icon-external\"></span></a>&nbsp;";
  450.         buttons += "<a class=\"button-small \" id=\"refresh" + id + "\"><span class=\"icon nomargin icon-refresh\"></span></a>";
  452.         iframeTab.toolbarEle.innerHTML = buttons;
  453.         ele.clickable(ele.byId("refresh" + id), () =>
  454.         {
  455.             ele.byId("iframe" + id).src += "";
  457.         });
  459.         const frame = document.getElementById("iframe" + id);
  461.         const talkerAPI = new CABLESUILOADER.TalkerAPI(frame.contentWindow);
  463.         talkerAPI.on(TalkerAPI.CMD_UI_SET_SAVED_STATE, (opts) =>
  464.         {
  465.             if (opts.state)
  466.             {
  467.                 gui.savedState.setSaved("talkerAPI", opts.subpatch);
  468.             }
  469.             else
  470.             {
  471.                 gui.savedState.setUnSaved("talkerAPI", opts.subpatch);
  472.             }
  473.         });
  475.         talkerAPI.on(TalkerAPI.CMD_UI_SETTING_MANUAL_SCREENSHOT, (opts, next) =>
  476.         {
  477.             platform.setManualScreenshot(opts.manualScreenshot);
  479.             if (opts.manualScreenshot)
  480.             {
  481.                 gui.patchView.store.saveScreenshot(true, () =>
  482.                 {
  483.                     talkerAPI.send(TalkerAPI.EVENT_SCREENSHOT_SAVED);
  484.                 });
  485.             }
  486.         });
  488.         talkerAPI.on(TalkerAPI.CMD_UI_NOTIFY, (opts, next) =>
  489.         {
  490.             notify(opts.msg, opts.text, opts.options);
  491.         });
  493.         talkerAPI.on(TalkerAPI.CMD_UI_NOTIFY_ERROR, (opts, next) =>
  494.         {
  495.             notifyError(opts.msg, opts.text, opts.options);
  496.         });
  498.         talkerAPI.on(TalkerAPI.CMD_UI_UPDATE_PATCH_NAME, (opts, next) =>
  499.         {
  500.             gui.setProjectName(opts.name);
  501.             gui.patchParamPanel.show(true);
  502.             // send this back to have the title of the patch-editor iframe updated
  503.             platform.talkerAPI.send(TalkerAPI.CMD_UPDATE_PATCH_NAME, opts);
  504.         });
  506.         talkerAPI.on(TalkerAPI.CMD_UI_OPS_DELETED, (opts, next) =>
  507.         {
  508.             const opdocs = gui.opDocs.getAll();
  509.             const deletedOps = opts.ops || [];
  510.             for (let i = 0; i < deletedOps.length; i++)
  511.             {
  512.                 const deletedOp = deletedOps[i];
  513.                 const opDocToDelete = opdocs.findIndex((opDoc) => { return opDoc.id === deletedOp.id; });
  514.                 if (opDocToDelete) opdocs.splice(opDocToDelete, 1);
  515.                 gui.opSelect().reload();
  516.             }
  517.             let plural = deletedOps.length > 1 ? "s" : "";
  518.             if (deletedOps.length > 0) notify("deleted " + deletedOps.length + " op" + plural);
  519.             this.closeTab(iframeTab.id);
  520.         });
  522.         this.activateTab(iframeTab.id);
  523.         gui.maintabPanel.show(userInteraction);
  524.         return iframeTab;
  525.     }
  526. }