diff --git a/README.md b/README.md index bf1b47c..eb8c2a8 100644 --- a/README.md +++ b/README.md @@ -58,8 +58,8 @@ The attributes listed below are used in *components.json* to configure **Hotgrid Hotgrid automatically switches to 2 columns in small and medium device mode for the best user experience. ---------------------------- -**Version number:** 3.1.0 -**Framework versions:** 4+ +**Version number:** 4.0.0 +**Framework versions:** 5+ **Author / maintainer:** **Accessibility support:** WAI AA **RTL support:** yes diff --git a/bower.json b/bower.json index 37a8166..412b3d4 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "adapt-hotgrid-audio", - "version": "3.1.0", - "framework": ">=4", + "version": "4.0.0", + "framework": ">=5", "homepage": "https://github.com/deltanet/adapt-hotgrid-audio", "displayName": "Hotgrid Audio", "component": "hotgrid-audio", diff --git a/js/hotgridPopupView.js b/js/hotgridPopupView.js index df96ed5..131f8b8 100644 --- a/js/hotgridPopupView.js +++ b/js/hotgridPopupView.js @@ -8,8 +8,8 @@ define([ className: 'hotgrid-audio-popup', events: { - 'click .hotgrid-close-button': 'closePopup', - 'click .hotgrid-popup-controls': 'onControlClick' + 'click .js-hotgrid-close-btn': 'closePopup', + 'click .js-hotgrid-popup-controls': 'onControlClick' }, initialize: function() { @@ -37,17 +37,16 @@ define([ var shouldEnableNext = index < itemCount - 1 && canCycleThroughPagination; var $controls = this.$('.hotgrid-popup-controls'); - this.$('hotgrid-popup-nav') - .toggleClass('first', !shouldEnableBack) - .toggleClass('last', !shouldEnableNext); + this.$('hotgrid-popup-nav').filter('.back').toggleClass('is-disabled', shouldEnableBack); + this.$('hotgrid-popup-nav').filter('.next').toggleClass('is-disabled', shouldEnableNext); $controls.filter('.back').a11y_cntrl_enabled(shouldEnableBack); $controls.filter('.next').a11y_cntrl_enabled(shouldEnableNext); }, handleTabs: function() { - this.$('.hotgrid-item:not(.active) *').a11y_on(false); - this.$('.hotgrid-item.active *').a11y_on(true); + this.$('.hotgrid-item:not(.is-active) *').a11y_on(false); + this.$('.hotgrid-item.is-active *').a11y_on(true); }, onItemsActiveChange: function(item, _isActive) { @@ -59,14 +58,14 @@ define([ }, applyItemClasses: function(index) { - this.$('.hotgrid-item[data-index="' + index + '"]').addClass('active').removeAttr('aria-hidden'); + this.$('.hotgrid-item[data-index="' + index + '"]').addClass('is-active').removeAttr('aria-hidden'); this.$('.hotgrid-item[data-index="' + index + '"] .notify-popup-title').attr("id", "notify-heading"); - this.$('.hotgrid-item:not([data-index="' + index + '"])').removeClass('active').attr('aria-hidden', 'true'); + this.$('.hotgrid-item:not([data-index="' + index + '"])').removeClass('is-active').attr('aria-hidden', 'true'); this.$('.hotgrid-item:not([data-index="' + index + '"]) .notify-popup-title').removeAttr("id"); }, handleFocus: function(index) { - this.$('.hotgrid-popup-inner .active').a11y_focus(); + this.$('.hotgrid-popup-inner .is-active').a11y_focus(); this.applyNavigationClasses(index); }, @@ -75,7 +74,7 @@ define([ this.$('.hotgrid-item') .filter('[data-index="' + item.get('_index') + '"]') - .addClass('visited'); + .addClass('is-visited'); }, render: function() { diff --git a/js/hotgridView.js b/js/hotgridView.js index a9923a9..0399953 100644 --- a/js/hotgridView.js +++ b/js/hotgridView.js @@ -69,7 +69,7 @@ define([ postRender: function() { this.setUpColumns(); - this.$('.hotgrid-widget').imageready(this.setReadyStatus.bind(this)); + this.$('.hotgrid__widget').imageready(this.setReadyStatus.bind(this)); }, resizeControl: function() { @@ -86,7 +86,7 @@ define([ }, onItemsActiveChange: function(model, _isActive) { - this.getItemElement(model).toggleClass('active', _isActive); + this.getItemElement(model).toggleClass('is-active', _isActive); }, getItemElement: function(model) { @@ -104,7 +104,7 @@ define([ ariaLabel.innerHTML += ' ' + visitedLabel; }); - $item.addClass('visited'); + $item.addClass('is-visited'); }, onItemClicked: function(event) { @@ -128,7 +128,7 @@ define([ model: this.model }); - Adapt.trigger('notify:popup', { + Adapt.notify.popup({ _view: this.popupView, _isCancellable: true, _showCloseButton: false, diff --git a/less/hotgrid-audio.less b/less/hotgrid-audio.less index 6309aee..4b11536 100755 --- a/less/hotgrid-audio.less +++ b/less/hotgrid-audio.less @@ -1,6 +1,6 @@ -.hotgrid-audio-component { +.hotgrid-audio { - .hotgrid-widget { + .hotgrid__widget { // Font size set to 0 so there's no gap between items font-size: 0; position: relative; @@ -11,7 +11,7 @@ display: flex; flex-flow: wrap; justify-content: center; - padding-top: @component-padding / 2; + padding-top: @item-title-margin / 2; } .hotgrid-grid-listitem { @@ -23,6 +23,9 @@ text-align: center; vertical-align: top; width: 100%; + background-color: transparent; + + .button-text; &.hotgrid-item-states-css { .hotgrid-item-image { @@ -35,9 +38,9 @@ } } - &.visited { + &.is-visited { .hotgrid-item-image { - border: 3px solid @item-color-visited; + border: 3px solid @visited; } } } @@ -62,7 +65,7 @@ } } - &.visited { + &.is-visited { img.hotgrid-item-image-default { display: none !important; } @@ -92,14 +95,14 @@ .hotgrid-item-title { text-align: center; color: @font-color; - font-size: @body-text-font-size; - padding: @component-padding/2; + font-weight: @font-weight-bold; + padding: @item-title-margin/2; } &.item-titles { .hotgrid-grid-item { .hotgrid-item-title { - color: @item-text-color; + color: @item-color-inverted; background-color: @item-color; font-weight: @font-weight-bold; } @@ -107,16 +110,16 @@ .no-touch & { &:hover { .hotgrid-item-title { - color: @item-text-color-hover; + color: @item-color-inverted-hover; background-color: @item-color-hover; } } } - &.visited { + &.is-visited { .hotgrid-item-title { - color: @item-text-color-visited; - background-color: @item-color-visited; + color: @visited-inverted; + background-color: @visited; } } } @@ -125,44 +128,32 @@ .hotgrid-audio-popup { - .hotgrid-item:not(.active) { + .hotgrid-item:not(.is-active) { display: none; } - .notify-popup-title { - text-align: center; - padding-right: 0 !important; - } - - .notify-popup-buttons { - margin-top: 0 !important; - } - .hotgrid-popup-body { - padding-bottom: @notify-padding-bottom; - font-size: @body-text-font-size; + padding-bottom: @notify-padding-ver; + float: left; - text-align: left; .dir-rtl & { float: right; - text-align: right; } + width: 60%; overflow: hidden; @media (max-width: @device-width-medium) { width: 100%; - padding-bottom: (@notify-padding-bottom / 3); } - &.fullwidth { + &.is-fullwidth { width: 100%; } } .hotgrid-popup-graphic { float: right; - padding-bottom: @button-padding-bottom; width: 38%; margin-left: 2%; @@ -184,42 +175,37 @@ margin-right: auto; } - &.fullwidth { + &.is-fullwidth { width: 100%; margin-left: 0px; } - &.hidden { + &.is-hidden { display: none; } } .hotgrid-popup-nav { - margin-top: @button-margin-top; + position: relative; + margin-top: @btn-margin; clear: both; } .hotgrid-popup-controls { - display: block; - width: (@icon-size*2); - height: (@icon-size*2); - position: absolute; - text-decoration: none; - background-color: @notify-button-color; - - .icon { - margin: (@icon-size/2); - color: @notify-button-text-color; - } + position: absolute; + border-radius: @btn-border-radius; - .no-touch &:hover { - background-color: @notify-button-color-hover; - .icon { - color: @notify-button-text-color-hover; - } - } + padding: @btn-padding / 2; + background-color: @notify-icon; + color: @notify-icon-inverted; + + .no-touch &:hover { + background-color: @notify-icon-hover; + color: @notify-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); + } - &.disabled { + &.is-disabled { visibility: hidden; } } diff --git a/templates/hotgrid-audio.hbs b/templates/hotgrid-audio.hbs index 543f673..5d961a1 100755 --- a/templates/hotgrid-audio.hbs +++ b/templates/hotgrid-audio.hbs @@ -1,11 +1,11 @@ -
+
{{> component this}} -
+
-
+
{{#each _items}}
-
{{/if}}
+
{{/each}} diff --git a/templates/hotgridPopup.hbs b/templates/hotgridPopup.hbs index a60a7a1..b6396ad 100644 --- a/templates/hotgridPopup.hbs +++ b/templates/hotgridPopup.hbs @@ -1,22 +1,22 @@ -
+
{{#each _items}} -
+
{{#if title}} - -
+ +
{{{title}}}
{{/if}} {{#if body}} -
+
{{{compile body}}}
{{/if}} {{#if _itemGraphic.src}} -
+
@@ -27,18 +27,23 @@ {{/if}}
{{/each}} - {{#if _canCycleThroughPagination}} -
- - -
- {{/if}}
-
- + +{{#if _canCycleThroughPagination}} +
+ + +
+{{/if}} + +
+
+ {{a11y_wrap_focus}}