The Throwback (retro) template. With large folder and mobile support.

[Chris Harris]

Hi

I just checked, I have used TB8-Core.tpl as main template. It is in the hfs directory and changed the template file to it.

I checked that there is nothing in the diff template area for the root or any other directories

The problem seem to happen on one subfolder of the listed folder. Most BUT not all folders and files have no names shown. .mp3, .mp4 , .mkv and .flv files have names displayed.


Chris

[Chris Harris]

Oops!!

I just found file hfs.diff.tpl in "1". I deleted it and now I can see everything.
My apologies.

Chris

[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...

[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

[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???

[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

[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

[dj]

do you mean a querystring? https://www.w3schools.com/jsref/prop_loc_search.asp
<a hef="pagetoreach.htm?id=%item-url%">☰</a>
see also http://www.rejetto.com/wiki/index.php?title=HFS:_scripting_commands urlvar | A

update:
a working example you find in the new mobil-light template with the newfolder option +
http://rejetto.com/forum/index.php?topic=11754.msg1062933#msg1062933
in the next version I will try a popup dialog

[bmartino1]

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?

Htmp style code it:
It's a case things use for /etc tags and css for a menu:

https://css-tricks.com/three-line-menu-navicon/

[bmartino1]

I was referring to this:After the button is clicked, then that may be a good spot for a photo thumbnail, players, etc...

Also, I had a thought about the speed--duplicate call to %item-url% costs +25% delay and another +5% for the span tag (the sum is about a third); so, howabout no extra button whatsoever, but, instead long-click or right click the filename, and then only one call to %item-url%? I wonder if that is possible.

i only know of this through javscript (as i once had to create a website to disable the righ mouse click:

https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/

is it posible yes, how to go about it no idea

Code: [Select]

document.addEventListener('contextmenu', event => event.preventDefault());
in java sript it about the document and rec ord/listen to events. ( this was later used in hacking atamepts with the double click cookie...

[LeoNeeson]

I was referring to this:After the button is clicked, then that may be a good spot for a photo thumbnail, players, etc...

Also, I had a thought about the speed--duplicate call to %item-url% costs +25% delay and another +5% for the span tag (the sum is about a third); so, howabout no extra button whatsoever, but, instead long-click or right click the filename, and then only one call to %item-url%? I wonder if that is possible.

I've uploaded a mockup of this to give you an idea (it only works the first menu, but needs the correct code to work properly). It's based on the latest Throwback7.

To work fast and don't overload the server, %item-size% and %item-modified% should be only asked to the server "on-demand" when we click on the menu button (I've commented some unused code, and when everything is working, then we could expand the functions and add more buttons on the menu, to handle music and video files, like the original Throwback7 had).

[LeoNeeson]

The %item-size% is fast; however, the %item-modified% is problematic.  It would also be cool to use the modern asynchronous (non-blocking) script methods to shorten the anti-phone date format to a phone friendly mm/dd/yy.  That processing can occur on the client, without blocking the server's progress in listing files.

I agree, but it would be nice to have working that modal screen first (then we can choose if include %item-size% or not). But it seems almost nobody tested my 'Throwback7rev1-preview.tpl', so I'll post the code here, so the 'experts' on macro coding have easier way to read it...

Throwback7rev1-preview.tpl

Code: [Select]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HFS %folder%</title>
<style type="text/css">%style%</style>
<script type="text/javascript" language="javascript">function browseAbleFolderTree(folder) {var infoFolder=folder;var path=folder.split("/");var pathTree="/";var pathTreeResult="";for(pta=1;pta<path.length;pta++) {pathTree=pathTree+path[pta]+"/";pathTreeResult=pathTreeResult +'/<a href="'+pathTree+'" class=\"swapDir\">'+path[pta]+'</a>';}document.getElementById('swapDir').innerHTML = pathTreeResult;}</script>
</head>
<body bgcolor="black" text="#CCCCCC" alink="#88DD88" link="#88DD88" vlink="CCCCCC">
<div>
%upload-link%
%login-link%%loggedin%
<div class=lil><b>Current Directory:</b></div>
<div class=big><a href="/">Home</a><span id=swapDir>%folder%</span><script type="text/javascript" language="javascript">browseAbleFolderTree("%folder%")</script></div>
<div class=body>%folder-comment%%files%</div>
</div>

<div id="InfoModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p style="color:black;"><b>Size:</b> %item-size%</p>
    <p style="color:black;"><b>Date:</b> %item-modified%</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>

[login-link]
<div class=btn><a href="%encoded-folder%~login" class=inbtn><font color="yellow">&#128100; CLICK HERE TO LOG IN</font></a></div>

[loggedin]
<div class=btn><span class=inbtn>&#128100; %user%</span></div>

[style]
body{padding:0px;font-weight:normal;font-family:"Arial Unicode MS","Lucida Sans Unicode","DejaVu Sans","Geneva",Arial,"Helvetica",Sans-Serif;background:linear-gradient(90deg,#000,#001825,#000,#000,#000);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;}
.col,body,.rw,.body,#hm{color:#AAA}
body,.big,.lil,th,comment{font-size:9pt}
.inbtn{font-size:12pt;background:radial-gradient(black,#001825)}
.inpt,.flg,.cmnt,a,body,.inbtn,th,comment,.flg,.lil{color:#8D8}
.big{font-size:14pt}
.flg,.inbtn,.col,.rw,a,.big{font-weight:normal}
.flg,.lil{font-size:8pt}
.inbtn{border:1px solid #222;padding:3px}
.btn{padding:3px;float:right}
.body{border:0px;padding:0px;margin:0px}
a{text-decoration:none;font-size:14pt}
a:visited{color:#CCC}
a:hover{color:yellow}
img{border:0}
.rw{font-size:11pt;border:1px solid #222;width:25%;white-space:nowrap;background:radial-gradient(black,#001825)}
.rwi{font-size:11pt;border:1px solid #222;overflow:hidden;word-wrap:normal;white-space:nowrap;background:radial-gradient(black,#001825)}
.cmnt{font-size:7pt;padding:3px;margin-top:2px}
.inpt,.cmnt{border:1px inset #000}
.col{font-size:14px;color:#AAA;text-align:left;}
.flg{text-align:center;border:1px solid;}
.lol{width:90%;white-space:nowrap}
//.del{background:transparent;border:none;color:#A00;font-size:14pt}
.plus{background:transparent;border:none;color:green;font-size:14pt}
.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}

[upload-link]
<div class=btn><a href="%encoded-folder%~upload" class=inbtn><b><font color="yellow">&#8679; &nbsp;CLICK HERE TO UPLOAD FILES</font></b></a></div>

[up]

[nofiles]

[files]
<table class=lil width=100%>
<tr>
<td><b>%number-folders% Folders, %number-files% Files - Total Size: %total-size%</td>
<td align=right><b>At %timestamp%  %speed-out%/%number-addresses-downloading%KB</b></td>
</tr>
</table><center>
<table class=lol>
<tr>
<th class=col width="95%"><a href="%encoded-folder%?sort=n" style="color:#AAA;font-size:14px">FileName</a></th
</tr>
%list%
</table></center>

[file]
<tr>
<td class=rwi>%new%<a href="%item-url%">&nbsp;<font color="white">&#9671;</font>&nbsp;%item-name%</a></td>
<td class=rw align=center><button class='plus' id="MoreInfoBtn">&#9776;</button></td>
</tr>

[file.mp3 = file.m4a = file.wma = file.flac = file.ogg]
<tr>
<td class=rwi>%new%<a href="%item-url%">&nbsp;<font color="#ADE8F9">&#9836;</font>&nbsp;%item-name%</a></td>
<!-- <td class=rw align=center><a href="mms://%host%%encoded-folder%%item-url%">&#128266;</a></td> -->
<td class=rw align=center><button class='plus' id="MoreInfoBtn">&#9776;</button></td>
</tr>

[file.mp4 = file.m4v = file.mkv = file.flv = file.avi = file.wmv = file.webm]
<tr>
<td class=rwi>%new% <a href="%item-url%">&nbsp;<font color="teal" size="3">&#127909;</font>&nbsp;%item-name%</a></td>
<td class=rw align=center><button class='plus' id="MoreInfoBtn">&#9776;</button></td>
</tr>

[file.jpg = file.jpeg = file.png = file.gif = file.tif = file.bmp = file.webp]
<tr>
<td class=rwi>%new% <a href="%item-url%">&nbsp;<font color="orange" size="3">&#128247;</font>&nbsp;%item-name%</a></td>
<td class=rw align=center><button class='plus' id="MoreInfoBtn">&#9776;</button></td>
</tr>

[link]
<tr>
<td class=rwi>%new%<a href="%item-url%" target="_blank">&nbsp;<font color="pink">&#8663;</font>&nbsp;%item-name%</a>%comment%</td>
<!-- <td colspan=2 class=rw><i>&nbsp;Hyperlink</i></td> -->
<td class=rw align=center><button class='plus' id="MoreInfoBtn">&#9776;</button></td>
</tr>

[folder]
<tr>
<td class=rwi>%new%<a href="%item-url%">&nbsp;<font color="#FFFDA8" size="3">&#128193;</font>&nbsp;<b>%item-name%</b></a></td>
<td class=rw align=center><i>folder</i></td>
</tr>

[comment]
<div class=cmnt>%item-comment%</div>

[folder-comment]
<div class=cmnt>%item-comment%</div>

[error-page]
{.if|{.match|*.php*;*.js|%url%.}|{:{.disconnect.}:}.}{.add header|Cache-Control: no-cache, max-age=0.}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">%content%</html>

[not found]
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=/"><TITLE>404</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>You have found the 404 page.</h2>Redirecting.</center></body>

[overload]
<META HTTP-EQUIV="Refresh" CONTENT="3;URL=./"><TITLE>Overload</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>High traffic mode engaged.</h2>Returning to previous page after overload has cleared.</center></body>

[max contemp downloads]
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=./"><TITLE>Downloads</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>There are ongoing downloads.</h2>More available <i>after</i> current downloads finish.</center></body>

[unauthorized]
<META HTTP-EQUIV="Refresh" CONTENT="3;URL=./"><TITLE>Login</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>You're not logged in.</h2>Name and password do not match.<br><br>If there's no login, try a different<br>browser for your phone.</center></body>
{.if|%user%|{:{.set|n|{.from table|#tries|%ip%.}.}{.inc|n.}{.if|{.{.^n.} > 20.}|{:{.set ini|{.no pipe|ban-list={.from table|#ini|ban-list.}%ip%#attack? {.time.}|.}.}{.set table|#tries|%ip%=0.}:}|{:{.set table|#tries|%ip%={.^n.}.}:}/if.}:}.}

[deny]
{.redirect|/.}

[ban]
{.disconnect.}

[upload]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload to: %folder%</title><style type="text/css">%style%</style>
<script type="text/javascript" language="javascript">var counter = 0;function addUpload() {counter++;if (counter < 6) document.getElementById("addupload").innerHTML += "<br><input name=\"fileupload"+counter+"\" size=\"50\" type=\"file\">";if (counter == 5) {document.getElementById("addUploadLink").innerHTML = "<a style=\"cursor:text;color:yellow;\">- PLEASE PUT MULTIPLE FILES INTO A ZIP FILE -</a>";}}</script>
</head><body bgcolor="black" text="#CCCCCC" alink="#88DD88" link="#88DD88" vlink="CCCCCC">
<div class=btn><span class=inbtn>&#128100; %user%</span></div>
<div class=lil><b>Upload to:</b> %folder%</div>
<div class=big><a href="./">&#8678; Back</a></div>
<div class=body>
<center>
<b>Free Space Available For Upload: %diskfree%</b><br><br><br>
<form action="%encoded-folder%" target=_parent method=post enctype="multipart/form-data" onSubmit="frm.upbtn.disabled=true; return true;"><div id=addupload><input name="fileupload1" size=50 type=file></div><a id=addUploadLink style="cursor:pointer;" onclick="addUpload();">- Add Upload -</a><br><br><input name=upbtn type=submit value="Send File(s)"></form>
Results page appears after uploads complete
</center>
</div>
</body></html>

[upload-results]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="Refresh" CONTENT="4;URL=./">
<title>Upload results for: %folder%</title><style type="text/css">%style%</style>
</head><body bgcolor="black" text="#CCCCCC" alink="#88DD88" link="#88DD88" vlink="CCCCCC">
%loggedin%
<div class=lil>Upload results for:</div>
<div class=lil>%folder%</div><div class=body>%uploaded-files%<br><br><a href="%encoded-folder%" target=_parent class=big><font color="yellow">&#8678; Go Back</font></a></div>
</body></html>

[upload-success]
<li><font size=3><b>SUCCESS!</b> Uploaded: %item-name% - %item-size% (Speed: %speed% KB/s)</font>

[upload-failed]
<li><b>FAILED!</b> Error while uploading: %item-name%: - %reason%

[newfile]
&nbsp;<span class=flg>&nbsp;NEW&nbsp;</span>

[bmartino1]

this thread alone, has me so far confused...

I'm kinda just looking for user input atm.

@danny
Any progress with your last needs danny?

Last i checed you were doing a contex menu for the webpage

You were needing a logn web form page(wokring on it-- slow)

@Leo, sorry, haveint had time to downloaad and tewst your revision? maybee already in post, but what addon/change template wise

Thanks for your help DJ, to me, you are a far more advance code / hfs macro person. I appreaciate your input and skills to further this renevation of dannys code.

--I see it has inspired you on other previous code templates of your

MAINLY - just wanted to to be in the resecnt on the form home page.

Generaly check up on this thread