Source: xxe/app/XMLEditorApp.js

  1. /**
  2.  * A sample XML editor application which leverages {@link XMLEditor}.
  3.  * <p>Also implements a number of interactive actions (static methods)
  4.  * like <code>newDocument</code>, <code>closeDocument</code>, etc, 
  5.  * which may be used independently from <code>XMLEditorApp</code>.
  6.  */
  7. export class XMLEditorApp extends HTMLElement {
  8.     /**
  9.      * Constructs a sample XML editor application, the implementation
  10.      * of custom HTML element <code>&lt;xxe-app&gt;</code>.
  11.      */
  12.     constructor() {
  13.         super();
  14.         
  15.         this._indicator = null;
  16.         this._title = null;
  17.         this._menuButton = null;
  18.         this._onButtonMenuItemSelected =
  19.             this.onButtonMenuItemSelected.bind(this);
  20.         this._newButton = null;
  21.         this._openButton = null;
  22.         this._saveButton = null;
  23.         this._saveAsButton = null;
  24.         this._closeButton = null;
  25.         this._xmlEditor = null;
  26.         this._autoSave = null;
  27.         this._checkLeaveApp = false;
  28.         
  29.         this._onBeforeUnload = this.onBeforeUnload.bind(this);
  30.         this._onAnyRequest = this.onAnyRequest.bind(this);
  31.         this._onAnyEvent = this.onAnyEvent.bind(this);
  32.     }
  33.     
  34.     // -----------------------------------------------------------------------
  35.     // Custom element
  36.     // -----------------------------------------------------------------------
  38.     connectedCallback() {
  39.         let notSupported = this.firstElementChild;
  40.         if (notSupported !== null &&
  41.             notSupported.classList.contains("xxe-not-supported")) {
  42.             if (!browserEngineIsSupported()) {
  43.                 let reason = `<strong>Sorry but your web browser
  44. is not supported.</strong><br /><br />
  45. In order to be supported, your web browser must run on <em>desktop</em> 
  46. computer and must use the same browser engine as <em>recent</em> versions 
  47. of <em>Chrome</em> or <em>Firefox</em>.`;
  48.                 
  49.                 const userAgent = window.navigator.userAgent;
  50.                 if (userAgent) {
  51.                     reason += `<br />
  52. <small>(Your web browser identifies itself as:
  53. "<code>${userAgent}</code>".)</small>`;
  54.                 }
  55.                 
  56.                 notSupported.innerHTML = reason;
  57.                 return;
  58.             }
  59.             
  60.             XUI.Util.removeAllChildren(this);
  61.         }
  63.         // ---
  64.         
  65.         if (this.firstChild === null) {
  66.             this.appendChild(XMLEditorApp.TEMPLATE.content.cloneNode(true));
  68.             let div = this.firstElementChild;
  69.             let children = div.children;
  70.             this._indicator = children.item(0);
  71.             this._indicator.onclick = this.onIndicatorClick.bind(this);
  72.             
  73.             this._title = children.item(1);
  74.             
  75.             this._menuButton = children.item(2);
  76.             this._menuButton.textContent = XUI.StockIcon["menu"];
  77.             this._menuButton.onclick = this.onMenuButtonClick.bind(this);
  79.             // ---
  80.             
  81.             children = div.nextElementSibling.children;
  82.             this._newButton = children.item(0);
  83.             this._newButton.onclick = this.onNewButtonClick.bind(this);
  84.             
  85.             this._openButton = children.item(1);
  86.             this._openButton.onclick = this.onOpenButtonClick.bind(this);
  87.             
  88.             this._saveButton = children.item(2);
  89.             this._saveButton.onclick = this.onSaveButtonClick.bind(this);
  90.             
  91.             this._saveAsButton = children.item(3);
  92.             this._saveAsButton.onclick = this.onSaveAsButtonClick.bind(this);
  93.             
  94.             this._closeButton = children.item(4);
  95.             this._closeButton.onclick = this.onCloseButtonClick.bind(this);
  97.             this.documentStorage = this.getAttribute("documentstorage");
  98.             
  99.             // ---
  100.             
  101.             const xxe = this.lastElementChild;
  102.             this._xmlEditor = xxe;
  103.             xxe.resourceStorage = new LocalFiles(xxe);
  104.             xxe.addEventListener("connected", this.onConnected.bind(this));
  105.             xxe.addEventListener("disconnected",
  106.                                  this.onDisconnected.bind(this));
  107.             const docOpenedHandler = this.onDocumentOpened.bind(this);
  108.             xxe.addEventListener("documentCreated", docOpenedHandler);
  109.             xxe.addEventListener("documentOpened", docOpenedHandler);
  110.             xxe.addEventListener("documentRecovered", docOpenedHandler);
  111.             xxe.addEventListener("documentSavedAs",
  112.                                  this.onDocumentSavedAs.bind(this));
  113.             xxe.addEventListener("documentClosed",
  114.                                  this.onDocumentClosed.bind(this));
  115.             xxe.addEventListener("saveStateChanged",
  116.                                  this.onSaveStateChanged.bind(this));
  117.             xxe.addEventListener("readOnlyStateChanged",
  118.                                  this.onReadOnlyStateChanged.bind(this));
  120.             this.onDisconnected(/*event*/ null);
  121.             this.onDocumentClosed(/*event*/ null);
  123.             window.addEventListener("unhandledrejection", (event) => {
  124.                 XUI.Alert.showWarning(`SHOULD NOT HAPPEN: \
  125. unhandled promise rejection:\n${event.reason}`, xxe);
  126.             });
  127.             
  128.             // ---
  129.             
  130.             this.serverURL = this.getAttribute("serverurl");
  131.             this.clientProperties = this.getAttribute("clientproperties");
  132.             this.autoRecover = this.hasAttribute("autorecover")?
  133.                 (this.getAttribute("autorecover") === "true") : true;
  134.             this.checkLeaveApp = this.hasAttribute("checkleaveapp")?
  135.                 (this.getAttribute("checkleaveapp") === "true") : true;
  136.             this.button2PastesText =
  137.                 (this.getAttribute("button2pastestext") === "true");
  138.             this.initAutoSave();
  139.         }
  140.         // Otherwise, already connected.
  141.     }
  143.     // -------------------------------
  144.     // documentStorage
  145.     // -------------------------------
  146.     
  147.     get documentStorage() {
  148.         return this.getAttribute("documentstorage");
  149.     }
  151.     /**
  152.      * Get/set the <code>documentStorage</code> property 
  153.      * of this XML editor application.
  154.      * <p>The values of the <code>documentStorage</code> property are:
  155.      * <dl>
  156.      * <dt>"local"
  157.      * <dd>Default value.
  158.      * Create and edit only <i>local files</i>, that is, files which 
  159.      * are found on the computer running the web browser hosting this 
  160.      * XML editor application.
  161.      * <dt>"remote"
  162.      * <dd>Create and edit only <i>remote files</i>, that is, files which 
  163.      * are accessed on the server side by <code>xxeserver</code>.
  164.      * <dt>"both"
  165.      * <dd>Local files and remote files are both supported. 
  166.      * </dl>
  167.      * 
  168.      * @type {string}
  169.      */
  170.     set documentStorage(storage) {
  171.         if (storage) {
  172.             storage = storage.trim();
  173.         }
  174.         if (!storage ||
  175.             !(storage === "local" || storage === "remote" ||
  176.               storage === "both")) {
  177.             storage = "local";
  178.         }
  179.         
  180.         if (storage !== this.getAttribute("documentstorage")) {
  181.             this.setAttribute("documentstorage", storage);
  182.         }
  183.         
  184.         const buttons = [this._newButton, this._openButton];
  185.         for (let button of buttons) {
  186.             let detail = button.lastElementChild; // A span
  187.             let newDetail = null;
  188.             
  189.             switch (storage) {
  190.             case "local":
  191.             case "remote":
  192.                 if (detail.classList.contains("xui-small-icon")) {
  193.                     newDetail = document.createElement("span");
  194.                     newDetail.appendChild(document.createTextNode("\u2026"));
  195.                 }
  196.                 break;
  197.             default: // "both"
  198.                 if (!detail.classList.contains("xui-small-icon")) {
  199.                     newDetail = document.createElement("span");
  200.                     newDetail.setAttribute("class",
  201.                                           "xui-small-icon xxe-app-button-menu");
  202.                     newDetail.appendChild(
  203.                         document.createTextNode(XUI.StockIcon["down-dir"]));
  204.                 }
  205.                 break;
  206.             }
  208.             if (newDetail !== null) {
  209.                 button.replaceChild(newDetail, detail);
  210.             }
  211.         }
  212.     }
  214.     // -------------------------------
  215.     // serverURL
  216.     // -------------------------------
  217.     
  218.     get serverURL() {
  219.         return this.getAttribute("serverurl");
  220.     }
  222.     /**
  223.      * A cover for {@link XMLEditor#serverURL}.
  224.      *
  225.      * @type {string}
  226.      */
  227.     set serverURL(url) {
  228.         this._xmlEditor.serverURL = url;
  229.         
  230.         url = this._xmlEditor.serverURL;
  231.         if (url !== this.getAttribute("serverurl")) {
  232.             this.setAttribute("serverurl", url);
  233.         }
  234.     }
  236.     // -------------------------------
  237.     // clientProperties
  238.     // -------------------------------
  239.     
  240.     get clientProperties() {
  241.         let props = this.getAttribute("clientproperties");
  242.         if (props !== null && (props = props.trim()).length === 0) {
  243.             props = null;
  244.         }
  245.         return props;
  246.     }
  248.     /**
  249.      * A cover for {@link XMLEditor#clientProperties}.
  250.      *
  251.      * @type {string}
  252.      */
  253.     set clientProperties(props) {
  254.         this._xmlEditor.clientProperties = props;
  256.         props = this._xmlEditor.clientProperties;
  257.         if (props === null) {
  258.             this.removeAttribute("clientproperties");
  259.         } else {
  260.             this.setAttribute("clientproperties", props);
  261.         }
  262.     }
  264.     // -------------------------------
  265.     // autoRecover
  266.     // -------------------------------
  267.     
  268.     get autoRecover() {
  269.         return this.getAttribute("autorecover") === "true";
  270.     }
  272.     /**
  273.      * A cover for {@link XMLEditor#autoRecover}.
  274.      *
  275.      * @type {boolean}
  276.      */
  277.     set autoRecover(recover) {
  278.         this._xmlEditor.autoRecover = recover;
  279.         
  280.         const recoverValue = recover? "true" : "false";
  281.         if (recoverValue !== this.getAttribute("autorecover")) {
  282.             this.setAttribute("autorecover", recoverValue);
  283.         }
  284.     }
  286.     // -------------------------------
  287.     // checkLeaveApp
  288.     // -------------------------------
  289.         
  290.     get checkLeaveApp() {
  291.         // Quicker than accessing the attribute value.
  292.         return this._checkLeaveApp;
  293.     }
  295.     /**
  296.      * Get/set the <code>checkLeaveApp</code> property of this 
  297.      * XML editor application.
  298.      * <p>Default: <code>true</code>. If <code>true</code> and 
  299.      * the document being edited has unsaved changes then
  300.      * ask users to confirm if they really want to leave the page  
  301.      * and loose their changes.
  302.      *
  303.      * @type {boolean}
  304.      */
  305.     set checkLeaveApp(check) {
  306.         this._checkLeaveApp = check;
  307.         this.setBeforeUnloadListener(check && this._xmlEditor &&
  308.                                      this._xmlEditor.saveNeeded);
  309.         
  310.         const checkValue = check? "true" : "false";
  311.         if (checkValue !== this.getAttribute("checkleaveapp")) {
  312.             this.setAttribute("checkleaveapp", checkValue);
  313.         }
  314.     }
  316.     setBeforeUnloadListener(add) {
  317.         /*
  318.         console.log(`setBeforeUnloadListener(${add})`);
  319.         */
  320.         if (add) {
  321.             window.addEventListener("beforeunload", this._onBeforeUnload);
  322.         } else {
  323.             window.removeEventListener("beforeunload", this._onBeforeUnload);
  324.         }
  325.     }
  326.     
  327.     onBeforeUnload(event) {
  328.         if (this._xmlEditor && this._xmlEditor.saveNeeded) {
  329.             event.preventDefault();
  330.             // Legacy support for older browsers.
  331.             // A function that returns true if the page has unsaved changes.
  332.             return (event.returnValue = true);
  333.         }
  334.     }
  335.     
  336.     setLeaveAppChecker() {
  337.         // Corresponds to best practice. See
  338.         // https://developer.chrome.com/docs/web-platform/page-lifecycle-api
  339.         //     #the_beforeunload_event
  340.         if (this._checkLeaveApp) {
  341.             this.setBeforeUnloadListener(this._xmlEditor.saveNeeded);
  342.         }
  343.     }
  344.     
  345.     // -------------------------------
  346.     // button2PastesText
  347.     // -------------------------------
  348.     
  349.     get button2PastesText() {
  350.         return this.getAttribute("button2pastestext") === "true";
  351.     }
  353.     /**
  354.      * A cover for {@link XMLEditor#button2PastesText}.
  355.      *
  356.      * @type {boolean}
  357.      */
  358.     set button2PastesText(pastes) {
  359.         this._xmlEditor.button2PastesText = pastes;
  360.         
  361.         const pastesValue = pastes? "true" : "false";
  362.         if (pastesValue !== this.getAttribute("button2pastestext")) {
  363.             this.setAttribute("button2pastestext", pastesValue);
  364.         }
  365.     }
  367.     // -------------------------------
  368.     // autoSave
  369.     // -------------------------------
  370.     
  371.     initAutoSave() {
  372.         let spec = this.autoSave;
  373.         let [ mode, interval, intervalMs, enabled ] =
  374.             XMLEditorApp.parseAutoSave(spec);
  376.         if (mode === null) {
  377.             spec = null;
  378.         } else {
  379.             enabled = XMLEditorApp.getPreference("autoSave", enabled);
  380.             spec = `${mode} ${interval} ${enabled? "on" : "off"}`;
  381.         }
  382.         this.autoSave = spec;
  383.     }
  384.     
  385.     static parseAutoSave(spec) {
  386.         let mode = null;
  387.         let interval = null;
  388.         let intervalMs = -1;
  389.         let enabled = false;
  390.         
  391.         if (spec) {
  392.             spec = spec.trim();
  393.             
  394.             for (let m of [ "both", "remote", "local" ]) {
  395.                 if (spec.startsWith(m)) {
  396.                     mode = m;
  397.                     interval = spec.substring(m.length).trim(); // May be empty.
  398.                     if (interval.endsWith("off")) {
  399.                         enabled = false;
  400.                         interval =
  401.                             interval.substring(0, interval.length-3).trim();
  402.                     } else if (interval.endsWith("on")) {
  403.                         enabled = true;
  404.                         interval =
  405.                             interval.substring(0, interval.length-2).trim();
  406.                     } else {
  407.                         enabled = true;
  408.                     }
  409.                     break;
  410.                 }
  411.             }
  413.             if (!FSAccess.isAvailable() &&
  414.                 (mode === "both" || mode === "local")) {
  415.                 mode = (mode === "local")? null : "remote";
  416.             }
  417.                 
  418.             if (mode !== null) {
  419.                 if (!interval) {
  420.                     interval = "30s";
  421.                 }
  422.                 
  423.                 // parseFloat ignores trailing char.
  424.                 let intervalMs = parseFloat(interval); 
  425.                 if (!isNaN(intervalMs) && intervalMs > 0) {
  426.                     if (interval.endsWith("s")) {
  427.                         intervalMs *= 1000;
  428.                     } else if (interval.endsWith("m")) {
  429.                         intervalMs *= 1000 * 60;
  430.                     } else if (interval.endsWith("h")) {
  431.                         intervalMs *= 1000 * 60 * 60;
  432.                     } else {
  433.                         intervalMs = -1;
  434.                     }
  435.                 } else {
  436.                     intervalMs = -1;
  437.                 }
  438.             
  439.                 if (intervalMs <= 0) {
  440.                     mode = null;
  441.                 } else {
  442.                     if (intervalMs < 10000) {
  443.                         intervalMs = 10000;
  444.                         interval = "10s";
  445.                     }
  446.                 }
  447.             }
  448.         }
  450.         return [ mode, interval, intervalMs, enabled ];
  451.     }
  452.     
  453.     get autoSave() {
  454.         return this.getAttribute("autosave");
  455.     }
  457.     /**
  458.      * Get/set the <code>autoSave</code> property of this 
  459.      * XML editor application.
  460.      * <p>Default: none; files are not automatically saved.
  461.      * <p>The value of this property is a string which has 
  462.      * the following syntax:
  463.      * <pre>value -> mode [ S interval ]? [ S enabled ]?
  464.      *mode -> local|remote|both 
  465.      *interval -> strictly_positive_number s|m|h
  466.      *enabled -> on|off</pre>
  467.      * <p>Examples: <code>"remote"</code>, <code>"both 2m"</code>, 
  468.      * <code>"remote 30s on"</code>, <code>"both off"</code>.
  469.      * <p>Autosave modes are:
  470.      * <ul>
  471.      * <li><b>local</b>: automatically save local files 
  472.      * (when this is technically possible, i.e. on Chrome, not on Firefox).
  473.      * <li><b>remote</b>: automatically save remote files.
  474.      * <li><b>both</b>: automatically save both local and remote files.
  475.      * </ul>
  476.       * <p>Autosave interval units are:
  477.      * <ul>
  478.      * <li><b>s</b>: seconds.
  479.      * <li><b>m</b>: minutes.
  480.      * <li><b>h</b>: hours.
  481.      * </ul>
  482.      * <p>Default interval is <code>"30s"</code>. 
  483.      * Minimal interval is <code>"10s"</code>.
  484.      * <p>The default value of <i>enabled</i> is <code>"on"</code>. This flag
  485.      * specifies whether the autosave feature is <em>initially</em> enabled.
  486.      * User may change this setting at anytime using the UI.
  487.      * 
  488.      * @type {string}
  489.      */
  490.     set autoSave(spec) {
  491.         if (this._autoSave !== null) {
  492.             this._autoSave.dispose();
  493.             this._autoSave = null;
  494.         }
  496.         // ---
  497.         
  498.         let [ mode, interval, intervalMs, enabled ] =
  499.             XMLEditorApp.parseAutoSave(spec);
  501.         if (mode === null) {
  502.             this.removeAttribute("autosave");
  503.             XMLEditorApp.setPreference("autoSave", null);
  504.         } else {
  505.             spec = `${mode} ${interval} ${enabled? "on" : "off"}`;
  506.             this.setAttribute("autosave", spec);
  507.             XMLEditorApp.setPreference("autoSave", enabled);
  508.             
  509.             if (enabled) {
  510.                this._autoSave = new AutoSave(this._xmlEditor, mode, intervalMs);
  511.             }
  512.         }
  513.     }
  515.     // -------------------------------
  516.     // User preferences
  517.     // -------------------------------
  518.     
  519.     static getPreference(key, defaultValue) {
  520.         let prefs = XMLEditorApp.getPreferences();
  521.         if (key in prefs) {
  522.             return prefs[key];
  523.         } else {
  524.             return defaultValue;
  525.         }
  526.     }
  528.     static getPreferences() {
  529.         let prefs = null;
  530.         let data = window.localStorage.getItem("XXE.XMLEditorApp.preferences");
  531.         if (data !== null) {
  532.             prefs = JSON.parse(data);
  533.         }
  534.         if (prefs === null || typeof prefs !== "object") {
  535.             prefs = {};
  536.         }
  537.         
  538.         return prefs;
  539.     }
  540.     
  541.     static setPreference(key, value) {
  542.         let prefs = XMLEditorApp.getPreferences();
  543.         if (value === null) {
  544.             delete prefs[key];
  545.         } else {
  546.             prefs[key] = value;
  547.         }
  548.         
  549.         if (Object.keys(prefs).length === 0) {
  550.             window.localStorage.removeItem("XXE.XMLEditorApp.preferences");
  551.         } else {
  552.             window.localStorage.setItem("XXE.XMLEditorApp.preferences",
  553.                                         JSON.stringify(prefs));
  554.         }
  555.     }
  557.     // -----------------------------------------------------------------------
  558.     // Implementation
  559.     // -----------------------------------------------------------------------
  561.     // -------------------------------
  562.     // The indicator as a button
  563.     // -------------------------------
  564.     
  565.     onIndicatorClick(event) {
  566.         const mod = PLATFORM_IS_MAC_OS? event.metaKey : event.ctrlKey;
  567.         if (mod) {
  568.             if (this._indicator.classList.contains("xxe-app-logging")) {
  569.                 this._indicator.classList.remove("xxe-app-logging");
  570.                 
  571.                 this._xmlEditor.removeRequestListener(this._onAnyRequest);
  572.                 for (let eventType of XMLEditor.EVENT_TYPES) {
  573.                     this._xmlEditor.removeEventListener(eventType,
  574.                                                         this._onAnyEvent);
  575.                 }
  576.             } else {
  577.                 this._indicator.classList.add("xxe-app-logging");
  578.                 
  579.                 this._xmlEditor.addRequestListener(this._onAnyRequest);
  580.                 for (let eventType of XMLEditor.EVENT_TYPES) {
  581.                     this._xmlEditor.addEventListener(eventType,
  582.                                                      this._onAnyEvent);
  583.                 }
  584.             }
  585.         }
  586.     }
  588.     onAnyRequest(autoConnect, requestName, requestArgs, response) {
  589.         let reqInfo;
  590.         if (response !== undefined) {
  591.             reqInfo = "\u25C0 " + requestName; // BLACK LEFT-POINTING TRIANGLE
  592.         } else {
  593.             if (autoConnect) {
  594.                 reqInfo = "autoConnect\u25B6 ";
  595.             } else {
  596.                 reqInfo = "\u25B6 "; // BLACK RIGHT-POINTING TRIANGLE
  597.             }
  598.             reqInfo += requestName;
  599.         }
  600.         
  601.         reqInfo += JSON.stringify(requestArgs, XMLEditorApp.jsonReplacer, 4);
  602.         
  603.         if (response !== undefined) {
  604.             reqInfo += " \u2192 "; // RIGHT ARROW
  605.             if (response instanceof Error) {
  606.                 reqInfo += "Error: " + response.toString();
  607.             } else {
  608.                 reqInfo +=
  609.                     JSON.stringify(response, XMLEditorApp.jsonReplacer, 4);
  610.             }
  611.         }
  612.         
  613.         this._xmlEditor.showStatus(reqInfo, /*autoErase*/ true);
  614.     }
  616.     static jsonReplacer(key, value) {
  617.         if (value instanceof Blob) {
  618.             let info = "(" + value.size + " bytes";
  619.             if (value.type) {
  620.                 info += ";" + value.type;
  621.             }
  622.             info += ")";
  623.             return info;
  624.         } else if (value instanceof ArrayBuffer ||
  625.                    ArrayBuffer.isView(value)) { // Typed array or DataView
  626.             return "[" + value.byteLength + " bytes]";
  627.         } else {
  628.             return value;
  629.         }
  630.     }
  631.     
  632.     onAnyEvent(event) {
  633.         // Some events like DocumentOpenedEvent may be quite big.
  634.         let text = event.toString();
  635.         if (text.length > 10000) {
  636.             text = text.substring(0, 5000) + "\u2026" +
  637.                 text.substring(text.length-4999);
  638.         }
  639.         
  640.         // BLACK UP-POINTING TRIANGLE
  641.         this._xmlEditor.showStatus("\u25B2 " + text, /*autoErase*/ true);
  642.     }
  643.     
  644.     // -------------------------------
  645.     // App menu
  646.     // -------------------------------
  647.     
  648.     onMenuButtonClick(event) {
  649.         const menuItems = [
  650.             // #0
  651.             { type: "submenu", text: "Options", name: "optionsMenu",
  652.               items: [
  653.                   { type: "checkbox", text: "Autosave",
  654.                     name: "autoSaveToggle", selected: false, enabled: false }
  655.               ] },
  656.             // #1
  657.             { separator: true,
  658.               text: "Help", name: "help" },
  659.             // #2
  660.             { separator: true,
  661.               text: "Show Element Reference", name: "elementReference" },
  662.             // #3
  663.             { text: "Show Content Model", name: "contentModel" },
  664.             // #4
  665.             { separator: true,
  666.               text: "Mouse and Keyboard Bindings", name: "bindings" },
  667.             // #5
  668.             { separator: true,
  669.               text: `About ${XMLEditorApp.NAME}`, name: "about" }
  670.         ];
  672.         let autoSaving = this.autoSave;
  673.         if (autoSaving !== null) {
  674.             const optionItems = menuItems[0].items;
  675.             optionItems[0].enabled = true; // autoSaveToggle
  676.             if (autoSaving.endsWith("on")) {
  677.                 optionItems[0].selected = true;
  678.             }
  679.         }
  680.         
  681.         if (this._xmlEditor.documentIsOpened) {
  682.             if (!this._xmlEditor.configurationName) {
  683.                 // Simplification: assume that all opened documents having
  684.                 // a configuration have their "$c elementReference"
  685.                 // system property set.
  686.                 menuItems[2].enabled = false; 
  687.             }
  688.             // Simplification: showContentModel always enabled.
  689.             // Should be disabled when opened document is not
  690.             // contrained by a grammar.
  691.         } else {
  692.             menuItems[2].enabled = false; // elementReference
  693.             menuItems[3].enabled = false; // contentModel
  694.             menuItems[4].enabled = false; // bindings
  695.         }
  696.         
  697.         this.showButtonMenu(menuItems, this._menuButton, "comboboxmenu");
  698.     }
  700.     showButtonMenu(menuItems, button, position="menu") {
  701.         const menu = XUI.Menu.create(menuItems);
  702.         menu.addEventListener("menuitemselected",
  703.                               this._onButtonMenuItemSelected);
  704.         menu.open(position, button);
  705.     }
  706.     
  707.     onButtonMenuItemSelected(event) {
  708.         switch (event.xuiMenuItem.name) {
  709.         case "newDocument":
  710.             XMLEditorApp.newDocument(this._xmlEditor);
  711.             break;
  712.         case "newRemoteFile":
  713.             XMLEditorApp.newRemoteFile(this._xmlEditor);
  714.             break;
  715.             
  716.         case "openDocument":
  717.             XMLEditorApp.openDocument(this._xmlEditor);
  718.             break;
  719.         case "openRemoteFile":
  720.             XMLEditorApp.openRemoteFile(this._xmlEditor);
  721.             break;
  722.             
  723.         case "autoSaveToggle":
  724.             this.toggleAutoSave();
  725.             break;
  726.         case "help":
  727.             this.showHelp();
  728.             break;
  729.         case "elementReference":
  730.             this.showElementReference();
  731.             break;
  732.         case "contentModel":
  733.             this.showContentModel();
  734.             break;
  735.         case "bindings":
  736.             XUI.Alert.showInfo(this.getBindingsText(), this);
  737.             break;
  738.         case "about":
  739.             XUI.Alert.showInfo(XMLEditorApp.ABOUT, this);
  740.             break;
  741.         }
  742.     }
  743.     
  744.     toggleAutoSave() {
  745.         let autoSaving = this.autoSave;
  746.         if (autoSaving !== null) {
  747.             let toggled = false;
  748.             if (autoSaving.endsWith("on")) {
  749.                 autoSaving =
  750.                     autoSaving.substring(0, autoSaving.length-2) + "off";
  751.                 toggled = true;
  752.             } else if (autoSaving.endsWith("off")) {
  753.                 autoSaving =
  754.                     autoSaving.substring(0, autoSaving.length-3) + "on";
  755.                 toggled = true;
  756.             }
  758.             if (toggled) {
  759.                 this.autoSave = autoSaving;
  760.                 if (this._xmlEditor.documentIsOpened) {
  761.                     this.showAutoSaving(autoSaving.endsWith("on"));
  762.                 }
  763.             }
  764.         }
  765.     }
  766.     
  767.     showHelp() {
  768.         const helpURL =
  769.             "https://www.xmlmind.com/xmleditor/_web/doc/manual/wh/basics.html";
  770.         
  771.         // Direct user action: no problem with the popup blocker of the browser.
  772.         window.open(helpURL, "xxewOnlineHelp");
  773.     }
  774.     
  775.     showElementReference() {
  776.         // Doing it this way prevents window.open from being blocked by the
  777.         // popup blocker of the browser (Firefox only?).
  778.         const helpWin = window.open("", "xxewElementReference");
  779.         if (!helpWin) {
  780.             docView.showStatus(
  781.                 "Could not open window containing element reference.",
  782.                 /*autoErase*/ true);
  783.             return;
  784.         }
  785.         helpWin.focus(); // If "xxewElementReference" already opened.
  786.         
  787.         const docView = this._xmlEditor.documentView;
  788.         docView.executeCommand(EXECUTE_NORMAL, "showElementReference", null)
  789.             .then((result) => {
  790.                 if (CommandResult.isDone(result) && result.value !== null) {
  791.                     helpWin.location = result.value;
  792.                 } else {
  793.                     docView.showStatus("Element reference not available.",
  794.                                        /*autoErase*/ true);
  795.                     helpWin.close();
  796.                 }
  797.             });
  798.             // Catch not useful. DocumentView.executeCommand handles errors
  799.             // by returning a null Promise.
  800.     }
  801.     
  802.     showContentModel() {
  803.         const docView = this._xmlEditor.documentView;
  804.         docView.executeCommand(EXECUTE_NORMAL, "showContentModel", null)
  805.             .then((result) => {
  806.                 if (result === null ||
  807.                     result.status === COMMAND_RESULT_FAILED) {
  808.                     docView.showStatus(
  809.                         "Cannot show the content model of selected element.",
  810.                         /*autoErase*/ true);
  811.                 }
  812.             });
  813.     }
  814.     
  815.     getBindingsText() {
  816.         const bindings = this._xmlEditor.documentView.bindings;
  817.         if (bindings === null) {
  818.             // Should not happen if a document is opened.
  819.             return "???";
  820.         }
  821.         
  822.         let rows = [];
  823.         let rows2 = [];
  824.         for (let binding of bindings) {
  825.             let row = [ binding.getUserInputLabel(),
  826.                         binding.commandName, binding.commandParams ];
  827.             if (binding.userInput instanceof AppEvent) {
  828.                 rows2.push(row);
  829.             } else {
  830.                 rows.push(row);
  831.             }
  832.         }
  833.         rows.sort((r1, r2) => { return r1[0].localeCompare(r2[0], "en"); });
  834.         if (rows2.length > 0) {
  835.             rows2.sort((r1, r2) => {return r1[0].localeCompare(r2[0], "en");});
  836.             rows.push(...rows2);
  837.         }
  839.         // ---
  840.         
  841.         let html = XMLEditorApp.BINDINGS;
  842.         let pos = html.indexOf("</tbody>");
  843.         if (pos > 0) {
  844.             const tdStartTag = `<td ${XMLEditorApp.BINDINGS_TD_STYLE}>`;
  846.             let tr = "";
  847.             let trCount = 0;
  848.             for (let row of rows) {
  849.                 tr += "<tr";
  850.                 if (trCount % 2 === 1) {
  851.                     tr += " style=\"background-color:#FFFFE0;\""; //Light yellow
  852.                 }
  853.                 tr += ">\n";
  854.                 
  855.                 tr += tdStartTag;
  856.                 tr += XUI.Util.escapeHTML(row[0]);
  857.                 tr += "</td>";
  858.                 tr += tdStartTag;
  859.                 tr += XUI.Util.escapeHTML(row[1]);
  860.                 tr += "</td>";
  861.                 tr += tdStartTag;
  862.                 if (row[2] === null) {
  863.                     tr += "\u00A0"; // nbsp
  864.                 } else {
  865.                     tr += XUI.Util.escapeHTML(row[2]);
  866.                 }
  867.                 tr += "</td>";
  868.                 tr += "</tr>\n";
  870.                 ++trCount;
  871.             }
  873.             html = html.substring(0, pos) + tr + html.substring(pos);
  874.         }
  876.         return html;
  877.     }
  878.     
  879.     // -------------------------------
  880.     // New button
  881.     // -------------------------------
  882.     
  883.     onNewButtonClick(event) {
  884.         switch (this.documentStorage) {
  885.         case "local":
  886.             XMLEditorApp.newDocument(this._xmlEditor);
  887.             break;
  888.         case "remote":
  889.             XMLEditorApp.newRemoteFile(this._xmlEditor);
  890.             break;
  891.         default:
  892.             {
  893.                 const menuItems = [
  894.                     { text: "New Local Document\u2026", name: "newDocument" },
  895.                     { text: "New Remote Document\u2026", name: "newRemoteFile" }
  896.                 ];
  897.                 this.showButtonMenu(menuItems, this._newButton);
  898.             }
  899.             break;
  900.         }
  901.     }
  902.     
  903.     // -------------------------------
  904.     // Open button
  905.     // -------------------------------
  906.     
  907.     onOpenButtonClick(event) {
  908.         switch (this.documentStorage) {
  909.         case "local":
  910.             XMLEditorApp.openDocument(this._xmlEditor);
  911.             break;
  912.         case "remote":
  913.             XMLEditorApp.openRemoteFile(this._xmlEditor);
  914.             break;
  915.         default:
  916.             {
  917.                 const menuItems = [
  918.                   { text: "Open Local Document\u2026", name: "openDocument" },
  919.                   { text: "Open Remote Document\u2026", name: "openRemoteFile" }
  920.                 ];
  921.                 this.showButtonMenu(menuItems, this._openButton);
  922.             }
  923.             break;
  924.         }
  925.     }
  926.     
  927.     // -------------------------------
  928.     // Save button
  929.     // -------------------------------
  930.     
  931.     onSaveButtonClick(event) {
  932.         XMLEditorApp.saveDocument(this._xmlEditor)
  933.             .then((saved) => {
  934.                 if (saved) {
  935.                     this._xmlEditor.showStatus(
  936.                         `Document saved to "${this._xmlEditor.documentURI}".`);
  937.                 }
  938.             });
  939.     }
  940.     
  941.     // -------------------------------
  942.     // Save As button
  943.     // -------------------------------
  944.     
  945.     onSaveAsButtonClick(event) {
  946.         XMLEditorApp.saveDocumentAs(this._xmlEditor)
  947.             .then((savedAs) => {
  948.                 if (savedAs) {
  949.                     this._xmlEditor.showStatus(
  950.                         `Document saved to "${this._xmlEditor.documentURI}".`);
  951.                 }
  952.             });
  953.     }
  954.     
  955.     // -------------------------------
  956.     // Close button
  957.     // -------------------------------
  958.     
  959.     onCloseButtonClick(event) {
  960.         XMLEditorApp.closeDocument(this._xmlEditor);
  961.     }
  962.     
  963.     // -------------------------------
  964.     // XMLEditor event handlers
  965.     // -------------------------------
  966.     
  967.     onConnected(event) {
  968.         this._indicator.classList.add("xxe-app-connected");
  969.         
  970.         this._indicator.setAttribute("title", `Connected to
  971. ${this._xmlEditor.serverURL}
  972. (${(PLATFORM_IS_MAC_OS? "Command" : "Ctrl")}-click to toggle logging \
  973. requests, responses and events.)`);
  974.     }
  976.     onDisconnected(event) {
  977.         this._indicator.classList.remove("xxe-app-connected"); 
  978.        
  979.         this._indicator.setAttribute("title", `Disconnected from
  980. ${this._xmlEditor.serverURL}
  981. (${(PLATFORM_IS_MAC_OS? "Command" : "Ctrl")}-click to toggle logging \
  982. requests, responses and events.)`);
  983.         
  984.         this.enableButtons();
  985.     }
  987.     onDocumentOpened(event) {
  988.         // On document opened or created or recovered or shared.
  989.         this.showAutoSaving(true);
  990.         
  991.         this.removeSaveHint();
  992.         this.addSaveHint();
  993.         
  994.         this.updateTitle();
  995.         this.enableButtons();
  996.         this.setLeaveAppChecker();
  997.     }
  999.     showAutoSaving(show) {
  1000.         let saveIcon = this._saveButton.firstElementChild;
  1001.         if (show && this._autoSave !== null && this._autoSave.activable) {
  1002.             saveIcon.classList.replace("xui-saveDocument-16",
  1003.                                        "xui-autoSaveDocument-16");
  1004.             saveIcon.setAttribute("title", "Autosave enabled.");
  1005.         } else {
  1006.             saveIcon.classList.replace("xui-autoSaveDocument-16",
  1007.                                        "xui-saveDocument-16");
  1008.             saveIcon.removeAttribute("title");
  1009.         }
  1010.     }
  1011.     
  1012.     addSaveHint() {
  1013.         if (!this._xmlEditor.isRemoteFile) {
  1014.             let tooltip;
  1015.             let addClass = null;
  1016.             if (FSAccess.isAvailable()) {
  1017.                 tooltip = `Please note that \
  1018. the first time you'll use this "Save" button,\n\
  1019. you may be asked to grant your permission to save this file to disk.`
  1020.                 addClass = "xxe-app-save-info";
  1021.             } else {
  1022.                 tooltip = `Please note that \
  1023. DIRECTLY SAVING A FILE TO DISK IS NOT SUPPORTED\n\
  1024. by this browser. Therefore "Save" is here equivalent to "Save As".`
  1025.                 addClass = "xxe-app-save-warn";
  1026.             }
  1028.             let saveHint = XMLEditorApp.SAVE_HINT_TEMPLATE.content
  1029.                 .cloneNode(true).firstElementChild;
  1030.             saveHint.textContent = XUI.StockIcon["comment"];
  1031.             saveHint.classList.add(addClass);
  1032.             this._saveButton.appendChild(saveHint);
  1033.             this._saveButton.setAttribute("title", tooltip);
  1034.         }
  1035.     }
  1037.     removeSaveHint() {
  1038.         let saveHint = this._saveButton.querySelector(".xxe-app-save-hint");
  1039.         if (saveHint !== null) {
  1040.             this._saveButton.removeChild(saveHint);
  1041.             this._saveButton.removeAttribute("title");
  1042.         }
  1043.     }
  1044.     
  1045.     onDocumentSavedAs(event) {
  1046.         this.updateTitle();
  1047.         this.enableButtons();
  1048.     }
  1049.     
  1050.     onDocumentClosed(event) {
  1051.         this.updateTitle();
  1052.         this.enableButtons();
  1053.         this.setLeaveAppChecker();
  1054.         
  1055.         this.showAutoSaving(false);
  1056.         
  1057.         this.removeSaveHint();
  1058.     }
  1059.     
  1060.     onSaveStateChanged(event) {
  1061.         this.updateTitle();
  1062.         this.enableButtons();
  1063.         this.setLeaveAppChecker();
  1064.     }
  1065.     
  1066.     onReadOnlyStateChanged(event) {
  1067.         this.updateTitle();
  1068.     }
  1070.     updateTitle() {
  1071.         let title = XMLEditorApp.TITLE;
  1072.         let style = "bold";
  1073.         
  1074.         if (this._xmlEditor.documentIsOpened) {
  1075.             title = this._xmlEditor.documentURI;
  1076.             style = "normal";
  1078.             if (this._xmlEditor.saveNeeded) {
  1079.                 title += " (modified)";
  1080.             }
  1082.             if (this._xmlEditor.readOnlyDocument) {
  1083.                 title += " (read-only)";
  1084.             }
  1085.         }
  1087.         if (title !== this._title.textContent) {
  1088.             this._title.textContent = title;
  1089.             this._title.style.fontWeight = style;
  1090.         }
  1091.     }
  1092.     
  1093.     enableButtons() {
  1094.         const connected = this._xmlEditor.connected;
  1095.         const docOpened = this._xmlEditor.documentIsOpened;
  1096.         
  1097.         XMLEditorApp.enableButton(this._saveButton,
  1098.                                   connected && docOpened &&
  1099.                                   this._xmlEditor.saveNeeded);
  1100.         XMLEditorApp.enableButton(this._saveAsButton, connected && docOpened);
  1101.         XMLEditorApp.enableButton(this._closeButton, connected && docOpened);
  1102.     }
  1103.     
  1104.     static enableButton(button, enabled) {
  1105.         if (enabled) {
  1106.             if (button.hasAttribute("disabled")) {
  1107.                 button.removeAttribute("disabled");
  1108.                 button.classList.remove("xui-control-disabled");
  1109.             }
  1110.         } else {
  1111.             if (!button.hasAttribute("disabled")) {
  1112.                 button.setAttribute("disabled", "disabled");
  1113.                 button.classList.add("xui-control-disabled");
  1114.             }
  1115.         }
  1116.     }
  1117.     
  1118.     // =======================================================================
  1119.     // Interactive actions (may be used independently from XMLEditorApp)
  1120.     // =======================================================================
  1122.     // ------------------------------------
  1123.     // newDocument, newRemoteFile
  1124.     // ------------------------------------
  1126.     /**
  1127.      * Open a newly created <em>local</em> document in specified XML editor.
  1128.      * <p>This static method in invoked by 
  1129.      * <b>New</b>|<b>New Local Document</b>
  1130.      * but may be used independently from <code>XMLEditorApp</code>.
  1131.      *
  1132.      * @param {XMLEditor} xmlEditor - the XML editor.
  1133.      */
  1134.     static newDocument(xmlEditor) {
  1135.         return XMLEditorApp.doNewDocument(xmlEditor, /*remote*/ false);
  1136.     }
  1137.     
  1138.     /**
  1139.      * Open a newly created <em>remote</em> document in specified XML editor.
  1140.      * <p>This static method in invoked by 
  1141.      * <b>New</b>|<b>New Remote Document</b>
  1142.      * but may be used independently from <code>XMLEditorApp</code>.
  1143.      *
  1144.      * @param {XMLEditor} xmlEditor - the XML editor.
  1145.      */
  1146.     static newRemoteFile(xmlEditor) {
  1147.         return XMLEditorApp.doNewDocument(xmlEditor, /*remote*/ true);
  1148.     }
  1149.     
  1150.     static doNewDocument(xmlEditor, remote) {
  1151.         let selectedTemplate = [];
  1152.         
  1153.         return XMLEditorApp.confirmDiscardChanges(xmlEditor)
  1154.             .then((confirmed) => {
  1155.                 if (confirmed) {
  1156.                     return NewDocumentDialog.showDialog(xmlEditor);
  1157.                 } else {
  1158.                     return null; // Template not selected.
  1159.                 }
  1160.             })
  1161.             .then((tmpl) => {
  1162.                 if (tmpl === null) {
  1163.                     // Canceled by user during any of the 2 previous steps.
  1164.                     return false; // Document not closed.
  1165.                 } else {
  1166.                     selectedTemplate.push(...tmpl);
  1167.                     
  1168.                     return XMLEditorApp.doCloseDocument(xmlEditor);
  1169.                 }
  1170.             })
  1171.             .then((closed) => {
  1172.                 if (closed) {
  1173.                     let [category, template] = selectedTemplate;
  1174.                     if (remote) {
  1175.                         return xmlEditor.newRemoteFile(category, template);
  1176.                     } else {
  1177.                         return xmlEditor.newDocument(category, template);
  1178.                     }
  1179.                 } else {
  1180.                     return false;
  1181.                 }
  1182.             })
  1183.             .catch((error) => {
  1184.                 XUI.Alert.showError(`Cannot create document:\n${error}`,
  1185.                                     xmlEditor);
  1186.                 return false;
  1187.             });
  1188.     }
  1189.     
  1190.     static confirmDiscardChanges(xmlEditor) {
  1191.         if (!xmlEditor.documentIsOpened || !xmlEditor.saveNeeded) {
  1192.             // No changes.
  1193.             return Promise.resolve(true);
  1194.         }
  1196.         return XUI.Confirm.showConfirm(
  1197.             `"${xmlEditor.documentURI}" has been modified\nDiscard changes?`,
  1198.             /*reference*/ xmlEditor);
  1199.     }
  1200.     
  1201.     // ------------------------------------
  1202.     // openDocument, openRemoteFile
  1203.     // ------------------------------------
  1205.     /**
  1206.      * Open an existing <em>local</em> document in specified XML editor.
  1207.      * <p>This static method in invoked by 
  1208.      * <b>Open</b>|<b>Open Local Document</b>
  1209.      * but may be used independently from <code>XMLEditorApp</code>.
  1210.      *
  1211.      * @param {XMLEditor} xmlEditor - the XML editor.
  1212.      */
  1213.     static openDocument(xmlEditor) {
  1214.         return XMLEditorApp.doOpenDocument(xmlEditor, /*remote*/ false);
  1215.     }
  1216.     
  1217.     /**
  1218.      * Open an existing <em>remote</em> document in specified XML editor.
  1219.      * <p>This static method in invoked by 
  1220.      * <b>Open</b>|<b>Open Remote Document</b>
  1221.      * but may be used independently from <code>XMLEditorApp</code>.
  1222.      *
  1223.      * @param {XMLEditor} xmlEditor - the XML editor.
  1224.      */
  1225.     static openRemoteFile(xmlEditor) {
  1226.         return XMLEditorApp.doOpenDocument(xmlEditor, /*remote*/ true);
  1227.     }
  1228.     
  1229.     static doOpenDocument(xmlEditor, remote) {
  1230.         const options = {
  1231.             title: "Open Document",
  1232.             extensions: XMLEditorApp.ACCEPTED_FILE_EXTENSIONS,
  1233.             option: [ "readOnly", false,
  1234.                       "Open corresponding document in read-only mode" ]
  1235.         };
  1237.         let chosenFile = {};
  1238.         
  1239.         return XMLEditorApp.confirmDiscardChanges(xmlEditor)
  1240.             .then((confirmed) => {
  1241.                 if (confirmed) {
  1242.                     if (remote) {
  1243.                         return RemoteFileDialog.showDialog(xmlEditor, options);
  1244.                     } else {
  1245.                         return LocalFileDialog.showDialog(xmlEditor, options);
  1246.                     }
  1247.                 } else {
  1248.                     return null; // File not chosen.
  1249.                 }
  1250.             })
  1251.             .then((choice) => {
  1252.                 if (choice === null) {
  1253.                     // Canceled by user during any of the 2 previous steps.
  1254.                     return false; // Document not closed.
  1255.                 } else {
  1256.                     Object.assign(chosenFile, choice);
  1257.                     
  1258.                     return XMLEditorApp.doCloseDocument(xmlEditor);
  1259.                 }
  1260.             })
  1261.             .then((closed) => {
  1262.                 if (closed) {
  1263.                     let readOnly =
  1264.                         !chosenFile.readOnly? false : chosenFile.readOnly;
  1265.                     if (remote) {
  1266.                         return xmlEditor.openRemoteFile(chosenFile.uri,
  1267.                                                         readOnly);
  1268.                     } else {
  1269.                         return xmlEditor.openDocument(chosenFile.file,
  1270.                                                       chosenFile.uri, readOnly);
  1271.                     }
  1272.                 } else {
  1273.                     return false; // Old doc not closed => new doc not opened.
  1274.                 }
  1275.             })
  1276.             .then((opened) => {
  1277.                 if (opened) {
  1278.                     if (!remote && chosenFile.file.handle) {
  1279.                         // chosenFile.file.handle is needed to save a local
  1280.                         // file without prompting the user.
  1281.                         // (This handle is lost when recovering a
  1282.                         // local document. This just means that the user
  1283.                         // will be prompted at the first save.)
  1285.                         // This "set handle" works because
  1286.                         // DocumentOpenedEvents (initalizing the state of
  1287.                         // newly opened document state) are received *before*
  1288.                         // the result of request openDocument.
  1289.                         xmlEditor.documentFileHandle = chosenFile.file.handle;
  1290.                     } else {
  1291.                         xmlEditor.documentFileHandle = null;
  1292.                     }
  1293.                 }
  1294.                 return opened;
  1295.             })
  1296.             .catch((error) => {
  1297.                 XUI.Alert.showError(`Cannot open document:\n${error}`,
  1298.                                     xmlEditor);
  1299.                 return false;
  1300.             });
  1301.     }
  1302.     
  1303.     // ------------------------------------
  1304.     // saveDocument
  1305.     // ------------------------------------
  1307.     /**
  1308.      * Save the document being edited in specified XML editor.
  1309.      * <p>This static method in invoked by button <b>Save</b>
  1310.      * but may be used independently from <code>XMLEditorApp</code>.
  1311.      *
  1312.      * @param {XMLEditor} xmlEditor - the XML editor.
  1313.      */
  1314.     static saveDocument(xmlEditor) {
  1315.         if (!xmlEditor.documentIsOpened || !xmlEditor.saveNeeded) {
  1316.             // Nothing to do.
  1317.             return Promise.resolve(false);
  1318.         }
  1320.         const remote = xmlEditor.isRemoteFile;
  1321.         if (xmlEditor.saveAsNeeded ||
  1322.             (!remote && xmlEditor.documentFileHandle === null)) {
  1323.             return XMLEditorApp.saveDocumentAs(xmlEditor);
  1324.         }
  1326.         return XMLEditorApp.doSaveDocument(xmlEditor, remote)
  1327.             .catch((error) => {
  1328.                 XUI.Alert.showError(`Could not save document:\n${error}`,
  1329.                                     xmlEditor);
  1330.                 return false;
  1331.             });
  1332.     }
  1333.     
  1334.     static doSaveDocument(xmlEditor, remote) {
  1335.         return XMLEditorApp.getDocumentContent(xmlEditor, remote)
  1336.             .then((docContent) => {
  1337.                 if (remote) {
  1338.                     // N/A.
  1339.                     return null;
  1340.                 } else {
  1341.                     // Non interactive.
  1342.                     return FSAccess.fileSave(docContent, /*options*/ {},
  1343.                                              xmlEditor.documentFileHandle,
  1344.                                              /*throwIfUnusableHandle*/ true);
  1345.                 }
  1346.             })
  1347.             .then((savedFileHandle) => {
  1348.                 if (!remote &&
  1349.                     savedFileHandle !== xmlEditor.documentFileHandle) {
  1350.                     throw new Error(`INTERNAL ERROR: expected \
  1351. document file handle=${xmlEditor.documentFileHandle}, \
  1352. got handle=${savedFileHandle}`);
  1353.                 }
  1354.                 
  1355.                 return xmlEditor.saveDocument();
  1356.             })
  1357.     }
  1358.     
  1359.     static getDocumentContent(xmlEditor, remote) {
  1360.         if (remote) {
  1361.             // N/A.
  1362.             return Promise.resolve(null);
  1363.         }
  1364.         
  1365.         return xmlEditor.getDocument() // formattingOptions are found in config.
  1366.             .then((xmlSource) => {
  1367.                 if (xmlSource) {
  1368.                     // We only support "UTF-8" here.
  1369.                     xmlSource = xmlSource.replace(
  1370.                         /encoding=(('[^']*')|("[^"]*"))\s*\?>/,
  1371.                         "encoding=\"UTF-8\"?>");
  1372.                     
  1373.                     return new Blob([ xmlSource ]);
  1374.                 } else {
  1375.                     // Should not happen.
  1376.                     throw new Error("no document content");
  1377.                 }
  1378.             });
  1379.     }
  1380.     
  1381.     // ------------------------------------
  1382.     // saveDocumentAs
  1383.     // ------------------------------------
  1385.     /**
  1386.      * Save the document being edited in specified XML editor 
  1387.      * to a different location, the user being prompted to specify 
  1388.      * this location.
  1389.      * <p>This static method in invoked by button <b>Save As</b>
  1390.      * but may be used independently from <code>XMLEditorApp</code>.
  1391.      *
  1392.      * @param {XMLEditor} xmlEditor - the XML editor.
  1393.      */
  1394.     static saveDocumentAs(xmlEditor) {
  1395.         const remote = xmlEditor.isRemoteFile;
  1396.         const options = {
  1397.             title: "Save Document",
  1398.             extensions: XMLEditorApp.ACCEPTED_FILE_EXTENSIONS,
  1399.             templateURI: xmlEditor.documentURI
  1400.         };
  1401.         let chosenFile = {};
  1402.         
  1403.         return XMLEditorApp.getDocumentContent(xmlEditor, remote)
  1404.             .then((docContent) => {
  1405.                 if (remote) {
  1406.                     return RemoteFileDialog.showDialog(xmlEditor, options,
  1407.                                                       /*saveMode*/ true);
  1408.                 } else {
  1409.                     return LocalFileDialog.showDialog(xmlEditor, options,
  1410.                                                       /*savedData*/ docContent);
  1411.                 }
  1412.             })
  1413.             .then((choice) => {
  1414.                 if (choice === null) {
  1415.                     // Canceled by user.
  1416.                     return false; // Document not saved as.
  1417.                 } else {
  1418.                     Object.assign(chosenFile, choice);
  1419.                     
  1420.                     return xmlEditor.saveDocumentAs(chosenFile.uri);
  1421.                 }
  1422.             })
  1423.             .then((savedAs) => {
  1424.                 if (savedAs) {
  1425.                     if (!remote && chosenFile.fileHandle) {
  1426.                         xmlEditor.documentFileHandle = chosenFile.fileHandle;
  1427.                     } else {
  1428.                         xmlEditor.documentFileHandle = null;
  1429.                     }
  1430.                 }
  1431.                 return savedAs;
  1432.             })
  1433.             .catch((error) => {
  1434.                let where = !chosenFile.uri? "" : ` "${chosenFile.uri}"`;
  1435.                XUI.Alert.showError(`Cannot save document as${where}:\n${error}`,
  1436.                                    xmlEditor);
  1437.                return false;
  1438.             });
  1439.     }
  1440.     
  1441.     // ------------------------------------
  1442.     // closeDocument
  1443.     // ------------------------------------
  1445.     /**
  1446.      * Close the document being edited in specified XML editor.
  1447.      * <p>If this document has unsaved changes, the user will have to confirm
  1448.      * whether she/he really wants to discard these changes.
  1449.      * <p>This static method in invoked by button <b>Close</b>
  1450.      * but may be used independently from <code>XMLEditorApp</code>.
  1451.      *
  1452.      * @param {XMLEditor} xmlEditor - the XML editor.
  1453.      */
  1454.     static closeDocument(xmlEditor) {
  1455.         return XMLEditorApp.confirmDiscardChanges(xmlEditor)
  1456.             .then((confirmed) => {
  1457.                 if (confirmed) {
  1458.                     return XMLEditorApp.doCloseDocument(xmlEditor);
  1459.                 } else {
  1460.                     return false; // Document not closed.
  1461.                 }
  1462.             })
  1463.             .catch((error) => {
  1464.                 XUI.Alert.showError(`Cannot close document:\n${error}`,
  1465.                                     xmlEditor);
  1466.                 return false;
  1467.             });
  1468.     }
  1469.     
  1470.     static doCloseDocument(xmlEditor) {
  1471.         if (!xmlEditor.documentIsOpened) {
  1472.             return Promise.resolve(true);
  1473.         }
  1475.         return xmlEditor.closeDocument(/*discardChanges*/ true);
  1476.     }
  1477. }
  1479. XMLEditorApp.NAME = "XMLmind XML Editor";
  1481. XMLEditorApp.CLIENT_VERSION = "1.5.0";
  1483. XMLEditorApp.TITLE =
  1484.     `${XMLEditorApp.NAME} Web Edition ${XMLEditorApp.CLIENT_VERSION}`;
  1486. XMLEditorApp.SERVER_VERSION = "10.10.0";
  1488. XMLEditorApp.ABOUT = `<html><h3 style="margin-top:0;">${XMLEditorApp.NAME}
  1489. <span style="font-size:smaller;">client ${XMLEditorApp.CLIENT_VERSION} / \
  1490. server ${XMLEditorApp.SERVER_VERSION}</span></h3>
  1491. <p>Copyright (c) 2017-${(new Date()).getFullYear()} XMLmind Software, 
  1492. all rights reserved.</p>
  1493. <p>For more information, please visit<br />
  1494. www.xmlmind.com/xmleditor/</p>
  1495. `;
  1497. XMLEditorApp.BINDINGS_TD_STYLE =
  1498.     "style=\"border:1px solid #C0C0C0;padding:0.25em 0.5em;\"";
  1500. XMLEditorApp.BINDINGS = `<html><h3 style="margin-top:0;">Mouse and keyboard \
  1501. bindings</h3>
  1502. <table style="border:1px solid #C0C0C0;border-collapse:collapse;">
  1503.   <thead style="background-color:#F0F0F0;">
  1504.     <tr>
  1505.       <th ${XMLEditorApp.BINDINGS_TD_STYLE}>User input</th>
  1506.       <th ${XMLEditorApp.BINDINGS_TD_STYLE}>Command</th>
  1507.       <th ${XMLEditorApp.BINDINGS_TD_STYLE}>Parameter</th>
  1508.     </tr>
  1509.   </thead>
  1510.   <tbody></tbody>
  1511. </table>
  1512. `;
  1514. XMLEditorApp.TEMPLATE = document.createElement("template");
  1515. XMLEditorApp.TEMPLATE.innerHTML = `
  1516. <div class="xxe-app-title-bar">
  1517.   <span class="xui-control xxe-app-indicator"></span>
  1518.   <span class="xxe-app-title">XMLmind XML Editor</span>
  1519.   <span class="xxe-tool-button xxe-app-menu"></span>
  1520. </div>
  1521. <div class="xxe-app-button-bar">
  1522.   <button type="button" class="xui-control xxe-app-button"><span 
  1523.     class="xui-edit-icon-16
  1524.         xui-newDocument-16"></span><span>New</span><span>\u2026</span></button>
  1525.   <button type="button" class="xui-control xxe-app-button"><span
  1526.     class="xui-edit-icon-16
  1527.       xui-openDocument-16"></span><span>Open</span><span>\u2026</span></button>
  1528.   <button type="button" class="xui-control xxe-app-button"><span 
  1529.     class="xui-edit-icon-16
  1530.            xui-saveDocument-16"></span><span>Save</span></button>
  1531.   <button type="button" class="xui-control xxe-app-button"><span 
  1532.     class="xui-edit-icon-16
  1533.          xui-saveDocumentAs-16"></span><span>Save As\u2026</span></button>
  1534.   <button type="button" class="xui-control xxe-app-button"><span 
  1535.     class="xui-edit-icon-16
  1536.            xui-closeDocument-16"></span><span>Close</span></button>
  1537. </div>
  1538. <xxe-client></xxe-client>
  1539. `;
  1541. XMLEditorApp.SAVE_HINT_TEMPLATE = document.createElement("template");
  1542. XMLEditorApp.SAVE_HINT_TEMPLATE.innerHTML = `
  1543. <span class="xui-small-icon xxe-app-save-hint"></span>
  1544. `;
  1546. XMLEditorApp.ACCEPTED_FILE_EXTENSIONS = [
  1547.    ["XML files",
  1548.     "application/xml",
  1549.     "xml"],
  1550.    ["DocBook files",
  1551.     "application/docbook+xml",
  1552.     "xml", "dbk", "docb"],
  1553.    ["XHTML files",
  1554.     "application/xhtml+xml",
  1555.     "xhtml", "xht",
  1556.     "html", "shtml", "htm"],
  1557.    ["DITA files",
  1558.     "application/dita+xml",
  1559.     "dita", "ditamap",
  1560.     "bookmap", "ditaval"],
  1561.    ["MathML files",
  1562.     "application/mathml+xml",
  1563.     "mml"]
  1564. ];
  1566. window.customElements.define("xxe-app", XMLEditorApp);