Skip to content

Commit da1ee25

Browse files
GodofbrowserGodofbrowser
committed
Split long method.
1 parent 53b8d51 commit da1ee25

15 files changed

+239
-233
lines changed

‎dist/vuejs-dialog.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<title>VueJs Plugin usage example</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link href="css/app.main.css?3605a80e69fe2a4ea738" rel="stylesheet"></head>
7+
<link href="css/app.main.css?67d55d39a25e194e69f7" rel="stylesheet"></head>
88
<body>
99

1010
<div id="app"></div>
@@ -21,5 +21,5 @@
2121
ga('send', 'pageview');
2222

2323
</script>
24-
<script type="text/javascript" src="js/app.main.js?3605a80e69fe2a4ea738"></script></body>
24+
<script type="text/javascript" src="js/app.main.js?67d55d39a25e194e69f7"></script></body>
2525
</html>

‎docs/js/app.main.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/vuejs-dialog.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/docs/components/app.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,16 @@
4343
<h2>Usage as a directive</h2>
4444
<hr/>
4545

46-
<h4>
47-
<a href="http://example.com" v-confirm="'This will take you to http://example.com. Proceed with caution'">Go to example.com</a>
48-
</h4>
49-
5046
<h4>
5147
<button v-confirm="`This is a message`">
5248
Give it a string v-confirm="This is a message"
5349
</button>
5450
</h4>
5551

52+
<h4>
53+
<a href="http://example.com" v-confirm="`This will take you to &quot;http://example.com&quot;. Proceed with caution`">Go to example.com</a>
54+
</h4>
55+
5656
<h4>
5757
<button v-confirm="{
5858
message: 'This dialog was also triggered using a v-confirm directive. It has both OK and CANCEL callback',
@@ -108,7 +108,7 @@
108108
109109
const exitMessage = `
110110
<p style="text-align: center; margin: 0;">
111-
<span style="font-weight: bold; font-size: large; color: lime">Thank You!</span>
111+
<span class="dg-highlight-1">Thank You!</span>
112112
<br/>
113113
I hope you find it useful
114114
</p>`
@@ -216,7 +216,7 @@
216216
</script>
217217

218218
<style lang="scss">
219-
@import "../scss/app.scss";
219+
@import "../scss/app";
220220
221221
.vue-notification {
222222
padding: 10px;

‎src/plugin/components/dialog-window.vue

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<transition :name="animation" appear="" @after-leave="backdrop = false">
4-
<div v-if="show" ref="container" :class="['dg-container', {'dg-container__has-input': (isHardConfirm || isPrompt)}]">
4+
<div v-if="show" ref="container" :class="['dg-container', {'dg-container--has-input': (isHardConfirm || isPrompt)}]">
55
<div class="dg-content-cont dg-content-cont--floating">
66
<div class="dg-main-content">
77

@@ -10,7 +10,9 @@
1010
<div v-else="" class="dg-content">{{ options.message }}</div>
1111

1212
<form v-if="isHardConfirm || isPrompt" class="dg-form">
13-
<label for="dg-input-label" style="font-size: 13px">Type "{{ options.verification }}" below to confirm</label>
13+
<label for="dg-input-label" style="font-size: 13px">
14+
Type "{{ options.verification }}" below to confirm
15+
</label>
1416
<input type="text" placeholder="Verification text"
1517
v-model="input"
1618
id="dg-input-label"
@@ -168,8 +170,8 @@
168170
}
169171
</script>
170172

171-
<style lang="css">
172-
@import url('../styles/_animations.css');
173-
@import url('../styles/default.css');
174-
@import url('../styles/_helpers.css');
173+
<style lang="scss">
174+
@import '../styles/shared/_animations';
175+
@import '../styles/shared/_helpers';
176+
@import '../styles/default';
175177
</style>

‎src/plugin/js/directives.js

+46-47
Original file line numberDiff line numberDiff line change
@@ -20,64 +20,21 @@ Directives.prototype.defineConfirm = function () {
2020
const _this = this
2121
const DirectiveDefinition = {}
2222

23-
const getConfirmMessage = function(binding) {
24-
if (binding.value && binding.value.message) {
25-
return binding.value.message
26-
}
27-
return typeof binding.value === 'string' ? binding.value : null
28-
}
29-
30-
const getOptions = function(binding) {
31-
let options = typeof binding.value === 'object' ? binding.value : {}
32-
33-
delete options['ok']
34-
delete options['cancel']
35-
36-
if(binding.arg && CONFIRM_TYPES.hasOwnProperty(binding.arg.toUpperCase())){
37-
options.type = CONFIRM_TYPES[binding.arg.toUpperCase()]
38-
}
39-
40-
return options
41-
}
42-
43-
const getCatchCallback = function(binding) {
44-
if (binding.value && binding.value.cancel) {
45-
return binding.value.cancel
46-
}
47-
return noop
48-
}
49-
50-
const getThenCallback = function(binding, el){
51-
if (binding.value && binding.value.ok) {
52-
return binding.value.ok
53-
} else {
54-
return () => {
55-
// Unbind to allow original event
56-
el.removeEventListener('click', el.VuejsDialog.clickHandler, true)
57-
// Trigger original event
58-
clickNode(el)
59-
// Re-bind listener
60-
el.addEventListener('click', el.VuejsDialog.clickHandler, true)
61-
}
62-
}
63-
}
64-
6523
const clickHandler = function (event, el, binding) {
6624
event.preventDefault()
6725
event.stopImmediatePropagation()
6826

69-
let options = getOptions(binding)
70-
let confirmMessage = getConfirmMessage(binding)
71-
let thenCallback = getThenCallback(binding, el)
72-
let catchCallback = getCatchCallback(binding)
27+
let options = _this.getOptions(binding)
28+
let confirmMessage = _this.getConfirmMessage(binding)
29+
let thenCallback = _this.getThenCallback(binding, el)
30+
let catchCallback = _this.getCatchCallback(binding)
7331

7432
_this.Vue.dialog
7533
.confirm(confirmMessage, options)
7634
.then(thenCallback)
7735
.catch(catchCallback)
7836
}
7937

80-
8138
DirectiveDefinition.bind = (el, binding) => {
8239
if (el.VuejsDialog === undefined) {
8340
el.VuejsDialog = {}
@@ -101,4 +58,46 @@ Directives.prototype.defineAlert = function () {
10158
// Still Considering it uses case.
10259
}
10360

61+
Directives.prototype.getConfirmMessage = function(binding) {
62+
if (binding.value && binding.value.message) {
63+
return binding.value.message
64+
}
65+
return typeof binding.value === 'string' ? binding.value : null
66+
}
67+
68+
Directives.prototype.getOptions = function(binding) {
69+
let options = typeof binding.value === 'object' ? binding.value : {}
70+
71+
delete options['ok']
72+
delete options['cancel']
73+
74+
if(binding.arg && CONFIRM_TYPES.hasOwnProperty(binding.arg.toUpperCase())){
75+
options.type = CONFIRM_TYPES[binding.arg.toUpperCase()]
76+
}
77+
78+
return options
79+
}
80+
81+
Directives.prototype.getThenCallback = function(binding, el){
82+
if (binding.value && binding.value.ok) {
83+
return binding.value.ok
84+
} else {
85+
return () => {
86+
// Unbind to allow original event
87+
el.removeEventListener('click', el.VuejsDialog.clickHandler, true)
88+
// Trigger original event
89+
clickNode(el)
90+
// Re-bind listener
91+
el.addEventListener('click', el.VuejsDialog.clickHandler, true)
92+
}
93+
}
94+
}
95+
96+
Directives.prototype.getCatchCallback = function(binding) {
97+
if (binding.value && binding.value.cancel) {
98+
return binding.value.cancel
99+
}
100+
return noop
101+
}
102+
104103
export default Directives

‎src/plugin/index.js renamed to ‎src/plugin/js/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
'use strict'
22

33
import Promise from 'promise-polyfill'
4-
import DialogComponent from './components/dialog.vue'
5-
import {DIALOG_TYPES, DEFAULT_OPTIONS} from './js/constants'
6-
import Directives from './js/directives'
7-
import {mergeObjs} from './js/utilities'
4+
import DialogComponent from '../components/dialog.vue'
5+
import {DIALOG_TYPES, DEFAULT_OPTIONS} from './constants'
6+
import Directives from './directives'
7+
import {mergeObjs} from './utilities'
88

99

1010
let Plugin = function(Vue, globalOptions = {}){

‎src/plugin/styles/_default.scss

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
2+
3+
.dg-container * {
4+
box-sizing: border-box;
5+
}
6+
7+
.dg-container [disabled] {
8+
cursor: not-allowed;
9+
opacity: .3;
10+
}
11+
12+
.dg-backdrop {
13+
background-color: rgba(0, 0, 0, .8);
14+
position: fixed;
15+
top: 0;
16+
left: 0;
17+
width: 100%;
18+
height: 100%;
19+
z-index: 50000
20+
}
21+
22+
.dg-container {
23+
width: 100%;
24+
height: 100%;
25+
position: fixed;
26+
top: 0;
27+
left: 0;
28+
z-index: 50001;
29+
}
30+
31+
.dg-content-cont {
32+
width: 100%;
33+
font-family: 'Noto Sans', sans-serif;
34+
}
35+
36+
.dg-main-content {
37+
width: 98%;
38+
/*width: calc(98% - 30px);*/
39+
max-width: 400px;
40+
padding: 15px;
41+
border-radius: 5px;
42+
margin: 25px auto;
43+
background-color: #ffffff;
44+
}
45+
46+
.dg-content {
47+
font-size: 16px;
48+
padding: 10px 0 10px 0;
49+
}
50+
51+
.dg-content-body {
52+
border-bottom: 2px solid #E1E6EA;
53+
padding-bottom: 15px;
54+
}
55+
56+
.dg-content-footer {
57+
position: relative;
58+
padding: 15px 0 0;
59+
}
60+
61+
.dg-form {
62+
background-color: ghostwhite;
63+
padding: 10px;
64+
margin-bottom: -15px;
65+
}
66+
67+
.dg-content-cont--floating {
68+
position: absolute;
69+
top: 35%;
70+
transform: translateY(-70%);
71+
margin-top: 0;
72+
}
73+
74+
@media all and (max-height: 700px) {
75+
.dg-content-cont--floating {
76+
position: relative;
77+
top: 10%;
78+
transform: none;
79+
margin-top: 0;
80+
}
81+
}
82+
83+
.dg-btn {
84+
display: inline-block;
85+
position: relative;
86+
min-width: 80px;
87+
padding: 6px 20px;
88+
border-radius: 4px;
89+
outline: 0;
90+
border: 2px solid transparent;
91+
text-align: center;
92+
text-decoration: none;
93+
cursor: pointer;
94+
outline: none;
95+
-webkit-appearance: none;
96+
-moz-appearance: none;
97+
appearance: none;
98+
font-size: 16px;
99+
font-weight: 700;
100+
}
101+
102+
.dg-btn:focus,
103+
.dg-btn:active,
104+
.dg-btn:link {
105+
outline: none;
106+
}
107+
108+
.dg-btn::-moz-focus-inner {
109+
border: 0;
110+
}
111+
112+
.dg-btn.dg-btn--cancel {
113+
color: #fefefe;
114+
background-color: #0096D9;
115+
}
116+
117+
.dg-btn.dg-btn--ok {
118+
color: #0096D9;
119+
background-color: #fefefe;
120+
border-color: #0096D9;
121+
}
122+
123+
.dg-pull-right {
124+
float: right;
125+
}
126+
127+
.dg-btn.dg-btn--loading .dg-btn-content {
128+
visibility: hidden;
129+
}
130+
131+
.dg-clear:before {
132+
content: ' ';
133+
display: block;
134+
clear: both;
135+
}
136+
137+
.dg-container.dg-container--has-input {
138+
.dg-main-content {
139+
max-width: 450px;
140+
}
141+
142+
.dg-content-body {
143+
border-bottom: none;
144+
}
145+
146+
.dg-form {
147+
border: 1px solid #E1E6EA;
148+
border-bottom: none;
149+
border-top-left-radius: 4px;
150+
border-top-right-radius: 4px;
151+
}
152+
153+
.dg-content-footer {
154+
background-color: ghostwhite;
155+
border: 1px solid #E1E6EA;
156+
border-top: none;
157+
border-bottom-left-radius: 4px;
158+
border-bottom-right-radius: 4px;
159+
padding: 0 10px 10px;
160+
}
161+
}

‎src/plugin/styles/_helpers.css

-5
This file was deleted.

0 commit comments

Comments
 (0)