diff --git a/README.md b/README.md
index c83f560..f339b86 100644
--- a/README.md
+++ b/README.md
@@ -86,7 +86,7 @@ When viewport size changes to the smallest range, this component will behave lik
----------------------------
-**Version number:** 2.0.6 
+**Version number:** 2.0.7
**Framework versions:** 2.0
**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-hotgraphic/graphs/contributors)
**Accessibility support:** WAI AA
diff --git a/bower.json b/bower.json
index 0e1a78c..eb42f5c 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "adapt-contrib-hotgraphic",
- "version": "2.0.6",
+ "version": "2.0.7",
"framework": "^2.0.0",
"homepage": "https://github.com/adaptlearning/adapt-contrib-hotgraphic",
"issues": "https://github.com/adaptlearning/adapt_framework/issues/new?title=contrib-hotgraphic%3A%20please%20enter%20a%20brief%20summary%20of%20the%20issue%20here&body=please%20provide%20a%20full%20description%20of%20the%20problem,%20including%20steps%20on%20how%20to%20replicate,%20what%20browser(s)/device(s)%20the%20problem%20occurs%20on%20and,%20where%20helpful,%20screenshots.",
diff --git a/js/adapt-contrib-hotgraphic.js b/js/adapt-contrib-hotgraphic.js
index 79c8a23..ae88c47 100644
--- a/js/adapt-contrib-hotgraphic.js
+++ b/js/adapt-contrib-hotgraphic.js
@@ -5,11 +5,19 @@ define(function(require) {
var HotGraphic = ComponentView.extend({
+ isPopupOpen: false,
+
initialize: function() {
this.listenTo(Adapt, 'remove', this.remove);
this.listenTo(this.model, 'change:_isVisible', this.toggleVisibility);
+ this.listenTo(Adapt, 'accessibility:toggle', this.onAccessibilityToggle);
+
this.model.set('_globals', Adapt.course.get('_globals'));
+
+ _.bindAll(this, 'onKeyUp');
+
this.preRender();
+
if (this.model.get('_canCycleThroughPagination') === undefined) {
this.model.set('_canCycleThroughPagination', false);
}
@@ -22,8 +30,8 @@ define(function(require) {
events: function() {
return {
- 'click .hotgraphic-graphic-pin': 'openHotGraphic',
- 'click .hotgraphic-popup-done': 'closeHotGraphic',
+ 'click .hotgraphic-graphic-pin': 'onPinClicked',
+ 'click .hotgraphic-popup-done': 'closePopup',
'click .hotgraphic-popup-nav .back': 'previousHotGraphic',
'click .hotgraphic-popup-nav .next': 'nextHotGraphic'
}
@@ -142,30 +150,46 @@ define(function(require) {
},
- openHotGraphic: function (event) {
- event.preventDefault();
+ onPinClicked: function (event) {
+ if(event) event.preventDefault();
+
this.$('.hotgraphic-popup-inner').a11y_on(false);
- var currentHotSpot = $(event.currentTarget).data('id');
this.$('.hotgraphic-item').hide().removeClass('active');
- this.$('.'+currentHotSpot).show().addClass('active');
+
+ var $currentHotSpot = this.$('.' + $(event.currentTarget).data('id'));
+ $currentHotSpot.show().addClass('active');
+
var currentIndex = this.$('.hotgraphic-item.active').index();
this.setVisited(currentIndex);
- this.$('.hotgraphic-popup-count .current').html(currentIndex+1);
+
+ this.openPopup();
+
+ this.applyNavigationClasses(currentIndex);
+ },
+
+ openPopup: function() {
+ var currentIndex = this.$('.hotgraphic-item.active').index();
+ this.$('.hotgraphic-popup-count .current').html(currentIndex + 1);
this.$('.hotgraphic-popup-count .total').html(this.$('.hotgraphic-item').length);
- this.$('.hotgraphic-popup').attr('class', 'hotgraphic-popup ' + 'item-' + currentIndex);
- this.$('.hotgraphic-popup').show();
+ this.$('.hotgraphic-popup').attr('class', 'hotgraphic-popup item-' + currentIndex).show();
this.$('.hotgraphic-popup-inner .active').a11y_on(true);
+
+ this.isPopupOpen = true;
Adapt.trigger('popup:opened', this.$('.hotgraphic-popup-inner'));
this.$('.hotgraphic-popup-inner .active').a11y_focus();
- this.applyNavigationClasses(currentIndex);
+
+ this.setupEscapeKey();
},
- closeHotGraphic: function(event) {
- event.preventDefault();
- var currentIndex = this.$('.hotgraphic-item.active').index();
+ closePopup: function(event) {
+ if(event) event.preventDefault();
+
this.$('.hotgraphic-popup').hide();
+
+ this.isPopupOpen = false;
+
Adapt.trigger('popup:closed', this.$('.hotgraphic-popup-inner'));
},
@@ -250,6 +274,28 @@ define(function(require) {
} else {
this.$('.component-widget').on('inview', _.bind(this.inview, this));
}
+ },
+
+ setupEscapeKey: function() {
+ var hasAccessibility = Adapt.config.has('_accessibility') && Adapt.config.get('_accessibility')._isActive;
+
+ if (!hasAccessibility && this.isPopupOpen) {
+ $(window).on("keyup", this.onKeyUp);
+ } else {
+ $(window).off("keyup", this.onKeyUp);
+ }
+ },
+
+ onAccessibilityToggle: function() {
+ this.setupEscapeKey();
+ },
+
+ onKeyUp: function(event) {
+ if (event.which != 27) return;
+
+ event.preventDefault();
+
+ this.closePopup();
}
});
@@ -258,4 +304,4 @@ define(function(require) {
return HotGraphic;
-});
+});
\ No newline at end of file