diff --git a/css/badge.css b/css/badge.css new file mode 100644 index 0000000000000000000000000000000000000000..5b99f1ee074f9568a4083088adc1a2d015075a2e --- /dev/null +++ b/css/badge.css @@ -0,0 +1,20 @@ +sib-badge{ + box-sizing: border-box; + font-family: sans-serif; + font-size: 13px; +} + +sib-badge .counter{ + display: block; + background-color: var(--sib-badge-theme, gray); + border-radius: 50%; + line-height: 25px; + width: 25px; + height: 25px; + text-align: center; + font-weight: bold; +} + +sib-badge .counter[data-nb-unread="0"]{ + display: none; +} \ No newline at end of file diff --git a/examples/badge.html b/examples/badge.html new file mode 100644 index 0000000000000000000000000000000000000000..e21903429534bfda4b9729e33d9bd829452bc3c6 --- /dev/null +++ b/examples/badge.html @@ -0,0 +1,21 @@ + + + + + + SIB Badge - Demo + + + + + + +

SIB Badge - demo

+

Number of notifications about conversation 7

+ + + diff --git a/sib-badge.js b/sib-badge.js new file mode 100644 index 0000000000000000000000000000000000000000..94b91e1d7bd91b21de4cde1d8f607cac947f7fcc --- /dev/null +++ b/sib-badge.js @@ -0,0 +1,34 @@ +import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.7'; + +const base_url = import.meta.url.replace(/\/[^\/]*$/, ''); +Helpers.importCSS(`${base_url}/css/badge.css`) + +class SIBBadge extends SIBTemplateElement { + static get propsDefinition() { + return { + dataSrc: 'data-src', + idSuffix: 'id-suffix' + } + } + + template({ dataSrc, idSuffix }) { + if (dataSrc) { + let sourceUrl = dataSrc + (idSuffix ? idSuffix + '/' : '') + return ` + + `; + } + return ''; + } +} + +customElements.define('sib-badge', SIBBadge); \ No newline at end of file