Skip to content

Commit

Permalink
Merge pull request #2315 from exadel-inc/chore/migrate-esl-alert-to-p…
Browse files Browse the repository at this point in the history 
…layground

chore(esl-alert): Migrate `esl-alert` example page to playground base
  • Loading branch information
@ala-n
ala-n authored Apr 4, 2024
2 parents eef8faf + 8b6c377 commit fad19e6
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 56 deletions.
129 changes: 74 additions & 55 deletions site/views/examples/notification.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,73 +3,92 @@ layout: content
title: Notification
seoTitle: Notifications UI example based on ESL web components
name: Notification
tags: examples
tags: [examples, playground]
icon: examples/notification.svg
aside:
components:
- esl-alert
---
{% import 'lorem.njk' as lorem %}

<section class="row">
<div class="col-12">
<h2>Triggers</h2>
<div class="btn-container">
<button type="button" class="btn btn-sec-blue esl-alert-show"
data-text="Global Alert Long" data-cls="alert alert-warning">Show Long
</button>
<button type="button" class="btn btn-sec-blue esl-alert-show"
data-text="Global Alert Short" data-delay="1500" data-cls="alert alert-info">Show Quick
</button>
<button type="button" class="btn btn-sec-blue esl-alert-hide">Hide</button>
</div>
</div>
</section>

<section class="row">
<div class="col-12">
<h2>Triggers Encapsulated</h2>
<div class="border p-3" style="min-height: 210px">
<div class="btn-container">
<uip-root>
<script type="text/html"
label="Show Long"
uip-snippet
uip-snippet-js="js-snippet-alert-registration">
<button type="button" class="btn btn-sec-orange esl-alert-show"
data-cls="alert alert-success"
data-html="Inner <h2>Alert</h2> Long">Show Long
onclick="ESL.EventUtils.dispatch(document.body, 'esl:alert:show', {
detail: {
text: 'Global Alert Long',
cls: 'alert alert-warning',
}
})">
Show Long
</button>
</script>

<!-- Show Quick and Hide Alert -->
<script type="text/html"
label="Show Short"
uip-snippet
uip-snippet-js="js-snippet-alert-registration">
<button type="button" class="btn btn-sec-orange esl-alert-show"
data-cls="alert alert-danger"
data-text="Inner Alert Short" data-delay="1500">Show Quick
onclick="ESL.EventUtils.dispatch(document.body, 'esl:alert:show', {
detail: {
html: 'Inner <h2>Alert</h2> Short',
cls: 'alert alert-info',
hideDelay: 1500
}
})">
Show Shot
</button>
<button type="button" class="btn btn-sec-blue esl-alert-hide"
onclick="ESL.EventUtils.dispatch(document.body, 'esl:alert:hide')">
Hide
</button>
<button type="button" class="btn btn-sec-orange esl-alert-hide">Hide</button>
</div>
</script>

<esl-alert default-params="{cls: 'bg-warn'}"></esl-alert>
</div>
</div>
</section>
<script id="js-snippet-alert-registration" type="text/plain">
import {ESLEventUtils, ESLAlert} from '@exadel/esl';
ESLAlert.register();
ESLAlert.init();
</script>

<!-- Triggers Encapsulated -->
<script type="text/html"
label="Triggers Encapsulated"
uip-snippet
uip-snippet-js="js-snippet-alert-registration-n-handler"
uip-isolated>
<div class="border p-3" style="min-height: 310px">
<button type="button" id="showAlertButton" class="btn btn-sec-orange esl-alert-show">
Show Long
</button>
<esl-alert default-params="{cls: 'alert alert-info'}"></esl-alert>
</div>
</script>

<script id="js-snippet-alert-registration-n-handler" type="text/plain">
import {ESLEventUtils, ESLAlert} from '@exadel/esl';
ESLAlert.register();
ESLAlert.init();
<script type="text/javascript">
document.body.addEventListener('click', function (e) {
/** @type HTMLElement */
var el = e.target;
var params = {};
const showAlertButton = document.getElementById('showAlertButton');
showAlertButton.addEventListener('click', () => {
ESLEventUtils.dispatch(document.body, 'esl:alert:show', {
detail: {
cls: 'alert alert-info',
html: 'Inner <h2>Alert</h2> Long'
}})
});
</script>

if (el && el.matches('.esl-alert-show')) {
if (el.dataset.cls) {
params.cls = el.dataset.cls;
}
if (el.dataset.text) {
params.text = el.dataset.text;
}
if (el.dataset.html) {
params.html = el.dataset.html;
}
if (el.dataset.delay) {
params.hideDelay = +el.dataset.delay;
}
el.dispatchEvent(new CustomEvent(`esl:alert:show`, {bubbles: true, detail: params}));
}
if (el && el.matches('.esl-alert-hide')) {
el.dispatchEvent(new CustomEvent(`esl:alert:hide`, {bubbles: true}));
}
});
</script>

<uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
<uip-preview resizable></uip-preview>
<uip-editor label="Source code (HTML)" collapsible copy></uip-editor>
<uip-editor source="js" label="JavaScript" collapsible copy></uip-editor>
</uip-root>
</div>
</section>
5 changes: 4 additions & 1 deletion src/modules/esl-alert/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,12 @@ ESL Alert listens to the following events:

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

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

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

Expand Down

0 comments on commit fad19e6

Please sign in to comment.