servel 0.19.0 → 0.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 46aac7ea1121e835e50af2f906be76d30fb73190171842ce642381585b334ea6
-  data.tar.gz: 0f31b01220a763c8fcdd96561d76ee75bed06c2d052d7f5f521b8e9968f14791
+  metadata.gz: 2763001e5065c946d727b67fdf97e42a888d6794159528c72b2f15c7492c3409
+  data.tar.gz: d44b73a268aa7e69ea9b431ade3700a311b37906614fd8601effafc09473b2f4
 SHA512:
-  metadata.gz: febe17fedca3812eb8e2a21cff9a0e869a8a3a683bb593e85dcde279b065bdc3b47ff0c0e9789367db331b2a9b3b1183c11ccbf533769914aad9154f730315a5
-  data.tar.gz: 0313e123f72be5c37852fa9f1205a97ec30c44137525b8a2e776cc3527ad7bbc9e080f565632814c099d800f874f9dcfc33f1b4287881cb98cacfd936d8fdb6e
+  metadata.gz: ea0615e5c1661f40afd3ebf639e6d751db50989506fec1434c81f72ca3aaa3107c0eb5a8aa5f40e899e7d94ca62c99332e0998389c4a23296c910f8dd2c43750
+  data.tar.gz: 0071e811b8c7c5a401b5a060c297a686616e311a9bd6726a4e4bd5d6ed6626ebf25cd193ea2202dbeaff9a9ca851bfc4f19de73ad819a5245e33c196cb0c3ede

data/lib/servel.rb

@@ -7,6 +7,7 @@ require 'lru_redux'
 
 require 'thread'
 require 'pathname'
+require 'json'
 
 module Servel
   def self.build_app(path_map)
@@ -22,6 +23,7 @@ require "servel/instrumentation"
 require "servel/entry"
 require "servel/entry_factory"
 require "servel/haml_context"
+require "servel/entries"
 require "servel/index"
 require "servel/app"
 require "servel/home_app"

data/lib/servel/app.rb

@@ -26,7 +26,12 @@ class Servel::App
     return [404, {}, []] unless fs_path.exist?
 
     request = Rack::Request.new(env)
-    Servel::Index.new(url_root: url_root, url_path: url_path, fs_path: fs_path, params: request.params).render
+
+    if json_request?(request)
+      Servel::Entries.new(url_root: url_root, url_path: url_path, fs_path: fs_path, params: request.params).render
+    else
+      Servel::Index.new(url_root: url_root, url_path: url_path).render
+    end
   end
 
   def redirect(location)
@@ -39,6 +44,10 @@ class Servel::App
     Rack::Utils.clean_path_info(url_path)
   end
 
+  def json_request?(request)
+    Rack::Utils.best_q_match(request.get_header("HTTP_ACCEPT"), ['text/html', 'application/json']) == 'application/json'
+  end
+
   def try_encode(string)
     return string if string.encoding == UTF_8
     string.encode(UTF_8)

data/lib/servel/entries.rb

@@ -0,0 +1,68 @@
+class Servel::Entries
+  extend Servel::Instrumentation
+  RENDER_CACHE = LruRedux::ThreadSafeCache.new(100)
+  SORT_METHODS = ["name", "mtime", "size", "type"]
+  SORT_DIRECTIONS = ["asc", "desc"]
+
+  def initialize(url_root:, url_path:, fs_path:, params:)
+    @url_root = url_root
+    @url_path = url_path
+    @fs_path = fs_path
+    @params = params
+  end
+
+  def render
+    RENDER_CACHE.getset(render_cache_key) { [200, {}, [entries.to_json]] }
+  end
+
+  def render_cache_key
+    @render_cache_key ||= [@fs_path.to_s, @fs_path.mtime.to_i, sort_method, sort_direction].join("-")
+  end
+
+  def entries
+    children = @fs_path.children.map { |path| Servel::EntryFactory.for(path) }.compact
+    special_entries + apply_sort(children.select(&:directory?)) + apply_sort(children.select(&:file?))
+  end
+
+  def sort_method
+    param = @params["_servel_sort_method"]
+    param = "name" unless SORT_METHODS.include?(param)
+    param
+  end
+
+  def sort_direction
+    param = @params["_servel_sort_direction"]
+    param = "asc" unless SORT_DIRECTIONS.include?(param)
+    param
+  end
+
+  def special_entries
+    list = []
+    list << Servel::EntryFactory.home("/") if @url_root != ""
+
+    unless @url_path == "/"
+      list << Servel::EntryFactory.top(@url_root == "" ? "/" : @url_root)
+      list << Servel::EntryFactory.parent("../")
+    end
+
+    list
+  end
+
+  def apply_sort(entries)
+    entries = case sort_method
+    when "name"
+      Naturalsorter::Sorter.sort_by_method(entries, :name, true)
+    when "mtime"
+      entries.sort_by { |entry| entry.mtime }
+    when "size"
+      entries.sort_by { |entry| entry.size || 0 }
+    when "type"
+      entries.sort_by { |entry| entry.type }
+    end
+
+    entries.reverse! if sort_direction == "desc"
+    entries
+  end
+
+  instrument :render, :entries, :apply_sort
+end

data/lib/servel/entry.rb

@@ -1,27 +1,45 @@
-class Servel::Entry
-  attr_reader :ftype, :type, :media_type, :listing_classes, :icon, :href, :name, :size, :mtime
-
-  def initialize(ftype:, type:, media_type: nil, listing_classes:, icon:, href:, name:, size: nil, mtime: nil)
-    @ftype = ftype
-    @type = type
-    @media_type = media_type
-    @listing_classes = listing_classes
-    @icon = icon
-    @href = href
-    @name = name
-    @size = size
-    @mtime = mtime
-  end
-
-  def directory?
-    @ftype == :directory
-  end
-
-  def file?
-    @ftype == :file
-  end
-
-  def media?
-    !@media_type.nil?
-  end
+class Servel::Entry
+  extend Servel::Instrumentation
+
+  attr_reader :ftype, :type, :media_type, :listing_classes, :icon, :href, :name, :size, :mtime
+
+  def initialize(ftype:, type:, media_type: nil, listing_classes:, icon:, href:, name:, size: nil, mtime: nil)
+    @ftype = ftype
+    @type = type
+    @media_type = media_type
+    @listing_classes = listing_classes
+    @icon = icon
+    @href = href
+    @name = name
+    @size = size
+    @mtime = mtime
+  end
+
+  def directory?
+    @ftype == :directory
+  end
+
+  def file?
+    @ftype == :file
+  end
+
+  def media?
+    !@media_type.nil?
+  end
+
+  def as_json(*)
+    {
+      icon: @icon,
+      href: Rack::Utils.escape_path(@href),
+      class: @listing_classes,
+      media_type: @media_type,
+      name: @name,
+      type: @type,
+      size: @size.nil? ? "-" : @size,
+      mtime: @mtime.nil? ? "-" : @mtime.strftime("%e %b %Y %l:%M %p"),
+      media: media?
+    }
+  end
+
+  instrument :as_json
 end

data/lib/servel/haml_context.rb

@@ -1,54 +1,38 @@
-class Servel::HamlContext
-  extend Servel::Instrumentation
-  include ActiveSupport::NumberHelper
-
-  LOCK = Mutex.new
-
-  def self.render(template, locals)
-    [200, {}, [new.render(template, locals)]]
-  end
-
-  def initialize
-    @build_path = Pathname.new(__FILE__).dirname.realpath + 'templates'
-  end
-
-  def render(template, locals = {})
-    haml_engine(template).render(self, locals)
-  end
-
-  def partial(name, locals = {})
-    render("_#{name}.haml", locals)
-  end
-
-  def include(path)
-    (@build_path + path).read
-  end
-
-  def sort_attrs(sort, current_method)
-    data = { sort_method: current_method, sort_direction: "asc" }
-    classes = ["sortable"]
-    if sort[:method] == current_method
-      data[:sort_active] = true
-      data[:sort_direction] = sort[:direction]
-      classes << "sort-active"
-      classes << "sort-#{sort[:direction]}"
-    end
-
-    {
-      data: data,
-      class: classes
-    }
-  end
-
-  def haml_engine(path)
-    LOCK.synchronize do
-      @@haml_engine_cache ||= {}
-      unless @@haml_engine_cache.key?(path)
-        @@haml_engine_cache[path] = Hamlit::Template.new(filename: path) { include(path) }
-      end
-      @@haml_engine_cache[path]
-    end
-  end
-
-  instrument :render, :partial, :include
+class Servel::HamlContext
+  extend Servel::Instrumentation
+  include ActiveSupport::NumberHelper
+
+  LOCK = Mutex.new
+
+  def self.render(template, locals)
+    [200, {}, [new.render(template, locals)]]
+  end
+
+  def initialize
+    @build_path = Pathname.new(__FILE__).dirname.realpath + 'templates'
+  end
+
+  def render(template, locals = {})
+    haml_engine(template).render(self, locals)
+  end
+
+  def partial(name, locals = {})
+    render("_#{name}.haml", locals)
+  end
+
+  def include(path)
+    (@build_path + path).read
+  end
+
+  def haml_engine(path)
+    LOCK.synchronize do
+      @@haml_engine_cache ||= {}
+      unless @@haml_engine_cache.key?(path)
+        @@haml_engine_cache[path] = Hamlit::Template.new(filename: path) { include(path) }
+      end
+      @@haml_engine_cache[path]
+    end
+  end
+
+  instrument :render, :partial, :include
 end

data/lib/servel/index.rb

@@ -1,80 +1,21 @@
 class Servel::Index
   extend Servel::Instrumentation
-  RENDER_CACHE = LruRedux::ThreadSafeCache.new(100)
-  SORT_METHODS = ["name", "mtime", "size", "type"]
-  SORT_DIRECTIONS = ["asc", "desc"]
 
-  def initialize(url_root:, url_path:, fs_path:, params:)
+  def initialize(url_root:, url_path:)
     @url_root = url_root
     @url_path = url_path
-    @fs_path = fs_path
-    @params = params
   end
 
   def render
-    RENDER_CACHE.getset(render_cache_key) { Servel::HamlContext.render('index.haml', locals) }
-  end
-
-  def render_cache_key
-    @render_cache_key ||= [@fs_path.to_s, @fs_path.mtime.to_i, sort_method, sort_direction].join("-")
+    Servel::HamlContext.render('index.haml', locals)
   end
 
   def locals
     {
       url_root: @url_root,
-      url_path: @url_path,
-      entries: entries,
-      sort: {
-        method: sort_method,
-        direction: sort_direction
-      }
+      url_path: @url_path
     }
   end
 
-  def entries
-    children = @fs_path.children.map { |path| Servel::EntryFactory.for(path) }.compact
-    special_entries + apply_sort(children.select(&:directory?)) + apply_sort(children.select(&:file?))
-  end
-
-  def sort_method
-    param = @params["_servel_sort_method"]
-    param = "name" unless SORT_METHODS.include?(param)
-    param
-  end
-
-  def sort_direction
-    param = @params["_servel_sort_direction"]
-    param = "asc" unless SORT_DIRECTIONS.include?(param)
-    param
-  end
-
-  def special_entries
-    list = []
-    list << Servel::EntryFactory.home("/") if @url_root != ""
-
-    unless @url_path == "/"
-      list << Servel::EntryFactory.top(@url_root == "" ? "/" : @url_root)
-      list << Servel::EntryFactory.parent("../")
-    end
-
-    list
-  end
-
-  def apply_sort(entries)
-    entries = case sort_method
-    when "name"
-      Naturalsorter::Sorter.sort_by_method(entries, :name, true)
-    when "mtime"
-      entries.sort_by { |entry| entry.mtime }
-    when "size"
-      entries.sort_by { |entry| entry.size || 0 }
-    when "type"
-      entries.sort_by { |entry| entry.type }
-    end
-
-    entries.reverse! if sort_direction == "desc"
-    entries
-  end
-
-  instrument :render, :locals, :entries, :apply_sort
+  instrument :render, :locals
 end

data/lib/servel/templates/_listing.haml

@@ -1,25 +1,17 @@
 %h1 Listing of #{url_root}#{url_path}
+#search-wrapper
+  %input#search{type: 'search'}
 .table-wrapper
   %table
     %thead
       %tr
-        %th{sort_attrs(sort, "name")}
+        %th.sortable.sort-active.sort-asc{data: { sort_method: 'name', sort_direction: 'asc' }}
           %a{href: "#"} Name
         %th.new-tab
-        %th.type{sort_attrs(sort, "type")}
+        %th.type.sortable{data: { sort_method: 'type', sort_direction: 'asc'}}
           %a{href: "#"} Type
-        %th.size{sort_attrs(sort, "size")}
+        %th.size.sortable{data: { sort_method: 'size', sort_direction: 'asc'}}
           %a{href: "#"} Size
-        %th.modified{sort_attrs(sort, "mtime")}
+        %th.modified.sortable{data: { sort_method: 'mtime', sort_direction: 'asc'}}
           %a{href: "#"} Modified
-    %tbody
-      - entries.each do |file|
-        %tr
-          %td
-            %span.icon= file.icon
-            %a.default{href: Rack::Utils.escape_path(file.href), class: file.listing_classes, data: { type: file.media_type }}= file.name
-          %td
-            %a.new-tab{href: Rack::Utils.escape_path(file.href), class: file.listing_classes, target: "_blank"} (New tab)
-          %td= file.type
-          %td= file.size.nil? ? "-" : number_to_human_size(file.size)
-          %td= file.mtime.nil? ? "-" : file.mtime.strftime("%e %b %Y %l:%M %p")
+  #listing-container

data/lib/servel/templates/css/common.css

@@ -22,4 +22,19 @@ a {
 
 a:hover, a:focus, a:active {
   text-decoration: underline;
+}
+
+#loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  background-color: rgba(255, 255, 255, 0.6);
+  font-size: 24px;
+  font-weight: bold;
 }

data/lib/servel/templates/css/gallery.css

@@ -1,6 +1,6 @@
 #gallery {
   background: #333;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
 }
@@ -49,6 +49,7 @@
   top: 0;
   right: 0;
   left: 0;
+  pointer-events: none;
 }
 
 .paginator {
@@ -63,6 +64,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: auto;
 }
 
 .paginator:active {

data/lib/servel/templates/css/listing.css

@@ -1,4 +1,5 @@
 #listing {
+  display: none;
   padding: 10px;
   position: relative;
   z-index: 1;
@@ -9,6 +10,21 @@
   margin-top: 0;
 }
 
+#search-wrapper {
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+#search {
+  width: 300px;
+  max-width: 100%;
+  padding: 5px;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.4;
+  border: 1px solid #ddd;
+}
+
 .table-wrapper {
   overflow: auto;
 }
@@ -19,6 +35,11 @@ table {
   border-collapse: collapse;
   border: 1px solid #ddd;
   table-layout: fixed;
+  will-change: transform;
+}
+
+#listing-container table, #listing-container tr:first-child td {
+  border-top: none;
 }
 
 th {
@@ -30,23 +51,27 @@ th, td {
   border: 1px solid #ddd;
 }
 
+tbody {
+  vertical-align: top;
+}
+
 tbody > tr:nth-of-type(odd) {
   background-color: #f9f9f9;
 }
 
-th.new-tab {
+th.new-tab, td.new-tab {
   width: 6em;
 }
 
-th.type {
-  width: 4em;
+th.type, td.type {
+  width: 5em;
 }
 
-th.size {
+th.size, td.size {
   width: 6em;
 }
 
-th.modified {
+th.modified, td.modified {
   width: 12em;
 }
 

data/lib/servel/templates/index.haml

@@ -12,11 +12,11 @@
       #{include('css/gallery-text.css')}
 
     :javascript
-      #{include('js/url-search-params.js')}
       #{include('js/listing.js')}
       #{include('js/ume.js')}
       #{include('js/gallery.js')}
+      #{include('js/index.js')}
   %body
-    - if entries.any? { |f| f.media? }
-      #gallery!= partial('gallery')
-    #listing!= partial('listing', { url_root: url_root, url_path: url_path, entries: entries, sort: sort })
+    #gallery!= partial('gallery')
+    #listing!= partial('listing', { url_root: url_root, url_path: url_path })
+    #loading Loading...

data/lib/servel/templates/js/gallery.js

@@ -1,21 +1,11 @@
-var $;
+"use strict";
 
 var Gallery = (function() {
-  var urls = [];
-  var types = [];
+  var $;
+  var $gallery;
+  var mediaEntries = [];
   var currentIndex = 0;
   var layoutItemMax = false;
-  var $gallery;
-
-  function initItems() {
-    var links = document.querySelectorAll("#listing a.default.media");
-    for(var i = 0; i < links.length; i++) {
-      var link = links[i];
-
-      urls.push(link.href);
-      types.push(link.dataset.type);
-    }
-  }
 
   function renderText(url) {
     var http = new XMLHttpRequest();
@@ -39,8 +29,10 @@ var Gallery = (function() {
   function render() {
     clearContent();
 
-    var url = urls[currentIndex];
-    var type = types[currentIndex];
+    var entry = mediaEntries[currentIndex];
+
+    var url = entry.href;
+    var type = entry.media_type;
 
     $gallery.classList.add(type);
 
@@ -60,7 +52,7 @@ var Gallery = (function() {
 
   function clamp(index) {
     if(index == null || isNaN(index) || index < 0) return 0;
-    if(index >= urls.length) return urls.length - 1;
+    if(index >= mediaEntries.length) return mediaEntries.length - 1;
     return index;
   }
 
@@ -89,7 +81,10 @@ var Gallery = (function() {
   }
 
   function jump(url) {
-    go(urls.indexOf(url));
+    var index = mediaEntries.findIndex(function(entry) {
+      return entry.href == url;
+    });
+    go(index);
   }
 
   function atBottom() {
@@ -102,7 +97,7 @@ var Gallery = (function() {
 
       if(e.target.matches("a.media:not(.new-tab)")) {
         e.preventDefault();
-        jump(e.target.href);
+        jump(e.target.dataset.url);
       }
       else if(e.target.matches("#page-back")) {
         e.stopPropagation();
@@ -132,6 +127,8 @@ var Gallery = (function() {
     });
 
     window.addEventListener("keydown", function(e) {
+      if(e.target == $("#search")) return;
+
       if(e.keyCode == 39 || ((e.keyCode == 32 || e.keyCode == 13) && atBottom())) {
         e.preventDefault();
         next();
@@ -159,19 +156,35 @@ var Gallery = (function() {
     layout();
   }
 
-  function init() {
-    $gallery = $("#gallery");
+  function onEntriesInit() {
+    onEntriesUpdate();
 
-    initItems();
-    initEvents();
-    initLayout();
-    render();
+    if(mediaEntries.length > 0) {
+      $gallery.style.display = "flex";
+
+      initEvents();
+      initLayout();
+    }
+  }
+
+  function onEntriesUpdate() {
+    currentIndex = 0;
+    mediaEntries = [];
+    for(var i = 0; i < window.entries.length; i++) {
+      if(window.entries[i].media) mediaEntries.push(window.entries[i]);
+    }
+
+    if(mediaEntries.length > 0) render();
   }
 
+  window.addEventListener("DOMContentLoaded", function() {
+    $ = document.querySelector.bind(document);
+    $gallery = $("#gallery");
+  });
+
   return {
-    init: init,
-    render: render,
-    clamp: clamp,
+    onEntriesInit: onEntriesInit,
+    onEntriesUpdate: onEntriesUpdate,
     go: go,
     prev: prev,
     next: next,
@@ -180,11 +193,3 @@ var Gallery = (function() {
     jump: jump
   };
 })();
-
-function initGallery() {
-  $ = document.querySelector.bind(document);
-  if(!$("#gallery")) return;
-  Gallery.init();
-}
-
-window.addEventListener("DOMContentLoaded", initGallery);

data/lib/servel/templates/js/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var Index = (function() {
+  var $;
+  var inited = false;
+
+  function entriesURL() {
+    var sortable = $("th.sortable.sort-active");
+    return `${location.pathname}?_servel_sort_method=${sortable.dataset.sortMethod}&_servel_sort_direction=${sortable.dataset.sortDirection}`;
+  }
+
+  function onEntriesLoad(callback) {
+    if(inited) {
+      Gallery.onEntriesUpdate();
+      Listing.onEntriesUpdate();
+    }
+    else {
+      inited = true;
+      Gallery.onEntriesInit();
+      Listing.onEntriesInit();
+    }
+
+    $("#loading").style.display = "none";
+    if(callback) callback();
+  }
+
+  function loadEntries(callback) {
+    $("#loading").style.display = "flex";
+
+    var http = new XMLHttpRequest();
+    http.open("GET", entriesURL());
+
+    http.onreadystatechange = function() {
+      if(http.readyState === 4 && http.status === 200) {
+        window.entries = JSON.parse(http.responseText);
+        setTimeout(function() {
+          onEntriesLoad(callback);
+        }, 0);
+      }
+    };
+
+    http.setRequestHeader("Accept", "application/json");
+    http.send();
+  }
+
+  window.addEventListener("DOMContentLoaded", function() {
+    $ = document.querySelector.bind(document);
+    loadEntries();
+  });
+
+  return {
+    loadEntries: loadEntries
+  };
+})();

data/lib/servel/templates/js/listing.js

@@ -1,26 +1,161 @@
-function initListing() {
-  $ = document.querySelector.bind(document);
-
-  function applySort(sortable) {
-    var params = new URLSearchParams(location.search.slice(1));
-    params.set("_servel_sort_method", sortable.dataset.sortMethod);
-    params.set("_servel_sort_direction", sortable.dataset.sortDirection);
-
-    if('sortActive' in sortable.dataset) {
-      params.set("_servel_sort_direction", sortable.dataset.sortDirection == "asc" ? "desc" : "asc");
-    }
-
-    location.href = location.pathname + "?" + params.toString();
-  }
-
-  document.body.addEventListener("click", function(e) {
-    if(!e.target) return;
-
-    if(e.target.closest("th.sortable")) {
-      e.preventDefault();
-      applySort(e.target.closest("th.sortable"));
-    }
-  });
-}
-
-window.addEventListener("DOMContentLoaded", initListing);
+"use strict";
+
+var Listing = (function() {
+  var $;
+  var $container;
+  var filteredEntries = [];
+  var perPage = 99;
+  var currentIndex = 0;
+  var moreContent = true;
+  var scrollDebounce = false;
+
+  function escapeHTML(unsafe) {
+    if(unsafe == null) return "";
+    return unsafe.toString()
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+
+  function HTMLSafe(pieces) {
+    var result = pieces[0];
+    var substitutions = [].slice.call(arguments, 1);
+    for(var i = 0; i < substitutions.length; ++i) result += escapeHTML(substitutions[i]) + pieces[i + 1];
+    return result;
+  }
+
+  function renderRow(file) {
+    return HTMLSafe`
+      <tr>
+        <td class="name">
+          <span class="icon">${file.icon}</span>
+          <a href="${file.href}" class="default ${file.class}" data-url="${file.href}" data-type="${file.media_type}">${file.name}</a>
+        </td>
+        <td class="new-tab">
+          <a href="${file.href}" class="new-tab ${file.class}" target="_blank">(New tab)</a>
+        </td>
+        <td class="type">${file.type}</td>
+        <td class="size">${file.size}</td>
+        <td class="modified">${file.mtime}</td>
+      </tr>
+    `;
+  }
+
+  function renderTable(currentEntries) {
+    var rows = currentEntries.map(function(entry) {
+      return renderRow(entry);
+    });
+
+    return `
+      <table>
+        <tbody>
+          ${rows.join("")}
+        </tbody>
+      </table>
+    `;
+  }
+
+  function render() {
+    var currentEntries = filteredEntries.slice(currentIndex, currentIndex + perPage);
+    $container.insertAdjacentHTML("beforeend", renderTable(currentEntries));
+  }
+
+  function atBottom() {
+    return (window.scrollY + window.innerHeight) == document.body.scrollHeight;
+  }
+
+  function onScrolled() {
+    if(atBottom() && moreContent) {
+      currentIndex += perPage;
+      if(currentIndex >= filteredEntries.length) moreContent = false;
+      render();
+    }
+    scrollDebounce = false;
+  }
+
+  function applySort(sortable) {
+    var previousSortable = $("th.sortable.sort-active");
+    previousSortable.classList.remove("sort-active", "sort-asc", "sort-desc");
+
+    if(sortable == previousSortable) {
+      sortable.dataset.sortDirection = sortable.dataset.sortDirection == "asc" ? "desc" : "asc";
+    }
+
+    sortable.classList.add("sort-active", "sort-" + sortable.dataset.sortDirection);
+
+    Index.loadEntries(function() {
+      sortable.scrollIntoView();
+    });
+  }
+
+  function updateFilteredEntries(needle) {
+    if(needle == "") {
+      filteredEntries = window.entries;
+    }
+    else {
+      filteredEntries = [];
+
+      for(var i = 0; i < window.entries.length; i++) {
+        var entry = window.entries[i];
+        if(entry.name.toLowerCase().includes(needle.toLowerCase())) filteredEntries.push(entry);
+      }
+    }
+  }
+
+  function applyFilter(needle) {
+    updateFilteredEntries(needle);
+
+    $container.innerHTML = "";
+    currentIndex = 0;
+    moreContent = true;
+    render();
+  }
+
+  function initEvents() {
+    window.addEventListener("scroll", function(e) {
+      if(!scrollDebounce) {
+        scrollDebounce = true;
+        setTimeout(onScrolled, 0);
+      }
+    });
+
+    document.body.addEventListener("click", function(e) {
+      if(!e.target) return;
+
+      if(e.target.closest("th.sortable")) {
+        e.preventDefault();
+        applySort(e.target.closest("th.sortable"));
+      }
+    });
+
+    $("#search").addEventListener("keyup", function(e) {
+      e.stopPropagation();
+
+      if(e.keyCode == 13) {
+        applyFilter($("#search").value);
+      }
+    });
+  }
+
+  function onEntriesInit() {
+    onEntriesUpdate();
+    $("#listing").style.display = "block";
+    initEvents();
+  }
+
+  function onEntriesUpdate() {
+    applyFilter($("#search").value);
+  }
+
+  window.addEventListener("DOMContentLoaded", function() {
+    $ = document.querySelector.bind(document);
+    $container = $("#listing-container");
+  });
+
+  return {
+    onEntriesInit: onEntriesInit,
+    onEntriesUpdate: onEntriesUpdate
+  };
+})();

data/lib/servel/version.rb

@@ -1,3 +1,3 @@
 module Servel
-  VERSION = "0.19.0"
+  VERSION = "0.20.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: servel
 version: !ruby/object:Gem::Version
-  version: 0.19.0
+  version: 0.20.0
 platform: ruby
 authors:
 - Brenton "B-Train" Fletcher
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-08-22 00:00:00.000000000 Z
+date: 2018-08-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -141,6 +141,7 @@ files:
 - lib/servel.rb
 - lib/servel/app.rb
 - lib/servel/cli.rb
+- lib/servel/entries.rb
 - lib/servel/entry.rb
 - lib/servel/entry_factory.rb
 - lib/servel/haml_context.rb
@@ -158,9 +159,9 @@ files:
 - lib/servel/templates/home.haml
 - lib/servel/templates/index.haml
 - lib/servel/templates/js/gallery.js
+- lib/servel/templates/js/index.js
 - lib/servel/templates/js/listing.js
 - lib/servel/templates/js/ume.js
-- lib/servel/templates/js/url-search-params.js
 - lib/servel/version.rb
 - servel.gemspec
 homepage: http://bloople.net/

data/lib/servel/templates/js/url-search-params.js

@@ -1,2 +0,0 @@
-/*! (C) Andrea Giammarchi - Mit Style License */
-var URLSearchParams=URLSearchParams||function(){"use strict";function URLSearchParams(query){var index,key,value,pairs,i,length,dict=Object.create(null);this[secret]=dict;if(!query)return;if(typeof query==="string"){if(query.charAt(0)==="?"){query=query.slice(1)}for(pairs=query.split("&"),i=0,length=pairs.length;i<length;i++){value=pairs[i];index=value.indexOf("=");if(-1<index){appendTo(dict,decode(value.slice(0,index)),decode(value.slice(index+1)))}else if(value.length){appendTo(dict,decode(value),"")}}}else{if(isArray(query)){for(i=0,length=query.length;i<length;i++){value=query[i];appendTo(dict,value[0],value[1])}}else{for(key in query){appendTo(dict,key,query[key])}}}}var isArray=Array.isArray,URLSearchParamsProto=URLSearchParams.prototype,find=/[!'\(\)~]|%20|%00/g,plus=/\+/g,replace={"!":"%21","'":"%27","(":"%28",")":"%29","~":"%7E","%20":"+","%00":"\0"},replacer=function(match){return replace[match]},secret="__URLSearchParams__:"+Math.random();function appendTo(dict,name,value){if(name in dict){dict[name].push(""+value)}else{dict[name]=isArray(value)?value:[""+value]}}function decode(str){return decodeURIComponent(str.replace(plus," "))}function encode(str){return encodeURIComponent(str).replace(find,replacer)}URLSearchParamsProto.append=function append(name,value){appendTo(this[secret],name,value)};URLSearchParamsProto["delete"]=function del(name){delete this[secret][name]};URLSearchParamsProto.get=function get(name){var dict=this[secret];return name in dict?dict[name][0]:null};URLSearchParamsProto.getAll=function getAll(name){var dict=this[secret];return name in dict?dict[name].slice(0):[]};URLSearchParamsProto.has=function has(name){return name in this[secret]};URLSearchParamsProto.set=function set(name,value){this[secret][name]=[""+value]};URLSearchParamsProto.forEach=function forEach(callback,thisArg){var dict=this[secret];Object.getOwnPropertyNames(dict).forEach(function(name){dict[name].forEach(function(value){callback.call(thisArg,value,name,this)},this)},this)};URLSearchParamsProto.toJSON=function toJSON(){return{}};URLSearchParamsProto.toString=function toString(){var dict=this[secret],query=[],i,key,name,value;for(key in dict){name=encode(key);for(i=0,value=dict[key];i<value.length;i++){query.push(name+"="+encode(value[i]))}}return query.join("&")};var dP=Object.defineProperty,gOPD=Object.getOwnPropertyDescriptor,createSearchParamsPollute=function(search){function append(name,value){URLSearchParamsProto.append.call(this,name,value);name=this.toString();search.set.call(this._usp,name?"?"+name:"")}function del(name){URLSearchParamsProto["delete"].call(this,name);name=this.toString();search.set.call(this._usp,name?"?"+name:"")}function set(name,value){URLSearchParamsProto.set.call(this,name,value);name=this.toString();search.set.call(this._usp,name?"?"+name:"")}return function(sp,value){sp.append=append;sp["delete"]=del;sp.set=set;return dP(sp,"_usp",{configurable:true,writable:true,value:value})}},createSearchParamsCreate=function(polluteSearchParams){return function(obj,sp){dP(obj,"_searchParams",{configurable:true,writable:true,value:polluteSearchParams(sp,obj)});return sp}},updateSearchParams=function(sp){var append=sp.append;sp.append=URLSearchParamsProto.append;URLSearchParams.call(sp,sp._usp.search.slice(1));sp.append=append},verifySearchParams=function(obj,Class){if(!(obj instanceof Class))throw new TypeError("'searchParams' accessed on an object that "+"does not implement interface "+Class.name)},upgradeClass=function(Class){var ClassProto=Class.prototype,searchParams=gOPD(ClassProto,"searchParams"),href=gOPD(ClassProto,"href"),search=gOPD(ClassProto,"search"),createSearchParams;if(!searchParams&&search&&search.set){createSearchParams=createSearchParamsCreate(createSearchParamsPollute(search));Object.defineProperties(ClassProto,{href:{get:function(){return href.get.call(this)},set:function(value){var sp=this._searchParams;href.set.call(this,value);if(sp)updateSearchParams(sp)}},search:{get:function(){return search.get.call(this)},set:function(value){var sp=this._searchParams;search.set.call(this,value);if(sp)updateSearchParams(sp)}},searchParams:{get:function(){verifySearchParams(this,Class);return this._searchParams||createSearchParams(this,new URLSearchParams(this.search.slice(1)))},set:function(sp){verifySearchParams(this,Class);createSearchParams(this,sp)}}})}};upgradeClass(HTMLAnchorElement);if(/^function|object$/.test(typeof URL)&&URL.prototype)upgradeClass(URL);return URLSearchParams}();(function(URLSearchParamsProto){var iterable=function(){try{return!!Symbol.iterator}catch(error){return false}}();if(!("forEach"in URLSearchParamsProto)){URLSearchParamsProto.forEach=function forEach(callback,thisArg){var names=Object.create(null);this.toString().replace(/=[\s\S]*?(?:&|$)/g,"=").split("=").forEach(function(name){if(!name.length||name in names)return;(names[name]=this.getAll(name)).forEach(function(value){callback.call(thisArg,value,name,this)},this)},this)}}if(!("keys"in URLSearchParamsProto)){URLSearchParamsProto.keys=function keys(){var items=[];this.forEach(function(value,name){items.push(name)});var iterator={next:function(){var value=items.shift();return{done:value===undefined,value:value}}};if(iterable){iterator[Symbol.iterator]=function(){return iterator}}return iterator}}if(!("values"in URLSearchParamsProto)){URLSearchParamsProto.values=function values(){var items=[];this.forEach(function(value){items.push(value)});var iterator={next:function(){var value=items.shift();return{done:value===undefined,value:value}}};if(iterable){iterator[Symbol.iterator]=function(){return iterator}}return iterator}}if(!("entries"in URLSearchParamsProto)){URLSearchParamsProto.entries=function entries(){var items=[];this.forEach(function(value,name){items.push([name,value])});var iterator={next:function(){var value=items.shift();return{done:value===undefined,value:value}}};if(iterable){iterator[Symbol.iterator]=function(){return iterator}}return iterator}}if(iterable&&!(Symbol.iterator in URLSearchParamsProto)){URLSearchParamsProto[Symbol.iterator]=URLSearchParamsProto.entries}if(!("sort"in URLSearchParamsProto)){URLSearchParamsProto.sort=function sort(){var entries=this.entries(),entry=entries.next(),done=entry.done,keys=[],values=Object.create(null),i,key,value;while(!done){value=entry.value;key=value[0];keys.push(key);if(!(key in values)){values[key]=[]}values[key].push(value[1]);entry=entries.next();done=entry.done}keys.sort();for(i=0;i<keys.length;i++){this["delete"](keys[i])}for(i=0;i<keys.length;i++){key=keys[i];this.append(key,values[key].shift())}}}})(URLSearchParams.prototype);