The really fast Throwback (retro) template. Large folders and phones? No problem

[danny]

So, I wrote one with no classes, no jquery, no stylesheet and no static sizing.  It fits the phone screen better. 

Back when the web was new, sites had a sharp clarity look. The blue&silver colors probably help too. 
The 90's style of HTML forces more attention to detail, like using a little paint brush instead of a big paint brush. 

I was curious to see if there would be a difference.  There is!  It really gets a lot of files onto the phone screen. 

But, I was wondering if there would be a significant functional difference.  There isn't.

Anyway, enjoy the brand new antique. 
(attached below)

Edit:  Since Jan.2019: Throwback1998_V2 is updated to list large folders even faster. 
Edit:  Since Feb.2019: Throwback10 has a similar but updated look, plus a file search box.

[danny]

. . . I don't see any more enhancements available without slowing down the server. . .

That does need refined.

The problem:
Slowdowns are caused by a feature inside file list loop (load*files*users).
Macros and server side scripts are disaster when magnified times the number of files.

Example:
Currently, the delete feature costs 28% of the speed when done like this:
   {.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><button type='submit' name='action' value='delete' class='del' onclick='return confirm("Delete %item-name%?")'>X</button></form></td>.}
if 40 users browsing 1000 files, the code gets 40,000 times bigger, and you get a broken server

The solution:
Instead, if it could be moved, then it would cost less than 9% for this:
<td><a href="somewhere-else">X</a></td>

That difference would move a lot of bulk and some cpu load, outside of the file listing.  But, how do I do it?
At least, how do we move most of that, outside the loop? 

[LeoNeeson]

Back when the web was new, sites had a sharp clarity look. The blue&silver colors probably help too. The 90's style of HTML forces more attention to detail, like using a little paint brush instead of a big paint brush.

+1 for using <marquee><b>HFS</b></marquee>, that gives the nostalgic touch.

The problem:
Slowdowns are caused by a feature inside file list loop (load*files*users).
Macros and server side scripts are disaster when magnified times the number of files.

Example:
Currently, the delete feature costs 28% of the speed when done like this:
   {.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><button type='submit' name='action' value='delete' class='del' onclick='return confirm("Delete %item-name%?")'>X</button></form></td>.}
if 40 users browsing 1000 files, the code gets 40,000 times bigger, and you get a broken server

Sometime ago, I was thinking in another approach: removing the delete button, and adding a "+" button instead, which when clicked, it opens a modal screen (in dark grey color) with three nice and big buttons, giving options like: Rename, Delete and Move (and we could even add a 'Send to' when using a mobile). This way, the 'server side' check (to verify if we could delete the file), is only processed on-demand when that "+" button is clicked. I think this could be a win-win situation to solve this, not only because we don't overload the server, but we also add more options. The hard part is coding it...

[danny]

Sometime ago, I was thinking in another approach: removing the delete button, and adding a "+" button instead, which when clicked, it opens a modal screen (in dark grey color) with three nice and big buttons, giving options like: Rename, Delete and Move (and we could even add a 'Send to' when using a mobile). This way, the 'server side' check (to verify if we could delete the file), is only processed on-demand when that "+" button is clicked. I think this could be a win-win situation to solve this, not only because we don't overload the server, but we also add more options. The hard part is coding it...

Somehow, the "+" icon, when clicked, has to transport that particular %item-url% to a separate page with the delete, rename, move (management) options on it.

I wonder if there is an example with at least as much as carrying the specific %item-url% to another page?

[bmartino1]

Classic elegance, some new features, and a lot more speed. . .
Tested with HFS 2.3K and 2.3L

Features:
Phone and Tablet screen-support, including good tap targets and easily readable fonts. 
Tested with both iPhone and Android.

Much faster file listings in lengthy folders because there's no slow checkboxes.
Efficient and colorful unicode icons display twice as fast.

Automated error correction for users.  When needed, it displays very polite messages briefly, and then quickly sends the user back to what they wanted to do.  It maintains the appearance of good working order.  So, you're free to use options like the "max connections" and "maximum simultaneous downloads from single address" limits to manage your bandwidth. 

Quickly disconnects hack scans; and that feature lowers the cpu load, improving speed.

Easy for users, with simplified interface, column layout, black background, and readable fonts.  Classic! 
So, easy to use that it is Cat-operable on a tablet, apparently.

Works nicely on a variety of screen sizes, from pocket size to wall size displays.

How to use: Save the tpl file in the same folder as hfs.exe, and then: Menu, HTML-template, Change-file, and choose the tpl file.

i saw alot of template chages, and revision, i was not able to save them all, but i thought it woth to downlaod at the time. so here are your tempaltes older veriosn that i have downlaoed and never touched:

https://drive.google.com/drive/folders/1AIU5-jPJm2yr5CU8fbeT-sbQmq6dK0Xy?usp=sharing

[danny]

i saw alot of template chages, and revision, i was not able to save them all. . .

Development was in phases.  You only need versions 4, 7, 9.....

Versions 1, 2, 3, 4 are the first phase, cumulating in Throwback4. 
Throwback4 is a good reference classic template and is PC-centric.

Versions 5, 6, 7 are the second phase, cumulating in Throwback7.
Throwback7 is refined to work well on the PC, tablet and phone.

Versions 8 and 1998 are development versions for a third phase. 
Version 9, uses the guidelines revealed by the '98 version and most of the code from version 8, with the result of sharper looking tables and web browsing speed that is quicker than local file browsing. 
Throwback1998v2 adopts v9's speedy rendering and gets the newer features pasted on, while retaining the '98 look that end users find really easy to use. 

4th phase starts with Throwback10's integration of the improvements to search, sort,  and a modernized version of the '98 theme for ease of use. More than serving files quickly, it also helps the end users find files quickly. Photo thumbnails with load-while scroll bandwidth saver, introduced because of today's meaningless DSC??? photo filenames.  Mp3 shuffle player introduced. 
At Throwback11, we got streaming validated markup (non-blocking) so that it can work at any internet speed, and the markup is able to display the file lists, even if the connection limit to single address is 1 (although the photo version would prefer 8 ).  More integration so that the thumbnails, slideshow, mp3 shuffle player, use the results from sort and search. 
Throwback12 has overload-reduction, also you can make a new folder from the upload page. Even the big 'Photo' version could be used for high load public distribution because it will simply adapt itself to the non-photo version if server load is high. And it will take transparent measures to decrease server load (so that it can return to displaying photo thumbnails as soon as feasible to do so). 
Work on the 4th phase continues...

[bmartino1]

Thx Danny.

BTW, haven't tested but have an idea for login page

After reviewing old posts:
http://rejetto.com/forum/index.php?topic=4288.0
http://rejetto.com/forum/index.php?topic=2690.0

Why not add a folder called login via vfs (vitural folder not real)
Right mouse click / properties / different template

This code:

Code: [Select]

%login-link%
%loggedin%

Not tested, but would add a web link to a login only page???

[danny]

Thx Danny.
BTW, haven't tested but have an idea for login page
After reviewing old posts:
http://rejetto.com/forum/index.php?topic=4288.0
http://rejetto.com/forum/index.php?topic=2690.0
Why not add a folder called login via vfs (vitural folder not real)
Right mouse click / properties / different template
This code:

Code: [Select]

%login-link%
%loggedin%
Not tested, but would add a web link to a login only page???

That uses a browser's built in (or not) basic auth pop-up login box.  Support for that is diminishing.  We need an html login form instead. 

I think it would be elegant to add a real html login form into the error handler [unauthorized] section, because it is the default landing page for all browsers that don't have a basic auth login box built in.  So, then, instead of a nonstop error, you'd just log in (with a real login form).  It is very nice when error pages actually solve errors.  However, still need that login form. 
Code for it should probably have form and post tags.

[LeoNeeson]

I wish I could have an answer to help you to complete this, but sadly I don't know how to we can make a JavaScript function work correctly with a HFS Macro (like %item-added%). I was thinking using a 'onclick' action call to show a modal with a few option buttons.

And today I've found something interesting here to start testing with (I've adapted and minified the code, just to give you an idea, so you can replace the actual red 'delete' button, with this new 'plus' green button). Have a look:

Code: [Select]

<html>
<head>

<style>
.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:50%;text-align:center}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}
</style>

</head>
<body>

<button id="MoreInfoBtn" style="background:transparent;border:none;color:green;">&#10010;</button>

<div id="InfoModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>FileSize: %item-size%</p>
    <p>TimeStamp: %item-added%</p>
    <button value=1 class="option_button">Rename</button>
    <button value=2 class="option_button">Delete</button>
    <button value=3 class="option_button" onclick='moveClicked()'>Move</button>
  </div>
</div>

<script>
var modal=document.getElementById("InfoModal"),btn=document.getElementById("MoreInfoBtn"),span=document.getElementsByClassName("close")[0];btn.onclick=function(){modal.style.display="block"},span.onclick=function(){modal.style.display="none"},window.onclick=function(n){n.target==modal&&(modal.style.display="none")};
</script>

<script>
document.querySelectorAll(".option_button").forEach(function(o){o.onclick=function(){window.alert(o.value)}});
</script>

</body>
</html>

It's only a basic idea, still needs some work to be done to function properly.
 

[bmartino1]

+1 for using <marquee><b>HFS</b></marquee>, that gives the nostalgic touch.
Sometime ago, I was thinking in another approach: removing the delete button, and adding a "+" button instead, which when clicked, it opens a modal screen (in dark grey color) with three nice and big buttons, giving options like: Rename, Delete and Move (and we could even add a 'Send to' when using a mobile). This way, the 'server side' check (to verify if we could delete the file), is only processed on-demand when that "+" button is clicked. I think this could be a win-win situation to solve this, not only because we don't overload the server, but we also add more options. The hard part is coding it...

I vaguely remember that template. I'll try to find out what happened to it.

From other searching I found this template:
https://github.com/heiswayi/hfs-templates/blob/master/HFSTemplate_AllyssaFramework_v1_2.tpl


http://rejetto.com/forum/index.php?topic=7248.0

Also, looks like someone made a fork of hfs: https://github.com/drapid/HFS?files=1

[dj]

[file]

Code: [Select]

{.if|{.get|can delete.}|<span onclick='del("%item-url%")'>x</span>.}
and add script

Code: [Select]

<script>
function del(it) {
if(!confirm("Delete "+it+"?")) return 0;
var xhr = new XMLHttpRequest();
xhr.open("POST", "%folder%")
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.onload = function() {document.write(xhr.responseText);}
xhr.send("action=delete&selection="+it)
}
</script>
tested with chrome,FF,Edge


Update: more elegant

[file]

Code: [Select]

{.if|{.get|can delete.}|<span class='del' data-it='%item-url%'>x</span>.}
and add script at the end

Code: [Select]

<script>
document.querySelectorAll('.del').forEach(function(userItem) {
  userItem.addEventListener('click',function(){del(this.getAttribute("data-it"))})
})
</script>
or use a single event handler


Update2: if {.get|can delete.} slowes down, you can try

[file]

Code: [Select]

<span class='del' data-it='%item-url%'>x</span>
and add to function del

Code: [Select]

if (!'{.get|can delete.}') return 0

[danny]

. . .Update: more elegant. . .

Thanks!  Yes, that is more elegant!

See if I incorporated your delete feature as intended? 

Edit: File removed, because of the better version at the next post.

[dj]

Remove the link from the span and add ;cursor:pointer to the style.

You can even hide the X (remove the textContent from the span):

Code: [Select]

<script>if('{.get|can delete.}') document.querySelectorAll('.del').forEach(function(userItem) {userItem.textContent=' \u2718'; userItem.addEventListener('click',function(){del(this.getAttribute("data-it"))})})</script>
Place the script before the first </body> tag


[upload]
remove frm.upbtn.disabled=true; and add  multiple to the input tag

[danny]

Remove the link from the span and add ;cursor:pointer to the style.

Thanks.  I got that pointer edit done and re-uploaded the file. I didn't make the other changes because I got stuck. [...] So, could you make changes to the template and upload it? 
Edit:
I see it has appeared at the post just above.  THANKS!!
When I checked with the stopwatch, the speed is good too!
You did a wonderful job in showing how to add features without bogging down HFS file listing speed.  Kudos!!!

Edit:  Stopped by to quality control version 9.  Seems fine.  What happened to it, is that on theme/appearance, it lost a battle with Throwback1998, HTML3 sport version.  SO, version 10 has the preferable looks, but has the function of version 9.  In my opinion, the last authentic classic was Throwback11.  After that point is more, more, more features.  But they had benefit from the classic's speed small size and stability.  Anyway, Throwback9 passed re-validation testing. 

[danny]

I wonder if it is possible to replace the X with ☰ (menu) or checkbox so as to provide for more features (at no cost to speed)? 
For example, click on ☰ to reach a page with that one file listed along with options to delete, rename, move or play?