[FEATURE] Multiple Menu Support (#79)

* Support multiple menus with different state

* Remove console log

* Fix initial state and cleanup

* Remove burger-menu service and keep state contained per menu

* Fix tests + update readme

* Use native dom helpers

* Use state actions to handle all open and close requests

This allows us to contain the `locked` logic to the state object

* Cleanup

* Update readme

Author: offirgolan

README.md

@@ -13,7 +13,6 @@ An off-canvas sidebar component with a collection of animations and styles using
 
 - Easy to use & setup off-canvas menu
 - Mix and match from many menu & menu item animations
-- Control your menu from anywhere in your app
 - Swipe gesture support with changeable thresholds
 - Easily create your own animations
 
@@ -123,8 +122,7 @@ This addon utilizes contextual components to be able to correctly control and an
 
 - #### `locked`
 
-  Lock the menu in its current open / closed state. Please note that changes made
-  directly via the burgerMenu service or {{burger.state.actions}} will still propagate.
+  Lock the menu in its current open / closed state.
 
   **Default: false**
 
@@ -214,29 +212,7 @@ The individual menu item. This is required if you have specified an [itemAnimati
 
 ## The Menu State
 
-### Via Component
-
-The `{{burger-menu}}` component exposes multiple contextual components, but it also exposes a state object which allows you to control the state of the menu.
-
-```hbs
-{{#burger-menu as |burger|}}
-  {{#burger.outlet}}
-    <a {{action burger.state.actions.toggle}} class="close fa fa-times"></a>
-  {{/burger.outlet}}
-{{/burger-menu}}
-```
-
-### Via Service
-
-If you need a more programmatic solution, you can grab the menu state via injecting the `burgerMenu` service.
-
-```js
-export default Ember.Component.extend({
-  burgerMenu: Ember.inject.service()
-})
-```
-
-### Usage
+The `{{burger-menu}}` component exposes multiple contextual components, but it also exposes a state object.
 
 You can use the menu state object to modify pretty much any property.
 
@@ -247,13 +223,7 @@ You can use the menu state object to modify pretty much any property.
 - `itemAnimation`
 - `customAnimation`
 
-```js
-burgerMenu.set('width', 500);
-burgerMenu.toggleProperty('open');
-```
-
-The state object also exposes some actions.
-
+The state object also exposes some actions:
 
 - #### `open`
 

addon/services/burger-menu.js addon/-private/state.jsaddon/services/burger-menu.js renamed to addon/-private/state.js

@@ -5,7 +5,7 @@ const {
   computed
 } = Ember;
 
-export default Ember.Service.extend({
+export default Ember.Object.extend({
   open: false,
   locked: false,
   width: 300,
@@ -28,9 +28,9 @@ export default Ember.Service.extend({
 
   actions: computed(function() {
     return {
-      open: () => this.set('open', true),
-      close: () => this.set('open', false),
-      toggle: () => this.toggleProperty('open')
+      open: () => !this.get('locked') && this.set('open', true),
+      close: () => !this.get('locked') && this.set('open', false),
+      toggle: () => !this.get('locked') && this.toggleProperty('open')
     };
   }).readOnly()
 });

addon/components/bm-menu-item.js

@@ -5,16 +5,15 @@ import computedStyleFor from 'ember-burger-menu/computed/style-for';
 const {
   $,
   run,
-  computed,
-  inject: { service }
+  computed
 } = Ember;
 
 export default Ember.Component.extend({
   layout,
   classNames: ['bm-menu-item'],
   attributeBindings: ['style'],
 
-  state: service('burgerMenu'),
+  state: null,
 
   menuItems: null,
   dismissOnClick: false,
@@ -36,8 +35,10 @@ export default Ember.Component.extend({
   },
 
   click() {
-    if (this.get('dismissOnClick') && !this.get('state.locked')) {
-      this.set('state.open', false);
+    this._super(...arguments);
+
+    if (this.get('dismissOnClick')) {
+      this.get('state.actions').close();
     }
   }
 });

addon/components/bm-menu.js

@@ -5,8 +5,7 @@ import computedStyleFor from 'ember-burger-menu/computed/style-for';
 const {
   computed,
   observer,
-  A: emberArray,
-  inject: { service }
+  A: emberArray
 } = Ember;
 
 export const OUTLET_MENU_ANIMATIONS = [
@@ -16,7 +15,7 @@ export const OUTLET_MENU_ANIMATIONS = [
 
 export default Ember.Component.extend({
   layout,
-  state: service('burgerMenu'),
+  state: null,
 
   itemTagName: 'div',
   dismissOnItemClick: false,

addon/components/bm-outlet.js

@@ -2,14 +2,10 @@ import Ember from 'ember';
 import layout from '../templates/components/bm-outlet';
 import computedStyleFor from 'ember-burger-menu/computed/style-for';
 
-const {
-  inject: { service }
-} = Ember;
-
 export default Ember.Component.extend({
   layout,
   classNames: ['bm-outlet'],
   attributeBindings: ['style'],
-  state: service('burgerMenu'),
+  state: null,
   style: computedStyleFor('outlet').readOnly()
 });

addon/components/burger-menu.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 import layout from '../templates/components/burger-menu';
 import computedStyleFor from 'ember-burger-menu/computed/style-for';
 import SwipeSupportMixin from 'ember-burger-menu/mixins/swipe-support';
+import State from 'ember-burger-menu/-private/state';
 import DomMixin from 'ember-lifeline/mixins/dom';
 
 const {
@@ -10,23 +11,22 @@ const {
   run,
   observer,
   computed,
-  computed: { alias },
-  inject: { service }
+  computed: { alias }
 } = Ember;
 
 export default Ember.Component.extend(DomMixin, SwipeSupportMixin, {
+  layout,
   classNames: ['ember-burger-menu'],
   classNameBindings: ['open:is-open', 'translucentOverlay', 'animationClass', 'position'],
   attributeBindings: ['style'],
-  layout,
-
-  state: service('burgerMenu'),
 
   translucentOverlay: true,
   dismissOnClick: true,
   dismissOnEsc: true,
   gesturesEnabled: true,
 
+  state: computed(() => State.create()).readOnly(),
+
   open: alias('state.open'),
   locked: alias('state.locked'),
   position: alias('state.position'),
@@ -46,63 +46,61 @@ export default Ember.Component.extend(DomMixin, SwipeSupportMixin, {
     run.cancel(this._setupEventsTimer);
   },
 
-  setupEvents: on('didInsertElement', observer('open', 'locked', function() {
-    if (this.get('locked')) {
-      this._setupEventsTimer = run.scheduleOnce('afterRender', this, '_teardownEvents');
-    } else {
-      let methodName = this.get('open') ? '_setupEvents' : '_teardownEvents';
-      this._setupEventsTimer = run.scheduleOnce('afterRender', this, methodName);
-    }
+  setupEvents: on('didReceiveAttrs', observer('open', 'locked', function() {
+    let methodName = (this.get('open') && !this.get('locked')) ? '_setupEvents' : '_teardownEvents';
+    this._setupEventsTimer = run.scheduleOnce('afterRender', this, methodName);
   })),
 
   _setupEvents() {
+    let elementId = this.get('elementId');
+
     if (this.get('dismissOnClick')) {
-      this.addEventListener(this.$(), 'click', this.onClick);
-      this.addEventListener(this.$(), 'touchstart', this.onClick);
+      this.addEventListener($('body'), `click.${elementId}`, this.onClick);
+      this.addEventListener($('body'), `touchstart.${elementId}`, this.onClick);
     }
 
     if (this.get('dismissOnEsc')) {
-      this.addEventListener(document, 'keyup', this.onKeyup);
+      this.addEventListener(document, `keyup.${elementId}`, this.onKeyup);
     }
   },
 
   _teardownEvents() {
-    this.removeEventListener(this.$(), 'click', this.onClick);
-    this.removeEventListener(this.$(), 'touchstart', this.onClick);
-    this.removeEventListener(document, 'keyup', this.onKeyup);
+    let elementId = this.get('elementId');
+
+    this.removeEventListener($('body'), `click.${elementId}`, this.onClick);
+    this.removeEventListener($('body'), `touchstart.${elementId}`, this.onClick);
+    this.removeEventListener(document, `keyup.${elementId}`, this.onKeyup);
   },
 
   onClick(e) {
-    // Close the menu if clicked outside of it
-    if ($(e.target).closest('.bm-menu').length === 0) {
-      e.stopPropagation();
-      e.preventDefault();
+    let elementId = this.get('elementId');
 
-      this.set('open', false);
+    // Close the menu if clicked outside of it
+    if ($(e.target).closest(`#${elementId} .bm-menu`).length === 0) {
+      this.get('state.actions').close();
     }
   },
 
   onKeyup(e) {
     if (e.keyCode === 27) {
-      this.set('open', false);
+      this.get('state.actions').close();
     }
   },
 
   onSwipe(direction, target) {
     let position = this.get('position');
     let open = this.get('open');
-    let locked = this.get('locked');
     let gesturesEnabled = this.get('gesturesEnabled');
     let isMenuSwipe = $(target).closest('.bm-menu').length > 0;
 
-    if (!gesturesEnabled || locked) {
+    if (!gesturesEnabled) {
       return;
     }
 
     if (open && isMenuSwipe && position === direction) {
-      this.set('open', false);
+      this.get('state.actions').close();
     } else if (!open && position !== direction) {
-      this.set('open', true);
+      this.get('state.actions').open();
     }
   }
 });

addon/mixins/swipe-support.js

@@ -2,14 +2,12 @@ import Ember from 'ember';
 
 const {
   isNone,
-  inject: { service },
   computed: { alias }
 } = Ember;
 
 let meta;
 
 export default Ember.Mixin.create({
-  state: service('burgerMenu'),
   minSwipeDistance: alias('state.minSwipeDistance'),
   maxSwipeTime: alias('state.maxSwipeTime'),
 

addon/styles/addon.scss

@@ -18,7 +18,7 @@
 
 .ember-burger-menu {
 	position: relative;
-	height: 100vh;
+	height: 100%;
 	overflow: hidden;
 
 	.bm-menu {

addon/templates/components/bm-menu.hbs

@@ -4,7 +4,8 @@
         item=(component 'bm-menu-item'
           tagName=itemTagName
           menuItems=menuItems
-          dismissOnClick=dismissOnItemClick)
+          dismissOnClick=dismissOnItemClick
+          state=state)
       )
     }}
   </div>

addon/templates/components/burger-menu.hbs

@@ -1,6 +1,6 @@
 {{yield (hash
-    outlet=(component 'bm-outlet' containerId=elementId)
-    menu=(component 'bm-menu' containerId=elementId)
+    outlet=(component 'bm-outlet' containerId=elementId state=state)
+    menu=(component 'bm-menu' containerId=elementId state=state)
     state=state
   )
 }}