accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-11 10:38:14 +00:00
Code Issues Releases Activity

Outside click directive

Browse Source
This commit is contained in:
Faris Ansari 2018-09-28 18:40:48 +05:30
parent db767edb32
commit e6d254749b
3 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/Dropdown.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="dropdown show" ref="dropdownMenu"> <div class="dropdown show" ref="dropdownMenu" v-on-outside-click="hideDropdown">
<button <button
:id="_uid" :id="_uid"
class="btn btn-sm btn-light dropdown-toggle" class="btn btn-sm btn-light dropdown-toggle"
@ -28,27 +28,17 @@ export default {
data() { data() {
return { return {
isShown: false isShown: false
} };
}, },
methods: { methods: {
documentClick(e) { hideDropdown() {
let el = this.$refs.dropdownMenu;
let target = e.target;
if ((el !== target) && (!el.contains(target))) {
this.isShown = false; this.isShown = false;
} }
} }
},
created () {
document.addEventListener('click', this.documentClick);
},
destroyed () {
document.removeEventListener('click', this.documentClick);
}
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@import "../styles/variables.scss"; @import '../styles/variables.scss';
$dropdown-link-active-bg: $gray-300; $dropdown-link-active-bg: $gray-300;
.dropdown-item { .dropdown-item {
@ -57,5 +47,4 @@ $dropdown-link-active-bg: $gray-300;
@include gradient-bg($dropdown-link-active-bg); @include gradient-bg($dropdown-link-active-bg);
} }
} }
</style> </style>

2
ui/plugins/frappeVue.js
View File

@ -11,6 +11,7 @@ import Button from '../components/Button';
import Indicator from '../components/Indicator'; import Indicator from '../components/Indicator';
import modalPlugin from '../components/Modal/plugin'; import modalPlugin from '../components/Modal/plugin';
import formModalPlugin from '../plugins/formModal'; import formModalPlugin from '../plugins/formModal';
import outsideClickDirective from './outsideClickDirective';
export default function installFrappePlugin(Vue) { export default function installFrappePlugin(Vue) {
Vue.component('not-found', NotFound); Vue.component('not-found', NotFound);
@ -18,6 +19,7 @@ export default function installFrappePlugin(Vue) {
Vue.component('frappe-control', FrappeControl); Vue.component('frappe-control', FrappeControl);
Vue.component('f-button', Button); Vue.component('f-button', Button);
Vue.component('indicator', Indicator); Vue.component('indicator', Indicator);
Vue.directive('on-outside-click', outsideClickDirective);
Vue.use(modalPlugin); Vue.use(modalPlugin);
Vue.use(formModalPlugin); Vue.use(formModalPlugin);

30
ui/plugins/outsideClickDirective.js Normal file
View File

@ -0,0 +1,30 @@
import Vue from 'vue';
let instances = [];
function onDocumentClick(e, el, fn) {
let target = e.target;
if ((el !== target) && (!el.contains(target))) {
fn(e);
}
}
export default {
bind(el, binding) {
el.dataset.outsideClickIndex = instances.length;
const fn = binding.value;
const click = function (e) {
onDocumentClick(e, el, fn)
};
document.addEventListener('click', click);
instances.push(click);
},
unbind(el) {
const index = el.dataset.outsideClickIndex;
const handler = instances[index];
document.addEventListener('click', handler);
instances.splice(index, 1);
}
};