From 620228c76a1337111f84bef33363d03a1e527e01 Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Wed, 25 Aug 2021 17:43:10 +0100 Subject: [PATCH 01/10] 2808 - added classes and vars to const/let --- README.md | 4 +- bower.json | 4 +- js/adapt-contrib-boxMenu.js | 92 +++++++++++++++------------- js/adapt-contrib-boxMenuGroupView.js | 21 ++++--- js/adapt-contrib-boxMenuItemView.js | 28 +++++---- 5 files changed, 82 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 832afc8..7879aa4 100644 --- a/README.md +++ b/README.md @@ -111,8 +111,8 @@ The following attributes, set within *contentObjects.json*, configure the defaul No known limitations. ---------------------------- -**Version number:** 5.2 adapt learning logo -**Framework versions:** 5.7+ +**Version number:** 5.3.0 adapt learning logo +**Framework versions:** 5.8+ **Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-boxmenu/graphs/contributors) **Accessibility support:** WAI AA **RTL support:** Yes diff --git a/bower.json b/bower.json index 158c8db..53a3f7a 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "adapt-contrib-boxMenu", - "version": "5.2.0", - "framework": ">=5.7", + "version": "5.3.0", + "framework": ">=5.8", "homepage": "https://github.com/adaptlearning/adapt-contrib-boxMenu", "issues": "https://github.com/adaptlearning/adapt_framework/issues/new", "menu": "boxMenu", diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js index a641d9f..b82ee61 100644 --- a/js/adapt-contrib-boxMenu.js +++ b/js/adapt-contrib-boxMenu.js @@ -6,37 +6,45 @@ define([ './adapt-contrib-boxMenuGroupView' ], function(Adapt, MenuModel, MenuView, BoxMenuItemView, BoxMenuGroupView) { - var BoxMenuView = MenuView.extend({ + class BoxMenuView extends MenuView { - initialize: function() { + get template() { + return 'boxmenu'; + } + + className() { + return 'boxmenu'; + } + + initialize() { MenuView.prototype.initialize.apply(this); this.setStyles(); this.listenTo(Adapt, { 'device:changed': this.onDeviceResize }); - }, + } - onDeviceResize: function() { + onDeviceResize() { this.setStyles(); - }, + } - addChildren: function() { - var nthChild = 0; - var models = this.model.getChildren().models; - var childViews = []; + addChildren() { + let nthChild = 0; + const models = this.model.getChildren().models; + const childViews = []; models.forEach(function(model) { if (!model.get('_isAvailable')) return; nthChild++; model.set('_nthChild', nthChild); - var ChildView = (model.get('_type') === 'menu' && model.get('_boxMenu') && model.get('_boxMenu')._renderAsGroup) ? + const ChildView = (model.get('_type') === 'menu' && model.get('_boxMenu') && model.get('_boxMenu')._renderAsGroup) ? BoxMenuGroupView : BoxMenuItemView; - var $parentContainer = this.$(this.constructor.childContainer); - var childView = new ChildView({ model: model }); + const $parentContainer = this.$(this.constructor.childContainer); + const childView = new ChildView({ model: model }); childViews.push(childView); @@ -46,21 +54,21 @@ define([ this.setChildViews(childViews); - }, + } - setStyles: function() { + setStyles() { this.setBackgroundImage(); this.setBackgroundStyles(); this.processHeader(); - }, + } - setBackgroundImage: function() { - var config = this.model.get('_boxMenu'); - var backgroundImages = config && config._backgroundImage; + setBackgroundImage() { + const config = this.model.get('_boxMenu'); + const backgroundImages = config && config._backgroundImage; if (!backgroundImages) return; - var backgroundImage; + let backgroundImage; switch (Adapt.device.screenSize) { case 'large': @@ -82,11 +90,11 @@ define([ .removeClass('has-bg-image') .css('background-image', ''); } - }, + } - setBackgroundStyles: function () { - var config = this.model.get('_boxMenu'); - var styles = config && config._backgroundStyles; + setBackgroundStyles() { + const config = this.model.get('_boxMenu'); + const styles = config && config._backgroundStyles; if (!styles) return; @@ -95,27 +103,27 @@ define([ 'background-size': styles._backgroundSize, 'background-position': styles._backgroundPosition }); - }, + } - processHeader: function() { - var config = this.model.get('_boxMenu'); - var header = config && config._menuHeader; + processHeader() { + const config = this.model.get('_boxMenu'); + const header = config && config._menuHeader; if (!header) return; - var $header = this.$('.menu__header'); + const $header = this.$('.menu__header'); this.setHeaderBackgroundImage(header, $header); this.setHeaderBackgroundStyles(header, $header); this.setHeaderMinimumHeight(header, $header); - }, + } - setHeaderBackgroundImage: function(config, $header) { - var backgroundImages = config._backgroundImage; + setHeaderBackgroundImage(config, $header) { + const backgroundImages = config._backgroundImage; if (!backgroundImages) return; - var backgroundImage; + let backgroundImage; switch (Adapt.device.screenSize) { case 'large': @@ -137,10 +145,10 @@ define([ .removeClass('has-bg-image') .css('background-image', ''); } - }, + } - setHeaderBackgroundStyles: function (config, $header) { - var styles = config._backgroundStyles; + setHeaderBackgroundStyles(config, $header) { + const styles = config._backgroundStyles; if (!styles) return; @@ -149,14 +157,14 @@ define([ 'background-size': styles._backgroundSize, 'background-position': styles._backgroundPosition }); - }, + } - setHeaderMinimumHeight: function(config, $header) { - var minimumHeights = config._minimumHeights; + setHeaderMinimumHeight(config, $header) { + const minimumHeights = config._minimumHeights; if (!minimumHeights) return; - var minimumHeight; + let minimumHeight; switch (Adapt.device.screenSize) { case 'large': @@ -180,10 +188,7 @@ define([ } } - }, { - className: 'boxmenu', - template: 'boxMenu' - }); + } // Use as default "_type": "course" or "_type": "menu" view. // Note: This is necessary to maintain legacy behaviour in the AAT where @@ -198,5 +203,4 @@ define([ view: BoxMenuView, model: MenuModel.extend({}) }); - }); diff --git a/js/adapt-contrib-boxMenuGroupView.js b/js/adapt-contrib-boxMenuGroupView.js index 802ddd5..8c006e7 100644 --- a/js/adapt-contrib-boxMenuGroupView.js +++ b/js/adapt-contrib-boxMenuGroupView.js @@ -3,20 +3,25 @@ define([ './adapt-contrib-boxMenuItemView' ], function(MenuItemView, BoxMenuItemView) { - var BoxMenuGroupView = MenuItemView.extend({ + class BoxMenuGroupView extends MenuItemView { - postRender: function() { + get template() { + return 'boxmenu-group'; + } + + className() { + return 'boxMenuGroup'; + } + + postRender() { _.defer(this.addChildren.bind(this)); this.$el.imageready(this.setReadyStatus.bind(this)); this.$el.parents('.boxmenu__item-container').addClass('has-groups'); } + } - }, { - childContainer: '.js-group-children', - childView: BoxMenuItemView, - className: 'boxmenu-group', - template: 'boxMenuGroup' - }); + BoxMenuGroupView.childContainer = '.js-group-children'; + BoxMenuGroupView.childView = BoxMenuItemView; return BoxMenuGroupView; diff --git a/js/adapt-contrib-boxMenuItemView.js b/js/adapt-contrib-boxMenuItemView.js index 097b42d..4cbb903 100644 --- a/js/adapt-contrib-boxMenuItemView.js +++ b/js/adapt-contrib-boxMenuItemView.js @@ -2,22 +2,28 @@ define([ 'core/js/views/menuItemView' ], function(MenuItemView) { - var BoxMenuItemView = MenuItemView.extend({ + class BoxMenuItemView extends MenuItemView { - events: { - 'click .js-btn-click' : 'onClickMenuItemButton' - }, + get template() { + return 'boxMenuItem'; + } + + className() { + return 'boxmenu-item'; + } - onClickMenuItemButton: function(event) { + events() { + return { + 'click .js-btn-click': 'onClickMenuItemButton' + }; + } + + onClickMenuItemButton(event) { if (event && event.preventDefault) event.preventDefault(); if (this.model.get('_isLocked')) return; - Backbone.history.navigate('#/id/' + this.model.get('_id'), {trigger: true}); + Backbone.history.navigate('#/id/' + this.model.get('_id'), { trigger: true }); } - - }, { - className: 'boxmenu-item', - template: 'boxMenuItem' - }); + } return BoxMenuItemView; From 5993facdffe277e0576dec74d40f3718aea57df1 Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Wed, 25 Aug 2021 17:44:52 +0100 Subject: [PATCH 02/10] 2808 - arrow function --- js/adapt-contrib-boxMenu.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js index b82ee61..5ff4fc3 100644 --- a/js/adapt-contrib-boxMenu.js +++ b/js/adapt-contrib-boxMenu.js @@ -33,7 +33,7 @@ define([ let nthChild = 0; const models = this.model.getChildren().models; const childViews = []; - models.forEach(function(model) { + models.forEach(model => { if (!model.get('_isAvailable')) return; nthChild++; @@ -49,8 +49,7 @@ define([ childViews.push(childView); $parentContainer.append(childView.$el); - - }.bind(this)); + }); this.setChildViews(childViews); From 08aac83cc7ed56679973db7c9777e0e68445ef01 Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Fri, 27 Aug 2021 14:19:04 +0100 Subject: [PATCH 03/10] 2808 - box menu es6 --- js/adapt-contrib-boxMenu.js | 337 +++++++++++++-------------- js/adapt-contrib-boxMenuGroupView.js | 41 ++-- js/adapt-contrib-boxMenuItemView.js | 40 ++-- 3 files changed, 205 insertions(+), 213 deletions(-) diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js index 5ff4fc3..cc5757f 100644 --- a/js/adapt-contrib-boxMenu.js +++ b/js/adapt-contrib-boxMenu.js @@ -1,205 +1,202 @@ -define([ - 'core/js/adapt', - 'core/js/models/menuModel', - 'core/js/views/menuView', - './adapt-contrib-boxMenuItemView', - './adapt-contrib-boxMenuGroupView' -], function(Adapt, MenuModel, MenuView, BoxMenuItemView, BoxMenuGroupView) { - - class BoxMenuView extends MenuView { - - get template() { - return 'boxmenu'; - } +import Adapt from 'core/js/adapt'; +import MenuModel from 'core/js/models/menuModel'; +import MenuView from 'core/js/views/menuView'; +import BoxMenuItemView from './adapt-contrib-boxMenuItemView'; +import BoxMenuGroupView from './adapt-contrib-boxMenuGroupView'; - className() { - return 'boxmenu'; - } +class BoxMenuView extends MenuView { - initialize() { - MenuView.prototype.initialize.apply(this); - this.setStyles(); + className() { + return 'boxmenu'; + } - this.listenTo(Adapt, { - 'device:changed': this.onDeviceResize - }); - } + initialize() { + super.initialize(); + this.setStyles(); - onDeviceResize() { - this.setStyles(); - } + this.listenTo(Adapt, { + 'device:changed': this.onDeviceResize + }); + } + + onDeviceResize() { + this.setStyles(); + } - addChildren() { - let nthChild = 0; - const models = this.model.getChildren().models; - const childViews = []; - models.forEach(model => { - if (!model.get('_isAvailable')) return; + addChildren() { + let nthChild = 0; + const models = this.model.getChildren().models; + const childViews = []; + models.forEach(model => { + if (!model.get('_isAvailable')) return; - nthChild++; - model.set('_nthChild', nthChild); + nthChild++; + model.set('_nthChild', nthChild); - const ChildView = (model.get('_type') === 'menu' && model.get('_boxMenu') && model.get('_boxMenu')._renderAsGroup) ? - BoxMenuGroupView : - BoxMenuItemView; + const ChildView = (model.get('_type') === 'menu' && model.get('_boxMenu') && model.get('_boxMenu')._renderAsGroup) ? + BoxMenuGroupView : + BoxMenuItemView; - const $parentContainer = this.$(this.constructor.childContainer); - const childView = new ChildView({ model: model }); + const $parentContainer = this.$(this.constructor.childContainer); + const childView = new ChildView({ model: model }); - childViews.push(childView); + childViews.push(childView); - $parentContainer.append(childView.$el); - }); + $parentContainer.append(childView.$el); + }); - this.setChildViews(childViews); + this.setChildViews(childViews); - } + } + + setStyles() { + this.setBackgroundImage(); + this.setBackgroundStyles(); + this.processHeader(); + } + + setBackgroundImage() { + const config = this.model.get('_boxMenu'); + const backgroundImages = config && config._backgroundImage; + + if (!backgroundImages) return; - setStyles() { - this.setBackgroundImage(); - this.setBackgroundStyles(); - this.processHeader(); + let backgroundImage; + + switch (Adapt.device.screenSize) { + case 'large': + backgroundImage = backgroundImages._large; + break; + case 'medium': + backgroundImage = backgroundImages._medium; + break; + default: + backgroundImage = backgroundImages._small; } - setBackgroundImage() { - const config = this.model.get('_boxMenu'); - const backgroundImages = config && config._backgroundImage; - - if (!backgroundImages) return; - - let backgroundImage; - - switch (Adapt.device.screenSize) { - case 'large': - backgroundImage = backgroundImages._large; - break; - case 'medium': - backgroundImage = backgroundImages._medium; - break; - default: - backgroundImage = backgroundImages._small; - } - - if (backgroundImage) { - this.$el - .addClass('has-bg-image') - .css('background-image', 'url(' + backgroundImage + ')'); - } else { - this.$el - .removeClass('has-bg-image') - .css('background-image', ''); - } + if (backgroundImage) { + this.$el + .addClass('has-bg-image') + .css('background-image', 'url(' + backgroundImage + ')'); + } else { + this.$el + .removeClass('has-bg-image') + .css('background-image', ''); } + } - setBackgroundStyles() { - const config = this.model.get('_boxMenu'); - const styles = config && config._backgroundStyles; + setBackgroundStyles() { + const config = this.model.get('_boxMenu'); + const styles = config && config._backgroundStyles; - if (!styles) return; + if (!styles) return; - this.$el.css({ - 'background-repeat': styles._backgroundRepeat, - 'background-size': styles._backgroundSize, - 'background-position': styles._backgroundPosition - }); - } + this.$el.css({ + 'background-repeat': styles._backgroundRepeat, + 'background-size': styles._backgroundSize, + 'background-position': styles._backgroundPosition + }); + } - processHeader() { - const config = this.model.get('_boxMenu'); - const header = config && config._menuHeader; + processHeader() { + const config = this.model.get('_boxMenu'); + const header = config && config._menuHeader; - if (!header) return; + if (!header) return; - const $header = this.$('.menu__header'); + const $header = this.$('.menu__header'); - this.setHeaderBackgroundImage(header, $header); - this.setHeaderBackgroundStyles(header, $header); - this.setHeaderMinimumHeight(header, $header); + this.setHeaderBackgroundImage(header, $header); + this.setHeaderBackgroundStyles(header, $header); + this.setHeaderMinimumHeight(header, $header); + } + + setHeaderBackgroundImage(config, $header) { + const backgroundImages = config._backgroundImage; + + if (!backgroundImages) return; + + let backgroundImage; + + switch (Adapt.device.screenSize) { + case 'large': + backgroundImage = backgroundImages._large; + break; + case 'medium': + backgroundImage = backgroundImages._medium; + break; + default: + backgroundImage = backgroundImages._small; } - setHeaderBackgroundImage(config, $header) { - const backgroundImages = config._backgroundImage; - - if (!backgroundImages) return; - - let backgroundImage; - - switch (Adapt.device.screenSize) { - case 'large': - backgroundImage = backgroundImages._large; - break; - case 'medium': - backgroundImage = backgroundImages._medium; - break; - default: - backgroundImage = backgroundImages._small; - } - - if (backgroundImage) { - $header - .addClass('has-bg-image') - .css('background-image', 'url(' + backgroundImage + ')'); - } else { - $header - .removeClass('has-bg-image') - .css('background-image', ''); - } + if (backgroundImage) { + $header + .addClass('has-bg-image') + .css('background-image', 'url(' + backgroundImage + ')'); + } else { + $header + .removeClass('has-bg-image') + .css('background-image', ''); } + } - setHeaderBackgroundStyles(config, $header) { - const styles = config._backgroundStyles; + setHeaderBackgroundStyles(config, $header) { + const styles = config._backgroundStyles; - if (!styles) return; + if (!styles) return; - $header.css({ - 'background-repeat': styles._backgroundRepeat, - 'background-size': styles._backgroundSize, - 'background-position': styles._backgroundPosition - }); - } + $header.css({ + 'background-repeat': styles._backgroundRepeat, + 'background-size': styles._backgroundSize, + 'background-position': styles._backgroundPosition + }); + } + + setHeaderMinimumHeight(config, $header) { + const minimumHeights = config._minimumHeights; - setHeaderMinimumHeight(config, $header) { - const minimumHeights = config._minimumHeights; - - if (!minimumHeights) return; - - let minimumHeight; - - switch (Adapt.device.screenSize) { - case 'large': - minimumHeight = minimumHeights._large; - break; - case 'medium': - minimumHeight = minimumHeights._medium; - break; - default: - minimumHeight = minimumHeights._small; - } - - if (minimumHeight) { - $header - .addClass('has-min-height') - .css('min-height', minimumHeight + 'px'); - } else { - $header - .removeClass('has-min-height') - .css('min-height', ''); - } + if (!minimumHeights) return; + + let minimumHeight; + + switch (Adapt.device.screenSize) { + case 'large': + minimumHeight = minimumHeights._large; + break; + case 'medium': + minimumHeight = minimumHeights._medium; + break; + default: + minimumHeight = minimumHeights._small; } + if (minimumHeight) { + $header + .addClass('has-min-height') + .css('min-height', minimumHeight + 'px'); + } else { + $header + .removeClass('has-min-height') + .css('min-height', ''); + } } - // Use as default "_type": "course" or "_type": "menu" view. - // Note: This is necessary to maintain legacy behaviour in the AAT where - // only one menu is usable per course and the course / menu is assumed to be - // a core model and use the only installed MenuView. - Adapt.register('course menu', { - view: BoxMenuView - }); - - // Use for "_component": "boxMenu", or "_view": "boxMenu" and "_model": "boxMenu" - Adapt.register('boxMenu', { - view: BoxMenuView, - model: MenuModel.extend({}) - }); +} + +BoxMenuView.template = 'boxMenu'; + +// Use as default "_type": "course" or "_type": "menu" view. +// Note: This is necessary to maintain legacy behaviour in the AAT where +// only one menu is usable per course and the course / menu is assumed to be +// a core model and use the only installed MenuView. +Adapt.register('course menu', { + view: BoxMenuView +}); + +// Use for "_component": "boxMenu", or "_view": "boxMenu" and "_model": "boxMenu" +Adapt.register('boxMenu', { + view: BoxMenuView, + model: MenuModel.extend({}) }); + +export default BoxMenuView; diff --git a/js/adapt-contrib-boxMenuGroupView.js b/js/adapt-contrib-boxMenuGroupView.js index 8c006e7..a51083b 100644 --- a/js/adapt-contrib-boxMenuGroupView.js +++ b/js/adapt-contrib-boxMenuGroupView.js @@ -1,28 +1,29 @@ -define([ - 'core/js/views/menuItemView', - './adapt-contrib-boxMenuItemView' -], function(MenuItemView, BoxMenuItemView) { +import MenuItemView from 'core/js/views/menuItemView'; +import BoxMenuItemView from './adapt-contrib-boxMenuItemView'; - class BoxMenuGroupView extends MenuItemView { +class BoxMenuGroupView extends MenuItemView { - get template() { - return 'boxmenu-group'; - } + static childContainer() { + return '.js-group-children'; + } - className() { - return 'boxMenuGroup'; - } + static childView() { + return BoxMenuItemView; + } - postRender() { - _.defer(this.addChildren.bind(this)); - this.$el.imageready(this.setReadyStatus.bind(this)); - this.$el.parents('.boxmenu__item-container').addClass('has-groups'); - } + className() { + return 'boxMenuGroup'; } - BoxMenuGroupView.childContainer = '.js-group-children'; - BoxMenuGroupView.childView = BoxMenuItemView; + postRender() { + _.defer(this.addChildren.bind(this)); + this.$el.imageready(this.setReadyStatus.bind(this)); + this.$el.parents('.boxmenu__item-container').addClass('has-groups'); + } +} - return BoxMenuGroupView; +BoxMenuGroupView.childContainer = '.js-group-children'; +BoxMenuGroupView.childView = BoxMenuItemView; +BoxMenuGroupView.template = 'boxmenu-group'; -}); +export default BoxMenuGroupView; diff --git a/js/adapt-contrib-boxMenuItemView.js b/js/adapt-contrib-boxMenuItemView.js index 4cbb903..05afd25 100644 --- a/js/adapt-contrib-boxMenuItemView.js +++ b/js/adapt-contrib-boxMenuItemView.js @@ -1,30 +1,24 @@ -define([ - 'core/js/views/menuItemView' -], function(MenuItemView) { +import MenuItemView from 'core/js/views/menuItemView'; - class BoxMenuItemView extends MenuItemView { +class BoxMenuItemView extends MenuItemView { - get template() { - return 'boxMenuItem'; - } - - className() { - return 'boxmenu-item'; - } + className() { + return 'boxmenu-item'; + } - events() { - return { - 'click .js-btn-click': 'onClickMenuItemButton' - }; - } + events() { + return { + 'click .js-btn-click': 'onClickMenuItemButton' + }; + } - onClickMenuItemButton(event) { - if (event && event.preventDefault) event.preventDefault(); - if (this.model.get('_isLocked')) return; - Backbone.history.navigate('#/id/' + this.model.get('_id'), { trigger: true }); - } + onClickMenuItemButton(event) { + if (event && event.preventDefault) event.preventDefault(); + if (this.model.get('_isLocked')) return; + Backbone.history.navigate('#/id/' + this.model.get('_id'), { trigger: true }); } +} - return BoxMenuItemView; +BoxMenuItemView.template = 'boxMenuItem'; -}); +export default BoxMenuItemView; From 5ddc2b2d876f520739e8eef618da00fa943c62b7 Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Fri, 27 Aug 2021 14:23:11 +0100 Subject: [PATCH 04/10] 2808 - early returns --- js/adapt-contrib-boxMenu.js | 25 ++++++++++++------------- js/adapt-contrib-boxMenuGroupView.js | 3 --- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js index cc5757f..87bc21a 100644 --- a/js/adapt-contrib-boxMenu.js +++ b/js/adapt-contrib-boxMenu.js @@ -46,7 +46,6 @@ class BoxMenuView extends MenuView { }); this.setChildViews(childViews); - } setStyles() { @@ -78,11 +77,11 @@ class BoxMenuView extends MenuView { this.$el .addClass('has-bg-image') .css('background-image', 'url(' + backgroundImage + ')'); - } else { - this.$el - .removeClass('has-bg-image') - .css('background-image', ''); + return; } + this.$el + .removeClass('has-bg-image') + .css('background-image', ''); } setBackgroundStyles() { @@ -133,11 +132,11 @@ class BoxMenuView extends MenuView { $header .addClass('has-bg-image') .css('background-image', 'url(' + backgroundImage + ')'); - } else { - $header - .removeClass('has-bg-image') - .css('background-image', ''); + return; } + $header + .removeClass('has-bg-image') + .css('background-image', ''); } setHeaderBackgroundStyles(config, $header) { @@ -174,11 +173,11 @@ class BoxMenuView extends MenuView { $header .addClass('has-min-height') .css('min-height', minimumHeight + 'px'); - } else { - $header - .removeClass('has-min-height') - .css('min-height', ''); + return; } + $header + .removeClass('has-min-height') + .css('min-height', ''); } } diff --git a/js/adapt-contrib-boxMenuGroupView.js b/js/adapt-contrib-boxMenuGroupView.js index a51083b..d04c4b2 100644 --- a/js/adapt-contrib-boxMenuGroupView.js +++ b/js/adapt-contrib-boxMenuGroupView.js @@ -21,9 +21,6 @@ class BoxMenuGroupView extends MenuItemView { this.$el.parents('.boxmenu__item-container').addClass('has-groups'); } } - -BoxMenuGroupView.childContainer = '.js-group-children'; -BoxMenuGroupView.childView = BoxMenuItemView; BoxMenuGroupView.template = 'boxmenu-group'; export default BoxMenuGroupView; From f80c94a915e50bd5abc7bd1fd8ec6c30544da859 Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Fri, 27 Aug 2021 14:25:48 +0100 Subject: [PATCH 05/10] 2808 - passed model through to Child View --- js/adapt-contrib-boxMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js index 87bc21a..6f7cc53 100644 --- a/js/adapt-contrib-boxMenu.js +++ b/js/adapt-contrib-boxMenu.js @@ -38,7 +38,7 @@ class BoxMenuView extends MenuView { BoxMenuItemView; const $parentContainer = this.$(this.constructor.childContainer); - const childView = new ChildView({ model: model }); + const childView = new ChildView({ model }); childViews.push(childView); From 735db1fe81289387018a27ee5276fe7c44e8a58e Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Mon, 6 Sep 2021 15:37:45 +0100 Subject: [PATCH 06/10] 2808 - review comments --- js/adapt-contrib-boxMenu.js | 186 +-------------------------- js/adapt-contrib-boxMenuGroupView.js | 11 +- js/adapt-contrib-boxMenuItemView.js | 3 +- js/adapt-contrib-boxMenuView.js | 151 ++++++++++++++++++++++ 4 files changed, 157 insertions(+), 194 deletions(-) create mode 100644 js/adapt-contrib-boxMenuView.js diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js index 6f7cc53..0754d42 100644 --- a/js/adapt-contrib-boxMenu.js +++ b/js/adapt-contrib-boxMenu.js @@ -1,188 +1,6 @@ import Adapt from 'core/js/adapt'; import MenuModel from 'core/js/models/menuModel'; -import MenuView from 'core/js/views/menuView'; -import BoxMenuItemView from './adapt-contrib-boxMenuItemView'; -import BoxMenuGroupView from './adapt-contrib-boxMenuGroupView'; - -class BoxMenuView extends MenuView { - - className() { - return 'boxmenu'; - } - - initialize() { - super.initialize(); - this.setStyles(); - - this.listenTo(Adapt, { - 'device:changed': this.onDeviceResize - }); - } - - onDeviceResize() { - this.setStyles(); - } - - addChildren() { - let nthChild = 0; - const models = this.model.getChildren().models; - const childViews = []; - models.forEach(model => { - if (!model.get('_isAvailable')) return; - - nthChild++; - model.set('_nthChild', nthChild); - - const ChildView = (model.get('_type') === 'menu' && model.get('_boxMenu') && model.get('_boxMenu')._renderAsGroup) ? - BoxMenuGroupView : - BoxMenuItemView; - - const $parentContainer = this.$(this.constructor.childContainer); - const childView = new ChildView({ model }); - - childViews.push(childView); - - $parentContainer.append(childView.$el); - }); - - this.setChildViews(childViews); - } - - setStyles() { - this.setBackgroundImage(); - this.setBackgroundStyles(); - this.processHeader(); - } - - setBackgroundImage() { - const config = this.model.get('_boxMenu'); - const backgroundImages = config && config._backgroundImage; - - if (!backgroundImages) return; - - let backgroundImage; - - switch (Adapt.device.screenSize) { - case 'large': - backgroundImage = backgroundImages._large; - break; - case 'medium': - backgroundImage = backgroundImages._medium; - break; - default: - backgroundImage = backgroundImages._small; - } - - if (backgroundImage) { - this.$el - .addClass('has-bg-image') - .css('background-image', 'url(' + backgroundImage + ')'); - return; - } - this.$el - .removeClass('has-bg-image') - .css('background-image', ''); - } - - setBackgroundStyles() { - const config = this.model.get('_boxMenu'); - const styles = config && config._backgroundStyles; - - if (!styles) return; - - this.$el.css({ - 'background-repeat': styles._backgroundRepeat, - 'background-size': styles._backgroundSize, - 'background-position': styles._backgroundPosition - }); - } - - processHeader() { - const config = this.model.get('_boxMenu'); - const header = config && config._menuHeader; - - if (!header) return; - - const $header = this.$('.menu__header'); - - this.setHeaderBackgroundImage(header, $header); - this.setHeaderBackgroundStyles(header, $header); - this.setHeaderMinimumHeight(header, $header); - } - - setHeaderBackgroundImage(config, $header) { - const backgroundImages = config._backgroundImage; - - if (!backgroundImages) return; - - let backgroundImage; - - switch (Adapt.device.screenSize) { - case 'large': - backgroundImage = backgroundImages._large; - break; - case 'medium': - backgroundImage = backgroundImages._medium; - break; - default: - backgroundImage = backgroundImages._small; - } - - if (backgroundImage) { - $header - .addClass('has-bg-image') - .css('background-image', 'url(' + backgroundImage + ')'); - return; - } - $header - .removeClass('has-bg-image') - .css('background-image', ''); - } - - setHeaderBackgroundStyles(config, $header) { - const styles = config._backgroundStyles; - - if (!styles) return; - - $header.css({ - 'background-repeat': styles._backgroundRepeat, - 'background-size': styles._backgroundSize, - 'background-position': styles._backgroundPosition - }); - } - - setHeaderMinimumHeight(config, $header) { - const minimumHeights = config._minimumHeights; - - if (!minimumHeights) return; - - let minimumHeight; - - switch (Adapt.device.screenSize) { - case 'large': - minimumHeight = minimumHeights._large; - break; - case 'medium': - minimumHeight = minimumHeights._medium; - break; - default: - minimumHeight = minimumHeights._small; - } - - if (minimumHeight) { - $header - .addClass('has-min-height') - .css('min-height', minimumHeight + 'px'); - return; - } - $header - .removeClass('has-min-height') - .css('min-height', ''); - } - -} - -BoxMenuView.template = 'boxMenu'; +import BoxMenuView from './adapt-contrib-boxMenuView'; // Use as default "_type": "course" or "_type": "menu" view. // Note: This is necessary to maintain legacy behaviour in the AAT where @@ -197,5 +15,3 @@ Adapt.register('boxMenu', { view: BoxMenuView, model: MenuModel.extend({}) }); - -export default BoxMenuView; diff --git a/js/adapt-contrib-boxMenuGroupView.js b/js/adapt-contrib-boxMenuGroupView.js index d04c4b2..602b8e4 100644 --- a/js/adapt-contrib-boxMenuGroupView.js +++ b/js/adapt-contrib-boxMenuGroupView.js @@ -3,14 +3,6 @@ import BoxMenuItemView from './adapt-contrib-boxMenuItemView'; class BoxMenuGroupView extends MenuItemView { - static childContainer() { - return '.js-group-children'; - } - - static childView() { - return BoxMenuItemView; - } - className() { return 'boxMenuGroup'; } @@ -21,6 +13,9 @@ class BoxMenuGroupView extends MenuItemView { this.$el.parents('.boxmenu__item-container').addClass('has-groups'); } } + BoxMenuGroupView.template = 'boxmenu-group'; +BoxMenuGroupView.childContainer = '.js-group-children'; +BoxMenuGroupView.childView = BoxMenuItemView; export default BoxMenuGroupView; diff --git a/js/adapt-contrib-boxMenuItemView.js b/js/adapt-contrib-boxMenuItemView.js index 05afd25..1e495e1 100644 --- a/js/adapt-contrib-boxMenuItemView.js +++ b/js/adapt-contrib-boxMenuItemView.js @@ -1,4 +1,5 @@ import MenuItemView from 'core/js/views/menuItemView'; +import router from 'core/js/router'; class BoxMenuItemView extends MenuItemView { @@ -15,7 +16,7 @@ class BoxMenuItemView extends MenuItemView { onClickMenuItemButton(event) { if (event && event.preventDefault) event.preventDefault(); if (this.model.get('_isLocked')) return; - Backbone.history.navigate('#/id/' + this.model.get('_id'), { trigger: true }); + router.navigateToElement(this.model.get('_id')); } } diff --git a/js/adapt-contrib-boxMenuView.js b/js/adapt-contrib-boxMenuView.js new file mode 100644 index 0000000..8a8364b --- /dev/null +++ b/js/adapt-contrib-boxMenuView.js @@ -0,0 +1,151 @@ +import Adapt from 'core/js/adapt'; +import MenuView from 'core/js/views/menuView'; +import BoxMenuItemView from './adapt-contrib-boxMenuItemView'; +import BoxMenuGroupView from './adapt-contrib-boxMenuGroupView'; + +class BoxMenuView extends MenuView { + + className() { + return 'boxmenu'; + } + + initialize() { + super.initialize(); + this.setStyles(); + + this.listenTo(Adapt, 'device:changed', this.onDeviceResize); + } + + onDeviceResize() { + this.setStyles(); + } + + addChildren() { + let nthChild = 0; + const models = this.model.getChildren().models; + const childViews = []; + models.forEach(model => { + if (!model.get('_isAvailable')) return; + + nthChild++; + model.set('_nthChild', nthChild); + + const ChildView = (model.get('_type') === 'menu' && model.get('_boxMenu') && model.get('_boxMenu')._renderAsGroup) ? + BoxMenuGroupView : + BoxMenuItemView; + + const $parentContainer = this.$(this.constructor.childContainer); + const childView = new ChildView({ model }); + + childViews.push(childView); + + $parentContainer.append(childView.$el); + }); + + this.setChildViews(childViews); + } + + setStyles() { + this.setBackgroundImage(); + this.setBackgroundStyles(); + this.processHeader(); + } + + setBackgroundImage() { + const config = this.model.get('_boxMenu'); + const backgroundImages = config && config._backgroundImage; + + if (!backgroundImages) return; + + const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small; + + if (backgroundImage) { + this.$el + .addClass('has-bg-image') + .css('background-image', 'url(' + backgroundImage + ')'); + return; + } + this.$el + .removeClass('has-bg-image') + .css('background-image', ''); + } + + setBackgroundStyles() { + const config = this.model.get('_boxMenu'); + const styles = config && config._backgroundStyles; + + if (!styles) return; + + this.$el.css({ + 'background-repeat': styles._backgroundRepeat, + 'background-size': styles._backgroundSize, + 'background-position': styles._backgroundPosition + }); + } + + processHeader() { + const config = this.model.get('_boxMenu'); + const header = config && config._menuHeader; + + if (!header) return; + + const $header = this.$('.menu__header'); + + this.setHeaderBackgroundImage(header, $header); + this.setHeaderBackgroundStyles(header, $header); + this.setHeaderMinimumHeight(header, $header); + } + + setHeaderBackgroundImage(config, $header) { + const backgroundImages = config._backgroundImage; + + if (!backgroundImages) return; + + const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small; + + if (backgroundImage) { + $header + .addClass('has-bg-image') + .css('background-image', 'url(' + backgroundImage + ')'); + return; + } + $header + .removeClass('has-bg-image') + .css('background-image', ''); + } + + setHeaderBackgroundStyles(config, $header) { + const styles = config._backgroundStyles; + + if (!styles) return; + + $header.css({ + 'background-repeat': styles._backgroundRepeat, + 'background-size': styles._backgroundSize, + 'background-position': styles._backgroundPosition + }); + } + + setHeaderMinimumHeight(config, $header) { + const minimumHeights = config._minimumHeights; + + if (!minimumHeights) return; + + const minimumHeight = minimumHeights[`_${Adapt.device.screenSize}`] ?? minimumHeights._small; + + if (minimumHeight) { + $header + .addClass('has-min-height') + .css('min-height', minimumHeight + 'px'); + return; + } + $header + .removeClass('has-min-height') + .css('min-height', ''); + } + +} + +BoxMenuView.template = 'boxMenu'; + +export default BoxMenuView; From c380efed1658b0e9f84129228ec17b07ff06a51c Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Tue, 7 Sep 2021 09:21:07 +0100 Subject: [PATCH 07/10] 2808 - renamed files --- js/{adapt-contrib-boxMenuGroupView.js => BoxMenuGroupView.js} | 2 +- js/{adapt-contrib-boxMenuItemView.js => BoxMenuItemView.js} | 0 js/{adapt-contrib-boxMenuView.js => BoxMenuView.js} | 4 ++-- js/adapt-contrib-boxMenu.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) rename js/{adapt-contrib-boxMenuGroupView.js => BoxMenuGroupView.js} (89%) rename js/{adapt-contrib-boxMenuItemView.js => BoxMenuItemView.js} (100%) rename js/{adapt-contrib-boxMenuView.js => BoxMenuView.js} (96%) diff --git a/js/adapt-contrib-boxMenuGroupView.js b/js/BoxMenuGroupView.js similarity index 89% rename from js/adapt-contrib-boxMenuGroupView.js rename to js/BoxMenuGroupView.js index 602b8e4..2ac99be 100644 --- a/js/adapt-contrib-boxMenuGroupView.js +++ b/js/BoxMenuGroupView.js @@ -1,5 +1,5 @@ import MenuItemView from 'core/js/views/menuItemView'; -import BoxMenuItemView from './adapt-contrib-boxMenuItemView'; +import BoxMenuItemView from './BoxMenuItemView'; class BoxMenuGroupView extends MenuItemView { diff --git a/js/adapt-contrib-boxMenuItemView.js b/js/BoxMenuItemView.js similarity index 100% rename from js/adapt-contrib-boxMenuItemView.js rename to js/BoxMenuItemView.js diff --git a/js/adapt-contrib-boxMenuView.js b/js/BoxMenuView.js similarity index 96% rename from js/adapt-contrib-boxMenuView.js rename to js/BoxMenuView.js index 8a8364b..ff6e58f 100644 --- a/js/adapt-contrib-boxMenuView.js +++ b/js/BoxMenuView.js @@ -1,7 +1,7 @@ import Adapt from 'core/js/adapt'; import MenuView from 'core/js/views/menuView'; -import BoxMenuItemView from './adapt-contrib-boxMenuItemView'; -import BoxMenuGroupView from './adapt-contrib-boxMenuGroupView'; +import BoxMenuItemView from './BoxMenuItemView'; +import BoxMenuGroupView from './BoxMenuGroupView'; class BoxMenuView extends MenuView { diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js index 0754d42..2d5ac12 100644 --- a/js/adapt-contrib-boxMenu.js +++ b/js/adapt-contrib-boxMenu.js @@ -1,6 +1,6 @@ import Adapt from 'core/js/adapt'; import MenuModel from 'core/js/models/menuModel'; -import BoxMenuView from './adapt-contrib-boxMenuView'; +import BoxMenuView from './BoxMenuView'; // Use as default "_type": "course" or "_type": "menu" view. // Note: This is necessary to maintain legacy behaviour in the AAT where From 8001fbeec49556af3a8e89a3b411f1d8d5c6309d Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Tue, 7 Sep 2021 09:48:26 +0100 Subject: [PATCH 08/10] 2808 - condensed functions using toggle class and removed $header parameter from the function as classes/style is now applied to this.$el --- js/BoxMenuView.js | 65 +++++++++++++---------------------------------- 1 file changed, 17 insertions(+), 48 deletions(-) diff --git a/js/BoxMenuView.js b/js/BoxMenuView.js index ff6e58f..1074b5e 100644 --- a/js/BoxMenuView.js +++ b/js/BoxMenuView.js @@ -53,29 +53,18 @@ class BoxMenuView extends MenuView { setBackgroundImage() { const config = this.model.get('_boxMenu'); - const backgroundImages = config && config._backgroundImage; - + const backgroundImages = config?._backgroundImage; if (!backgroundImages) return; - const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small; - - if (backgroundImage) { - this.$el - .addClass('has-bg-image') - .css('background-image', 'url(' + backgroundImage + ')'); - return; - } this.$el - .removeClass('has-bg-image') - .css('background-image', ''); + .toggleClass('has-bg-image', Boolean(backgroundImage)) + .css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : ''); } setBackgroundStyles() { const config = this.model.get('_boxMenu'); - const styles = config && config._backgroundStyles; - + const styles = config?._backgroundStyles; if (!styles) return; - this.$el.css({ 'background-repeat': styles._backgroundRepeat, 'background-size': styles._backgroundSize, @@ -89,59 +78,39 @@ class BoxMenuView extends MenuView { if (!header) return; - const $header = this.$('.menu__header'); - - this.setHeaderBackgroundImage(header, $header); - this.setHeaderBackgroundStyles(header, $header); - this.setHeaderMinimumHeight(header, $header); + this.setHeaderBackgroundImage(header); + this.setHeaderBackgroundStyles(header); + this.setHeaderMinimumHeight(header); } - setHeaderBackgroundImage(config, $header) { + setHeaderBackgroundImage(config) { const backgroundImages = config._backgroundImage; - if (!backgroundImages) return; - const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small; - - if (backgroundImage) { - $header - .addClass('has-bg-image') - .css('background-image', 'url(' + backgroundImage + ')'); - return; - } - $header - .removeClass('has-bg-image') - .css('background-image', ''); + this.$el + .toggleClass('has-bg-image', Boolean(backgroundImage)) + .css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : ''); } - setHeaderBackgroundStyles(config, $header) { + setHeaderBackgroundStyles(config) { const styles = config._backgroundStyles; if (!styles) return; - $header.css({ + this.$el.css({ 'background-repeat': styles._backgroundRepeat, 'background-size': styles._backgroundSize, 'background-position': styles._backgroundPosition }); } - setHeaderMinimumHeight(config, $header) { + setHeaderMinimumHeight(config) { const minimumHeights = config._minimumHeights; - if (!minimumHeights) return; - const minimumHeight = minimumHeights[`_${Adapt.device.screenSize}`] ?? minimumHeights._small; - - if (minimumHeight) { - $header - .addClass('has-min-height') - .css('min-height', minimumHeight + 'px'); - return; - } - $header - .removeClass('has-min-height') - .css('min-height', ''); + this.$el + .toggleClass('has-min-height', Boolean(minimumHeight)) + .css('min-height', minimumHeight ? minimumHeight + 'px' : ''); } } From bf8eb66376d003f6d38e8c67d8e22c57ade4bdfb Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Tue, 7 Sep 2021 10:09:29 +0100 Subject: [PATCH 09/10] 2808 - added $header param to functions to add style/classes to the header element --- js/BoxMenuView.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/js/BoxMenuView.js b/js/BoxMenuView.js index 1074b5e..e74387a 100644 --- a/js/BoxMenuView.js +++ b/js/BoxMenuView.js @@ -78,37 +78,39 @@ class BoxMenuView extends MenuView { if (!header) return; - this.setHeaderBackgroundImage(header); - this.setHeaderBackgroundStyles(header); - this.setHeaderMinimumHeight(header); + const $header = this.$('.menu__header'); + + this.setHeaderBackgroundImage(header, $header); + this.setHeaderBackgroundStyles(header, $header); + this.setHeaderMinimumHeight(header, $header); } - setHeaderBackgroundImage(config) { + setHeaderBackgroundImage(config, $header) { const backgroundImages = config._backgroundImage; if (!backgroundImages) return; const backgroundImage = backgroundImages[`_${Adapt.device.screenSize}`] ?? backgroundImages._small; - this.$el + $header .toggleClass('has-bg-image', Boolean(backgroundImage)) .css('background-image', backgroundImage ? 'url(' + backgroundImage + ')' : ''); } - setHeaderBackgroundStyles(config) { + setHeaderBackgroundStyles(config, $header) { const styles = config._backgroundStyles; if (!styles) return; - this.$el.css({ + $header.css({ 'background-repeat': styles._backgroundRepeat, 'background-size': styles._backgroundSize, 'background-position': styles._backgroundPosition }); } - setHeaderMinimumHeight(config) { + setHeaderMinimumHeight(config, $header) { const minimumHeights = config._minimumHeights; if (!minimumHeights) return; const minimumHeight = minimumHeights[`_${Adapt.device.screenSize}`] ?? minimumHeights._small; - this.$el + $header .toggleClass('has-min-height', Boolean(minimumHeight)) .css('min-height', minimumHeight ? minimumHeight + 'px' : ''); } From 0dc8871555edc9b11eca9fcbf36f75f71e484b67 Mon Sep 17 00:00:00 2001 From: Eleanor Heath Date: Tue, 7 Sep 2021 10:31:46 +0100 Subject: [PATCH 10/10] 2808 - added optional chaning operator --- js/BoxMenuView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/BoxMenuView.js b/js/BoxMenuView.js index e74387a..e9dc691 100644 --- a/js/BoxMenuView.js +++ b/js/BoxMenuView.js @@ -74,7 +74,7 @@ class BoxMenuView extends MenuView { processHeader() { const config = this.model.get('_boxMenu'); - const header = config && config._menuHeader; + const header = config?._menuHeader; if (!header) return;