Skip to content

Commit

Permalink
Fixes #45
Browse files Browse the repository at this point in the history
  • Loading branch information
@RobertPeek
RobertPeek committed Feb 17, 2022
1 parent 5ce1b7c commit a1cbf38
Show file tree
Hide file tree
Showing 3 changed files with 303 additions and 302 deletions.
16 changes: 6 additions & 10 deletions js/adapt-hotgrid-audio.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import Adapt from 'core/js/adapt';
import HotgridView from './hotgridView';
import ItemsComponentModel from 'core/js/models/itemsComponentModel';

define([
'core/js/adapt',
'core/js/models/itemsComponentModel',
'./hotgridView'
], function(Adapt, ItemsComponentModel, HotgridView) {

return Adapt.register('hotgrid-audio', {
model: ItemsComponentModel,
view: HotgridView
});
export default Adapt.register('hotgrid-audio', {
model: ItemsComponentModel.extend({}),
view: HotgridView
});
286 changes: 143 additions & 143 deletions js/hotgridPopupView.js
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,144 @@
define([
'core/js/adapt'
], function(Adapt) {
'use strict';

var HotgridPopupView = Backbone.View.extend({

className: 'hotgrid-audio-popup',

events: {
'click .js-hotgrid-close-btn': 'closePopup',
'click .js-hotgrid-popup-controls': 'onControlClick'
},

initialize: function() {
// Debounce required as a second (bad) click event is dispatched on iOS causing a jump of two items.
this.onControlClick = _.debounce(this.onControlClick.bind(this), 100);
this.listenToOnce(Adapt, 'notify:opened', this.onOpened);
this.listenTo(this.model.get('_children'), {
'change:_isActive': this.onItemsActiveChange,
'change:_isVisited': this.onItemsVisitedChange
});
this.render();
},

onOpened: function() {
this.applyNavigationClasses(this.model.getActiveItem().get('_index'));
this.handleTabs();
this.playAudio(this.model.getActiveItem().get('_index'));
},

applyNavigationClasses: function (index) {
var itemCount = this.model.get('_items').length;
var canCycleThroughPagination = this.model.get('_canCycleThroughPagination');

var shouldEnableBack = (canCycleThroughPagination && index > 0) || false;
var shouldEnableNext = (canCycleThroughPagination && index < itemCount - 1) || false;
var $controls = this.$('.hotgrid-popup-controls');

this.$('hotgrid-popup-controls')
.toggleClass('.back', !shouldEnableBack)
.toggleClass('.next', !shouldEnableNext);

Adapt.a11y.toggleAccessibleEnabled($controls.filter('.back'), shouldEnableBack);
Adapt.a11y.toggleAccessibleEnabled($controls.filter('.next'), shouldEnableNext);
},

handleTabs: function() {
Adapt.a11y.toggleHidden(this.$('.hotgrid-item:not(.is-active)'), true);
Adapt.a11y.toggleHidden(this.$('.hotgrid-item.is-active'), false);
},

onItemsActiveChange: function(item, _isActive) {
if (!_isActive) return;
var index = item.get('_index');
this.handleTabs();
this.applyItemClasses(index);
this.handleFocus(index);
},

applyItemClasses: function(index) {
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('is-active').attr('aria-hidden', 'true');
this.$('.hotgrid-item:not([data-index="' + index + '"]) .notify-popup-title').removeAttr("id");
},

handleFocus: function(index) {
Adapt.a11y.focusFirst(this.$('.hotgrid-popup-inner .is-active'));
this.applyNavigationClasses(index);
},

onItemsVisitedChange: function(item, _isVisited) {
if (!_isVisited) return;

this.$('.hotgrid-item')
.filter('[data-index="' + item.get('_index') + '"]')
.addClass('is-visited');
},

render: function() {
var data = this.model.toJSON();
data.view = this;
var template = Handlebars.templates['hotgridPopup'];
this.$el.html(template(data));
},

closePopup: function(event) {
Adapt.trigger('notify:close');
},

onControlClick: function(event) {
event.preventDefault();

var direction = $(event.currentTarget).hasClass('back') ? 'back' : 'next';
var index = this.getNextIndex(direction);

if (index !== -1) {
this.setItemState(index);
}

this.playAudio(index);

Adapt.trigger('notify:resize');
},

getNextIndex: function(direction) {
var index = this.model.getActiveItem().get('_index');
var lastIndex = this.model.get('_items').length - 1;

switch (direction) {
case 'back':
if (index > 0) return --index;
if (this.model.get('_canCycleThroughPagination')) return lastIndex;
break;
case 'next':
if (index < lastIndex) return ++index;
if (this.model.get('_canCycleThroughPagination')) return 0;
}
return -1;
},

setItemState: function(index) {
this.model.getActiveItem().toggleActive();

var nextItem = this.model.getItem(index);
nextItem.toggleActive();
nextItem.toggleVisited(true);
},

playAudio: function(index) {
var currentItem = this.model.getItem(index);

if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status==1) {
Adapt.audio.audioClip[this.model.get('_audio')._channel].onscreenID = "";
Adapt.trigger('audio:playAudio', currentItem.get('_audio').src, this.model.get('_id'), this.model.get('_audio')._channel);
}
}

import Adapt from 'core/js/adapt';

class HotgridPopupView extends Backbone.View {

className() {
return 'hotgrid-audio-popup';
}

events() {
return {
'click .js-hotgrid-close-btn': 'closePopup',
'click .js-hotgrid-popup-controls': 'onControlClick'
};
}

initialize(...args) {
super.initialize(...args);
// Debounce required as a second (bad) click event is dispatched on iOS causing a jump of two items.
this.onControlClick = _.debounce(this.onControlClick.bind(this), 100);
this.listenToOnce(Adapt, 'notify:opened', this.onOpened);
this.listenTo(this.model.get('_children'), {
'change:_isActive': this.onItemsActiveChange,
'change:_isVisited': this.onItemsVisitedChange
});

return HotgridPopupView;

});
this.render();
}

onOpened() {
this.applyNavigationClasses(this.model.getActiveItem().get('_index'));
this.handleTabs();
this.playAudio(this.model.getActiveItem().get('_index'));
}

applyNavigationClasses(index) {
const itemCount = this.model.get('_items').length;
const canCycleThroughPagination = this.model.get('_canCycleThroughPagination');

const shouldEnableBack = (canCycleThroughPagination && index > 0) || false;
const shouldEnableNext = (canCycleThroughPagination && index < itemCount - 1) || false;
const $controls = this.$('.hotgrid-popup-controls');

this.$('hotgrid-popup-controls')
.toggleClass('.back', !shouldEnableBack)
.toggleClass('.next', !shouldEnableNext);

Adapt.a11y.toggleAccessibleEnabled($controls.filter('.back'), shouldEnableBack);
Adapt.a11y.toggleAccessibleEnabled($controls.filter('.next'), shouldEnableNext);
}

handleTabs() {
Adapt.a11y.toggleHidden(this.$('.hotgrid-item:not(.is-active)'), true);
Adapt.a11y.toggleHidden(this.$('.hotgrid-item.is-active'), false);
}

onItemsActiveChange(item, _isActive) {
if (!_isActive) return;
const index = item.get('_index');
this.handleTabs();
this.applyItemClasses(index);
this.handleFocus(index);
}

applyItemClasses(index) {
this.$(`.hotgrid-item[data-index="${index}"]`).addClass('is-active').removeAttr('aria-hidden');
this.$(`.hotgrid-item[data-index="${index}"] .notify__title`).attr('id', 'notify-heading');
this.$(`.hotgrid-item:not([data-index="${index}"])`).removeClass('is-active').attr('aria-hidden', 'true');
this.$(`.hotgrid-item:not([data-index="${index}"]) .notify__title`).removeAttr('id');
}

handleFocus(index) {
Adapt.a11y.focusFirst(this.$('.hotgrid-popup-inner .is-active'));
this.applyNavigationClasses(index);
}

onItemsVisitedChange(item, _isVisited) {
if (!_isVisited) return;

this.$('.hotgrid-item')
.filter(`[data-index="${item.get('_index')}"]`)
.addClass('is-visited');
}

render() {
const data = this.model.toJSON();
data.view = this;
const template = Handlebars.templates[this.constructor.template];
this.$el.html(template(data));
}

closePopup() {
Adapt.trigger('notify:close');
}

onControlClick(event) {
const direction = $(event.currentTarget).hasClass('back') ? 'back' : 'next';
const index = this.getNextIndex(direction);

if (index !== -1) {
this.setItemState(index);
}

this.playAudio(index);

Adapt.trigger('notify:resize');
}

getNextIndex(direction) {
let index = this.model.getActiveItem().get('_index');
const lastIndex = this.model.get('_items').length - 1;

switch (direction) {
case 'back':
if (index > 0) return --index;
if (this.model.get('_canCycleThroughPagination')) return lastIndex;
break;
case 'next':
if (index < lastIndex) return ++index;
if (this.model.get('_canCycleThroughPagination')) return 0;
}
return -1;
}

setItemState(index) {
this.model.getActiveItem().toggleActive();

const nextItem = this.model.getItem(index);
nextItem.toggleActive();
nextItem.toggleVisited(true);
}

playAudio(index) {
const currentItem = this.model.getItem(index);

if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status==1) {
Adapt.audio.audioClip[this.model.get('_audio')._channel].onscreenID = "";
Adapt.trigger('audio:playAudio', currentItem.get('_audio').src, this.model.get('_id'), this.model.get('_audio')._channel);
}
}

}

HotgridPopupView.template = 'hotgridPopup';

export default HotgridPopupView;
Loading

0 comments on commit a1cbf38

Please sign in to comment.