WebApps with LocalStorage and AppCache/Load/API

In this part of the learning resource we consider API for the Javascript Class: LoadFile4DOM. The general purpose of the library is to create a hidden file tag in the DOM to emulated loading interactively files from the local file system of you computer or mobile device into the browser for further processing

the UML structure of LoadFile4DOM was created with ClassEditorUML - Date: 2018/12/12 14:49:10
last modifications at 2018/12/30 21:41:04
URL Class Editor for UML: https://niebert.github.io/ClassEditorUML
File: js/loadfile4dom.js
UML-File: jscc/loadfile4dom_uml.json - open with ClassEditorUML

Diagram edit

LoadFile4DOM
+ `aDocNaNDocument` + `aOptionsNaNHash` + `aFileLoaderNaNHash` + `aLoadFileHolderNaNObject` + `defaults_options` + `type2accept` + `defaults_loader` + `aLoaderCount`
+ `init(pDoc:Document,pOptions:Hash)` + `getTimeStamp():Integer` + `create_input_tags()` + `create()` + `get_holder():Object` + `create_load_dialog(pOptions: )` + `create_holder()` + `open_dialog(pID:String)` + `set_defaults(options: , defaults: )` + `get_loader_options(pID:String ,pFileType: ,pOptions:Hash ):Hash` + `get_input_attributes(pID:String ,pFileType:String )` + `error_file_type(pLoader:Hash ,pFileToLoad:Object )` + `handle_text(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_json(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_image(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_image_thumb(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_data(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_audio(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_video(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_zip(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_jszip(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_file_type(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object )` + `handle_single_file(pLoader:Hash )` + `handle_multiple_files(pLoader:Hash )` + `handle_file(pID:String)` + `log(pMessage:String )`

Create Instance of Class edit

Instances of the class LoadFile4DOM can be generated with:

    var lf4d = new LoadFile4DOM();

Definition Methods - Comparison of Approaches edit

If you want to assign definitions of methods for single instances individually, defined the method the following way. This approach allows to overwrite the method definition of single instances dynamically, but if consumes also more memory because every instance stores a copy of that function.
```
function LoadFile4DOM() {

  // attributes/states
  this.counter = 0;

  // methods
  this.my_method = function (pPar1,pPar2) {
    // the code for the method here
  }
}

var lf4dom = new LoadFile4DOM();
```
A prototype definition of methods for LoadFile4DOM will be set the definition as prototye for all instances of the class. Alteration of the prototye definition with change the method definition of all instances of LoadFile4DOM. Use the following prototype definition for methods name for 'LoadFile4DOM'.
```
function LoadFile4DOM() {
  // attributes/states
  this.counter = 0;
}

//define the method as prototype
LoadFile4DOM.prototype.my_method = function (pPar1,pPar2) {
   // the code for the method  here
}

var lf4dom = new LoadFile4DOM();
```
The prototype definition for methods consumes less memory for generated instances, because they are stored once for all instances.

The methods of LoadFile4DOM are defined as prototypes.

Attributes: `LoadFile4DOM` edit

For class LoadFile4DOM the following attributes are defined:

Attribute `aDoc : Document` edit

This attribute stores a reference to the document object of the browser. Reference provided with the init-method

Visibility: public
Class: Document
Default Init: null set by my_instance.aDoc = null;
Access of attribute in the code of methods by this.aDoc = null;

Attribute `aOptions : Hash` edit

This hash stores the options of the init method - e.g. "id4loadfile" as DIV container for the input elements in the DOM that holds all created file loaders i.e. holding the input-file-tags for load a JSON file

Visibility: public
Class: Hash
Default Init: null set by my_instance.aOptions = null;
Access of attribute in the code of methods by this.aOptions = null;

Attribute `aFileLoader : Hash` edit

This attribute stores the number of file loaders created with instance

Visibility: public
Class: Hash
Default Init: {} set by my_instance.aFileLoader = {};
Access of attribute in the code of methods by this.aFileLoader = {};

Attribute `aLoadFileHolder : Object` edit

This attribute stores the reference to the DIV node of the file holder node in the DOM that is created by this.create_holder()

Visibility: public
Class: Object
Default Init: { "id": "holder4loadfile", "dom": null, "var4dom": "undef_call_var", "debug": false } set by my_instance.aLoadFileHolder = { "id": "holder4loadfile", "dom": null, "timeout": 0, "var4dom": "undef_call_var", "debug": false };
Access of attribute in the code of methods by

this.aLoadFileHolder = {
    "id": "holder4loadfile",
    "dom": null,
    "var4dom": "undef_call_var",
    "debug": false
};

Attribute `defaults_options :` edit

the attribute stores the default options for LoadFile4DOM

Visibility: public
Class: ` `
Default Init:

{
    "id": "loadfile_holder_div",
    "dom": null,
    "debug": false
}

set by

my_instance.defaults_options = {
    "id": "loadfile_holder_div",
    "dom": null,
    "debug": false
};

Access of attribute in the code of methods by

this.defaults_options = {
"id": "loadfile_holder_div",
"dom": null,
"debug": false
};

Attribute `type2accept : Hash` edit

the attribute maps the type to the accept tag of files of the input-file-tag

Visibility: public
Class: Hash
Default Init:

{
    "all": "*",
    "audio": "audio/*",
    "audiourl": "text/*",
    "data": "*",
    "image": "image/*",
    "imagethumb": "image/*",
    "json": "application/json",
    "text": "text/*",
    "texturl": "text/*",
    "video": "video/*",
    "videourl": "text/*",
    "url": "text/*",
    "zip": "application/zip"
}

set by

my_instance.type2accept = {
    "all": "*",
    "audio": "audio/*",
    "audiourl": "text/*",
    "data": "*",
    "image": "image/*",
    "imagethumb": "image/*",
    "json": "application/json",
    "text": "text/*",
    "texturl": "text/*",
    "video": "video/*",
    "videourl": "text/*",
    "url": "text/*",
    "zip": "application/zip"
};

Access of attribute in the code of methods by

this.type2accept = {
"all": "*",
"audio": "audio/*",
"audiourl": "text/*",
"data": "*",
"image": "image/*",
"imagethumb": "image/*",
"json": "application/json",
"text": "text/*",
"texturl": "text/*",
"video": "video/*",
"videourl": "text/*",
"url": "text/*",
"zip": "application/zip"
};

Attribute `defaults_loader : Hash` edit

the attribute stores the default loader tags if not options are provided

Visibility: public
Class: Hash
Default Init:

{
    "filetype": "text",
    "id": "loader123456789",
    "name": "defaultloader",
    "value": "Dialog Loader Button",
    "accept": "text/*",
    "onchange": "console.log('open dialog click on 'defaultloader')",
    "multiple": true
}

set by

my_instance.defaults_loader = {
    "filetype": "text",
    "id": "loader123456789",
    "name": "defaultloader",
    "value": "Dialog Loader Button",
    "accept": "text/*",
    "onchange": "console.log('open dialog click on 'defaultloader')",
    "multiple": true
};

Access of attribute in the code of methods by

this.defaults_loader = {
"filetype": "text",
"id": "loader123456789",
"name": "defaultloader",
"value": "Dialog Loader Button",
"accept": "text/*",
"onchange": "console.log('open dialog click on 'defaultloader')",
"multiple": true
};

Attribute `aLoaderCount : Integer` edit

the attribute stores the number of created loaders to create unique loader IDs in the DOM together with the method getTimeStamp()

Visibility: public
Class: Integer
Default Init: 0 set by my_instance.aLoaderCount = 0;
Access of attribute in the code of methods by this.aLoaderCount = 0;

Methods: `LoadFile4DOM` edit

For class LoadFile4DOM the following methods are defined:

Method `init(pDoc,pOptions)` edit

the method performs the initialization of the instance of LoadFile4DOM. pOptions contains the ID for the LoadFile4DOM holder, it is in general a DIV element with the HTML-input-tags for uploading a files.

Visibility: public
Call: vLoadFile4DOM.init(pDoc,pOptions); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pDoc:Document the parameter contains a reference to the document object of the browser
- pOptions:Hash the parameter stores options

Method `getTimeStamp()` edit

the method performs ...

Visibility: public
Returns: Integer
Call: var vIntegerRet = vLoadFile4DOM.getTimeStamp(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class = LoadFile4DOM.
Parameter List:

Method `create_input_tags()` edit

the method injects the input-files tags for the loaders in the DOM - the method is called by LoadFile4DOM.create() with body-onload attribute.

Visibility: public
Call: vLoadFile4DOM.create_input_tags(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:

Method `create()` edit

the method creates a DOM node for the file in the window.document of the browser and adds an object in this.aFileLoader the each constructed file loader with the appropriate ID.

Visibility: public
Call: vLoadFile4DOM.create(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:

Method `get_holder()` edit

the method returns the LoadFile4DOM holder as DOM node. The id of the LoadFile4DOM holder is stored in this.aOptions.id4loadfile. The holder is an existing DIV node in the DOM (Document Object Model) or it will be created by the create_holder

Visibility: public
Returns: Object
Call: var vObjectRet = vLoadFile4DOM.get_holder(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class = LoadFile4DOM.
Parameter List:

Method `create_load_dialog(pOptions)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.create_load_dialog(pOptions); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pOptions:Hash the parameter provides ...

Method `create_holder()` edit

the method creates a hidden holder DIV element for the input-tags of the load file instance. The loader ID of the DIV element is stored in this.aOptions.id4loadfile

Visibility: public
Call: vLoadFile4DOM.create_holder(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:

Method `open_dialog(pID)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.open_dialog(pID); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pID:String the parameter provides the ID of the FileLoader input tag in the DOM

Method `set_defaults(options, defaults)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.set_defaults(options, defaults); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- - options: the parameter provides options that set by the user.
  - defaults: the parameter provides the default settings, which are set by the method, if the options are not defined in options

Method `get_loader_options(pID,pFileType,pOptions)` edit

the method returns a hash for loader e.g. the command var loader4txt = lf4d.get_loader_options("mytxtfile","text",loader_opts); creates the following hash:

    loader4txt={
       "type": "text",
        "id": "mytxtfile1t1545978644012",
        "name": "mytxtfile",
        "value": "Dialog mytxtfile",
        "accept": "text/*",
        "onload": "var4dom0t1545978644011.open_dialog('mytxtfile')",
        "multiple": false
    }

In loadfile4dom.js the call of create_load_dialog(loader_option) creates the loader.

Visibility: public
Returns: Hash
Call: var vHashRet = vLoadFile4DOM.get_loader_options(pID,pFileType,pOptions); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class = LoadFile4DOM.
Parameter List:
- - pID: the parameter provides name for DOM input-file for the loader
  - pFileType: the parameter provides the type of loader e.g. text, image, imagethumb, audio, video, zip

- pOptions:Hash the parameter provides additional options e.g. style options with width and height for an image

Method `get_input_attributes(pID,pFileType)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.get_input_attributes(pID,pFileType); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pID: the parameter provides ...
- pFileType: the parameter provides type of loader e.g. text, image, zip, ...

Method `error_file_type(pLoader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.error_file_type(pLoader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_text(pLoader,pFileReader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_text(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_json(pLoader,pFileReader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_json(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_image(pLoader,pFileReader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_image(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_image_thumb(pLoader,pFileReader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_image_thumb(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_data(pLoader,pFileReader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_data(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_audio(pLoader,pFileReader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_audio(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_video(pLoader,pFileReader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_video(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_file_type(pLoader,pFileReader,pFileToLoad)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_file_type(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
- pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
- pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method `handle_single_file(pLoader)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_single_file(pLoader); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...

Method `handle_multiple_files(pLoader)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_multiple_files(pLoader); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...

Method `handle_file(pID)` edit

the method performs ...

Visibility: public
Call: vLoadFile4DOM.handle_file(pID); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pID: the parameter provides ...

Method `log(pMessage)` edit

the method performs a console log report dependent of the debug=true setting. This creates more console.log() messages.

Visibility: public
Call: vLoadFile4DOM.log(pMessage); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:
- pMessage: the parameter provides message for the log command.

Method `set_onload()` edit

the method assigns the create()-method to onload-event in the <body>-tag (e.g. <body onload="lf4d.create()">) - DO NOT USE - Currently not working.

Visibility: public
Call: vLoadFile4DOM.set_onload(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
Parameter List:

Build and Compress with Browserify, Watchify, UglifyJS edit

The NodeJS modules can use require()-command. Browsers cannot execute the require()-command and other node specific programming features.

Browserify loads the file ./src/main.js as input file and resolves e.g. the require()-command and creates an output file in dist/loadfile4dom.js
Watchify observes any changes in the source files in src/ and starts on the event of changes the build process of the file ./src/main.js as input file and creates an output file in dist/loadfile4dom.js.
UglifyJS compresses the code in dist and takes the file dist/loadfile4dom.js and generates the compressed library in dist/loadfile4dom.min.js. The same is applied for docs/js/loadfile4dom.js and the output is docs/js/loadfile4dom.min.js. The compression of the source code can be perform without a total build by npm run compress.
The main browserify command creates a standalone library that can be used in the browser and it assign LoadFile4DOM to the window object by

  browserify src/main.js --standalone window > dist/loadfile4dom.js

Browserify and Watchify edit

Browserify and Watchify are used in this repository to control the WebApp-javascript development with the required Javascript libraries installed with NPM Node.js and similar framework world that greatly improve your javascript workflow: Using them, you no longer need to micro-manage your script tags but instead you just declare the libraries each of your client-side modules is using - or you can even create your own reusable modules! Also, installing (or updating) javascript libraries is as easy as running a single command!

Additional Information about Browserify and Watchify on GitHub
Youtube Video about Browserify and Watchify by Kyle Robinson Young 2015/04/16 In this repository Browserify and Watchify are used for javascript code development with NPM Node.js.

Global Installation of Browserify, Watchify, UglifyJS and DocToc edit

Requirement: NPM is intalled. Now call for global installation of Browserfy, Watchify, UglifyJS and DocToc by:

npm install -g browserify watchify uglify-js doctoc

This is recommended because your will not install Browserfy, Watchify and UglifyJS for all your repositories separately.

Browserfy converts node_modules in a single library, that can be imported in WebApp. Browserify resolves dependencies and included the required libraries into the bundled javascript code.
Watchify watches changes in the source code and runs the build process whenever it detects changes in the your source code.
UglifyJS compresses the source code of dist/class_editor_uml.js into class_editor_uml.min.js to reduce download time and WebApp performance during load.
DocToc is used to create a helpful table of contents in the README (see [DocToc-Installation]https://github.com/thlorenz/doctoc#installation) for further details on NPM DocToc ). Run doctoc README.md for updating the table of contents.
jsLint is used to check the Javascript code, quality of code can be improved by application of jsLint

Package Installation of Browserify and Watchify - Alternative edit

If your prefer that browserify and watchify is installed with your npm install command, save these to modules to your dev-dependecies in your package.json by calling

(Install Browsersify) npm install browserify --save-dev
(Install Watchify) npm install watchify --save-dev
(Install UglifyJS) npm install uglify-js --save-dev
(Install DocToc) npm install doctoc -g
(Install jshint) npm install jslint -g

The difference between --save and --save-dev is, that development dependencies are installed with npm install because they are required for the development process of the code but they are not added to the generated Javascript-bundle that are used in the WebApp ClassEditorUML. The --save-dev commands for browserify and watchify will install the two modules with all the the dependencies in node_modules and add the dev-dependencies to your package.json.

"devDependencies": {
  "browserify": "^14.5.0",
  "watchify": "^3.9.0",
  "uglify-js": "^2.6.2",
  "doctoc":"^1.3.0",
  "lint": "^1.1.2"  
}

In the current repository Browserfy and Watchify are expected to be installed globally, because the package.json does not contain the dev-dependencies mentioned above.

Start Watching the Files with Watchify edit

Watchify will trigger the npm run build process if files were change due to alteration of code. To start watching the files, run the npm-watch script by npm run watch, which is defined in package.json

Source JS file and development bundle output edit

The main JS source file for the build process is src/main.js. The output library (resp. output file of build process) is stored in distrubtion library for browser based web-development in dist/loadfile4dom.js. Compressed code is generated with UglifyJS. It takes the dist/loadfile4dom.js as input file and creates the compressed file dist/loadfile4dom.min.js. The compression of dist/loadfile4dom.js into dist/loadfile4dom.min.js uses uglify-js module and can be started by

npm run compress

WebApps with LocalStorage and AppCache/Load/API

Diagram edit

Create Instance of Class edit

Definition Methods - Comparison of Approaches edit

Attributes: LoadFile4DOM edit

Attribute aDoc : Document edit

Attribute aOptions : Hash edit

Attribute aFileLoader : Hash edit

Attribute aLoadFileHolder : Object edit

Attribute defaults_options : edit

Attribute type2accept : Hash edit

Attribute defaults_loader : Hash edit

Attribute aLoaderCount : Integer edit

Methods: LoadFile4DOM edit

Method init(pDoc,pOptions) edit

Method getTimeStamp() edit

Method create_input_tags() edit

Method create() edit

Method get_holder() edit

Method create_load_dialog(pOptions) edit

Method create_holder() edit

Method open_dialog(pID) edit

Method set_defaults(options, defaults) edit

Method get_loader_options(pID,pFileType,pOptions) edit

Method get_input_attributes(pID,pFileType) edit

Method error_file_type(pLoader,pFileToLoad) edit

Method handle_text(pLoader,pFileReader,pFileToLoad) edit

Method handle_json(pLoader,pFileReader,pFileToLoad) edit

Method handle_image(pLoader,pFileReader,pFileToLoad) edit

Method handle_image_thumb(pLoader,pFileReader,pFileToLoad) edit

Method handle_data(pLoader,pFileReader,pFileToLoad) edit

Method handle_audio(pLoader,pFileReader,pFileToLoad) edit

Method handle_video(pLoader,pFileReader,pFileToLoad) edit

Method handle_file_type(pLoader,pFileReader,pFileToLoad) edit

Method handle_single_file(pLoader) edit

Method handle_multiple_files(pLoader) edit

Method handle_file(pID) edit

Method log(pMessage) edit

Method set_onload() edit

Build and Compress with Browserify, Watchify, UglifyJS edit

Browserify and Watchify edit

Global Installation of Browserify, Watchify, UglifyJS and DocToc edit

Package Installation of Browserify and Watchify - Alternative edit

Start Watching the Files with Watchify edit

Source JS file and development bundle output edit

Attributes: `LoadFile4DOM` edit

Attribute `aDoc : Document` edit

Attribute `aOptions : Hash` edit

Attribute `aFileLoader : Hash` edit

Attribute `aLoadFileHolder : Object` edit

Attribute `defaults_options :` edit

Attribute `type2accept : Hash` edit

Attribute `defaults_loader : Hash` edit

Attribute `aLoaderCount : Integer` edit

Methods: `LoadFile4DOM` edit

Method `init(pDoc,pOptions)` edit

Method `getTimeStamp()` edit

Method `create_input_tags()` edit

Method `create()` edit

Method `get_holder()` edit

Method `create_load_dialog(pOptions)` edit

Method `create_holder()` edit

Method `open_dialog(pID)` edit

Method `set_defaults(options, defaults)` edit

Method `get_loader_options(pID,pFileType,pOptions)` edit

Method `get_input_attributes(pID,pFileType)` edit

Method `error_file_type(pLoader,pFileToLoad)` edit

Method `handle_text(pLoader,pFileReader,pFileToLoad)` edit

Method `handle_json(pLoader,pFileReader,pFileToLoad)` edit

Method `handle_image(pLoader,pFileReader,pFileToLoad)` edit

Method `handle_image_thumb(pLoader,pFileReader,pFileToLoad)` edit

Method `handle_data(pLoader,pFileReader,pFileToLoad)` edit

Method `handle_audio(pLoader,pFileReader,pFileToLoad)` edit

Method `handle_video(pLoader,pFileReader,pFileToLoad)` edit

Method `handle_file_type(pLoader,pFileReader,pFileToLoad)` edit

Method `handle_single_file(pLoader)` edit

Method `handle_multiple_files(pLoader)` edit

Method `handle_file(pID)` edit

Method `log(pMessage)` edit

Method `set_onload()` edit