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

0 Members and 1 Guest are viewing this topic.

Offline dj

  • Occasional poster
  • *
  • Posts: 74
  • 👣 🐾
    • View Profile
    • PWAs
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #45 on: July 14, 2018, 02:44:01 PM »
do you mean a querystring? https://www.w3schools.com/jsref/prop_loc_search.asp
<a hef="pagetoreach.htm?id=%item-url%">☰</a>
see also http://www.rejetto.com/wiki/index.php?title=HFS:_scripting_commands urlvar | A

update:
a working example you find in the new mobil-light template with the newfolder option +
http://rejetto.com/forum/index.php?topic=11754.msg1062933#msg1062933
in the next version I will try a popup dialog
« Last Edit: July 15, 2018, 07:43:16 AM by dj »

Offline bmartino1

  • Tireless poster
  • ****
  • Posts: 788
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: the next phase. . .
« Reply #46 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/
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline danny

  • Occasional poster
  • *
  • Posts: 43
    • View Profile
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #47 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. 

Offline bmartino1

  • Tireless poster
  • ****
  • Posts: 788
  • 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 #48 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...
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 474
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #49 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).
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Offline danny

  • Occasional poster
  • *
  • Posts: 43
    • View Profile
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #50 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. 
« Last Edit: July 21, 2018, 05:13:24 AM by danny »

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 474
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #51 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>
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Offline bmartino1

  • Tireless poster
  • ****
  • Posts: 788
  • 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 #52 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
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 474
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #53 on: August 02, 2018, 07:24:14 AM »
@bmartino: I agree, the 'Throwback7rev1-preview.tpl' code I've uploaded here, 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 and Contact form), and I hope to have some free time on the upcoming weekends to continue them (but I can't promise anything).
Cheers!
Leo.-
• 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 dj

  • Occasional poster
  • *
  • Posts: 74
  • 👣 🐾
    • View Profile
    • PWAs
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #54 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
« Last Edit: August 03, 2018, 04:46:12 AM by dj »

Follow members gave a thank to your post:


Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 474
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #55 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... ???
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Offline dj

  • Occasional poster
  • *
  • Posts: 74
  • 👣 🐾
    • View Profile
    • PWAs
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #56 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.
« Last Edit: August 13, 2018, 03:34:25 AM by dj »

Offline LeoNeeson

  • Tireless poster
  • ****
  • Posts: 474
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #57 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 instead of forEach, could solve this problem (or else using another methods). ???
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Offline bmartino1

  • Tireless poster
  • ****
  • Posts: 788
  • 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 #58 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 instead of forEach, could solve this problem (or else using another 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.
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline dj

  • Occasional poster
  • *
  • Posts: 74
  • 👣 🐾
    • View Profile
    • PWAs
Re: Introducing: The really fast Throwback (retro) template. Updated.
« Reply #59 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 instead of forEach, could solve this problem (or else using another methods). ???

Yes, I replaced the forEach with a loop in rev2.2.
The problem isn't the Array.forEach, it's the Nodelist.forEach.
« Last Edit: August 15, 2018, 03:52:12 AM by dj »