From e02d4350a32d9c24778a062f26a94a7b80a086dc Mon Sep 17 00:00:00 2001 From: moloko Date: Mon, 23 May 2016 17:35:38 +0100 Subject: [PATCH 1/4] spot of refactoring first prior to implementing esc key press --- js/adapt-contrib-hotgraphic.js | 49 +++++++++++++++++++++++----------- 1 file changed, 33 insertions(+), 16 deletions(-) diff --git a/js/adapt-contrib-hotgraphic.js b/js/adapt-contrib-hotgraphic.js index 79c8a23..57ba374 100644 --- a/js/adapt-contrib-hotgraphic.js +++ b/js/adapt-contrib-hotgraphic.js @@ -8,8 +8,11 @@ define(function(require) { initialize: function() { this.listenTo(Adapt, 'remove', this.remove); this.listenTo(this.model, 'change:_isVisible', this.toggleVisibility); + this.model.set('_globals', Adapt.course.get('_globals')); + this.preRender(); + if (this.model.get('_canCycleThroughPagination') === undefined) { this.model.set('_canCycleThroughPagination', false); } @@ -22,8 +25,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 +145,42 @@ 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); }, - closeHotGraphic: function(event) { - event.preventDefault(); - var currentIndex = this.$('.hotgraphic-item.active').index(); + closePopup: function(event) { + if(event) event.preventDefault(); + this.$('.hotgraphic-popup').hide(); + Adapt.trigger('popup:closed', this.$('.hotgraphic-popup-inner')); }, @@ -231,8 +246,10 @@ define(function(require) { }, checkCompletionStatus: function() { - if (this.getVisitedItems().length == this.model.get('_items').length) { - this.trigger('allItems'); + if (!this.model.get('_isComplete')) { + if (this.getVisitedItems().length == this.model.get('_items').length) { + this.trigger('allItems'); + } } }, @@ -258,4 +275,4 @@ define(function(require) { return HotGraphic; -}); +}); \ No newline at end of file From cfd66dc4d18773c079758fe56993d9a027bfee5e Mon Sep 17 00:00:00 2001 From: moloko Date: Mon, 23 May 2016 17:49:36 +0100 Subject: [PATCH 2/4] allow hot graphic to be closed with Esc keypress --- js/adapt-contrib-hotgraphic.js | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/js/adapt-contrib-hotgraphic.js b/js/adapt-contrib-hotgraphic.js index 57ba374..a8af665 100644 --- a/js/adapt-contrib-hotgraphic.js +++ b/js/adapt-contrib-hotgraphic.js @@ -5,12 +5,17 @@ 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) { @@ -158,7 +163,7 @@ define(function(require) { this.setVisited(currentIndex); this.openPopup(); - + this.applyNavigationClasses(currentIndex); }, @@ -174,6 +179,8 @@ define(function(require) { Adapt.trigger('popup:opened', this.$('.hotgraphic-popup-inner')); this.$('.hotgraphic-popup-inner .active').a11y_focus(); + + this.setupEscapeKey(); }, closePopup: function(event) { @@ -181,6 +188,8 @@ define(function(require) { this.$('.hotgraphic-popup').hide(); + this.isPopupOpen = false; + Adapt.trigger('popup:closed', this.$('.hotgraphic-popup-inner')); }, @@ -267,6 +276,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(); } }); From 53e68ebbf9d35f973aeb7bc45477009bbee0d765 Mon Sep 17 00:00:00 2001 From: moloko Date: Mon, 23 May 2016 17:50:05 +0100 Subject: [PATCH 3/4] version bump --- README.md | 2 +- bower.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 adapt learning logo +**Version number:** 2.0.7 adapt learning logo **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.", From e65e56e00f4c6cbd4b6654ed000bf6ca62df7f1a Mon Sep 17 00:00:00 2001 From: moloko Date: Mon, 23 May 2016 17:59:55 +0100 Subject: [PATCH 4/4] somehow got hold of an old copy of checkCompletionStatus... update to latest --- js/adapt-contrib-hotgraphic.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/js/adapt-contrib-hotgraphic.js b/js/adapt-contrib-hotgraphic.js index a8af665..ae88c47 100644 --- a/js/adapt-contrib-hotgraphic.js +++ b/js/adapt-contrib-hotgraphic.js @@ -255,10 +255,8 @@ define(function(require) { }, checkCompletionStatus: function() { - if (!this.model.get('_isComplete')) { - if (this.getVisitedItems().length == this.model.get('_items').length) { - this.trigger('allItems'); - } + if (this.getVisitedItems().length == this.model.get('_items').length) { + this.trigger('allItems'); } },