re-factor / cleanup

ayanova/src/components/wiki-control.vue

@@ -4,10 +4,10 @@
       <v-btn
         depressed
         tile
-        @click="toggleReveal"
         :color="isEmpty ? null : 'primary'"
+        @click="toggleReveal"
       >
-        Wiki<v-icon v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'" right></v-icon
+        Wiki<v-icon right v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"></v-icon
       ></v-btn>
     </div>
     <template v-if="reveal">
@@ -23,8 +23,8 @@
           <v-btn
             text
             :outlined="currentView == view.DESIGN_VIEW"
-            @click="currentView = view.DESIGN_VIEW"
             data-cy="wikiDesignView"
+            @click="currentView = view.DESIGN_VIEW"
           >
             <v-icon>$ayiEdit</v-icon>
           </v-btn>
@@ -38,7 +38,7 @@
         </div>
       </template>
       <v-sheet
-        v-if="currentView != this.view.HIDDEN_VIEW"
+        v-if="currentView != view.HIDDEN_VIEW"
         elevation="2"
         class="aywiki pa-2 pa-sm-6 mt-2"
       >
@@ -131,20 +131,20 @@
 
                   <div class="ma-8">
                     <v-slider
+                      v-model="tableMenuColumns"
                       thumb-size="24"
                       thumb-label="always"
-                      v-model="tableMenuColumns"
                       min="1"
                       max="10"
                       prepend-icon="$ayiArrowsAltH"
                     ></v-slider>
 
                     <v-slider
+                      v-model="tableMenuRows"
                       prepend-icon="$ayiArrowsAltV"
                       class="mt-8"
                       thumb-size="24"
                       thumb-label="always"
-                      v-model="tableMenuRows"
                       min="1"
                       max="15"
                     ></v-slider>
@@ -169,8 +169,8 @@
                 <v-icon>$ayiLink</v-icon>
               </v-btn>
               <v-menu
-                min-width="300"
                 v-model="linkMenu"
+                min-width="300"
                 :close-on-content-click="false"
                 offset-y
                 :position-x="menuX"
@@ -211,8 +211,8 @@
                 <v-icon>$ayiImage</v-icon>
               </v-btn>
               <v-menu
-                min-width="360"
                 v-model="imageMenu"
+                min-width="360"
                 :close-on-content-click="false"
                 offset-y
                 :position-x="menuX"
@@ -240,13 +240,13 @@
                         <v-tab-item key="file"
                           ><div class="ma-6">
                             <v-select
-                              @click="getAttachments"
-                              :label="$ay.t('Attachments')"
                               v-model="selectedImageAttachment"
+                              :label="$ay.t('Attachments')"
                               :items="attachments"
                               item-text="name"
                               item-value="id"
                               return-object
+                              @click="getAttachments"
                             ></v-select>
 
                             <v-text-field
@@ -297,16 +297,16 @@
             <div :style="editStyle()">
               <v-textarea
                 v-cloak
-                @drop.prevent="onDrop"
-                @dragover.prevent
+                ref="editArea"
+                v-model="localVal"
                 solo
                 no-resize
                 :height="editAreaHeight"
-                ref="editArea"
+                data-cy="wikiEditor"
+                @drop.prevent="onDrop"
+                @dragover.prevent
                 @input="handleInput"
                 @dblclick="handleDoubleClick"
-                v-model="localVal"
-                data-cy="wikiEditor"
               ></v-textarea>
             </div>
           </v-col>
@@ -324,8 +324,8 @@
         </v-row>
         <v-btn depressed tile @click="toggleReveal">
           Wiki<v-icon
-            v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"
             right
+            v-text="reveal ? '$ayiEyeSlash' : '$ayiEye'"
           ></v-icon
         ></v-btn>
       </v-sheet>
@@ -336,27 +336,11 @@
 import marked from "marked";
 import DOMPurify from "dompurify";
 export default {
-  created() {
-    // Add a hook to make all links open a new window
-    //https://github.com/cure53/DOMPurify/blob/master/demos/hooks-target-blank-demo.html
-    DOMPurify.addHook("afterSanitizeAttributes", function(node) {
-      // set all elements owning target to target=_blank
-      if ("target" in node) {
-        node.setAttribute("target", "_blank");
-        // prevent https://www.owasp.org/index.php/Reverse_Tabnabbing
-        node.setAttribute("rel", "noopener noreferrer");
-      }
-      // set non-HTML/MathML links to xlink:show=new
-      if (
-        !node.hasAttribute("target") &&
-        (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
-      ) {
-        node.setAttribute("xlink:show", "new");
-      }
-    });
-  },
-  beforeDestroy() {
-    DOMPurify.removeAllHooks();
+  props: {
+    value: { type: String, default: "" },
+    ayaType: { type: Number, default: null },
+    ayaId: { type: Number, default: null },
+    readonly: Boolean
   },
   data() {
     return {
@@ -395,21 +379,37 @@ export default {
       uploadFiles: [] //attachment upload files
     };
   },
-  props: {
-    value: { type: String, default: "" },
-    ayaType: { type: Number, default: null },
-    ayaId: { type: Number, default: null },
-    readonly: Boolean
+  computed: {
+    isEmpty() {
+      return this.value == null;
+    }
   },
   watch: {
     value(value) {
       this.localVal = value ?? "";
     }
   },
-  computed: {
-    isEmpty() {
-      return this.value == null;
-    }
+  created() {
+    // Add a hook to make all links open a new window
+    //https://github.com/cure53/DOMPurify/blob/master/demos/hooks-target-blank-demo.html
+    DOMPurify.addHook("afterSanitizeAttributes", function(node) {
+      // set all elements owning target to target=_blank
+      if ("target" in node) {
+        node.setAttribute("target", "_blank");
+        // prevent https://www.owasp.org/index.php/Reverse_Tabnabbing
+        node.setAttribute("rel", "noopener noreferrer");
+      }
+      // set non-HTML/MathML links to xlink:show=new
+      if (
+        !node.hasAttribute("target") &&
+        (node.hasAttribute("xlink:href") || node.hasAttribute("href"))
+      ) {
+        node.setAttribute("xlink:show", "new");
+      }
+    });
+  },
+  beforeDestroy() {
+    DOMPurify.removeAllHooks();
   },
   methods: {
     goHelp() {
@@ -542,7 +542,7 @@ export default {
       //emit input event to parent form for dirty tracking
       this.handleInput(this.localVal);
     },
-    handleDoubleClick(i) {
+    handleDoubleClick() {
       //the purpose of this is only to change the selection if it's got an extra space to the right
       //because double clicking on a word with another word after it causes the space to be included
       this.getSelectedRange();
@@ -929,10 +929,10 @@ export default {
     },
     onDrop(ev) {
       //Drop image file
-      var files = Array.from(ev.dataTransfer.files);
+      let files = Array.from(ev.dataTransfer.files);
       if (files.length > 0) {
         //handle file drop
-        var files = Array.from(ev.dataTransfer.files);
+        files = Array.from(ev.dataTransfer.files);
         if (files.length > 0) {
           this.uploadFiles = files;
           this.upload();