Merge pull request #29 from offirgolan/locked-open

[FEATURE] Locked + gesturesEnabled + use ember-lifeline

Author: offirgolan

README.md

@@ -120,6 +120,13 @@ This addon utilizes contextual components to be able to correctly control and an
 
   **Default: 300**
 
+- #### `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.
+
+  **Default: false**
+
 - #### `customAnimation`
 
   Override of the menu's styles with your own implementation. See [Custom Animations](#custom-animations) for more details.
@@ -142,6 +149,12 @@ This addon utilizes contextual components to be able to correctly control and an
 
   **Default: true**
 
+- #### `gesturesEnabled`
+
+  Whether the menu can be open / closed using gestures. The only available gesture currently is swipe.
+
+  **Default: true**
+
 - #### `minSwipeDistance`
 
   The minimum distance (in px) the user must swipe to register as valid.

addon/components/bm-menu-item.js

@@ -36,7 +36,7 @@ export default Ember.Component.extend({
   },
 
   click() {
-    if (this.get('dismissOnClick')) {
+    if (this.get('dismissOnClick') && !this.get('state.locked')) {
       this.set('state.open', false);
     }
   }

addon/components/burger-menu.js

@@ -1,7 +1,8 @@
 import Ember from 'ember';
 import layout from '../templates/components/burger-menu';
 import computedStyleFor from 'ember-burger-menu/computed/style-for';
-import SwipeSupport from 'ember-burger-menu/mixins/swipe-support';
+import SwipeSupportMixin from 'ember-burger-menu/mixins/swipe-support';
+import DomMixin from 'ember-lifeline/mixins/dom';
 
 const {
   $,
@@ -13,7 +14,7 @@ const {
   inject: { service }
 } = Ember;
 
-export default Ember.Component.extend(SwipeSupport, {
+export default Ember.Component.extend(DomMixin, SwipeSupportMixin, {
   classNames: ['ember-burger-menu'],
   classNameBindings: ['open:is-open', 'translucentOverlay', 'animationClass', 'position'],
   attributeBindings: ['style'],
@@ -24,8 +25,10 @@ export default Ember.Component.extend(SwipeSupport, {
   translucentOverlay: true,
   dismissOnClick: true,
   dismissOnEsc: true,
+  gesturesEnabled: true,
 
   open: alias('state.open'),
+  locked: alias('state.locked'),
   position: alias('state.position'),
   width: alias('state.width'),
   animation: alias('state.animation'),
@@ -41,35 +44,32 @@ export default Ember.Component.extend(SwipeSupport, {
   willDestroyElement() {
     this._super(...arguments);
     run.cancel(this._setupEventsTimer);
-    this._teardownEvents();
   },
 
-  setupEvents: on('didInsertElement', observer('open', function() {
-    let methodName = this.get('open') ? '_setupEvents' : '_teardownEvents';
-    this._setupEventsTimer = run.scheduleOnce('afterRender', this, methodName);
+  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() {
-    let $element = this.$();
-    let onClick = this.onClick.bind(this);
-    let onKeyUp = this.onKeyup.bind(this);
-
     if (this.get('dismissOnClick')) {
-      $element.on('click.bm', onClick);
-      $element.on('touchstart.bm', onClick);
+      this.addEventListener(this.$(), 'click', this.onClick);
+      this.addEventListener(this.$(), 'touchstart', this.onClick);
     }
 
     if (this.get('dismissOnEsc')) {
-      $(document).on('keyup.bm', onKeyUp);
+      this.addEventListener(document, 'keyup', this.onKeyup);
     }
   },
 
   _teardownEvents() {
-    let $element = this.$();
-
-    $element.off('click.bm');
-    $element.off('touchstart.bm');
-    $(document).off('keyup.bm');
+    this.removeEventListener(this.$(), 'click', this.onClick);
+    this.removeEventListener(this.$(), 'touchstart', this.onClick);
+    this.removeEventListener(document, 'keyup', this.onKeyup);
   },
 
   onClick(e) {
@@ -91,8 +91,14 @@ export default Ember.Component.extend(SwipeSupport, {
   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) {
+      return;
+    }
+
     if (open && isMenuSwipe && position === direction) {
       this.set('open', false);
     } else if (!open && position !== direction) {

addon/mixins/swipe-support.js

@@ -1,14 +1,17 @@
 import Ember from 'ember';
 
 const {
-  isNone
+  isNone,
+  inject: { service },
+  computed: { alias }
 } = Ember;
 
 let meta;
 
 export default Ember.Mixin.create({
-  minSwipeDistance: 150,
-  maxSwipeTime: 300,
+  state: service('burgerMenu'),
+  minSwipeDistance: alias('state.minSwipeDistance'),
+  maxSwipeTime: alias('state.maxSwipeTime'),
 
   onSwipe(/* direction, target */) {},
 

addon/services/burger-menu.js

@@ -7,9 +7,14 @@ const {
 
 export default Ember.Service.extend({
   open: false,
+  locked: false,
   width: 300,
   position: 'left',
   animation: 'slide',
+
+  minSwipeDistance: 150,
+  maxSwipeTime: 300,
+
   itemAnimation: null,
   customAnimation: null,
 

package.json

@@ -59,6 +59,7 @@
     "ember-cli-babel": "^5.1.7",
     "ember-cli-htmlbars": "^1.0.10",
     "ember-cli-sass": "^5.6.0",
+    "ember-lifeline": "^1.0.4",
     "ember-require-module": "^0.1.1",
     "ember-wormhole": "^0.5.0"
   },

tests/dummy/app/controllers/application.js

@@ -3,5 +3,6 @@ import Ember from 'ember';
 export default Ember.Controller.extend({
   translucentOverlay: true,
   dismissOnClick: true,
-  dismissOnEsc: true
+  dismissOnEsc: true,
+  gesturesEnabled: true
 });

tests/dummy/app/controllers/index.js

@@ -2,29 +2,33 @@ import Ember from 'ember';
 
 const {
   inject,
-  computed
+  computed: { alias }
 } = Ember;
 
 export default Ember.Controller.extend({
   queryParams: [
     'animation',
     'itemAnimation',
     'position',
+    'locked',
     'translucentOverlay',
     'dismissOnClick',
-    'dismissOnEsc'
+    'dismissOnEsc',
+    'gesturesEnabled'
   ],
 
   application: inject.controller(),
   burgerMenu: inject.service(),
 
-  animation: computed.alias('burgerMenu.animation'),
-  itemAnimation: computed.alias('burgerMenu.itemAnimation'),
-  position: computed.alias('burgerMenu.position'),
+  animation: alias('burgerMenu.animation'),
+  itemAnimation: alias('burgerMenu.itemAnimation'),
+  position: alias('burgerMenu.position'),
+  locked: alias('burgerMenu.locked'),
 
-  translucentOverlay: computed.alias('application.translucentOverlay'),
-  dismissOnClick: computed.alias('application.dismissOnClick'),
-  dismissOnEsc: computed.alias('application.dismissOnEsc'),
+  translucentOverlay: alias('application.translucentOverlay'),
+  dismissOnClick: alias('application.dismissOnClick'),
+  dismissOnEsc: alias('application.dismissOnEsc'),
+  gesturesEnabled: alias('application.gesturesEnabled'),
 
   animations: [
     'slide',

tests/dummy/app/styles/app.scss

@@ -34,6 +34,10 @@ a {
   }
 }
 
+::-webkit-scrollbar {
+    display: none;
+}
+
 .pointer {
   cursor: pointer;
 }
@@ -185,64 +189,82 @@ a {
   }
 }
 
-.header {
-  background: #233040;
-  padding-top: 60px;
-
-  h1 {
-    font-family: 'Bungee Hairline', cursive;
-    font-weight: bold;
-  }
+main {
+  height: 100%;
 
-  .description {
-    padding: 30px 0 30px;
-    font-size: 16px;
+  .header {
+    background: #233040;
+    padding: 10px;
+    height: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    img {
+      width: 375px;
+      max-width: 80%;
+    }
 
-    > p {
-      max-width: 500px;
-      margin: 0 auto;
+    h1 {
+      font-family: 'Bungee Hairline', cursive;
+      font-weight: bold;
     }
-  }
-}
 
-.container {
-  padding-top: 30px;
+    .description {
+      padding: 30px 0 30px;
+      font-size: 16px;
 
-  h4 {
-    margin-bottom: 20px;
-    font-size: 16px;
-    font-weight: 400;
+      > p {
+        max-width: 500px;
+        margin: 0 auto;
+      }
+    }
   }
 
-  .animations {
-    min-height: 225px;
-    border-right: 1px solid #ccc;
-    padding-right: 25px;
+  .content {
+    height: 50%;
 
-    .btn-outline {
-      margin: 0 0 10px 10px;
-    }
-  }
+    .container {
+      padding-top: 30px;
+
+      h4 {
+        margin-bottom: 20px;
+        font-size: 16px;
+        font-weight: 400;
+      }
 
-  .options {
-    min-height: 225px;
-    padding-left: 25px;
+      .animations {
+        min-height: 310px;
+        border-right: 1px solid #ccc;
+        padding-right: 25px;
 
-    .option {
-      label {
-        font-size: 15px;
-        width: 160px;
+        .btn-outline {
+          margin: 0 0 10px 10px;
+        }
       }
-      .checkbox {
-        cursor: pointer;
-        display: inline-block;
-        color: $accent-color;
-        font-size: 18px;
+
+      .options {
+        min-height: 310px;
+        padding-left: 25px;
+
+        .option {
+          label {
+            font-size: 15px;
+            width: 160px;
+          }
+          .checkbox {
+            cursor: pointer;
+            display: inline-block;
+            color: $accent-color;
+            font-size: 18px;
+          }
+        }
       }
     }
-  }
-}
 
-.inspiration {
-  padding: 40px 0;
+    .inspiration {
+      padding: 40px 0;
+    }
+  }
 }

tests/dummy/app/templates/application.hbs

@@ -2,6 +2,7 @@
   translucentOverlay=translucentOverlay
   dismissOnClick=dismissOnClick
   dismissOnEsc=dismissOnEsc
+  gesturesEnabled=gesturesEnabled
   as |burger|
 }}
   {{#burger.menu itemTagName="li" dismissOnItemClick=true as |menu|}}