Merge pull request #317 from LibCrowds/development

Development
LibCrowds · Mar 17, 2018 · 9b8dc26 · 9b8dc26
2 parents fbef3e2 + 027168e
commit 9b8dc26
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 190 deletions.
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,49 +1,21 @@
 <template>
   <div id="app">
 
-    <!-- Basic navigation to go back to the demo homepage -->
-    <nav
-      id="lv-demo-navbar"
-      v-if="showSelectViewer || showTranscribeViewer">
-      <button @click="hideViewer">
-        &lt; Go back
-      </button>
-    </nav>
-
     <!-- Demo home page -->
-    <div
-      id="homepage"
-      v-if="(
-        !showSelectViewer &&
-        !showTranscribeViewer &&
-        !customTaskOpts.length)">
+    <div id="homepage" v-if="!showViewer">
       <div class="container">
         <h1>LibCrowds Viewer</h1>
         <p class="lead">
           A Vue component for crowdsourcing Web Annotations.
         </p>
         <div id="mode-buttons">
-          <button @click="showSelectViewer = true">
+          <button @click="loadSelectTasks">
             Select Mode
           </button>
-          <button @click="showTranscribeViewer = true">
+          <button @click="loadTranscribeTasks">
             Transcribe Mode
           </button>
-          <button @click="showCustomiseTextArea = !showCustomiseTextArea">
-            Customise
-          </button>
         </div>
-        <transition name="fade-text-area">
-          <div id="customise" v-show="showCustomiseTextArea">
-            <textarea
-              ref="custom"
-              rows="10">
-            </textarea>
-            <button @click="loadCustomTaskOpts">
-              Try it out
-            </button>
-          </div>
-        </transition>
         <p id="instructions">
           <small>(watch the console for events)</small>
         </p>
@@ -54,56 +26,27 @@
       </div>
     </div>
 
-    <!-- Viewer used for the select tasks -->
-    <div class="viewer-container" v-else-if="showSelectViewer">
-      <libcrowds-viewer
-        :task-opts="selectTaskOpts"
-        :before-submit="beforeSubmit"
-        @taskchange="handleTaskChange"
-        @create="handleCreate"
-        @update="handleUpdate"
-        @delete="handleDelete"
-        @submit="handleSubmit">
-        <div slot="share">
-          Custom share content can go here.
-        </div>
-      </libcrowds-viewer>
-    </div>
+    <!-- Viewer -->
+    <div class="viewer-container" v-else>
 
-    <!-- Viewer used for the transcribe tasks -->
-    <div class="viewer-container" v-else-if="showTranscribeViewer">
-      <libcrowds-viewer
-        :show-related-tasks="true"
-        :task-opts="transcribeTaskOpts"
-        :before-submit="beforeSubmit"
-        @taskchange="handleTaskChange"
-        @create="handleCreate"
-        @update="handleUpdate"
-        @delete="handleDelete"
-        @submit="handleSubmit">
-        <div slot="share">
-          Custom share content can go here.
-        </div>
-      </libcrowds-viewer>
-    </div>
+      <nav
+        id="lv-demo-navbar">
+        <button @click="showViewer = false">
+          &lt; Go back
+        </button>
+      </nav>
 
-    <!-- Viewer used for the custom tasks -->
-    <div class="viewer-container" v-else-if="customTaskOpts.length">
       <libcrowds-viewer
-        :show-related-tasks="true"
-        :task-opts="customTaskOpts"
+        :task-opts="taskOpts"
         :before-submit="beforeSubmit"
-        @taskchange="handleTaskChange"
-        @create="handleCreate"
-        @update="handleUpdate"
-        @delete="handleDelete"
-        @submit="handleSubmit">
-        <div slot="share">
-          Custom share content can go here.
-        </div>
+        @create="logEvent('Annotation Created', arguments)"
+        @update="logEvent('Annotation Updated', arguments)"
+        @delete="logEvent('Annotation Deleted', arguments)"
+        @taskchange="logEvent('Task Changed', arguments)"
+        @submit="logEvent('Task Submitted', arguments)">
       </libcrowds-viewer>
-    </div>
 
+    </div>
   </div>
 </template>
 
@@ -117,24 +60,8 @@ export default {
     return {
       githubUrl: 'https://github.com/LibCrowds/libcrowds-viewer',
       docsUrl: 'https://libcrowds.gitbooks.io/libcrowds-viewer-docs/content/',
-      selectTaskOpts: selectTasks,
-      transcribeTaskOpts: transcribeTasks,
-      showSelectViewer: false,
-      showTranscribeViewer: false,
-      showCustomiseTextArea: false,
-      customTaskOpts: [],
-      beforeSubmit: (taskData) => new Promise((resolve, reject) => {
-        if (!taskData.annotations.length) {
-          const confirm = window.confirm(
-            'EXAMPLE ALERT\n\n' +
-            'No annotations have been saved, do you want to continue?'
-          )
-          if (!confirm) {
-            reject(new Error())
-          }
-        }
-        resolve()
-      })
+      taskOpts: [],
+      showViewer: false
     }
   },
 
@@ -143,45 +70,49 @@ export default {
   },
 
   methods: {
-    loadCustomTaskOpts () {
-      try {
-        this.customTaskOpts = JSON.parse(this.$refs.custom.value)
-      } catch (err) {
-        this.customTaskOpts = []
-        alert(err)
-      }
+    /**
+     * Log an event for testing purposes.
+     * @param {String} message
+     *   A message.
+     * @param {Array} args
+     *   The arguments.
+     */
+    logEvent (message, args) {
+      console.log(message, args)
     },
 
-    handleTaskChange (oldTask, newTask) {
-      console.log('Task changed', oldTask, newTask)
+    /**
+     * Load the demo select tasks.
+     */
+    loadSelectTasks () {
+      this.taskOpts = selectTasks
+      this.showViewer = true
     },
 
-    handleCreate (task, annotation) {
-      console.log('Annotation created', task, annotation)
+    /**
+     * Load the demo transcribe tasks.
+     */
+    loadTranscribeTasks () {
+      this.taskOpts = transcribeTasks
+      this.showViewer = true
     },
 
-    handleUpdate (task, annotation) {
-      console.log('Annotation updated', task, annotation)
-    },
-
-    handleDelete (task, annotation) {
-      console.log('Annotation deleted', task, annotation)
-    },
-
-    handleSubmit (task) {
-      console.log('Task submitted', task)
-      console.log(JSON.stringify(task.annotations, null, 2))
-    },
-
-    hideViewer () {
-      this.showSelectViewer = false
-      this.showTranscribeViewer = false
-    },
-
-    demoButtonSlotAlert () {
-      const msg = 'This is an example of an additional button being added ' +
-        'using the button slot'
-      alert(msg)
+    /**
+     * Show an example beforeSubmit alert.
+     */
+    beforeSubmit(taskData) {
+      return new Promise((resolve, reject) => {
+        if (!taskData.annotations.length) {
+          const confirm = window.confirm(
+            'EXAMPLE BEFORE SUBMISSION ALERT\n\n' +
+            'No annotations have been saved, do you want to continue?'
+          )
+          if (!confirm) {
+            reject(new Error())
+          }
+        }
+        resolve()
+      })
     }
   }
 }
@@ -242,21 +173,6 @@ $lv-demo-navbar-height: 50px;
     border: none;
   }
 
-  #customise {
-    width: 75%;
-    display: block;
-    text-align: center;
-
-    textarea {
-      width: 100%;
-      margin: 1rem;
-    }
-
-    button {
-      background: #26A65B !important;
-    }
-  }
-
   #links {
     display: flex;
     flex-direction: column;
@@ -302,6 +218,7 @@ $lv-demo-navbar-height: 50px;
 }
 
 #lv-demo-navbar {
+  display: flex;
   background: $lv-sidebar-bg;
   padding: 0 1.5em;
   height: $lv-demo-navbar-height;

diff --git a/docs/configuration.md b/docs/configuration.md
@@ -41,7 +41,6 @@ String.
 | help                  | Boolean or String | 'Help'             | The help button                 |
 | info                  | Boolean or String | 'Details'          | The info button                 |
 | browse                | Boolean or String | 'Browse Tasks'     | The browse tasks button         |
-| share                 | Boolean or String | 'Share'            | The share button                |
 | download              | Boolean or String | 'Download'         | The download button             |
 
 Any key-value pairs added to the `buttons` object that are not listed above
@@ -106,7 +105,6 @@ The following slots are available.
 
 | Name   | Description                                                      |
 |--------|------------------------------------------------------------------|
-| share  | Content for the share model                                      |
 | help   | Slots in above the viewer controls section in the help model     |
 | info   | Content for the info modal (overwrites `task.manifest`)          |
 

diff --git a/docs/events.md b/docs/events.md
@@ -4,7 +4,7 @@ LibCrowds Viewer follows the standard Vue parent-child relationship of props
 down, events up. Along with further events, whenever an Annotation is created,
 updated or deleted the result is emitted from the viewer component.
 
-Note that the viewer creates Annotations with a random ID, so this should be
+Note that the viewer creates Annotations with a random ID. These should be
 updated and tracked by the client (for instance, using one generated by an
 Annotation server).
 

diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue
@@ -42,13 +42,6 @@
             <slot name="help"></slot>
           </help-modal>
 
-          <share-modal
-            v-if="$slots.share && mergedToolbarButtons.share"
-            :show="showShareModal"
-            @hide="showShareModal = false">
-            <slot name="share"></slot>
-          </share-modal>
-
           <browse-modal
             v-if="mergedToolbarButtons.browse && browsable"
             :tasks="tasks"
@@ -138,7 +131,6 @@ import 'vue-awesome/icons/chevron-right'
 import OpenSeadragon from 'openseadragon'
 import InfoModal from '@/components/modals/Info'
 import HelpModal from '@/components/modals/Help'
-import ShareModal from '@/components/modals/Share'
 import BrowseModal from '@/components/modals/Browse'
 import ToolbarControls from '@/components/controls/Toolbar'
 import PanControls from '@/components/controls/Pan'
@@ -181,7 +173,6 @@ export default {
         help: 'Help',
         info: 'Details',
         browse: 'Browse Tasks',
-        share: 'Share',
         download: 'Download'
       },
       defaultSidebarButtons: {
@@ -190,7 +181,6 @@ export default {
       },
       showInfoModal: false,
       showHelpModal: this.showHelpOnMount,
-      showShareModal: false,
       showBrowseModal: false,
       viewerDisabled: false,
       tasks: [],
@@ -265,7 +255,6 @@ export default {
   components: {
     InfoModal,
     HelpModal,
-    ShareModal,
     BrowseModal,
     ToolbarControls,
     PanControls,
@@ -314,9 +303,6 @@ export default {
       if (!this.browsable) {
         merged.browse = false
       }
-      if (!this.$slots.share) {
-        merged.share = false
-      }
       return merged
     },
 
@@ -721,8 +707,6 @@ export default {
         this.showInfoModal = true
       } else if (name === 'browse') {
         this.showBrowseModal = true
-      } else if (name === 'share') {
-        this.showShareModal = true
       } else if (name === 'fullscreen') {
         toggleFullScreen(this.$refs.container)
       } else if (name === 'download') {

diff --git a/src/components/controls/Toolbar.vue b/src/components/controls/Toolbar.vue
@@ -43,7 +43,6 @@ export default {
         help: 'question-circle',
         info: 'info-circle',
         browse: 'eye',
-        share: 'share-alt',
         fullscreen: 'expand'
       }
 

diff --git a/src/components/modals/Help.vue b/src/components/modals/Help.vue
@@ -21,10 +21,7 @@
           <icon name="info-circle"></icon>View information about the item
         </li>
         <li v-if="buttons.browse">
-          <icon name="list"></icon>Browse Tasks
-        </li>
-        <li v-if="buttons.share">
-          <icon name="share-alt"></icon>Copy and share the image URL
+          <icon name="eye"></icon>Browse Tasks
         </li>
         <li v-if="buttons.download">
           <icon name="download"></icon>Download this image
@@ -98,7 +95,7 @@ import 'vue-awesome/icons/arrow-circle-left'
 import 'vue-awesome/icons/arrow-circle-right'
 import 'vue-awesome/icons/chevron-left'
 import 'vue-awesome/icons/chevron-right'
-import 'vue-awesome/icons/list'
+import 'vue-awesome/icons/eye'
 import 'vue-awesome/icons/download'
 import ModalBase from '@/components/modals/Base'
 import Task from '@/model/Task'