WebApps with LocalStorage and AppCache/Load

In this learning step we will consider the package  that creates a Load Dialog to load files into browser. Basic WebApps are created for this learning resource to see the basic workflow as example.


 * LOAD DATA: Demos LoadFile4DOM

Demos on GitLab are created for this learning resource. This learning resource is based on the Open Community Approach.

Basic Concept for Load Dialogs for WebApps

 * (Analogy - Load in Desktop Applications) In standard desktop application like LibreOffice users are able to load files and process/edit the document.  does the same for WebApps and loads data (e.g. text files) into the browser runtime environment for processing or editing with the WebApp (which is defined by HTML, CSS and Javascript-Code).   provides Load Dialog and programmers define withn   handlers, what to do with the uploaded file (see example).
 * (Processing) Processing is the core task that will be performed within the browser (and not on a remote server).
 * (File Access to Local Filesystem) For security reason browsers are not allowed to access the local file system. On the other hand sending user data to a remote server can be avoided by processing the data in the browser without submitting the data to a remote server.a first example, in which users can load a textfile into textarea.you have the text in the textarea you can process the content in the browser and show the results to the user in the textarea.

The library was designed to used in a browser (WebApp). So use the installation for your browser by using a bundle  (see example https://niehausbert.gitlab.io/loadfile4dom).

History of Learning Resource
is a library that is created especially for this learning resource and allows to load files into an application that run completely in a browser without the need to submit data to a server for processing. With this library the users are able load files into your browser application and process the data in the browser and provide the output to the user, without submitting any data to a server.

Learning Task

 * (LoadFile4DOM)  Explore the demo file of the LoadFile4DOM that show basic operations for load different types of files and load them with LoadFile4DOM into the browser environment. The demo for AppLSAC/Load can be checked out online on corresponding Git-respository developed for this learning resource. All load operation will load a file into the browser environment. Try also to download the repository of demofiles (ZIP-file of demo files )
 * (JSON2Schema) Create your first AppLSAC in 5min with JSON2Schema Creator for a JSON Editor.
 * (Library for Loading into the Browser) Explore the LoadFile4DOM examples in the GitLab-repository of loadfile4dom
 * (AudioSlides4Web) Explore the AppLSAC AudioSlides4Web. How is the Load feature used in this app.

Use a Git ZIP file with Demos
For this learning resource some demos with different load methods was collected in a Git repository for you to play with (see LoadFile4DOM Demo Repository . If you want to test them offline in your browser and desktop computer just download the ZIP File open the file

Installation for Browsers
If you want to use the library  in a browser, please copy the file   into your library folder of WebApp that you want to test with a browser (e.g.  ). If you want expand existing examples check the basic example in   first and play around with that HTML-file. If you want to import the library with -tag do it in the standard way with:

&lt;script src=&quot;js/loadfile4dom.js&quot;&gt;&lt;/script&gt; Now it is possible to use the constructor of

Now we define a hash that contains the options for the -call.

After the  call the loaders are defined (see section about Usage). shows the holder and the  elements in the browser view of the HTML page. Default settings is false.

Keep in mind that injection of the Load Dialogs must be performed when the document was loaded, so we need to call the  method when the   event was triggered by the browser. This is done by:

&lt;body onload=&quot;lf4d.create&quot;&gt;

NodeJS - Update with new Features
This sections is for developers that want to extend or modify the features of. Assume that you want to provide a ZIP handler with the loader type.

Assume you want to expand the file handler for -files to return a   instance instead of the raw binary of the zip-file. So we update the method. git clone https://gitlab.com/itsme/loadfile4myzip.git If you use the extended module you need to browserify your new module.
 * (required) installed NodeJS on your computer,
 * (required) installed  on your computer,
 * create a new repository e.g. on GitLab with the NPM name  in the  ,
 * clone the new git repository to you local computer with  as version you work on. If your username is   and the new repository name will be   the git call for GitLab will be:
 * install  in Node NPM use the following NPM call:.

Due to the fact that the library was designed for WebApps that run a regular browser, the library requires  to create a dialog for loading files in a browser as runtime environment for an AppLSAC. If you want to create a ElectronJS application with the same code base, replace the LoadFile4DOM module by file dialogs provide by ElectronJS.

NodeJS Testing Library with JSDom
In order to test new feature we require in -script the library.

To test and expand the Library with additional feature we create in test-scripts like  as a DOM content. Wit  module we can analyse if the library properly inject the required HTML elements into the DOM of browser without for testing the modification of the code with the HTML file   and an appropriate  -tag   in the browser.

The following code shows the test script  that can be executed with   of with.

We need to feed a DOM content, that  works with. The sample DOM tree in the test script  was defined as. Modify the content according to your test settings.

Now we have an emulated DOM with the reference to the  object, that allows the test the DOM element injection.


 * (optional)  shows the injected   that are injected into the DOM tree by.
 * (optional)  the ID of the   element to which the all loaders (e.g. for ,  ,  ,   are injected.
 * All loaders are created by one instance of  to assure a conflict free ID management of generated   elements in the DOM.
 * if you have an  in your DOM it has an own   object. You might want to create another instance for injecting loaders in the iFrame document as well.

Remark: Keep in mind that you should create an instance of  every different   object you are injecting Load Dialog to. In general one instance should be sufficient in most use-cases for.

Quick Start for Library-Users
See LoadFile4DOM demos and download the loadfile4dom.zip from GitLab. Just copy the -folder, rename the folder to name of your choice (e.g.  ) and adapt the examples to your needs.

Usage
You can have one or more  nodes in your webbased application. The following code shows how to create  node

The Load Dialogs are created with the  event handler in the body tag of your HTML file.

&lt;body onload=&quot;lf4d.create&quot;&gt; Now you can define an  event in a button to open the load menu similar to the upload feature of web sites.

&lt;input type=&quot;button&quot; onclick=&quot;lf4d.open_dialog('mytxtfile')&quot; value=&quot;Load TXT File&quot;&gt; or with a -tag with

&lt;button onclick=&quot;lf4d.open_dialog('myhtmlfile')&quot;&gt; Load HTML File&lt;/button&gt; Furthermore you can open the menu with an  event on a link by

This is a &lt;a href=&quot;#&quot; onclick=&quot;lf4d.open_dialog('myhtmlfile')&quot;&gt;link to open the menu&lt;/a&gt; in a HTML file.

Wikiversity
This piece of software was created on GitLab as support material for the learning resource about privacy-friendly webbased applications ](https://en.wikiversity.org/wiki/AppLSAC) on Wikiversity. An  run completely in the browser without the need to submit any user generated data to a server. This package  is designed to learn about the first step:
 * (Load) Load File into a browser for processing with an HTML5-WebApp (AppLSAC-1 or AppLSAC-2). The library  serves to cover the loading feature.
 * (Process) Processing data can be done with any Javascript-libraries of your choice that can perform its task without submission of user generated data to a remote server.  processes a JSON as input (UML for Javascript) to generate the JavaScript library or the   documentation for a package.
 * (Save) If users want to save the processed results, it is recommended to look at the FileSaver.js library provided by Eli Grey.

Build Process of
The build process is called by  which in turn call. If you want to call the build process of  separately just call   with   from the shell/console.

The templates for building the output are stored in the folder.

After the build process the  is generated and if you want to have the table of contents in the file for the concatenation of files in   listed in   then you must run the DocToc generator for   by   from the shell to update the table of contents in.

Define Filename for build in
In  defines the filename for the automated build for *   for readme for the repository (parts in  ), *   for the web demo (parts in  ), *   for the style sheet (part in  ) and *   is generated from the parts in   the sources in. To specify these filenames add the following  section to the  :

If you want to edit the generated file check the files that are selected for including into the generated files (see ) and set the files to a preliminary build name (e.g. like   instead of   to compare generated file   with the older version   for debugging

Browserify after Build
After building (concat the file parts) and replacement of package variables (e.g. like  for package name) in the generated documents the module is browserified by the command

This command is called and defined in the script section of the.

API for LoadFile4DOM
The documentation for API of LoadFile4DOM is provided on GitLab.

Acknowledgement
Special thanks to the following individual developers and teams of OpenSource JavaScript projects:
 * HandleBars the code generation in Javascript was implemented
 * JSON-Editor by Jeremy Dorn. The JSON Editor takes a JSON Schema and uses it to generate an HTML form. The JSON-Editor is partially used to edit JSON file of the JavascriptClassCreator Project . The JSON-Editor of Jeremy Dorn has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI). This would lead to major code reduction of   . Refactoring of   would make more use of the JSON-Editor features. Check out an interactive demo (demo.html): http://jeremydorn.com/json-editor/
 * Developer Mihai Bazon create UglifyJS, a great tool to handle and parse Javascript Code and minify the Javascript code (see Source Code of UglifyJS).
 * The wrapper for UglifyJS is written Dan Wolff. His UglifyJS-Online example is used to minify/compress the exported Javascript code of generated JS Classes (For Online Example of the UglifyJS-Wrapper see source code on https://github.com/Skalman/UglifyJS-online for the Online-Version of the Wrapper.
 * Developers of ACE Code Editor https://ace.c9.io (Javascript Editing uses the Editor)
 * FileSaver.js Developer Eli Grey provided the  that is used to store created   files to the local filesystem.   uses the same mechanism of browsers, that allows a   in the context menu of a web pages or image. So not uncontrolled write access to your file system is implemented, because users have to select the locations in which the user whats to store the file (e.g. JSON, Javascript or HTML).
 * JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams. JointJS is used in this project to create UML-diagrams, that are interactive diagramming in conjunction and application builder in Javascript.
 * Inheritage for JavaScript with protoypes by Gavin Kistner
 * 3 ways to define a JavaScript class by Stoyan Stefanov
 * JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.

Libraries required for
The following libraries are necessary for :

NPM Library Information
 Exported Module Variable:  Package:  Homepage:  License: MIT  Require Module with:   JSHint: installation can be performed with   