Feature/groups

README.md

@@ -92,6 +92,49 @@ 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 of remains intact. 
+
+```
+    {
+        "_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"
+    }
+```
+
 <div float align=right><a href="#top">Back to Top</a></div>  
 
 ### Accessibility

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"
+    }

js/adapt-contrib-boxMenu.js

@@ -1,8 +1,9 @@
 define([
   'core/js/adapt',
   'core/js/views/menuView',
-  "./adapt-contrib-boxMenuItemView"
-], function(Adapt, MenuView, BoxMenuItemView) {
+  "./adapt-contrib-boxMenuItemView",
+  "./adapt-contrib-boxMenuGroupView"
+], function(Adapt, MenuView, BoxMenuItemView, BoxMenuGroupView) {
 
   var BoxMenuView = MenuView.extend({
 
@@ -19,6 +20,30 @@ define([
       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();
@@ -152,7 +177,6 @@ define([
     }
 
   }, {
-    childView: BoxMenuItemView,
     className: 'boxmenu',
     template: 'boxMenu'
   });

js/adapt-contrib-boxMenuGroupView.js

@@ -0,0 +1,25 @@
+define([
+  "core/js/views/menuItemView",
+  "./adapt-contrib-boxMenuItemView"
+], function(MenuItemView, BoxMenuItemView) {
+
+  var BoxMenuGroupView = MenuItemView.extend({
+
+    postRender: function() {
+      _.defer(function() {
+        this.addChildren();
+      }.bind(this));
+      this.$el.imageready(this.setReadyStatus.bind(this));
+      this.$('.boxmenu__item-container').addClass('has-groups');
+    }
+
+  }, {
+    childContainer: '.js-group-children',
+    childView: BoxMenuItemView,
+    className: 'boxmenu-group',
+    template: 'boxMenuGroup'
+  });
+
+  return BoxMenuGroupView;
+
+});

less/boxMenu.less

@@ -5,7 +5,7 @@
     .l-container-responsive(@device-width-large);
   }
 
-  &__item-container-inner {
+  &__item-container:not(.has-groups) &__item-container-inner {
     display: flex;
     flex-wrap: wrap;
     .l-container-responsive(@device-width-large);

less/boxMenuGroup.less

@@ -0,0 +1,11 @@
+.boxmenu-group {
+  &__header-inner {
+    .l-container-responsive(@device-width-large);
+  }
+
+  &__item-container-inner {
+    display: flex;
+    flex-wrap: wrap;
+    .l-container-responsive(@device-width-large);
+  }
+}

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"

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>

templates/boxMenuItem.hbs

@@ -52,5 +52,4 @@
     </div>
   </div>
 
-
 </div>