Highlight FragmentSelector passed with a task target (close #301)

.travis.yml

@@ -3,9 +3,9 @@ sudo: required
 language: node_js
 
 node_js:
+  - '8'
   - '7'
   - '6'
-  - '5'
 
 install:
   - npm install

docs/configuration.md

@@ -72,14 +72,14 @@ objects are passed to the viewer via `task-opts`.
 |----------------|-------------------|------------|----------------------------------------------------------------------------------------|
 | mode           | String            |            | The task more (see [Annotation Modes](annotations/README.md))                          |
 | tileSource     | String or Object  |            | The tile source specifier (see [Tile Sources](tile_sources.md))                        |
-| target         | String            |            | The target of the annotation (see [Data Model](data_model.md))                         |
+| target         | String or Object  |            | The target of the annotation (see [Data Model](data_model.md))                         |
 | manifest       | String            |  optional  | A IIIF manifest URI used to fill the info modal                                        |
 | objective      | String            |  optional  | The main objective                                                                     |
 | guidance       | String            |  optional  | Additional guidance                                                                    |
 | thumbnailUrl   | String            |  optional  | URL for a thumbnail image to use in the browse modal                                   |
 | id             | String            |  optional  | Task identifier                                                                        |
 | form           | Object            |  optional  | Form properties (see [Forms](configuration.md#forms))                                  |
-| highlights     | Array             |  optional  | Coordinates identifying regions of the image to highlight                              |
+| highlights     | Array             |  optional  | Coordinates identifying regions of the image to highlight. This can also be achived by passing a `FragmentSelector` as part of the `target` object, see the [Data Model](data_model.md) |
 | tag            | String            |  optional  | A tag                                                                                  |
 | classification | String            |  optional  | A Semantic Tag (e.g. [http://purl.org/dc/terms/title](http://purl.org/dc/terms/title)) |
 | complete       | Boolean           |  optional  | Mark the task as complete                                                              |

docs/data_model.md

@@ -20,12 +20,13 @@ type of task.
 
 ## target
 
-The target is specified via the `target` property of each
+The annotation target is specified via the `target` property of each
 [task configuration](configuration.md#tasks).
 
-The String passed as the `target` will be used directly, unless a specific
-fragment of the image is selected, in which case the target will be specified
-with the following properties.
+If a String is passed as the task `target` and a specific fragment is
+subsequently selected, as is the case in select mode, then the target will be
+modified according to the properties below.
+
 
 | Property            | Type             | Description                                                                                                                       |
 |---------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------|

package.json

@@ -1,7 +1,7 @@
 {
   "name": "libcrowds-viewer",
   "description": "A Vue component for crowdsourcing Web Annotations.",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "main": "dist/main.js",
   "author": "Alex Mendes <alexanderhmendes@gmail.com>",
   "license": "MIT",

src/components/Viewer.vue

@@ -404,6 +404,24 @@ export default {
       for (let i = 0; i < task.highlights.length; i++) {
         this.drawHighlight(task.highlights[i], `highlight-${i}`)
       }
+
+      if (this.targetHasFragmentSelector(task)) {
+        const rect = getRectFromFragment(task.target.selector.value)
+        this.drawHighlight(rect, `highlight-${task.highlights.length}`)
+      }
+    },
+
+    /**
+     * Check if a task's target includes a FragmentSelector.
+     * @param {Task} task
+     *   The task.
+     */
+    targetHasFragmentSelector (task) {
+      return (
+        typeof task.target === 'object' &&
+        task.target.hasOwnProperty('selector') &&
+        task.target.selector.type === 'FragmentSelector'
+      )
     },
 
     /**
@@ -708,13 +726,21 @@ export default {
      *   The task.
      */
     fitToBounds (task) {
+      let imgRect = null
       if (task.bounds) {
-        const imgRect = new OpenSeadragon.Rect(
+        imgRect = new OpenSeadragon.Rect(
           task.bounds.x,
           task.bounds.y,
           task.bounds.width,
           task.bounds.height
         )
+      } else if (this.targetHasFragmentSelector(task)) {
+        imgRect = getRectFromFragment(task.target.selector.value)
+        imgRect.x = imgRect.x - 200
+        imgRect.width = imgRect.width + 400
+      }
+
+      if (imgRect) {
         const vpRect = this.viewer.viewport.imageToViewportRectangle(imgRect)
         this.viewer.viewport.fitBounds(vpRect)
       }

src/model/Annotation.js

@@ -73,7 +73,7 @@ class Annotation {
   }
 
   /**
-   * Add a tag to the Body and set the fragement selector, if provided.
+   * Add a tag to the Body and set the fragment selector, if provided.
    * @param {String} value
    *   A plain text value.
    * @param {String} fragment