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";
  11. import { DomEvents } from "../../theme.js";
  13. /**
  14.  * @typedef TabPanelOptions
  15.  * @property {String} [name]
  16.  * @property {boolean} [closable]
  17.  * @property {boolean} [noUserSetting] - does not store last opened tab in userSettings
  18.  */
  20. /** Tab panel that contains tabs. */
  21. export default class TabPanel extends Events
  22. {
  23.     static EVENT_RESIZE = "resize";
  24.     static EVENT_TAB_REMOVED = "onTabRemoved";
  25.     static EVENT_TAB_ADDED = "onTabAdded";
  27.     /** @type {TabPanelOptions} */
  28.     #options;
  29.     #eleId;
  31.     /** @type {Tab[]} */
  32.     tabs = [];
  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;
  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.                 DomEvents.POINTER_DOWN,
  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.      * @param {boolean} [noexact]
  289.      */
  290.     getTabByTitle(title, noexact = false)
  291.     {
  292.         if (noexact)
  293.         {
  294.             for (let i = 0; i < this.tabs.length; i++) if (this.tabs[i].title.includes(title)) return this.tabs[i];
  295.         }
  296.         else
  297.         {
  298.             for (let i = 0; i < this.tabs.length; i++) if (this.tabs[i].title == title) return this.tabs[i];
  299.         }
  300.     }
  302.     /**
  303.      * @param {string} id
  304.      */
  305.     getTabById(id)
  306.     {
  307.         for (let i = 0; i < this.tabs.length; i++) if (this.tabs[i].id == id) return this.tabs[i];
  308.     }
  310.     closeAllTabs()
  311.     {
  312.         while (this.tabs.length) this.closeTab(this.tabs[0].id);
  313.     }
  315.     /**
  316.      * @param {string} id
  317.      */
  318.     closeTab(id)
  319.     {
  320.         let tab = null;
  321.         let idx = 0;
  322.         for (let i = 0; i < this.tabs.length; i++)
  323.         {
  324.             if (this.tabs[i].id == id)
  325.             {
  326.                 tab = this.tabs[i];
  327.                 // tab.emitEvent("close");
  328.                 this.tabs.splice(i, 1);
  329.                 idx = i;
  330.                 break;
  331.             }
  332.         }
  333.         if (!tab) return;
  335.         this.emitEvent(TabPanel.EVENT_TAB_REMOVED, tab);
  336.         tab.remove();
  338.         if (idx > this.tabs.length - 1) idx = this.tabs.length - 1;
  339.         if (this.tabs[idx]) this.activateTab(this.tabs[idx].id);
  341.         this.updateHtml();
  342.     }
  344.     /**
  345.      * @param {string} id
  346.      * @param {boolean} changed
  347.      */
  348.     setChanged(id, changed)
  349.     {
  350.         if (this.getTabById(id)) this.getTabById(id).options.wasChanged = changed;
  351.         this.updateHtml();
  352.     }
  354.     /**
  355.      * @param {number} num
  356.      */
  357.     setTabNum(num)
  358.     {
  359.         const tab = this.tabs[Math.min(this.tabs.length, num)];
  360.         this.activateTab(tab.id);
  361.     }
  363.     /**
  364.      * @returns {number}
  365.      */
  366.     getNumTabs()
  367.     {
  368.         return this.tabs.length;
  369.     }
  371.     /**
  372.      * @returns {Tab}
  373.      */
  374.     cycleActiveTab()
  375.     {
  376.         if (this.tabs.length <= 1) return;
  378.         for (let i = 1; i < this.tabs.length; i++)
  379.             if (this.tabs[i - 1].active)
  380.                 return this.activateTab(this.tabs[i].id);
  382.         return this.activateTab(this.tabs[0].id);
  383.     }
  385.     /**
  386.      * @returns {Tab}
  387.      */
  388.     getActiveTab()
  389.     {
  390.         for (let i = 0; i < this.tabs.length; i++) if (this.tabs[i].active) return this.tabs[i];
  391.     }
  393.     updateSize()
  394.     {
  395.         for (let i = 0; i < this.tabs.length; i++) this.tabs[i].updateSize();
  396.     }
  398.     getSaveButton()
  399.     {
  400.         const t = this.getActiveTab();
  401.         if (!t) return;
  403.         const b = t.getSaveButton();
  404.         if (b) return b;
  405.     }
  407.     /**
  408.      * @param {Tab} tab
  409.      * @param {boolean} [activate]
  410.      * @returns {Tab}
  411.      */
  412.     addTab(tab, activate)
  413.     {
  414.         if (tab.options.singleton)
  415.         {
  416.             const t = this.getTabByTitle(tab.title);
  417.             if (t)
  418.             {
  419.                 this.activateTab(t.id);
  420.                 this.emitEvent(TabPanel.EVENT_TAB_ADDED, t, true);
  422.                 if (activate) this.activateTab(t.id);
  423.                 return t;
  424.             }
  425.         }
  427.         tab.initHtml(this._eleContentContainer);
  428.         this.tabs.push(tab);
  430.         if (activate) this.activateTab(tab.id);
  432.         this.updateHtml();
  433.         this.emitEvent(TabPanel.EVENT_TAB_ADDED, tab, false);
  435.         return tab;
  436.     }
  438.     /**
  439.      * @param {String} title
  440.      * @param {String} url
  441.      * @param {Object} options
  442.      * @param {boolean} userInteraction
  443.      * @returns {Tab}
  444.      */
  445.     addIframeTab(title, url, options, userInteraction)
  446.     {
  447.         const iframeTab = this.addTab(new CABLES.UI.Tab(title, options));
  448.         const id = utils.uuid();
  450.         const src = new URL(url);
  451.         src.searchParams.append("frameid", id);
  453.         let html = "<div class=\"loading\" id=\"loading" + id + "\" style=\"position:absolute;left:45%;top:34%\"></div>";
  454.         html += "<iframe id=\"iframe" + id + "\" ";
  455.         html += " src=\"" + src + "\"";
  456.         html += " allow=\"clipboard-write\" style=\"border:none;width:100%;height:100%\"";
  457.         html += " onload=\"ele.byId('loading" + id + "').style.display='none'; if(ele.byQuery('#refresh" + id + " .icon-refresh')) { ele.byQuery('#refresh" + id + " .icon-refresh').classList.remove('rotate');}\"";
  458.         html += "></iframe";
  459.         iframeTab.contentEle.innerHTML = html;
  460.         iframeTab.contentEle.style.padding = "0px";
  461.         let buttons = "";
  462.         let uri = url;
  463.         if (options.gotoUrl)uri = options.gotoUrl;
  465.         buttons += "<a class=\"button-small \" href=\"" + uri + "\" target=\"_blank\"><span class=\"icon nomargin icon-external\"></span></a>&nbsp;";
  466.         buttons += "<a class=\"button-small \" id=\"refresh" + id + "\"><span class=\"icon nomargin icon-refresh\"></span></a>";
  468.         iframeTab.toolbarEle.innerHTML = buttons;
  470.         const iframe = ele.byId("iframe" + id);
  471.         if (iframe) iframe.dataset.currentTab = "";
  472.         const hashUpdate = (e) =>
  473.         {
  474.             if (e.data?.hash && e.data?.frameid && e.data.frameid === id)
  475.             {
  476.                 if (iframe) iframe.dataset.currentTab = e.data.hash.replace("#", "");
  477.             }
  478.         };
  479.         window.addEventListener("message", hashUpdate);
  480.         iframeTab.on(Tab.EVENT_CLOSE, () =>
  481.         {
  482.             window.removeEventListener("message", hashUpdate);
  483.         });
  485.         const refreshButton = ele.byId("refresh" + id);
  486.         ele.clickable(refreshButton, () =>
  487.         {
  488.             if (iframe)
  489.             {
  490.                 const icon = ele.byQuery("#refresh" + id + " .icon-refresh");
  491.                 if (icon) icon.classList.add("rotate");
  492.                 const newsrc = new URL(iframe.src);
  493.                 newsrc.searchParams.set("frameid", id);
  494.                 newsrc.searchParams.set("nc", String(Date.now()));
  495.                 if (iframe.dataset.currentTab) newsrc.hash = iframe.dataset.currentTab;
  496.                 iframe.src = newsrc.toString();
  497.             }
  498.         });
  500.         const frame = document.getElementById("iframe" + id);
  502.         const talkerAPI = new CABLESUILOADER.TalkerAPI(frame.contentWindow);
  504.         talkerAPI.on(TalkerAPI.CMD_UI_SET_SAVED_STATE, (opts) =>
  505.         {
  506.             if (opts.state)
  507.             {
  508.                 gui.savedState.setSaved("talkerAPI", opts.subpatch);
  509.             }
  510.             else
  511.             {
  512.                 gui.savedState.setUnSaved("talkerAPI", opts.subpatch);
  513.             }
  514.         });
  516.         talkerAPI.on(TalkerAPI.CMD_UI_SETTING_MANUAL_SCREENSHOT, (opts, _next) =>
  517.         {
  518.             platform.setManualScreenshot(opts.manualScreenshot);
  519.         });
  521.         talkerAPI.on(TalkerAPI.CMD_UI_SAVE_SCREENSHOT, (_opts, _next) =>
  522.         {
  523.             gui.patchView.store.saveScreenshot(true, () =>
  524.             {
  525.                 talkerAPI.send(TalkerAPI.EVENT_SCREENSHOT_SAVED);
  526.             });
  527.         });
  529.         talkerAPI.on(TalkerAPI.CMD_UI_NOTIFY, (opts, next) =>
  530.         {
  531.             notify(opts.msg, opts.text, opts.options);
  532.         });
  534.         talkerAPI.on(TalkerAPI.CMD_UI_NOTIFY_ERROR, (opts, next) =>
  535.         {
  536.             notifyError(opts.msg, opts.text, opts.options);
  537.         });
  539.         talkerAPI.on(TalkerAPI.CMD_UI_UPDATE_PATCH_NAME, (opts, next) =>
  540.         {
  541.             gui.setProjectName(opts.name);
  542.             gui.patchParamPanel.show(true);
  543.             // send this back to have the title of the patch-editor iframe updated
  544.             platform.talkerAPI.send(TalkerAPI.CMD_UPDATE_PATCH_NAME, opts);
  545.         });
  547.         talkerAPI.on(TalkerAPI.CMD_UI_OPS_DELETED, (opts, next) =>
  548.         {
  549.             const opdocs = gui.opDocs.getAll();
  550.             const deletedOps = opts.ops || [];
  551.             for (let i = 0; i < deletedOps.length; i++)
  552.             {
  553.                 const deletedOp = deletedOps[i];
  554.                 const opDocToDelete = opdocs.findIndex((opDoc) => { return opDoc.id === deletedOp.id; });
  555.                 if (opDocToDelete) opdocs.splice(opDocToDelete, 1);
  556.                 gui.opSelect().reload();
  557.             }
  558.             let plural = deletedOps.length > 1 ? "s" : "";
  559.             if (deletedOps.length > 0) notify("deleted " + deletedOps.length + " op" + plural);
  560.             this.closeTab(iframeTab.id);
  561.         });
  563.         this.activateTab(iframeTab.id);
  564.         gui.maintabPanel.show(userInteraction);
  565.         return iframeTab;
  566.     }
  567. }