Mobile hotgraphic view support (#203)

README.md

@@ -49,6 +49,8 @@ guide the learner’s interaction with the component.
 
 **\_hidePagination** (boolean): When set to `true`, hides the "previous" and "next" icons and progress indicator (e.g., "1/5") on the pop-up's toolbar. The default is `false`.
 
+**\_isNarrativeOnMobile** (boolean): When set to `false` the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in mobile view instead of being replaced by a Narrative interaction. The default is `true`.
+
 **\_useNumberedPins** (boolean): If set to `true`, the pin icons will be replaced with the item number. Useful if you want pins to be visited in a set order or show steps in a process. The default is `false`.
 
 **\_useGraphicsAsPins** (boolean): If set to `true`, the image specified by **\_graphic.src** will be ignored and the popup images specified in **\_items[n].\_graphic.src** will instead be laid out in a 2 item width grid system. See [example.json](example.json#L77-L121) for a working example. The default is `false`.

example.json

@@ -17,6 +17,7 @@
         "_setCompletionOn": "allItems",
         "_canCycleThroughPagination": false,
         "_hidePagination": false,
+        "_isNarrativeOnMobile": true,
         "_useNumberedPins": false,
         "_useGraphicsAsPins": false,
         "_isRound": false,

js/hotgraphicPopupView.js

@@ -12,7 +12,7 @@ define([
       return {
         'click .js-hotgraphic-popup-close': 'closePopup',
         'click .js-hotgraphic-controls-click': 'onControlClick'
-      }
+      };
     }
 
     initialize(...args) {

js/hotgraphicView.js

@@ -9,7 +9,7 @@ define([
     events () {
       return {
         'click .js-hotgraphic-item-click': 'onPinClicked'
-      }
+      };
     }
 
     initialize(...args) {
@@ -42,7 +42,7 @@ define([
     }
 
     reRender() {
-      if (Adapt.device.screenSize === 'large') return;
+      if (Adapt.device.screenSize === 'large' || this.model.get('_isNarrativeOnMobile') === false) return;
 
       this.replaceWithNarrative();
     }

less/hotgraphic.less

@@ -9,6 +9,11 @@
     position: absolute;
     top: 0;
     left: 0;
+    padding: @icon-padding / 2;
+
+    @media (min-width: @device-width-medium) {
+      padding: @icon-padding;
+    }
   }
 
   &__pin .icon {

properties.schema

@@ -120,6 +120,15 @@
       "validators": [],
       "help": "If enabled, the popup navigation buttons will cycle continuously through the popup items (i.e. clicking next whilst on the last item will cause the first item to be shown."
     },
+    "_isNarrativeOnMobile": {
+      "type": "boolean",
+      "required": true,
+      "default": true,
+      "title": "Render as Narrative on mobile?",
+      "inputType": "Checkbox",
+      "validators": [],
+      "help": "If disabled, the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in 'mobile' view instead of being replaced by a Narrative interaction."
+    },
     "_useNumberedPins": {
       "type": "boolean",
       "required": true,