github.com/emc-advanced-dev/unik@v0.0.0-20190717152701-a58d3e8e33b7/docs/examples/example-nodejs-fileserver/node_modules/serve-index/public/directory.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3    <head>
     4      <meta charset='utf-8'> 
     5      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     6      <title>listing directory {directory}</title>
     7      <style>{style}</style>
     8      <script>
     9        function $(id){
    10          var el = 'string' == typeof id
    11            ? document.getElementById(id)
    12            : id;
    13  
    14          el.on = function(event, fn){
    15            if ('content loaded' == event) {
    16              event = window.attachEvent ? "load" : "DOMContentLoaded";
    17            }
    18            el.addEventListener
    19              ? el.addEventListener(event, fn, false)
    20              : el.attachEvent("on" + event, fn);
    21          };
    22  
    23          el.all = function(selector){
    24            return $(el.querySelectorAll(selector));
    25          };
    26  
    27          el.each = function(fn){
    28            for (var i = 0, len = el.length; i < len; ++i) {
    29              fn($(el[i]), i);
    30            }
    31          };
    32  
    33          el.getClasses = function(){
    34            return this.getAttribute('class').split(/\s+/);
    35          };
    36  
    37          el.addClass = function(name){
    38            var classes = this.getAttribute('class');
    39            el.setAttribute('class', classes
    40              ? classes + ' ' + name
    41              : name);
    42          };
    43  
    44          el.removeClass = function(name){
    45            var classes = this.getClasses().filter(function(curr){
    46              return curr != name;
    47            });
    48            this.setAttribute('class', classes.join(' '));
    49          };
    50  
    51          return el;
    52        }
    53  
    54        function search() {
    55          var str = $('search').value
    56            , links = $('files').all('a');
    57  
    58          links.each(function(link){
    59            var text = link.textContent;
    60  
    61            if ('..' == text) return;
    62            if (str.length && ~text.indexOf(str)) {
    63              link.addClass('highlight');
    64            } else {
    65              link.removeClass('highlight');
    66            }
    67          });
    68        }
    69  
    70        $(window).on('content loaded', function(){
    71          $('search').on('keyup', search);
    72        });
    73      </script>
    74    </head>
    75    <body class="directory">
    76      <input id="search" type="text" placeholder="Search" autocomplete="off" />
    77      <div id="wrapper">
    78        <h1><a href="/">~</a>{linked-path}</h1>
    79        {files}
    80      </div>
    81    </body>
    82  </html>