Recursively collapse menu items on program unit tap

2sky · Dec 9, 2016 · 8729024 · 8729024
1 parent 828f83e
commit 8729024
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/WebComponents/Menu/menu.html b/src/WebComponents/Menu/menu.html
@@ -27,7 +27,7 @@
             <div class="horizontal layout flex relative">
                 <vi-scroller class="flex programUnits" no-horizontal>
                     <template is="dom-repeat" items="[[programUnits]]" as="programUnit">
-                        <vi-menu-item class="program-unit" item="[[programUnit]]" filter="[[filter]]" program-unit="[[activeProgramUnit]]" collapsed="[[collapsed]]" items="[[programUnit.items]]"></vi-menu-item>
+                        <vi-menu-item class="program-unit" item="[[programUnit]]" filter="[[filter]]" program-unit="[[activeProgramUnit]]" collapsed="[[collapsed]]" items="[[programUnit.items]]" collapse-groups-on-tap></vi-menu-item>
                         <template is="dom-if" if="[[_computeIsFirstRunProgramUnit(app.service.application, programUnit)]]">
                             <div id="add" on-tap="_add">+ Add menu item</div>
                         </template>

diff --git a/src/WebComponents/Menu/menu.ts b/src/WebComponents/Menu/menu.ts
@@ -245,6 +245,10 @@ namespace Vidyano.WebComponents {
             href: {
                 type: String,
                 computed: "_computedHref(item, app)"
+            },
+            collapseGroupsOnTap: {
+                type: Boolean,
+                reflectToAttribute: true
             }
         },
         observers: [
@@ -258,6 +262,7 @@ namespace Vidyano.WebComponents {
     })
     export class MenuItem extends WebComponent {
         readonly expand: boolean; private _setExpand: (val: boolean) => void;
+        collapseGroupsOnTap: boolean;
         item: Vidyano.ProgramUnitItem;
         programUnit: Vidyano.ProgramUnit;
         collapsed: boolean;
@@ -275,7 +280,17 @@ namespace Vidyano.WebComponents {
             return level + 1;
         }
 
+        private _collapseRecursive() {
+            if (!this.collapseGroupsOnTap)
+                this._setExpand(false);
+
+            Array.prototype.forEach.call(Polymer.dom(this.root).querySelectorAll("vi-menu-item[has-items]"), (item: MenuItem) => item._collapseRecursive());
+        }
+
         private _tap(e: Event) {
+            if (!this.filtering && this.collapseGroupsOnTap)
+                this._collapseRecursive();
+
             if (!this.item || !this.item.path) {
                 e.preventDefault();
                 this._setExpand(!this.expand);