Home Page Panel Example

This example displays a Twitter timeline:

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
      t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

/**
 * Twitter Timeline
 */
var TwitterTimelineProto = Object.create(HTMLElement.prototype);
  var timelineShadowRoot;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host { margin: 0 20px 0 20px; padding: 0; width: 100%; display: block; }
      </style>
      <h1>Twitter Timelines</h1>
      <div id="timeline"></div>
    `;
  }

  TwitterTimelineProto.attachedCallback = function() {
    twttr.ready(function () {
      twttr.widgets.load();
      twttr.widgets.createTimeline(
          {
            sourceType: 'profile',
            screenName: 'escenic'
          },
          timelineShadowRoot.querySelector('#timeline'),
          {
            height: 1000
          }
      );
    });
  }
;

document.registerElement('twitter-home-panel', {
      prototype: TwitterTimelineProto
    });

/**
 * Twitter icon
 */
var TwitterIconProto = Object.create(HTMLElement.prototype);
  var iconShadowRoot;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host { margin: 0 0px 0 0px; width: 26px; display: inline; float: left; margin-right: 18px; }
        img { width: 20px; position: relative; top: 4px; left: 10px; }
      </style>
      <img class="icon">
    `;

    TwitterIconProto.createdCallback = function () {
      var template = thisDoc.querySelector('template#icon').content;
    iconShadowRoot = this.attachShadow({ mode: 'open' });
      iconShadowRoot.appendChild(template.cloneNode(true));
  };

  TwitterIconProto.attachedCallback = function() {
    this.activeStateChanged(this.cueInterface.isActive());
    this.cueInterface.addActiveWatcher(function (active) {
      this.activeStateChanged(active);
    }.bind(this));
  };

  TwitterIconProto.activeStateChanged = function(active) {
    var img = iconShadowRoot.querySelector('img.icon');
    if (active) {
      img.src = this.getAbsolutePath(this.activeIconPath);
    }
    else {
      img.src = this.getAbsolutePath(this.inactiveIconPath);
    }
  };

  TwitterIconProto.getAbsolutePath = function(path) {
    var baseURI = import.meta.url;
    return baseURI.substring(0, baseURI.lastIndexOf('/') + 1) + path;
  }
;

customElements.define('twitter-home-panel-icon', TwitterIcon);