Skip to content

Commit 21e1950

Browse files
GodofbrowserGodofbrowser
committed
Complete Dialog type "Hard Confirm"
1 parent ece39fa commit 21e1950

File tree

13 files changed

+222
-98
lines changed

13 files changed

+222
-98
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.

‎docs/css/app.main.css

+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?de9020f60bd560de3b6a" rel="stylesheet"></head>
7+
<link href="css/app.main.css?3605a80e69fe2a4ea738" 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?de9020f60bd560de3b6a"></script></body>
24+
<script type="text/javascript" src="js/app.main.js?3605a80e69fe2a4ea738"></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

+23-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
<template>
2-
<div style="max-width: 350px; margin:auto; font-family: 'Noto Sans', sans-serif; text-align: center">
3-
<h1 class="page-title">Vuejs-Dialog Plugin Examples</h1>
2+
<div>
3+
<header>
4+
<div class="header-cont centered">
5+
<h1 class="title">Vuejs Dialog Plugin</h1>
6+
</div>
47

5-
<section>
8+
</header>
9+
10+
<section style="max-width: 350px; margin:auto; text-align: center">
611
<h2>Usage as a method</h2>
712
<hr/>
813
<h4>
@@ -34,7 +39,7 @@
3439
</h4>
3540
</section>
3641

37-
<section>
42+
<section style="max-width: 350px; margin:auto; font-family: 'Noto Sans', sans-serif; text-align: center">
3843
<h2>Usage as a directive</h2>
3944
<hr/>
4045

@@ -70,7 +75,7 @@
7075
</section>
7176

7277

73-
<section>
78+
<section style="max-width: 350px; margin:auto; font-family: 'Noto Sans', sans-serif; text-align: center">
7479
<h2>Confirmation types</h2>
7580
<hr/>
7681

@@ -80,6 +85,10 @@
8085
<h4>
8186
<button @click="showSoftConfirmDialog()">Soft confirm - multiple clicks required</button>
8287
</h4>
88+
89+
<h4>
90+
<button @click="showHardConfirmDialog()">Hard confirm - verification text required</button>
91+
</h4>
8392
</section>
8493

8594
<notifications position="bottom left"></notifications>
@@ -145,6 +154,15 @@
145154
this.$notify({type: 'success', text: trans('messages.click_cancel')})
146155
})
147156
},
157+
showHardConfirmDialog(){
158+
this.$dialog.confirm(trans('messages.hard'), {type: 'hard', html: true, verification: 'let me go'})
159+
.then(() => {
160+
this.$notify({type: 'success', text: trans('messages.click_continue')})
161+
})
162+
.catch(() => {
163+
this.$notify({type: 'success', text: trans('messages.click_cancel')})
164+
})
165+
},
148166
showHtmlDialog(){
149167
this.$dialog.alert(trans('messages.html'), {html: true, okText: 'Dismiss'})
150168
},

‎src/docs/js/translations.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Translator.prototype.get = function (route) {
1717
for (let i = 0; i < parts.length; i++) {
1818
translation = translation[parts[i]]
1919
if (translation === undefined) {
20-
translation = 'No Translation'
20+
translation = '[Error: No Translation]'
2121
break
2222
}
2323
}

‎src/docs/js/translations/en.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
export default {
44
messages: {
55
alert: 'This is an alert dialog. Click the button below to close.',
6-
html: `This dialog has <b style="color: darkorange; border-bottom: 1px solid #2ba5ff">HTML</b> enabled. Click the button below to close.`,
6+
html: `This dialog has <b class="dg-highlight-1">HTML</b> enabled. Click the button below to close.`,
77
basic: 'This is a basic confirmation dialog. Clicking on either button dismisses the dialog instantly',
88
soft: 'This is a soft confirmation dialog. Multiple clicks required to proceed.',
9+
hard: `This is a hard confirmation dialog. User\'s input must match <span class="dg-highlight-1">verification</span> <span class="dg-highlight-1">text</span> in order to proceed.`,
910
loading: `This is a loading dialog. The loader will start once you Click on Proceed button`,
1011
reverse: `Left button is the Proceed button in this dialog. Click to have a feel of the reverse buttons`,
1112
click_continue: `You clicked continue`,

‎src/docs/scss/app.scss

+33-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,39 @@
66
body {
77
margin: 0;
88
padding: 0;
9+
font-family: 'Noto Sans', sans-serif;
10+
}
11+
.centered {
12+
margin-right: auto;
13+
margin-left: auto;
914
}
1015

1116
/* header */
12-
.page-title {
13-
border-bottom: 2px solid #0096D9;
14-
}
17+
header {
18+
background-color: #41B883;
19+
color: #fefefe;
20+
display: block;
21+
22+
.header-cont{
23+
width: 94%;
24+
padding: 5px;
25+
max-width: 800px;
26+
display: block;
27+
text-align: center;
28+
}
29+
.title {
30+
margin: 175px auto;
31+
}
32+
33+
}
34+
35+
@media all and (max-width: 600px){
36+
37+
header {
38+
.title {
39+
margin: 25px auto;
40+
}
41+
42+
}
43+
}
44+

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

+28-13
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
11
<template>
22
<div>
33
<transition :name="animation" appear="" @after-leave="backdrop = false">
4-
<div v-if="show" ref="container" class="dg-container">
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">
7-
<!--<div class="dg-content-header">-->
8-
<!---->
9-
<!--</div>-->
107

118
<div class="dg-content-body">
129
<div v-if="options.html" class="dg-content" v-html="options.message"></div>
1310
<div v-else="" class="dg-content">{{ options.message }}</div>
1411

15-
<!--<form style="background-color: ghostwhite; padding: 10px; margin-bottom: -15px">-->
16-
<!--<label for="dg-confirm-input" style="font-size: 13px">Type "{{ options.verification }}" below to confirm</label>-->
17-
<!--<input type="text" :placeholder="options.verification" id="dg-confirm-input"-->
18-
<!--style="width: 100%;margin-top: 10px;-->
19-
<!--padding: 5px 15px; font-size: 16px;border-radius: 4px; border: 2px solid #eee"/>-->
20-
<!--</form>-->
12+
<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>
14+
<input type="text" placeholder="Verification text"
15+
v-model="input"
16+
id="dg-input-label"
17+
style="width: 100%;margin-top: 10px;
18+
padding: 5px 15px; font-size: 16px;border-radius: 4px; border: 2px solid #eee"/>
19+
</form>
2120
</div>
2221

2322
<div class="dg-content-footer">
2423

2524
<button @click="clickLeftBtn()" :is="leftBtnComponent" :loading="loading"
2625
:enabled="leftBtnEnabled" :options="options" :focus="leftBtnFocus">
27-
<span>{{ options.reverse ? options.okText : options.cancelText}}</span>
26+
<span v-if="options.html" v-html="options.reverse ? options.okText : options.cancelText"></span>
27+
<span v-else="">{{ options.reverse ? options.okText : options.cancelText}}</span>
2828
</button>
2929

3030
<button :is="rightBtnComponent" @click="clickRightBtn()" :loading="loading"
3131
:enabled="rightBtnEnabled" :options="options" :focus="rightBtnFocus">
32-
<span>{{ options.reverse ? options.cancelText : options.okText }}</span>
32+
<span v-if="options.html" v-html="options.reverse ? options.cancelText : options.okText"></span>
33+
<span v-else="">{{ options.reverse ? options.cancelText : options.okText }}</span>
3334
</button>
3435

3536
<div class="dg-clear"></div>
@@ -48,11 +49,12 @@
4849
<script>
4950
import OkBtn from './ok-btn.vue'
5051
import CancelBtn from './cancel-btn.vue'
51-
import {DIALOG_TYPES, ANIMATION_TYPES} from '../js/constants'
52+
import {DIALOG_TYPES, ANIMATION_TYPES, CONFIRM_TYPES} from '../js/constants'
5253
5354
export default {
5455
data: function () {
5556
return {
57+
input: '',
5658
show: false,
5759
backdrop: true,
5860
canceled: false,
@@ -75,9 +77,21 @@
7577
loaderEnabled(){
7678
return !!this.options.loader
7779
},
80+
isHardConfirm(){
81+
return this.options.window === DIALOG_TYPES.CONFIRM
82+
&& this.options.type === CONFIRM_TYPES.HARD
83+
},
84+
isPrompt(){
85+
return (this.options.window === DIALOG_TYPES.PROMPT)
86+
},
7887
cancelBtnDisabled(){
7988
return (this.options.window === DIALOG_TYPES.ALERT)
8089
},
90+
okBtnDisabled(){
91+
return (this.options.window === DIALOG_TYPES.CONFIRM)
92+
&& (this.options.type === CONFIRM_TYPES.HARD)
93+
&& (this.input !== this.options.verification)
94+
},
8195
leftBtnEnabled(){
8296
return (this.cancelBtnDisabled === false) || (this.options.reverse === true)
8397
},
@@ -157,4 +171,5 @@
157171
<style lang="css">
158172
@import url('../styles/_animations.css');
159173
@import url('../styles/default.css');
174+
@import url('../styles/_helpers.css');
160175
</style>

‎src/plugin/components/ok-btn.vue

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<button v-if="enabled" :class="['dg-btn', 'dg-btn--ok', {'dg-btn--loading': loading}, {'dg-pull-right': !options.reverse}]"
3-
@click.prevent="proceed()" ref="btn">
3+
@click.prevent="proceed()" ref="btn" :disabled="is_disabled">
44
<span class="dg-btn-content">
55
<slot></slot>
66
<span v-if="soft_confirm">({{ clicks_remaining }})</span>
@@ -27,13 +27,20 @@
2727
soft_confirm(){
2828
return (this.options.type === CONFIRM_TYPES.SOFT)
2929
},
30+
hard_confirm(){
31+
return (this.options.type === CONFIRM_TYPES.HARD)
32+
},
33+
is_disabled(){
34+
console.log((this.$parent.okBtnDisabled))
35+
return (this.$parent.okBtnDisabled)
36+
},
3037
clicks_remaining(){
3138
return Math.max((this.options.clicksCount - this.clicks_count), 0)
3239
}
3340
},
3441
methods: {
3542
proceed(){
36-
if(this.validateProceed()){
43+
if(!this.is_disabled && this.validateProceed()){
3744
this.$emit('click')
3845
}
3946
},

‎src/plugin/styles/_helpers.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.dg-container .dg-highlight-1 {
2+
color: darkorange;
3+
font-weight: bold;
4+
border-bottom: 1px solid #2ba5ff
5+
}

0 commit comments

Comments
 (0)