feat(text and css): html partials and css can be loaded via systemjs

This commit is contained in:
Torkel Ödegaard 2016-02-10 11:54:17 +01:00
parent eda23252e1
commit dfe0e258cd
4 changed files with 168 additions and 0 deletions

View File

@ -0,0 +1,78 @@
///<reference path="../../headers/common.d.ts" />
var waitSeconds = 100;
var head = document.getElementsByTagName('head')[0];
// get all link tags in the page
var links = document.getElementsByTagName('link');
var linkHrefs = [];
for (var i = 0; i < links.length; i++) {
linkHrefs.push(links[i].href);
}
var isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
var webkitLoadCheck = function(link, callback) {
setTimeout(function() {
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if (sheet.href === link.href) {
return callback();
}
}
webkitLoadCheck(link, callback);
}, 10);
};
var noop = function() {};
var loadCSS = function(url) {
return new Promise(function(resolve, reject) {
var link = document.createElement('link');
var timeout = setTimeout(function() {
reject('Unable to load CSS');
}, waitSeconds * 1000);
var _callback = function(error) {
clearTimeout(timeout);
link.onload = link.onerror = noop;
setTimeout(function() {
if (error) {
reject(error);
} else {
resolve('');
}
}, 7);
};
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
if (!isWebkit) {
link.onload = function() { _callback(undefined); };
} else {
webkitLoadCheck(link, _callback);
}
link.onerror = function(evt: any) {
_callback(evt.error || new Error('Error loading CSS file.'));
};
head.appendChild(link);
});
};
export function fetch(load): any {
if (typeof window === 'undefined') {
return '';
}
// dont reload styles loaded in the head
for (var i = 0; i < linkHrefs.length; i++) {
if (load.address === linkHrefs[i]) {
return '';
}
}
return loadCSS(load.address);
}

View File

@ -43,6 +43,8 @@ System.config({
},
map: {
text: 'vendor/plugin-text/text.js',
css: 'app/core/utils/css_loader.js'
},
meta: {

72
public/vendor/plugin-css/css.js vendored Normal file
View File

@ -0,0 +1,72 @@
"use strict";
if (typeof window !== 'undefined') {
var waitSeconds = 100;
var head = document.getElementsByTagName('head')[0];
// get all link tags in the page
var links = document.getElementsByTagName('link');
var linkHrefs = [];
for (var i = 0; i < links.length; i++) {
linkHrefs.push(links[i].href);
}
var isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
var webkitLoadCheck = function(link, callback) {
setTimeout(function() {
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if (sheet.href === link.href) {
return callback();
}
}
webkitLoadCheck(link, callback);
}, 10);
};
var noop = function() {};
var loadCSS = function(url) {
return new Promise(function(resolve, reject) {
var timeout = setTimeout(function() {
reject('Unable to load CSS');
}, waitSeconds * 1000);
var _callback = function(error) {
clearTimeout(timeout);
link.onload = link.onerror = noop;
setTimeout(function() {
if (error) {
reject(error);
}
else {
resolve('');
}
}, 7);
};
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
if (!isWebkit) {
link.onload = function() {
_callback();
}
} else {
webkitLoadCheck(link, _callback);
}
link.onerror = function(event) {
_callback(event.error || new Error('Error loading CSS file.'));
};
head.appendChild(link);
});
};
exports.fetch = function(load) {
// dont reload styles loaded in the head
for (var i = 0; i < linkHrefs.length; i++)
if (load.address == linkHrefs[i])
return '';
return loadCSS(load.address);
};
}

16
public/vendor/plugin-text/text.js vendored Normal file
View File

@ -0,0 +1,16 @@
/*
Text plugin
*/
exports.translate = function(load) {
load.metadata.format = 'amd';
return 'def' + 'ine(function() {\nreturn "' + load.source
.replace(/(["\\])/g, '\\$1')
.replace(/[\f]/g, "\\f")
.replace(/[\b]/g, "\\b")
.replace(/[\n]/g, "\\n")
.replace(/[\t]/g, "\\t")
.replace(/[\r]/g, "\\r")
.replace(/[\u2028]/g, "\\u2028")
.replace(/[\u2029]/g, "\\u2029")
+ '";\n});';
}