WebApps with LocalStorage and AppCache/Load/API

In this part of the learning resource we consider API for the Javascript Class:. The general purpose of the library is to create a hidden  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:
 * UML-File:  - open with ClassEditorUML

Create Instance of Class
Instances of the class  can be generated with:

Definition Methods - Comparison of Approaches
  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.   A prototype definition of methods for  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. Use the following prototype definition for methods name for 'LoadFile4DOM'. The prototype definition for methods consumes less memory for generated instances, because they are stored once for all instances.  The methods of  are defined as prototypes.

Attributes:
For class  the following attributes are defined:

Attribute
This attribute stores a reference to the document object of the browser. Reference provided with the init-method
 * Visibility:
 * Class:
 * Default Init:  set by
 * Access of attribute in the code of methods by

Attribute
This hash stores the options of the init method - e.g. &quot;id4loadfile&quot; 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:
 * Class:
 * Default Init:  set by
 * Access of attribute in the code of methods by

Attribute
This attribute stores the number of file loaders created with instance
 * Visibility:
 * Class:
 * Default Init:  set by
 * Access of attribute in the code of methods by

Attribute
This attribute stores the reference to the DIV node of the file holder node in the DOM that is created by
 * Visibility:
 * Class:
 * Default Init:  set by
 * Access of attribute in the code of methods by

Attribute
the attribute stores the default options for LoadFile4DOM
 * Visibility:
 * Class: ` `
 * Default Init:

set by

  Access of attribute in the code of methods by 

Attribute
the attribute maps the type to the accept tag of files of the input-file-tag
 * Visibility:
 * Class:
 * Default Init:

set by

  Access of attribute in the code of methods by 

Attribute
the attribute stores the default loader tags if not options are provided
 * Visibility:
 * Class:
 * Default Init:

set by

  Access of attribute in the code of methods by </li></ul>

Attribute
the attribute stores the number of created loaders to create unique loader IDs in the DOM together with the method getTimeStamp
 * Visibility:
 * Class:
 * Default Init:  set by
 * Access of attribute in the code of methods by

Methods:
For class  the following methods are defined:

Method
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:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter contains a reference to the document object of the browser
 * the parameter stores options

Method
the method performs ...
 * Visibility:
 * Returns:
 * Call:  where   is an instance of the class.
 * Parameter List:

Method
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:
 * Call:  where   is an instance of the class.
 * Parameter List:

Method
the method creates a DOM node for the file in the  of the browser and adds an object in   the each constructed file loader with the appropriate ID.
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:

Method
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:
 * Returns:
 * Call:  where   is an instance of the class.
 * Parameter List:

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides ...

Method
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:
 * Call:  where   is an instance of the class.
 * Parameter List:

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides the ID of the FileLoader input tag in the DOM

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides options that set by the user.
 * the parameter provides the default settings, which are set by the method, if the options are not defined in

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

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


 * Visibility:
 * Returns:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides name for DOM input-file for the loader
 * the parameter provides the type of loader e.g. text, image, imagethumb, audio, video, zip


 * the parameter provides additional options e.g. style options with width and height for an image

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides ...
 * the parameter provides type of loader e.g.,  ,  , ...

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to the  of the triggered upload event of the   tags in the DOM
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to the  of the triggered upload event of the   tags in the DOM
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to the  of the triggered upload event of the   tags in the DOM
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to the  of the triggered upload event of the   tags in the DOM
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to the  of the triggered upload event of the   tags in the DOM
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to the  of the triggered upload event of the   tags in the DOM
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to the  of the triggered upload event of the   tags in the DOM
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
 * the parameter provides access to the  of the triggered upload event of the   tags in the DOM
 * the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...

Method
the method performs ...
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides ...

Method
the method performs a console log report dependent of the  setting. This creates more  messages.
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:
 * the parameter provides message for the log command.

Method
the method assigns the -method to onload-event in the  -tag (e.g.  ) - DO NOT USE - Currently not working.
 * Visibility:
 * Call:  where   is an instance of the class.
 * Parameter List:

Build and Compress with Browserify, Watchify, UglifyJS
The NodeJS modules can use -command. Browsers cannot execute the -command and other node specific programming features.
 * loads the file  as input file and resolves e.g. the  -command and creates an output file in
 * observes any changes in the source files in  and starts on the event of changes the build process of the file   as input file and creates an output file in.
 * compresses the code in  and takes the file   and generates the compressed library in  . The same is applied for   and the output is  . The compression of the source code can be perform without a total build by.
 * The main browserify command creates a standalone library that can be used in the browser and it assign  to the   object by

browserify src/main.js --standalone window &gt; dist/loadfile4dom.js

Browserify and Watchify
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
Requirement: NPM is intalled. Now call for global installation of Browserfy, Watchify, UglifyJS and DocToc by:

This is recommended because your will not install Browserfy, Watchify and UglifyJS for all your repositories separately.
 * Browserfy converts  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  into   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  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
If your prefer that browserify and watchify is installed with your  command, save these to modules to your dev-dependecies in your   by calling


 * (Install Browsersify)
 * (Install Watchify)
 * (Install UglifyJS)
 * (Install DocToc)
 * (Install jshint)

The difference between  and   is, that development dependencies are installed with   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  commands for   and   will install the two modules with all the the dependencies in   and add the dev-dependencies to your.

&quot;devDependencies&quot;: { &quot;browserify&quot;: &quot;^14.5.0&quot;, &quot;watchify&quot;: &quot;^3.9.0&quot;, &quot;uglify-js&quot;: &quot;^2.6.2&quot;, &quot;doctoc&quot;:&quot;^1.3.0&quot;, &quot;lint&quot;: &quot;^1.1.2&quot; } In the current repository  and   are expected to be installed globally, because the   does not contain the dev-dependencies mentioned above.

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

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