Copybara bot | be50d49 | 2023-11-30 00:16:42 +0100 | [diff] [blame^] | 1 | 'use strict'; |
| 2 | |
| 3 | /** |
| 4 | * Inject required CSS and JS into html fragment loaded into an <iframe> |
| 5 | * @type {{}} |
| 6 | */ |
| 7 | var mdlIframeLoader = {}; |
| 8 | (function(self) { |
| 9 | |
| 10 | // The CSS and JS needed to run MDL snippets in an <iframe> |
| 11 | |
| 12 | // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent |
| 13 | try { |
| 14 | new window.CustomEvent('test'); |
| 15 | } catch(e) { |
| 16 | var CustomEvent = function(event, params) { |
| 17 | var evt; |
| 18 | params = params || { |
| 19 | bubbles: false, |
| 20 | cancelable: false, |
| 21 | detail: undefined |
| 22 | }; |
| 23 | |
| 24 | evt = document.createEvent('CustomEvent'); |
| 25 | evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); |
| 26 | return evt; |
| 27 | }; |
| 28 | |
| 29 | CustomEvent.prototype = window.Event.prototype; |
| 30 | window.CustomEvent = CustomEvent; // expose definition to window |
| 31 | } |
| 32 | |
| 33 | var docs = [ |
| 34 | { 'type': 'css', 'id': 'font-roboto-css', 'src': 'https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' }, |
| 35 | { 'type': 'css', 'id': 'material-icon-css', 'src': 'https://fonts.googleapis.com/icon?family=Material+Icons' }, |
| 36 | { 'type': 'css', 'id': 'dialog-polyfill-css', 'src': 'demo/styles/dialog-polyfill.css' }, |
| 37 | { 'type': 'css', 'id': 'material-css', 'src': 'https://code.getmdl.io/1.1.3/material.grey-orange.min.css' }, |
| 38 | { 'type': 'css', 'id': 'mdlext-css', 'src': 'lib/mdl-ext-eqjs.css' }, |
| 39 | { 'type': 'css', 'id': 'demo-css', 'src': 'demo/styles/demo.css' }, |
| 40 | { 'type': 'js', 'id': 'dialog-polyfill-js', 'src': 'demo/scripts/dialog-polyfill.js' }, |
| 41 | { 'type': 'js', 'id': 'material-js', 'src': 'https://code.getmdl.io/1.1.3/material.min.js' }, |
| 42 | { 'type': 'js', 'id': 'eq-js', 'src': 'demo/scripts/eq.min.js' }, |
| 43 | { 'type': 'js', 'id': 'mdlext-js', 'src': 'lib/index.js' } |
| 44 | ]; |
| 45 | |
| 46 | var joinOrigin = function(origin, src) { |
| 47 | return src.startsWith('http') ? src : origin.concat(src); |
| 48 | }; |
| 49 | |
| 50 | var loadResources = function( origin, loadCompleted ) { |
| 51 | var expectToLoad = docs.length; |
| 52 | var filesLoaded = 0; |
| 53 | |
| 54 | for (var i = 0; i < docs.length; i++) { |
| 55 | if (document.getElementById(docs[i].id) === null) { |
| 56 | var el; |
| 57 | var src = joinOrigin(origin, docs[i].src); |
| 58 | |
| 59 | if (docs[i].type === 'css') { |
| 60 | el = document.createElement('link'); |
| 61 | el.href = src; |
| 62 | el.rel = 'stylesheet'; |
| 63 | el.type = 'text/css'; |
| 64 | } |
| 65 | else { |
| 66 | el = document.createElement('script'); |
| 67 | el.src = src; |
| 68 | el.type = 'text/javascript'; |
| 69 | el.async = false; |
| 70 | el.charset = 'utf-8'; |
| 71 | } |
| 72 | el.id = docs[i].id; |
| 73 | el.onload = function () { |
| 74 | filesLoaded++; |
| 75 | if(filesLoaded >= expectToLoad) { |
| 76 | loadCompleted(); |
| 77 | } |
| 78 | }; |
| 79 | document.head.appendChild(el); |
| 80 | } |
| 81 | else { |
| 82 | expectToLoad--; |
| 83 | } |
| 84 | } |
| 85 | }; |
| 86 | |
| 87 | /** |
| 88 | * Inject required CSS and JS into html fragment loaded into an <iframe> |
| 89 | * @param origin path relative to root of this project, e.g. "../../../ |
| 90 | */ |
| 91 | self.load = function( origin ) { |
| 92 | loadResources( origin, function () { |
| 93 | if(window.componentHandler) { |
| 94 | window.componentHandler.upgradeDom(); |
| 95 | } |
| 96 | }); |
| 97 | }; |
| 98 | |
| 99 | return self; |
| 100 | })(mdlIframeLoader); |