Skip to content

Commit a53e8c7

Browse files
GodofbrowserGodofbrowser
committed
Organize directives definition.
1 parent 4a55edd commit a53e8c7

File tree

5 files changed

+83
-79
lines changed

5 files changed

+83
-79
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
> A lightweight, promise based alert, prompt and confirm dialog.
44
5+
[![npm version](https://badge.fury.io/js/vuejs-dialog.svg)](https://badge.fury.io/js/vuejs-dialog)
56
[![Build Status](https://scrutinizer-ci.com/g/Godofbrowser/vuejs-dialog/badges/build.png?b=master)](https://scrutinizer-ci.com/g/Godofbrowser/vuejs-dialog/build-status/master)
67
[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/Godofbrowser/vuejs-dialog/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/Godofbrowser/vuejs-dialog/?branch=master)
78

‎dist/vuejs-dialog.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vuejs-dialog.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/plugin/index.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,19 @@
22

33
import DialogComponent from './components/dialog.vue'
44
import {DIALOG_TYPES, DEFAULT_OPTIONS} from './js/constants'
5-
import directives from './js/directives'
5+
import Directives from './js/directives'
66
import {mergeObjs} from './js/utilities'
77

88
let Plugin = function(Vue, globalOptions = {}){
99
this.globalOptions = globalOptions
10-
this.mount(Vue)
11-
}
1210

13-
Plugin.prototype.mount = function(Vue){
14-
this.Dialog = (() => {
11+
this.Dialog = (() => {
1512
let DialogConstructor = Vue.extend(DialogComponent)
16-
let node = document.createElement("div")
17-
document.querySelector('body').appendChild(node)
13+
let node = document.createElement("div")
14+
document.querySelector('body').appendChild(node)
1815

19-
return (new DialogConstructor()).$mount(node)
20-
})()
16+
return (new DialogConstructor()).$mount(node)
17+
})()
2118
}
2219

2320
Plugin.prototype.alert = function(message = null, options = {}){
@@ -43,7 +40,12 @@ Plugin.prototype.open = function(type, localOptions = {}){
4340
}
4441

4542
Plugin.install = function (Vue, options) {
46-
directives(Vue)
43+
44+
let DirectivesObj = new Directives(Vue)
45+
46+
Vue.directive('confirm', DirectivesObj.confirmDefinition)
47+
48+
//Vue.directive('alert', DirectivesObj.alertDefinition)
4749

4850
Vue.dialog = new Plugin(Vue, options)
4951

‎src/plugin/js/directives.js‎

Lines changed: 68 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,85 @@
22

33
import {noop} from './utilities'
44

5-
export default function (Vue) {
6-
let Directives = function () {}
75

8-
Directives.prototype.init = function (Vue) {
9-
this.Vue = Vue
10-
this.registerConfirm()
11-
}
6+
let Directives = function (Vue) {
7+
this.Vue = Vue
8+
this.confirmDefinition = this.defineConfirm()
9+
this.alertDefinition = this.defineAlert()
10+
}
1211

13-
Directives.prototype.registerConfirm = function () {
14-
const _this = this
12+
Directives.prototype.defineConfirm = function () {
13+
const _this = this
14+
const DirectiveDefinition = {}
1515

16-
const clickHandler = function (event, el, binding) {
17-
event.preventDefault()
18-
event.stopImmediatePropagation()
16+
const clickHandler = function (event, el, binding) {
17+
event.preventDefault()
18+
event.stopImmediatePropagation()
1919

20-
let confirmMessage = (function () {
21-
if (binding.value && binding.value.message) {
22-
return binding.value.message
23-
}
24-
return typeof binding.value === 'string' ? binding.value : null
25-
})()
26-
27-
let thenCallback = (function () {
28-
if (binding.value && binding.value.ok) {
29-
return binding.value.ok
30-
} else {
31-
return () => {
32-
el.removeEventListener('click', el.VuejsDialog.confirmHandler, true)
33-
34-
_this.Vue.nextTick(() => {
35-
(function (node) {
36-
if (document.createEvent) {
37-
let evt = document.createEvent('MouseEvents');
38-
evt.initEvent('click', true, false);
39-
node.dispatchEvent(evt);
40-
} else if (document.createEventObject) {
41-
node.fireEvent('onclick');
42-
} else if (typeof node.onclick === 'function') {
43-
node.onclick();
44-
}
45-
})(el)
46-
47-
el.addEventListener('click', el.VuejsDialog.confirmHandler, true)
48-
})
49-
}
20+
let confirmMessage = (function () {
21+
if (binding.value && binding.value.message) {
22+
return binding.value.message
23+
}
24+
return typeof binding.value === 'string' ? binding.value : null
25+
})()
26+
27+
let thenCallback = (function () {
28+
if (binding.value && binding.value.ok) {
29+
return binding.value.ok
30+
} else {
31+
return () => {
32+
el.removeEventListener('click', el.VuejsDialog.clickHandler, true)
33+
34+
_this.Vue.nextTick(() => {
35+
(function (node) {
36+
if (document.createEvent) {
37+
let evt = document.createEvent('MouseEvents');
38+
evt.initEvent('click', true, false);
39+
node.dispatchEvent(evt);
40+
} else if (document.createEventObject) {
41+
node.fireEvent('onclick');
42+
} else if (typeof node.onclick === 'function') {
43+
node.onclick();
44+
}
45+
})(el)
46+
47+
el.addEventListener('click', el.VuejsDialog.clickHandler, true)
48+
})
5049
}
51-
})()
50+
}
51+
})()
5252

53-
let catchCallback = (function () {
54-
if (binding.value && binding.value.cancel) {
55-
return binding.value.cancel
56-
}
57-
return noop
58-
})()
53+
let catchCallback = (function () {
54+
if (binding.value && binding.value.cancel) {
55+
return binding.value.cancel
56+
}
57+
return noop
58+
})()
59+
60+
_this.Vue.dialog.confirm(confirmMessage).then(thenCallback).catch(catchCallback)
61+
}
5962

60-
_this.Vue.dialog.confirm(confirmMessage).then(thenCallback).catch(catchCallback)
63+
DirectiveDefinition.bind = (el, binding) => {
64+
if (el.VuejsDialog === undefined) {
65+
el.VuejsDialog = {}
6166
}
6267

63-
this.Vue.directive('confirm', {
64-
bind (el, binding) {
65-
if (el.VuejsDialog === undefined) {
66-
el.VuejsDialog = {}
67-
}
68+
el.VuejsDialog.clickHandler = function clickEventHandler(event) {
69+
clickHandler(event, el, binding)
70+
}
6871

69-
el.VuejsDialog.confirmHandler = function clickEventHandler(event) {
70-
clickHandler(event, el, binding)
71-
}
72+
el.addEventListener('click', el.VuejsDialog.clickHandler, true)
73+
}
7274

73-
el.addEventListener('click', el.VuejsDialog.confirmHandler, true)
74-
},
75-
unbind (el) {
76-
el.removeEventListener('click', el.VuejsDialog.confirmHandler, true)
77-
}
78-
})
75+
DirectiveDefinition.unbind = (el) => {
76+
el.removeEventListener('click', el.VuejsDialog.clickHandler, true)
77+
}
7978

79+
return DirectiveDefinition
80+
}
8081

81-
}
82+
Directives.prototype.defineAlert = function () {
83+
//
84+
}
8285

83-
let D = new Directives()
84-
D.init(Vue)
85-
}
86+
export default Directives

0 commit comments

Comments
 (0)