Added ability to load HTML files into textures.

photonstorm · photonstorm · commit acea67742434 · 2017-04-04T14:54:22.000+01:00
diff --git a/v3/src/checksum.js b/v3/src/checksum.js
@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '7ca218d0-18d8-11e7-adaa-6d4ae57a90ac'
+build: '74477d20-1936-11e7-8c5f-29386239866f'
 };
 module.exports = CHECKSUM;
diff --git a/v3/src/loader/filetypes/HTMLFile.js b/v3/src/loader/filetypes/HTMLFile.js
@@ -0,0 +1,95 @@
+
+var CONST = require('../const');
+var File = require('../File');
+
+var HTMLFile = function (key, url, width, height, path, xhrSettings)
+{
+    if (width === undefined) { width = 512; }
+    if (height === undefined) { height = 512; }
+    if (path === undefined) { path = ''; }
+
+    if (!key)
+    {
+        throw new Error('Error calling \'Loader.html\' invalid key provided.');
+    }
+
+    if (!url)
+    {
+        url = path + key + '.html';
+    }
+    else
+    {
+        url = path.concat(url);
+    }
+
+    var config = {
+        width: width,
+        height: height
+    };
+
+    File.call(this, 'html', key, url, 'text', xhrSettings, config);
+};
+
+HTMLFile.prototype = Object.create(File.prototype);
+HTMLFile.prototype.constructor = HTMLFile;
+
+HTMLFile.prototype.onProcess = function (callback)
+{
+    this.state = CONST.FILE_PROCESSING;
+
+    var w = this.config.width;
+    var h = this.config.height;
+
+    var data = [];
+
+    data.push('<svg width="' + w + 'px" height="' + h + 'px" viewBox="0 0 ' + w + ' ' + h + '" xmlns="http://www.w3.org/2000/svg">');
+    data.push('<foreignObject width="100%" height="100%">');
+    data.push('<body xmlns="http://www.w3.org/1999/xhtml">');
+    data.push(this.xhrLoader.responseText);
+    data.push('</body>');
+    data.push('</foreignObject>');
+    data.push('</svg>');
+
+    var svg = [ data.join('\n') ];
+
+    try
+    {
+        var blob = new window.Blob(svg, { type: 'image/svg+xml;charset=utf-8' });
+    }
+    catch (e)
+    {
+        _this.state = CONST.FILE_ERRORED;
+
+        callback(_this);
+
+        return;
+    }
+
+    this.data = new Image();
+
+    this.data.crossOrigin = this.crossOrigin;
+
+    var _this = this;
+
+    this.data.onload = function ()
+    {
+        URL.revokeObjectURL(_this.data.src);
+
+        _this.onComplete();
+
+        callback(_this);
+    };
+
+    this.data.onerror = function ()
+    {
+        URL.revokeObjectURL(_this.data.src);
+
+        _this.state = CONST.FILE_ERRORED;
+
+        callback(_this);
+    };
+
+    this.data.src = URL.createObjectURL(blob);
+};
+
+module.exports = HTMLFile;
diff --git a/v3/src/state/systems/Loader.js b/v3/src/state/systems/Loader.js
@@ -12,6 +12,7 @@ var AtlasJSONFile = require('../../loader/filetypes/AtlasJSONFile');
 var BitmapFontFile = require('../../loader/filetypes/BitmapFontFile');
 var SpriteSheet = require('../../loader/filetypes/SpriteSheet');
 var SVGFile = require('../../loader/filetypes/SVGFile');
+var HTMLFile = require('../../loader/filetypes/HTMLFile');
 
 var ParseXMLBitmapFont = require('../../gameobjects/bitmaptext/ParseXMLBitmapFont');
 
@@ -130,6 +131,13 @@ Loader.prototype.spritesheet = function (key, url, config, xhrSettings)
     return this.addFile(file);
 };
 
+Loader.prototype.html = function (key, url, width, height, xhrSettings)
+{
+    var file = new HTMLFile(key, url, width, height, this.path, xhrSettings);
+
+    return this.addFile(file);
+};
+
 Loader.prototype.atlas = function (key, textureURL, atlasURL, textureXhrSettings, atlasXhrSettings)
 {
     //  Returns an object with two properties: 'texture' and 'data'
@@ -276,6 +284,7 @@ Loader.prototype.processCallback = function ()
         {
             case 'image':
             case 'svg':
+            case 'html':
                 textures.addImage(file.key, file.data);
                 break;
 
