Merge pull request #131 from adaptlearning/issue/#938

amend to allow popup to be closed by Esc keypress
adaptlearning · Jul 12, 2016 · 070ba18 · 070ba18
2 parents b248532 + e65e56e
commit 070ba18
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 16 deletions.
diff --git 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   <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a> 
+**Version number:**  2.0.7   <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a> 
 **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
@@ -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
@@ -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;
 
-});
+});