Merge pull request #86 from adaptlearning/issue/#85

Update to include _canCycleThroughPagination

.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-contrib-hotgraphic",
-  "version": "1.1.3",
+  "version": "1.1.6",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-hotgraphic",
   "authors": [
     "Kevin Corry <[email protected]>"

README.md

@@ -41,6 +41,10 @@ This defines the position of the component in the block. Values can be `full`, `
 
 Hides the previous and next actions and progress indicator from the toolbar.
 
+####_canCycleThroughPagination
+
+Enables the popups to be cycled through. e.g. going from item 3 back around to item 1.
+
 ####_useGraphicsAsPins
 
 When this is set to true, the item graphics can be used as 'pins'.  When this is set to 'false' (per default), a main poster image is displayed, with pins overlayed to trigger the hot spots.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-contrib-hotgraphic",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-hotgraphic",
   "authors": [
     "Kevin Corry <[email protected]>"

example.json

@@ -11,6 +11,7 @@
       "mobileBody": "This is optional body text that will be shown when viewed on mobile.",
       "instruction":"",
       "_useGraphicsAsPins": false, 
+      "_canCycleThroughPagination": false, 
       "_graphic": {
         "src": "hot_graphic.jpg",
         "alt": "alt text",

js/adapt-contrib-hotgraphic.js

@@ -13,6 +13,9 @@ define(function(require) {
       this.listenTo(Adapt, 'remove', this.remove);
       this.listenTo(this.model, 'change:_isVisible', this.toggleVisibility);
       this.preRender();
+      if (this.model.get('_canCycleThroughPagination') === undefined) {
+        this.model.set('_canCycleThroughPagination', false);
+      }
       if (Adapt.device.screenSize=='large') {
         this.render();
       } else {
@@ -109,24 +112,30 @@ define(function(require) {
     previousHotGraphic: function (event) {
       event.preventDefault();
       var currentIndex = this.$('.hotgraphic-item.active').index();
-      if (currentIndex > 0) {
-        this.$('.hotgraphic-item.active').hide().removeClass('active');
-        this.$('.hotgraphic-item').eq(currentIndex-1).show().addClass('active');
-        this.setVisited(currentIndex-1);
-        this.$('.hotgraphic-popup-count .current').html(currentIndex);
+      if (currentIndex === 0 && !this.model.get('_canCycleThroughPagination')) {
+        return;
+      } else if (currentIndex === 0 && this.model.get('_canCycleThroughPagination')) {
+        currentIndex = this.model.get('_items').length;
       }
+      this.$('.hotgraphic-item.active').hide().removeClass('active');
+      this.$('.hotgraphic-item').eq(currentIndex-1).show().addClass('active');
+      this.setVisited(currentIndex-1);
+      this.$('.hotgraphic-popup-count .current').html(currentIndex);
       this.applyNavigationClasses(currentIndex-1);
     },
 
     nextHotGraphic: function (event) {
       event.preventDefault();
       var currentIndex = this.$('.hotgraphic-item.active').index();
-      if (currentIndex < (this.$('.hotgraphic-item').length-1)) {
-        this.$('.hotgraphic-item.active').hide().removeClass('active');
-        this.$('.hotgraphic-item').eq(currentIndex+1).show().addClass('active');
-        this.setVisited(currentIndex+1);
-        this.$('.hotgraphic-popup-count .current').html(currentIndex+2);
+      if (currentIndex === (this.model.get('_items').length-1) && !this.model.get('_canCycleThroughPagination')) {
+        return;
+      } else if (currentIndex === (this.model.get('_items').length-1) && this.model.get('_canCycleThroughPagination')) {
+        currentIndex = -1;
       }
+      this.$('.hotgraphic-item.active').hide().removeClass('active');
+      this.$('.hotgraphic-item').eq(currentIndex+1).show().addClass('active');
+      this.setVisited(currentIndex+1);
+      this.$('.hotgraphic-popup-count .current').html(currentIndex+2);
       this.applyNavigationClasses(currentIndex+1);
     },
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-contrib-hotgraphic",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "A contributed hot graphic component that enables a user to click on hot spots over an image and display a detailed popup that includes an image with text.",
   "main": "",
   "scripts": {

properties.schema

@@ -59,6 +59,15 @@
       "validators": [],
       "help": "If set to 'true', the progress indicator and previous and next links will not be shown on the popup toolbar"
     },
+    "_canCycleThroughPagination": {
+      "type":"boolean",
+      "required":true,
+      "default": false,
+      "title": "Cycle through item pagination",
+      "inputType": {"type": "Boolean", "options": [false, true]},
+      "validators": [],
+      "help": "If set to 'true', the items in the open up with be allowed to cycle through continiously"
+    },
     "_useGraphicsAsPins": {
       "type":"boolean",
       "required":true,