ggrossetie · ggrossetie · Jan 23, 2018
diff --git a/app/Code.gs b/app/Code.gs
@@ -5,6 +5,8 @@ function onOpen() {
   DocumentApp.getUi().createAddonMenu()
       .addItem('Convert all', 'showDialogConvertAll')
       .addItem('Convert selection', 'showDialogConvertSelection')
+      .addSeparator()
+      .addItem('Configure converter', 'showDialogConfiguration')
       .addToUi();
 }
 
@@ -25,6 +27,15 @@ function showDialogConvertSelection() {
   showDialog();
 }
 
+function showDialogConfiguration() {
+  var ui = HtmlService.createHtmlOutputFromFile('ConfigurationPanel')
+      .setWidth(400)
+      .setHeight(300)
+      .setTitle('Converter configuration');
+
+  DocumentApp.getUi().showModalDialog(ui, 'Converter configuration');
+}
+
 /**
  * Opens a dialog containing the add-on's user interface.
  */
@@ -37,6 +48,28 @@ function showDialog() {
   DocumentApp.getUi().showModalDialog(ui, 'AsciiDoc Processor');
 }
 
+/**
+ * Gets the stored user preferences for the convert, if they exist.
+ *
+ * @return {Object} The user's preferences, if they exist.
+ */
+function getPreferences() {
+  var userProperties = PropertiesService.getUserProperties();
+  var prefs = {
+    extraSpaceAroundListing: userProperties.getProperty('extraSpaceAroundListing'),
+    explicitAnchorId: userProperties.getProperty('explicitAnchorId')
+  };
+  return prefs;
+}
+
+/**
+ * Saves user preferences for the convert.
+ */
+function savePreferences(prefs) {
+  var userProperties = PropertiesService.getUserProperties();
+  userProperties.setProperties(prefs);
+}
+
 function asciidocify() {
   var selection = DocumentApp.getActiveDocument().getSelection();
   var elements = [];

diff --git a/app/ConfigurationPanel.html b/app/ConfigurationPanel.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_top">
+    <style>
+      .is-hidden {
+        display: none !important;
+      }
+
+      body {
+        font-family: 'RobotoDraft', sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+
+      .error {
+        color: #dd4b39;
+        font-size: small;
+        margin-top: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <form>
+      <input type="checkbox" id="extraSpaceAroundListing" value=""><label for="extraSpaceAroundListing">Add an extra space around source listings</label><br/>
+      <input type="checkbox" id="explicitAnchorId" value=""><label for="explicitAnchorId">Generate an explicit anchor id on section titles</label><br/>
+      <br/>
+      <input type="button" id="save" value="Save" />
+    </form>
+    <div id="panel" class="error is-hidden">
+      <div id="message"></div>
+    </div>
+    <script>
+      (function () {
+        google.script.run
+        .withSuccessHandler(loadPreferences)
+        .withFailureHandler(unableToLoadPreferences)
+        .getPreferences();
+
+        document.getElementById('save').onclick = function () {
+          savePrefrencesAndClose();
+        };
+      })();
+
+      /**
+       * Callback function that populates the form with user preferences from the server.
+       *
+       * @param {Object} prefs The saved user preferences.
+       */
+      function loadPreferences(prefs) {
+        if (prefs.extraSpaceAroundListing) {
+          document.getElementById('extraSpaceAroundListing').checked = prefs.extraSpaceAroundListing === 'true';
+        }
+        if (prefs.explicitAnchorId) {
+          document.getElementById('explicitAnchorId').checked = prefs.explicitAnchorId === 'true';
+        }
+      }
+
+      /**
+       * Save user preferences and close this dialog.
+       */
+      function savePrefrencesAndClose() {
+        var prefs = {
+          extraSpaceAroundListing: document.getElementById('extraSpaceAroundListing').checked,
+          explicitAnchorId: document.getElementById('explicitAnchorId').checked,
+        };
+        google.script.run
+          .withSuccessHandler(close)
+          .withFailureHandler(unableToSavePreferences)
+          .savePreferences(prefs);
+      }
+
+      /**
+       * Close this dialog.
+       */
+      function close() {
+        google.script.host.close();
+      }
+
+      /**
+       * Show an error message because we were unable to save user preferences.
+       */
+      function unableToSavePreferences(errorMessage) {
+        showErrorMessage('Unable to save preferences', errorMessage);
+      }
+
+      /**
+       * Show an error message because we were unable to load user preferences.
+       */
+      function unableToLoadPreferences(errorMessage) {
+        showErrorMessage('Unable to load preferences', errorMessage);
+      }
+
+      /**
+       * Show an error message.
+       */
+      function showErrorMessage(title, errorMessage) {
+        document.getElementById('panel').classList.remove('is-hidden');
+        var titleElement = document.createElement('strong');
+        titleElement.innerText = title;
+        var errorMessageElement = document.createElement('div');
+        errorMessageElement.innerText = errorMessage;
+        var messageElement = document.getElementById('message');
+        messageElement.innerText = '';
+        messageElement.appendChild(titleElement);
+        messageElement.appendChild(errorMessageElement);
+      }
+    </script>
+  </body>
+</html>
diff --git a/app/Dialog.html b/app/Dialog.html
@@ -1,15 +1,11 @@
 <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
 <style>
-@-webkit-keyframes spinAround {
-  from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(359deg);
-            transform: rotate(359deg);
-  }
+body {
+  font-family: 'RobotoDraft', sans-serif;
+  margin: 0;
+  padding: 0;
 }
+
 @keyframes spinAround {
   from {
     -webkit-transform: rotate(0deg);
@@ -34,7 +30,7 @@
   margin-right: 1em;
 }
 
-#panel {
+#message-panel {
   display: flex;
 }
 
@@ -47,56 +43,73 @@
   width: 100%
 }
 
-h2 {
-  color: #363636;
-}
-
 .is-hidden {
   display: none !important;
 }
+
+.error {
+  color: #dd4b39;
+  font-size: small;
+  margin-top: 8px;
+}
 </style>
 
 <div>
-  <div id="panel" class="block">
+  <div id="message-panel" class="block">
     <div id="spinner"></div>
     <div id="message">Converting...</div>
   </div>
   <div>
     <textarea class="is-hidden" id="asciidoc-text" rows="20"></textarea>
   </div>
+  <div id="error-panel" class="error is-hidden"></div>
 </div>
 
 <script>
-  // Runs a server-side function to generate AsciiDoc
-  function convertAsciiDoc() {
+  (function () {
+    // Runs a server-side function to generate AsciiDoc
     google.script.run
-        .withSuccessHandler(
-          function(asciidoc) {
-            document.getElementById('spinner').classList.add('is-hidden');
-            var asciidocTextElement = document.getElementById('asciidoc-text');
-            asciidocTextElement.classList.remove('is-hidden');
-            asciidocTextElement.value = asciidoc;
-            var titleElement = document.createElement('h2');
-            titleElement.innerText = 'Result';
-            var messageElement = document.getElementById('message');
-            messageElement.innerText = '';
-            messageElement.appendChild(titleElement);
-          })
-        .withFailureHandler(
-          function(errorMessage) {
-            document.getElementById('spinner').classList.add('is-hidden');
-            var titleElement = document.createElement('h2');
-            titleElement.innerText = 'Can\'t generate AsciiDoc';
-            var errorMessageElement = document.createElement('div');
-            errorMessageElement.innerText = errorMessage;
-            var messageElement = document.getElementById('message');
-            messageElement.innerText = '';
-            messageElement.appendChild(titleElement);
-            messageElement.appendChild(errorMessageElement);
-          })
+        .withSuccessHandler(updateAsciiDocTextArea)
+        .withFailureHandler(unableToGenerateAsciiDoc)
         .withUserObject(this)
         .asciidocify();
+  })();
+
+  /**
+   * Update the text area with the generated AsciiDoc.
+   */
+  function updateAsciiDocTextArea(asciidoc) {
+    document.getElementById('spinner').classList.add('is-hidden');
+    var asciidocTextElement = document.getElementById('asciidoc-text');
+    asciidocTextElement.classList.remove('is-hidden');
+    asciidocTextElement.value = asciidoc;
+    var titleElement = document.createElement('h2');
+    titleElement.innerText = 'Result';
+    var messageElement = document.getElementById('message');
+    messageElement.innerText = '';
+    messageElement.appendChild(titleElement);
   }
 
-  convertAsciiDoc();
+  /**
+   * Show an error message because we were unable to generate AsciiDoc.
+   */
+  function unableToGenerateAsciiDoc(errorMessage) {
+    showErrorMessage('Unable to generate AsciiDoc', errorMessage);
+  }
+
+  /**
+   * Show an error message.
+   */
+  function showErrorMessage(title, errorMessage) {
+    document.getElementById('message-panel').classList.add('is-hidden');
+    var errorPanelElement = document.getElementById('error-panel')
+    errorPanelElement.classList.remove('is-hidden');
+    var titleElement = document.createElement('strong');
+    titleElement.innerText = title;
+    var errorMessageElement = document.createElement('div');
+    errorMessageElement.innerText = errorMessage;
+    errorPanelElement.appendChild(titleElement);
+    errorPanelElement.appendChild(errorMessageElement);
+  }
 </script>
+