oupala / apaxy

a simple, customisable theme for your apache directory listing
https://oupala.github.io/apaxy/
GNU General Public License v3.0
1.86k stars 256 forks source link

Filter content search box doesn't work? #125

Closed dorianborovina closed 5 years ago

dorianborovina commented 5 years ago

Hi guys,

Thank you for such a wonderful theme! On my installation instance filter content search box doesn't seem work. Am I the only one or?

I have the script pointed out to the correct script location. This is written in the footer.html

<script src=/theme/apaxy.js></script>

Apaxy.js is the newest, I would say. Any tips and tricks? Thank you! 👍

oupala commented 5 years ago

It is strange that the path of the js file is an absolut path. It should probably be a relative path (without the initial slash /). Unless you have installed apaxy at the root level of your web server.

Can you check if you have some errors in the web console or some non-loaded resources in the network monitor?

dorianborovina commented 5 years ago

Hi, Thank you for your reply. I have fixed one that problem, now I'm getting the other one.

apaxy.js:7 Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined at apaxy.js:7

Here is the problem:

var a = indexes[i].getElementsByTagName('a')[0];

EDIT:

Filter content works, but the apaxy.js is breaking because of the bug on the line 7. I have removed the whole thing, and now it works. 👍

// fix links when not adding a / at the end of the URI
var uri = window.location.pathname.substr(1);
if (uri.substring(uri.length - 1) !== '/') {
  var indexes = document.getElementsByClassName('indexcolname');
  var i = indexes.length;
  while (i) {
    var a = indexes[i].getElementsByTagName('a')[0];
    a.href = '/' + a.getAttribute('href', 2);
  }
}
oupala commented 5 years ago

Can you indicate the browser and version you're using?

What version of apaxy are you using? What branch of the git repo? Have you changed anything to any file (especially the header or the footer)?

Is your url public or private? (ie. can we have a look at it or not?)

Have you installed apaxy at the root level of your web server or not?

the-nalexx commented 5 years ago

Hi

if (uri.substring(uri.length - 1) !== '/') {
  var indexes = document.getElementsByClassName('indexcolname');

  for (let i of indexes) {
    var a = i.getElementsByTagName('a')[0];
    a.href = '/' + a.getAttribute('href', 2);
  }
}

On firefox 65.0.2, it solved the problem. Does it work for you all too ?

edit : sorry, first message on github, got to get used to the editor !

oupala commented 5 years ago

@woodrowbarlow I do also see the same error on my dev instance. Can you please check if the search bar code needs optimization? @the-nalexx is proposing a new version of the code.

@the-nalexx I edited you message so that it renders better on GitHub. You can see this page to understand how to beautifully format your code in issues.

the-nalexx commented 5 years ago

thank you !

woodrowbarlow commented 5 years ago

@oupala i didn't write that bit of code, it has existed in apaxy since before you took over - i just moved it into apaxy.js. i don't even know what it's for and it isn't necessary for the filter code.

the solution posted by @the-nalexx seems sane to me.

the fact that this prevented the rest of the javascript from loading is a good argument for sticking it in an object and initializing it once the page has loaded, like i did with the filter code. that way, if one component breaks it won't affect the other components.

oupala commented 5 years ago

You're right @woodrowbarlow sorry for being mistaken.

This code come from a very old commit made by @HazCod and @wblondel. Do you guys wanna fix this? Or do we take the change proposed by @the-nalexx?

wblondel commented 5 years ago

Hello,

I'm not sure to understand why I'm tagged on this issue, I don't remember contributing to this project at all...

@oupala do you have a link to the commit? Thank you 😄

oupala commented 5 years ago

@wblondel I might have been mistaken, but you seem to be mentioned in this commit.

wblondel commented 5 years ago

Oh, I see it now. Actually, I commented on this commit the following :

"Broken links since this commit. It does not affect links on icons though. If I remove the new JS code, it works again Config : Apache 2.4.17, on Windows"

It looks like I didn't know how to use "issues" at the time... ;)

I didn't make this commit, I just commented to say it broke links.

hazcod commented 5 years ago

This was ages ago, and sadly I don't use apaxy anymore. Best to revert that commit @oupala ?

oupala commented 5 years ago

If you don't want to maintain your commit, no problem @HazCod.

We'll try to take care of it by ourselves.

oupala commented 5 years ago

@the-nalexx Do you want to try to create a pull request for the change that you proposed earlier?

the-nalexx commented 5 years ago

The problem is I'm not sure of what you're asking of me. As I said, I have signed in to github yesterday and have barely never used a git. The reason why came here was because of this bug : it occured to me, I fixed it, but instead of keeping it for myself I wanted to report my solution to all.

For now, I dont understand all... push, pull, commit, merge... Just use this code so that it serves everyone. I'll come back :D

oupala commented 5 years ago

Ok @the-nalexx, don't worry, I'll take care of applying your code to the codebase.

Thanks anyway and happy discovery of git and GitHub!

oupala commented 5 years ago

I fixed the issue following @the-nalexx proposal in commit f8670f0.

Thanks also @dorianborovina for finding the bug!

SubrataM3 commented 5 years ago

Hi @oupala ,

I have this search issue also, I am using latest git version and nginx with fancyindex. There is no error in the console log, also files (js,css,header,footer) are loading correctly.

footer.html (NOTE: apaxy folder is in document root.)

  <div class="block">
    {FOOTER-MESSAGE}
  </div><!--/.postlisting-->

</div><!--/.wrapper-->

<div class="footer">
  Apaxy by <a href="https://twitter.com/adamwhitcroft">@adamwhitcroft</a>
</div><!--/.footer-->
<script src=/apaxy/theme/apaxy.js></script>

I have a test server up with apaxy installed. Let me know if you want to see. Thanks.

oupala commented 5 years ago

You can post your server ip on an instance of privatebin (such as framabin), with a short lifetime (around 1 week).

What is the git commit of the version of apaxy that you're using?

SubrataM3 commented 5 years ago

Ok, here is the link I have just cloned the repo an hour ago. so its the latest. 9d15cc5 (HEAD -> develop, origin/develop, origin/HEAD) Merge branch 'master' into develop Chrome Version: 75.0.3770.80

oupala commented 5 years ago

Here is your nginx html markup:

<link href="/apaxy/theme/style.css" rel="stylesheet">
<div class="wrapper">
<!-- we open the `wrapper` element here, but close it in the `footer.html` file -->

<ol class="breadcrumb" id="breadcrumb">
</ol>

<input type="search" id="filter" placeholder="filter contents" />

{HEADER-MESSAGE}
<table id="list">
<thead>
  <tr>
    <th style="width:55%"><a href="?C=N&amp;O=A">File Name</a>&nbsp;<a href="?C=N&amp;O=D">&nbsp;&darr;&nbsp;</a></th>
    <th style="width:20%"><a href="?C=S&amp;O=A">File Size</a>&nbsp;<a href="?C=S&amp;O=D">&nbsp;&darr;&nbsp;</a></th>
    <th style="width:25%"><a href="?C=M&amp;O=A">Date</a>&nbsp;<a href="?C=M&amp;O=D">&nbsp;&darr;&nbsp;</a></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="link"><a href="../">Parent directory/</a></td>
    <td class="size">-</td>
    <td class="date">-</td>
  </tr>
  <tr>
    <td class="link"><a href="small.flv" title="small.flv">small.flv</a></td>
    <td class="size">296.2 KiB</td>
    <td class="date">2014-Feb-16 18:49</td>
  </tr>
  <tr>
    <td class="link"><a href="small.mp4" title="small.mp4">small.mp4</a></td>
    <td class="size">374.6 KiB</td>
    <td class="date">2014-Feb-16 18:49</td>
  </tr>
  <tr>
    <td class="link"><a href="small.ogv" title="small.ogv">small.ogv</a></td>
    <td class="size">428.0 KiB</td>
    <td class="date">2014-Feb-16 18:49</td>
  </tr>
  <tr>
    <td class="link"><a href="small.webm" title="small.webm">small.webm</a></td>
    <td class="size">224.1 KiB</td>
    <td class="date">2014-Feb-16 18:49</td>
  </tr>
  <tr>
    <td class="link"><a href="test.mp4" title="test.mp4">test.mp4</a></td>
    <td class="size">0 B</td>
    <td class="date">2019-Jun-07 12:47</td>
  </tr>
</tbody>
</table>  <div class="block">
    {FOOTER-MESSAGE}
  </div><!--/.postlisting-->

</div><!--/.wrapper-->

<div class="footer">
  Apaxy by <a href="https://twitter.com/adamwhitcroft">@adamwhitcroft</a>
</div><!--/.footer-->
<script src=/apaxy/theme/apaxy.js></script>

And here is the default apache hmlt markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Index of /files</title>
    <link rel="stylesheet" href="/files/theme/style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.1.3/dist/css/lightgallery.min.css" integrity="sha256-oPZ2OUkKul2aJQeDwKoO1p+DpvFR+w17n7YXydvFRWU=" crossorigin="anonymous">
    <div class="wrapper">
      <!-- we open the `wrapper` element here, but close it in the `footer.html` file -->
      <ol class="breadcrumb" id="breadcrumb"></ol>
      <input type="search" id="filter" placeholder="filter contents" />
      <table id="indexlist">
        <tr class="indexhead">
          <th class="indexcolicon"><img src="/files/theme/icons/blank.png" alt="[ICO]" /></th>
          <th class="indexcolname"><a href="?C=N;O=D">Name</a></th>
          <th class="indexcollastmod"><a href="?C=M;O=A">Last modified</a></th>
          <th class="indexcolsize"><a href="?C=S;O=A">Size</a></th>
        </tr>
        <tr class="even">
          <td class="indexcolicon"><a href="/"><img src="/files/theme/icons/folder-home.png" alt="[PARENTDIR]" /></a></td>
          <td class="indexcolname"><a href="/">Parent Directory</a></td>
          <td class="indexcollastmod">&nbsp;</td>
          <td class="indexcolsize">  - </td>
        </tr>
        <tr class="odd">
          <td class="indexcolicon"><a href="foldername/"><img src="/files/theme/icons/folder.png" alt="[DIR]" /></a></td>
          <td class="indexcolname"><a href="foldername/">foldername/</a></td>
          <td class="indexcollastmod">2016-07-29 03:08  </td>
          <td class="indexcolsize">  - </td>
        </tr>
        <tr class="even">
          <td class="indexcolicon"><a href="file.html"><img src="/files/theme/icons/html.png" alt="[html]" /></a></td>
          <td class="indexcolname"><a href="file.html">file.html</a></td>
          <td class="indexcollastmod">2019-03-02 16:15  </td>
          <td class="indexcolsize">4.3K</td>
        </tr>
      </table>
      <div class="block">
    {FOOTER-MESSAGE}
      </div>
      <!--/.postlisting-->
    </div>
    <!--/.wrapper-->
    <div class="footer">
      Apaxy by <a href="https://twitter.com/adamwhitcroft">@adamwhitcroft</a>
    </div>
    <!--/.footer-->
    <script src=/files/theme/apaxy.js></script>
  </body>
</html>

As you can see, your markup generated by nginx is slightly different from the one generated by apache.

The markup for each file differs:

  <tr>
    <td class="link"><a href="small.webm" title="small.webm">small.webm</a></td>
    <td class="size">224.1 KiB</td>
    <td class="date">2014-Feb-16 18:49</td>
  </tr>
  <tr class="even">
    <td class="indexcolicon"><a href="file.html"><img src="/files/theme/icons/html.png" alt="[html]" /></a></td>
    <td class="indexcolname"><a href="file.html">file.html</a></td>
    <td class="indexcollastmod">2019-03-02 16:15  </td>
    <td class="indexcolsize">4.3K</td>
  </tr>

You should then try to make nginx generate 4 cells per row (for apache, this is configurable using the IndexOptions option).

And as you can see, the missing cell is the indexcolicon cell, the one referencing the icon.

You can also try to change this line and to replace:

var text = row.getElementsByTagName('td')[1].textContent.toLowerCase();

by

var text = row.getElementsByTagName('td')[0].textContent.toLowerCase();

because the name of the file is in cell 0 (the first one) for nginx and in cell 1 (the second one) for apache.

SubrataM3 commented 5 years ago

Thanks for your detailed answer 👍 .

  1. Yes, search function works by modifying this line (it seems you have linked correct line, but pasted wrong line above).
  2. I checked the code and found classname references like indexhead, indexcolname which is not available with nginx. Also lightgallery.js makes use of apache specific classname.
  3. So, there are many minor adjustments needed to be done to make apaxy work with nginx. If you are(or anyone) interested in making nginx mod, i can help with nginx setup related task/testing server(if necessary) etc.
oupala commented 5 years ago

Thanks for the review. Ihave edited and fixed my previous comment.

If you're ok to maintain an nginx fork of apaxy, it is ok. We'll see if the changes are huge or not, if it needs to be a fork, a branch, or if we can improve apaxy to make it work with both apache and nginx.