blob: abade926e46075ecc0298594960b0914cef10303 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001'use strict';
2
3/**
4 * Inject required CSS and JS into html fragment loaded into an <iframe>
5 * @type {{}}
6 */
7var 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&amp;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);