Merge pull request #399 from hannakim91/co-locate-es-header-navbar-link-component

Convert classic component to glimmer component and co-locate

Author: jaredgalanis

addon/components/es-header-navbar-link.hbs

@@ -0,0 +1,40 @@
+<li
+  class='navbar-list-item {{if this.isDropdown "dropdown"}}'
+  {{did-insert this.setElement}}
+  {{will-destroy this.unregisterListener}}
+>
+  {{#if (eq @link.type 'link')}}
+    <a class='navbar-list-item-link' href={{@link.href}}>
+      {{@link.name}}
+    </a>
+  {{/if}}
+  {{#if (eq @link.type 'dropdown')}}
+    <button
+      type='button'
+      class='navbar-list-item-dropdown-toggle {{
+        if this.isDropdownOpen 'active'
+      }}'
+      aria-expanded={{this.isExpanded}}
+      {{on 'click' this.toggleDropdown}}
+      {{on 'blur' this.processBlur}}
+    >
+      {{@link.name}}
+    </button>
+    {{#if this.isDropdownOpen}}
+      <ul class='navbar-dropdown-list'>
+        {{#each @link.items as |item|}}
+          {{#if (eq item.type 'link')}}
+            <li class='navbar-dropdown-list-item'>
+              <a class='navbar-dropdown-list-item-link' href={{item.href}}>
+                {{item.name}}
+              </a>
+            </li>
+          {{/if}}
+          {{#if (eq item.type 'divider')}}
+            <li role='separator' class='separator'></li>
+          {{/if}}
+        {{/each}}
+      </ul>
+    {{/if}}
+  {{/if}}
+</li>

addon/components/es-header-navbar-link.js

@@ -1,58 +1,53 @@
 /* eslint-disable ember/no-classic-components, ember/no-classic-classes, ember/require-tagless-components, prettier/prettier, ember/no-get, ember/no-component-lifecycle-hooks, ember/require-super-in-lifecycle-hooks */
-import Component from '@ember/component';
-import layout from 'ember-styleguide/templates/components/es-header-navbar-link';
-import { computed } from '@ember/object';
-import { equal } from '@ember/object/computed';
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { schedule, next } from '@ember/runloop';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-export default Component.extend({
-  layout,
-  tagName: 'li',
-  classNames: ['navbar-list-item'],
-  classNameBindings: ['isDropdown:dropdown'],
-  isDropdown: equal('link.type', 'dropdown'),
-  isDropdownOpen: false,
+export default class EsHeaderNavbarLink extends Component {
+  @service navbar;
 
-  // because aria-expanded requires a string value instead of a boolean
-  isExpanded: computed('isDropdownOpen', function() {
-    return this.isDropdownOpen ? 'true' : 'false';
-  }),
+  @tracked element = null;
+  @tracked linkType = this.args.link.type;
+  @tracked isDropdownOpen = false;
 
-  navbar: service(),
+  get isDropdown() {
+    return this.linkType === 'dropdown';
+  }
 
-  init() {
-    this._super(...arguments);
-    this.get('navbar').register(this);
-  },
-
-  didInsertElement() {
-    let button = this.element.querySelector('.navbar-list-item-dropdown-toggle');
+  // because aria-expanded requires a string value instead of a boolean
+  get isExpanded() {
+    return this.isDropdownOpen ? 'true' : 'false';
+  }
 
-    if (button) {
-      button.addEventListener('blur', () => this.processBlur());
-    }
-  },
+  constructor() {
+    super(...arguments);
+    this.navbar.register(this);
+  }
 
   setupLinkBlurs() {
     if (this.linkBlursActive) {
       return;
     }
 
-    this.set('linkBlursActive', true);
-
+    this.linkBlursActive = true;
     let links = Array.from(this.element.querySelectorAll('.navbar-dropdown-list-item-link'));
 
-    links.forEach(ancor => {
-      ancor.addEventListener('blur', () => this.processBlur());
+    links.forEach(anchor => {
+      anchor.addEventListener('blur', () => this.processBlur());
     });
-  },
+  }
+
+  @action
+  setElement(element) {
+    this.element = element;
+  }
 
   @action
   toggleDropdown(event) {
-    this.get('navbar').closePopupMenu(this);
-    this.toggleProperty('isDropdownOpen');
+    this.navbar.closePopupMenu(this);
+    this.isDropdownOpen = !this.isDropdownOpen;
 
     if (this.isDropdownOpen) {
       // if it's open, let's make sure it can do some things
@@ -68,20 +63,9 @@ export default Component.extend({
         this.processKeyPress();
       });
     }
-  },
-
-  closeDropdown() {
-    // set the isDropdownOpen to false, which will make the dropdown go away
-    this.set('isDropdownOpen', false);
-  },
-
-  openDropdown() {
-    //might not need this
-    // open the dropdown and set the focus to the first item inside
-    this.set('isDropdownOpen', true);
-    this.processFirstElementFocus();
-  },
+  }
 
+  @action
   processBlur() {
     next(this, function() {
       let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
@@ -92,17 +76,35 @@ export default Component.extend({
         this.closeDropdown();
       }
     });
-  },
+  }
+
+  @action
+  unregisterListener(element) {
+    element.removeEventListener('keydown', this.triggerDropdown);
+    element.removeEventListener('click', this.triggerDropdown);
+  }
+
+  closeDropdown() {
+    // set the isDropdownOpen to false, which will make the dropdown go away
+    this.isDropdownOpen = false;
+  }
+
+  openDropdown() {
+    //might not need this
+    // open the dropdown and set the focus to the first item inside
+    this.isDropdownOpen = true;
+    this.processFirstElementFocus();
+  }
 
   processClick() {
     // TODO handle mouseclick outside the current dropdown
-  },
+  }
 
   processFirstElementFocus() {
     // Identify the first item in the dropdown list & set focus on it
     let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a');
     firstFocusable.focus();
-  },
+  }
 
   processKeyPress() {
     // add event listeners
@@ -122,18 +124,13 @@ export default Component.extend({
         return;
       }
     });
-  },
+  }
 
   returnFocus() {
     // after that rendering bit happens, we need to return the focus to the trigger
     schedule('afterRender', this, function() {
       let dropdownTrigger = this.element.querySelector('.navbar-list-item-dropdown-toggle');
       dropdownTrigger.focus();
     });
-  },
-
-  willDestroyElement() {
-    document.removeEventListener('keydown', this.triggerDropdown);
-    // document.removeEventListener('click', this.triggerDropdown);
-  },
-});
+  }
+}