Updated navigation and model classes

Author: djthorpe

js/model.js

@@ -19,10 +19,10 @@ const REGEXP_NOTALIASED = /^()(\{\}|\[\])?(\w+)$/i;
 export default class Model {
   constructor(data) {
     // Get prototype
-    const className = this.constructor.name;
-    const proto = Model.models[className];
+    const classKey = this.constructor.name;
+    const proto = Model.models[classKey];
     if (!proto) {
-      throw new Error(`Missing model definition for ${className}`);
+      throw new Error(`Missing model definition for ${classKey}`);
     }
 
     // Set prototype of instance prototype
@@ -36,33 +36,33 @@ export default class Model {
     if (typeof classConstructor !== 'function') {
       throw new Error('Called define without a class constructor');
     }
-    const classKey = className || classConstructor.name;
+    const classKey = classConstructor.name;
     if (Model.constructors[classKey]) {
-      throw new Error(`Class already defined ${classKey}`);
+      throw new Error(`Class already defined ${className || classKey}`);
     }
-    const proto = Model.$newproto(classKey, classProps);
+    const proto = Model.$newproto(classKey, classProps, className);
     if (!proto) {
-      throw new Error(`No prototype for ${classKey}`);
+      throw new Error(`No prototype for ${className || classKey}`);
     }
     Model.constructors[classKey] = classConstructor;
     Model.models[classKey] = proto;
   }
 
-  static $newproto(className, classProps) {
+  static $newproto(classKey, classProps, className) {
     const proto = {};
 
     // $className property
     Object.defineProperty(proto, '$className', {
-      value: className,
+      value: className || classKey,
       writable: false,
       enumerable: false,
     });
 
     // $type property
-    Model.types[className] = new Map();
+    Model.types[classKey] = new Map();
     Object.defineProperty(proto, '$type', {
       get() {
-        return Model.types[className];
+        return Model.types[classKey];
       },
       enumerable: false,
     });
@@ -84,7 +84,7 @@ export default class Model {
       if (!type) {
         throw new Error(`Unable to parse declaration ${decl} for ${key}`);
       } else {
-        Model.types[className].set(key, type);
+        Model.types[classKey].set(key, type);
       }
       // Create getter and setter
       Object.defineProperty(proto, key, {

js/nav.js

@@ -9,23 +9,23 @@ const EVENT_ROOT = 'mvc.nav';
 const EVENT_CLICK = `${EVENT_ROOT}.click`;
 const CLASS_ACTIVE = 'active';
 
-// ////////////////////////////////////////////////////////////////////////////
-// NAV
-
+/**
+ * Nav is the navgation view, which emits a mvc.nav.click event whenever
+ * a navigational item is clicked which has an empty href in the navigation
+ * item.
+ * @class
+*/
 export default class Nav extends View {
   constructor(node) {
     super(node);
     this.$map = new Map();
 
-    // Set up nav items
-    this.queryAll('.nav-item a.nav-link').forEach((elem) => {
-      const navLink = new URL(elem.href).pathname.pathSplit().join('/');
-      if (elem.parentNode.id) {
-        this.$map.set(navLink, elem.parentNode.id);
-      }
-      elem.addEventListener('click', () => {
-        this.dispatchEvent(EVENT_CLICK, this, elem.parentNode);
-      });
+    // Set up nav items - those with HREF # dispatch events
+    this.queryAll('li a.nav-link').forEach((elem) => {
+      this.$set(elem);
+    });
+    this.queryAll('li a.dropdown-item').forEach((elem) => {
+      this.$set(elem);
     });
 
     // Determine current path and set the active link
@@ -36,8 +36,32 @@ export default class Nav extends View {
     }
   }
 
+  /// @private
+  $set(node) {
+    const { href } = node;
+    if (!href || href === '#') {
+      node.addEventListener('click', (evt) => {
+        evt.preventDefault();
+        evt.cancelPropogation();
+        this.dispatchEvent(EVENT_CLICK, this, node.parentNode);
+      });
+    } else {
+      const navLink = new URL(href).pathname.pathSplit().join('/');
+      if (node.parentNode.id) {
+        this.$map.set(navLink, node.parentNode.id);
+      }
+    }
+  }
+
+  /**
+  * Set a class name on a specific navigational item and remove
+  * that class from other navigational items. Usually this is used
+  * to mark a specific dropdown item as active, for example.
+  * @param {string} key - The id of the navigational item
+  * @param {string} className - The class name which indicates
+  */
   setClassName(key, className) {
-    this.queryAll('.nav-item a.nav-link').forEach((elem) => {
+    this.queryAll('li a.nav-link').forEach((elem) => {
       if (elem.parentNode.id === key) {
         elem.classList.add(className);
       } else {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djthorpe/js-framework",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Javascript UI Framework",
   "main": "dist/js/index.js",
   "scripts": {