hubl/src/scripts/hd-widgets.js

import {SIBDisplayLookupList} from 'https://cdn.happy-dev.fr/sib-core/widgets/sib-display-widgets.js';
import {SIBWidget} from 'https://cdn.happy-dev.fr/sib-core/widgets/sib-base-widgets.js';
import {store} from 'https://cdn.happy-dev.fr/sib-core/store.js';

class HDAppUserInfo extends SIBDisplayLookupList {
  get parentElement() {
    return 'div';
  }
  getTemplate(value, index) {
    var firstname, lastname, email;

    if (typeof value == 'object')
      if (Object.keys(value).length > 1) {
        firstname = value.first_name;
        lastname = value.last_name;
        email = value.email;
      } else {
        store.get(value).then(resource => {
          this.value.push(resource);
          this.render();
        });
        if (Array.isArray(this.value))
          this.value.splice(this.value.indexOf(value), 1);
        else this.value = [];
        return '';
      }
    return `<div>${firstname} ${lastname}</div>`;
    // + `<div id="${email}">${email}</div>`;
  }
}

class HDAppMail extends SIBWidget {
  get template() {
    return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
  }
}

class HDAppMember extends SIBWidget {
  get template() {
    return `
        <div name="${this.name}">
          <img src="${this.value.avatar}"/>
        </div>
      `;
  }

  render() {
    store.get(this.value).then(value => {
      this._value = value;
      this.innerHTML = this.template;
    });
  }
}

class HDAppAuthor extends SIBDisplayLookupList {
  get parentElement() {
    return 'div';
  }
  getTemplate(value, index) {
    var firstname, lastname;
    if (typeof value == 'object')
      if (Object.keys(value).length > 1) {
        firstname = value.user.first_name;
        lastname = value.user.last_name;
      } else {
        store.get(value).then(resource => {
          this.value.push(resource);
          this.render();
        });
        if (Array.isArray(this.value))
          this.value.splice(this.value.indexOf(value), 1);
        else this.value = [];
        return '';
      }
    return `${firstname} ${lastname}`;
  }
}

class HDAppClosingDate extends SIBWidget {
  get template() {
    return this.value
      ? `<strong>closed</strong> (${this.value})`
      : '<strong>open</strong>';
  }

  render() {
    this.innerHTML = this.template;
  }
}

class HDAppAvailable extends SIBWidget {
  get template() {
    return this.value
      ? '<strong>Available</strong>'
      : '<strong>Not available</strong>';
  }

  render() {
    this.innerHTML = this.template;
  }
}

class HDAppHyperlink extends SIBWidget {
  get template() {
    const escaped = this.value
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
    return `<a href="${escaped}">${escaped}</a>`;
  }

  render() {
    this.innerHTML = this.template;
  }
}

class HDAppLinkMore extends SIBWidget {
  get template() {
    const id = uniqID();
    console.warn('HDAppLinkMore', this);
    return `
      ${this.label}
      ${this.name}
      ${this.escapedValue}
      `;
  }
}

document.addEventListener('WebComponentsReady', function(event) {

  customElements.define('hdapp-userinfo', HDAppUserInfo);
  customElements.define('hdapp-mail', HDAppMail);
  customElements.define('hdapp-member', HDAppMember);
  customElements.define('hdapp-author', HDAppAuthor);
  customElements.define('hdapp-closing-date', HDAppClosingDate);
  customElements.define('hdapp-available', HDAppAvailable);
  customElements.define('hdapp-hyperlink', HDAppHyperlink);
  customElements.define('hdapp-link-more', HDAppLinkMore);
});