Feature/groups (#93)

* Added group functionality * Updated aria heading type * Added _renderAsGroup entry to readme, example.json and schema
adaptlearning · Jul 1, 2020 · 0157139 · 0157139
1 parent 08e1e00
commit 0157139
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,12 @@ The following attributes, set within *contentObjects.json*, configure the defaul
 
 **duration** (string): Optional text which follows **durationLabel** (e.g., `"2 mins"`).  
 
+**\_boxMenu** (object): The boxMenu object that contains value for **\_renderAsGroup**.
+
+>**\_renderAsGroup** (boolean): Enable this option to render items into a group on the menu. Groups can display a title, body, and instruction text. 
+
+>Framework: Change the group content object type to `menu` and update the `_parentId` of the children content objects to match the group content object `_id`. Authoring Tool: Add a submenu and check the 'Enable as menu group?' setting. All users: If accessibility is required update the aria level values in config settings so the title heirarchy remains intact. 
+
 <div float align=right><a href="#top">Back to Top</a></div>  
 
 ### Accessibility

diff --git a/example.json b/example.json
@@ -46,3 +46,40 @@
         "linkText": "View",
         "duration": "2 mins"
     }
+
+    // contentObjects.json
+    // Render menu with grouped items
+    {
+        "_id": "co-00",
+        "_parentId": "course",
+        "_type": "menu",
+        "title": "Group 1",
+        "displayTitle": "Group 1",
+        "body": "Body",
+        "instruction": "Instruction",
+        "_boxMenu": {
+            "_renderAsGroup": true
+        }
+    },
+    {
+        "_id": "co-100",
+        "_parentId": "co-00",
+        "_type": "page",
+        "_classes": "",
+        "_htmlClasses": "",
+        "title": "Title",
+        "displayTitle": "Title",
+        "body": "Body",
+        "instruction": "Instruction"
+    },
+    {
+        "_id": "co-200",
+        "_parentId": "co-00",
+        "_type": "page",
+        "_classes": "",
+        "_htmlClasses": "",
+        "title": "Title",
+        "displayTitle": "Title",
+        "body": "Body",
+        "instruction": "Instruction"
+    }
diff --git a/js/adapt-contrib-boxMenu.js b/js/adapt-contrib-boxMenu.js
@@ -2,8 +2,9 @@ define([
   'core/js/adapt',
   'core/js/models/menuModel',
   'core/js/views/menuView',
-  "./adapt-contrib-boxMenuItemView"
-], function(Adapt, MenuModel, MenuView, BoxMenuItemView) {
+  './adapt-contrib-boxMenuItemView',
+  './adapt-contrib-boxMenuGroupView'
+], function(Adapt, MenuModel, MenuView, BoxMenuItemView, BoxMenuGroupView) {
 
   var BoxMenuView = MenuView.extend({
 
@@ -12,14 +13,38 @@ define([
       this.setStyles();
 
       this.listenTo(Adapt, {
-        "device:changed": this.onDeviceResize
+        'device:changed': this.onDeviceResize
       });
     },
 
     onDeviceResize: function() {
       this.setStyles();
     },
 
+    addChildren: function() {
+      var nthChild = 0;
+      var models = this.model.getChildren().models;
+      this.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) ?
+          BoxMenuGroupView :
+          BoxMenuItemView;
+
+        var $parentContainer = this.$(this.constructor.childContainer);
+        var childView = new ChildView({ model: model });
+
+        this.childViews[model.get('_id')] = childView;
+
+        $parentContainer.append(childView.$el);
+
+      }.bind(this));
+    },
+
     setStyles: function() {
       this.setBackgroundImage();
       this.setBackgroundStyles();
@@ -35,10 +60,10 @@ define([
       var backgroundImage;
 
       switch (Adapt.device.screenSize) {
-        case "large":
+        case 'large':
           backgroundImage = backgroundImages._large;
           break;
-        case "medium":
+        case 'medium':
           backgroundImage = backgroundImages._medium;
           break;
         default:
@@ -47,12 +72,12 @@ define([
 
       if (backgroundImage) {
         this.$el
-          .addClass("has-bg-image")
-          .css("background-image", "url(" + backgroundImage + ")");
+          .addClass('has-bg-image')
+          .css('background-image', 'url(' + backgroundImage + ')');
       } else {
         this.$el
-          .removeClass("has-bg-image")
-          .css("background-image", "");
+          .removeClass('has-bg-image')
+          .css('background-image', '');
       }
     },
 
@@ -90,10 +115,10 @@ define([
       var backgroundImage;
 
       switch (Adapt.device.screenSize) {
-        case "large":
+        case 'large':
           backgroundImage = backgroundImages._large;
           break;
-        case "medium":
+        case 'medium':
           backgroundImage = backgroundImages._medium;
           break;
         default:
@@ -102,12 +127,12 @@ define([
 
       if (backgroundImage) {
         $header
-          .addClass("has-bg-image")
-          .css("background-image", "url(" + backgroundImage + ")");
+          .addClass('has-bg-image')
+          .css('background-image', 'url(' + backgroundImage + ')');
       } else {
         $header
-          .removeClass("has-bg-image")
-          .css("background-image", "");
+          .removeClass('has-bg-image')
+          .css('background-image', '');
       }
     },
 
@@ -131,10 +156,10 @@ define([
       var minimumHeight;
 
       switch (Adapt.device.screenSize) {
-        case "large":
+        case 'large':
           minimumHeight = minimumHeights._large;
           break;
-        case "medium":
+        case 'medium':
           minimumHeight = minimumHeights._medium;
           break;
         default:
@@ -143,17 +168,16 @@ define([
 
       if (minimumHeight) {
         $header
-          .addClass("has-min-height")
-          .css("min-height", minimumHeight + "px");
+          .addClass('has-min-height')
+          .css('min-height', minimumHeight + 'px');
       } else {
         $header
-          .removeClass("has-min-height")
-          .css("min-height", "");
+          .removeClass('has-min-height')
+          .css('min-height', '');
       }
     }
 
   }, {
-    childView: BoxMenuItemView,
     className: 'boxmenu',
     template: 'boxMenu'
   });

diff --git a/js/adapt-contrib-boxMenuGroupView.js b/js/adapt-contrib-boxMenuGroupView.js
@@ -0,0 +1,23 @@
+define([
+  'core/js/views/menuItemView',
+  './adapt-contrib-boxMenuItemView'
+], function(MenuItemView, BoxMenuItemView) {
+
+  var BoxMenuGroupView = MenuItemView.extend({
+
+    postRender: function() {
+      _.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'
+  });
+
+  return BoxMenuGroupView;
+
+});
diff --git a/js/adapt-contrib-boxMenuItemView.js b/js/adapt-contrib-boxMenuItemView.js
@@ -1,5 +1,5 @@
 define([
-  "core/js/views/menuItemView"
+  'core/js/views/menuItemView'
 ], function(MenuItemView) {
 
   var BoxMenuItemView = MenuItemView.extend({

diff --git a/less/boxMenu.less b/less/boxMenu.less
@@ -5,7 +5,7 @@
     .l-container-responsive(@device-width-large);
   }
 
-  &__item-container-inner {
+  &__item-container &__item-container-inner {
     display: flex;
     flex-wrap: wrap;
     .l-container-responsive(@device-width-large);

diff --git a/less/boxMenuGroup.less b/less/boxMenuGroup.less
@@ -0,0 +1,10 @@
+.boxmenu-group {
+  &__header-inner {
+    .l-container-responsive(@device-width-large);
+  }
+
+  &__item-container-inner {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
diff --git a/properties.schema b/properties.schema
@@ -194,7 +194,24 @@
           }
         },
         "contentobject": {
-          "type": "object"
+          "type": "object",
+          "properties": {
+            "_boxMenu": {
+              "type": "object",
+              "required": false,
+              "properties": {
+                "_renderAsGroup": {
+                  "type": "boolean",
+                  "required": false,
+                  "default": false,
+                  "title": "Enable as menu group?",
+                  "inputType": "Checkbox",
+                  "validators": [],
+                  "help": "Enable this option to render items into a group on the menu. Groups can display a title, body, and instruction text."
+                }
+              }
+            }
+          }
         },
         "article": {
           "type": "object"

diff --git a/templates/boxMenuGroup.hbs b/templates/boxMenuGroup.hbs
@@ -0,0 +1,47 @@
+{{import_globals}}
+
+<div class="menu-group__inner boxmenu-group__inner">
+
+  <div class="menu-group__header boxmenu-group__header">
+    <div class="menu-group__header-inner boxmenu-group__header-inner">
+
+      {{#if displayTitle}}
+      <div class="menu-group__title boxmenu-group__title">
+        <div class="js-heading" data-a11y-heading-type="menuGroup"></div>
+
+        <div class="menu-group__title-inner boxmenu-group__title-inner accessible-text-block" aria-hidden="true">
+          {{{compile displayTitle}}}
+        </div>
+      </div>
+      {{/if}}
+
+      {{#if body}}
+      <div class="menu-group__body boxmenu-group__body">
+        <div class="menu-group__body-inner boxmenu-group__body-inner">
+          {{{compile body}}}
+        </div>
+      </div>
+      {{/if}}
+
+      {{#if instruction}}
+      <div class="menu-group__instruction boxmenu-group__instruction">
+        <div class="menu-group__instruction-inner boxmenu-group__instruction-inner">
+          {{{compile instruction}}}
+        </div>
+      </div>
+      {{/if}}
+
+      <div class="menu-group__progress boxmenu-group__progress js-menu-item-progress">
+        {{!-- Menu item progress bar will render in here --}}
+      </div>
+
+    </div>
+  </div>
+
+  <div class="menu-group__container boxmenu-group__container">
+    <div class="menu-group__item-container-inner boxmenu-group__item-container-inner js-group-children" role="list">
+      {{!-- Grouped menu items render here --}}
+    </div>
+  </div>
+
+</div>
diff --git a/templates/boxMenuItem.hbs b/templates/boxMenuItem.hbs
@@ -52,5 +52,4 @@
     </div>
   </div>
 
-
 </div>