Skip to content

Commit 1afa75d

Browse files
photonstormphotonstorm
committed
Updated Loader, added ArrayBuffer to Base64, added GetURL. You can now load a file on its own, without using a Loader instance at all.
1 parent f1a3e0b commit 1afa75d

9 files changed

Lines changed: 190 additions & 267 deletions

File tree

‎v3/src/boot/index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
module.exports = {
22

33
// Doing this makes it available under Phaser.Game
4-
Game: require('./Game')
4+
Game: require('./Game'),
5+
6+
Loader: {
7+
ImageFile: require('../loader/filetypes/ImageFile')
8+
}
59

610
};

‎v3/src/checksum.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
var CHECKSUM = {
2-
build: '148af8e0-b71f-11e6-a6c9-8d480325d9a8'
2+
build: 'e8302980-b761-11e6-808f-8dff22c5f4af'
33
};
44
module.exports = CHECKSUM;

‎v3/src/loader/BaseLoader.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ BaseLoader.prototype = {
146146
file.crossOrigin = this.crossOrigin;
147147
}
148148

149-
file.load(this.nextFile, this.baseURL);
149+
file.load(this.nextFile.bind(this), this.baseURL);
150150
},
151151

152152
nextFile: function (previousFile, success)
@@ -184,7 +184,9 @@ BaseLoader.prototype = {
184184

185185
this.state = 'PROCESSING';
186186

187-
this.storage.clear();
187+
var storage = this.storage;
188+
189+
storage.clear();
188190

189191
// This could be Promise based as well, allowing for async processing
190192

@@ -201,14 +203,14 @@ BaseLoader.prototype = {
201203

202204
file.onComplete();
203205

204-
this.storage.add(file);
206+
storage.add(file);
205207
});
206208

207209
this.list.clear();
208210
this.inflight.clear();
209211
this.queue.clear();
210212

211-
console.log('Loader Complete. Loaded:', this.storage.size, 'Failed:', this.failed.size);
213+
console.log('Loader Complete. Loaded:', storage.size, 'Failed:', this.failed.size);
212214

213215
console.log('BaseLoader COMPLETE');
214216

‎v3/src/loader/File.js‎

Lines changed: 80 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,115 @@
1-
// import XHRLoader from 'loader/XHRLoader.js';
2-
// import XHRSettings from 'loader/XHRSettings.js';
1+
var GetURL = require('./GetURL');
2+
var FILE_CONST = require('./const');
3+
var XHRLoader = require('./XHRLoader');
4+
var XHRSettings = require('./XHRSettings');
35

4-
5-
6-
// Our base File object (from which all File Types extend)
7-
8-
// key = user level file key (can be filename or other string based value)
9-
// url = the URL to load the file from, doesn't include baseURL or Path (which are both set by the Loader)
10-
// type = a user-level value that can control which cache the file is added to
11-
12-
var File = function (key, url, type)
6+
var File = function (type, key, url, responseType)
137
{
14-
if (!key)
15-
{
16-
console.warn('Invalid File key');
17-
return;
18-
}
19-
20-
return {
21-
22-
key: key,
23-
24-
url: url,
25-
26-
// Both of these are overridden by the BaseLoader (if being used)
27-
path: '',
28-
src: url,
29-
30-
tag: '', // Tag this file, this is a non-unique string. For example you could tag a collection of files as 'level1', or 'mainmenu'.
31-
32-
type: type, // the file type, i.e. 'image', 'json', etc which can be used to control which cache it gets added to
33-
34-
state: PENDING,
35-
36-
// Multipart file? (i.e. an atlas and its json)
37-
multipart: undefined,
38-
linkFile: undefined,
8+
// file type (image, json, etc) for sorting within the Loader
9+
this.type = type;
3910

40-
// The actual processed file data
41-
data: undefined,
11+
// unique cache key (unique within its file type)
12+
this.key = key;
4213

43-
// For CORs based loading.
44-
// If this is undefined then the File will check BaseLoader.crossOrigin and use that (if set)
45-
crossOrigin: undefined,
14+
// The URL of the file, not including baseURL
15+
this.url = url;
4616

47-
// Optionally set by the Promise returned from BaseLoader.addFile.
48-
resolve: undefined,
49-
reject: undefined,
17+
// Set when the Loader calls 'load' on this file
18+
this.src = '';
5019

51-
// maybe you have to set it in the Promise?
52-
processCallback: undefined,
20+
this.xhrSettings = XHRSettings(responseType);
5321

54-
// xhr specific settings (ignored by TagLoaded files)
55-
xhr: XHRSettings('text'),
22+
this.xhrLoader = null;
5623

57-
onStateChange: function (value) {
24+
this.state = FILE_CONST.PENDING;
5825

59-
// console.log('onStateChange', this.url, 'from', this.state, 'to', value);
26+
// Set by onProgress
27+
this.bytesTotal = 0;
28+
this.bytesLoaded = -1;
29+
this.percentComplete = -1;
6030

61-
if (this.state !== value)
62-
{
63-
this.state = value;
31+
// For CORs based loading.
32+
// If this is undefined then the File will check BaseLoader.crossOrigin and use that (if set)
33+
this.crossOrigin = undefined;
6434

65-
// Loaded AND Processed
66-
if (value === COMPLETE)
67-
{
68-
// Part of a multipart load?
69-
if (this.multipart)
70-
{
71-
// Has the linked file loaded too?
72-
if (this.linkFile.state === COMPLETE && this.multipart.resolve)
73-
{
74-
// Send the Promise for the multipart file
75-
this.multipart.resolve(this.multipart);
76-
}
77-
}
35+
// The actual processed file data
36+
this.data = undefined;
7837

79-
// Send the Promise for this file
80-
if (this.resolve)
81-
{
82-
this.resolve(this);
83-
}
84-
}
85-
else if (value === FAILED)
86-
{
87-
// Part of a multipart load?
88-
if (this.multipart)
89-
{
90-
if (this.multipart.reject)
91-
{
92-
// Send the Promise for the multipart file
93-
this.multipart.reject(this.multipart, error);
94-
}
95-
}
38+
// Multipart file? (i.e. an atlas and its json)
39+
this.multipart = undefined;
40+
this.linkFile = undefined;
9641

97-
// Send the Promise for this file
98-
if (this.reject)
99-
{
100-
this.reject(this);
101-
}
102-
}
103-
}
104-
105-
},
106-
107-
// These functions are usually overridden by the custom file types
108-
109-
load: function (globalXHRSettings) {
110-
111-
this.onStateChange(LOADING);
42+
this.callback = null;
43+
};
11244

113-
// Returns a Promise from the XHRLoader
114-
return XHRLoader(this, globalXHRSettings);
45+
File.prototype.constructor = File;
11546

116-
},
47+
File.prototype = {
11748

118-
onLoad: function () {
49+
resetXHR: function ()
50+
{
51+
this.xhrLoader.onload = undefined;
52+
this.xhrLoader.onerror = undefined;
53+
this.xhrLoader.onprogress = undefined;
54+
},
55+
56+
// Called when the Image loads
57+
// ProgressEvent
58+
onLoad: function (event)
59+
{
60+
console.log('image loaded');
61+
console.log(event);
11962

120-
// If overridden it must set `state` to LOADED
121-
this.onStateChange(LOADED);
63+
// this.onStateChange(LOADING);
12264

123-
},
65+
this.resetXHR();
12466

125-
onError: function () {
67+
this.callback(this, true);
68+
},
12669

127-
// If overridden it must set `state` to FAILED
128-
this.onStateChange(FAILED);
70+
onError: function (event)
71+
{
72+
console.log('image error');
73+
console.log(event);
12974

130-
},
75+
this.resetXHR();
13176

132-
onProcess: function () {
77+
this.callback(this, false);
78+
},
13379

134-
// If overridden it must set `state` to PROCESSING
135-
this.onStateChange(PROCESSING);
80+
onProgress: function (event)
81+
{
82+
this.bytesLoaded = event.loaded;
83+
this.bytesTotal = event.total;
13684

137-
},
85+
this.percentComplete = Math.min((this.bytesLoaded / this.bytesTotal), 1);
13886

139-
onComplete: function () {
87+
console.log(this.percentComplete + '% (' + this.bytesLoaded + ' bytes)');
88+
},
14089

141-
// If overridden it must set `state` to COMPLETE
142-
this.onStateChange(COMPLETE);
90+
onProcess: function ()
91+
{
92+
console.log('process the image');
93+
},
14394

144-
},
95+
onComplete: function ()
96+
{
97+
console.log('image completed and added to the loader store');
98+
},
14599

146-
onDestroy: function () {
100+
// Called by the Loader, starts the actual file downloading
101+
load: function (callback, baseURL, globalXHR)
102+
{
103+
if (baseURL === undefined) { baseURL = ''; }
147104

148-
// If overridden it must set `state` to DESTROYED
149-
this.onStateChange(DESTROYED);
105+
this.callback = callback;
150106

151-
}
107+
this.src = GetURL(this, baseURL);
152108

153-
};
109+
console.log('LOADING2', this.src);
154110

111+
this.xhrLoader = XHRLoader(this, globalXHR);
112+
}
155113
};
156114

157115
module.exports = File;

‎v3/src/loader/GetURL.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var GetURL = function (file, baseURL)
2+
{
3+
if (!file.url)
4+
{
5+
return false;
6+
}
7+
8+
if (file.url.match(/^(?:blob:|data:|http:\/\/|https:\/\/|\/\/)/))
9+
{
10+
return file.url;
11+
}
12+
else
13+
{
14+
return baseURL + file.path + file.url;
15+
}
16+
};
17+
18+
module.exports = GetURL;

‎v3/src/loader/XHRLoader.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ var MergeXHRSettings = require('./MergeXHRSettings');
22

33
var XHRLoader = function (file, globalXHRSettings)
44
{
5-
var config = MergeXHRSettings(globalXHRSettings, file.xhr);
5+
var config = MergeXHRSettings(globalXHRSettings, file.xhrSettings);
66

77
var xhr = new XMLHttpRequest();
88

99
xhr.open('GET', file.src, config.async, config.user, config.password);
1010

11-
xhr.responseType = file.xhr.responseType;
11+
xhr.responseType = file.xhrSettings.responseType;
1212
xhr.timeout = config.timeout;
1313

1414
if (config.header && config.headerValue)
@@ -23,9 +23,9 @@ var XHRLoader = function (file, globalXHRSettings)
2323

2424
// After a successful request, the xhr.response property will contain the requested data as a DOMString, ArrayBuffer, Blob, or Document (depending on what was set for responseType.)
2525

26-
xhr.onload = file.onLoad;
27-
xhr.onerror = file.onError;
28-
xhr.onprogress = file.onProgress;
26+
xhr.onload = file.onLoad.bind(file);
27+
xhr.onerror = file.onError.bind(file);
28+
xhr.onprogress = file.onProgress.bind(file);
2929

3030
// This is the only standard method, the ones above are browser additions (maybe not universal?)
3131
// xhr.onreadystatechange

0 commit comments

Comments
 (0)