From baec93c43925ea8a3efcdec9e74097d82f7f4ca2 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Sat, 25 Apr 2020 18:30:25 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                |  15 +-
 ayanova/src/components/wiki-control.vue | 636 ++++++++++++------------
 2 files changed, 321 insertions(+), 330 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 699923ae..de8551e0 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -70,17 +70,17 @@ CURRENT TODOs
 
 todo: Fix the above, then retest on all devices locally to ensure it's working properly
 
-todo: Picture input in attachments
-	https://rockfish.ayanova.com/default.htm#!/rfcaseEdit/2080
-	https://w3c.github.io/html-media-capture/#examples
+todo: attachment reveal button looks weird below wiki reveal button when read-write
+	- open read only see if it looks better if they're teh same and make it so with wiki or
+	- make the attach like the wiki
+	- Buttons would be more compact and share the title area so maybe that's teh way to go
 
 todo: have a look at ordering the file list in attachments
 	- people might want to see them in order or not.
 	- when doing an image the ipad just calls it image.jpg, could be more than one how to find in the list
 		(or they should just make a note maybe)
 
-todo: rotate photos? how to handle? (user figure out kind of thing, like always have the camera tilted x way or something?)
-	
+
 todo: User options input photo?
 	- and show the photo on the list menu and in internal message etc?
 	- Not critical but flashy for sure
@@ -91,10 +91,7 @@ todo: have a look at this: devices and sensors specs
 	https://www.w3.org/wiki/DAS/Implementations
 	https://wpt.fyi/results/?label=experimental&label=master&aligned
 
-todo: attachment reveal button looks weird below wiki reveal button when read-write
-	- open read only see if it looks better if they're teh same and make it so with wiki or
-	- make the attach like the wiki
-	- Buttons would be more compact and share the title area so maybe that's teh way to go
+
 		
 todo: Look at attachment saving code on server, should it zip?
 
diff --git a/ayanova/src/components/wiki-control.vue b/ayanova/src/components/wiki-control.vue
index 20d9a432..b72356b5 100644
--- a/ayanova/src/components/wiki-control.vue
+++ b/ayanova/src/components/wiki-control.vue
@@ -1,327 +1,317 @@
 <template>
   <div class="mt-6">
-    <template v-if="readonly">
-      <div>
-        <v-btn depressed tile @click="switchView()">
-          Wiki<v-icon right>{{ switchViewIcon() }}</v-icon></v-btn
-        >
-      </div>
+    <div>
+      <v-btn depressed tile @click="toggleReveal">
+        Wiki<v-icon v-text="reveal ? 'fa-eye-slash' : 'fa-eye'" right></v-icon
+      ></v-btn>
+    </div>
+    <template v-if="reveal">
+      <template v-if="!readonly">
+        <div class="mt-2">
+          <v-btn
+            text
+            :outlined="currentView == view.WIKI_VIEW"
+            @click="currentView = view.WIKI_VIEW"
+          >
+            <v-icon>fa-eye</v-icon>
+          </v-btn>
+          <v-btn
+            text
+            :outlined="currentView == view.DESIGN_VIEW"
+            @click="currentView = view.DESIGN_VIEW"
+          >
+            <v-icon>fa-edit</v-icon>
+          </v-btn>
+          <v-btn
+            text
+            :outlined="currentView == view.SPLIT_VIEW"
+            @click="currentView = view.SPLIT_VIEW"
+          >
+            <v-icon>fa-columns</v-icon>
+          </v-btn>
+        </div>
+      </template>
+      <v-sheet
+        v-if="currentView != this.view.HIDDEN_VIEW"
+        elevation="2"
+        class="aywiki pa-2 pa-sm-6 mt-2"
+      >
+        <v-row v-resize="onResize">
+          <!-- BUTTONS -->
+          <v-col v-if="showDesigner()" :cols="12">
+            <div>
+              <v-btn depressed tile @click="editClick('bold')">
+                <v-icon>fa-bold</v-icon></v-btn
+              >
+              <v-btn depressed tile @click="editClick('italic')">
+                <v-icon>fa-italic</v-icon></v-btn
+              >
+              <v-btn depressed tile @click="editClick('strike')">
+                <v-icon>fa-strikethrough</v-icon></v-btn
+              >
+
+              <!-- HEADINGS -->
+              <v-menu offset-y>
+                <template v-slot:activator="{ on }">
+                  <v-btn depressed tile v-on="on">
+                    <v-icon>fa-heading</v-icon>
+                  </v-btn>
+                </template>
+                <v-list>
+                  <v-list-item @click="editClick('heading', 1)">
+                    <v-list-item-title
+                      ><h1>{{ $ay.t("Heading") }} 1</h1></v-list-item-title
+                    >
+                  </v-list-item>
+                  <v-list-item @click="editClick('heading', 2)">
+                    <v-list-item-title
+                      ><h2>{{ $ay.t("Heading") }} 2</h2></v-list-item-title
+                    >
+                  </v-list-item>
+                  <v-list-item @click="editClick('heading', 3)">
+                    <v-list-item-title
+                      ><h3>{{ $ay.t("Heading") }} 3</h3></v-list-item-title
+                    >
+                  </v-list-item>
+                  <v-list-item @click="editClick('heading', 4)">
+                    <v-list-item-title
+                      ><h4>{{ $ay.t("Heading") }} 4</h4></v-list-item-title
+                    >
+                  </v-list-item>
+                  <v-list-item @click="editClick('heading', 5)">
+                    <v-list-item-title
+                      ><h5>{{ $ay.t("Heading") }} 5</h5></v-list-item-title
+                    >
+                  </v-list-item>
+                  <v-list-item @click="editClick('heading', 6)">
+                    <v-list-item-title
+                      ><h6>{{ $ay.t("Heading") }} 6</h6></v-list-item-title
+                    >
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+              <!-- /HEADINGS -->
+
+              <!-- MORE BUTTONS -->
+              <v-btn depressed tile class="ml-1" @click="editClick('line')">
+                <v-icon>fa-minus</v-icon></v-btn
+              >
+              <v-btn depressed tile @click="editClick('quote')">
+                <v-icon>fa-quote-left</v-icon></v-btn
+              >
+              <v-btn depressed tile @click="editClick('ul')">
+                <v-icon>fa-list-ul</v-icon></v-btn
+              >
+              <v-btn depressed tile @click="editClick('ol')">
+                <v-icon>fa-list-ol</v-icon></v-btn
+              >
+              <v-btn depressed tile @click="editClick('task')">
+                <v-icon>fa-check-square</v-icon></v-btn
+              >
+
+              <!-- TABLES -->
+              <v-menu
+                v-model="tableMenu"
+                :close-on-content-click="false"
+                offset-y
+              >
+                <template v-slot:activator="{ on }">
+                  <v-btn depressed tile class="ml-1" v-on="on">
+                    <v-icon>fa-table</v-icon>
+                  </v-btn>
+                </template>
+                <v-card width="300">
+                  <v-card-title>{{ $ay.t("Table") }}</v-card-title>
+
+                  <div class="ma-8">
+                    <v-slider
+                      thumb-size="24"
+                      thumb-label="always"
+                      v-model="tableMenuColumns"
+                      min="1"
+                      max="10"
+                      prepend-icon="fa-arrows-alt-h"
+                    ></v-slider>
+
+                    <v-slider
+                      prepend-icon="fa-arrows-alt-v"
+                      class="mt-8"
+                      thumb-size="24"
+                      thumb-label="always"
+                      v-model="tableMenuRows"
+                      min="1"
+                      max="15"
+                    ></v-slider>
+                  </div>
+
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+
+                    <v-btn text @click="tableMenu = false">{{
+                      $ay.t("Cancel")
+                    }}</v-btn>
+                    <v-btn color="primary" text @click="editClick('table')">{{
+                      $ay.t("OK")
+                    }}</v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-menu>
+              <!-- /TABLES -->
+
+              <!-- LINK -->
+              <v-btn depressed tile @click="openLinkMenu">
+                <v-icon>fa-link</v-icon>
+              </v-btn>
+              <v-menu
+                min-width="300"
+                v-model="linkMenu"
+                :close-on-content-click="false"
+                offset-y
+                :position-x="menuX"
+                :position-y="menuY"
+                absolute
+              >
+                <v-card width="300">
+                  <v-card-title>{{ $ay.t("InsertLink") }}</v-card-title>
+
+                  <div class="ma-8">
+                    <v-text-field
+                      v-model="linkUrl"
+                      :label="$ay.t('LinkUrl')"
+                    ></v-text-field>
+                    <v-text-field
+                      v-model="linkText"
+                      :label="$ay.t('LinkText')"
+                    ></v-text-field>
+                  </div>
+
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+
+                    <v-btn text @click="linkMenu = false">{{
+                      $ay.t("Cancel")
+                    }}</v-btn>
+                    <v-btn color="primary" text @click="editClick('link')">{{
+                      $ay.t("OK")
+                    }}</v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-menu>
+              <!-- /LINKS -->
+
+              <!-- IMAGE -->
+
+              <v-btn depressed tile @click="openImageMenu">
+                <v-icon>fa-image</v-icon>
+              </v-btn>
+              <v-menu
+                min-width="360"
+                v-model="imageMenu"
+                :close-on-content-click="false"
+                offset-y
+                :position-x="menuX"
+                :position-y="menuY"
+                absolute
+              >
+                <v-card>
+                  <v-card-title>{{ $ay.t("InsertImage") }}</v-card-title>
+                  <div>
+                    <v-tabs v-model="imageTab" grow color="primary">
+                      <v-tab key="url">URL</v-tab>
+                      <v-tab key="file">{{ $ay.t("Attachments") }}</v-tab>
+                      <v-tabs-items v-model="imageTab">
+                        <v-tab-item key="url"
+                          ><div class="ma-6">
+                            <v-text-field
+                              v-model="imageUrl"
+                              :label="$ay.t('ImageUrl')"
+                            ></v-text-field>
+                            <v-text-field
+                              v-model="imageText"
+                              :label="$ay.t('ImageDescription')"
+                            ></v-text-field></div
+                        ></v-tab-item>
+                        <v-tab-item key="file"
+                          ><div class="ma-6">
+                            <v-select
+                              @click="getAttachments"
+                              :label="$ay.t('Attachments')"
+                              v-model="selectedImageAttachment"
+                              :items="attachments"
+                              item-text="name"
+                              item-value="id"
+                              return-object
+                            ></v-select>
+
+                            <v-text-field
+                              v-model="imageText"
+                              :label="$ay.t('ImageDescription')"
+                            ></v-text-field></div
+                        ></v-tab-item>
+                      </v-tabs-items>
+                    </v-tabs>
+                  </div>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn text @click="imageMenu = false">{{
+                      $ay.t("Cancel")
+                    }}</v-btn>
+                    <v-btn
+                      color="primary"
+                      text
+                      @click="editClick('image', imageTab)"
+                      >{{ $ay.t("OK") }}</v-btn
+                    >
+                  </v-card-actions>
+                </v-card>
+              </v-menu>
+
+              <!-- /IMAGE -->
+
+              <!-- CODE -->
+              <v-btn depressed tile class="ml-1" @click="editClick('code')">
+                <v-icon>fa-code</v-icon></v-btn
+              >
+              <v-btn depressed tile @click="editClick('codeblock')">
+                <v-icon>fa-square-full</v-icon></v-btn
+              >
+              <!-- END OF BUTTONS -->
+            </div>
+          </v-col>
+          <!-- DESIGNER -->
+          <v-col
+            v-if="showDesigner()"
+            :cols="currentView == view.SPLIT_VIEW ? 6 : 12"
+          >
+            <div :style="editStyle()">
+              <v-textarea
+                v-cloak
+                @drop.prevent="onDrop"
+                @dragover.prevent
+                solo
+                no-resize
+                :height="editAreaHeight"
+                ref="editArea"
+                @input="handleInput"
+                @dblclick="handleDoubleClick"
+                v-model="localVal"
+              ></v-textarea>
+            </div>
+          </v-col>
+          <!-- WIKI  auto-grow-->
+          <v-col
+            v-if="showWiki()"
+            :cols="currentView == view.SPLIT_VIEW ? 6 : 12"
+          >
+            <div
+              :style="wikiStyle()"
+              class="markdown-body"
+              v-html="compiledOutput()"
+            ></div>
+          </v-col>
+        </v-row>
+      </v-sheet>
     </template>
-    <template v-else>
-      <span class="v-label v-label--active theme--light">
-        Wiki
-      </span>
-      <div class="mt-2">
-        <v-btn
-          text
-          :outlined="currentView == view.HIDDEN_VIEW"
-          @click="currentView = view.HIDDEN_VIEW"
-        >
-          <v-icon>fa-eye-slash</v-icon>
-        </v-btn>
-        <v-btn
-          text
-          :outlined="currentView == view.WIKI_VIEW"
-          @click="currentView = view.WIKI_VIEW"
-        >
-          <v-icon>fa-eye</v-icon>
-        </v-btn>
-        <v-btn
-          text
-          :outlined="currentView == view.DESIGN_VIEW"
-          @click="currentView = view.DESIGN_VIEW"
-        >
-          <v-icon>fa-edit</v-icon>
-        </v-btn>
-        <v-btn
-          text
-          :outlined="currentView == view.SPLIT_VIEW"
-          @click="currentView = view.SPLIT_VIEW"
-        >
-          <v-icon>fa-columns</v-icon>
-        </v-btn>
-      </div>
-    </template>
-    <v-sheet
-      v-if="currentView != this.view.HIDDEN_VIEW"
-      elevation="2"
-      class="aywiki pa-2 pa-sm-6 mt-2"
-    >
-      <v-row v-resize="onResize">
-        <!-- BUTTONS -->
-        <v-col v-if="showDesigner()" :cols="12">
-          <div>
-            <v-btn depressed tile @click="editClick('bold')">
-              <v-icon>fa-bold</v-icon></v-btn
-            >
-            <v-btn depressed tile @click="editClick('italic')">
-              <v-icon>fa-italic</v-icon></v-btn
-            >
-            <v-btn depressed tile @click="editClick('strike')">
-              <v-icon>fa-strikethrough</v-icon></v-btn
-            >
-
-            <!-- HEADINGS -->
-            <v-menu offset-y>
-              <template v-slot:activator="{ on }">
-                <v-btn depressed tile v-on="on">
-                  <v-icon>fa-heading</v-icon>
-                </v-btn>
-              </template>
-              <v-list>
-                <v-list-item @click="editClick('heading', 1)">
-                  <v-list-item-title
-                    ><h1>{{ $ay.t("Heading") }} 1</h1></v-list-item-title
-                  >
-                </v-list-item>
-                <v-list-item @click="editClick('heading', 2)">
-                  <v-list-item-title
-                    ><h2>{{ $ay.t("Heading") }} 2</h2></v-list-item-title
-                  >
-                </v-list-item>
-                <v-list-item @click="editClick('heading', 3)">
-                  <v-list-item-title
-                    ><h3>{{ $ay.t("Heading") }} 3</h3></v-list-item-title
-                  >
-                </v-list-item>
-                <v-list-item @click="editClick('heading', 4)">
-                  <v-list-item-title
-                    ><h4>{{ $ay.t("Heading") }} 4</h4></v-list-item-title
-                  >
-                </v-list-item>
-                <v-list-item @click="editClick('heading', 5)">
-                  <v-list-item-title
-                    ><h5>{{ $ay.t("Heading") }} 5</h5></v-list-item-title
-                  >
-                </v-list-item>
-                <v-list-item @click="editClick('heading', 6)">
-                  <v-list-item-title
-                    ><h6>{{ $ay.t("Heading") }} 6</h6></v-list-item-title
-                  >
-                </v-list-item>
-              </v-list>
-            </v-menu>
-            <!-- /HEADINGS -->
-
-            <!-- MORE BUTTONS -->
-            <v-btn depressed tile class="ml-1" @click="editClick('line')">
-              <v-icon>fa-minus</v-icon></v-btn
-            >
-            <v-btn depressed tile @click="editClick('quote')">
-              <v-icon>fa-quote-left</v-icon></v-btn
-            >
-            <v-btn depressed tile @click="editClick('ul')">
-              <v-icon>fa-list-ul</v-icon></v-btn
-            >
-            <v-btn depressed tile @click="editClick('ol')">
-              <v-icon>fa-list-ol</v-icon></v-btn
-            >
-            <v-btn depressed tile @click="editClick('task')">
-              <v-icon>fa-check-square</v-icon></v-btn
-            >
-
-            <!-- TABLES -->
-            <v-menu
-              v-model="tableMenu"
-              :close-on-content-click="false"
-              offset-y
-            >
-              <template v-slot:activator="{ on }">
-                <v-btn depressed tile class="ml-1" v-on="on">
-                  <v-icon>fa-table</v-icon>
-                </v-btn>
-              </template>
-              <v-card width="300">
-                <v-card-title>{{ $ay.t("Table") }}</v-card-title>
-
-                <div class="ma-8">
-                  <v-slider
-                    thumb-size="24"
-                    thumb-label="always"
-                    v-model="tableMenuColumns"
-                    min="1"
-                    max="10"
-                    prepend-icon="fa-arrows-alt-h"
-                  ></v-slider>
-
-                  <v-slider
-                    prepend-icon="fa-arrows-alt-v"
-                    class="mt-8"
-                    thumb-size="24"
-                    thumb-label="always"
-                    v-model="tableMenuRows"
-                    min="1"
-                    max="15"
-                  ></v-slider>
-                </div>
-
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-
-                  <v-btn text @click="tableMenu = false">{{
-                    $ay.t("Cancel")
-                  }}</v-btn>
-                  <v-btn color="primary" text @click="editClick('table')">{{
-                    $ay.t("OK")
-                  }}</v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-menu>
-            <!-- /TABLES -->
-
-            <!-- LINK -->
-            <v-btn depressed tile @click="openLinkMenu">
-              <v-icon>fa-link</v-icon>
-            </v-btn>
-            <v-menu
-              min-width="300"
-              v-model="linkMenu"
-              :close-on-content-click="false"
-              offset-y
-              :position-x="menuX"
-              :position-y="menuY"
-              absolute
-            >
-              <v-card width="300">
-                <v-card-title>{{ $ay.t("InsertLink") }}</v-card-title>
-
-                <div class="ma-8">
-                  <v-text-field
-                    v-model="linkUrl"
-                    :label="$ay.t('LinkUrl')"
-                  ></v-text-field>
-                  <v-text-field
-                    v-model="linkText"
-                    :label="$ay.t('LinkText')"
-                  ></v-text-field>
-                </div>
-
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-
-                  <v-btn text @click="linkMenu = false">{{
-                    $ay.t("Cancel")
-                  }}</v-btn>
-                  <v-btn color="primary" text @click="editClick('link')">{{
-                    $ay.t("OK")
-                  }}</v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-menu>
-            <!-- /LINKS -->
-
-            <!-- IMAGE -->
-
-            <v-btn depressed tile @click="openImageMenu">
-              <v-icon>fa-image</v-icon>
-            </v-btn>
-            <v-menu
-              min-width="360"
-              v-model="imageMenu"
-              :close-on-content-click="false"
-              offset-y
-              :position-x="menuX"
-              :position-y="menuY"
-              absolute
-            >
-              <v-card>
-                <v-card-title>{{ $ay.t("InsertImage") }}</v-card-title>
-                <div>
-                  <v-tabs v-model="imageTab" grow color="primary">
-                    <v-tab key="url">URL</v-tab>
-                    <v-tab key="file">{{ $ay.t("Attachments") }}</v-tab>
-                    <v-tabs-items v-model="imageTab">
-                      <v-tab-item key="url"
-                        ><div class="ma-6">
-                          <v-text-field
-                            v-model="imageUrl"
-                            :label="$ay.t('ImageUrl')"
-                          ></v-text-field>
-                          <v-text-field
-                            v-model="imageText"
-                            :label="$ay.t('ImageDescription')"
-                          ></v-text-field></div
-                      ></v-tab-item>
-                      <v-tab-item key="file"
-                        ><div class="ma-6">
-                          <v-select
-                            @click="getAttachments"
-                            :label="$ay.t('Attachments')"
-                            v-model="selectedImageAttachment"
-                            :items="attachments"
-                            item-text="name"
-                            item-value="id"
-                            return-object
-                          ></v-select>
-
-                          <v-text-field
-                            v-model="imageText"
-                            :label="$ay.t('ImageDescription')"
-                          ></v-text-field></div
-                      ></v-tab-item>
-                    </v-tabs-items>
-                  </v-tabs>
-                </div>
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-                  <v-btn text @click="imageMenu = false">{{
-                    $ay.t("Cancel")
-                  }}</v-btn>
-                  <v-btn
-                    color="primary"
-                    text
-                    @click="editClick('image', imageTab)"
-                    >{{ $ay.t("OK") }}</v-btn
-                  >
-                </v-card-actions>
-              </v-card>
-            </v-menu>
-
-            <!-- /IMAGE -->
-
-            <!-- CODE -->
-            <v-btn depressed tile class="ml-1" @click="editClick('code')">
-              <v-icon>fa-code</v-icon></v-btn
-            >
-            <v-btn depressed tile @click="editClick('codeblock')">
-              <v-icon>fa-square-full</v-icon></v-btn
-            >
-            <!-- END OF BUTTONS -->
-          </div>
-        </v-col>
-        <!-- DESIGNER -->
-        <v-col
-          v-if="showDesigner()"
-          :cols="currentView == view.SPLIT_VIEW ? 6 : 12"
-        >
-          <div :style="editStyle()">
-            <v-textarea
-              v-cloak
-              @drop.prevent="onDrop"
-              @dragover.prevent
-              solo
-              no-resize
-              :height="editAreaHeight"
-              ref="editArea"
-              @input="handleInput"
-              @dblclick="handleDoubleClick"
-              v-model="localVal"
-            ></v-textarea>
-          </div>
-        </v-col>
-        <!-- WIKI  auto-grow-->
-        <v-col
-          v-if="showWiki()"
-          :cols="currentView == view.SPLIT_VIEW ? 6 : 12"
-        >
-          <div
-            :style="wikiStyle()"
-            class="markdown-body"
-            v-html="compiledOutput()"
-          ></div>
-        </v-col>
-      </v-row>
-    </v-sheet>
   </div>
 </template>
 <script>
@@ -356,6 +346,7 @@ export default {
     return {
       localVal: this.value,
       currentView: 0,
+      reveal: false,
       selection: {
         start: 0,
         end: 0,
@@ -415,6 +406,9 @@ export default {
       // this.editAreaHeight = window.innerHeight / 2;
       this.editAreaHeight = window.innerHeight * 0.8;
     },
+    toggleReveal() {
+      this.reveal = !this.reveal;
+    },
     editStyle() {
       if (this.currentView == this.view.SPLIT_VIEW) {
         return "height: " + this.editAreaHeight + "px;";