FileLoader.js

KO | EN

gitlite — search

#python #ai #go #machine-learning #docker #nodejs #macos #windows #awesome #kubernetes #awesome-list #pytorch #openai #open-source

(★ 10)

FileLoader.js is a library which allows you to load all your web app files into a single tarball archive

FileLoader.js Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

FileLoader.js
=============

FileLoader.js is a library which allows you to load all your web app files into a single tarball archive.

Server side, you just need to put all your client stuff (scripts, images, xml, binary ...) into a single tar archive (you can also dynamically generate it).

Compressed tar archives (.tar.gz, .tar.bz ...) are currently not supported.

Browser support : up-to-date browsers, Internet Explorer >= 10.

Basic usage
-----------

```html
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="/js/FileLoader.js"></script>
		<script type="text/javascript">
			new FileLoader("content.tar", function() {
				// Imports all files in directory "css" with extension ".css"
				this.importCSS(/css\/.*\.css$/);
				
				// Importing all ".js" files in "js/lib"
				this.importJS(/js\/lib\/.*\.js$/);
				
				// Importing a single file
				this.importJS("www/js/main.js");
				
				// Importing all files with ".js" extension
				this.importJS();
				
				// Getting an Image object
				var myImage = this.getImage("www/images/foo.png");
				
				// Getting all images in "www/images/bar" with extension png or gif, and adding it to body
				var manyImages = this.getImage(/images\/bar\/.*\.(png|gif)/, function() {
					document.body.appendChild(this);
				});
				
				/*
				 * Also available : 
				 * this.importHTML(filter)
				 * this.getURL(filter);
				 * this.getTime(filter);
				 * this.getText(filter);
				 * this.getBlob(filter);
				 * this.getBytes(filter);
				 * this.getJSON(filter);
				 * this.getXML(filter);
				 */
			});
		</script>
	</head>
	<body>
		<a href="data:FileLoader.js,content.tar,www/foo/bar.html">Link to an html file into the archive</a>
		<img src="data:FileLoader.js,content.tar,www/images/baz.gif" alt="Some image" />
		
	</body>
</html>
```

Scripts & debuggers
-------------------
Because the browser debuggers won't show you the script names, and because it will not be able to memorize the breakpoints after a page refresh, you can use the debug method. It takes a single argument which is a method to translate a path into an archive to an HTTP url.

```javascript
this.enableJSDebugMode(function(path) {
	// "www/js/foo.js" in "bar.tar" ==> "/js/foo.js"
	return path.replace("www", "");
});
```

Real world example #1
=====================

Without FileLoader.js
---------------------

```html
<link rel="stylesheet" type="text/css" href="/css/main.css" />

With FileLoader.js
------------------

```html
<script type="text/javascript" src="/js/lib/FileLoader.js"></script>
<script type="text/javascript">
	window.FILES = new FileLoader("/content.tar", function() {
		this.importCSS(/css\/.*\.css$/);
		
		this.importJS(/js\/polyfills\/.*\.js$/);
		this.importJS(/js\/lib\/.*\.js$/);
		this.importJS(/js\/functions\/.*\.js$/);
		this.importJS(/js\/singletons\/.*\.js$/);
		this.importJS(/js\/classes\/.*\.js$/);
		this.importJS(/js\/models\/.*\.js$/);
		this.importJS(/js\/designerModels\/.*\.js$/);
		this.importJS(/js\/screens\/.*\.js$/);
		this.importJS(/main\.js$/);
	});
</script>
```

Real world example #2
=====================

Without FileLoader.js
---------------------

```javascript
var ajax = new XMLHttpRequest();
ajax.open("GET", "/objects/door.obj", false);
ajax.send(null);
if(ajax.readyState == ajax.DONE && ajax.status == 200) {
	var content = ajax.responseText;
	// ... Do some stuff with content
} else {
	throw new Error("File not found");
}
```

With FileLoader.js
------------------

```javascript
// NOTE : FILES is initialized in "Real world example #1"
var content = FILES.getText("www/objects/door.obj");
// ... Do some stuff with content
```

Real world example #3
=====================

Without FileLoader.js
---------------------

```javascript
var image = new Image();
image.addEventListener("load", function() {
	// Do something with image (this)
});
image.src = "/objects/textures/metal.png";
```

With FileLoader.js
------------------

```javascript
var image = FILES.getImage("/objects/textures/metal.png", function() {
	// Do something with image (this)
});
```

FileLoader.js

FileLoader.js Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

FileLoader.js

FileLoader.js Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README