1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview Deferred resource loader for OOBE/Login screens.
*/
cr.define('cr.ui.login.ResourceLoader', function() {
'use strict';
// Deferred assets.
var ASSETS = {};
/**
* Register assets for deferred loading. When the bundle is loaded
* assets will be added to the current page's DOM: <link> and <script>
* tags pointing to the CSS and JavaScript will be added to the
* <head>, and HTML will be appended to a specified element.
*
* @param {Object} desc Descriptor for the asset bundle
* @param {string} desc.id Unique identifier for the asset bundle.
* @param {Array=} desc.js URLs containing JavaScript sources.
* @param {Array=} desc.css URLs containing CSS rules.
* @param {Array<Object>=} desc.html Descriptors for HTML fragments,
* each of which has a 'url' property and a 'targetID' property that
* specifies the node under which the HTML should be appended.
*
* Example:
* ResourceLoader.registerAssets({
* id: 'bundle123',
* js: ['//foo.com/src.js', '//bar.com/lib.js'],
* css: ['//foo.com/style.css'],
* html: [{ url: '//foo.com/tmpls.html' targetID: 'tmpls'}]
* });
*
* Note: to avoid cross-site requests, all HTML assets must be served
* from the same host as the rendered page. For example, if the
* rendered page is served as chrome://oobe, then all the HTML assets
* must be served as chrome://oobe/path/to/something.html.
*/
function registerAssets(desc) {
var html = desc.html || [];
var css = desc.css || [];
var js = desc.js || [];
ASSETS[desc.id] = {
html: html, css: css, js: js,
loaded: false,
count: html.length + css.length + js.length
};
}
/**
* Determines whether an asset bundle is defined for a specified id.
* @param {string} id The possible identifier.
*/
function hasDeferredAssets(id) {
return id in ASSETS;
}
/**
* Determines whether an asset bundle has already been loaded.
* @param {string} id The identifier of the asset bundle.
*/
function alreadyLoadedAssets(id) {
return hasDeferredAssets(id) && ASSETS[id].loaded;
}
/**
* Load a stylesheet into the current document.
* @param {string} id Identifier of the stylesheet's asset bundle.
* @param {string} url The URL resolving to a stylesheet.
*/
function loadCSS(id, url) {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', url);
link.onload = resourceLoaded.bind(null, id);
document.head.appendChild(link);
}
/**
* Load a script into the current document.
* @param {string} id Identifier of the script's asset bundle.
* @param {string} url The URL resolving to a script.
*/
function loadJS(id, url) {
var script = document.createElement('script');
script.src = url;
script.onload = resourceLoaded.bind(null, id);
document.head.appendChild(script);
}
/**
* Move DOM nodes from one parent element to another.
* @param {HTMLElement} from Element whose children should be moved.
* @param {HTMLElement} to Element to which nodes should be appended.
*/
function moveNodes(from, to) {
Array.prototype.forEach.call(from.children, function(child) {
to.appendChild(document.importNode(child, true));
});
}
/**
* Tests whether an XMLHttpRequest has successfully finished loading.
* @param {string} url The requested URL.
* @param {XMLHttpRequest} xhr The XHR object.
*/
function isSuccessful(url, xhr) {
var fileURL = /^file:\/\//;
return xhr.readyState == 4 &&
(xhr.status == 200 || fileURL.test(url) && xhr.status == 0);
}
/*
* Load a chunk of HTML into the current document.
* @param {string} id Identifier of the page's asset bundle.
* @param {Object} html Descriptor of the HTML to fetch.
* @param {string} html.url The URL resolving to some HTML.
* @param {string} html.targetID The element ID to which the retrieved
* HTML nodes should be appended.
*/
function loadHTML(id, html) {
var xhr = new XMLHttpRequest();
xhr.open('GET', html.url);
xhr.onreadystatechange = function() {
if (isSuccessful(html.url, xhr)) {
moveNodes(this.responseXML.body, $(html.targetID));
resourceLoaded(id);
}
};
xhr.responseType = 'document';
xhr.send();
}
/**
* Record that a resource has been loaded for an asset bundle. When
* all the resources have been loaded the callback that was specified
* in the loadAssets call is invoked.
* @param {string} id Identifier of the asset bundle.
*/
function resourceLoaded(id) {
var assets = ASSETS[id];
assets.count--;
if (assets.count == 0)
finishedLoading(id);
}
/**
* Finishes loading an asset bundle.
* @param {string} id Identifier of the asset bundle.
*/
function finishedLoading(id) {
var assets = ASSETS[id];
console.log('Finished loading asset bundle', id);
assets.loaded = true;
window.setTimeout(function() {
assets.callback();
chrome.send('screenAssetsLoaded', [id]);
}, 0);
}
/**
* Load an asset bundle, invoking the callback when finished.
* @param {string} id Identifier for the asset bundle to load.
* @param {function()=} callback Function to invoke when done loading.
*/
function loadAssets(id, callback) {
var assets = ASSETS[id];
assets.callback = callback || function() {};
console.log('Loading asset bundle', id);
if (alreadyLoadedAssets(id))
console.warn('asset bundle', id, 'already loaded!');
if (assets.count == 0) {
finishedLoading(id);
} else {
assets.css.forEach(loadCSS.bind(null, id));
assets.js.forEach(loadJS.bind(null, id));
assets.html.forEach(loadHTML.bind(null, id));
}
}
return {
alreadyLoadedAssets: alreadyLoadedAssets,
hasDeferredAssets: hasDeferredAssets,
loadAssets: loadAssets,
registerAssets: registerAssets
};
});
|
