issue/3281 Added data-order to buttons for sorting navigation (#61)

adaptlearning · Feb 7, 2022 · c29eace · c29eace
1 parent faae481
commit c29eace
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 3 deletions.
diff --git a/js/views/navigationView.js b/js/views/navigationView.js
@@ -14,15 +14,16 @@ class NavigationView extends Backbone.View {
 
   attributes() {
     return {
-      'role': 'navigation'
+      role: 'navigation'
     };
   }
 
   initialize() {
+    this.sortNavigationButtons = _.debounce(this.sortNavigationButtons.bind(this), 1);
     this.listenToOnce(Adapt, {
       'courseModel:dataLoading': this.remove
     });
-    this.listenTo(Adapt, 'router:menu router:page', this.hideNavigationButton);
+    this.listenTo(Adapt, 'router:menu router:page', this.onNavigate);
     this.preRender();
   }
 
@@ -72,11 +73,24 @@ class NavigationView extends Backbone.View {
     Adapt.a11y.focusFirst('.' + Adapt.location._contentType);
   }
 
+  onNavigate(model) {
+    this.hideNavigationButton(model);
+    this.sortNavigationButtons();
+  }
+
   hideNavigationButton(model) {
     const shouldHide = (model.get('_type') === 'course');
     this.$('.nav__back-btn, .nav__home-btn').toggleClass('u-display-none', shouldHide);
   }
 
+  sortNavigationButtons() {
+    const container = this.$('.nav__inner')[0];
+    const items = [...container.children];
+    items
+      .sort((a, b) => parseFloat($(a).attr('data-order') || 0) - parseFloat($(b).attr('data-order') || 0))
+      .forEach(item => container.appendChild(item));
+  }
+
   showNavigationButton() {
     this.$('.nav__back-btn, .nav__home-btn').removeClass('u-display-none');
   }

diff --git a/schema/course.model.schema b/schema/course.model.schema
@@ -333,6 +333,25 @@
               }
             }
           }
+        },
+        "_extensions": {
+          "type": "object",
+          "title": "Extensions",
+          "default": {},
+          "properties": {
+            "_drawer": {
+              "type": "object",
+              "title": "Drawer",
+              "default": {},
+              "properties": {
+                "_navOrder": {
+                  "type": "number",
+                  "title": "Navigation bar order",
+                  "default": 0
+                }
+              }
+            }
+          }
         }
       }
     },

diff --git a/schema/course.schema.json b/schema/course.schema.json
@@ -302,6 +302,25 @@
                   }
                 }
               }
+            },
+            "_extensions": {
+              "type": "object",
+              "title": "Extensions",
+              "default": {},
+              "properties": {
+                "_drawer": {
+                  "type": "object",
+                  "title": "Drawer",
+                  "default": {},
+                  "properties": {
+                    "visited": {
+                      "type": "number",
+                      "title": "Navigation bar order",
+                      "default": 0
+                    }
+                  }
+                }
+              }
             }
           }
         },

diff --git a/templates/nav.hbs b/templates/nav.hbs
@@ -14,7 +14,7 @@
     <div class="icon"></div>
   </button>
 
-  <button class="btn-icon nav__btn nav__drawer-btn js-nav-drawer-btn" data-event="toggleDrawer" aria-label="{{_globals._accessibility._ariaLabels.navigationDrawer}}">
+  <button class="btn-icon nav__btn nav__drawer-btn js-nav-drawer-btn" data-event="toggleDrawer" aria-label="{{_globals._accessibility._ariaLabels.navigationDrawer}}" data-order="{{_globals._extensions._drawer._navOrder}}">
     <div class="icon"></div>
   </button>