diff --git a/README.md b/README.md index 83439cb..0ae358d 100644 --- a/README.md +++ b/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*. diff --git a/example.json b/example.json index 2d34474..4c163b9 100644 --- a/example.json +++ b/example.json @@ -13,6 +13,7 @@ "_columns": 4, "_showItemTitleBackground": false, "_canCycleThroughPagination": true, + "_paginationPosition": "bottom", "_items": [ { "title": "Grid Item 1", diff --git a/js/hotgridPopupView.js b/js/hotgridPopupView.js index 59c7b1e..f01c700 100644 --- a/js/hotgridPopupView.js +++ b/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() { diff --git a/less/hotgrid-audio.less b/less/hotgrid-audio.less index 54cfe4e..97f267d 100755 --- a/less/hotgrid-audio.less +++ b/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; } } diff --git a/properties.schema b/properties.schema index 9b2b271..f12e7b0 100644 --- a/properties.schema +++ b/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", diff --git a/templates/hotgridPopup.hbs b/templates/hotgridPopup.hbs index 5057443..0817331 100644 --- a/templates/hotgridPopup.hbs +++ b/templates/hotgridPopup.hbs @@ -1,4 +1,4 @@ -
+
{{#each _items}}
@@ -77,7 +77,7 @@
{{#if _canCycleThroughPagination}} -
+