move text editor update/cancel buttons into editor toolbar

this makes the text editor responsible for handling accept/discard
changes, and visually links the buttons to the contents of the editor

also discards changes when editing a table while text editor is open

Author: longhotsummer

indigo_app/static/javascript/indigo/views/document_editor.js

@@ -17,8 +17,6 @@
   Indigo.SourceEditorView = Backbone.View.extend({
     el: 'body',
     events: {
-      'click .text-editor-buttons .btn.save': 'acceptChanges',
-      'click .text-editor-buttons .btn.cancel': 'discardChanges',
       'click .btn.edit-text': 'fullEdit',
       'click .btn.edit-table': 'editTable',
       'click .quick-edit': 'quickEdit',
@@ -38,9 +36,11 @@
       this.toolbar = document.querySelector('.document-toolbar-wrapper');
 
       this.aknTextEditor = new Indigo.AknTextEditor(
-        this.el,
+        this.el.querySelector('.document-primary-pane-editor-pane'),
         this.document,
         true,
+        this.onTextEditSaved.bind(this),
+        this.onTextEditCancelled.bind(this),
       );
 
       const xmlEditorBox = document.querySelector('.document-xml-editor');
@@ -138,36 +138,10 @@
       return true;
     },
 
-    /**
-     * End the edit activity and save the changes made (in text or table edit modes).
-     */
-    acceptChanges: async function() {
-      // save table edits, if any
-      this.tableEditor.saveChanges();
-
-      if (this.aknTextEditor.editing) {
-        const btn = this.toolbar.querySelector('.text-editor-buttons .btn.save');
-        btn.setAttribute('disabled', 'true');
-
-        try {
-          if (await this.aknTextEditor.acceptChanges()) {
-            this.editActivityEnded();
-            this.closeTextEditor();
-          }
-        } finally {
-          btn.removeAttribute('disabled');
-        }
-      }
-    },
-
     /**
      * Discard the content of all editors.
      */
     discardChanges: function() {
-      if (this.aknTextEditor.editing) {
-        this.editActivityCancelled();
-        this.closeTextEditor();
-      }
       this.tableEditor.discardChanges(true);
       this.aknTextEditor.discardChanges();
     },
@@ -234,6 +208,16 @@
       }
     },
 
+    onTextEditSaved: function() {
+      this.editActivityEnded();
+      this.closeTextEditor();
+    },
+
+    onTextEditCancelled: function() {
+      this.editActivityCancelled();
+      this.closeTextEditor();
+    },
+
     editActivityStarted: function(mode) {
       this.trigger('edit-activity-started', mode);
     },
@@ -400,6 +384,9 @@
       const tableId = e.currentTarget.dataset.tableId;
 
       if (this.confirmAndDiscardChanges()) {
+        // ensure the text editor is closed, even if there were no changes
+        this.aknTextEditor.discardChanges();
+
         // we queue this up to run after the click event has finished, because we need the HTML to be re-rendered
         // after changes are potentially discarded
         setTimeout(() => {

indigo_app/static/javascript/indigo/views/document_xml_editor.js

@@ -3,9 +3,11 @@
  * text into XML, and handling text-based editor actions (like bolding, etc.).
  */
 class AknTextEditor {
-  constructor (root, document, liveUpdates) {
+  constructor (root, document, liveUpdates, onSave, onDiscard) {
     this.root = root;
     this.document = document;
+    this.onSave = onSave;
+    this.onDiscard = onDiscard
     this.editing = false;
     this.previousText = null;
     this.xmlElement = null;
@@ -71,6 +73,9 @@ class AknTextEditor {
       this.liveUpdates = e.currentTarget.checked;
       this.onTextChanged();
     });
+
+    this.root.querySelector('.btn.save').addEventListener('click', this.acceptChanges.bind(this));
+    this.root.querySelector('.btn.cancel').addEventListener('click', this.discardChanges.bind(this));
   }
 
   setXmlElement (element) {
@@ -196,15 +201,21 @@ class AknTextEditor {
     if (!this.editing) return false;
 
     if (!this.liveUpdates) {
+      let elements;
       // use a nonce to check if we're still the current save when the parse completes
       const nonce = this.nonce = Math.random();
-      let elements;
+      const btn = this.root.querySelector('.btn.save');
+
       try {
+        btn.setAttribute('disabled', 'true');
         elements = await this.parse();
       } catch(err) {
         Indigo.errorView.show(err);
         return false;
+      } finally {
+        btn.removeAttribute('disabled');
       }
+
       // check if we're still the current save
       if (nonce !== this.nonce) return false;
       this.replaceElement(elements);
@@ -214,6 +225,8 @@ class AknTextEditor {
     this.dirty = false;
     this.xmlElement = this.xmlElementOriginal = null;
 
+    this.onSave();
+
     return true;
   }
 
@@ -228,6 +241,7 @@ class AknTextEditor {
       }
       this.editing = false;
       this.dirty = false;
+      this.onDiscard();
     }
   }
 

indigo_app/static/stylesheets/_documents.scss

@@ -79,18 +79,10 @@
 .document-toolbar-wrapper {
   padding-bottom: 5px;
 
-  .text-editor-buttons {
-    display: none;
-  }
-
   &.is-editing.edit-mode-text {
     .editor-start-buttons {
       display: none;
     }
-
-    .text-editor-buttons {
-      display: flex;
-    }
   }
 
   &.is-editing.edit-mode-table {

indigo_app/templates/indigo_api/document/_text_editor.html

@@ -49,12 +49,16 @@
   <div class="btn-group btn-group-sm me-2">
     <button type="button" class="btn btn-outline-secondary toggle-word-wrap active">{% trans "Wrap lines" %}</button>
   </div>
-  <div class="ms-auto">
+  <div class="ms-auto me-2">
     <label>
       <input class="form-check-input me-1" type="checkbox" id="live-updates-chk" checked>
       <label class="fw-normal" for="live-updates-chk">{% trans "Preview changes" %}</label>
     </label>
   </div>
+  <div class="btn-group btn-group-sm">
+    <button class="btn btn-success save"><i class="fas fa-check"></i> {% trans "Update" %}</button>
+    <button class="btn btn-secondary cancel"><i class="fas fa-times"></i> {% trans "Cancel" %}</button>
+  </div>
 </div>
 <div class="document-text-editor">
   <div class="monaco-editor-box"></div>

indigo_app/templates/indigo_api/document/_toolbar.html

@@ -58,10 +58,6 @@
   <div class="btn-group btn-group-sm me-2 editor-start-buttons">
     <button type="button" class="btn btn-primary edit-text"><i class="fas fa-pencil-alt"></i> {% trans "Edit" %}</button>
   </div>
-  <div class="btn-group btn-group-sm me-2 text-editor-buttons">
-    <button class="btn btn-success save"><i class="fas fa-check"></i> {% trans "Update" %}</button>
-    <button class="btn btn-secondary cancel"><i class="fas fa-times"></i> {% trans "Cancel" %}</button>
-  </div>
 
   <div class="btn-group btn-group-sm ms-auto me-2">
     <a class="btn btn-link" href="{% url 'work_tasks' frbr_uri=work.frbr_uri %}"><i class="fas fa-thumbtack me-1"></i>{% trans "Tasks" %}</a>