Fixes #50

README.md

@@ -26,6 +26,8 @@ The attributes listed below are used in *components.json* to configure **Hotgrid
 
 **_canCycleThroughPagination** (boolean): If set to 'true', learner can cycle through items.  
 
+**_paginationPosition** (string): This defines where the item pagination will be positioned within the popup. Options are `top`, `middle` and `bottom`.  
+
 **_showItemTitleBackground** (boolean): If set to 'true', the item titles will have a background colour applied to them.  
 
 **Hotgrid Audio** has a dynamic layout system. If you have 5 items but set the columns to 3, 3 items will be put in the first row and 2 on the second. The second row then will be automatically centered. This works with any amount of items and columns - ie that last row will always be centred for you.
@@ -46,13 +48,13 @@ The attributes listed below are used in *components.json* to configure **Hotgrid
 
 >**_itemGraphic** (string): This `_itemGraphic` attributes group stores the properties for the items popup graphic. This contains values **_position**, **src**, **alt** and **attribution**.  
 
->**_position** (string): This defines when the image will be positioned in the popup. Options are `top`, `bottom`, `left` and `right`.  
+>>**_position** (string): This defines where the image will be positioned in the popup. Options are `top`, `bottom`, `left` and `right`.  
 
 >>**src** (string): File name (including path) of the asset for the item. Path should be relative to the *src* folder.  
 
 >>**alt** (string): This text becomes the image’s `alt` attribute.
 
->**attribution** (string): Optional text to be displayed as an [attribution](https://wiki.creativecommons.org/Best_practices_for_attribution). By default it is displayed below the image. Adjust positioning by modifying CSS.
+>>**attribution** (string): Optional text to be displayed as an [attribution](https://wiki.creativecommons.org/Best_practices_for_attribution). By default it is displayed below the image. Adjust positioning by modifying CSS.
 
 ### Accessibility
 **Hotgrid Audio** has a label assigned using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) attribute: **ariaRegion**. These labels are not visible elements. They are utilized by assistive technology such as screen readers. This label is included within the *example.json* and may need to be added to the _globals in *course.json*.

example.json

@@ -13,6 +13,7 @@
         "_columns": 4,
         "_showItemTitleBackground": false,
         "_canCycleThroughPagination": true,
+        "_paginationPosition": "bottom",
         "_items": [
             {
                 "title": "Grid Item 1",

js/hotgridPopupView.js

@@ -23,6 +23,7 @@ class HotgridPopupView extends Backbone.View {
       'change:_isVisited': this.onItemsVisitedChange
     });
 
+    // Graphic position
     this.model.get('_items').forEach(item => {
       let position = item._itemGraphic._position ? item._itemGraphic._position : 'right';
 
@@ -107,6 +108,12 @@ class HotgridPopupView extends Backbone.View {
     data.view = this;
     const template = Handlebars.templates[this.constructor.template];
     this.$el.html(template(data));
+
+    if (this.model.get('_paginationPosition')) {
+      this.$el.addClass('pagination-'+this.model.get('_paginationPosition'));
+    } else {
+      this.$el.addClass('pagination-bottom');
+    }
   }
 
   closePopup() {

less/hotgrid-audio.less

@@ -254,16 +254,57 @@
 		}
 	}
 
-	.hotgrid-popup-nav {
-		position: relative;
-		margin-top: @notify-padding-ver;
-		clear: both;
-
-		&.is-top {
-			position: absolute;
-			margin-top: 0;
-			top: 0;
-			width: 100%;
+	&.pagination-top {
+		@media (min-width: @device-width-small) {
+			.hotgrid-popup-inner {
+				margin-top: @notify-padding-ver;
+			}
+
+			.notify__title {
+				margin-left: unit(@icon-size + @btn-padding + @btn-padding, rem);
+				margin-right: unit(@icon-size + @btn-padding + @btn-padding, rem);
+			}
+
+			.hotgrid-popup-nav {
+				position: absolute;
+				margin-top: 0;
+				top: @notify-padding-ver;
+				left: @notify-padding-hoz;
+				right: @notify-padding-hoz;
+			}
+		}
+
+		@media (max-width: @device-width-small) {
+			.pagination-bottom;
+		}
+	}
+
+	&.pagination-middle {
+		@media (min-width: @device-width-small) {
+			.hotgrid-popup-inner {
+				margin-left: unit(@icon-size + @btn-padding + @btn-padding, rem);
+				margin-right: unit(@icon-size + @btn-padding + @btn-padding, rem);
+			}
+
+			.hotgrid-popup-nav {
+				position: absolute;
+				left: @btn-padding;
+				right: @btn-padding;
+				top: 50%;
+				margin-top: -@btn-padding;
+			}
+		}
+
+		@media (max-width: @device-width-small) {
+			.pagination-bottom;
+		}
+	}
+
+	&.pagination-bottom {
+		.hotgrid-popup-nav {
+			position: relative;
+			margin-top: @notify-padding-ver;
+			clear: both;
 		}
 	}
 

properties.schema

@@ -60,10 +60,18 @@
       "type": "boolean",
       "required": true,
       "default": true,
-      "title": "Item pagination",
+      "title": "Item Pagination",
       "inputType": "Checkbox",
       "validators": [],
-      "help": "If enabled, the learner can cycle through items."
+      "help": "If enabled, the learner can cycle through the items."
+    },
+    "_paginationPosition": {
+      "type": "string",
+      "required": false,
+      "default": "bottom",
+      "title": "Pagination Position",
+      "inputType": {"type": "Select", "options": ["top", "middle", "bottom"]},
+      "validators": []
     },
     "_showItemTitleBackground": {
       "type": "boolean",

templates/hotgridPopup.hbs

@@ -1,4 +1,4 @@
-<div class="hotgrid-popup-inner u-clearfix">
+<div class="hotgrid-popup-inner">
   {{#each _items}}
   <div class="hotgrid-item component-item u-clearfix{{#if _itemGraphic._position}} graphic-{{_itemGraphic._position}} {{/if}}{{#if _itemGraphic._position}}is-visited{{/if}} {{#if _isActive}}is-active{{/if}} {{_classes}}" data-index={{@index}}>
 
@@ -77,7 +77,7 @@
 </div>
 
 {{#if _canCycleThroughPagination}}
-<div class="hotgrid-popup-nav {{_navLocation}}">
+<div class="hotgrid-popup-nav">
     <button class="btn-icon hotgrid-popup-controls back js-hotgrid-popup-controls" aria-label="{{_globals._accessibility._ariaLabels.previous}}">
         <div class="icon icon-controls-left"></div>
     </button>