iamphill/Instagram.md

## instagram.html
<html>
  <head>
    <script src="instagram.js"></script>
  </head>
  <body>
    <instagram-box></instagram-box>
  </body>
</html>

## instagram.js
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
  });
});

## Instagram.md

      
    Raw
  

              Instagram.md
            
          
    Instagram Shadow DOM

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.
	<html>
	<head>
	<script src="instagram.js"></script>
	</head>
	<body>
	<instagram-box></instagram-box>
	</body>
	</html>
	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
	});
	});