Skip to content

Commit 17da0d0

Browse files
Tulio GarciaViktor Lukashov
Tulio Garcia
authored and
Viktor Lukashov
committed
Use standard java script in examples (#36)
* Removed Polymer specific code from examples * Improved examples - Now uses local variable for confirm dialog in all examples - Local variable for dialog renamed to dialog Fixes #30
1 parent a0e7e92 commit 17da0d0

File tree

2 files changed

+87
-104
lines changed

2 files changed

+87
-104
lines changed

‎demo/confirm-dialog-advanced-demos.html

+35-37
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,47 @@
99
<h3>Custom buttons example</h3>
1010
<vaadin-demo-snippet id="confirm-dialog-advanced-demos-custom-buttons">
1111
<template preserve-content>
12-
<dom-bind id="custom-example">
13-
<template>
14-
<vaadin-button>Open dialog</vaadin-button>
15-
<vaadin-confirm-dialog cancel>
16-
<style>
17-
vaadin-button[slot] {
18-
margin-top: 0;
19-
margin-bottom: 0;
20-
width: 100%;
21-
}
22-
</style>
23-
<h3 slot="header">Unsaved changes</h3>
24-
<p>Do you want to <b>save</b> or <b>discard</b> your changes before navigating away?</p>
25-
<vaadin-button id="discard" slot="reject-button" theme="error tertiary" tabindex="2">
26-
<iron-icon icon="vaadin:trash" slot="prefix"></iron-icon>
27-
Discard
28-
</vaadin-button>
29-
<vaadin-button id="save" slot="confirm-button" theme="primary" tabindex="1">
30-
<iron-icon icon="vaadin:envelope-open" slot="prefix"></iron-icon>
31-
Save
32-
</vaadin-button>
33-
</vaadin-confirm-dialog>
34-
<span id="status"></span>
35-
</template>
36-
</dom-bind>
12+
<vaadin-button>Open dialog</vaadin-button>
13+
<vaadin-confirm-dialog cancel>
14+
<style>
15+
vaadin-button[slot] {
16+
margin-top: 0;
17+
margin-bottom: 0;
18+
width: 100%;
19+
}
20+
</style>
21+
<h3 slot="header">Unsaved changes</h3>
22+
<p>Do you want to <b>save</b> or <b>discard</b> your changes before navigating away?</p>
23+
<vaadin-button id="discard" slot="reject-button" theme="error tertiary" tabindex="2">
24+
<iron-icon icon="vaadin:trash" slot="prefix"></iron-icon>
25+
Discard
26+
</vaadin-button>
27+
<vaadin-button id="save" slot="confirm-button" theme="primary" tabindex="1">
28+
<iron-icon icon="vaadin:envelope-open" slot="prefix"></iron-icon>
29+
Save
30+
</vaadin-button>
31+
</vaadin-confirm-dialog>
32+
<span id="status"></span>
3733
<script>
3834
window.addDemoReadyListener('#confirm-dialog-advanced-demos-custom-buttons', function(document) {
39-
var example = document.querySelector('#custom-example');
40-
var confirm = document.querySelector('vaadin-confirm-dialog');
35+
var status = document.querySelector('#status');
36+
var save = document.querySelector('#save');
37+
var discard = document.querySelector('#discard');
38+
var dialog = document.querySelector('vaadin-confirm-dialog');
4139
document.querySelector('vaadin-button').addEventListener('click', function() {
42-
example.$.status.innerText = '';
43-
confirm.opened = true;
40+
status.innerText = '';
41+
dialog.opened = true;
4442
});
45-
example.$.save.addEventListener('click', function() {
46-
confirm.opened = false;
47-
example.$.status.innerText = 'Your changes were saved';
43+
save.addEventListener('click', function() {
44+
dialog.opened = false;
45+
status.innerText = 'Your changes were saved';
4846
});
49-
example.$.discard.addEventListener('click', function() {
50-
confirm.opened = false;
51-
example.$.status.innerText = 'Your changes were discarded';
47+
discard.addEventListener('click', function() {
48+
dialog.opened = false;
49+
status.innerText = 'Your changes were discarded';
5250
});
53-
confirm.addEventListener('cancel', function() {
54-
example.$.status.innerText = 'Cancel was clicked';
51+
dialog.addEventListener('cancel', function() {
52+
status.innerText = 'Cancel was clicked';
5553
});
5654
});
5755
</script>

‎demo/confirm-dialog-basic-demos.html

+52-67
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,21 @@
99
<h3>Alert Dialog</h3>
1010
<vaadin-demo-snippet id="confirm-dialog-basic-demos-alert-dialog">
1111
<template preserve-content>
12-
<dom-bind id="alert-example">
13-
<template>
14-
<vaadin-button>Open dialog</vaadin-button>
15-
<vaadin-confirm-dialog header="Meeting starting" confirm-text="OK">
16-
Your next meeting starts in 5 minutes
17-
</vaadin-confirm-dialog>
18-
<span id="status"></span>
19-
</template>
20-
</dom-bind>
12+
<vaadin-button>Open dialog</vaadin-button>
13+
<vaadin-confirm-dialog header="Meeting starting" confirm-text="OK">
14+
Your next meeting starts in 5 minutes
15+
</vaadin-confirm-dialog>
16+
<span id="status"></span>
2117
<script>
2218
window.addDemoReadyListener('#confirm-dialog-basic-demos-alert-dialog', function(document) {
23-
var example = document.querySelector('#alert-example');
19+
var status = document.querySelector('#status');
20+
var dialog = document.querySelector('vaadin-confirm-dialog');
2421
document.querySelector('vaadin-button').addEventListener('click', function() {
25-
example.$.status.innerText = '';
26-
document.querySelector('vaadin-confirm-dialog').opened = true;
22+
status.innerText = '';
23+
dialog.opened = true;
2724
});
28-
document.querySelector('vaadin-confirm-dialog').addEventListener('confirm', function() {
29-
example.$.status.innerText = 'OK clicked';
25+
dialog.addEventListener('confirm', function() {
26+
status.innerText = 'OK clicked';
3027
});
3128
});
3229
</script>
@@ -36,28 +33,24 @@ <h3>Alert Dialog</h3>
3633
<h3>Confirm or Cancel Dialog</h3>
3734
<vaadin-demo-snippet id="confirm-dialog-basic-demos-confirm-cancel">
3835
<template preserve-content>
39-
<dom-bind id="confirm-cancel-example">
40-
<template>
41-
<vaadin-button>Open dialog</vaadin-button>
42-
<vaadin-confirm-dialog header="Confirm delete" confirm-text="Delete" confirm-theme="error primary" cancel>
43-
Are you sure you want to delete the item?
44-
</vaadin-confirm-dialog>
45-
<span id="status"></span>
46-
</template>
47-
</dom-bind>
36+
<vaadin-button>Open dialog</vaadin-button>
37+
<vaadin-confirm-dialog header="Confirm delete" confirm-text="Delete" confirm-theme="error primary" cancel>
38+
Are you sure you want to delete the item?
39+
</vaadin-confirm-dialog>
40+
<span id="status"></span>
4841
<script>
4942
window.addDemoReadyListener('#confirm-dialog-basic-demos-confirm-cancel', function(document) {
50-
var example = document.querySelector('#confirm-cancel-example');
51-
var confirm = document.querySelector('vaadin-confirm-dialog');
43+
var status = document.querySelector('#status');
44+
var dialog = document.querySelector('vaadin-confirm-dialog');
5245
document.querySelector('vaadin-button').addEventListener('click', function() {
53-
example.$.status.innerText = '';
54-
confirm.opened = true;
46+
status.innerText = '';
47+
dialog.opened = true;
5548
});
56-
confirm.addEventListener('confirm', function() {
57-
example.$.status.innerText = 'Something was deleted';
49+
dialog.addEventListener('confirm', function() {
50+
status.innerText = 'Something was deleted';
5851
});
59-
confirm.addEventListener('cancel', function() {
60-
example.$.status.innerText = 'Nothing was deleted';
52+
dialog.addEventListener('cancel', function() {
53+
status.innerText = 'Nothing was deleted';
6154
});
6255
});
6356
</script>
@@ -67,28 +60,24 @@ <h3>Confirm or Cancel Dialog</h3>
6760
<h3>Confirmation Dialog</h3>
6861
<vaadin-demo-snippet id="confirm-dialog-basic-demos-confirmation-dialog">
6962
<template preserve-content>
70-
<dom-bind id="publish-example">
71-
<template>
72-
<vaadin-button>Open dialog</vaadin-button>
73-
<vaadin-confirm-dialog header="Publish" confirm-text="Publish" cancel
74-
message="Are you sure you want to publish the article?">
75-
</vaadin-confirm-dialog>
76-
<span id="status"></span>
77-
</template>
78-
</dom-bind>
63+
<vaadin-button>Open dialog</vaadin-button>
64+
<vaadin-confirm-dialog header="Publish" confirm-text="Publish" cancel
65+
message="Are you sure you want to publish the article?">
66+
</vaadin-confirm-dialog>
67+
<span id="status"></span>
7968
<script>
8069
window.addDemoReadyListener('#confirm-dialog-basic-demos-confirmation-dialog', function(document) {
81-
var example = document.querySelector('#publish-example');
82-
var confirm = document.querySelector('vaadin-confirm-dialog');
70+
var status = document.querySelector('#status');
71+
var dialog = document.querySelector('vaadin-confirm-dialog');
8372
document.querySelector('vaadin-button').addEventListener('click', function() {
84-
example.$.status.innerText = '';
85-
confirm.opened = true;
73+
status.innerText = '';
74+
dialog.opened = true;
8675
});
87-
confirm.addEventListener('confirm', function() {
88-
example.$.status.innerText = 'Something was successfully published';
76+
dialog.addEventListener('confirm', function() {
77+
status.innerText = 'Something was successfully published';
8978
});
90-
confirm.addEventListener('cancel', function() {
91-
example.$.status.innerText = 'Publishing was canceled';
79+
dialog.addEventListener('cancel', function() {
80+
status.innerText = 'Publishing was canceled';
9281
});
9382
});
9483
</script>
@@ -98,31 +87,27 @@ <h3>Confirmation Dialog</h3>
9887
<h3>Confirm‚ Reject or Cancel Dialog</h3>
9988
<vaadin-demo-snippet id="confirm-dialog-basic-demos-confirm-discard">
10089
<template preserve-content>
101-
<dom-bind id="unsaved-changes-example">
102-
<template>
103-
<vaadin-button>Open dialog</vaadin-button>
104-
<vaadin-confirm-dialog header="Unsaved changes" confirm-text="Save" cancel reject reject-text="Discard">
105-
Do you want to save or discard your changes before navigating away?
106-
</vaadin-confirm-dialog>
107-
<span id="status"></span>
108-
</template>
109-
</dom-bind>
90+
<vaadin-button>Open dialog</vaadin-button>
91+
<vaadin-confirm-dialog header="Unsaved changes" confirm-text="Save" cancel reject reject-text="Discard">
92+
Do you want to save or discard your changes before navigating away?
93+
</vaadin-confirm-dialog>
94+
<span id="status"></span>
11095
<script>
11196
window.addDemoReadyListener('#confirm-dialog-basic-demos-confirm-discard', function(document) {
112-
var example = document.querySelector('#unsaved-changes-example');
113-
var confirm = document.querySelector('vaadin-confirm-dialog');
97+
var status = document.querySelector('#status');
98+
var dialog = document.querySelector('vaadin-confirm-dialog');
11499
document.querySelector('vaadin-button').addEventListener('click', function() {
115-
example.$.status.innerText = '';
116-
confirm.opened = true;
100+
status.innerText = '';
101+
dialog.opened = true;
117102
});
118-
confirm.addEventListener('confirm', function() {
119-
example.$.status.innerText = 'Your changes were saved';
103+
dialog.addEventListener('confirm', function() {
104+
status.innerText = 'Your changes were saved';
120105
});
121-
confirm.addEventListener('reject', function() {
122-
example.$.status.innerText = 'Your changes were discarded';
106+
dialog.addEventListener('reject', function() {
107+
status.innerText = 'Your changes were discarded';
123108
});
124-
confirm.addEventListener('cancel', function() {
125-
example.$.status.innerText = 'Cancel was clicked';
109+
dialog.addEventListener('cancel', function() {
110+
status.innerText = 'Cancel was clicked';
126111
});
127112
});
128113
</script>

0 commit comments

Comments
 (0)