This creates a new element instagram-box element which displays 12 recent images with a specific tag.
Taken out of a project due to the polyfill failing in IE9. Works natively in Chrome, needs polyfilled for all other browsers.
Last active
August 29, 2015 14:10
-
-
Save iamphill/3cf36d54f5047c4d3f4b to your computer and use it in GitHub Desktop.
Instagram shadow DOM
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
| <html> | |
| <head> | |
| <script src="instagram.js"></script> | |
| </head> | |
| <body> | |
| <instagram-box></instagram-box> | |
| </body> | |
| </html> |
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 css = '@import "/css/style.css";'; | |
| define([], function () { | |
| var url = 'https://api.instagram.com/v1/tags/brockhole/media/recent?client_id=CLIENT_ID&count=12'; | |
| var Instagram = Object.create(HTMLElement.prototype); | |
| Instagram.createdCallback = function () { | |
| this.root = this.createShadowRoot(); | |
| // Append CSS | |
| var style = document.createElement('style'); | |
| style.textContent = css; | |
| this.root.appendChild(style); | |
| // Get data | |
| this.getData(); | |
| }; | |
| Instagram.getData = function () { | |
| var self = this; | |
| // Create JSON script element | |
| var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random()); | |
| var script = document.createElement('script'); | |
| script.src = url + '&callback=' + callbackName; | |
| // Create JSONP callback | |
| window[callbackName] = function (data) { | |
| delete window[callbackName]; | |
| self.root.removeChild(script); | |
| self.dataCallback(data); | |
| }; | |
| this.root.appendChild(script); | |
| }; | |
| Instagram.dataCallback = function (d) { | |
| var self = this; | |
| // Loop data | |
| var holder = document.createElement('div'); | |
| holder.className = 'row no-gutter'; | |
| d.data.forEach(function (insta) { | |
| // Create new Instagram element | |
| var div = document.createElement('div'); | |
| div.className = 'col-xs-6 col-sm-3'; | |
| // Create link | |
| var link = document.createElement('a'); | |
| link.href = insta.link; | |
| link.target = '_blank'; | |
| // Create image | |
| var img = document.createElement('img'); | |
| img.src = insta.images.standard_resolution.url; | |
| img.className = 'img-responsive'; | |
| link.appendChild(img); | |
| div.appendChild(link); | |
| // Append | |
| holder.appendChild(div); | |
| }); | |
| this.root.appendChild(holder); | |
| }; | |
| var InstagramBox = document.registerElement('instagram-box', { | |
| prototype: Instagram | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment