| 'use strict'; |
| |
| /** |
| * Inject required CSS and JS into html fragment loaded into an <iframe> |
| * @type {{}} |
| */ |
| var mdlIframeLoader = {}; |
| (function(self) { |
| |
| // The CSS and JS needed to run MDL snippets in an <iframe> |
| |
| // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent |
| try { |
| new window.CustomEvent('test'); |
| } catch(e) { |
| var CustomEvent = function(event, params) { |
| var evt; |
| params = params || { |
| bubbles: false, |
| cancelable: false, |
| detail: undefined |
| }; |
| |
| evt = document.createEvent('CustomEvent'); |
| evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); |
| return evt; |
| }; |
| |
| CustomEvent.prototype = window.Event.prototype; |
| window.CustomEvent = CustomEvent; // expose definition to window |
| } |
| |
| var docs = [ |
| { 'type': 'css', 'id': 'font-roboto-css', 'src': 'https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' }, |
| { 'type': 'css', 'id': 'material-icon-css', 'src': 'https://fonts.googleapis.com/icon?family=Material+Icons' }, |
| { 'type': 'css', 'id': 'dialog-polyfill-css', 'src': 'demo/styles/dialog-polyfill.css' }, |
| { 'type': 'css', 'id': 'material-css', 'src': 'https://code.getmdl.io/1.1.3/material.grey-orange.min.css' }, |
| { 'type': 'css', 'id': 'mdlext-css', 'src': 'lib/mdl-ext-eqjs.css' }, |
| { 'type': 'css', 'id': 'demo-css', 'src': 'demo/styles/demo.css' }, |
| { 'type': 'js', 'id': 'dialog-polyfill-js', 'src': 'demo/scripts/dialog-polyfill.js' }, |
| { 'type': 'js', 'id': 'material-js', 'src': 'https://code.getmdl.io/1.1.3/material.min.js' }, |
| { 'type': 'js', 'id': 'eq-js', 'src': 'demo/scripts/eq.min.js' }, |
| { 'type': 'js', 'id': 'mdlext-js', 'src': 'lib/index.js' } |
| ]; |
| |
| var joinOrigin = function(origin, src) { |
| return src.startsWith('http') ? src : origin.concat(src); |
| }; |
| |
| var loadResources = function( origin, loadCompleted ) { |
| var expectToLoad = docs.length; |
| var filesLoaded = 0; |
| |
| for (var i = 0; i < docs.length; i++) { |
| if (document.getElementById(docs[i].id) === null) { |
| var el; |
| var src = joinOrigin(origin, docs[i].src); |
| |
| if (docs[i].type === 'css') { |
| el = document.createElement('link'); |
| el.href = src; |
| el.rel = 'stylesheet'; |
| el.type = 'text/css'; |
| } |
| else { |
| el = document.createElement('script'); |
| el.src = src; |
| el.type = 'text/javascript'; |
| el.async = false; |
| el.charset = 'utf-8'; |
| } |
| el.id = docs[i].id; |
| el.onload = function () { |
| filesLoaded++; |
| if(filesLoaded >= expectToLoad) { |
| loadCompleted(); |
| } |
| }; |
| document.head.appendChild(el); |
| } |
| else { |
| expectToLoad--; |
| } |
| } |
| }; |
| |
| /** |
| * Inject required CSS and JS into html fragment loaded into an <iframe> |
| * @param origin path relative to root of this project, e.g. "../../../ |
| */ |
| self.load = function( origin ) { |
| loadResources( origin, function () { |
| if(window.componentHandler) { |
| window.componentHandler.upgradeDom(); |
| } |
| }); |
| }; |
| |
| return self; |
| })(mdlIframeLoader); |