PixiJS

Source: dependencies/resource-loader/lib/Resource.js

dependencies/resource-loader/lib/Resource.js

  1. //引入小程序补丁
  2. import { windowAlias, 
  3.     atob,
  4.     devicePixelRatio,
  5.     documentAlias,
  6.     Element,
  7.     Event,
  8.     EventTarget,
  9.     HTMLCanvasElement,
  10.     HTMLElement,
  11.     HTMLMediaElement,
  12.     HTMLVideoElement,
  13.     Image,
  14.     navigator,
  15.     Node,
  16.     requestAnimationFrame,
  17.     cancelAnimationFrame,
  18.     screen,
  19.     XMLHttpRequestAlias,
  20.     XMLHttpRequest
  21.  } from '@ali/pixi-miniprogram-adapter';
  23. 'use strict';
  26. exports.__esModule = true;
  27. exports.Resource = undefined;
  29. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  31. var _parseUri = require('parse-uri');
  33. var _parseUri2 = _interopRequireDefault(_parseUri);
  35. var _miniSignals = require('mini-signals');
  37. var _miniSignals2 = _interopRequireDefault(_miniSignals);
  39. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  41. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  43. // tests if CORS is supported in XHR, if not we need to use XDR
  44. var useXdr = !!(windowAlias.XDomainRequest && !('withCredentials' in new XMLHttpRequest()));
  45. var tempAnchor = null;
  47. // some status constants
  48. var STATUS_NONE = 0;
  49. var STATUS_OK = 200;
  50. var STATUS_EMPTY = 204;
  51. var STATUS_IE_BUG_EMPTY = 1223;
  52. var STATUS_TYPE_OK = 2;
  54. // noop
  55. function _noop() {} /* empty */
  57. /**
  58.  * Manages the state and loading of a resource and all child resources.
  59.  *
  60.  * @class
  61.  */
  63. var Resource = exports.Resource = function () {
  64.     /**
  65.      * Sets the load type to be used for a specific extension.
  66.      *
  67.      * @static
  68.      * @param {string} extname - The extension to set the type for, e.g. "png" or "fnt"
  69.      * @param {Resource.LOAD_TYPE} loadType - The load type to set it to.
  70.      */
  71.     Resource.setExtensionLoadType = function setExtensionLoadType(extname, loadType) {
  72.         setExtMap(Resource._loadTypeMap, extname, loadType);
  73.     };
  75.     /**
  76.      * Sets the load type to be used for a specific extension.
  77.      *
  78.      * @static
  79.      * @param {string} extname - The extension to set the type for, e.g. "png" or "fnt"
  80.      * @param {Resource.XHR_RESPONSE_TYPE} xhrType - The xhr type to set it to.
  81.      */
  84.     Resource.setExtensionXhrType = function setExtensionXhrType(extname, xhrType) {
  85.         setExtMap(Resource._xhrTypeMap, extname, xhrType);
  86.     };
  88.     /**
  89.      * @param {string} name - The name of the resource to load.
  90.      * @param {string|string[]} url - The url for this resource, for audio/video loads you can pass
  91.      *      an array of sources.
  92.      * @param {object} [options] - The options for the load.
  93.      * @param {string|boolean} [options.crossOrigin] - Is this request cross-origin? Default is to
  94.      *      determine automatically.
  95.      * @param {number} [options.timeout=0] - A timeout in milliseconds for the load. If the load takes
  96.      *      longer than this time it is cancelled and the load is considered a failure. If this value is
  97.      *      set to `0` then there is no explicit timeout.
  98.      * @param {Resource.LOAD_TYPE} [options.loadType=Resource.LOAD_TYPE.XHR] - How should this resource
  99.      *      be loaded?
  100.      * @param {Resource.XHR_RESPONSE_TYPE} [options.xhrType=Resource.XHR_RESPONSE_TYPE.DEFAULT] - How
  101.      *      should the data being loaded be interpreted when using XHR?
  102.      * @param {Resource.IMetadata} [options.metadata] - Extra configuration for middleware and the Resource object.
  103.      */
  106.     function Resource(name, url, options) {
  107.         _classCallCheck(this, Resource);
  109.         if (typeof name !== 'string' || typeof url !== 'string') {
  110.             throw new Error('Both name and url are required for constructing a resource.');
  111.         }
  113.         options = options || {};
  115.         /**
  116.          * The state flags of this resource.
  117.          *
  118.          * @private
  119.          * @member {number}
  120.          */
  121.         this._flags = 0;
  123.         // set data url flag, needs to be set early for some _determineX checks to work.
  124.         this._setFlag(Resource.STATUS_FLAGS.DATA_URL, url.indexOf('data:') === 0);
  126.         /**
  127.          * The name of this resource.
  128.          *
  129.          * @readonly
  130.          * @member {string}
  131.          */
  132.         this.name = name;
  134.         /**
  135.          * The url used to load this resource.
  136.          *
  137.          * @readonly
  138.          * @member {string}
  139.          */
  140.         this.url = url;
  142.         /**
  143.          * The extension used to load this resource.
  144.          *
  145.          * @readonly
  146.          * @member {string}
  147.          */
  148.         this.extension = this._getExtension();
  150.         /**
  151.          * The data that was loaded by the resource.
  152.          *
  153.          * @member {any}
  154.          */
  155.         this.data = null;
  157.         /**
  158.          * Is this request cross-origin? If unset, determined automatically.
  159.          *
  160.          * @member {string}
  161.          */
  162.         this.crossOrigin = options.crossOrigin === true ? 'anonymous' : options.crossOrigin;
  164.         /**
  165.          * A timeout in milliseconds for the load. If the load takes longer than this time
  166.          * it is cancelled and the load is considered a failure. If this value is set to `0`
  167.          * then there is no explicit timeout.
  168.          *
  169.          * @member {number}
  170.          */
  171.         this.timeout = options.timeout || 0;
  173.         /**
  174.          * The method of loading to use for this resource.
  175.          *
  176.          * @member {Resource.LOAD_TYPE}
  177.          */
  178.         this.loadType = options.loadType || this._determineLoadType();
  180.         /**
  181.          * The type used to load the resource via XHR. If unset, determined automatically.
  182.          *
  183.          * @member {string}
  184.          */
  185.         this.xhrType = options.xhrType;
  187.         /**
  188.          * Extra info for middleware, and controlling specifics about how the resource loads.
  189.          *
  190.          * Note that if you pass in a `loadElement`, the Resource class takes ownership of it.
  191.          * Meaning it will modify it as it sees fit.
  192.          *
  193.          * @member {Resource.IMetadata}
  194.          */
  195.         this.metadata = options.metadata || {};
  197.         /**
  198.          * The error that occurred while loading (if any).
  199.          *
  200.          * @readonly
  201.          * @member {Error}
  202.          */
  203.         this.error = null;
  205.         /**
  206.          * The XHR object that was used to load this resource. This is only set
  207.          * when `loadType` is `Resource.LOAD_TYPE.XHR`.
  208.          *
  209.          * @readonly
  210.          * @member {XMLHttpRequest}
  211.          */
  212.         this.xhr = null;
  214.         /**
  215.          * The child resources this resource owns.
  216.          *
  217.          * @readonly
  218.          * @member {Resource[]}
  219.          */
  220.         this.children = [];
  222.         /**
  223.          * The resource type.
  224.          *
  225.          * @readonly
  226.          * @member {Resource.TYPE}
  227.          */
  228.         this.type = Resource.TYPE.UNKNOWN;
  230.         /**
  231.          * The progress chunk owned by this resource.
  232.          *
  233.          * @readonly
  234.          * @member {number}
  235.          */
  236.         this.progressChunk = 0;
  238.         /**
  239.          * The `dequeue` method that will be used a storage place for the async queue dequeue method
  240.          * used privately by the loader.
  241.          *
  242.          * @private
  243.          * @member {function}
  244.          */
  245.         this._dequeue = _noop;
  247.         /**
  248.          * Used a storage place for the on load binding used privately by the loader.
  249.          *
  250.          * @private
  251.          * @member {function}
  252.          */
  253.         this._onLoadBinding = null;
  255.         /**
  256.          * The timer for element loads to check if they timeout.
  257.          *
  258.          * @private
  259.          * @member {number}
  260.          */
  261.         this._elementTimer = 0;
  263.         /**
  264.          * The `complete` function bound to this resource's context.
  265.          *
  266.          * @private
  267.          * @member {function}
  268.          */
  269.         this._boundComplete = this.complete.bind(this);
  271.         /**
  272.          * The `_onError` function bound to this resource's context.
  273.          *
  274.          * @private
  275.          * @member {function}
  276.          */
  277.         this._boundOnError = this._onError.bind(this);
  279.         /**
  280.          * The `_onProgress` function bound to this resource's context.
  281.          *
  282.          * @private
  283.          * @member {function}
  284.          */
  285.         this._boundOnProgress = this._onProgress.bind(this);
  287.         /**
  288.          * The `_onTimeout` function bound to this resource's context.
  289.          *
  290.          * @private
  291.          * @member {function}
  292.          */
  293.         this._boundOnTimeout = this._onTimeout.bind(this);
  295.         // xhr callbacks
  296.         this._boundXhrOnError = this._xhrOnError.bind(this);
  297.         this._boundXhrOnTimeout = this._xhrOnTimeout.bind(this);
  298.         this._boundXhrOnAbort = this._xhrOnAbort.bind(this);
  299.         this._boundXhrOnLoad = this._xhrOnLoad.bind(this);
  301.         /**
  302.          * Dispatched when the resource beings to load.
  303.          *
  304.          * The callback looks like {@link Resource.OnStartSignal}.
  305.          *
  306.          * @member {Signal<Resource.OnStartSignal>}
  307.          */
  308.         this.onStart = new _miniSignals2.default();
  310.         /**
  311.          * Dispatched each time progress of this resource load updates.
  312.          * Not all resources types and loader systems can support this event
  313.          * so sometimes it may not be available. If the resource
  314.          * is being loaded on a modern browser, using XHR, and the remote server
  315.          * properly sets Content-Length headers, then this will be available.
  316.          *
  317.          * The callback looks like {@link Resource.OnProgressSignal}.
  318.          *
  319.          * @member {Signal<Resource.OnProgressSignal>}
  320.          */
  321.         this.onProgress = new _miniSignals2.default();
  323.         /**
  324.          * Dispatched once this resource has loaded, if there was an error it will
  325.          * be in the `error` property.
  326.          *
  327.          * The callback looks like {@link Resource.OnCompleteSignal}.
  328.          *
  329.          * @member {Signal<Resource.OnCompleteSignal>}
  330.          */
  331.         this.onComplete = new _miniSignals2.default();
  333.         /**
  334.          * Dispatched after this resource has had all the *after* middleware run on it.
  335.          *
  336.          * The callback looks like {@link Resource.OnCompleteSignal}.
  337.          *
  338.          * @member {Signal<Resource.OnCompleteSignal>}
  339.          */
  340.         this.onAfterMiddleware = new _miniSignals2.default();
  341.     }
  343.     /**
  344.      * When the resource starts to load.
  345.      *
  346.      * @memberof Resource
  347.      * @callback OnStartSignal
  348.      * @param {Resource} resource - The resource that the event happened on.
  349.      */
  351.     /**
  352.      * When the resource reports loading progress.
  353.      *
  354.      * @memberof Resource
  355.      * @callback OnProgressSignal
  356.      * @param {Resource} resource - The resource that the event happened on.
  357.      * @param {number} percentage - The progress of the load in the range [0, 1].
  358.      */
  360.     /**
  361.      * When the resource finishes loading.
  362.      *
  363.      * @memberof Resource
  364.      * @callback OnCompleteSignal
  365.      * @param {Resource} resource - The resource that the event happened on.
  366.      */
  368.     /**
  369.      * @memberof Resource
  370.      * @typedef {object} IMetadata
  371.      * @property {HTMLImageElement|HTMLAudioElement|HTMLVideoElement} [loadElement=null] - The
  372.      *      element to use for loading, instead of creating one.
  373.      * @property {boolean} [skipSource=false] - Skips adding source(s) to the load element. This
  374.      *      is useful if you want to pass in a `loadElement` that you already added load sources to.
  375.      * @property {string|string[]} [mimeType] - The mime type to use for the source element
  376.      *      of a video/audio elment. If the urls are an array, you can pass this as an array as well
  377.      *      where each index is the mime type to use for the corresponding url index.
  378.      */
  380.     /**
  381.      * Stores whether or not this url is a data url.
  382.      *
  383.      * @readonly
  384.      * @member {boolean}
  385.      */
  388.     /**
  389.      * Marks the resource as complete.
  390.      *
  391.      */
  392.     Resource.prototype.complete = function complete() {
  393.         this._clearEvents();
  394.         this._finish();
  395.     };
  397.     /**
  398.      * Aborts the loading of this resource, with an optional message.
  399.      *
  400.      * @param {string} message - The message to use for the error
  401.      */
  404.     Resource.prototype.abort = function abort(message) {
  405.         // abort can be called multiple times, ignore subsequent calls.
  406.         if (this.error) {
  407.             return;
  408.         }
  410.         // store error
  411.         this.error = new Error(message);
  413.         // clear events before calling aborts
  414.         this._clearEvents();
  416.         // abort the actual loading
  417.         if (this.xhr) {
  418.             this.xhr.abort();
  419.         } else if (this.xdr) {
  420.             this.xdr.abort();
  421.         } else if (this.data) {
  422.             // single source
  423.             if (this.data.src) {
  424.                 this.data.src = Resource.EMPTY_GIF;
  425.             }
  426.             // multi-source
  427.             else {
  428.                     while (this.data.firstChild) {
  429.                         this.data.removeChild(this.data.firstChild);
  430.                     }
  431.                 }
  432.         }
  434.         // done now.
  435.         this._finish();
  436.     };
  438.     /**
  439.      * Kicks off loading of this resource. This method is asynchronous.
  440.      *
  441.      * @param {Resource.OnCompleteSignal} [cb] - Optional callback to call once the resource is loaded.
  442.      */
  445.     Resource.prototype.load = function load(cb) {
  446.         var _this = this;
  448.         if (this.isLoading) {
  449.             return;
  450.         }
  452.         if (this.isComplete) {
  453.             if (cb) {
  454.                 setTimeout(function () {
  455.                     return cb(_this);
  456.                 }, 1);
  457.             }
  459.             return;
  460.         } else if (cb) {
  461.             this.onComplete.once(cb);
  462.         }
  464.         this._setFlag(Resource.STATUS_FLAGS.LOADING, true);
  466.         this.onStart.dispatch(this);
  468.         // if unset, determine the value
  469.         if (this.crossOrigin === false || typeof this.crossOrigin !== 'string') {
  470.             this.crossOrigin = this._determineCrossOrigin(this.url);
  471.         }
  473.         switch (this.loadType) {
  474.             case Resource.LOAD_TYPE.IMAGE:
  475.                 this.type = Resource.TYPE.IMAGE;
  476.                 this._loadElement('image');
  477.                 break;
  479.             case Resource.LOAD_TYPE.AUDIO:
  480.                 this.type = Resource.TYPE.AUDIO;
  481.                 this._loadSourceElement('audio');
  482.                 break;
  484.             case Resource.LOAD_TYPE.VIDEO:
  485.                 this.type = Resource.TYPE.VIDEO;
  486.                 this._loadSourceElement('video');
  487.                 break;
  489.             case Resource.LOAD_TYPE.XHR:
  490.             /* falls through */
  491.             default:
  492.                 if (useXdr && this.crossOrigin) {
  493.                     this._loadXdr();
  494.                 } else {
  495.                     this._loadXhr();
  496.                 }
  497.                 break;
  498.         }
  499.     };
  501.     /**
  502.      * Checks if the flag is set.
  503.      *
  504.      * @private
  505.      * @param {number} flag - The flag to check.
  506.      * @return {boolean} True if the flag is set.
  507.      */
  510.     Resource.prototype._hasFlag = function _hasFlag(flag) {
  511.         return (this._flags & flag) !== 0;
  512.     };
  514.     /**
  515.      * (Un)Sets the flag.
  516.      *
  517.      * @private
  518.      * @param {number} flag - The flag to (un)set.
  519.      * @param {boolean} value - Whether to set or (un)set the flag.
  520.      */
  523.     Resource.prototype._setFlag = function _setFlag(flag, value) {
  524.         this._flags = value ? this._flags | flag : this._flags & ~flag;
  525.     };
  527.     /**
  528.      * Clears all the events from the underlying loading source.
  529.      *
  530.      * @private
  531.      */
  534.     Resource.prototype._clearEvents = function _clearEvents() {
  535.         clearTimeout(this._elementTimer);
  537.         if (this.data && this.data.removeEventListener) {
  538.             this.data.removeEventListener('error', this._boundOnError, false);
  539.             this.data.removeEventListener('load', this._boundComplete, false);
  540.             this.data.removeEventListener('progress', this._boundOnProgress, false);
  541.             this.data.removeEventListener('canplaythrough', this._boundComplete, false);
  542.         }
  544.         if (this.xhr) {
  545.             if (this.xhr.removeEventListener) {
  546.                 this.xhr.removeEventListener('error', this._boundXhrOnError, false);
  547.                 this.xhr.removeEventListener('timeout', this._boundXhrOnTimeout, false);
  548.                 this.xhr.removeEventListener('abort', this._boundXhrOnAbort, false);
  549.                 this.xhr.removeEventListener('progress', this._boundOnProgress, false);
  550.                 this.xhr.removeEventListener('load', this._boundXhrOnLoad, false);
  551.             } else {
  552.                 this.xhr.onerror = null;
  553.                 this.xhr.ontimeout = null;
  554.                 this.xhr.onprogress = null;
  555.                 this.xhr.onload = null;
  556.             }
  557.         }
  558.     };
  560.     /**
  561.      * Finalizes the load.
  562.      *
  563.      * @private
  564.      */
  567.     Resource.prototype._finish = function _finish() {
  568.         if (this.isComplete) {
  569.             throw new Error('Complete called again for an already completed resource.');
  570.         }
  572.         this._setFlag(Resource.STATUS_FLAGS.COMPLETE, true);
  573.         this._setFlag(Resource.STATUS_FLAGS.LOADING, false);
  575.         this.onComplete.dispatch(this);
  576.     };
  578.     /**
  579.      * Loads this resources using an element that has a single source,
  580.      * like an HTMLImageElement.
  581.      *
  582.      * @private
  583.      * @param {string} type - The type of element to use.
  584.      */
  587.     Resource.prototype._loadElement = function _loadElement(type) {
  588.         // TODO miniprogram 在小程序宿主下，如果读取路径问本地文件，则通过my.FileSystemManager.readFile实现
  589.         const url = this.url;
  590.         let isLocalFile = false;
  591.         if( typeof url === 'string'){
  592.             let reg = /(http|https):\/\/([\w.]+\/?)\S*/ig;
  593.             isLocalFile = !url.match(reg);
  594.         }
  595.         if (this.metadata.loadElement) {
  596.             this.data = this.metadata.loadElement;
  597.         } else if (type === 'image' && typeof windowAlias.Image !== 'undefined') {
  598.             // if(isLocalFile){
  599.             //     // TODO miniprogram 在小程序宿主下，如果读取路径问本地文
  600.             //     // this.data = my.FileSystemManager.readFile({
  601.             //     //     filePath:url,
  602.             //     //     success:(res)=>{
  603.             //     //         //res.data	string/ArrayBuffer	文件内容
  604.             //     //         // dataType	String	如果未传入dataType，则默认以arrayBuffer读取数据
  605.             //     //         this._boundComplete.call(this,res);
  606.             //     //     },
  607.             //     //     fail:this._boundOnError
  608.             //     // });
  609.             //     console.warn('当前版本暂不支持读取本地文件');
  610.             //     // TODO 后期去掉 为了避免报错 暂时用Image代替
  611.             //     this.data = new Image();
  612.             // }else{
  613.             //     this.data = new Image();
  614.             // }
  615.             this.data = new Image();
  616.             
  617.         } else {
  618.             this.data = documentAlias.createElement(type);
  619.         }
  621.         if (this.crossOrigin) {
  622.             this.data.crossOrigin = this.crossOrigin;
  623.         }
  624.         // miniprogram 上Image只有onLoad和 onerror,且 onload和onerro需要放在src设置之前。
  625.         this.data.onload = this._boundComplete;
  626.         this.data.onerror = this._boundOnError;
  627.         if (!this.metadata.skipSource) {
  628.             this.data.src = this.url;
  629.         }
  630.        
  631.         // this.data.addEventListener('error', this._boundOnError, false);
  632.         // this.data.addEventListener('load', this._boundComplete, false);
  633.         // this.data.addEventListener('progress', this._boundOnProgress, false);
  635.         if (this.timeout) {
  636.             this._elementTimer = setTimeout(this._boundOnTimeout, this.timeout);
  637.         }
  638.     };
  640.     /**
  641.      * Loads this resources using an element that has multiple sources,
  642.      * like an HTMLAudioElement or HTMLVideoElement.
  643.      *
  644.      * @private
  645.      * @param {string} type - The type of element to use.
  646.      */
  649.     Resource.prototype._loadSourceElement = function _loadSourceElement(type) {
  650.         if (this.metadata.loadElement) {
  651.             this.data = this.metadata.loadElement;
  652.         } else if (type === 'audio' && typeof windowAlias.Audio !== 'undefined') {
  653.             this.data = new Audio();
  654.         } else {
  655.             this.data = documentAlias.createElement(type);
  656.         }
  658.         if (this.data === null) {
  659.             this.abort('Unsupported element: ' + type);
  661.             return;
  662.         }
  664.         if (this.crossOrigin) {
  665.             this.data.crossOrigin = this.crossOrigin;
  666.         }
  668.         if (!this.metadata.skipSource) {
  669.             // support for CocoonJS Canvas+ runtime, lacks documentAlias.createElement('source')
  670.             if (navigator.isCocoonJS) {
  671.                 this.data.src = Array.isArray(this.url) ? this.url[0] : this.url;
  672.             } else if (Array.isArray(this.url)) {
  673.                 var mimeTypes = this.metadata.mimeType;
  675.                 for (var i = 0; i < this.url.length; ++i) {
  676.                     this.data.appendChild(this._createSource(type, this.url[i], Array.isArray(mimeTypes) ? mimeTypes[i] : mimeTypes));
  677.                 }
  678.             } else {
  679.                 var _mimeTypes = this.metadata.mimeType;
  681.                 this.data.appendChild(this._createSource(type, this.url, Array.isArray(_mimeTypes) ? _mimeTypes[0] : _mimeTypes));
  682.             }
  683.         }
  685.         this.data.addEventListener('error', this._boundOnError, false);
  686.         this.data.addEventListener('load', this._boundComplete, false);
  687.         this.data.addEventListener('progress', this._boundOnProgress, false);
  688.         this.data.addEventListener('canplaythrough', this._boundComplete, false);
  690.         this.data.load();
  692.         if (this.timeout) {
  693.             this._elementTimer = setTimeout(this._boundOnTimeout, this.timeout);
  694.         }
  695.     };
  697.     /**
  698.      * Loads this resources using an XMLHttpRequest.
  699.      *
  700.      * @private
  701.      */
  704.     Resource.prototype._loadXhr = function _loadXhr() {
  705.         // if unset, determine the value
  706.         if (typeof this.xhrType !== 'string') {
  707.             this.xhrType = this._determineXhrType();
  708.         }
  709.         // miniprogram 使用 XMLHttpRequestAlias 代理 XMLHttpRequest
  710.         var xhr = this.xhr = new XMLHttpRequestAlias();
  712.         // set the request type and url
  713.         xhr.open('GET', this.url, true);
  715.         xhr.timeout = this.timeout;
  717.         // load json as text and parse it ourselves. We do this because some browsers
  718.         // *cough* safari *cough* can't deal with it.
  719.         if (this.xhrType === Resource.XHR_RESPONSE_TYPE.JSON || this.xhrType === Resource.XHR_RESPONSE_TYPE.DOCUMENT) {
  720.             xhr.responseType = Resource.XHR_RESPONSE_TYPE.TEXT;
  721.         } else {
  722.             xhr.responseType = this.xhrType;
  723.         }
  725.         xhr.addEventListener('error', this._boundXhrOnError, false);
  726.         xhr.addEventListener('timeout', this._boundXhrOnTimeout, false);
  727.         xhr.addEventListener('abort', this._boundXhrOnAbort, false);
  728.         xhr.addEventListener('progress', this._boundOnProgress, false);
  729.         xhr.addEventListener('load', this._boundXhrOnLoad, false);
  731.         xhr.send();
  732.     };
  734.     /**
  735.      * Loads this resources using an XDomainRequest. This is here because we need to support IE9 (gross).
  736.      *
  737.      * @private
  738.      */
  741.     Resource.prototype._loadXdr = function _loadXdr() {
  742.         // if unset, determine the value
  743.         if (typeof this.xhrType !== 'string') {
  744.             this.xhrType = this._determineXhrType();
  745.         }
  747.         var xdr = this.xhr = new XDomainRequest(); // eslint-disable-line no-undef
  749.         // XDomainRequest has a few quirks. Occasionally it will abort requests
  750.         // A way to avoid this is to make sure ALL callbacks are set even if not used
  751.         // More info here: http://stackoverflow.com/questions/15786966/xdomainrequest-aborts-post-on-ie-9
  752.         xdr.timeout = this.timeout || 5000; // XDR needs a timeout value or it breaks in IE9
  754.         xdr.onerror = this._boundXhrOnError;
  755.         xdr.ontimeout = this._boundXhrOnTimeout;
  756.         xdr.onprogress = this._boundOnProgress;
  757.         xdr.onload = this._boundXhrOnLoad;
  759.         xdr.open('GET', this.url, true);
  761.         // Note: The xdr.send() call is wrapped in a timeout to prevent an
  762.         // issue with the interface where some requests are lost if multiple
  763.         // XDomainRequests are being sent at the same time.
  764.         // Some info here: https://github.com/photonstorm/phaser/issues/1248
  765.         setTimeout(function () {
  766.             return xdr.send();
  767.         }, 1);
  768.     };
  770.     /**
  771.      * Creates a source used in loading via an element.
  772.      *
  773.      * @private
  774.      * @param {string} type - The element type (video or audio).
  775.      * @param {string} url - The source URL to load from.
  776.      * @param {string} [mime] - The mime type of the video
  777.      * @return {HTMLSourceElement} The source element.
  778.      */
  781.     Resource.prototype._createSource = function _createSource(type, url, mime) {
  782.         if (!mime) {
  783.             mime = type + '/' + this._getExtension(url);
  784.         }
  786.         var source = documentAlias.createElement('source');
  788.         source.src = url;
  789.         source.type = mime;
  791.         return source;
  792.     };
  794.     /**
  795.      * Called if a load errors out.
  796.      *
  797.      * @param {Event} event - The error event from the element that emits it.
  798.      * @private
  799.      */
  802.     Resource.prototype._onError = function _onError(event) {
  803.         this.abort('Failed to load element using: ' + event.target.nodeName);
  804.     };
  806.     /**
  807.      * Called if a load progress event fires for an element or xhr/xdr.
  808.      *
  809.      * @private
  810.      * @param {XMLHttpRequestProgressEvent|Event} event - Progress event.
  811.      */
  814.     Resource.prototype._onProgress = function _onProgress(event) {
  815.         if (event && event.lengthComputable) {
  816.             this.onProgress.dispatch(this, event.loaded / event.total);
  817.         }
  818.     };
  820.     /**
  821.      * Called if a timeout event fires for an element.
  822.      *
  823.      * @private
  824.      */
  827.     Resource.prototype._onTimeout = function _onTimeout() {
  828.         this.abort('Load timed out.');
  829.     };
  831.     /**
  832.      * Called if an error event fires for xhr/xdr.
  833.      *
  834.      * @private
  835.      */
  838.     Resource.prototype._xhrOnError = function _xhrOnError() {
  839.         var xhr = this.xhr;
  841.         this.abort(reqType(xhr) + ' Request failed. Status: ' + xhr.status + ', text: "' + xhr.statusText + '"');
  842.     };
  844.     /**
  845.      * Called if an error event fires for xhr/xdr.
  846.      *
  847.      * @private
  848.      */
  851.     Resource.prototype._xhrOnTimeout = function _xhrOnTimeout() {
  852.         var xhr = this.xhr;
  854.         this.abort(reqType(xhr) + ' Request timed out.');
  855.     };
  857.     /**
  858.      * Called if an abort event fires for xhr/xdr.
  859.      *
  860.      * @private
  861.      */
  864.     Resource.prototype._xhrOnAbort = function _xhrOnAbort() {
  865.         var xhr = this.xhr;
  867.         this.abort(reqType(xhr) + ' Request was aborted by the user.');
  868.     };
  870.     /**
  871.      * Called when data successfully loads from an xhr/xdr request.
  872.      *
  873.      * @private
  874.      * @param {XMLHttpRequestLoadEvent|Event} event - Load event
  875.      */
  878.     Resource.prototype._xhrOnLoad = function _xhrOnLoad() {
  879.         var xhr = this.xhr;
  880.         var text = '';
  881.         var status = typeof xhr.status === 'undefined' ? STATUS_OK : xhr.status; // XDR has no `.status`, assume 200.
  883.         // responseText is accessible only if responseType is '' or 'text' and on older browsers
  884.         if (xhr.responseType === '' || xhr.responseType === 'text' || typeof xhr.responseType === 'undefined') {
  885.             text = xhr.responseText;
  886.         }
  888.         // status can be 0 when using the `file://` protocol so we also check if a response is set.
  889.         // If it has a response, we assume 200; otherwise a 0 status code with no contents is an aborted request.
  890.         if (status === STATUS_NONE && (text.length > 0 || xhr.responseType === Resource.XHR_RESPONSE_TYPE.BUFFER)) {
  891.             status = STATUS_OK;
  892.         }
  893.         // handle IE9 bug: http://stackoverflow.com/questions/10046972/msie-returns-status-code-of-1223-for-ajax-request
  894.         else if (status === STATUS_IE_BUG_EMPTY) {
  895.                 status = STATUS_EMPTY;
  896.             }
  898.         var statusType = status / 100 | 0;
  900.         if (statusType === STATUS_TYPE_OK) {
  901.             // if text, just return it
  902.             if (this.xhrType === Resource.XHR_RESPONSE_TYPE.TEXT) {
  903.                 this.data = text;
  904.                 this.type = Resource.TYPE.TEXT;
  905.             }
  906.             // if json, parse into json object
  907.             else if (this.xhrType === Resource.XHR_RESPONSE_TYPE.JSON) {
  908.                     try {
  909.                         this.data = JSON.parse(text);
  910.                         this.type = Resource.TYPE.JSON;
  911.                     } catch (e) {
  912.                         this.abort('Error trying to parse loaded json: ' + e);
  914.                         return;
  915.                     }
  916.                 }
  917.                 // if xml, parse into an xml document or div element
  918.                 else if (this.xhrType === Resource.XHR_RESPONSE_TYPE.DOCUMENT) {
  919.                         try {
  920.                             if (windowAlias.DOMParser) {
  921.                                 var domparser = new DOMParser();
  923.                                 this.data = domparser.parseFromString(text, 'text/xml');
  924.                             } else {
  925.                                 var div = documentAlias.createElement('div');
  927.                                 div.innerHTML = text;
  929.                                 this.data = div;
  930.                             }
  932.                             this.type = Resource.TYPE.XML;
  933.                         } catch (e) {
  934.                             this.abort('Error trying to parse loaded xml: ' + e);
  936.                             return;
  937.                         }
  938.                     }
  939.                     // other types just return the response
  940.                     else {
  941.                             this.data = xhr.response || text;
  942.                         }
  943.         } else {
  944.             this.abort('[' + xhr.status + '] ' + xhr.statusText + ': ' + xhr.responseURL);
  946.             return;
  947.         }
  949.         this.complete();
  950.     };
  952.     /**
  953.      * Sets the `crossOrigin` property for this resource based on if the url
  954.      * for this resource is cross-origin. If crossOrigin was manually set, this
  955.      * function does nothing.
  956.      *
  957.      * @private
  958.      * @param {string} url - The url to test.
  959.      * @param {object} [loc=windowAlias.location] - The location object to test against.
  960.      * @return {string} The crossOrigin value to use (or empty string for none).
  961.      */
  964.     Resource.prototype._determineCrossOrigin = function _determineCrossOrigin(url, loc) {
  965.         // data: and javascript: urls are considered same-origin
  966.         if (url.indexOf('data:') === 0) {
  967.             return '';
  968.         }
  970.         // A sandboxed iframe without the 'allow-same-origin' attribute will have a special
  971.         // origin designed not to match windowAlias.location.origin, and will always require
  972.         // crossOrigin requests regardless of whether the location matches.
  973.         if (windowAlias.origin !== windowAlias.location.origin) {
  974.             return 'anonymous';
  975.         }
  977.         // default is windowAlias.location
  978.         loc = loc || windowAlias.location;
  980.         if (!tempAnchor) {
  981.             tempAnchor = documentAlias.createElement('a');
  982.         }
  984.         // let the browser determine the full href for the url of this resource and then
  985.         // parse with the node url lib, we can't use the properties of the anchor element
  986.         // because they don't work in IE9 :(
  987.         tempAnchor.href = url;
  988.         url = (0, _parseUri2.default)(tempAnchor.href, { strictMode: true });
  990.         var samePort = !url.port && loc.port === '' || url.port === loc.port;
  991.         var protocol = url.protocol ? url.protocol + ':' : '';
  993.         // if cross origin
  994.         if (url.host !== loc.hostname || !samePort || protocol !== loc.protocol) {
  995.             return 'anonymous';
  996.         }
  998.         return '';
  999.     };
  1001.     /**
  1002.      * Determines the responseType of an XHR request based on the extension of the
  1003.      * resource being loaded.
  1004.      *
  1005.      * @private
  1006.      * @return {Resource.XHR_RESPONSE_TYPE} The responseType to use.
  1007.      */
  1010.     Resource.prototype._determineXhrType = function _determineXhrType() {
  1011.         return Resource._xhrTypeMap[this.extension] || Resource.XHR_RESPONSE_TYPE.TEXT;
  1012.     };
  1014.     /**
  1015.      * Determines the loadType of a resource based on the extension of the
  1016.      * resource being loaded.
  1017.      *
  1018.      * @private
  1019.      * @return {Resource.LOAD_TYPE} The loadType to use.
  1020.      */
  1023.     Resource.prototype._determineLoadType = function _determineLoadType() {
  1024.         return Resource._loadTypeMap[this.extension] || Resource.LOAD_TYPE.XHR;
  1025.     };
  1027.     /**
  1028.      * Extracts the extension (sans '.') of the file being loaded by the resource.
  1029.      *
  1030.      * @private
  1031.      * @return {string} The extension.
  1032.      */
  1035.     Resource.prototype._getExtension = function _getExtension() {
  1036.         var url = this.url;
  1037.         var ext = '';
  1039.         if (this.isDataUrl) {
  1040.             var slashIndex = url.indexOf('/');
  1042.             ext = url.substring(slashIndex + 1, url.indexOf(';', slashIndex));
  1043.         } else {
  1044.             var queryStart = url.indexOf('?');
  1045.             var hashStart = url.indexOf('#');
  1046.             var index = Math.min(queryStart > -1 ? queryStart : url.length, hashStart > -1 ? hashStart : url.length);
  1048.             url = url.substring(0, index);
  1049.             ext = url.substring(url.lastIndexOf('.') + 1);
  1050.         }
  1052.         return ext.toLowerCase();
  1053.     };
  1055.     /**
  1056.      * Determines the mime type of an XHR request based on the responseType of
  1057.      * resource being loaded.
  1058.      *
  1059.      * @private
  1060.      * @param {Resource.XHR_RESPONSE_TYPE} type - The type to get a mime type for.
  1061.      * @return {string} The mime type to use.
  1062.      */
  1065.     Resource.prototype._getMimeFromXhrType = function _getMimeFromXhrType(type) {
  1066.         switch (type) {
  1067.             case Resource.XHR_RESPONSE_TYPE.BUFFER:
  1068.                 return 'application/octet-binary';
  1070.             case Resource.XHR_RESPONSE_TYPE.BLOB:
  1071.                 return 'application/blob';
  1073.             case Resource.XHR_RESPONSE_TYPE.DOCUMENT:
  1074.                 return 'application/xml';
  1076.             case Resource.XHR_RESPONSE_TYPE.JSON:
  1077.                 return 'application/json';
  1079.             case Resource.XHR_RESPONSE_TYPE.DEFAULT:
  1080.             case Resource.XHR_RESPONSE_TYPE.TEXT:
  1081.             /* falls through */
  1082.             default:
  1083.                 return 'text/plain';
  1084.         }
  1085.     };
  1087.     _createClass(Resource, [{
  1088.         key: 'isDataUrl',
  1089.         get: function get() {
  1090.             return this._hasFlag(Resource.STATUS_FLAGS.DATA_URL);
  1091.         }
  1093.         /**
  1094.          * Describes if this resource has finished loading. Is true when the resource has completely
  1095.          * loaded.
  1096.          *
  1097.          * @readonly
  1098.          * @member {boolean}
  1099.          */
  1101.     }, {
  1102.         key: 'isComplete',
  1103.         get: function get() {
  1104.             return this._hasFlag(Resource.STATUS_FLAGS.COMPLETE);
  1105.         }
  1107.         /**
  1108.          * Describes if this resource is currently loading. Is true when the resource starts loading,
  1109.          * and is false again when complete.
  1110.          *
  1111.          * @readonly
  1112.          * @member {boolean}
  1113.          */
  1115.     }, {
  1116.         key: 'isLoading',
  1117.         get: function get() {
  1118.             return this._hasFlag(Resource.STATUS_FLAGS.LOADING);
  1119.         }
  1120.     }]);
  1122.     return Resource;
  1123. }();
  1125. /**
  1126.  * The types of resources a resource could represent.
  1127.  *
  1128.  * @static
  1129.  * @readonly
  1130.  * @enum {number}
  1131.  */
  1134. Resource.STATUS_FLAGS = {
  1135.     NONE: 0,
  1136.     DATA_URL: 1 << 0,
  1137.     COMPLETE: 1 << 1,
  1138.     LOADING: 1 << 2
  1139. };
  1141. /**
  1142.  * The types of resources a resource could represent.
  1143.  *
  1144.  * @static
  1145.  * @readonly
  1146.  * @enum {number}
  1147.  */
  1148. Resource.TYPE = {
  1149.     UNKNOWN: 0,
  1150.     JSON: 1,
  1151.     XML: 2,
  1152.     IMAGE: 3,
  1153.     AUDIO: 4,
  1154.     VIDEO: 5,
  1155.     TEXT: 6
  1156. };
  1158. /**
  1159.  * The types of loading a resource can use.
  1160.  *
  1161.  * @static
  1162.  * @readonly
  1163.  * @enum {number}
  1164.  */
  1165. Resource.LOAD_TYPE = {
  1166.     /** Uses XMLHttpRequest to load the resource. */
  1167.     XHR: 1,
  1168.     /** Uses an `Image` object to load the resource. */
  1169.     IMAGE: 2,
  1170.     /** Uses an `Audio` object to load the resource. */
  1171.     AUDIO: 3,
  1172.     /** Uses a `Video` object to load the resource. */
  1173.     VIDEO: 4
  1174. };
  1176. /**
  1177.  * The XHR ready states, used internally.
  1178.  *
  1179.  * @static
  1180.  * @readonly
  1181.  * @enum {string}
  1182.  */
  1183. Resource.XHR_RESPONSE_TYPE = {
  1184.     /** string */
  1185.     DEFAULT: 'text',
  1186.     /** ArrayBuffer */
  1187.     BUFFER: 'arraybuffer',
  1188.     /** Blob */
  1189.     BLOB: 'blob',
  1190.     /** Document */
  1191.     DOCUMENT: 'document',
  1192.     /** Object */
  1193.     JSON: 'json',
  1194.     /** String */
  1195.     TEXT: 'text'
  1196. };
  1198. Resource._loadTypeMap = {
  1199.     // images
  1200.     gif: Resource.LOAD_TYPE.IMAGE,
  1201.     png: Resource.LOAD_TYPE.IMAGE,
  1202.     bmp: Resource.LOAD_TYPE.IMAGE,
  1203.     jpg: Resource.LOAD_TYPE.IMAGE,
  1204.     jpeg: Resource.LOAD_TYPE.IMAGE,
  1205.     tif: Resource.LOAD_TYPE.IMAGE,
  1206.     tiff: Resource.LOAD_TYPE.IMAGE,
  1207.     webp: Resource.LOAD_TYPE.IMAGE,
  1208.     tga: Resource.LOAD_TYPE.IMAGE,
  1209.     svg: Resource.LOAD_TYPE.IMAGE,
  1210.     'svg+xml': Resource.LOAD_TYPE.IMAGE, // for SVG data urls
  1212.     // audio
  1213.     mp3: Resource.LOAD_TYPE.AUDIO,
  1214.     ogg: Resource.LOAD_TYPE.AUDIO,
  1215.     wav: Resource.LOAD_TYPE.AUDIO,
  1217.     // videos
  1218.     mp4: Resource.LOAD_TYPE.VIDEO,
  1219.     webm: Resource.LOAD_TYPE.VIDEO
  1220. };
  1222. Resource._xhrTypeMap = {
  1223.     // xml
  1224.     xhtml: Resource.XHR_RESPONSE_TYPE.DOCUMENT,
  1225.     html: Resource.XHR_RESPONSE_TYPE.DOCUMENT,
  1226.     htm: Resource.XHR_RESPONSE_TYPE.DOCUMENT,
  1227.     xml: Resource.XHR_RESPONSE_TYPE.DOCUMENT,
  1228.     tmx: Resource.XHR_RESPONSE_TYPE.DOCUMENT,
  1229.     svg: Resource.XHR_RESPONSE_TYPE.DOCUMENT,
  1231.     // This was added to handle Tiled Tileset XML, but .tsx is also a TypeScript React Component.
  1232.     // Since it is way less likely for people to be loading TypeScript files instead of Tiled files,
  1233.     // this should probably be fine.
  1234.     tsx: Resource.XHR_RESPONSE_TYPE.DOCUMENT,
  1236.     // images
  1237.     gif: Resource.XHR_RESPONSE_TYPE.BLOB,
  1238.     png: Resource.XHR_RESPONSE_TYPE.BLOB,
  1239.     bmp: Resource.XHR_RESPONSE_TYPE.BLOB,
  1240.     jpg: Resource.XHR_RESPONSE_TYPE.BLOB,
  1241.     jpeg: Resource.XHR_RESPONSE_TYPE.BLOB,
  1242.     tif: Resource.XHR_RESPONSE_TYPE.BLOB,
  1243.     tiff: Resource.XHR_RESPONSE_TYPE.BLOB,
  1244.     webp: Resource.XHR_RESPONSE_TYPE.BLOB,
  1245.     tga: Resource.XHR_RESPONSE_TYPE.BLOB,
  1247.     // json
  1248.     json: Resource.XHR_RESPONSE_TYPE.JSON,
  1250.     // text
  1251.     text: Resource.XHR_RESPONSE_TYPE.TEXT,
  1252.     txt: Resource.XHR_RESPONSE_TYPE.TEXT,
  1254.     // fonts
  1255.     ttf: Resource.XHR_RESPONSE_TYPE.BUFFER,
  1256.     otf: Resource.XHR_RESPONSE_TYPE.BUFFER
  1257. };
  1259. // We can't set the `src` attribute to empty string, so on abort we set it to this 1px transparent gif
  1260. Resource.EMPTY_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
  1262. /**
  1263.  * Quick helper to set a value on one of the extension maps. Ensures there is no
  1264.  * dot at the start of the extension.
  1265.  *
  1266.  * @ignore
  1267.  * @param {object} map - The map to set on.
  1268.  * @param {string} extname - The extension (or key) to set.
  1269.  * @param {number} val - The value to set.
  1270.  */
  1271. function setExtMap(map, extname, val) {
  1272.     if (extname && extname.indexOf('.') === 0) {
  1273.         extname = extname.substring(1);
  1274.     }
  1276.     if (!extname) {
  1277.         return;
  1278.     }
  1280.     map[extname] = val;
  1281. }
  1283. /**
  1284.  * Quick helper to get string xhr type.
  1285.  *
  1286.  * @ignore
  1287.  * @param {XMLHttpRequest|XDomainRequest} xhr - The request to check.
  1288.  * @return {string} The type.
  1289.  */
  1290. function reqType(xhr) {
  1291.     return xhr.toString().replace('object ', '');
  1292. }
  1294. // Backwards compat
  1295. if (typeof module !== 'undefined') {
  1296.     module.exports.default = Resource; // eslint-disable-line no-undef
  1297. }
  1298. //# sourceMappingURL=Resource.js.map