Last active
August 14, 2017 20:00
-
-
Save bcomnes/7415387462e991b66ef1dbeb962e73e0 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Nanocomponent = require('nanocomponent') | |
| var html = require('bel') | |
| var onIdle = require('on-idle') | |
| var url = require('url') | |
| var TwitterWidgetsLoader = { | |
| src: '//platform.twitter.com/widgets.js', | |
| loading: false, | |
| listeners: [], | |
| interval: 50, | |
| load: function (callback) { | |
| var _this = this | |
| this.listeners.push(callback) | |
| if (window.twttr && window.twttr.widgets) { | |
| setTimeout(function () { | |
| _this.done() | |
| }) | |
| return | |
| } | |
| if (this.loading) { | |
| return | |
| } | |
| this.loading = true | |
| var script = document.createElement('script') | |
| script.type = 'text/javascript' | |
| script.src = this.src | |
| document.body.appendChild(script) | |
| this.poll() | |
| }, | |
| poll: function () { | |
| if (window.twttr && window.twttr.widgets) { | |
| return this.done() | |
| } | |
| var _this = this | |
| setTimeout(function () { | |
| _this.poll() | |
| }, this.interval) | |
| }, | |
| done: function () { | |
| while (this.listeners.length) { | |
| this.listeners.pop()(window.twttr) | |
| } | |
| } | |
| } | |
| class TwitterComponent extends Nanocomponent { | |
| createElement (tweetURL) { | |
| this.tweetURL = tweetURL | |
| return html` | |
| <div></div> | |
| ` | |
| } | |
| update (tweetURL) { | |
| return this.tweetURL === tweetURL | |
| } | |
| loadTweet (el) { | |
| var tweetID = url.parse(this.tweetURL).path.split('/').pop() | |
| if (!el) return console.warn(`cant render ${tweetID} on unmounted component`) | |
| onIdle(function () { | |
| TwitterWidgetsLoader.load(function (twttr) { | |
| twttr.widgets.createTweet(tweetID, el) | |
| }) | |
| }) | |
| } | |
| load (el) { | |
| this.loadTweet(el) | |
| } | |
| afterupdate (el) { | |
| this.loadTweet(el) | |
| } | |
| } | |
| module.exports = TwitterComponent |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var html = require('choo/html') | |
| var Twitter = require('../twitter-comp') | |
| var t1 = new Twitter() | |
| var t2 = new Twitter() | |
| var t3 = new Twitter() | |
| var TITLE = '🚂🚋🚋' | |
| module.exports = view | |
| function view (state, emit) { | |
| if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) | |
| return html` | |
| <body class="sans-serif"> | |
| <h1 class="f-headline pa3 pa4-ns"> | |
| Choo choo! | |
| ${t1.render('https://twitter.com/teresawithoutah/status/896946697464631296')} | |
| ${t2.render('https://twitter.com/teresawithoutah/status/896946697464631296')} | |
| ${t3.render('https://twitter.com/teresawithoutah/status/896946697464631296')} | |
| </h1> | |
| </body> | |
| ` | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment