Commit 223bd781 authored by Matthieu Fesselier's avatar Matthieu Fesselier

feature: add sib-badge

parent 8e7c54e4
Pipeline #3688 passed with stage
in 27 seconds
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Badge - Demo</title>
<script type="module" src="../sib-badge.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
<style>
:root{
--sib-badge-theme: #ffd759;
}
</style>
</head>
<body>
<h1>SIB Badge - demo</h1>
<p>Number of notifications about conversation 7</p>
<sib-badge data-src="http://127.0.0.1:8000/conversations/7/"></sib-badge>
</body>
</html>
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 `
<sib-display
bind-user
data-fields
search-fields="unread, object"
search-value-unread="true"
search-value-object="${sourceUrl}"
search-widget-unread="sib-form-hidden"
search-widget-object="sib-form-hidden"
counter-template="<div class='counter' data-nb-unread='\${counter}'>\${counter}</div>"
></sib-display>
`;
}
return '';
}
}
customElements.define('sib-badge', SIBBadge);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment