/
create_files4json.html
139 lines (132 loc) · 7.5 KB
/
create_files4json.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create files4json.js for JSONEditor4Menu</title>
<!-- Main CSS -->
<link href="css/create_files4json.css" rel="stylesheet">
<!-- FileSaver is needed to save the generated ZIP file as Download -->
<script src="js/filesaver.js"></script>
<script src="js/loadfile4dom.js"></script>
<script>
var date_now = new Date();
var vJSON = {
"date": date_now.toDateString(),
"generator": "https://niehausbert.gitlab.io/jsoneditor4menu/create_files4json.html",
"files": []
};
var lf4d = new LoadFile4DOM();
var options = {
"debug": false // if true, it will show the hidden <input type="file" ...> loaders in DOM
};
lf4d.init(document,options);
//-----------------------------------------------
//----- Create a new Loader "file2json" --------
//-----------------------------------------------
var file2json = lf4d.get_loader_options("addfile2json","all");
file2json.multiple = true;
// Define what to do with the loaded data
file2json.onload = function (data,err) {
if (err) {
// do something on error, perr contains error message
console.error(err);
} else {
// do something with the file content in data e.g. store in a HTML textarea (e.g. <textarea id="mytextarea" ...>
console.log("CALL: file2json.onload('" + data.name + "')");
var vNode = document.getElementById("outlist");
if (vNode) {
//console.log("CALL: file2json.onload('" + data.name + "'): "+JSON.stringify(data,null,4));
vNode.innerHTML = vNode.innerHTML + "<li>File <tt>" + data.name + "</tt> added to JSON</li>";
vJSON.files.push(data)
} else {
console.error("ERROR: DOM Element 'outlist' does not exist!");
}
}
};
//-----------------------------------------------
// create the load dialog 'file2json'
lf4d.create_load_dialog(file2json);
//-----------------------------------------------
//--- DOWNLOAD JSON -----------------------------
//---Use FileSaver.js by Eli Grey to save JSON---
//-----------------------------------------------
function save2file(pFilename,pContent) {
var file = new File([pContent], {type: "text/plain;charset=utf-8"});
// saveAs() is a filesaver.js function
saveAs(file,pFilename);
}
//-----------------------------------------------
function download_json(pFilename,pJSON) {
var vFilename = pFilename || "my_loaded_files.json";
console.log("download_json('"+vFilename+"',pJSON)");
pJSON = pJSON || {
"date": null,
"generator": "https://niehausbert.gitlab.io/JSONEditor4Menu/create_files4json.html",
"files": []
};
var vStringJSON = JSON.stringify(pJSON,null,4);
vStringJSON = "vDataJSON.files4json = " + vStringJSON;
save2file(vFilename,vStringJSON);
}
</script>
</head>
<body onload="lf4d.create()">
<center>
<h2>Create Data JS-Library for <b><tt>hamburger_menu_app.zip</tt></b></h2>
<h4><a href="https://en.wikiversity.org/wiki/AppLSAC" target="_blank">AppLSAC:</a> Browser as Runtime Environment of WebApps</h4>
</center>
<a href="https://niehausbert.gitlab.io/JSONEditor4Menu/" target="_blank">JSONEditor4Menu</a> is able to export a complete JSON editor with the generated JSON schema.
This tool <tt>create_files4json.html</tt> can be used to alter the <a href="https://niehausbert.gitlab.io/JSONEditor4Menu/hamburger_menu_app/index.html" target="_blank">pre-defined Hamburger Menu</a> for the exported <a href="https://niehausbert.gitlab.io/JSONEditor4Menu/zip/hamburger_menu_app.zip" target="_blank">hamburger_menu_app.zip</a>. If you start <a href="https://niehausbert.gitlab.io/JSONEditor4Menu/" target="_blank">JSONEditor4Menu</a> an base64 encoded ZIP file is handled with <a href="https://stuk.github.io/jszip/" target="_blank">JSZip</a> and the generated JSON schema replaces <tt>hamburger_menu_app/schema/schema4json.js</tt> in the exported ZIP file. If you want to change the exported JSON editor (e.g. CSS and additional features) perform the following steps:
<hr>
<b>(1) Modify the WebApp <a href="https://niehausbert.gitlab.io/JSONEditor4Menu/zip/hamburger_menu_app.zip" target="_blank">hamburger_menu_app.zip</a></b>
<ul id="step1">
<li>
download <a href="https://niehausbert.gitlab.io/JSONEditor4Menu/zip/hamburger_menu_app.zip" target="_blank">underlying ZIP file <b><tt>hamburger_menu_app.zip</tt></b></a> that is used by <a href="https://niehausbert.gitlab.io/JSONEditor4Menu" target="_blank">JSONEditor4Menu</a>
</li>
<li>
unzip <tt><b><a href="https://niehausbert.gitlab.io/JSONEditor4Menu/zip/hamburger_menu_app.zip" target="_blank">hamburger_menu_app.zip</a></b></tt>
</li>
<li>
modify the content in the folder <tt>hamburger_menu_app/</tt> according to your requirements and constraints.
</li>
<li>
compress the folder <tt>hamburger_menu_app/</tt> and generate a new <tt>hamburger_menu_app.zip</tt>.
</li>
</ul>
<b>(2) Modify the JSONEditor4Menu Tool in <a href="https://gitlab.com/niehausbert/JSONEditor4Menu/-/archive/master/JSONEditor4Menu-master.zip" target="_blank">JSONEditor4Menu-master.zip</a></b>
<ul id="step2">
<li>
download <a href="https://gitlab.com/niehausbert/JSONEditor4Menu/-/archive/master/JSONEditor4Menu-master.zip" target="_blank">ZIP file for JSONEditor4Menu</a> from GitLab,
</li>
<li>
unzip <a href="https://gitlab.com/niehausbert/JSONEditor4Menu/-/archive/master/JSONEditor4Menu-master.zip" target="_blank">JSONEditor4Menu-master.zip</a> and
</li>
<li>
start the <a href="https://en.wikiversity.org/wiki/AppLSAC" target="_blank">AppLSAC</a> by loading <tt><a href="https://niehausbert.gitlab.io/JSONEditor4Menu/create_files4json.html" target="_blank">JSONEditor4Menu/docs/create_files4json.html</a></tt> in your browser and press the <tt>Add file to JSON Dialog</tt> button for loading your new <tt>hamburger_menu_app.zip</tt>
</li>
<li>
Press Create Files4JSON tool</a> and load your new generated ZIP-file <tt>hamburger_menu_app.zip</tt> and generate a new file.
</li>
<li>
replace the generated file <b><tt>files4json.js</tt></b> in the folder <b><tt>JSONEditor4Menu/docs/db/files4json.js</tt></b> with your new base64 encoded ZIP-file <b><tt>hamburger_menu_app.zip</tt></b>.
</li>
</ul>
<hr>
<!-- Inject Loaded Filenames into 'outlist' -->
<b>Loaded Files:</b>
<button onclick="lf4d.open_dialog('addfile2json');return false">Add File to JSON Dialog</button> Select <kbd>hamburger_menu_app.zip</kbd>.
<br>
<ul id="outlist">
</ul>
<hr>
<!-- Used Libraries -->
<button onclick="alert('Save files4json.js into JSONEditor4Menu folder\n docs/db/files4json.js \n to update the hamburger_menu_app.zip');download_json('files4json.js',vJSON);return false">Save generated 'files4json.js'</button>
<hr>
<center>
<b>
<a href="https://gitlab.com/niehausbert/JSONEditor4Menu">Support Tool for JSONEditor4Menu</a><br>
<a href="https://gitlab.com/niehausbert/JSONEditor4Menu">GitLab Repository for JSONEditor4Menu</a>
</b>
</center>
</body>
</html>