Skip to content

S
SiB Notifications
Commit 223bd781 authored by Matthieu Fesselier's avatar Matthieu Fesselier
Browse files
Options

feature: add sib-badge

parent 8e7c54e4
Pipeline #3688 passed with stage
    in 27 seconds
    Show whitespace changes
    Inline Side-by-side
    Showing with 75 additions and 0 deletions
    css/badge.css 0 → 100644
    View file @ 223bd781
    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
    examples/badge.html 0 → 100644
    View file @ 223bd781
    <!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>
    sib-badge.js 0 → 100644
    View file @ 223bd781
    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