[WIP] feat(collpase): Use new $root namespaced events (#1037)

tmorehouse · web-flow · commit f44c5eb4b089 · 2017-09-11T20:26:43.000-03:00
feat(collpase): Use new $root namespaced events + dom utils
diff --git a/docs/components/collapse/README.md b/docs/components/collapse/README.md
@@ -43,7 +43,7 @@ Other elements can easily toggle `<b-collapse>` components using the `v-b-toggle
 <!-- collapse-2.vue -->
 ```
 
-### Initial visibility (start expanded)
+## Initial visibility (start expanded)
 To make the `<b-collapse>` show initially, set the `visible` prop:
 
 ```html
@@ -59,7 +59,7 @@ To make the `<b-collapse>` show initially, set the `visible` prop:
 <!-- collapse-3.vue -->
 ```
 
-### `v-model` support
+## `v-model` support
 The component's collapsed (visible) state can also be set with `v-model` which
 binds internally to the `visible` prop.
 
@@ -95,7 +95,7 @@ export default {
 <-- collapse-4.vue -->
 ```
 
-### Trigger multiple collapse elements
+## Trigger multiple collapse elements
 You can even collapse multiple `<b-collapse>` components via a single `v-b-toggle` by 
 providing multiple target IDs using modifers:
 
diff --git a/docs/components/collapse/meta.json b/docs/components/collapse/meta.json
@@ -19,28 +19,14 @@
       "description": "emitted when collaspe has finished closing"
     },
     {
-      "event": "collapse::toggle",
-      "description": "toggles visible state of collaspe when this event emits on $root",
+      "event": "bv::toggle::collapse",
+      "description": "toggles visible state of collaspe when this event is emitted on $root",
       "args": [
         {
           "arg": "id",
           "description": "collapse id to toggle"
         }
       ]
-    },
-    {
-      "event": "accordion::toggle",
-      "description": "toggles visible state of accordion when this event emits on $root",
-      "args": [
-        {
-          "arg": "id",
-          "description": "collapse id that should be open"
-        },
-        {
-          "arg": "accordion",
-          "description": "accordion group identifier"
-        }
-      ]
     }
   ]
 }
diff --git a/lib/components/collapse.vue b/lib/components/collapse.vue
@@ -22,6 +22,14 @@
 
 <script>
     import { listenOnRootMixin } from '../mixins';
+    import { hasClass } from '../utils/dom';
+
+    // Events we emit on $root
+    const EVENT_STATE = 'bv::collapse::state';
+    const EVENT_ACCORDION = 'bv::collapse::accordion';
+
+    // Events we listen to on $root
+    const EVENT_TOGGLE = 'bv::toggle::collapse';
 
     export default {
         mixins: [listenOnRootMixin],
@@ -87,6 +95,7 @@
                 this.reflow(el);
                 el.style.height = el.scrollHeight + 'px';
                 this.transitioning = true;
+                // This should be moved out so we can add cancellable events
                 this.$emit('show');
             },
             onAfterEnter(el) {
@@ -101,6 +110,7 @@
                 this.reflow(el);
                 this.transitioning = true;
                 el.style.height = 0;
+                // This should be moved out so we can add cancellable events
                 this.$emit('hide');
             },
             onAfterLeave(el) {
@@ -114,10 +124,11 @@
             },
             emitState() {
                 this.$emit('input', this.show);
-                this.$root.$emit('collapse::toggle::state', this.id, this.show);
+                // Let v-b-toggle know the state of this collapse
+                this.$root.$emit(EVENT_STATE, this.id, this.show);
                 if (this.accordion && this.show) {
                     // Tell the other collapses in this accordion to close
-                    this.$root.$emit('accordion::toggle', this.id, this.accordion);
+                    this.$root.$emit(EVENT_ACCORDION, this.id, this.accordion);
                 }
             },
             clickHandler(evt) {
@@ -126,7 +137,7 @@
                 if (!this.isNav || !el || getComputedStyle(this.$el).display !== 'block') {
                     return;
                 }
-                if (el.classList.contains('nav-link') || el.classList.contains('dropdown-item')) {
+                if (hasClass(el, 'nav-link') || hasClass(el, 'dropdown-item')) {
                     this.show = false;
                 }
             },
@@ -158,8 +169,10 @@
             },
         },
         created() {
-            this.listenOnRoot('collapse::toggle', this.handleToggleEvt);
-            this.listenOnRoot('accordion::toggle', this.handleAccordionEvt);
+            // Listen for toggle events to open/close us
+            this.listenOnRoot(EVENT_TOGGLE, this.handleToggleEvt);
+            // Listen to otehr collapses for accordion events
+            this.listenOnRoot(EVENT_ACCORDION, this.handleAccordionEvt);
         },
         mounted() {
             if (this.isNav && typeof document !== 'undefined') {
@@ -170,7 +183,7 @@
             }
             this.emitState();
         },
-        destroyed() {
+        beforeDestroy() {
             if (this.isNav && typeof document !== 'undefined') {
                 window.removeEventListener('resize', this.handleResize, false);
                 window.removeEventListener('orientationchange', this.handleResize, false);
diff --git a/lib/directives/toggle.js b/lib/directives/toggle.js
@@ -1,14 +1,20 @@
+import target from './_target';
+import { setAttr, addClass, removeClass } from '../utils/dom';
+
+// Are we client side?
 const inBrowser = typeof window !== 'undefined';
 
-import target from './_target';
+// target listen types
 const listen_types = {click: true};
 
-// Property key for handler
+// Property key for handler storage
 const BVT = '__BV_toggle__';
 
-// Event nmmes
-const EVENT_TOGGLE = 'collapse::toggle';
-const EVENT_STATE = 'collapse::toggle::state';
+// Emitted Control Event for collapse (emitted to collapse)
+const EVENT_TOGGLE = 'bv::toggle::collapse';
+
+// Listen to Event for toggle state update (Emited by collapse)
+const EVENT_STATE = 'bv::collapse::state';
 
 export default {
 
@@ -22,19 +28,19 @@ export default {
 
         if (inBrowser && vnode.context && targets.length > 0) {
             // Add aria attributes to element
-            el.setAttribute('aria-controls', targets.join(' '));
-            el.setAttribute('aria-expanded', 'false');
+            setAttr(el, 'aria-controls', targets.join(' '));
+            setAttr(el, 'aria-expanded', 'false');
 
             // Toggle state hadnler, stored on element
             el[BVT] = function toggleDirectiveHandler(id, state) {
                 if (targets.indexOf(id) !== -1) {
                     // Set aria-expanded state
-                    el.setAttribute('aria-expanded', state ? 'true' : 'false');
-                    // Set 'collapsed' class state
+                    setAttr(el, 'aria-expanded', state ? 'true' : 'false');
+                    // Set/Clear 'collapsed' class state
                     if (state) {
-                        el.classList.remove('collapsed');
+                        removeClass(el, 'collapsed');
                     } else {
-                        el.classList.add('collapsed');
+                        addClass(el, 'collapsed');
                     }
                 }
             };

Original file line number	Diff line number	Diff line change
`@@ -19,28 +19,14 @@`
`19`	`19`	`"description": "emitted when collaspe has finished closing"`
`20`	`20`	`},`
`21`	`21`	`{`
`22`		`- "event": "collapse::toggle",`
`23`		`- "description": "toggles visible state of collaspe when this event emits on $root",`
	`22`	`+ "event": "bv::toggle::collapse",`
	`23`	`+ "description": "toggles visible state of collaspe when this event is emitted on $root",`
`24`	`24`	`"args": [`
`25`	`25`	`{`
`26`	`26`	`"arg": "id",`
`27`	`27`	`"description": "collapse id to toggle"`
`28`	`28`	`}`
`29`	`29`	`]`
`30`		`- },`
`31`		`- {`
`32`		`- "event": "accordion::toggle",`
`33`		`- "description": "toggles visible state of accordion when this event emits on $root",`
`34`		`- "args": [`
`35`		`- {`
`36`		`- "arg": "id",`
`37`		`- "description": "collapse id that should be open"`
`38`		`- },`
`39`		`- {`
`40`		`- "arg": "accordion",`
`41`		`- "description": "accordion group identifier"`
`42`		`- }`
`43`		`- ]`
`44`	`30`	`}`
`45`	`31`	`]`
`46`	`32`	`}`