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);