rejetto forum

Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: Chris Harris on June 04, 2016, 10:24:29 AM

Title: Responsive small screen template
Post by: Chris Harris on June 04, 2016, 10:24:29 AM
I am looking for a template that is responsive to screen size. I have tried many of the available ones and found Live template  was responsive but I do not like the output.

Is there a template that gives the layout  like the default BUT I would prefer the layout of the default template but with the User, Folder,  Search, Select,  Actions and Server information dialogs located below the file list.

How do I do this??
Chris
Title: Re: Responsive small screen template
Post by: dj on June 06, 2016, 05:33:36 AM
you can try mobil-light http://www.rejetto.com/forum/html-templates/file-upload-with-drag-and-drop/msg1061004/#msg1061004 (http://www.rejetto.com/forum/html-templates/file-upload-with-drag-and-drop/msg1061004/#msg1061004).
The dialogs are not located below the file list, but you can show/hide them.
Title: Re: Responsive small screen template
Post by: Chris Harris on June 06, 2016, 08:29:26 AM
I added hfs.diff.tpl and then selected this template. I then get a blank screen??

When switch to another template all works again.

I have done something wrong!!
Chris
Title: Re: Responsive small screen template
Post by: dj on June 06, 2016, 09:41:10 AM
rename mobil-ligh.tpl to hfs.diff.tpl and add it.
Title: Re: Responsive small screen template
Post by: Mars on June 06, 2016, 11:25:55 AM
in the default template the main, section contain those lines

Quote
<body>
<!--{.comment|--><h1 style='margin-bottom:100em'>WARNING: this template is only to be used with HFS 2.3 (and macros enabled)</h1> <!--.} -->
{.$box panel.}
{.$list.}
</body>
</html>
<!-- Build-time: %build-time% -->

if you reverse lines {.$box panel.} and {.$list.}, you will find that the file list is displayed first. then just update the values in the [style.css | no log] and [impromptu.css | no log] to make a good layout.

if the purpose of this new layout is to alternate between landscape mode and portrait mode on a mobile phone, it may be more complex because it will be necessary to have actually two different models to systematically recharge to change orientation, or it will be necessary to combine the two versions into one with javascript hide unwanted parts

Title: Re: Responsive small screen template
Post by: Chris Harris on June 06, 2016, 01:24:17 PM
rename mobil-ligh.tpl to hfs.diff.tpl and add it.

In mobil-light.zip the file is already  hfs.diff.tpl . If I select this file I get blank screen. If I chose hfs.tpl I get original layout

Title: Re: Responsive small screen template
Post by: dj on June 06, 2016, 02:52:56 PM
My bad.
In hfs Add a new real folder. In explorer Add the file hfs.diff.tpl to this folder.
Or If you wan't use in the root, select /, Properties, Diff template and copy the text of the hfs.diff.tpl to it.
Don't change template file.
http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things (http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things)
Title: Re: Responsive small screen template
Post by: Chris Harris on June 07, 2016, 04:21:38 AM
My bad.
In hfs Add a new real folder. In explorer Add the file hfs.diff.tpl to this folder.
Or If you wan't use in the root, select /, Properties, Diff template and copy the text of the hfs.diff.tpl to it.
Don't change template file.
http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things (http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things)

Great. This now works well on the desktop and a small mopbile phone. Thanks

Is there a way to change the sort direction if required?

Chris
Title: Re: Responsive small screen template
Post by: dj on June 07, 2016, 11:03:14 AM
To change the sort direction

add before </select> (line 27 33)
Code: [Select]
<option value="{.get|url|rev={.not|{.?rev.}.}.}">order &{.if|{.?rev.}|u|d.}arr;</option>
Title: Re: Responsive small screen template
Post by: Chris Harris on June 07, 2016, 12:41:18 PM
Hi

This sort option works.
Thanks
Chris

PS
The </select>  code is on line 33 in hfs.diff.tpl
Title: Re: Responsive small screen template
Post by: bmartino1 on June 07, 2016, 08:24:01 PM
this sounds more like a CSS thing then an hfs/html code stuff:

http://stackoverflow.com/questions/25817589/auto-adjusting-web-page-to-screen-size-html

it worth a look into...
Title: Re: Responsive small screen template
Post by: dj on June 20, 2016, 05:02:44 AM
the template without pictureviewer

Code: [Select]
[file=folder]
{.set|mask|{:{.match|jpg;png;gif|%item-ext%.}:}.}
<tr id="%item-url%" {.if|{.^mask.}|class="media".}><td style="width:72px">
<img src= {.if|{.^mask.}|"thumb/%item-url%" style="width:64px;height:64px;object-fit:cover" onclick='show|"%item-icon%" onclick='location=.}("%item-url%")' alt="&#x1f304;" title="%item-name%" /></td>

[+file=+folder]
<td style="text-align:initial">
<div><a href="%item-url%" style="color:black; font-size:16px">%item-name%</a></div>
<div style="width:200px" title="%item-comment%">%item-modified% {.if|{.get|is new.}|&#x1F195;.}</div>
<div style="width:100px" title="%item-dl-count%">{.or|%item-size%|.}</div>
</td>
<td style="width:72px;text-align:center">
<input type="checkbox" class='selector' name='selection' value="%item-url%" {.if not|{.or|{.get|can delete.}|{.get|can access.}|{.get|can archive item.}.}|disabled='disabled'.} ></td>
</tr>

[list]
<div id='files_outer'>
<div style='height:1.6em;'></div>

{.if not| %number% |{: <div style='font-size:200%; padding:1em;'>{.!No {.if|{.length|{.?search.}.}|results|files.}.}</div> :}|{:
        <form method='post'>
<table id='files' style="width:100%; border-spacing:0px 1px; font-family:Helvetica">
<tr>
<th><a id="menu">&#x2261;</a>
<th><select onchange='location=this.value'>
<option {.if|{.=|{.urlvar|sort.}|n.}|selected.} value="{.get|url|sort=n|rev={.?sort=n.}.}">Name</option>
<option {.if|{.=|{.urlvar|sort.}|s.}|selected.} value="{.get|url|sort=s|rev={.?sort=s.}.}">Size</option>
<option {.if|{.=|{.urlvar|sort.}|t.}|selected.} value="{.get|url|sort=t|rev={.?sort=t.}.}">Timestamp</option>
<option value="{.get|url|rev={.not|{.?rev.}.}.}">order &{.if|{.?rev.}|u|d.}arr;</option>
</select><th>
</tr>
%list%
</table>
        </form>
:}.}
</div>

<script>
(function() {
  var menu = document.getElementById("menu")
  menu.onclick = function() {
    var pan = document.getElementById("panel");
    pan.style.display = pan.style.display ? "" : "none";
    document.getElementById("files_outer").style.overflow = pan.style.display ? "initial" : "auto"
  }
  if (window.innerWidth < 640) menu.click()  //if template is slow remove this line
})();
</script>

[box panel]
<script>
(function() {
//add viewport to head
 var tmp = document.createElement("meta");
  tmp.name = 'viewport';
  tmp.content = 'width=device-width';
  document.head.appendChild(tmp)

  var tmp = document.createElement('style');
  tmp.innerHTML = 'tr:hover td {background: #EEE} \ntd div[title] {opacity:.54; font-size:14px; display:inline-block}';
  document.head.appendChild(tmp)

})();
</script>

<div id='panel'>
    {.$box messages.}
    {.$box login.}
    {.$box folder.}
    {.$box search.}
    {.$box selection.}
    {.$box upload.}
    {.$box actions.}
    {.$box server info.}
</div>

Perhaps it's faster
Title: Re: Responsive small screen template
Post by: Chris Harris on June 20, 2016, 06:37:59 AM
This was much faster BUT the menu button to to turn the box panel on/off does not work. I cannot see where this in in the code.

Chris
Title: Re: Responsive small screen template
Post by: dj on June 20, 2016, 08:14:50 AM
Corrected
Title: Re: Responsive small screen template
Post by: Chris Harris on June 20, 2016, 11:21:37 AM
Hi
This now works as expected and is much faster than the original template on my smartphone.

Thanks to all

Chris
Title: Re: Responsive small screen template
Post by: casey on July 05, 2018, 06:16:52 AM
Sorry to reply to this old topic. I need a template with preview pict. I try this and just get the blank screen.
Maybe I install in bad way. Please someone advice. Help!
Title: Re: Responsive small screen template
Post by: dj on July 07, 2018, 02:07:50 PM
Put the hfs.diff.tpl in your picture-folder.

Added close × (Esc) button,
fullscreen ⛶  (click first image on the left)

(https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/AnimatedPNGs.com_1531111723400.png)
Title: Re: Responsive small screen template
Post by: dj on July 13, 2018, 05:52:51 PM
Inspired by the throwback template http://rejetto.com/forum/index.php?topic=12055.msg1062882#msg1062882 (http://rejetto.com/forum/index.php?topic=12055.msg1062882#msg1062882)

I changed mobil-light to a lightweight and accessible stand-alone template without jquery
Thanks danny

and the pictureviewer for this template as diff template
Title: Re: Responsive small screen template
Post by: dj on July 18, 2018, 04:31:44 PM
V2 loads the javascript part from browser cache
http://rejetto.com/forum/index.php?topic=12054.msg1062730#msg1062730 (http://rejetto.com/forum/index.php?topic=12054.msg1062730#msg1062730)

Update: 5+ themes (as diff template)
Title: Re: Responsive small screen template
Post by: dj on July 22, 2018, 04:51:18 PM
V3 comes with a user selectable (dark) theme ⚙

https://youtu.be/bxFavyESPMw (https://youtu.be/bxFavyESPMw)

Update: 5+ addons (as diff template)
Title: Re: Responsive small screen template
Post by: dj on July 28, 2018, 10:18:39 AM
add a logout button [➔

works currently only in IE, Edge
this addon works also with the standard-template
Title: Re: Responsive small screen template
Post by: Chris Harris on August 02, 2018, 07:16:35 AM
I just tried version 3  mobil-light_wo_picV3.1.zip. It is very past. I could add the switchable hteme and the thumbnails but I have a major problem.

There is nothing under the menu hamburger/arrow!

What have I done wrong?

I want to be able select some/all files and then download or delete
Title: Re: Responsive small screen template
Post by: dj on August 02, 2018, 08:46:57 AM
Have you set the folder permissions in hfs?
If no permission is set, no button appears.

There are buttons for upload, new folder, delete and rename.
Archive comes to the to-to-list.

the files have been updated, download mobil-light_wo_picV3.1.zip again,
 you get mobil-light_wo_picV3.2.tpl and two alternative panels (a modal dialog and a select)
(Sorry, the javascript modal screen from Leo isn't included)

Or use mobil-light_wo_picV3.3.tpl (it's included in the pagination_theme)

Update: archive_as_zip replaces TAR Archive with ZIP Archive
this addon works also with the standard-template
Title: Re: Responsive small screen template
Post by: Chris Harris on August 03, 2018, 05:16:25 AM
I have now installed  mobil-light_wo_picV3.3.tpl

"Have you set the folder permissions in hfs?
If no permission is set, no button appears"

No I had NOT set the permissions and this was the problem.

Thanks
Chris
Title: Re: Responsive small screen template
Post by: bmartino1 on August 03, 2018, 10:50:50 PM
http://rejetto.com/forum/index.php?topic=6855.0

Will have to run some test for other browser

add a logout button [➔

works currently only in IE, Edge
this addon works also with the standard-template
Title: Re: Responsive small screen template
Post by: dj on August 12, 2018, 09:55:56 AM
Added screenshots from the latest stable version 3.4/3.5

and version 3.5, which spares your data volume (removed inline styles in tbody)

update: added Move-Button (just navigate to target directory instead of typing)
  works different to standard-tpl

update: added Select All
 Use shift+click to select range of checkboxes
 this addon works also with the standard-template

updated audioplayer (now works also with the standard-template, play m3u, remebers last song)
Title: Re: Responsive small screen template
Post by: dj on August 25, 2018, 06:37:33 PM
a new theme
update: batchrename renames multiple files (number files)
Title: Re: Responsive small screen template
Post by: dj on September 09, 2018, 07:50:50 AM
a preview of version 4, which never reloads the page
update: 4.1beta can use archive addon
update: v3.7 works with HFS v2.4
 dnd_upload_thumb generates thumbnails (works also with the new standard-tpl)
Title: Re: Responsive small screen template
Post by: dj on October 11, 2018, 01:54:35 PM
a new version of the comment addon (works now with UTF-8)
update: dnd_upload_comment generates comment from image title (edit in file explorer)
Title: Re: Responsive small screen template
Post by: dj on October 29, 2018, 04:46:10 PM
changelog: touch feedback, disable upload, links
Title: Re: Responsive small screen template
Post by: rejetto on November 03, 2018, 06:54:44 PM
moved ot discussion to http://rejetto.com/forum/index.php?topic=13081
Title: Re: Responsive small screen template
Post by: danny on January 18, 2019, 07:54:14 PM
changelog: touch feedback, disable upload, links
Results:
mobil-light_wo_picV3.5  Works nicely!
mobil-light_V3.7 thumb code missing, display quirk.  Not a standalone template?
mobil-light_V4.1beta mostly blank screen.  Not a standalone template?
mobil-light_V4.2beta mostly blank screen.  Not a standalone template?


Title: Re: Responsive small screen template
Post by: LeoNeeson on January 19, 2019, 02:28:05 PM
Results:
mobil-light_wo_picV3.5  Works nicely!
mobil-light_V3.7 thumb code missing, display quirk.  Not a standalone template?
mobil-light_V4.1beta mostly blank screen.  Not a standalone template?
mobil-light_V4.2beta mostly blank screen.  Not a standalone template?
I agree with you danny, most templates done by dj are great, but most of them are not standalone templates (in most cases, they are only 'diff templates' of the default template). As my suggestion, I hope dj could in the future release also standalone templates, since this way is much more easier to see the final results to the end-user. ;)
Title: Re: Responsive small screen template
Post by: dj on January 20, 2019, 01:46:03 AM
@danny, Add hfs.filelist.tpl from zip to folder, that contains hfs.exe
Title: Re: Responsive small screen template
Post by: danny on January 20, 2019, 02:44:02 PM
@danny, Add hfs.filelist.tpl from zip to folder, that contains hfs.exe
I had mistakenly left it in the folder made by the un-zip (the zip needs 'install-instructions.txt' added).  So, I moved the files to /hfs (same folder has hfs.exe) and the file list isn't blank.  Next:  Only icons displayed are folder and music.  Music player is missing. There's no default filetype icon. Error persistence (cache header not zeroed during error conditions).  Checkbox doesn't have action menu. There's no image thumbnails. 
I think that I have not installed it right.
Title: Re: Responsive small screen template
Post by: LeoNeeson on January 21, 2019, 08:18:03 AM
I think that I have not installed it right.
The best thing you can do (to let one of us help you out), is use either LICEcap (https://www.cockos.com/licecap/), ScreenToGif (https://github.com/NickeManarin/ScreenToGif/) (both Open Source) or GifCam (http://blog.bahraniapps.com/gifcam/) (Freeware), to record your template install procedure, and then upload the resulting GIF to Imgur (https://imgur.com/upload) or any other image hosting (and obviously posting the results here on the forum). This way, we can help you out installing the template (and see if you are doing some mistake when installing it). ;)
Title: Re: Responsive small screen template - update
Post by: dj on March 13, 2019, 09:28:19 AM
changelog: better readable code, added delete and sort and logout(Edge)
viewthumbs addon included, works also with dnd_upload and searchcategorie addon (http://rejetto.com/forum/index.php?topic=13060.msg1064345#msg1064345)
 and audioplayerlight and pictureviewer (wrap script in function addon and set compatible=1)

dark_theme sets dark mode by OS and will work with FF67 and Safari 12.1-TP (untested  ;))
languages_addon works also with hfs2.4 (language-files (http://rejetto.com/forum/index.php?topic=11880.msg1062163#msg1062163))
Title: Re: Responsive small screen template - addon
Post by: dj on March 20, 2019, 04:27:33 AM
preload addon preloads subfolders
 and shows number files in subfolders

audioplayer changelog: show duration
Title: Re: Responsive small screen template - update
Post by: dj on March 26, 2019, 03:50:30 AM
changelog: added archive
Title: Re: Responsive small screen template - theme
Post by: dj on April 02, 2019, 03:22:05 AM
a new theme  ;)

V4.4.2 viewthumbs addon updated: thumbs must have the same name (frag_bunny.mp4 or frag_bunny.mp4.jpg)
Title: Re: Responsive small screen template - theme
Post by: LeoNeeson on April 05, 2019, 02:58:16 AM
a new theme  ;)
I know this template 'mobil-light_V4.4.2beta.zip' is intended for ultra-modern browsers, but it doesn't work on some older browsers, like Chromium 31. When browsing http://127.0.0.1/ it redirects to http://127.0.0.1/~files.lst showing this result:

Code: [Select]
#04/04/2019 22:52:06,0
some-folder-here/
#,1

On Firefox v52 works almost fine (and it's super-fast! :D ), but on older browsers is not usable at all (I guess it needs some compatibility-fix). Just a suggestion... ;)
Title: Re: Responsive small screen template
Post by: dj on April 05, 2019, 03:32:15 AM
thanks for review

yes,
version 4 is written for modern browsers (>97% (https://www.w3counter.com/globalstats.php)),
version 3 should be compatible with older browsers
Title: Re: Responsive small screen template
Post by: LeoNeeson on April 07, 2019, 10:42:45 AM
Now it works beautifully on old browsers! 8) (with some details)

Design/Layout .... Okay.
Search function .. OK, it works.
Login function ... OK, works fine.
Archive button ... No, it does nothing.
Delete button .... No, it doesn't delete.
Upload button .... No, nothing gets uploaded.

» Summarizing: the 'archive', 'delete' and 'upload' button doesn't work on the 'oldbrowsers.tpl (http://rejetto.com/forum/index.php?action=dlattach;topic=11754.0;attach=9077)' version (I already know that file selection is done clicking on the time-stamp, but even selecting a file or folder those buttons doesn't work). Otherwise than that, great work!... :)

» Researching: I noticed you used 'XMLHttpRequest GET' instead of 'fetch' to add support to legacy/old browsers. This is great, but doing this you have to release a special version for old browsers every time. My main idea/suggestion was using a 'polyfill', and after doing a search, I've found THIS (https://github.com/developit/unfetch):

Code: [Select]
<script src="https://unpkg.com/unfetch/polyfill"></script>
I've added that line on your normal 'mobil-light_V4.4.tpl (http://rejetto.com/forum/index.php?action=dlattach;topic=11754.0;attach=9067)' (you can directly embed THIS (https://unpkg.com/unfetch@4.1.0/polyfill/index.js) file content on your template), and the page loads fine now on old browsers. Using this polyfill the buttons loads okay, but the files and folders are not shown. Perhaps doing some small tweaks, that polyfill can work with your original 'fetch' code (and that way you get the best of both worlds: you can continue using 'fetch', and when 'fetch' is not supported by the browser, that XHR polyfill does the rest).

On my search on internet, I've also found two interesting articles: Why I still use XHR instead of the Fetch API (https://gomakethings.com/why-i-still-use-xhr-instead-of-the-fetch-api/) (and how to use a Promise-based XHR (https://gomakethings.com/promise-based-xhr/)). A very nice read, even for 2019 (this blog (https://gomakethings.com/articles) also has very nice articles!).
Title: Re: Responsive small screen template
Post by: dj on April 07, 2019, 03:45:48 PM
» Summarizing: the 'archive', 'delete' and 'upload' button doesn't work on the 'oldbrowsers.tpl' version

I forgot to say, you must additional add the hfs.diff_oldbrowser.tpl (or add the script at the end).
I tested it with IE11.
I also forgot to mention, that click on the clock sorts (by date) (should I add some sorting symbol like ↑  ?).

The polyfill doesn't work with IE11 (because  needs Promise is polyfilled of course!)


changelog: works with old browsers
querystringparameter ?update checks for template updates
textedit can also be used for single-comment files
Title: Re: Responsive small screen template
Post by: LeoNeeson on April 08, 2019, 06:20:15 AM
I forgot to say, you must additional add the hfs.diff_oldbrowser.tpl (or add the script at the end).
At least on Chrome 30, the problem continues (it doesn't work those 3 buttons). It's very strange (I'm doing all correct: I'm using 'hfs.diff.tpl' from "oldbrowsers_addon.zip", overwriting the files of 'mobil-light_V4.5.zip').

You can download HERE (http://download1.srware.net/old/iron/win/portable/IronPortable_30.zip) a portable version of Chrome 30 to make some tests (here (http://download1.srware.net/old/iron/win/portable/) you will find more portable versions to make tests). Using Chrome 30, you will see in the console some errors (for example: "Uncaught ReferenceError: del is not defined").

The polyfill doesn't work with IE11 (because  needs Promise is polyfilled of course!)
I didn't know IE11 not had Promises (https://caniuse.com/promises). Perhaps that's why on Chrome 30 fails those 3 buttons: 'archive', 'delete' and 'upload' (since Chrome 30 doesn't support promises).

I've found HERE (https://github.com/taylorhakes/promise-polyfill) a extremely lightweight 'Promise Polyfill' that works with IE8+, Chrome, Firefox, IOS 4+, Safari 5+ and Opera. This polyfill makes promises work on browsers that natively doesn't support it...

I've tried modifiying your 'mobil-light_V4.5.tpl' and adding the folowing (marked in red color):
Quote
<body>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/unfetch/polyfill"></script>
<header>

...and now it works on Chrome 30 :) (untested on IE11), but the 'archive', 'delete' and 'upload' buttons continues failing. There must be something else to modify (to make it work with Chrome 30).

Perhaps if you embed the content of those 2 polyfills in your code (and do some small tweaks), you can make only one version that works on any browser.
Title: Re: Responsive small screen template
Post by: dj on April 08, 2019, 08:47:57 AM
At least on Chrome 30, the problem continues

I tried it with chromium 30 and I found, when you in windows explorer copy hfs.diff.tpl in your root, it don't work (it doesn't load hfs.diff.tpl),
but when you in hfs copy the code from hfs.diff.tpl to properties-diff template it works :)
I don't know why.


Title: Re: Responsive small screen template
Post by: LeoNeeson on April 10, 2019, 11:40:00 AM
I tried it with chromium 30 and I found, when you in windows explorer copy hfs.diff.tpl in your root, it don't work (it doesn't load hfs.diff.tpl),
but when you in hfs copy the code from hfs.diff.tpl to properties-diff template it works :)
I don't know why.
Yes, it's true. I'm glad you also found this error. I've already reported that "hfs.diff.tpl" doesn't work on root HERE (http://rejetto.com/forum/index.php?topic=13060.msg1064489#msg1064489), but I didn't get any reply about it. The normal behavior is that "hfs.diff.tpl" should work on root too. I hope Rejetto get attention to this.
Title: Re: Responsive small screen template
Post by: SilentPliz on April 10, 2019, 06:44:08 PM
hfs.exe, hfs.events, hfs.diff.tpl... Files starting with hfs. can not be downloaded for security reasons.

hfs.diff.tpl is usable in individual real folders.

Code: [Select]
   if f.isFile() and (dlForbiddenForWholeFolder or f.isDLforbidden() or ansiStartsStr('hfs.', f.name) or ansiEndsStr('.pem', f.name)) then
      begin
      getPage('deny', data);
      exit;
      end;
Title: Re: Responsive small screen template
Post by: Mars on April 12, 2019, 05:30:16 AM
hfs.diff.tpl
Code: [Select]
[+]
{.add to log| main section from diff template.}

[+files]
{.add to log| list section from diff template.}

[+file=link=folder]
{.add to log| item section from diff template.}

Uses this example, your log must become several lines of comments

Otherwise, in the text box of the Diff Template tab of the ROOT property, put on a single line without a carriage return the full name of the file that will be added as a diff template.

If the file with absolute path exists then it will be used,

otherwise with relative path
-  the file will be searched first from hfs.exe folder,
- and then from the resource item if this item is real folder.
- by default the line will be displayed on the web page as a string


note that if you fill the tab "Diff template" with some sections, and that there is a hfs.diff.tpl in the associated real directory, the diff.tpl will be loaded then the content of "Diff template" will be added

Code: ("DIFF Template") [Select]
[+]
{.add to log| main section from "DIFF Template".}

[+files]
{.add to log| list section from "DIFF Template".}

[+file=link=folder]
{.add to log| item section from "DIFF Template".}


Code: ("hfs.diff.tpl") [Select]
[+]
{.add to log| main section from "hfs.diff.tpl".}

[+files]
{.add to log| list section from "hfs.diff.tpl".}

[+file=link=folder]
{.add to log| item section from "hfs.diff.tpl".}
Title: Re: Responsive small screen template - addon
Post by: dj on April 13, 2019, 09:19:18 AM
New folder
Title: Re: Responsive small screen template - update
Post by: dj on April 20, 2019, 01:56:15 PM
changelog:
(https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/Screenshot_20190422-184755.jpg) (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/Screenshot_20190422-180707.jpg) (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/screenshot.jpg)
Lighthouse report: Performance:100, Accessibility: 93, Best Practises:93, SEO: 100
Title: Re: Responsive small screen template
Post by: dj on April 29, 2019, 02:32:08 PM
changelog:
Lighthouse report: Performance:100, Accessibility: 100, Best Practises:93, SEO: 100
Title: Re: Responsive small screen template - addon
Post by: dj on May 19, 2019, 08:42:41 AM
on upload write lastModifiedDate to comments
useful to show when photos taken
works also with HFS2.4 (on DnD upload)

update audioplayer shows nexttrack button on lock screen (chrome). Future version will also show artwork (put it in subfolder thumb).
update: add li {display:inline-block} li>img+div {display:none} to lazyimages-style to show symbols (photos) only.
Title: Re: Responsive small screen template - FAQ
Post by: dj on June 12, 2019, 04:03:29 AM
audioplayer:
Title: audio
Post by: danny on June 22, 2019, 08:18:37 AM
@DJ

The audio player is working mostly well.  There's one little bug:  Starts playing in the middle of a file, which happens if: 1). play the folder, 2). refresh, 3). play the folder again. 


One other thing--I forgot to mention that it is preferable if a shuffle player repeats playlist, until the user stops it, very similar to an internet radio's function. 
Title: Re: Responsive small screen template - audioplayer
Post by: dj on June 22, 2019, 10:23:06 AM
The audio player is working mostly well.  There's one little bug:  Starts playing in the middle of a file, which happens if: 1). play the folder, 2). refresh, 3). play the folder again.
it's not a bug, it's a feature. It later remembers last playing position.
But on shuffle play it's make no sense (I disabled it on shuffle play)

changelog:
Title: Re: Responsive small screen template
Post by: bmartino1 on June 22, 2019, 10:03:02 PM
Yes, it's true. I'm glad you also found this error. I've already reported that "hfs.diff.tpl" doesn't work on root HERE (http://rejetto.com/forum/index.php?topic=13060.msg1064489#msg1064489), but I didn't get any reply about it. The normal behavior is that "hfs.diff.tpl" should work on root too. I hope Rejetto get attention to this.

looks like you guys may have already answered or solved it. ive foi d that if you dont bind folder to root.

so hfs main directory tree 8s set to a primary folder and dif tpl is i  that folder.
Title: Re: Responsive small screen template - audioplayer
Post by: danny on June 24, 2019, 01:25:57 PM
it's not a bug, it's a feature. It later remembers last playing position.
But on shuffle play it's make no sense (I disabled it on shuffle play)
changelog:
  • fixed Starts playing in the middle of a file on shuffleplay
  • add sleep timer in s  ?300
That works much better!   Only problem is that it stopped playing at the end of the playlist (you wouldn't want an internet radio that stops).  Can we get a playlist-repeat? 

Title: Re: Responsive small screen template - audioplayer
Post by: dj on June 26, 2019, 05:07:30 AM
That works much better!   Only problem is that it stopped playing at the end of the playlist (you wouldn't want an internet radio that stops).  Can we get a playlist-repeat?
added (http://rejetto.com/forum/index.php?topic=11754.msg1064704#msg1064704) repeat to the editable vars (update @danny: set it to true)
Title: Re: Responsive small screen template - audioplayer
Post by: danny on June 26, 2019, 05:33:01 PM
added (http://rejetto.com/forum/index.php?topic=11754.msg1064704#msg1064704) repeat to the editable vars (update @danny: set it to true)
While getting things done about the house, I noticed the shuffle playlist automatically repeat.  This works perfectly!

I had used it with my little amplifier https://www.ebay.com/itm/112323747087? with a spare 19v laptop power pack and a couple of old fashioned big size speakers (as tall as a desk, 12" woofer), which made good use of the 7 watts.  This is clear, so one works for many rooms.

Paradigm shift:  All other media players have an initial load-media step.  However, HFS+DJ's music player begins with the media already loaded, so it plays straightaway, with just one mouse-click.  That is elegant. 
Title: lazyimages with picviewer_addon
Post by: danny on July 04, 2019, 08:50:21 PM
DJ, your lazyimages with picviewer_addon works well on large folders.

One slight hitch--the slideshow. 
Browser "Popup was blocked" prevents slideshow function.  So, click = close (unintentionally).  To fix, it needs to use same window, not new window.  It may need a < in the corner to return to the file list. 
And perhaps the <img> tag needs height="100%" so images can be seen on high-res PC display.  In addition, I think that phones/tablets may require <meta name="viewport" content="height=device-height, initial-scale=1, user-scalable=yes"> for the slideshow-generated page.  Or  image.style.height = '100%';  for javascript.

Edit:  Works as intended on Firefox; however, chromium/opera popup blocker does close instead of next.  Goodly function either way. 
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 05, 2019, 03:54:04 AM
you can try my other pictureviewer (http://rejetto.com/forum/index.php?topic=13060.msg1064013#msg1064013)
It uses the same window. Click the X (in the right top corner) to return to filelist
Title: Re: Responsive small screen template
Post by: danny on July 06, 2019, 06:33:33 AM
I'd like to try your lazyimages with picviewer_addon in the throwback templates.
The lazyimages portion (loading what is visible), decreases bandwidth (important for mobile).  I wanted to add it to the midsummer version because it handles very gigantic folders.  Um, how is it done?  EDIT:  Second example was compatible https://imagekit.io/blog/lazy-loading-images-complete-guide/

P.S.  I love your Expand-O-Matic adaptive-scaling top menu in your newest template.  That is brilliant. 
Title: Re: Responsive small screen template
Post by: dj on July 06, 2019, 05:25:25 PM
I'd like to try your lazyimages with picviewer_addon in Throwback-XM2.

I recommend to use native (https://addyosmani.com/blog/lazy-loading/) lazy loading
Simply add loading="lazy" to the image tag
It will work in future browser versions

P.S.
the pictureviewer.zip works,
if you add id="files" to the table tag (with %list%)

update: pictureviewer works also with mobil-light_4.6 (set compatible=1)

FAQ pictureviewer:
click on image icon, next pic click on pic, close click on X
previous pic click on left side of pic (fullscreen click on left side of first pic (exit=Esc))
Title: Re: Responsive small screen template
Post by: danny on July 08, 2019, 06:21:29 PM
the pictureviewer.zip works, if you add id="files" to the table tag (with %list%) update: pictureviewer works also with mobil-light_4.6 (set compatible=1)
FAQ pictureviewer: click on image icon, next pic click on pic, close click on X
Can't find the X.  How do I close the slideshow?
Need image Centered on PC screen (not far left)
How to adjust advance time in seconds?
Need 50%transparent gray (or black) background for slideshow
Need to add  min-height:62%  so the small image tap-target can be found

Perhaps click bottom edge of photo to begin 7 seconds automated advance slideshow; or click top edge of photo to close slideshow?  Would be nice, but I can't find the controls.
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 09, 2019, 05:58:21 AM
Can't find the X.  How do I close the slideshow?
fixed need to scroll to find X, added background shadow for better visibility

Need image Centered on PC screen (not far left)
Need 50%transparent gray (or black) background for slideshow
Code: [Select]
top:50%; left:50%; transform:translate(-50%,-50%)
Perhaps click bottom edge of photo to begin 7 seconds automated advance slideshow? Would be nice, but I can't find the controls.
longtouch (rightclick) on image to start slideshow
Title: Re: Responsive small screen template - pictureviewer
Post by: danny on July 09, 2019, 04:20:16 PM
fixed need to scroll to find X, added background for better visibility
Instead of background for the X, it needs this (text shadow):   color:green;font-size:24px;font-weight:bold;text-shadow:1px 0px 1px #FFFEEE, -1px 0px 1px gray

For the photo,  object-fit  can work if the photo is in a div.
longtouch on image to start slideshow
Longtouch method isn't really PC compatible. It seems like a secret. Perhaps another control is needed, such as > (play) so it will work easily on the PC? 
In that case, there would be two controls, like this: 
x
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 11, 2019, 03:47:26 AM
Longtouch method isn't really PC compatible
longtouch=rightclick
but feel free to put the mod.oncontextmenu function to a another control like ▶
Title: Re: Responsive small screen template - pictureviewer
Post by: danny on July 11, 2019, 11:21:46 AM
...
but feel free to put the mod.oncontextmenu function to a another control like ▶
That might take a while--Can you recommend a website that seems effective at teaching me how to read javascript?   
Title: Re: Responsive small screen template - pictureviewer
Post by: bmartino1 on July 11, 2019, 12:41:08 PM
That might take a while--Can you recommend a website that seems effective at teaching me how to read javascript?

w3 schools???

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

https://www.w3schools.com/js/
Title: Re: Responsive small screen template - pictureviewer
Post by: danny on July 12, 2019, 07:09:28 PM
Code: [Select]
top:50%; left:50%; transform:translate(-50%,-50%)
Or this, with object-fit:
Code: [Select]
mod.style = 'position:fixed;top:0px;max-height:100%;height:100vh;width:100vw;image-orientation:from-image;z-index:2;background:rgba(0,0,0,0.85);object-fit:contain';Attached sample.  Although, note that I turned off the borderless fullscreen mode because there were no on-screen controls to exit from that mode (the _ typo is from me, and on purpose).  The attached sample is working quite nicely.  Not fundamentally different--just styled. 
Title: Re: Responsive small screen template - pictureviewer
Post by: dj on July 15, 2019, 03:53:14 AM
center on screen with with object-fit zooms small images
Exit from fullscreen with Esc Button (or back button on android ◁ )

P.S. to dim the background add
Code: [Select]
outline: 9999px solid rgba(0,0,0,0.5)
update: v2 centers images
Title: Re: Responsive small screen template
Post by: danny on July 15, 2019, 05:26:13 AM
The slideshow is working ever so nicely.

However, I'm having a problem with the MP3 folder player.  There seems to be 1 or 2 megabytes preloading even though the play button hadn't been clicked.

Even with a two day effort, I couldn't seem to knacker the preloading--all attempts at edit were met with either not play or full file downloading.  So, I need so help to make sure that the music player downloads nothing unless the play button is clicked; as well as not increase the connection count, unless the play button is clicked. 
Title: Re: Responsive small screen template
Post by: dj on July 15, 2019, 05:43:28 AM
@danny set the last audio.preload to 'none' (untested at the moment)

Title: Re: Responsive small screen template
Post by: danny on July 15, 2019, 01:48:10 PM
That solved the problem of doing stuff before play clicked.  New problem:  downloading songs twice while playing.  The double-download is intermittent and only with firefox (doesn't happen with chrome).  Also the number of get requests varies.  With firefox, there can be a get request After the mp3 has fully download.

The file is actually 1075kB; however, there may be a logging error, due to firefox odd streaming behavior.  According to the browser console, firefox received only 1075kB. 

Edit:  The download behavior is the same as firefox's built in html5 player. 
Title: Re: Responsive small screen template
Post by: dj on July 15, 2019, 08:21:47 PM
The double-download problem is intermittent.  Also the number of get requests varies.
I don't know. I think, theres no double-download, the browser downloads parts (can see in browser network analysis) (it's the filesize of your song 2M?)
stackoverflow (https://stackoverflow.com/questions/3504008/html5-audio-player-makes-multiple-get-requests-when-loading-why) don't help really
the multiple requests have status 206 (partial content load)


update: yes, you make a mistake in the editing (changing the play button is not nessary)
Title: Re: Responsive small screen template
Post by: danny on July 17, 2019, 03:11:35 PM
In case the wifi blinked (mp3 unavailable), or In case the server was up against the download/connection limit (mp3 unavailable), or
perhaps I've renamed/moved an mp3 file (unavailable), then,  Is it possible to have it go to the next file in the playlist, instead of stop? 
@danny replace audio.onerror
Code: [Select]
audio.onerror=function(){audio.onended()}
Awesome!
P.S.
Also, it can play the apple and aac too:  '.mp3','.ogg','.m4a','.aac'
Title: Re: Responsive small screen template
Post by: dj on July 17, 2019, 04:35:39 PM
@danny replace audio.onerror

Code: [Select]
audio.onerror=function(){audio.onended()}
P.S.
Also, it can play playlists (m3u) and webradio (http://dir.xiph.org/)


I'm on holidays next week's
latest template (http://rejetto.com/forum/index.php?topic=11754.msg1064605#msg1064605)+audioplayer (http://rejetto.com/forum/index.php?topic=11754.msg1064704#msg1064704)+pictureviewer (http://rejetto.com/forum/index.php?topic=11754.msg1064755#msg1064755)


Title: Re: Responsive small screen template
Post by: danny on July 19, 2019, 02:04:01 AM
I got to thinking:  Different size screens--It would help if the left 50% of the screen was <back for the slideshow and the right 50% of the screen was forwards> for the slideshow.   mod.onclick = function(evt) {if (evt.clientX   How to arrange it?