Skip to content

Commit fad19e6

Browse files
ala-nala-n
authored
Merge pull request #2315 from exadel-inc/chore/migrate-esl-alert-to-playground
chore(esl-alert): Migrate `esl-alert` example page to playground base
2 parents eef8faf + 8b6c377 commit fad19e6

File tree

2 files changed

+78
-56
lines changed

2 files changed

+78
-56
lines changed

‎site/views/examples/notification.njk

+74-55
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,92 @@ layout: content
33
title: Notification
44
seoTitle: Notifications UI example based on ESL web components
55
name: Notification
6-
tags: examples
6+
tags: [examples, playground]
77
icon: examples/notification.svg
88
aside:
99
components:
1010
- esl-alert
1111
---
12-
{% import 'lorem.njk' as lorem %}
1312

1413
<section class="row">
1514
<div class="col-12">
16-
<h2>Triggers</h2>
17-
<div class="btn-container">
18-
<button type="button" class="btn btn-sec-blue esl-alert-show"
19-
data-text="Global Alert Long" data-cls="alert alert-warning">Show Long
20-
</button>
21-
<button type="button" class="btn btn-sec-blue esl-alert-show"
22-
data-text="Global Alert Short" data-delay="1500" data-cls="alert alert-info">Show Quick
23-
</button>
24-
<button type="button" class="btn btn-sec-blue esl-alert-hide">Hide</button>
25-
</div>
26-
</div>
27-
</section>
28-
29-
<section class="row">
30-
<div class="col-12">
31-
<h2>Triggers Encapsulated</h2>
32-
<div class="border p-3" style="min-height: 210px">
33-
<div class="btn-container">
15+
<uip-root>
16+
<script type="text/html"
17+
label="Show Long"
18+
uip-snippet
19+
uip-snippet-js="js-snippet-alert-registration">
3420
<button type="button" class="btn btn-sec-orange esl-alert-show"
35-
data-cls="alert alert-success"
36-
data-html="Inner <h2>Alert</h2> Long">Show Long
21+
onclick="ESL.EventUtils.dispatch(document.body, 'esl:alert:show', {
22+
detail: {
23+
text: 'Global Alert Long',
24+
cls: 'alert alert-warning',
25+
}
26+
})">
27+
Show Long
3728
</button>
29+
</script>
30+
31+
<!-- Show Quick and Hide Alert -->
32+
<script type="text/html"
33+
label="Show Short"
34+
uip-snippet
35+
uip-snippet-js="js-snippet-alert-registration">
3836
<button type="button" class="btn btn-sec-orange esl-alert-show"
39-
data-cls="alert alert-danger"
40-
data-text="Inner Alert Short" data-delay="1500">Show Quick
37+
onclick="ESL.EventUtils.dispatch(document.body, 'esl:alert:show', {
38+
detail: {
39+
html: 'Inner <h2>Alert</h2> Short',
40+
cls: 'alert alert-info',
41+
hideDelay: 1500
42+
}
43+
})">
44+
Show Shot
45+
</button>
46+
<button type="button" class="btn btn-sec-blue esl-alert-hide"
47+
onclick="ESL.EventUtils.dispatch(document.body, 'esl:alert:hide')">
48+
Hide
4149
</button>
42-
<button type="button" class="btn btn-sec-orange esl-alert-hide">Hide</button>
43-
</div>
50+
</script>
4451

45-
<esl-alert default-params="{cls: 'bg-warn'}"></esl-alert>
46-
</div>
47-
</div>
48-
</section>
52+
<script id="js-snippet-alert-registration" type="text/plain">
53+
import {ESLEventUtils, ESLAlert} from '@exadel/esl';
54+
ESLAlert.register();
55+
ESLAlert.init();
56+
</script>
57+
58+
<!-- Triggers Encapsulated -->
59+
<script type="text/html"
60+
label="Triggers Encapsulated"
61+
uip-snippet
62+
uip-snippet-js="js-snippet-alert-registration-n-handler"
63+
uip-isolated>
64+
<div class="border p-3" style="min-height: 310px">
65+
<button type="button" id="showAlertButton" class="btn btn-sec-orange esl-alert-show">
66+
Show Long
67+
</button>
68+
<esl-alert default-params="{cls: 'alert alert-info'}"></esl-alert>
69+
</div>
70+
</script>
71+
72+
<script id="js-snippet-alert-registration-n-handler" type="text/plain">
73+
import {ESLEventUtils, ESLAlert} from '@exadel/esl';
74+
ESLAlert.register();
75+
ESLAlert.init();
4976
50-
<script type="text/javascript">
51-
document.body.addEventListener('click', function (e) {
52-
/** @type HTMLElement */
53-
var el = e.target;
54-
var params = {};
77+
const showAlertButton = document.getElementById('showAlertButton');
78+
showAlertButton.addEventListener('click', () => {
79+
ESLEventUtils.dispatch(document.body, 'esl:alert:show', {
80+
detail: {
81+
cls: 'alert alert-info',
82+
html: 'Inner <h2>Alert</h2> Long'
83+
}})
84+
});
85+
</script>
5586

56-
if (el && el.matches('.esl-alert-show')) {
57-
if (el.dataset.cls) {
58-
params.cls = el.dataset.cls;
59-
}
60-
if (el.dataset.text) {
61-
params.text = el.dataset.text;
62-
}
63-
if (el.dataset.html) {
64-
params.html = el.dataset.html;
65-
}
66-
if (el.dataset.delay) {
67-
params.hideDelay = +el.dataset.delay;
68-
}
69-
el.dispatchEvent(new CustomEvent(`esl:alert:show`, {bubbles: true, detail: params}));
70-
}
71-
if (el && el.matches('.esl-alert-hide')) {
72-
el.dispatchEvent(new CustomEvent(`esl:alert:hide`, {bubbles: true}));
73-
}
74-
});
75-
</script>
87+
88+
<uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
89+
<uip-preview resizable></uip-preview>
90+
<uip-editor label="Source code (HTML)" collapsible copy></uip-editor>
91+
<uip-editor source="js" label="JavaScript" collapsible copy></uip-editor>
92+
</uip-root>
93+
</div>
94+
</section>

‎src/modules/esl-alert/README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,12 @@ ESL Alert listens to the following events:
3131

3232
Use CustomEvent `details` to customize alert. Alert `details` accepts the following properties:
3333

34-
- `cls` - to pass class or classes(separated by space) to add to alert inner.
34+
- `cls` - to pass class or classes(separated by space) to add to alert inner
3535
- `text` - to specify alert text content
3636
- `html` - to alternatively specify alert HTML content
37+
- `hideDelay` - to specify the time in milliseconds after which the alert will be hidden automatically
38+
- `hideTime` - to specify internal hide timeout in milliseconds to clear inner content.
39+
Starts when alert becomes visually hidden (e.g. after `hideDelay` passed)
3740

3841
If one of `esl-alert`s catches the activation event it will prevent its propagation to parent elements.
3942

0 commit comments

Comments
 (0)