Permalink
Browse files

feat(collapse): Close navbar collapse when clicked in nav/navbar (issue

#712) (#714)

Addresses issue #712
  • Loading branch information...
tmorehouse committed Jul 21, 2017
1 parent 61a104f commit f104dc04c370889db20aa7a11d0295eb5a2e05f2
Showing with 36 additions and 4 deletions.
  1. +36 −4 lib/components/collapse.vue
@@ -11,9 +11,12 @@
@leave="onLeave"
@after-leave="onAfterLeave"
>
<div :id="id || null" :class="classObject" v-show="show">
<slot></slot>
</div>
<div v-show="show"
ref="collapse"
:id="id || null"
:class="classObject"
@click.native="clickHandler"
><slot></slot></div>
</transition>
</template>
@@ -113,6 +116,13 @@
this.$root.$emit('accordion::toggle', this.id, this.accordion);
}
},
clickHandler() {
if (!this.isNav || typeof document === 'undefined') {
return;
}
// If we are in a nav/navbar, close the collapse when clicked
this.toggle();
},
handleToggleEvt(target) {
if (target !== this.id) {
return;
@@ -134,14 +144,36 @@
this.toggle();
}
}
}
},
handleReszie() {
// Handler for orientation/resize to set collapsed state
if (getComputedStyle(this.$refs.collaspe).display === 'block') {
// Initially open
this.show = true;
} else {
// Initiallly closed
this.show = false;
}
},
},
created() {
this.listenOnRoot('collapse::toggle', this.handleToggleEvt);
this.listenOnRoot('accordion::toggle', this.handleAccordionEvt);
},
mounted() {
if (this.isNav && typeof document !== 'undefined') {
// Set up handlers
window.addEventListener('resize', this.handleResize, false);
window.addEventListener('orientationchange', this.handleResize, false);
this.handleResize();
}
this.emitState();
},
destroyed() {
if (this.isNav && typeof document !== 'undefined') {
window.removeEventListener('resize', this.handleResize, false);
window.removeEventListener('orientationchange', this.handleResize, false);
}
}
};

0 comments on commit f104dc0

Please sign in to comment.