Sort of your proposal is already available. Newer browsers have the two large files after the first load cached (and it saves disk space on the server):
- File standalone.zip
You can rename it, for example by script, and put it into any folder of your (accessible) file system.
This has to be 'marked' in the calling html-file, see below.
- File standalone-community-8.0.0-dp-4.html.mem (6 MByte)
This must be in the same folder as the calling html-file (the file path is internally derived by LC's output javascript). We should propose to make this changeable.
- File standalone-community-8.0.0-dp-4.js (11 MByte)
This file can reside in any folder of your (accessible) file system. The path has to be given in the calling html-file.
Example.
Using all this, I have for me the following solution:
A folder LC-HTML5, local or on the webserver, containing (see explanation below)
- ONE copy of standalone-community-8.0.0-dp-4.js
- ONE copy of standalone-community-8.0.0-dp-4.html.mem
- For each <project>
a file <project>.html and a folder <project>OUT.
- The folder <project>OUT contains <project>.livecode and <project>sa.zip
= My input stack is <project>.livecode.
= When LC creates by the HTML5 routine the folder <project>N then
...... a script renames and moves the file "standalone.zip"
...... to "<project>OUT/<project>sa.zip"
= Then the script deletes the folder <project>N (incl. contents)
...... and writes into the folder LC-HTML5 a file <project>.html
...... with the following content
...... (minimal, you have to replace <project>).
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My page title here :)</title>
</head>
<body>
<div>
<p>My top poetry here</p>
<canvas style="border: 0px none;"
id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type="text/javascript">
var Module = { canvas: document.getElementById('canvas') };
Module.livecodeStandalone = "<project>so.zip";
Module.livecodeStandalonePrefixURL = "./<project>OUT/";
</script>
<script async type="text/javascript"
src="standalone-community-8.0.0-dp-4.js">
</script>
<p>My bottom poetry here</p>
</div>
</body>
</html>
Note. You may try the improvement in speed by this technique
HERE (extern server, that shows some of my examples from the thread "Successful test" in this subforum).
There is also a demo of simultaneus load for identic modules: 3 rows and 2 columns respectively.This is nearly as fast as a loading of the corresponding single modules.
Edit 2: JUST FOR FUN.
[Next three links are from an extern server].
Start with the
2 diff columns display (the right column is the index page)
In the right index page choose the
3 diff rows display (the bottom row is the index page)
In the bottom index page choose the
3 identic rows display.
The frames are adjustable (drag dividers).
Now you have at left Alice at MacPlusPlus,
...... start the autoscroll there (black dot)
In the right column you have
= A countDown (start one)
= A six-month calendar (choose year and moth of your birth)
= Three drawTime modules
...... (click topleft btn of the second to show countDown to next midnight)
...... (click bottomleft btn of the third to show the date: YYMMDD)
The moduls are called from the following (really) minimal HTML,
I call the files <project>X.html
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5: Your project name here</title>
</head>
<body>
<div>
<canvas style="border: 0px none;"
id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type="text/javascript">
var Module = { canvas: document.getElementById('canvas') };
Module.livecodeStandalone = "<project>sa.zip";
Module.livecodeStandalonePrefixURL = "./<project>OUT/";
</script>
<script async type="text/javascript" src="standalone-community-8.0.0-dp-4.js">
</script>
</div>
</body>
</html>
The frameset is called for example by the file "frameThreeRows.html" (3 diff rows display).
Code: Select all
<!DOCTYPE html>
<html>
<frameset rows="25%,45%,*">
<frame src="./countdownX.html">
<frame src="./calendarX.html">
<frame src="./">
</frameset>
</html>
The HTML tags "frameset"/"frames" are deprecated in HTML5, but there is no good substituting method, perhaps except using "iframe" (requires some work to have a similar view).