rejetto forum

Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: danny on May 08, 2018, 05:33:00 PM

Title: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: danny on May 08, 2018, 05:33:00 PM
Classic elegance, some new features, and even more speed. . .

Features:
iPhone, Android, and PC screen-support, including good tap targets and easily readable fonts. 
Photo Thumbnails via load-on-scroll bandwidth saver, Slideshow, and, mp3 shuffle player.
Efficient and colorful unicode icons display twice as fast.

Streaming HTML works with any speed internet connection.
Faster file listings in lengthy folders because there's no slow checkboxes.
New:  Create a new folder, is located on the upload page.

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, thereby keeping the appearance of good working order.  Auto-queue function provided.  Quickly disconnects hack scans, automatically.

Easy for users, with simplified interface and column layout. Classic!
Automatically provisions features proportionate to server load.
Find files easily with the File Search Box, and sort-by newest, etc...

Install:  Use the same folder as hfs.exe, then: Menu, HTML-template, Change-file, and choose the tpl file.
Kudos:  DJ for the delete script, slideshow and music player; and, Leo for the phone browser login.
Versions:  Photo version's full features, MP all except thumbnails, or basic version for business.
  PC and Phone/Tablet:
 (http://rejetto.com/forum/index.php?action=dlattach;topic=12055.0;attach=9473;image) (http://rejetto.com/forum/index.php?action=dlattach;topic=12055.0;attach=9472;image)     (http://rejetto.com/forum/index.php?action=dlattach;topic=12055.0;attach=9475;image) (http://rejetto.com/forum/index.php?action=dlattach;topic=12055.0;attach=9474;image)

HFS 2.3K:  https://drive.google.com/open?id=1TVfCfxygKXShEIZT9cnumO_jX_9Ssefy
HFS 2.3K patches:  security update (http://rejetto.com/forum/index.php?action=dlattach;topic=11913.0;attach=9251) and also starting (http://rejetto.com/forum/index.php?topic=13068.msg1064461#msg1064461)
HFS 2.4:  http://www.rejetto.com/hfsfiles/hfs24rc2.exe
Title: About adding 'Remote upload'...
Post by: LeoNeeson on May 11, 2018, 09:28:48 AM
Nice, an old-school template! (and it loads very fast!) :)


A little bit off-topic...

Since you seem to know about template stuff, I have this question for you: do you know how to add a 'remote upload' box? For example, you have this URL: http://linux.com/distro.iso and want to download this ISO file directly to the server, in the current shared folder. So, you write that URL in a input box and press a 'Save' submit button, and then the HFS server starts downloading the file, and when it ends, it puts the file in the current shared folder. How handy this may come in? Imagine you are on a mobile connection and want to leave the server downloading a file, so when you come home, you have the file ready (and it's automatically shared on that folder). Is this doable?...

> Update: I was thinking in something like this: (click on image to enlarge)
(https://i.imgur.com/2SHXryum.png) (https://i.imgur.com/2SHXryu.png)

I've only added this to your template:

Code: [Select]
<div class=lil><b>Remote upload URL:</b>
<input type='text' name='search' value=''>
<input type='submit' name='submit' value='Transload'></div>

Full code on how it looks like (it's currently a mock-up):
(This is only a preview code, it needs the actual functions)
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=iso-8859-1">
<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">
//browseAbleFolderTree
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>
<div>
%upload-link%
%login-link%%loggedin%
<div class=lil><b>Remote upload URL:</b>
<input type='text' name='search' value=''>
<input type='submit' name='submit' value='Transload'></div>
<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>
</body>
</html>

[login-link]
<div class=btn><a href="%encoded-folder%~login" class=inbtn><img align=top src="/~img27"><font color="yellow"> CLICK HERE TO LOG IN</font></a></div>

[loggedin]
<div class=btn><span class=inbtn><img align=top src="/~img27" alt=""> %user%</span></div>

[style]
body{padding:10px;font-weight:normal;font-family:"geneva",arial,"helvetica",sans-serif;background:black;margin:3}
.rw,.body,.inpt,.flg,.cmnt,th,comment,.flg,.inbtn,.col{background:#000}
.col,body,.rw,.body,#hm{color:#AAA}
body,.big,.lil,th,comment{font-size:9pt}
.inbtn{font-size:12pt}
.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}
a{font-size:14pt}
.flg,.lil{font-size:8pt}
.inbtn,.body{border:3px solid #222}
.btn,.body{padding:15px}
.body{margin:15px}a{text-decoration:none}
a:visited{color:#CCC}
a:hover{color:yellow}
img{border:0}
.rw{font-size:11pt;border:2px solid #222}
.cmnt{font-size:7pt;padding:3px;margin-top:2px}
.inpt,.cmnt{border:1px inset #000}
.col{font-size:13pt}
.inbtn{padding:5px}
.btn{float:right}
.flg{text-align:center;border:1px solid;}

[upload-link]
<div class=btn><a href="%encoded-folder%~upload" class=inbtn><img align=top src="/~img32" alt=""><b><font color="yellow"> 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>
<table width="100%">
<tr>
<th class=col><a href="%encoded-folder%?sort=n" style="color:#AAA;font-size:14px;">FileName</a></th>
<th class=col><a href="%encoded-folder%?sort=s" style="color:#AAA;font-size:14px;">Size</a></th>
<th class=col><a href="%encoded-folder%?sort=t" style="color:#AAA;font-size:14px;">Date</a></th>
<th></th>
</tr>
%list%
</table>

[file]
<tr>
<td class=rw>%new% <a href="%item-url%">&nbsp;<font color="white">&#9671;</font>&nbsp;%item-name%</a>%comment%</td>
<td class=rw align=center>%item-size%</td>
<td class=rw align=center>%item-modified%</td>
{.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><input type='submit' name='action' value='delete' onclick='return confirm("Sure?")' ></form></td>.}
</tr>

[file.mp3 = file.m4a = file.wma]
<tr>
<td class=rw>%new% <a href="%item-url%">&nbsp;<font color="#ADE8F9">&#9836;</font>&nbsp;%item-name%</a>%comment%</td>
<td class=rw align=center>%item-size%</td>
<td class=rw align=center>&nbsp;<a href="mms://%host%%encoded-folder%%item-url%">MediaPlayer</a>&nbsp;</td>
{.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><input type='submit' name='action' value='delete' onclick='return confirm("Sure?")' ></form></td>.}
</tr>

[link]
<tr>
<td class=rw>%new%<a href="%item-url%">&nbsp;<font color="white">&#8663;</font>&nbsp;%item-name%</a>%comment%</td>
<td colspan=3 class=rw><i>&nbsp;Hyperlink</i></td>
</tr>

[folder]
<tr>
<td class=rw>%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>
<td class=rw align=center>%item-modified%</td>
<td></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">%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>Returning to previous page.</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]
<html>
<head>
<title>Upload to: %folder%</title>
<style type="text/css">%style%</style>
<script type="text/javascript" language="javascript">
//add upload input
var counter = 0;
function addUpload() {
counter++;
if (counter < 7)
document.getElementById("addupload").innerHTML += "<br><input name=\"fileupload"+counter+"\" size=\"50\" type=\"file\">";
if (counter == 6) {
document.getElementById("addUploadLink").innerHTML = "<a style=\"cursor:text;color:yellow;\">- PLEASE PUT MULTIPLE FILES INTO A ZIP FILE -</a>";
}
}
</script>
</head>
<body>
<div class=btn><span class=inbtn><img align=top src="/~img27" alt=""> %user%</span></div>
<div class=lil><b>Upload to:</b></div>
<div class=big><a href="/" target=_parent class=swapDir>Home</a>%folder%</div>
<div class=body>
<center>
<b>Free Space Available For Upload: %diskfree%</b><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="Upload Selected File(s)"></form>
</center>
</div>
</body>
</html>

[upload-results]
<html>
<head>
<title>Upload results for: %folder%</title>
<style type="text/css">%style%</style>
</head>
<body>
%loggedin%
<div class=lil>Upload results for:</div>
<div class=big>%folder%</div><div class=body>%uploaded-files%<br><br><a href="%encoded-folder%" target=_parent class=big><img align=bottom src="/~img14" alt=""> Go Back</a></div>
</body>
</html>

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

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

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

Any idea on how to make this work?... ???
Title: remote
Post by: danny on May 11, 2018, 11:06:52 AM
Nice, an old-school template! (and it loads very fast!) :)

Thanks! 
It has been an adventure!  I had wanted to make HFS look and run like I remembered from long ago.  A friend had it on his server, and it was fast back then. 

To regain the speed, I've been using my stopwatch, and the pingdom test (which has per-element timings).  Currently, the point is twofold--reduce micro-pauses that occur per each file in a listing (so they won't add up to a large pause), and make the template as small and clean as possible.

After that, it is a good head start to add features and still run fast too.
Since you seem to know about template stuff, I have this question for you: do you know how to add a 'remote upload' box? For example, you have this URL: http://linux.com/distro.iso and want to download this ISO file directly to the server, in the current shared folder. So, you write that URL in a input box and press a 'Save' submit button, and then the HFS server starts downloading the file, and when it ends, it puts the file in the current shared folder. How handy this may come in? Imagine you are on a mobile connection and want to leave the server downloading a file, so when you come home, you have the file ready (and it's automatically shared on that folder). Is this doable?...
That's a server-side script, possibly ajax?  I don't know how to do that.  But, if I find out, first thing on the list is a real login Form, due to diminishing support of browser-provided login box for basic auth. 
Anyway, I do that remoting task myself, not with a web server, but with tightvnc (or realvnc) on the server and bvnc on the phone.  For better security, avoid commonly scanned ports (there's usually a published list), so not 5900.  Screen resolution plays an important role in bandwidth consumption and usability--at the server, 1024x600 is fastest or 1280x720 will work to vnc a server from a phone. At the phone, in bvnc, you can change the color mode to 256, so that the bandwidth consumption is minimal. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on May 11, 2018, 11:18:16 PM
Love the simplicty, and ease / look
( if eel like i can finaly use standard html coding to hfs again :)

On another not,

I think the CSS and HTML code (JavaScript could active the login box, here is what w3 schools has about it.0

https://www.w3schools.com/howto/howto_css_login_form.asp

looking into this

I only know of a php soulion to the web form, w3 scholls claims thaetre is a jhavascript (ajax/arco/etc)
way to acomplis a login form

thanks fr your help/support and work danny
Title: Updated for even more speed.
Post by: danny on May 12, 2018, 09:35:56 AM
Revised to double the speed.  Updates at post#1

Now, it goes maximum speed by default.  The pingdom test reports: Faster than 99% of websites. 

P.S.
This got put to work on my own server. 
Title: Updated for even more speed.
Post by: LeoNeeson on May 12, 2018, 10:34:57 AM
P.S. My other project is startfetch.com  Picture this, you're at your pc, your phone messenger goes off (facebook, hangouts, whatsapp), and do you go get it to type on the little screen if the battery permits, or do you go to startfetch.com, click once and enjoy the full size keyboard?  Peek under the hood (view source) and check the code.  That another case of "looks simple, after it is done" and that all fits in just 24k.
That was fast! opening StartFetch.com was blazing fast (I see you've encoded icons in Base64 to speed things up, nice trick). I really miss those good old days where every website was almost as fast as that. But on these days, only checking emails via webmail, could take 1.5MB at best (and all thanks to WebFonts and JavaScript libraries). Thanks God there is still POP3/IMAP to check emails, but for all the rest, I get used to overload my browser to view just a simple website. And the same happens with software and games, everything it's made to make our PCs slow without sense. That's why I love HFS, because it's small enough to be a full featured-packed program.

Anyway, I do that remoting task myself, not with a web server, but with tightvnc (or realvnc) on the server and bvnc on the phone.
Thanks, I'll have a look to bVNC (https://play.google.com/store/apps/details?id=com.iiordanov.freebVNC&hl=en) (it looks good).

That's a server-side script, possibly ajax? I don't know how to do that.
Don't worry. I'll leave the question open if someone else knows what server-side script (macro) use.

Revised to double the speed.  Updates at post#1 and 2. 
Good work! :)
Title: Update. faster page loading
Post by: danny on May 15, 2018, 10:00:30 AM
Updates are located at the first post. 

I completed the transition to Unicode icons so that Throwback4.tpl never uses an http request for icon display.  That provides significantly faster support for multiple users.  Brisk browsing is possible despite multiple concurrent downloads.

Edit: 
Saved for reference.
Title: Update. more thorough iPhone and Android support
Post by: danny on May 23, 2018, 08:37:24 AM
TB5.tpl

Changes:
I simplified the css and layout to better support phones.
Features streamlined so that it is easier to use.
The Classic HFS look now displays well on any size screen.  Even a phone screen vertical, still looks right.

P.S.
We were at the grocery store, forgot the list and used the phone to fetch a recipe from home (so that we could buy the supplies without having to drive back home for the list).  This event is what had inspired me to make an update.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on May 23, 2018, 11:00:42 AM
I didn't have the chance to test 'Throwback4.tpl' (perhaps you could attach it on this message (https://rejetto.com/forum/index.php?topic=12055.msg1062756#msg1062756) if you want), but 'TB5.tpl' works great and fast. :)
Title: The really fast Throwback (retro) template. Updated. again.
Post by: danny on May 23, 2018, 04:29:43 PM
I didn't have the chance to test 'Throwback4.tpl' (perhaps you could attach it on this message (https://rejetto.com/forum/index.php?topic=12055.msg1062756#msg1062756) if you want), but 'TB5.tpl' works great and fast. :)
Thanks. And, you gave me a great idea!   I have uploaded TB6.tpl

Edit:
Saved for reference
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on May 24, 2018, 10:12:42 AM
Small enhancements:

Throwback6x.tpl - Change log:
- Font smoothing
- One line per file
- New background color

Throwback6y.tpl - Change log:
- New (https://www.compart.com/en/unicode/U+2718) transparent delete button. (https://en.wikibooks.org/wiki/Unicode/List_of_useful_symbols)
- Now displays only the file date
- Small tweaks on column width
 
Still missing:

- Hides columns if screen is small
- Use divs instead of tables? (info (https://stackoverflow.com/a/40338683))
- "Parent Directory" like apache has.

(Feel free to fix/enhance it, if you find something wrong)

Cheers,
Leo.-
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on May 24, 2018, 06:25:21 PM
Small enhancements:

- Font smoothing
- One line per file
- New background color

Still missing:
- "Parent Directory" like apache has.

(Feel free to fix/enhance it, if you find something wrong)

Cheers,
Leo.-

I thought hfs bind to folder was the appacbr equilevent to parent folder.

So path c:/webroot/hfs.exe
Has a folder (parent directory of site)
C:/webroot/hfs

Right click on the house k. The hfs and bind folders, chose the path. ???

Does this not accomplish that?
Title: The Throwback (retro) template. Exploring phone screen formatting options.
Post by: danny on May 24, 2018, 07:01:48 PM
I like some of the ideas there!

But, I did run into a few curiosities. . .
 
The table can't have every col as a % because then the delete button won't appear.  On the phone, it is intentionally expanded off the right side, when the phone is held vertical; and that's because it is more important to see the filenames than to have the table stay within the bounds of the screen (especially 5cm screen). 

The fog colored background is pretty cool, but background of table cells and background of buttons probably need to be darkened, considerably. Then it gets very good because the space-waste border is redundant and should be shrank to 1px or omitted.  Yes, that would work much better on phones (less screen spent on boxes, more room for text). 

Single line filename truncation is not suitable, because this: 
Fantastic home movie 1
Fantastic home movie 2
Fantastic home movie 3
is rendered as:
Fantastic ho...
Fantastic ho...
Fantastic ho...
 :o

So, it looks like we'd rather mash the date stamp instead.  It is the battleship in our bathtub. 
The unnecessary clock is the real problem--we need only M/D/Y.
The macro for that would multiply the processing delay*users*downloads*files server-side, causing decreased server capacity, Or. . .
Javascript for that would multiply the processing delay*files client-side, resulting in slightly increased server capacity.  Not bad.
Evidentially, it needs to be in javascript (scalable because it runs on the user's cpu). 

Here's the variable to attack:  %item-modified%  wasn't made with phone screens in mind. 
This needs changed by javascript, so that it shows the date in M/D/Y format: 
<script type="text/javascript">document.write('%item-modified%')</script>
needs a filter
I wonder if a javascript similar to this:  http://befused.com/javascript/get-filename-url could be used to trim %item-modified% down to M/D/Y format by identifying the space " " and omitting both the space and the unnecessary clock after it? 

Title: Throwback (retro) template (experimental revision)
Post by: LeoNeeson on May 25, 2018, 01:30:50 AM
The table can't have every col as a % because then the delete button won't appear.  On the phone, it is intentionally expanded off the right side, when the phone is held vertical; and that's because it is more important to see the filenames than to have the table stay within the bounds of the screen (especially 5cm screen).
@Danny: I agree, my mistake, sorry, I didn't have enabled the delete button when doing edits (take all this like my customized and very experimental version, you don't have to incorporate my changes to your version, which is already working great).

I choose to cut file names, because I usually have very long file names and they look like a mess on small screens. With JavaScript, I was also planning to use the tag 'title' to show the complete filename on mouse over, but on phones I guess that won't work).

To show %item-modified% as MM/DD/YYYY, change this:
%item-modified%

...to this:
{.cut|1|10|%item-added%.}

(Source (http://rejetto.com/forum/index.php?topic=11546.0))



@BMartino1: I was thinking in adding a "Parent Directory" item (like another item on the file list), at the top of the file list (except on root), like Apache usually does. See how this works, on this live example: https://unicode.org/Public/emoji/



I still have to see how to hide columns on small screen sizes (too much work for today, perhaps I'll do it on the next few days)

(I've uploaded a new revision, here. (http://rejetto.com/forum/index.php?topic=12055.msg1062792#msg1062792) Report any bugs, if you find them)
Title: Re: Throwback (retro) template (experimental revision)
Post by: danny on May 25, 2018, 03:55:38 AM
To show %item-modified% as MM/DD/YYYY, change this:
%item-modified%
...to this:
{.cut|1|10|%item-added%.}
(Source (http://rejetto.com/forum/index.php?topic=11546.0))
Sorry, but I've got some bad news.  That task repeats per each file.
Unfortunately, that macro, runs on the server's cpu, for reduced multi-user capacity and slower file listings. 
Instead, we need to use the client's cpu for that, with javascript. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Mars on May 25, 2018, 06:48:59 AM

To force a date to specific format , use  the Macro   time | new format | when=date

%item-modified% use by default  the system format, it is necessary to have universal format  by using
%item-modified-dt% or %item-added-dt%

example:
%item-modified% => 05/25/16 15:00:56
%item-modified-dt% => 42515.6256593403


{.time|mm/dd/yy|when=%item-modified-dt%.}


http://rejetto.com/wiki/index.php?title=HFS:_Time_format#Text_formatting

Code: [Select]
[+file]
<td>%item-size%B<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.time|m/d/yy|when=%item-modified-dt%.}<td>%item-dl-count%

it is possible to have the date and time on two lines using separate macros

Code: [Select]
[+file]
<td>%item-size%B<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<p>{.time|hh:nn:ss|when=%item-modified-dt%.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<p>{.time|hh:nn:ss|when=%item-modified-dt%.}<td>%item-dl-count%

by creating a personal alias this can give more clarity to the template

[+special:alias]
mtime=time|mm/dd/yy|when=%item-modified-dt%
htime=time|hh:nn:ss|when=%item-modified-dt%

Code: [Select]
[+file]
<td>%item-size%B<td>{.mtime.}<p>{.htime.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.mtime.}<p>{.htime.}<td>%item-dl-count%

one to preserve the standardized format using the macro cut proposed by LeoNeeson

[+special:alias]
mtime=cut||10|%item-modified%
htime=cut|12||%item-modified%

there are multiple possibilities  ;)
Title: Re: Throwback (retro) template (experimental revision)
Post by: danny on May 25, 2018, 08:32:39 AM
...
I still have to see how to hide columns on small screen sizes (too much work for today, perhaps I'll do it on the next few days).  (I've uploaded a new revision, here. (http://rejetto.com/forum/index.php?topic=12055.msg1062792#msg1062792) Report any bugs, if you find them)
I have rewritten it to do what you described, not by slower macros, but by speeding it up with some old school HTML4T, utilizing the table logic anchored diagonally.  The stopwatch likes this solution. 
Extra columns get out of the way, and filenames display on one line. 
I also took the liberty of changing the color theme to match Royale Noir. 

Edit:
This was incorporated into release 7 after revising the delete and upload functions. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on May 25, 2018, 03:52:20 PM
Hey Danny,

thought it was worth a mention
* Required downloading a php exe and set cgi /cli path
http://php.net/manual/en/migration5.cli-cgi.php

https://windows.php.net/download/

Although, php is somewhat aviable, but not officially supported, but is capable:
http://rejetto.com/forum/index.php?action=profile;u=9522;area=showposts;sa=topics;start=30

thx raybob
Title: Update. Phone friendly.
Post by: danny on May 26, 2018, 06:19:15 AM
Updates are usually located at the first post in this thread.

Throwback7.tpl has single-line listings and will move extra columns out of the way, as needed.     

Kudos and thanks to LeoNeeson for samples and ideas. 

Edit: Saved here for reference
Title: Re: Update. Phone friendly.
Post by: LeoNeeson on May 27, 2018, 03:15:35 AM
@Mars: thanks for the explanation! (I've found very interesting how '[+special:alias]' work, especially on how we can combine macro code with an alias (an alias that works almost the same as a 'variable'). It surely gives endless possibilities and makes the code more easy to handle.

@Danny: I've tested the new Throwback7.tpl and this is getting better and better (that gradient background looks great). By the way, I don't see any more enhancements available without slowing down the server, so, it's done for me, at least for now.

Cheers,
Leo.-
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 27, 2018, 10:51:40 AM
I just installed this template. It works except for one folder whose name is "1" all the sub folders the folder names and the file names (except one) are NOT shown. The folders and files are there with an icon. If I hover the cursor over the icon, the correct folder/file name is shown and and clicking the icon gives the correct response.

In the lower folders most of the folder/file names are also NOT shown.

What have I done wrong?

Chris
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on May 27, 2018, 04:09:19 PM
What browser are you using?  Phone, Tablet, PC, Mac?  Which specific template file are you using?   
Try adding a{color:#8D8} to the bottom of the [style] section in the template.
Try version 4 or 6 of this template, to see if there's a difference.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 28, 2018, 08:47:13 AM
I was using Throwback7.tpl. I tried Throwback6x.tpl with same effect.

I see the problem on Android 7.1 with Google Chrome and Samsung Internet and on Windows 10 with Google Chrome and Microsoft Edge.

I tried adding a{color:#8D8} to the style section of Throwback7.tpl  will same problem.

I am going back to using mobil-light_wo_pic.zip  from http://rejetto.com/forum/index.php?topic=11754. I added the text to the diff template the root directory. This provides a responsive screen and I can turn the menu on and off.

Chris

Title: core
Post by: danny on May 29, 2018, 12:56:25 AM
. . . I see the problem on Android 7.1 with Google Chrome and Samsung Internet and on Windows 10 with Google Chrome and Microsoft Edge.. . . diff template the root directory.. . .
Thanks Chris! 
I found possibilities for the error.  It doesn't happen in normal conditions.  Version 7 didn't have contingencies to handle rare events, such as unclassified items in diff template and adaptive tables still drawing after css finishes.  Those are possible.

To remedy this, I've added fallback code and rewritten the css to half size for version 8.
That took all day. 
And still working on it.

For preview, here is the version 8 core.
Because it is a re-write, the extra features haven't been added at this time.
(A macro that provisions a delete feature costs 28% of the speed. It is not added yet) 
So, if you want to find out how fast HFS is supposed to go, try this:

Edit: Basic "core" of version 9 added here, because similar.   
The add-on diff txt for upload folder features, works with both.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 29, 2018, 11:41:09 PM
I tired TB6-phone.tpl. Some problem.

I think the problem starts with a folder called "1". For any reason could this cause a problem?
Chris
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 29, 2018, 11:44:58 PM
Still a problem with TB8-Core.tpl
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on May 30, 2018, 07:08:38 AM
I tired TB6-phone.tpl. Some problem. I think the problem starts with a folder called "1". For any reason could this cause a problem?...Still a problem with TB8-Core.tpl
Thanks Chris! 

The most likely trouble is a diff-template has blocked some display rendering. 

First: right-click the root folder, properties, remove anything in the diff-template tab. 
Second: right-click the 1 folder, properties, remove anything in the diff-template tab.
Third: Menu, Save file system.

How to:
The throwback is a replacement main template (not for use as a diff-template). 
To use a new main template, you'd save the tpl file in the same folder as hfs.exe, and then:
Menu
HTML-template
Change-file
Throwback7.tpl

Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 30, 2018, 09:08:28 AM
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
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on May 30, 2018, 07:56:55 PM
If you have a file named hfs.diff.tpl or hfs.filelist.tpl, in that "1" folder, it will display differently.
Are you using an up to date HFS build 299 or 300 (2.3K or 2.3L)?
299-1/2:  https://drive.google.com/open?id=12GRINYSKe8H-VZtpsbvJkabvdTrB48F3
 
So, if I understand correctly, ordinary file types and folders fail the css/style color in your folder named "1" but not in your other folders and not on other HFS servers. That may be in the VFS, possibly fixable by making a new folder and copying the content into it.

Since the hover color works, but the main color doesn't, you can try this: 
Edit the [file] section. 
replace %item-name%
with <font color="#88DD88">%item-name%</font>

More specifically.
Find this:  <a href="%item-url%"><font color="white">&#9671;</font>&nbsp;%item-name%</a></td>
Change to: <a href="%item-url%"><font color="white">&#9671;</font>&nbsp;<font color="#88DD88">%item-name%</font></a></td>
Or: <font color="white">&#9671;</font>&nbsp;<a href="%item-url%" style="color:#88DD88">%item-name%</a></td>

That latter method with the inline style is preferred, because the hover/highlight color still works.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on May 31, 2018, 06:54:34 AM
Oops!!

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

Chris
Title: Just for fun, template in 1990's html. phone friendly
Post by: danny on May 31, 2018, 08:49:03 PM
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.
Title: Need help with file delete feature.
Post by: danny on June 01, 2018, 04:15:44 AM
. . . 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? 


Title: Re: Need help with file delete feature.
Post by: LeoNeeson on June 02, 2018, 04:22:36 AM
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... :-[
Title: Re: Need help with file delete feature.
Post by: danny on June 03, 2018, 06:37:18 AM
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?

Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on June 11, 2018, 03:31:52 AM
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
Title: The really fast Throwback (retro) template. versions
Post by: danny on June 11, 2018, 12:54:02 PM
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 simple version of QuantumQOS-AI overload-reduction, also you can make a new folder from the upload page. The variations can be used interchangeably or in combination, as main template or as diff-template, solo or simultaneously.  Choosing the wrong variation for server load is not a problem--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 simultaneously take transparent measures to decrease server load (so that it can display photo thumbnails as soon as feasible to do so). 
Work on the 4th phase continues...
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on June 17, 2018, 05:16:45 AM
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???
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on June 26, 2018, 08:21:47 AM
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.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on June 27, 2018, 12:48:48 PM
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 (https://www.w3schools.com/jsref/event_onclick.asp)' action call to show a modal with a few option buttons.

And today I've found something interesting here (https://stackoverflow.com/q/44350502/) to start testing with (I've adapted and minified (https://cssminifier.com/) the code (https://javascript-minifier.com/), (https://javascript-minifier.com/) 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.
 
Title: Re: Need help with file delete feature.
Post by: bmartino1 on June 29, 2018, 02:03:29 PM
+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
Title: Re: Need help with file delete feature
Post by: dj on July 09, 2018, 06:27:37 PM
[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
Title: Re: Need help with file delete feature
Post by: danny on July 12, 2018, 10:26:04 AM
. . .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.
Title: Re: file delete feature, and Throwback9
Post by: dj on July 12, 2018, 01:23:55 PM
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
Title: Re: file delete feature, and Throwback9
Post by: danny on July 12, 2018, 04:28:23 PM
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. 
Title: the next phase. . .
Post by: danny on July 13, 2018, 09:28:36 PM
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?
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: dj on July 14, 2018, 02:44:01 PM
do you mean a querystring? https://www.w3schools.com/jsref/prop_loc_search.asp (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 (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 (http://rejetto.com/forum/index.php?topic=11754.msg1062933#msg1062933)
in the next version I will try a popup dialog
Title: Re: the next phase. . .
Post by: bmartino1 on July 14, 2018, 05:43:33 PM
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/
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on July 15, 2018, 05:44:33 AM
do you mean a querystring?
I was referring to this:
. . . removing the delete button, and adding a "+" button instead, which when clicked, it opens a modal screen. . .with three nice and big buttons, giving options like: Rename, Delete and Move. . .
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. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on July 15, 2018, 03:22:19 PM
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...
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on July 16, 2018, 07:28:15 AM
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).
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on July 21, 2018, 05:04:01 AM
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. . .
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. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on July 22, 2018, 08:46:52 AM
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>
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on August 01, 2018, 11:24:54 PM
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
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on August 02, 2018, 07:24:14 AM
@bmartino: I agree, the 'Throwback7rev1-preview.tpl' code I've uploaded here (https://rejetto.com/forum/index.php?topic=12055.msg1062953#msg1062953), is ready to be tweaked (it only need a few adjustments to be working). If DJ, Mars, or any other macro experts could have a look, it would be great. I also have on stand by my other two templates (Remote Upload (http://rejetto.com/forum/index.php?topic=12059.0) and Contact form (http://rejetto.com/forum/index.php?topic=12122.0)), and I hope to have some free time on the upcoming weekends to continue them (but I can't promise anything).
Cheers!
Leo.-
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: dj on August 03, 2018, 04:26:20 AM
Throwback7rev with delete
Alternativ you can use a a modal dialog

I'm on holiday next week
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on August 12, 2018, 03:38:35 PM
Throwback7rev with delete
Alternativ you can use a a modal dialog

I'm on holiday next week
@DJ: Today I was trying to add the rest of the functions, but before touching the code, I found that after your modifications the modal dialog doesn't show up. I've spent a good time trying to figure out the error, but I can't find the way to fix it. There must be a typo somewhere, I guess... ???
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: dj on August 12, 2018, 06:42:27 PM
@DJ: Today I was trying to add the rest of the functions, but before touching the code, I found that after your modifications the modal dialog doesn't show up. I've spent a good time trying to figure out the error, but I can't find the way to fix it. There must be a typo somewhere, I guess... ???

I tested it again and it works in Chrome, FF and Edge.
Which browser do you use? Report the webconsole errors?

I added a version, which also works in IE11.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on August 13, 2018, 06:56:04 PM
I tested it again and it works in Chrome, FF and Edge.
Which browser do you use? Report the webconsole errors?

I added a version, which also works in IE11.

@DJ: It looks like the 'forEach' function is not recognized. I've tested several not-so-updated browsers:

In Chrome 31 (old version), the console shows this error:
Code: [Select]
Uncaught TypeError: Object #<NodeList> has no method 'forEach' (index):130
In Firefox 24 ESR (old version), the console shows this error:
Code: [Select]
TypeError: document.querySelectorAll(...).forEach is not a function
In Firefox (another old version), the console shows this error:
Code: [Select]
Error: document.querySelectorAll(".option_button").forEach is not a function
In KMeleon (an old fork of Firefox), the console shows this error:
Code: [Select]
Error: TypeError: document.querySelectorAll(...).forEach is not a function
On QtWeb (an old fork of Chrome), the console shows this error:
Code: [Select]
TypeError: 'undefined' is not a function (evaluating 'document.querySelectorAll(".option_button").forEach(function(o){o.onclick=function(){window.alert(o.value)}})')
Differences:

In Throwback7rev2.tpl there is no modal dialog at all (and the 'Uncaught TypeError' shows up on the console only once, when loading the page).

In Throwback7rev2.2.tpl the modal dialog shows up, but the file doesn't get deleted (it asks: 'Delete filename.xxx?', but when clicking on 'OK' the 'Uncaught TypeError' shows up again on the console (this error also appears when loading the page).

It would be great if we can use another function compatible with those browsers. I'm not expert on these matters, but perhaps using for loop (https://www.quora.com/When-should-I-use-each-forEach-or-a-simple-for-loop-in-Javascript) instead of forEach (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), could solve this problem (or else using another (https://gist.github.com/gregbenner/7767534) methods). ???
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on August 14, 2018, 02:36:20 AM
@DJ: It looks like the 'forEach' function is not recognized. I've tested several not-so-updated browsers:

In Chrome 31 (old version), the console shows this error:
Code: [Select]
Uncaught TypeError: Object #<NodeList> has no method 'forEach' (index):130
In Firefox 24 ESR (old version), the console shows this error:
Code: [Select]
TypeError: document.querySelectorAll(...).forEach is not a function
In Firefox (another old version), the console shows this error:
Code: [Select]
Error: document.querySelectorAll(".option_button").forEach is not a function
In KMeleon (an old fork of Firefox), the console shows this error:
Code: [Select]
Error: TypeError: document.querySelectorAll(...).forEach is not a function
On QtWeb (an old fork of Chrome), the console shows this error:
Code: [Select]
TypeError: 'undefined' is not a function (evaluating 'document.querySelectorAll(".option_button").forEach(function(o){o.onclick=function(){window.alert(o.value)}})')
Differences:

In Throwback7rev2.tpl there is no modal dialog at all (and the 'Uncaught TypeError' shows up on the console only once, when loading the page).

In Throwback7rev2.2.tpl the modal dialog shows up, but the file doesn't get deleted (it asks: 'Delete filename.xxx?', but when clicking on 'OK' the 'Uncaught TypeError' shows up again on the console (this error also appears when loading the page).

It would be great if we can use another function compatible with those browsers. I'm not expert on these matters, but perhaps using for loop (https://www.quora.com/When-should-I-use-each-forEach-or-a-simple-for-loop-in-Javascript) instead of forEach (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), could solve this problem (or else using another (https://gist.github.com/gregbenner/7767534) methods). ???

or setup if statement to check if it can run then run if it can
https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way

Why feature detection is better
Feature detection is a much better way to do things — instead of seeing what browser is accessing the content and serving appropriate code, the idea here is to query the browser to detect whether it supports the features our content relies on, and then serve content as appropriate. Let's take HTML5 video as an example. You could detect support using some simple code such as this:

javascript code:
Code: [Select]
if(!!document.createElement('video').canPlayType === true) {
  // run some code that relies on HTML5 video
} else {
  // do something else
}

This is much more future proof, because existing browsers that support HTML5 video will run the correct code, and future browsers that support HTML5 video will do as well. You don't have to keep updating your code each time a new browser is released.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: dj on August 15, 2018, 03:48:15 AM
It would be great if we can use another function compatible with those browsers. I'm not expert on these matters, but perhaps using for loop (https://www.quora.com/When-should-I-use-each-forEach-or-a-simple-for-loop-in-Javascript) instead of forEach (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), could solve this problem (or else using another (https://gist.github.com/gregbenner/7767534) methods). ???

Yes, I replaced the forEach with a loop in rev2.2.
The problem isn't the Array.forEach, it's the Nodelist.forEach (https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach).
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on August 16, 2018, 02:54:31 PM
?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://www.w3schools.com/jsref/jsref_forEach.asp

Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on August 23, 2018, 03:38:26 PM
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.

So I'm looking into this more and more,  and getting a bit more Info to attempt to begin codeing and testing this form login page...

Login form for HFS...
website key notes and code sources:

http://blog.stevensanderson.com/2008/08/25/using-the-browsers-native-login-prompt/
https://www.w3schools.com/howto/howto_css_login_form.asp
https://www.formget.com/javascript-login-form/
HFS default template...
?raybob script for filezilla
?stunnel for security? ...

Looks like it will be a basic form page with Passing macro credentials of the users to hfs.

Rayboy; Has some similar code from fhfs for filezilla...

ATM, it looks like there will be a need for a basic stunnel config as regardless of encoding, it still clear text over the internet....

////////////////////////////////////////
ATM , But not finding a good solution/way to parse that to hfs for the ability to login nor pas its credentials?

Mars/Rejeto might have some answer/Clues.
*(may even have to have a special link hard coded to hfs (but this may become insecure/ create a vulnerability...

So, here is a sample of that code (still writing and some what untested, but to show you what i have atm:

Code will uses basic browser form to pass authentication ... ATM still using hfs default template code and login link...

Working form, but no parse macro code atm...:

Code: [Select]

<!DOCTYPE html>
<!-- I should be in a VITURAL FOLDER! called AUTH -->
<html>
<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HFS Login Form</title>
<link rel="stylesheet" href="/?mode=section&id=style.css" type="text/css">
    <script type="text/javascript" src="/?mode=jquery"></script>
<link rel="shortcut icon" href="/favicon.ico">
<style class='trash-me'>
.onlyscript, button[onclick] { display:none; }
</style>
    <script>
    // this object will store some %symbols% in the javascript space, so that libs can read them
    HFS = { folder:'{.js encode|%folder%.}', number:%number%, paged:{.!option.paged.} };
    </script>
<script type="text/javascript" src="/?mode=section&id=lib.js"></script>
</head>

[box login]
<fieldset id='login'>
<legend><img src="/~img27"> {.!User.}</legend>
<center>
{.if| {.length|%user%.} |{:
            %user%
            {.if|{.can change pwd.} |
                <button onclick='changePwd.call(this)' style='font-size:x-small;'>{.!Change password.}</button>
            .}
            :}
            | <a href="~login">Login</a>
        .}
</center>
</fieldset>       

[lib.js|no log]
<script>
function changePwd() {
    ezprompt(this.innerHTML, {type:'password'}, function(s){
        if (s) ajax('changepwd', {'new':s}, getStdAjaxCB([
            "!{.!Password changed, you'll have to login again..}",
            '>~login'
        ]));
    });
}//changePwd
</script>

[]
<!-- Fix Permission to folder upload access (hfs macro) for login to authenticate may not be needed -->
{.set item|%folder%|add upload=@anyone.}

<!-- include css file here-->
    <style> /* below line is write to use google font online  */
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
 
h2{
 background-color: #FEFFED;
 padding: 30px 35px;
 margin: -10px -50px;
 text-align:center;
 border-radius: 10px 10px 0 0;
}
 
hr{
 margin: 10px -50px;
 border: 0;
 border-top: 1px solid #ccc;
 margin-bottom: 40px;
}
 
div.container{
 width: 900px;
 height: 610px;
 margin:35px auto;
 font-family: 'Ubuntu', sans-serif;
}
 
div.main{
 width: 300px;
 padding: 10px 50px 25px;
 border: 2px solid gray;
 border-radius: 10px;
 font-family: raleway;
 float:left;
 margin-top:50px;
}
 
input[type=text],input[type=password]{
 width: 100%;
 height: 40px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: #4f4f4f;
 font-size: 16px;
 border-radius: 5px;
}

label{
 color: #464646;
 text-shadow: 0 1px 0 #fff;
 font-size: 14px;
 font-weight: bold;
}

center{
 font-size:32px;
}

.note{
 color:red;
}
 
.valid{
 color:green;
}

.back{
 text-decoration: none;
 border: 1px solid rgb(0, 143, 255);
 background-color: rgb(0, 214, 255);
 padding: 3px 20px;
 border-radius: 2px;
 color: black;
}
 
input[type=button]{
 font-size: 16px;
 background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
 border: 1px solid #e5a900;
 color: #4E4D4B;
 font-weight: bold;
 cursor: pointer;
 width: 100%;
 border-radius: 5px;
 padding: 10px 0;
 outline:none;
}
 
input[type=button]:hover{
 background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

.fugo{
 float:right;
} </style>

<!-- include javascript file here-->
    <script>

var attempt = 3; //Variable to count number of attempts

//Below function Executes on click of login button
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

if ( username == "" && password == ""){
alert ("Login successfully");
window.location = "/"; //redirecting to other page
return false;
}
else{
attempt --;//Decrementing by one
alert("You have left "+attempt+" attempt;");

//Disabling fields after 3 attempts
if( attempt == 0){
document.getElementById("username").disabled = true;
producePrompt('Disabled', 'uname-error', 'red');
document.getElementById("password").disabled = true;
producePrompt('Disabled', 'pw-error', 'red');
document.getElementById("login").disabled = true;
producePrompt('Disabled', 'submit-error', 'red');
return false;
}
}
}
</script>
     

  <body>
<div class="container">
  <div class="main">
<h2>Login Form</h2><hr/>
<form id="form_id" method="post" name="myform">
  <label for="uname">User Name :</label></br>
  <input type="text" class="form-control" tabindex="1" placeholder="Please Enter Your Username" name="username" id="username" required /></br>
<span class='error-message' id='uname-error'></span>

  <label>Password :</label></br>
  <input type="password" class="form-control" tabindex="2" placeholder="Please Enter Your Password" name="password" id="password" required /></br>
<span class='error-message' id='pw-error'></span>

  <input type="button" name="Login" tabindex="3" class="btn btn-default" value="Login" id="submit" onclick="validate()"/>
    <span class='error-message' id='submit-error'></span>

<!--    <label><input type="checkbox" checked="checked" name="remember"> Remember me </label> -->
<!-- <button type="button" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> -->
</form>
  </div>
</div>
</br>
<!-- Didi I work? -->
<p> User: %user% @ IP: %ip% </p>
<!-- HFS Built in via default template -->
<div id='panel'>
{.$box login.}
</div>

 </body>
</html>

actual code is still a mess atm...

I still need hfs info suchas a link/symbol to pass code into. NOT a easy task nor a simple thing to do.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on August 24, 2018, 01:38:38 AM
Final code revision for form auth:

https://stackoverflow.com/questions/3079031/login-form-for-http-basic-auth

Code: [Select]
<!DOCTYPE html>
<!-- I should be in a VITURAL FOLDER! called AUTH -->
<html>
<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HFS Login Form</title>
<link rel="stylesheet" href="/?mode=section&id=style.css" type="text/css">
    <script type="text/javascript" src="/?mode=jquery"></script>
<link rel="shortcut icon" href="/favicon.ico">
<style class='trash-me'>
.onlyscript, button[onclick] { display:none; }
</style>
    <script>
    // this object will store some %symbols% in the javascript space, so that libs can read them
    HFS = { folder:'{.js encode|%folder%.}', number:%number%, paged:{.!option.paged.} };
    </script>
<script type="text/javascript" src="/?mode=section&id=lib.js"></script>
</head>

[box login]
<fieldset id='login'>
<legend><img src="/~img27"> {.!User.}</legend>
<center>
{.if| {.length|%user%.} |{:
            %user%
            {.if|{.can change pwd.} |
                <button onclick='changePwd.call(this)' style='font-size:x-small;'>{.!Change password.}</button>
            .}
            :}
            | <a href="~login">Login</a>
        .}
</center>
</fieldset>       

[lib.js|no log]
<script>
function changePwd() {
    ezprompt(this.innerHTML, {type:'password'}, function(s){
        if (s) ajax('changepwd', {'new':s}, getStdAjaxCB([
            "!{.!Password changed, you'll have to login again..}",
            '>~login'
        ]));
    });
}//changePwd
</script>

[]
<!-- Fix Permission to folder upload access (hfs macro) for login to authenticate may not be needed -->
{.set item|%folder%|add upload=@anyone.}

<!-- include css file here-->
    <style> /* below line is write to use google font online  */
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
 
h2{
 background-color: #FEFFED;
 padding: 30px 35px;
 margin: -10px -50px;
 text-align:center;
 border-radius: 10px 10px 0 0;
}
 
hr{
 margin: 10px -50px;
 border: 0;
 border-top: 1px solid #ccc;
 margin-bottom: 40px;
}
 
div.container{
 width: 900px;
 height: 610px;
 margin:35px auto;
 font-family: 'Ubuntu', sans-serif;
}
 
div.main{
 width: 300px;
 padding: 10px 50px 25px;
 border: 2px solid gray;
 border-radius: 10px;
 font-family: raleway;
 float:left;
 margin-top:50px;
}
 
input[type=text],input[type=password]{
 width: 100%;
 height: 40px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: #4f4f4f;
 font-size: 16px;
 border-radius: 5px;
}

label{
 color: #464646;
 text-shadow: 0 1px 0 #fff;
 font-size: 14px;
 font-weight: bold;
}

center{
 font-size:32px;
}

.note{
 color:red;
}
 
.valid{
 color:green;
}

.back{
 text-decoration: none;
 border: 1px solid rgb(0, 143, 255);
 background-color: rgb(0, 214, 255);
 padding: 3px 20px;
 border-radius: 2px;
 color: black;
}
 
input[type=button]{
 font-size: 16px;
 background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
 border: 1px solid #e5a900;
 color: #4E4D4B;
 font-weight: bold;
 cursor: pointer;
 width: 100%;
 border-radius: 5px;
 padding: 10px 0;
 outline:none;
}
 
input[type=button]:hover{
 background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

.fugo{
 float:right;
} </style>

<!-- include javascript file here-->
    <script>

var attempt = 3; //Variable to count number of attempts

//Below function Executes on click of login button
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

if ( username == "" && password == ""){
alert ("Login successfully");
window.location = "/"; //redirecting to other page
return false;
}
else{
attempt --;//Decrementing by one
alert("You have left "+attempt+" attempt;");

//Disabling fields after 3 attempts
if( attempt == 0){
document.getElementById("username").disabled = true;
producePrompt('Disabled', 'uname-error', 'red');
document.getElementById("password").disabled = true;
producePrompt('Disabled', 'pw-error', 'red');
document.getElementById("login").disabled = true;
producePrompt('Disabled', 'submit-error', 'red');
return false;
}
}
}

function submitted() {
var name = document.getElementById("username").value
var pw = document.getElementById("password").value
var ip = %ip%
var path = AUTH
document.location = "http://"+"name"+":"+"password"+"@"+"ip"+"path";
return true
}
</script>
     

  <body>
<div class="container">
  <div class="main">
<h2>Login Form</h2><hr/>
<form id="form_id" method="post" name="myform">
  <label for="uname">User Name :</label></br>
  <input type="text" class="form-control" tabindex="1" placeholder="Please Enter Your Username" name="username" id="username" required /></br>
<span class='error-message' id='uname-error'></span>

  <label>Password :</label></br>
  <input type="password" class="form-control" tabindex="2" placeholder="Please Enter Your Password" name="password" id="password" required /></br>
<span class='error-message' id='pw-error'></span>

  <input type="button" name="Login" tabindex="3" class="btn btn-default" value="Login" id="submit" onsubmit="Submitted()"/>
  <!-- onclick="Validate()" -->
    <span class='error-message' id='submit-error'></span>

<!--    <label><input type="checkbox" checked="checked" name="remember"> Remember me </label> -->
<!-- <button type="button" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> -->
</form>
  </div>
</div>
</br>
<!-- Didi I work? -->
<p> User: %user% @ IP: %ip% </p>
<!-- HFS Built in via default template -->
<div id='panel'>
{.$box login.}
</div>

<!-- <script> $.ajax({
   'url': 'http://host.com/',
   //'otherSettings': 'othervalues',
   username: $("username").val(),
   password: $("password").val()
   },
   sucess: function(result) {
     alert('done');
   }
});
</script>
Ajax pass username and password via url example: admin:mysecret@127.0.0.1/AUTH
https://stackoverflow.com/questions/3079031/login-form-for-http-basic-auth
-->
 </body>
</html>

i see no advantage for HFS using a form over the default browser basic auth for login credentials.
*as to my knowdlge regardless of the webcode, hfs source code would need to be updated to improve or select auth encoding for login credentiasl. Base64(although encodeing via default broswer login auth is still concerdised clear text to packet sniffers...) Any form would be under the same issue with authentication. Stunnel would be required or other way to send credentials via a secure conections...

this is as far as i can take this code atm.

hfs default template has some base code along with jqurey and other with the html form code, it could be done, but it is beyond my codeing skills atm.

i recall a old hfs function that had the username and passwords in the url, probally pass login credentials via url as example:
username:password@IP/Folder
admin:mysecret@127.0.0.1/AUTH

Good luck with futher form code and login credentials stufff. :/

(as to your erro page nonstop reequest, as i agree a 404 error should stop, i see a faster / easier fix.)

add html header option to redirect page to a end page
A error404 vitural folder with a differnet template tap of a 404 picture. thus stoping the nostop error...
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on August 24, 2018, 10:20:41 PM
Form not setup correctly, asp script not working... still need hfs link/symbol to pass code into. NOT a easy/simple thing to do.
I can't find the target variables either.  But, it sure will be easy after we find that!  :D
Password in urls is being blocked by newer browsers, so can't do it that way.
For now, all Firefox, even the mobile, still have the deprecated built in login box.  So, just planning ahead.
Title: Light color scheme?
Post by: danny on August 24, 2018, 10:28:02 PM
In other news, Throwback1998, the most popular version?  It must be the light color scheme. 
Actually, it is running on my own server, for just that reason--the appearance.
I probably should use the quicker version 9 and make a new edition with the light colors.    Good idea? 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on August 25, 2018, 03:06:44 AM
@bmartino1: I've tested your 'final code revision for form auth' on a desktop browser, and sadly it doesn't work. Although the login design looks nice, you are using a deprecated (https://medium.com/@lmakarov/say-goodbye-to-urls-with-embedded-credentials-b051f6c7b6a3) function (http://user:pass@host), so this also doesn't work on a mobile browser.

I can't find the target variables either.  But, it sure will be easy after we find that!  :D
Password in urls is being blocked by newer browsers, so can't do it that way.
For now, all Firefox, even the mobile, still have the deprecated built in login box.  So, just planning ahead.
I have good news for you: check out THIS (http://rejetto.com/forum/index.php?topic=13054.0) new thread... ;)

Cheers,
Leo.-
Title: No cookies for a certain folder?
Post by: danny on August 28, 2018, 06:18:19 AM
I was wondering if it were possible, probably with hfs.events, to have no cookies issued or attempted for a certain folder? 
Perhaps it is a folder of support graphics, such as wallpapers; or, perhaps HFS is pulling dual duty also supporting a wholly different website in addition to its normal duties.  Or, in my case, I need to do that for markup speed testing.
Title: Re: No cookies for a certain folder?
Post by: bmartino1 on August 28, 2018, 02:32:49 PM
I was wondering if it were possible, probably with hfs.events, to have no cookies issued or attempted for a certain folder? 
Perhaps it is a folder of support graphics, such as wallpapers; or, perhaps HFS is pulling dual duty also supporting a wholly different website in addition to its normal duties.  Or, in my case, I need to do that for markup speed testing.

i don't know if it removes the cookie, mars has code that edits the session id withi is the cookie..:
then rejeto rescenlty add header removal stuff like this code here:

http://rejetto.com/forum/index.php?topic=13046.msg1063940#msg1063940
http://rejetto.com/forum/index.php?topic=11705.0

i don't know if the header option removes the actual cookie or if it removes its signature form the webpage...

...
if this is about potential logout function???.. thers lots of stuff on the forum:
http://rejetto.com/forum/index.php?action=search2;params=YWR2YW5jZWR8J3wwfCJ8YnJkfCd8MjEsMzYsMjIsMzcsMjgsMjQsMzQsMjcsMzMsMiwzLDIwLDE2LDE1LDIzLDEyLDEzfCJ8c2hvd19jb21wbGV0ZXwnfHwifHN1YmplY3Rfb25seXwnfHwifHNvcnR8J3xyZWxldmFuY2V8Inxzb3J0X2RpcnwnfGRlc2N8InxzZWFyY2h8J3xsb2dvdXQ=

http://rejetto.com/forum/index.php?pretty;board=hfs-~-http-file-server;topic=hfs-logout.0
http://rejetto.com/forum/index.php?topic=6855.msg1061486#msg1061486

(lost on the forum some wher :/ )
*Looking for 2 specifc posts...
i remember a breakdown and code examples with another user, myself, rejetto chimed in.. in witch we thought reverse logic for logout might work, talking about logout and and anothe post regarding the cookie ssid

And then there was a with hfs for someone regarding basic cockie creation.. issue with it, in itch mars had info and code regarding the cookie (and its recreations/deletion)
Some other links:
http://rejetto.com/forum/index.php?topic=11558.0
http://rejetto.com/forum/index.php?topic=11489.msg1059657#msg1059657
http://rejetto.com/forum/index.php?topic=11705.msg1061000#msg1061000
http://rejetto.com/forum/index.php?topic=11751.msg1061334#msg1061334
Title: Re: No cookies for a certain folder?
Post by: LeoNeeson on August 28, 2018, 06:12:45 PM
I was wondering if it were possible, probably with hfs.events, to have no cookies issued or attempted for a certain folder? 
Perhaps it is a folder of support graphics, such as wallpapers; or, perhaps HFS is pulling dual duty also supporting a wholly different website in addition to its normal duties.  Or, in my case, I need to do that for markup speed testing.
Make a "HFS.Events" file with any of the following content...

Option 1) This removes the cookie header, only when someone access some picture/graphics/photo, perhaps useful when someone hotlink (https://simple.wikipedia.org/wiki/Hotlinking) to a image on your server (you can remove the 'add to log' line, since it's there for testing purposes only):
Code: [Select]
[+request]
{.if |{.match|*.jpg;*.gif;*.png | %url%.}|{:
{.add to log|This file request was a photo!.}
{.remove header|Set-cookie.}
{.remove header|ETag.}
:}.}

Option 2) This removes the cookie header, when someone access a folder that contains the name "FolderWithPhotosOne" or "FolderWithPhotosTwo" (you can remove the 'add to log' line, since it's there for testing purposes only, and perhaps this can be further enhanced to search and check if there are picture files on that folder, but that's way beyond my knowledge at the moment):
Code: [Select]
[+request]
{.if |{.match|*FolderWithPhotosOne*;*FolderWithPhotosTwo*|%url%.}|{:
{.add to log|This folder request had cookie headers removed!.}
{.remove header|ETag.}
{.remove header|Set-cookie.}
:}.}

I think the second option was what you were looking for...
Please report here if this solution works correctly. :)
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on September 02, 2018, 07:40:51 AM
This, I tried for 3 hours with hfs 299-1/2 (the pre-release).  :) 
After upgrading to the official hfs 300, the remove headers command worked for cookies, not for etag.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Mars on September 02, 2018, 11:11:42 AM
can you give some examples to reproduce in order to find a solution  ;)
Title: Some steps to reproduce the issue...
Post by: LeoNeeson on September 02, 2018, 10:25:04 PM
This, I tried for 3 hours with hfs 299-1/2 (the pre-release).  :) 
After upgrading to the official hfs 300, the remove headers command worked for cookies, not for etag.
That's why I've already reported this issue here (http://rejetto.com/forum/index.php?topic=13046.msg1063976#msg1063976). ;)

can you give some examples to reproduce in order to find a solution  ;)
You have several ways of view HTTP Headers:

1) The easiest way to reproduce this, is using Chrome. Open a new blank tab. Right click anywhere and select 'Inspect element' and then click on 'Network'. Close HFS and save the 'HFS.Events' file contained on the attached ZIP file in this post (http://rejetto.com/forum/index.php?action=dlattach;topic=12055.0;attach=8758) (or write in 'HFS.Events' any of these two filters described here (http://rejetto.com/forum/index.php?topic=12055.msg1063977#msg1063977)). Open HFS, add some files (images or any other file), and go back to Chrome, paste the URL and watch the Network activity. To view the HTTP Header of any request, do right click on 'Copy response headers' on any element you want (and paste it on Notepad to view it). You will notice that any element generated by HFS on-the-fly will be fine, without the 'ETag', but if you request (click) on some file (to view it, or download it), then the 'ETag' is NOT removed (only Set-cookie is removed).

2) Another way is using FlаѕhGеt (being the version 1.65, the last adware-free (https://www.virustotal.com/en/file/726dfcd8eb8bd51dec29029a2a1e2a4c361e06e1e1401ca488a0daaff6c86f8f/analysis/) version, which I'm currently using and you can download from here (https://archive.org/download/FlhGt_165/Clean_version.rar)), or else using some HTTP Header view (online service) (https://www.google.com/search?q=HTTP+Header+view&sa=N), like this (http://websniffer.cc/) or this (https://www.httpdebugger.com/tools/viewhttpheaders.aspx) tool. If you use FlаѕhGеt, you need to configure it at the lowest possible speed (to being able to see the HTTP headers in the log), going to: Tools > Options > Connection > Traffic usage in manual mode (b/s): 400. And then go again to: Tools > Speed Limit Mode > Manual. And finally try to download (and quickly pausing it, to keep the logs at sight), a file that match some of those rules (as described on the point number one).

For example, a normal file listing request (it's working OK):

Quote
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1890
Accept-Ranges: bytes
Server: HFS 2.3m
Cache-Control: no-cache, no-store, must-revalidate, max-age=-1
Content-Encoding: gzip
Content-Length: 1890

But viewing a static HTML file (the same as if you download other file):

Quote
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 123
Accept-Ranges: bytes
Server: HFS 2.3m
ETag: 6ED8C82CA55F6D57FECD5F712EFFF8F1
Last-Modified: Fri, 20 Apr 2018 20:30:40 GMT
Content-Disposition: filename="SomeWebPage.html";

Viewing/downloading a image file:

Quote
HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 123456
Accept-Ranges: bytes
Server: HFS 2.3m
ETag: F48480F7C42C4CF548855994DF1B5191
Last-Modified: Fri, 20 Apr 2018 20:10:00 GMT
Content-Disposition: filename="SomeImageFile.jpg";

Summarizing: if you remove a header on [+download] it works, but on [+request] it doesn't do it properly (only removes 'Set-cookie' but not the 'ETag'). I personally don't need this feature, but since danny (http://rejetto.com/forum/index.php?action=profile;u=103082) and User21 (http://rejetto.com/forum/index.php?action=profile;u=103298) wanted it, perhaps it's a easy fix.

Well, that's it, I hope this is useful...



> Off-topic: This gives an idea that it would be great to have a HFS template that shows the response HTTP Headers of a given URL (perhaps using part of the remote upload (http://rejetto.com/forum/index.php?topic=11430.0) code?), among other (https://browserleaks.com/fonts) useful (https://browserleaks.com/features) information (http://ip-check.info/description.php), like the client's User Agent (https://en.wikipedia.org/wiki/User_agent), screen resolution (http://browserspy.dk/screen.php), etc (something like THIS (https://browserleaks.com/ip)). I leave the idea here if someone wants to do it. ;)
 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on September 13, 2018, 09:57:45 AM
can you give some examples to reproduce in order to find a solution  ;)
This is useful: https://tools.pingdom.com

However, the solution that I really need is a built-in %item-modified-mdy% resulting in the format 09.14.18 since that much smaller format would be feasible with vertical displays (phones, tablets). 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Mars on September 13, 2018, 02:15:55 PM
Solution is inside this post

http://rejetto.com/forum/index.php?topic=11546.msg1059974#msg1059974

Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Chris Harris on September 15, 2018, 03:28:04 AM
This, I tried for 3 hours with hfs 299-1/2 (the pre-release).  :) 
After upgrading to the official hfs 300, the remove headers command worked for cookies, not for etag.

Where is version 299 or official hfs 300?

Chris
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Mars on September 15, 2018, 11:52:32 AM
http://rejetto.com/forum/index.php?topic=13051.0
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on September 15, 2018, 02:34:54 PM
Solution is inside this post

http://rejetto.com/forum/index.php?topic=11546.msg1059974#msg1059974
Unfeasible with multiple users. If several users list files at the same time, server-side synchronous processing causes more dramatic loss of speed. With many files there's a long time to wait, as if broken. Inefficient workaround isn't a substitute for an efficient baked-in short date format.   If Rjetto makes that new standard template that works with phones; also, he will soon need %item-modified-mdy% short date (12.25.18) functionality, with better efficiency.

Until then, a possible workaround solution involves the Client's CPU (because there are many), not the server's CPU (only one--don't jam it).  Client side processing would be a script to reformat %item-modified%, preferably with async/non-blocking processing. 

I don't know how, but DJ does.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Mars on September 15, 2018, 05:20:01 PM
Quote
[+file]
<td>%item-size%B<td><script type="text/javascript" >mdy(%item-modified-dt%)</script><td>%item-dl-count%

[+folder]
<td class='nosize'>{.!folder-item|folder.}<td><script type="text/javascript" >mdy(%item-modified-dt%) </script><td>%item-dl-count%

Quote
[lib.js|no log]
// <script> // this is here for the syntax highlighter


function mdy(data) {
   var options={ year: '2-digit', month: '2-digit', day: 'numeric' }
   var locales=navigator.language;
   document.write( new Date((data*24-613658)*3600*1000).toLocaleString(locales, options));
}


function outsideV(e, additionalMargin) {
......
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: dj on September 15, 2018, 08:34:40 PM
Until then, a possible workaround solution

my modified addon (http://rejetto.com/forum/index.php?topic=11754.msg1063959#msg1063959), adapted to throwback1998

Code: [Select]
[+]
<script>  //formatmodified for mobil-light.tpl
//use ISO Date Format in hfs
var options={ year: '2-digit', month: '2-digit', day: 'numeric' }  //edit here
 //year, month, day, hour, minute, second  "numeric", "2-digit"; weekday  "narrow", "short", "long"
var locales=navigator.language

var ref=document.querySelectorAll('td:nth-child(3) font')  //addapted to throwback1998
if(!ref.length) ref=document.querySelectorAll('tr td:nth-child(3)')  //std-tpl
for (var i=0; i<ref.length; i++)  {
 var tmp=Date.parse(ref[i].textContent.slice(0,19))
 if(tmp) ref[i].textContent = new Date(tmp).toLocaleString(locales, options)
}

</script>
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Mars on September 15, 2018, 08:47:23 PM
Thank you DJ for the idea, my previous post edited accordingly regarding the javascript part ,works as simply as necessary ;)

I'm still working on the changes that can be made to the default template with a minimum of modifications and that are as simple as possible

probably it will not work on platforms where javascript is disabled,  I do not know if it also has an impact on jquery
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on October 03, 2018, 04:49:34 PM
I'm still working on the changes that can be made to the default template with a minimum of modifications and that are as simple as possible
That is a good project! 
It looks like the functions/menus will have to be moved to the top of the phone/tablet screen, so that the file listing will fit on-screen.
See also the [error] section from inside of a throwback template, because it bypasses most errors instead of claiming a broken server.  Also, see Leo's code that can get the phones logged in, even if they don't have the Firefox Mobile browser (Leo's code will be incorporated into the next version of the Throwback template).  Lastly, have a look at the throwback template's unicode support, both the font declaration and the use of instantaneous unicode icons instead of sending a little photo per each file listed (the difference in bandwidth isn't much, but the difference in lag-time is huge, since schlepping photos burdens the server cpu and unicode characters don't do that).  It won't take much scrolling labor to pick out the good stuff from the Throwback templates, because they're 24 times shorter than the standard template. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: rejetto on October 04, 2018, 10:21:04 PM
for those interested in reducing the CPU load on the server, make a test disabling "use system icons" under Menu > virtual file system.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: DarkIllusion on October 23, 2018, 04:18:27 AM
Awesome template. Many thanks!
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 02, 2019, 04:04:18 PM
for those interested in reducing the CPU load on the server, make a test disabling "use system icons" under Menu > virtual file system.
The Throwback templates don't utilize that feature. 
Instead, there's unicode support and use of unicode icons (not image files).  The only graphics used are those that exist aboard the client (many) not the server (one).  That was done for scalability.  Throwback9 (https://rejetto.com/forum/index.php?action=dlattach;topic=12055.0;attach=8557) also demonstrates how to add more features with asynchronous (non-blocking) code, for scalability. 

But, I still haven't figured out how to shorten the phone-unfriendly Four Score And Seven Years Ago plus extra clock, verbose %item-modified% without slowing down the file listings.  There were some scripts proposed (using the client's cpu for scalability), but I wasn't clear on how to install them in the template.  I put in a few days trying it though.  No luck yet.

Edit:  A phone screen friendly file date looks like  mm.dd.yy (the smallest size possible)
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: bmartino1 on January 02, 2019, 05:33:49 PM
http://www.rejetto.com/wiki/index.php/HFS:_scripting_commands#Others

Probably a macro manpulatuon

time | A
returns current time information. The format is specified by optional parameter A. Refer to this page for format syntax. If A is not supplied, value "c" will be used.
Optional parameter when to specify a time other than current.
Optional parameter offset to specify the number of days differing from the current time

%time% which give us the full extent time day etc

Or mby pull from the client not the server

https://www.w3schools.com/html/html_form_input_types.asp
And do a reverse feed script to output the current date in the format you want.

Input Type Date
The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

https://www.w3schools.com/js/js_dates.asp

Title: Template bug found on v2.4 beta 6!
Post by: LeoNeeson on January 03, 2019, 12:42:12 PM
@Rejetto: Template bug found on v2.4 beta 6 (http://www.rejetto.com/hfsfiles/hfs24b6.exe)!

I've tried Throwback1998.tpl (http://rejetto.com/forum/index.php?action=dlattach;topic=12055.0;attach=8520) and Throwback9.tpl (http://rejetto.com/forum/index.php?action=dlattach;topic=12055.0;attach=8557) on the latest v2.4 (http://rejetto.com/forum/index.php?topic=13060.0) beta 6, and it looks like a bug was introduced on beta 6 (http://www.rejetto.com/hfsfiles/hfs24b6.exe), since on beta 5 (http://www.rejetto.com/hfsfiles/hfs24b5.exe) was working fine (see screenshots). The bug is that 'files panel' is not shown when using those templates! (I can't find the reason why it happens).

Can you add %item-modified-mdy% short format 12.25.18 file date?
If this is added to HFS's source code, then some other common formats should be added too:
%item-modified-mdy% = MONTH-DAY-YEAR short format > 12.25.18 (proposed by danny)
%item-modified-dmy% = DAY-MONTH-YEAR short format > 25.12.18 (proposed by me)
%item-modified-ymd% = YEAR-MONTH-DAY short format > 18.12.25 (also useful)

Cheers,
Leo.-
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: rejetto on January 05, 2019, 04:11:28 PM
@Rejetto: Template bug found on v2.4 beta 6 (http://www.rejetto.com/hfsfiles/hfs24b6.exe)!

thanks! it's the %files% symbol, stopped working. Fixed in next build.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: rejetto on January 05, 2019, 04:14:58 PM
for the timestamp: that's why i introduced %item-modified-dt%
such format is compatible with {.time.} and you can transform it as you want.
Title: The really fast Throwback (retro) template. Update: Throwback1998 Part Deux!
Post by: danny on January 17, 2019, 07:02:35 PM
New goodies added:

Login from Leo
Del from DJ
File listing speed from TB9

Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on January 19, 2019, 02:28:31 PM
Very nice! :D I quickly tested and everything looks good, congrats.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 20, 2019, 08:54:33 PM
Very nice! :D I quickly tested and everything looks good, congrats.
Thanks!  And I have a question:  Is that date reformat script sync or async? 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on January 21, 2019, 07:38:02 AM
Is that date reformat script sync or async?
I'm not expert on this, but I guess it's synchronous by default. If you want to make it asynchronous, you could add the attribute 'async (https://www.w3schools.com/tags/att_script_async.asp)', here (marked in red color):

Quote
<script type="text/javascript" language="javascript" async>function mdy(data)

...but I haven't tested (and I don't know if this makes any difference on speed).
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 22, 2019, 09:34:09 PM
On the phone, maybe maybe a different script is needed so that the pagination behavior doesn't happen?
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 22, 2019, 09:35:29 PM
for the timestamp: that's why i introduced %item-modified-dt% such format is compatible with {.time.} and you can transform it as you want.
Howabout %item-modified-date% for just the date (not the time).  Please? 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: dj on January 23, 2019, 03:58:28 AM
@danny, do you mean time?
//year, month, day, hour, minute, second  "numeric", "2-digit"; weekday  "narrow", "short", "long"
{hour: '2-digit', minute: '2-digit'} docu (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)

PS: I added readme.txt to my last post (http://rejetto.com/forum/index.php?topic=11754.msg1064313#msg1064313)


Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 23, 2019, 06:00:48 AM
@danny, do you mean time?{hour: '2-digit', minute: '2-digit'} docu (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) PS: I added readme.txt to my last post (http://rejetto.com/forum/index.php?topic=11754.msg1064313#msg1064313)
Yes, I'm still having trouble with the script for short date without time.  The phones do synchronous pagination behavior, like scroll, wait, scroll, wait, scroll, wait... 

This needs revised (halp?)
Can I get a version that doesn't make the phone stumble? 
head
Code: [Select]
<script type="text/javascript" language="javascript">function mdy(data) {var options={ year: '2-digit', month: '2-digit', day: 'numeric' }; var locales=navigator.language;document.write( new Date((data*24-613658)*3600*1000).toLocaleString(locales, options)); }</script>file list
Code: [Select]
<td><span class='del' data-it='%item-url%'></span></td>
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: dj on January 23, 2019, 05:57:18 PM
Can I get a version that doesn't make the phone stumble? 
Have you tried my originally version (http://rejetto.com/forum/index.php?topic=12055.msg1064004#msg1064004)?

Change var ref=document.querySelectorAll('td:nth-child(2)') for Throwback-X
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 23, 2019, 08:03:03 PM
Have you tried my originally version (http://rejetto.com/forum/index.php?topic=12055.msg1064004#msg1064004)?
Change var ref=document.querySelectorAll('td:nth-child(2)') for Throwback-X
Hours of trying it.  But I couldn't get it installed right (in the template).  It did nothing.  Halp? 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: dj on January 24, 2019, 04:29:24 AM
Don't forget use ISO Date Format in hfs
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 24, 2019, 05:20:40 AM
Don't forget use ISO Date Format in hfs
Thank you so much.  That doesn't slow it down at all. 

It is interesting in folders with a few thousand files, that the long date appears for several seconds before becoming shorter.  Meanwhile, the HTML3 adaptive size tables keep moving and resizing until perfectly fitting the new shorter date.  This is likely if there is a long filename. 
It gets very animated.

The time I'd most like to see that, is for filling in photo thumbnails. 
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 26, 2019, 07:56:58 PM
Making good progress on Throwback-X.  But, there's a question:  Should we keep the marquee? 

Questions on style are a bit more important than expected because rate of ~1200 downloads/yr for throwback templates.  I think that the large download volume has 4 causes:  Speed, ALL error pages are error-correcting pages, style is easier for end user; easy to edit. 

So, style which makes end users work better, does make that top-4 list.   
Although Throwback-X put the two branches back together, there may be more releases:
Throwback-X (blue-gray-white)
Throwback-X-Noir (I think that Leo will like it; and, me too)
TB10-Core (build other templates from it, not at post#1, available in the core post)

Actually, I did have two style questions:
Should anything link have underline to help the daftest of end users operate the mouse?  And, should there be the marquee to promote HFS?  Opinions requested--say anything.
Title: Opinions for the Throwback-X template...
Post by: LeoNeeson on January 26, 2019, 09:06:43 PM
Throwback-X-Noir (I think that Leo will like it; and, me too)
Sounds cool... 8)

Actually, I did have two style questions:
Should anything link have underline to help the daftest of end users operate the mouse?  And, should there be the marquee to promote HFS?  Opinions requested--say anything.
For me, I think it's OK the way it is. I mean:

A) Should we keep the marquee: for me, no. It was fun to recreate the 1998 version, however, a static footer could be cool (it doesn't need to be a marquee), something like (added at the end of [files]):

Code: [Select]
<br>
<table class=lil width="100%" bgcolor="#DDDDDD">
<tr>
<td align="center" style="font-size:3pt">
<a style="font-size:8pt" href="http://www.rejetto.com/hfs/"><span style="color:red">&#9829;</span> Powered by HFS (HTTP File Server) v%version%</a>
</td>
</tr>
</table>

You can personalize with CSS at you wish, but the important thing to promote HFS is:

Code: [Select]
<a href="http://www.rejetto.com/hfs/"><span style="color:red">&#9829;</span> Powered by HFS (HTTP File Server) v%version%</a>
B) Should any link have underline: for me, no. Like I've said, I think it's OK the way it is.

But that's my own opinion, don't take what I've said like something important, feel free to customize you template the way you like. :)

Cheers,
Leo.-
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on January 28, 2019, 06:57:51 AM
Thanks! The advice on footer is excellent.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: Harley on February 18, 2019, 04:45:38 PM
Has a dumb question, should I be using the downloads from the very first post in May of 2018 for this template or one of the other download links located in one of the replies, I am not a coder, just an HFS user and I kind of got lost in the soup reading the thread, THIS is the post (http://rejetto.com/forum/index.php?topic=12055.msg1062733#msg1062733) I downloaded from, am I correct?


EDIT:

Well, not sure exactly about all the techy stuffs, is not a true nerd but not a total loss either, 
Throwback9.tpl was EXACTLY what I wanted. I am so grateful.
I just wanted, plain, easy to see, easy to download, just the facts mam.
I got what I wanted. Deals with a lot of older folks, this makes things even more of a snap.
Thank all of you for all your hard work.
Blessings are sent to all of you for good fortune and prosperity.


Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on February 21, 2019, 05:46:58 PM
...should I be using the downloads from the very first post in May of 2018 for this template...THIS is the post (http://rejetto.com/forum/index.php?topic=12055.msg1062733#msg1062733) I downloaded from, am I correct?  EDIT:...Throwback9.tpl was EXACTLY what I wanted. I am so grateful.  I just wanted, plain, easy to see, easy to download, just the facts mam. I got what I wanted. Deals with a lot of older folks, this makes things even more of a snap...
Yes, that's right, finished updates are at Post#1 (because the rest of the thread is development).  And, thanks!  I'm glad you enjoy it.

Older folks might like Throwback10 even better.  Especially because you can sort by newest, making it easy to find files that you have added recently.  There's no waiting--it sorts instantly.   Edit: And, file search box too.
Title: Throwback 10
Post by: danny on February 26, 2019, 05:22:17 PM
Throwback10 
It has file search, instant sort, a few new icons, further streamlining for speed, light colors for easy-use appearance, more filetype support, and many small refinements.  Tested on Phone and PC.  Enjoy!

Edit:
Two files redacted due to high load.  Fast forward to Throwback11.  News is that the best is kept, and certainly can be used. 
Title: DJ? How to jpg-image thumbs for all? Within throwback10?
Post by: danny on February 28, 2019, 06:08:37 AM
http://rejetto.com/forum/index.php?topic=13060.msg1064013#msg1064013 jpgimagethumbs
I'm wondering how to:  Small bandwidth thumbnails with fallback using original file for thumbnails (within throwback10.tpl)?
Title: Re: How to jpg-image thumbs for all? Within throwback10?
Post by: dj on February 28, 2019, 03:59:38 PM
add id="files" to the table in Throwback10photo (needed to find img links)
remove src attribute from jpg files
add script from jpgimagethumbs at the end

3. ... use original file may come in a next version (http://rejetto.com/forum/index.php?topic=13060.msg1064345#msg1064345)
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on April 01, 2019, 08:30:58 AM
Looks like hfs.exe needs on-the-fly photo thumbnail support added, with something like a macro:  {photothumb}
In this case a basic cut-resize, could be used for speed.  Since it is 1-core, it may need a 2nd executable/dll file to handle on-the-fly thumbnails.  Indeed, a subprogram rather than a subroutine?  In this case, perhaps the {exec} macro is used.
Title: Experiments
Post by: danny on April 05, 2019, 07:08:31 PM
Here are 2 new user-interface experiments. 
I claim that they are non-working.  Tiles and Stripes are developmental status. 

They're for previewing a new user interface.

Edit: file removed--too many photos per page was not compatible with bandwidth management
Title: Re: Experiments
Post by: LeoNeeson on April 07, 2019, 10:34:15 AM
Here are 2 new user-interface experiments. 
I claim that they are non-working.  Tiles and Stripes are developmental status. 
I've tested your experimental templates. Tiles.tpl looks great as an image gallery, but on normal file listing, Stripes.tpl look better.
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on May 29, 2019, 10:49:34 PM
I'm still using Throwback10-Photo since the first of the year. (first post, this same thread) 

Just today, I needed to find some files quickly and the search box had it done in under a minute--faster than the operating system's built in search.   

My family makes a lot of use of the 'Newest Sort' function, to instantly find new stuff. 

So, what other features would you like to see (without attempting to replicate/replace ftp, vnc or plex)?
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: LeoNeeson on June 04, 2019, 05:30:25 AM
So, what other features would you like to see (without attempting to replicate/replace ftp, vnc or plex)?
If you are looking for fresh new ideas (for you Throwback10-Photo template), here is one: having an option named "Gallery mode (show photos only)", to have a view like THIS (https://cnet4.cbsistatic.com/img/2011/07/26/f7800761-fdc7-11e2-8c7c-d4ae52e62bcc/gallery.jpg) or THIS (https://images.pcworld.com/howto/graphics/202978-picasa01_original.jpg) (those images are obviously to give you an idea). This setting could be a checkbox (storing the settings on a cookie) or adding to the URL /?gallery=on and /?gallery=off (or using any other method).

Activating this mode, files that are NOT photos are hidden, filenames are also hidden (to save space), and only a photo gallery is shown. When a folder has no images, a message like "No images are found on this folder" could be displayed (perhaps with an option to disable the gallery mode). And when gallery mode is off, the template could work like the normal/classic Throwback10 template.

So, adding this, we could merge those two versions and have a new unified Throwback11. I know this could be complex to add/implement, but it's just an idea (and if it's too hard to do, just ignore it). ;)
Title: Re: Introducing: The really fast Throwback (retro) template. Updated.
Post by: danny on June 06, 2019, 10:34:20 PM
I can't make a unified template because of the server load difference:  Throwback10 handles more browsing traffic easily, and fastest. It is needed for servers that have simultaneous end-users and/or large folders.

However, I can make a replacement for Throwback10-Photo.  Auto-gallery for photos is possible.   And then, as the divider between header and listing, I'm thinking of a sort-box.  Sort by:  Name, Type, Size, Date  (with a box around it).  The combination of auto-gallery and type-sort would provide the view, without a script.

Title: Re: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: danny on June 09, 2019, 10:20:50 AM
I wonder if this is possible:  An icon to shuffle play all mp3's in the current folder?   
That's an awesome old-school feature that has been lost over time.
Title: Re: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: bmartino1 on June 10, 2019, 04:03:15 AM
I wonder if this is possible:  An icon to shuffle play all mp3's in the current folder?   
That's an awesome old-school feature that has been lost over time.

we have to generate the m3u file via script pulled from macro item-modifed.

somehow we would have to tell a flash player or other html video player the contents of a file folder via URL.

mby look into jplayer

https://stackoverflow.com/questions/14854271/jplayer-create-dynamic-playlist-based-on-files-in-folder
Title: Re: The really fast Throwback (retro) template - shuffle play all mp3's in the c
Post by: dj on June 10, 2019, 05:06:00 AM
add latest audioplayer_addon (http://rejetto.com/forum/index.php?topic=11754.msg1064628#msg1064628)
add querystringparameter ?shuffle (I have added this (undocumented) feature)
click on play (for nexttrack longtouch on play)
Title: Re: The really fast Throwback (retro) template - shuffle play all mp3's in the c
Post by: danny on June 10, 2019, 04:19:23 PM
add latest audioplayer_addon (http://rejetto.com/forum/index.php?topic=11754.msg1064628#msg1064628)
add querystringparameter ?shuffle (I have added this (undocumented) feature)
click on play (for nexttrack longtouch on play)
I put the script, efficiently after the /body tag so that the page is drawn before the huge script is sent to client.
I didn't manage to minify the verbose script yet, and it does cause a notably larger file size (it needs a diet).
I did add location.search=shuffle to the editable vars.

Next, I added a play icon &#9654; with link to call the script, a href="javascript:addon()". 

Results: No music.

So, the non-working attempt is attached. 
I probably don't have the skill to edit that script so that it will shuffle play current folder .mp3, .m4a, .wma, .flac, .ogg, file types with just one convenient click on a play button.  If navigation to a different folder doesn't stop playback, then it would also need a stop function.  But first, can we make it play?

File has moved.  Keep scrolling...
Title: Re: The really fast Throwback (retro) template - shuffle play all mp3's in the c
Post by: dj on June 10, 2019, 06:28:45 PM
you need to learn to use the web-console
SyntaxError: unexpected token: '.' audio:72:13
you can't  add location.search=shuffle to the editable vars (it's read only)

I have added shuffle to the editable vars. Set it to true. I hope, this helps.


update: Have you seen the play button (at the end of body)?
You can add id='menu-bar' to the element the play button should appear.

Set var dur(ation)=0 to avoid preload
Title: Re: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: danny on June 10, 2019, 07:54:31 PM
Thanks.  But, there's no sound.  What form of clickable link allows the end user to achieve playback with your script? 

It immediately caused 5 Gigabytes of traffic, but it didn't play any of them.

Need to avoid downloads unless the play button is clicked.
After the play button is clicked then it would be nice to download/play one at a time (not all at once). 
Title: Re: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: bmartino1 on June 11, 2019, 03:55:02 AM
Thanks.  But, there's no sound.  What form of clickable link allows the end user to achieve playback? 

It immediately caused 5 Gigabytes of traffic, but it didn't play any of them.

Need to avoid downloads unless the play button is clicked.
After the play button is clicked then it would be nice to download/play one at a time (not all at once).

that sounds like a mime type issue
is the mime type defined and is it set to open directly in browser?

https://images.app.goo.gl/R5EBCrYXcigQxWTP8

http://rejetto.com/forum/index.php?topic=11400.msg1059164#msg1059164
Title: Re: The really fast Throwback (retro) template - shuffle play all mp3's in the c
Post by: dj on June 12, 2019, 04:07:31 AM
I've added FAQ (http://rejetto.com/forum/index.php?topic=11754.msg1064667#msg1064667)

P.S. Throwback-X is working for me, if you remove location.search=shuffle,
Title: Re: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: danny on June 13, 2019, 07:26:06 PM
...You can add id='menu-bar' to the element the play button should appear...Set var dur=0 to avoid preload...
That made the play button work.  Probably need to Re-shuffle when pause is clicked. 

It does still download 1 mp3 file every time a page is loaded, even if the play button wasn't clicked.
So, var dur=0 removed most of the preload bandwidth problem, but not all of it. 
Title: Re: The really fast Throwback (retro) template - shuffle play all mp3's in the c
Post by: dj on June 14, 2019, 03:48:17 AM
remove href="javascript:addon()" , then it's ok

Quote
Probably need to Re-shuffle when pause is clicked
just reload page

Quote
It does still download 1 mp3 file every time a page is loaded
fixed (http://rejetto.com/forum/index.php?topic=12055.msg1064662#msg1064662) (only metadata of first file downloaded)

P.S. you can style the play button  .play {color:green}
next week I'm on holidays
Title: Re: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: danny on June 14, 2019, 08:30:19 AM
Now that works!  #happydance

Throwback10 + DJ's music folder player. 
Title: Throwback11! The really fast Throwback (retro) template. Updated.
Post by: danny on July 18, 2019, 03:56:37 PM
Throwback11Photo:
It has slideshow, photo thumbnails via load-on-scroll bandwidth saver, mp3 folder player, etc... and, for speed, the features are provisioned After the file listing completes. It is nice on fast cable internet.  Thanks to DJ for the delete, slideshow and music player scripts

Throwback11mp: 
It has slideshow, mp3 folder player.  With no thumbnails, it uses less bandwidth and is easier for the server. 

Throwback11basic:
It supports Dish, Dial-Up, Mobile G, Rural DSL, Mesh, Metered and other bandwidth conservation needs. 
The streaming markup is able to display file lists to numerous users, regardless of internet speed.


Edit:  Second version has archive feature
Title: Re: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: bmartino1 on July 23, 2019, 08:21:10 PM
i like the new html content and template desing, but i'm having a hard time following where the current version for the template are and go.

can you link the attachment or tell me what post on the thread to download them at?
Title: Re: The really fast Throwback (retro) template. Large folders and phones? No problem
Post by: danny on July 25, 2019, 02:34:37 PM
@ bmartino1,
Thanks.  Yes: first post, this same thread.  My signature line has the link.

I put the finished works at post#1 to keep them separate from developmental efforts.
Title: Throwback12! Updated. Has folder create/delete and archive too.
Post by: danny on September 12, 2019, 06:38:36 PM
Available at post#1  Throwback12 has dynamic archive and upload, low ram consumption and high reliability. The streaming markup is tested to succeed at 500,000 files on a single page (however, smaller folders would list faster).  New Folder is on the upload page.  The dynamic module auto adapts to actively reduce server load. For additional security, delete icon of folders is shown if the user has both delete and upload permissions.

Photo version:  Full featured and load adaptive
MP version:  No thumbnails, so less mobile data involved
Basic version:  Business oriented--No multimedia features
Listonly accessory:  A portable diff-template mainly for large public folders

I'd like to hear how you use it, and what you'd like to see.  Do say! I am looking for ideas...
Because it is adaptive, you could actually use the big photo version on a high load (popular) server.  No problem. 

Example Photos:  PC screen size & Phone screen size, shows the adaptive sizing.