Author Topic: Introducing: The really fast Throwback (retro) template. Updated.  (Read 10741 times)

0 Members and 1 Guest are viewing this topic.

Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
Just for fun, template in 1990's html. phone friendly
« Reply #30 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 really wondering if there would be a significant functional difference.  There isn't.

Anyway, enjoy the brand new antique. 
(attached below)
« Last Edit: June 01, 2018, 09:15:14 PM by danny »

Follow members gave a thank to your post:


Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
Need help with file delete feature.
« Reply #31 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? 


« Last Edit: June 01, 2018, 09:25:10 PM by danny »

Offline LeoNeeson

  • Insane poster
  • *****
  • Posts: 465
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Need help with file delete feature.
« Reply #32 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... :-[
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Follow members gave a thank to your post:


Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
Re: Need help with file delete feature.
« Reply #33 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?


Offline bmartino1

  • Insane poster
  • *****
  • Posts: 783
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #34 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
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
The really fast Throwback (retro) template. versions
« Reply #35 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 and 7.

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.  Edit:  v9.1 released.

No progress so far on feature provisioning by an ordinary link carrying %item-url% to a separate page for management and media functions.  However, I have a huge list of other templates to look through to see if there is any similar code.
« Last Edit: July 17, 2018, 09:35:58 PM by danny »

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 783
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #36 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???
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #37 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.
« Last Edit: June 26, 2018, 08:27:58 AM by danny »

Offline LeoNeeson

  • Insane poster
  • *****
  • Posts: 465
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #38 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' action call to show a modal with a few option buttons.

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

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

</head>
<body>

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

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

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

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

</body>
</html>

It's only a basic idea, still needs some work to be done to function properly.
 
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 783
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Need help with file delete feature.
« Reply #39 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
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline dj

  • Experienced poster
  • ***
  • Posts: 64
    • View Profile
Re: Need help with file delete feature
« Reply #40 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
« Last Edit: July 10, 2018, 04:08:47 PM by dj »

Follow members gave a thank to your post:


Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
Re: Need help with file delete feature
« Reply #41 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.
« Last Edit: July 12, 2018, 08:14:32 PM by danny »

Offline dj

  • Experienced poster
  • ***
  • Posts: 64
    • View Profile
Re: file delete feature, and Throwback9
« Reply #42 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
« Last Edit: July 12, 2018, 05:21:15 PM by dj »

Follow members gave a thank to your post:


Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
Re: file delete feature, and Throwback9
« Reply #43 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!!!
« Last Edit: July 13, 2018, 07:06:43 PM by danny »

Offline danny

  • Experienced poster
  • ***
  • Posts: 42
    • View Profile
the next phase. . .
« Reply #44 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?
« Last Edit: July 14, 2018, 06:13:46 AM by danny »