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

torkelo · torkelo · commit dfe0e258cdf3 · 2016-02-10T11:54:17.000+01:00
diff --git a/public/app/core/utils/css_loader.ts b/public/app/core/utils/css_loader.ts
@@ -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);
+}
+
diff --git a/public/app/system.conf.js b/public/app/system.conf.js
@@ -43,6 +43,8 @@ System.config({
   },
 
   map: {
+    text: 'vendor/plugin-text/text.js',
+    css: 'app/core/utils/css_loader.js'
   },
 
   meta: {
diff --git a/public/vendor/plugin-css/css.js b/public/vendor/plugin-css/css.js
@@ -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);
+  };
+}
diff --git a/public/vendor/plugin-text/text.js b/public/vendor/plugin-text/text.js
@@ -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});';
+}
