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.     /** @type {Tab[]} */
  35.     #tabs = [];
  37.     /**
  38.      * @param {String} eleId
  39.      * @param {TabPanelOptions} options
  40.      */
  41.     constructor(eleId, options = {})
  42.     {
  43.         super();
  44.         this._log = new Logger("TabPanel " + eleId);
  46.         this.#options = options;
  47.         this.id = utils.uuid();
  48.         this.#eleId = eleId;
  50.         this._eleContentContainer = null;
  51.         this._eleTabPanel = null;
  52.         this.showTabListButton = false;
  53.         this._dynCmds = [];
  55.         this._eleTabPanel = document.createElement("div");
  56.         this._eleTabPanel.classList.add("tabpanel");
  57.         this._eleTabPanel.innerHTML = "";
  59.         const el = ele.byId(this.#eleId);
  60.         if (!el)
  61.         {
  62.             this._log.error("could not find ele " + this.#eleId);
  63.             return;
  64.         }
  65.         el.appendChild(this._eleTabPanel);
  67.         this._eleContentContainer = document.createElement("div");
  68.         this._eleContentContainer.classList.add("contentcontainer");
  69.         this._eleContentContainer.innerHTML = "";
  70.         el.appendChild(this._eleContentContainer);
  72.         this.on(TabPanel.EVENT_RESIZE, () =>
  73.         {
  74.             for (let i = 0; i < this.#tabs.length; i++) this.#tabs[i].emitEvent(Tab.EVENT_RESIZE);
  75.         });
  76.     }
  78.     /**
  79.      * @param {string} title
  80.      * @returns {string}
  81.      */
  82.     getUniqueTitle(title)
  83.     {
  84.         const existingTab = this.getTabByTitle(title);
  85.         let count = 0;
  86.         while (existingTab)
  87.         {
  88.             count++;
  89.             if (!this.getTabByTitle(title + " (" + count + ")")) break;
  90.         }
  92.         if (count > 0)
  93.             title = title + " (" + count + ")";
  95.         return title;
  96.     }
  98.     updateHtml()
  99.     {
  100.         let html = "";
  101.         html += getHandleBarHtml("tabpanel_bar", { "id": this.id, "tabs": this.#tabs });
  102.         this._eleTabPanel.innerHTML = html;
  104.         const editortabList = document.getElementById("editortabList" + this.id);
  105.         if (!editortabList)
  106.         {
  107.             this._log.warn("no editortabList?!?");
  108.             return;
  109.         }
  110.         if (!this.showTabListButton)
  111.         {
  112.             editortabList.style.display = "none";
  113.             editortabList.parentElement.style["padding-left"] = "0";
  114.         }
  115.         else
  116.         {
  117.             editortabList.parentElement.style["padding-left"] = "34px";
  119.             editortabList.style.display = "block";
  120.             editortabList.addEventListener(
  121.                 "pointerdown",
  122.                 (e) =>
  123.                 {
  124.                     const items = [];
  125.                     for (let i = 0; i < this.#tabs.length; i++)
  126.                     {
  127.                         const tab = this.#tabs[i];
  128.                         items.push({
  129.                             "title": tab.options.name,
  130.                             "func": () => { this.activateTab(tab.id); }
  131.                         });
  132.                     }
  133.                     contextMenu.show(
  134.                         {
  135.                             "items": items
  136.                         }, e.target);
  137.                 },
  138.             );
  139.         }
  141.         for (let i = 0; i < this._dynCmds.length; i++) gui.cmdPalette.removeDynamic(this._dynCmds[i]);
  143.         for (let i = 0; i < this.#tabs.length; i++)
  144.         {
  145.             if (window.gui && this.#eleId == "maintabs")
  146.             {
  147.                 const t = this.#tabs[i];
  149.                 const cmd = gui.cmdPalette.addDynamic("tab", "Tab " + t.title, () =>
  150.                 {
  151.                     gui.maintabPanel.show(true);
  153.                     this.activateTab(t.id, true);
  154.                 }, t.icon || "edit");
  155.                 this._dynCmds.push(cmd);
  156.             }
  158.             // ----------------
  160.             ele.clickable(ele.byId("editortab" + this.#tabs[i].id), (e) =>
  161.             {
  162.                 if (e.target.dataset.id) this.activateTab(e.target.dataset.id, true);
  163.             });
  165.             if (this.#tabs[i].options.closable)
  166.             {
  167.                 document.getElementById("editortab" + this.#tabs[i].id).addEventListener(
  168.                     "pointerdown",
  169.                     function (e)
  170.                     {
  171.                         if (e.button == 1) if (e.target.dataset.id) this.closeTab(e.target.dataset.id);
  172.                     }.bind(this),
  173.                 );
  174.             }
  176.             if (document.getElementById("closetab" + this.#tabs[i].id))
  177.             {
  178.                 document.getElementById("closetab" + this.#tabs[i].id).addEventListener(
  179.                     "pointerdown",
  180.                     function (e)
  181.                     {
  182.                         this.closeTab(e.target.dataset.id);
  183.                     }.bind(this),
  184.                 );
  185.             }
  186.         }
  188.         this.scrollToActiveTab();
  189.     }
  191.     /**
  192.      * @param {string} name
  193.      */
  194.     activateTabByName(name)
  195.     {
  196.         name = name || "";
  197.         let found = false;
  198.         let tab = null;
  199.         for (let i = 0; i < this.#tabs.length; i++)
  200.         {
  201.             if (this.#tabs[i].title.toLowerCase() === name.toLowerCase() ||
  202.                 (this.#tabs[i].options.name || "").toLowerCase() === name.toLowerCase())
  203.             {
  204.                 tab = this.#tabs[i];
  205.                 this.activateTab(tab.id);
  206.                 found = true;
  207.             }
  208.             else this.#tabs[i].deactivate();
  209.         }
  211.         if (!found) this._log.log("[activateTabByName] could not find tab", name);
  213.         this.updateHtml();
  214.         return tab;
  215.     }
  217.     scrollToActiveTab()
  218.     {
  219.         const tab = this.getActiveTab();
  220.         const w = this._eleTabPanel.clientWidth;
  221.         if (!tab) return;
  222.         let left = document.getElementById("editortab" + tab.id).offsetLeft;
  223.         left += document.getElementById("editortab" + tab.id).clientWidth;
  224.         left += 25;
  226.         const tabContainer = document.querySelector("#maintabs .tabs");
  227.         if (tabContainer && left > w) tabContainer.scrollLeft = left;
  228.     }
  230.     /**
  231.      * @param {string} id
  232.      */
  233.     activateTab(id)
  234.     {
  235.         let found = null;
  236.         for (let i = 0; i < this.#tabs.length; i++)
  237.         {
  238.             if (this.#tabs[i].id === id)
  239.             {
  240.                 found = this.#tabs[i];
  241.                 this.emitEvent("onTabActivated", this.#tabs[i]);
  242.                 this.#tabs[i].activate();
  243.             }
  244.         }
  246.         if (found)
  247.             for (let i = 0; i < this.#tabs.length; i++)
  248.                 if (this.#tabs[i].id != id)
  249.                     this.#tabs[i].deactivate();
  251.         this.updateHtml();
  253.         if (editorSession && editorSession.loaded() && gui.finishedLoading()) this.saveCurrentTabUsersettings();
  254.         return found;
  255.     }
  257.     loadCurrentTabUsersettings()
  258.     {
  259.         if (this.#options.noUserSetting) return;
  260.         let found = false;
  261.         for (let i = 0; i < this.#tabs.length; i++)
  262.         {
  263.             if (userSettings.get("tabsLastTitle_" + this.#eleId) == this.#tabs[i].title)
  264.             {
  265.                 this.activateTab(this.#tabs[i].id);
  266.                 found = true;
  267.                 break;
  268.             }
  269.         }
  270.     }
  272.     saveCurrentTabUsersettings()
  273.     {
  274.         if (this.#options.noUserSetting) return;
  275.         const activeTab = this.getActiveTab();
  277.         if (!activeTab) return;
  278.         userSettings.set("tabsLastTitle_" + this.#eleId, activeTab.title);
  279.     }
  281.     /**
  282.      * @param {string} dataId
  283.      */
  284.     getTabByDataId(dataId)
  285.     {
  286.         for (let i = 0; i < this.#tabs.length; i++) if (this.#tabs[i].dataId == dataId) return this.#tabs[i];
  287.     }
  289.     /**
  290.      * @param {string} title
  291.      * @param {boolean} [noexact]
  292.      */
  293.     getTabByTitle(title, noexact = false)
  294.     {
  295.         if (noexact)
  296.         {
  297.             for (let i = 0; i < this.#tabs.length; i++) if (this.#tabs[i].title.includes(title)) return this.#tabs[i];
  298.         }
  299.         else
  300.         {
  301.             for (let i = 0; i < this.#tabs.length; i++) if (this.#tabs[i].title == title) return this.#tabs[i];
  302.         }
  303.     }
  305.     /**
  306.      * @param {string} id
  307.      */
  308.     getTabById(id)
  309.     {
  310.         for (let i = 0; i < this.#tabs.length; i++) if (this.#tabs[i].id == id) return this.#tabs[i];
  311.     }
  313.     closeAllTabs()
  314.     {
  315.         while (this.#tabs.length) this.closeTab(this.#tabs[0].id);
  316.     }
  318.     /**
  319.      * @param {string} id
  320.      */
  321.     closeTab(id)
  322.     {
  323.         let tab = null;
  324.         let idx = 0;
  325.         for (let i = 0; i < this.#tabs.length; i++)
  326.         {
  327.             if (this.#tabs[i].id == id)
  328.             {
  329.                 tab = this.#tabs[i];
  330.                 // tab.emitEvent("close");
  331.                 this.#tabs.splice(i, 1);
  332.                 idx = i;
  333.                 break;
  334.             }
  335.         }
  336.         if (!tab) return;
  338.         this.emitEvent("onTabRemoved", tab);
  339.         tab.remove();
  341.         if (idx > this.#tabs.length - 1) idx = this.#tabs.length - 1;
  342.         if (this.#tabs[idx]) this.activateTab(this.#tabs[idx].id);
  344.         this.updateHtml();
  345.     }
  347.     /**
  348.      * @param {string} id
  349.      * @param {boolean} changed
  350.      */
  351.     setChanged(id, changed)
  352.     {
  353.         if (this.getTabById(id)) this.getTabById(id).options.wasChanged = changed;
  354.         this.updateHtml();
  355.     }
  357.     /**
  358.      * @param {number} num
  359.      */
  360.     setTabNum(num)
  361.     {
  362.         const tab = this.#tabs[Math.min(this.#tabs.length, num)];
  363.         this.activateTab(tab.id);
  364.     }
  366.     /**
  367.      * @returns {number}
  368.      */
  369.     getNumTabs()
  370.     {
  371.         return this.#tabs.length;
  372.     }
  374.     /**
  375.      * @returns {Tab}
  376.      */
  377.     cycleActiveTab()
  378.     {
  379.         if (this.#tabs.length <= 1) return;
  381.         for (let i = 1; i < this.#tabs.length; i++)
  382.             if (this.#tabs[i - 1].active)
  383.                 return this.activateTab(this.#tabs[i].id);
  385.         return this.activateTab(this.#tabs[0].id);
  386.     }
  388.     /**
  389.      * @returns {Tab}
  390.      */
  391.     getActiveTab()
  392.     {
  393.         for (let i = 0; i < this.#tabs.length; i++) if (this.#tabs[i].active) return this.#tabs[i];
  394.     }
  396.     updateSize()
  397.     {
  398.         for (let i = 0; i < this.#tabs.length; i++) this.#tabs[i].updateSize();
  399.     }
  401.     getSaveButton()
  402.     {
  403.         const t = this.getActiveTab();
  404.         if (!t) return;
  406.         const b = t.getSaveButton();
  407.         if (b) return b;
  408.     }
  410.     /**
  411.      * @param {Tab} tab
  412.      * @param {boolean} [activate]
  413.      * @returns {Tab}
  414.      */
  415.     addTab(tab, activate)
  416.     {
  417.         if (tab.options.singleton)
  418.         {
  419.             const t = this.getTabByTitle(tab.title);
  420.             if (t)
  421.             {
  422.                 this.activateTab(t.id);
  423.                 this.emitEvent("onTabAdded", t, true);
  425.                 if (activate) this.activateTab(t.id);
  426.                 return t;
  427.             }
  428.         }
  430.         tab.initHtml(this._eleContentContainer);
  431.         this.#tabs.push(tab);
  433.         if (activate) this.activateTab(tab.id);
  435.         this.updateHtml();
  436.         this.emitEvent("onTabAdded", tab, false);
  438.         return tab;
  439.     }
  441.     /**
  442.      * @param {String} title
  443.      * @param {String} url
  444.      * @param {Object} options
  445.      * @param {boolean} userInteraction
  446.      * @returns {Tab}
  447.      */
  448.     addIframeTab(title, url, options, userInteraction)
  449.     {
  450.         const iframeTab = this.addTab(new CABLES.UI.Tab(title, options));
  451.         const id = utils.uuid();
  453.         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";
  454.         iframeTab.contentEle.innerHTML = html;
  455.         iframeTab.contentEle.style.padding = "0px";
  456.         let buttons = "";
  457.         let uri = url;
  458.         if (options.gotoUrl)uri = options.gotoUrl;
  460.         buttons += "<a class=\"button-small \" href=\"" + uri + "\" target=\"_blank\"><span class=\"icon nomargin icon-external\"></span></a>&nbsp;";
  461.         buttons += "<a class=\"button-small \" id=\"refresh" + id + "\"><span class=\"icon nomargin icon-refresh\"></span></a>";
  463.         iframeTab.toolbarEle.innerHTML = buttons;
  464.         ele.clickable(ele.byId("refresh" + id), () =>
  465.         {
  466.             ele.byId("iframe" + id).src += "";
  468.         });
  470.         const frame = document.getElementById("iframe" + id);
  472.         const talkerAPI = new CABLESUILOADER.TalkerAPI(frame.contentWindow);
  474.         talkerAPI.on(TalkerAPI.CMD_UI_SET_SAVED_STATE, (opts) =>
  475.         {
  476.             if (opts.state)
  477.             {
  478.                 gui.savedState.setSaved("talkerAPI", opts.subpatch);
  479.             }
  480.             else
  481.             {
  482.                 gui.savedState.setUnSaved("talkerAPI", opts.subpatch);
  483.             }
  484.         });
  486.         talkerAPI.on(TalkerAPI.CMD_UI_SETTING_MANUAL_SCREENSHOT, (opts, next) =>
  487.         {
  488.             platform.setManualScreenshot(opts.manualScreenshot);
  490.             if (opts.manualScreenshot)
  491.             {
  492.                 gui.patchView.store.saveScreenshot(true, () =>
  493.                 {
  494.                     talkerAPI.send(TalkerAPI.EVENT_SCREENSHOT_SAVED);
  495.                 });
  496.             }
  497.         });
  499.         talkerAPI.on(TalkerAPI.CMD_UI_NOTIFY, (opts, next) =>
  500.         {
  501.             notify(opts.msg, opts.text, opts.options);
  502.         });
  504.         talkerAPI.on(TalkerAPI.CMD_UI_NOTIFY_ERROR, (opts, next) =>
  505.         {
  506.             notifyError(opts.msg, opts.text, opts.options);
  507.         });
  509.         talkerAPI.on(TalkerAPI.CMD_UI_UPDATE_PATCH_NAME, (opts, next) =>
  510.         {
  511.             gui.setProjectName(opts.name);
  512.             gui.patchParamPanel.show(true);
  513.             // send this back to have the title of the patch-editor iframe updated
  514.             platform.talkerAPI.send(TalkerAPI.CMD_UPDATE_PATCH_NAME, opts);
  515.         });
  517.         talkerAPI.on(TalkerAPI.CMD_UI_OPS_DELETED, (opts, next) =>
  518.         {
  519.             const opdocs = gui.opDocs.getAll();
  520.             const deletedOps = opts.ops || [];
  521.             for (let i = 0; i < deletedOps.length; i++)
  522.             {
  523.                 const deletedOp = deletedOps[i];
  524.                 const opDocToDelete = opdocs.findIndex((opDoc) => { return opDoc.id === deletedOp.id; });
  525.                 if (opDocToDelete) opdocs.splice(opDocToDelete, 1);
  526.                 gui.opSelect().reload();
  527.             }
  528.             let plural = deletedOps.length > 1 ? "s" : "";
  529.             if (deletedOps.length > 0) notify("deleted " + deletedOps.length + " op" + plural);
  530.             this.closeTab(iframeTab.id);
  531.         });
  533.         this.activateTab(iframeTab.id);
  534.         gui.maintabPanel.show(userInteraction);
  535.         return iframeTab;
  536.     }
  537. }