Skip to content

Commit e2e5c76

Browse files
photonstormphotonstorm
committed
Added new CSS File Loader FileType.
1 parent e82e7c6 commit e2e5c76

2 files changed

Lines changed: 172 additions & 0 deletions

File tree

‎src/loader/filetypes/CSSFile.js‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2019 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
var Class = require('../../utils/Class');
8+
var CONST = require('../const');
9+
var File = require('../File');
10+
var FileTypesManager = require('../FileTypesManager');
11+
var GetFastValue = require('../../utils/object/GetFastValue');
12+
var IsPlainObject = require('../../utils/object/IsPlainObject');
13+
14+
/**
15+
* @typedef {object} Phaser.Loader.FileTypes.CSSFileConfig
16+
*
17+
* @property {string} key - The key of the file. Must be unique within the Loader.
18+
* @property {string} [url] - The absolute or relative URL to load the file from.
19+
* @property {string} [extension='js'] - The default file extension to use if no url is provided.
20+
* @property {Phaser.Loader.Types.XHRSettingsObject} [xhrSettings] - Extra XHR Settings specifically for this file.
21+
*/
22+
23+
/**
24+
* @classdesc
25+
* A single CSS File suitable for loading by the Loader.
26+
*
27+
* These are created when you use the Phaser.Loader.LoaderPlugin#css method and are not typically created directly.
28+
*
29+
* For documentation about what all the arguments and configuration options mean please see Phaser.Loader.LoaderPlugin#css.
30+
*
31+
* @class CSSFile
32+
* @extends Phaser.Loader.File
33+
* @memberof Phaser.Loader.FileTypes
34+
* @constructor
35+
* @since 3.17.0
36+
*
37+
* @param {Phaser.Loader.LoaderPlugin} loader - A reference to the Loader that is responsible for this file.
38+
* @param {(string|Phaser.Loader.FileTypes.CSSFileConfig)} key - The key to use for this file, or a file configuration object.
39+
* @param {string} [url] - The absolute or relative URL to load this file from. If undefined or `null` it will be set to `<key>.js`, i.e. if `key` was "alien" then the URL will be "alien.js".
40+
* @param {Phaser.Loader.Types.XHRSettingsObject} [xhrSettings] - Extra XHR Settings specifically for this file.
41+
*/
42+
var CSSFile = new Class({
43+
44+
Extends: File,
45+
46+
initialize:
47+
48+
function CSSFile (loader, key, url, xhrSettings)
49+
{
50+
var extension = 'css';
51+
52+
if (IsPlainObject(key))
53+
{
54+
var config = key;
55+
56+
key = GetFastValue(config, 'key');
57+
url = GetFastValue(config, 'url');
58+
xhrSettings = GetFastValue(config, 'xhrSettings');
59+
extension = GetFastValue(config, 'extension', extension);
60+
}
61+
62+
var fileConfig = {
63+
type: 'script',
64+
cache: false,
65+
extension: extension,
66+
responseType: 'text',
67+
key: key,
68+
url: url,
69+
xhrSettings: xhrSettings
70+
};
71+
72+
File.call(this, loader, fileConfig);
73+
},
74+
75+
/**
76+
* Called automatically by Loader.nextFile.
77+
* This method controls what extra work this File does with its loaded data.
78+
*
79+
* @method Phaser.Loader.FileTypes.CSSFile#onProcess
80+
* @since 3.17.0
81+
*/
82+
onProcess: function ()
83+
{
84+
this.state = CONST.FILE_PROCESSING;
85+
86+
this.data = document.createElement('style');
87+
this.data.defer = false;
88+
this.data.innerHTML = this.xhrLoader.responseText;
89+
90+
document.head.appendChild(this.data);
91+
92+
this.onProcessComplete();
93+
}
94+
95+
});
96+
97+
/**
98+
* Adds a CSS file, or array of CSS files, to the current load queue.
99+
*
100+
* You can call this method from within your Scene's `preload`, along with any other files you wish to load:
101+
*
102+
* ```javascript
103+
* function preload ()
104+
* {
105+
* this.load.css('headers', 'styles/headers.css');
106+
* }
107+
* ```
108+
*
109+
* The file is **not** loaded right away. It is added to a queue ready to be loaded either when the loader starts,
110+
* or if it's already running, when the next free load slot becomes available. This happens automatically if you
111+
* are calling this from within the Scene's `preload` method, or a related callback. Because the file is queued
112+
* it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
113+
* The typical flow for a Phaser Scene is that you load assets in the Scene's `preload` method and then when the
114+
* Scene's `create` method is called you are guaranteed that all of those assets are ready for use and have been
115+
* loaded.
116+
*
117+
* The key must be a unique String and not already in-use by another file in the Loader.
118+
*
119+
* Instead of passing arguments you can pass a configuration object, such as:
120+
*
121+
* ```javascript
122+
* this.load.css({
123+
* key: 'headers',
124+
* url: 'styles/headers.css'
125+
* });
126+
* ```
127+
*
128+
* See the documentation for `Phaser.Loader.FileTypes.CSSFileConfig` for more details.
129+
*
130+
* Once the file has finished loading it will automatically be converted into a style DOM element
131+
* via `document.createElement('style')`. It will have its `defer` property set to false and then the
132+
* resulting element will be appended to `document.head`. The CSS styles are then applied to the current document.
133+
*
134+
* The URL can be relative or absolute. If the URL is relative the `Loader.baseURL` and `Loader.path` values will be prepended to it.
135+
*
136+
* If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
137+
* and no URL is given then the Loader will set the URL to be "alien.css". It will always add `.css` as the extension, although
138+
* this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.
139+
*
140+
* Note: The ability to load this type of file will only be available if the CSS File type has been built into Phaser.
141+
* It is available in the default build but can be excluded from custom builds.
142+
*
143+
* @method Phaser.Loader.LoaderPlugin#css
144+
* @fires Phaser.Loader.LoaderPlugin#addFileEvent
145+
* @since 3.17.0
146+
*
147+
* @param {(string|Phaser.Loader.FileTypes.CSSFileConfig|Phaser.Loader.FileTypes.CSSFileConfig[])} key - The key to use for this file, or a file configuration object, or array of them.
148+
* @param {string} [url] - The absolute or relative URL to load this file from. If undefined or `null` it will be set to `<key>.css`, i.e. if `key` was "alien" then the URL will be "alien.css".
149+
* @param {Phaser.Loader.Types.XHRSettingsObject} [xhrSettings] - An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.
150+
*
151+
* @return {Phaser.Loader.LoaderPlugin} The Loader instance.
152+
*/
153+
FileTypesManager.register('css', function (key, url, xhrSettings)
154+
{
155+
if (Array.isArray(key))
156+
{
157+
for (var i = 0; i < key.length; i++)
158+
{
159+
// If it's an array it has to be an array of Objects, so we get everything out of the 'key' object
160+
this.addFile(new CSSFile(this, key[i]));
161+
}
162+
}
163+
else
164+
{
165+
this.addFile(new CSSFile(this, key, url, xhrSettings));
166+
}
167+
168+
return this;
169+
});
170+
171+
module.exports = CSSFile;

‎src/loader/filetypes/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = {
1717
AudioSpriteFile: require('./AudioSpriteFile'),
1818
BinaryFile: require('./BinaryFile'),
1919
BitmapFontFile: require('./BitmapFontFile'),
20+
CSSFile: require('./CSSFile'),
2021
GLSLFile: require('./GLSLFile'),
2122
HTML5AudioFile: require('./HTML5AudioFile'),
2223
HTMLFile: require('./HTMLFile'),

0 commit comments

Comments
 (0)