ayanova/src/components/wiki-control.vue

@@ -13,19 +13,19 @@
       </span>
       <div class="mt-2">
         <v-btn-toggle v-model="currentView">
-          <v-btn color="white" value="0">
+          <v-btn color="white" :value="view.HIDDEN_VIEW">
             <v-icon>fa-eye-slash</v-icon>
           </v-btn>
 
-          <v-btn color="white" value="2">
+          <v-btn color="white" :value="view.WIKI_VIEW">
             <v-icon>fa-eye</v-icon>
           </v-btn>
 
-          <v-btn color="white" value="3">
+          <v-btn color="white" :value="view.DESIGN_VIEW">
             <v-icon>fa-edit</v-icon>
           </v-btn>
 
-          <v-btn color="white" value="1">
+          <v-btn color="white" :value="view.SPLIT_VIEW">
             <v-icon>fa-columns</v-icon>
           </v-btn>
         </v-btn-toggle>
@@ -33,13 +33,16 @@
     </template>
 
     <v-sheet
-      v-if="currentView != 0"
+      v-if="currentView != this.view.HIDDEN_VIEW"
       elevation="2"
       class="aywiki pa-2 pa-sm-6 mt-2"
     >
       <v-row v-resize="onResize">
         <!-- DESIGNER -->
-        <v-col v-if="showDesigner()" :cols="currentView == 1 ? 6 : 12">
+        <v-col
+          v-if="showDesigner()"
+          :cols="currentView == view.SPLIT_VIEW ? 6 : 12"
+        >
           <div>
             <v-btn depressed tile @click="clickBold">
               <v-icon>fa-bold</v-icon></v-btn
@@ -78,7 +81,7 @@
               <v-icon>fa-square-full</v-icon></v-btn
             >
           </div>
-          {{ editAreaHeight }}
+          {{ view.SPLIT_VIEW }}
           <div :style="wikiStyle()">
             <v-textarea
               auto-grow
@@ -91,7 +94,10 @@
           </div>
         </v-col>
         <!-- WIKI -->
-        <v-col v-if="showWiki()" :cols="currentView == 1 ? 6 : 12">
+        <v-col
+          v-if="showWiki()"
+          :cols="currentView == view.SPLIT_VIEW ? 6 : 12"
+        >
           <div
             :style="wikiStyle()"
             class="aywiki"
@@ -105,10 +111,6 @@
 <script>
 import marked from "marked";
 import DOMPurify from "dompurify";
-const HIDDEN_VIEW = 0;
-const SPLIT_VIEW = 1;
-const WIKI_VIEW = 2;
-const DESIGN_VIEW = 3;
 
 export default {
   created() {},
@@ -123,7 +125,13 @@ export default {
         endOfBlock: 0, //end of block meaning selection expanded to end of line (unless there isn't one)
         hasSelection: false
       },
-      editAreaHeight: 300
+      editAreaHeight: 300,
+      view: {
+        HIDDEN_VIEW: 0,
+        SPLIT_VIEW: 1,
+        WIKI_VIEW: 2,
+        DESIGN_VIEW: 3
+      }
     };
   },
   props: {
@@ -140,7 +148,7 @@ export default {
       this.editAreaHeight = window.innerHeight / 2;
     },
     wikiStyle() {
-      if (this.currentView == SPLIT_VIEW) {
+      if (this.currentView == this.view.SPLIT_VIEW) {
         return "height: " + this.editAreaHeight + "px;overflow-y:auto;";
       } else {
         return false; //false attributes don't get rendered
@@ -240,7 +248,7 @@ export default {
       //mirror of switchview below
 
       if (this.readOnly) {
-        if (this.currentView == HIDDEN_VIEW) {
+        if (this.currentView == this.view.HIDDEN_VIEW) {
           return "fa-eye";
         } else {
           return "fa-eye-slash";
@@ -249,29 +257,35 @@ export default {
       }
 
       switch (this.currentView) {
-        case HIDDEN_VIEW:
+        case this.view.HIDDEN_VIEW:
           return "fa-eye";
-        case WIKI_VIEW:
+        case this.view.WIKI_VIEW:
           return "fa-columns";
-        case SPLIT_VIEW:
+        case this.view.SPLIT_VIEW:
           return "fa-feather";
-        case DESIGN_VIEW:
+        case this.view.DESIGN_VIEW:
           return "fa-eye";
       }
     },
     showWiki() {
-      return this.currentView == WIKI_VIEW || this.currentView == SPLIT_VIEW;
+      return (
+        this.currentView == this.view.WIKI_VIEW ||
+        this.currentView == this.view.SPLIT_VIEW
+      );
     },
     showDesigner() {
-      return this.currentView == DESIGN_VIEW || this.currentView == SPLIT_VIEW;
+      return (
+        this.currentView == this.view.DESIGN_VIEW ||
+        this.currentView == this.view.SPLIT_VIEW
+      );
     },
     switchView() {
       //if user can't edit then cycle between hidden and wiki view
       if (this.readOnly) {
-        if (this.currentView == HIDDEN_VIEW) {
-          this.currentView = WIKI_VIEW;
+        if (this.currentView == this.view.HIDDEN_VIEW) {
+          this.currentView = this.view.WIKI_VIEW;
         } else {
-          this.currentView = HIDDEN_VIEW;
+          this.currentView = this.view.HIDDEN_VIEW;
         }
         return;
       }
@@ -279,17 +293,17 @@ export default {
       //and cycle between design, split and wiki views only
       //never goes into hidden
       switch (this.currentView) {
-        case HIDDEN_VIEW:
-          this.currentView = WIKI_VIEW;
+        case this.view.HIDDEN_VIEW:
+          this.currentView = this.view.WIKI_VIEW;
           break;
-        case WIKI_VIEW:
-          this.currentView = SPLIT_VIEW;
+        case this.view.WIKI_VIEW:
+          this.currentView = this.view.SPLIT_VIEW;
           break;
-        case SPLIT_VIEW:
-          this.currentView = DESIGN_VIEW;
+        case this.view.SPLIT_VIEW:
+          this.currentView = this.view.DESIGN_VIEW;
           break;
-        case DESIGN_VIEW:
-          this.currentView = WIKI_VIEW;
+        case this.view.DESIGN_VIEW:
+          this.currentView = this.view.WIKI_VIEW;
           break;
       }
     },