servel 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e91e5efe5fb7ebf0a803c7b8651d84188582b93c
-  data.tar.gz: db7b14fbe9096a17722164c6b389fc324268b0c0
+  metadata.gz: f87f633c75cd01064baed1ec7f09e01b2ca44d5c
+  data.tar.gz: 91e1f72f5c9523c3a35ba001912ca1f61a728a9d
 SHA512:
-  metadata.gz: b56fedb3ecc2caf4f023a58d5bec0d817256d268991d78051c9bdbed8d2f76e8ee40174c4f14c71cc5308a89cddacef9e7fabf4ba273bdabfb6c85ee947275a3
-  data.tar.gz: fbb024ed53a80cb97f9d4d407f69dc9b5840709517b50a9454bc37076893363f3b4084c50a43ba15f70a20da403eed495a1f7c10098dff67c753a5ed7558d071
+  metadata.gz: b2f7b7d838120c588d4cabe93cd5e6afbd1782784ae9200bbeb0e3a6a9f7db5672dc4d99dc7b1a916ced99fc319ded52a5e54fe9303456e82c04a175afb1151d
+  data.tar.gz: 51e7058e7de4372b3eeebfccca89a9a39ffead7e4cb4a052e4cf3f3184d44b11ccaf3fb6f715a58b9f9edfbc600d79466ac65a2e2716712d80138d3371572bf6

data/lib/servel.rb

@@ -6,13 +6,15 @@ require 'active_support/all'
 
 require 'json'
 require 'pathname'
+require 'delegate'
 
 module Servel
 end
 
 require "servel/version"
 require "servel/core_ext/pathname"
+require "servel/pathname_decorator"
 require "servel/haml_context"
-require "servel/index_view"
+require "servel/locals"
 require "servel/middleware"
 require "servel/servel"

data/lib/servel/core_ext/pathname.rb

@@ -1,9 +1,5 @@
 class Pathname
-  def image?
-    file? && extname && %w(.jpg .jpeg .png .gif).include?(extname.downcase)
-  end
-
-  def video?
-    file? && extname && %w(.webm).include?(extname.downcase)
+  def decorate(parent = false)
+    Servel::PathnameDecorator.new(self, parent)
   end
 end

data/lib/servel/locals.rb

@@ -0,0 +1,31 @@
+class Servel::Locals
+  def initialize(url_path:, fs_path:, root:)
+    @url_path = url_path
+    @fs_path = fs_path
+    @root = root
+  end
+
+  def locals
+    {
+      url_path: @url_path,
+      directories: directories,
+      files: files
+    }
+  end
+
+  def directories
+    list = @fs_path.children.select { |child| child.directory? }
+    list = sort_paths(list)
+    list.unshift(@fs_path.decorate(true)) unless @fs_path == @root
+    list
+  end
+
+  def files
+    list = @fs_path.children.select { |child| child.file? }
+    sort_paths(list)
+  end
+
+  def sort_paths(paths)
+    Naturalsorter::Sorter.sort(paths.map(&:to_s), true).map { |path| Pathname.new(path) }
+  end
+end

data/lib/servel/middleware.rb

@@ -2,7 +2,7 @@ class Servel::Middleware
   def initialize(app, options = {})
     @app = app
     @root = Pathname.new(options[:root])
-    @haml_context = Servel::HamlContext.new
+    @file_server = Rack::File.new(@root.to_s)
   end
 
   def call(env)
@@ -10,17 +10,13 @@ class Servel::Middleware
     url_path = url_path_for(path)
     fs_path = @root + url_path[1..-1]
 
-    unless fs_path.directory?
-      return @app.call(env)
-    end
+    return @file_server.call(env) unless fs_path.directory?
 
-    if path != "" && !path.end_with?("/")
-      return [302, { "Location" => "#{url_path}/" }, []]
-    end
+    url_path << "/" unless url_path.end_with?("/")
 
-    url_path << "/" if url_path != "" && !url_path.end_with?("/")
+    return [302, { "Location" => url_path }, []] unless path == "" || path.end_with?("/")
 
-    [200, {}, StringIO.new(Servel::IndexView.new(url_path, fs_path).render(@haml_context))]
+    index(url_path, fs_path)
   end
 
   def url_path_for(url_path)
@@ -29,4 +25,12 @@ class Servel::Middleware
 
     Rack::Utils.clean_path_info(url_path)
   end
+
+  def index(url_path, fs_path)
+    @haml_context ||= Servel::HamlContext.new
+    locals = Servel::Locals.new(url_path: url_path, fs_path: fs_path, root: @root).locals
+    body = @haml_context.render('index.haml', locals)
+
+    [200, {}, [body]]
+  end
 end

data/lib/servel/pathname_decorator.rb

@@ -0,0 +1,91 @@
+class Servel::PathnameDecorator < SimpleDelegator
+  def initialize(pathname, parent)
+    super(pathname)
+    @parent = parent
+  end
+
+  def decorate
+    self
+  end
+
+  def image?
+    file? && extname && %w(.jpg .jpeg .png .gif).include?(extname.downcase)
+  end
+
+  def video?
+    file? && extname && %w(.webm).include?(extname.downcase)
+  end
+
+  def audio?
+    file? && extname && %w(.mp3 .m4a .wav).include?(extname.downcase)
+  end
+
+  def media?
+    image? || video? || audio?
+  end
+
+  def type
+    if directory?
+      "Dir"
+    elsif file?
+      extname.sub(/^\./, "")
+    else
+      ""
+    end
+  end
+
+  def media_type
+    return "video" if video?
+    return "image" if image?
+    return "audio" if audio?
+    "unknown"
+  end
+
+  def listing_classes
+    klasses = []
+    klasses << "media" if media?
+    klasses << "image" if image?
+    klasses << "video" if video?
+    klasses << "audio" if audio?
+    klasses.join(" ")
+  end
+
+  def listing_attrs
+    {
+      class: listing_classes,
+      data: {
+        type: media_type
+      }
+    }
+  end
+
+  def parent?
+    @parent
+  end
+
+  def icon
+    if @parent
+      "🔝"
+    elsif directory?
+      "📁"
+    else
+      ""
+    end
+  end
+
+  def href
+    if @parent
+      "../"
+    else
+      basename
+    end
+  end
+
+  def name
+    if @parent
+      "(Parent Directory)"
+    else
+      basename
+    end
+  end
+end

data/lib/servel/servel.rb

@@ -1,18 +1,17 @@
 class Servel::Servel
-  def initialize(server_root)
-    @server_root = server_root
+  def initialize(root)
+    @root = root
   end
-  
+
   def start
     Rack::Handler::Puma.run(build_app)
   end
-  
+
   def build_app
-    server_root = @server_root
+    root = @root
 
     Rack::Builder.new do
-      use(Servel::Middleware, root: server_root)
-      use Rack::Static, urls: [""], root: server_root.to_s
+      use(Servel::Middleware, root: root)
 
       run ->(env) do
         [404, {}, []]

data/lib/servel/templates/_gallery.haml

@@ -1,5 +1,6 @@
-%img#image.hidden
-%video#video.hidden{autoplay: true, controls: true}
+%img#image
+%video#video{autoplay: true, controls: true}
+%audio#audio{autoplay: true, controls: true}
 #page-back.paginator ◀
 #page-next.paginator ▶
 #page-back-10.paginator ◀◀

data/lib/servel/templates/_listing.haml

@@ -1,27 +1,21 @@
-%h1 Directory Listing of #{url_path}
+%h1 Listing of #{url_path}
 %table
   %thead
     %tr
       %th Name
-      %th Size
-      %th Modified
+      %th.new-tab
+      %th.type Type
+      %th.size Size
+      %th.modified Modified
   %tbody
-    - unless url_path == "/"
-      %tr
-        %td
-          (Dir) 
-          %a{href: "../"} ../
-        %td
-        %td
     - (directories + files).each do |file|
-      - relative_path = file.relative_path_from(fs_path)
+      - file = file.decorate
       %tr
         %td
-          - if file.directory?
-            (Dir) 
-          %a{href: relative_path, class: "#{"viewable" if file.image? || file.video?} #{"image" if file.image?} #{"video" if file.video?}", target: "_blank"}
-            - extname = relative_path.extname
-            - basename = relative_path.basename(extname)
-            #{basename.to_s.truncate(50)}#{extname}
-        %td= number_to_human_size(file.size)
+          %span.icon= file.icon
+          %a.default{href: file.href, **file.listing_attrs}= file.name
+        %td
+          %a.new-tab{href: file.href, target: "_blank", **file.listing_attrs} (New tab)
+        %td= file.type
+        %td= file.directory? ? "-" : number_to_human_size(file.size)
         %td= file.mtime.strftime("%e %b %Y %l:%M %p")

data/lib/servel/templates/gallery.css

@@ -1,25 +1,42 @@
 #gallery {
-  padding: 20px;
+  padding: 0 20px;
   background: #333;
   transform: translateZ(0px);
 }
 
-.hidden {
-  display: none !important;
-}
-
-#image, #video {
-  display: block;
+#image, #video, #audio {
+  display: none;
   max-width: 100%;
   margin: 0 auto 0 auto;
 }
 
+#audio {
+  width: 100%;
+  padding: 0 100px;
+}
+
 @media (min-width: 992px) {
-  #image, #video {
+  #image, #video, #audio {
     max-height: 100%;
   }
 }
 
+#gallery.video #video {
+  display: block;
+}
+
+#gallery.image #image {
+  display: block;
+}
+
+#gallery.audio {
+  padding-top: 20px;
+}
+
+#gallery.audio #audio {
+  display: block;
+}
+
 .paginator {
   position: fixed;
   width: 100px;

data/lib/servel/templates/gallery.js

@@ -1,112 +1,132 @@
-var pages = null;
-var currentPage = 1;
+var Gallery = (function() {
+  var urls = [];
+  var types = [];
+  var currentIndex = 0;
 
-function loadPages() {
-  pages = [];
+  function initItems() {
+    var links = document.querySelectorAll("#listing a.default.media");
+    for(var i = 0; i < links.length; i++) {
+      var link = links[i];
 
-  var links = document.querySelectorAll("#listing a.viewable");
-  for(var i = 0; i < links.length; i++) {
-    var link = links[i];
-    var type = link.classList.contains("image") ? "image" : "video";
-    pages.push({ url: link.href, type: type });
+      urls.push(link.href);
+      types.push(link.dataset.type);
+    }
   }
-}
 
-function page(index) {
-  if(arguments.length == 1) {
-    if(isNaN(index) || index < 1) index = 1;
-    if(index > pages.length) index = pages.length;
-    
-    currentPage = index;
-    showCurrentPage();
+  function render() {
+    var url = urls[currentIndex];
+    var type = types[currentIndex];
+
+    var galleryElement = document.querySelector("#gallery");
+    galleryElement.classList.remove("image", "video", "audio");
+    galleryElement.classList.add(type);
+
+    document.getElementById(type).src = url;
+
+    window.scrollTo(0, 0);
+
+    //if(currentPage < imageUrls.length) (new Image()).src = imageUrls[currentPage];
   }
-  else {
-    var index = currentPage;
-    if(isNaN(index) || index < 1) index = 1;
+
+  function clamp(index) {
+    if(index == null || isNaN(index) || index < 0) return 0;
+    if(index >= urls.length) return urls.length - 1;
     return index;
   }
-}
 
-function atBottom() {
-  return (window.scrollY + window.innerHeight) == document.body.scrollHeight;
-}
+  function go(index) {
+    currentIndex = clamp(index);
+    render();
+  }
 
-function initPaginator() {
-  document.querySelector("#page-back").addEventListener("click", function(e) {
-    e.stopPropagation();
-    page(page() - 1);
-  });
-  document.querySelector("#page-back-10").addEventListener("click", function(e) {
-    e.stopPropagation();
-    page(page() - 10);
-  });
-  document.querySelector("#page-next").addEventListener("click", function(e) {
-    e.stopPropagation();
-    page(page() + 1);
-  });
-  document.querySelector("#page-next-10").addEventListener("click", function(e) {
-    e.stopPropagation();
-    page(page() + 10);
-  });
-  document.querySelector("#page-toggle-size").addEventListener("click", function(e) {
-    e.stopPropagation();
-    document.body.classList.toggle("split-screen");
-  });
-
-  window.addEventListener("keydown", function(event) {
-    if(event.keyCode == 39 || ((event.keyCode == 32 || event.keyCode == 13) && atBottom())) {
-      event.preventDefault();
-      page(page() + 1);
-    }
-    else if(event.keyCode == 8 || event.keyCode == 37) {
-      event.preventDefault();
-      page(page() - 1);
-    }
-  });
-}
+  function prev() {
+    go(currentIndex - 1);
+  }
 
-function showCurrentPage() {
-  window.scrollTo(0, 0);
-  var page = pages[currentPage - 1];
-  if(!page) return;
-  
-  if(page.type == "image") {
-    document.querySelector("#gallery #video").classList.add("hidden");
-    document.querySelector("#gallery #image").classList.remove("hidden");
-    document.querySelector("#gallery #image").src = page.url;
+  function next() {
+    go(currentIndex + 1);
   }
-  else {
-    document.querySelector("#gallery #image").classList.add("hidden");
-    document.querySelector("#gallery #video").classList.remove("hidden");
-    document.querySelector("#gallery #video").src = page.url;
+
+  function rewind() {
+    go(currentIndex - 10);
   }
 
-  //if(currentPage < imageUrls.length) (new Image()).src = imageUrls[currentPage];
-}
+  function fastForward() {
+    go(currentIndex + 10);
+  }
 
-function openLink(event) {
-  event.preventDefault();
+  function jump(url) {
+    go(urls.indexOf(url));
+  }
 
-  for(var i = 0; i < pages.length; i++) {
-    if(pages[i].url == this.href) {
-      page(i + 1);
-      return;
-    }
+  function atBottom() {
+    return (window.scrollY + window.innerHeight) == document.body.scrollHeight;
   }
-}
 
-function initGallery() {
-  if(!document.querySelector("#gallery")) return;
+  function initEvents() {
+    document.body.addEventListener("click", function(e) {
+      if(!e.target) return;
+
+      if(e.target.matches("a.media")) {
+        e.preventDefault();
+        jump(e.target.href);
+      }
+      else if(e.target.matches("#page-back")) {
+        e.stopPropagation();
+        prev();
+      }
+      else if(e.target.matches("#page-back-10")) {
+        e.stopPropagation();
+        rewind();
+      }
+      else if(e.target.matches("#page-next")) {
+        e.stopPropagation();
+        next();
+      }
+      else if(e.target.matches("#page-next-10")) {
+        e.stopPropagation();
+        fastForward();
+      }
+      else if(e.target.matches("#page-toggle-size")) {
+        e.stopPropagation();
+        document.body.classList.toggle("split-screen");
+      }
+    });
 
-  initPaginator();
-  loadPages();
+    window.addEventListener("keydown", function(e) {
+      if(e.keyCode == 39 || ((e.keyCode == 32 || e.keyCode == 13) && atBottom())) {
+        e.preventDefault();
+        next();
+      }
+      else if(e.keyCode == 8 || e.keyCode == 37) {
+        e.preventDefault();
+        prev();
+      }
+    });
+  }
 
-  document.body.addEventListener("click", function(e) {
-    console.log("clicked, e: ", e);
-    if(e.target && e.target.matches("a.viewable")) openLink.call(e.target, e);
-  });
+  function init() {
+    initItems();
+    initEvents();
+    render();
+  }
 
-  page(1);
+  return {
+    init: init,
+    render: render,
+    clamp: clamp,
+    go: go,
+    prev: prev,
+    next: next,
+    rewind: rewind,
+    fastForward: fastForward,
+    jump: jump
+  };
+})();
+
+function initGallery() {
+  if(!document.querySelector("#gallery")) return;
+  Gallery.init();
 }
 
 window.addEventListener("DOMContentLoaded", initGallery);

data/lib/servel/templates/index.haml

@@ -2,7 +2,8 @@
 %html
   %head
     %meta{charset: 'utf-8'}
-    %title Directory Listing of #{url_path}
+    %title Listing of #{url_path}
+    %meta{name: 'viewport', content: 'width=device-width, height=device-height, user-scalable=no'}
     :css
       #{include('normalize.css')}
       #{include('common.css')}
@@ -13,6 +14,6 @@
     :javascript
       #{include('gallery.js')}
   %body
-    - if show_gallery
+    - if files.any? { |f| f.decorate.media? }
       #gallery!= partial('gallery')
-    #listing!= partial('listing', { url_path: url_path, fs_path: fs_path, directories: directories, files: files })
+    #listing!= partial('listing', { url_path: url_path, directories: directories, files: files })

data/lib/servel/templates/listing.css

@@ -10,6 +10,7 @@ table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #ddd;
+  table-layout: fixed;
 }
 
 th, td {
@@ -19,4 +20,24 @@ th, td {
 
 tbody > tr:nth-of-type(odd) {
   background-color: #f9f9f9;
+}
+
+th.new-tab {
+  width: 6em;
+}
+
+th.type {
+  width: 4em;
+}
+
+th.size {
+  width: 6em;
+}
+
+th.modified {
+  width: 12em;
+}
+
+span.icon {
+  margin-right: 0.2em;
 }

data/lib/servel/version.rb

@@ -1,3 +1,3 @@
 module Servel
-  VERSION = "0.2.0"
+  VERSION = "0.3.0"
 end

data/servel.gemspec

@@ -22,8 +22,8 @@ Gem::Specification.new do |spec|
   spec.require_paths = ["lib"]
 
   spec.add_development_dependency "bundler", "~> 1.16"
-  spec.add_development_dependency "rake", "~> 10.0"
-  spec.add_dependency "rack"
+  spec.add_development_dependency "rake", "~> 12.0"
+  spec.add_dependency "rack", "~> 2.0"
   spec.add_dependency "puma"
   spec.add_dependency "naturalsorter"
   spec.add_dependency "haml", "~> 4"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: servel
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Brenton "B-Train" Fletcher
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-22 00:00:00.000000000 Z
+date: 2018-01-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -30,28 +30,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '12.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '12.0'
 - !ruby/object:Gem::Dependency
   name: rack
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '2.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: puma
   requirement: !ruby/object:Gem::Requirement
@@ -127,8 +127,9 @@ files:
 - lib/servel.rb
 - lib/servel/core_ext/pathname.rb
 - lib/servel/haml_context.rb
-- lib/servel/index_view.rb
+- lib/servel/locals.rb
 - lib/servel/middleware.rb
+- lib/servel/pathname_decorator.rb
 - lib/servel/servel.rb
 - lib/servel/templates/_gallery.haml
 - lib/servel/templates/_listing.haml

data/lib/servel/index_view.rb

@@ -1,26 +0,0 @@
-class Servel::IndexView
-  def initialize(url_path, fs_path)
-    @url_path = url_path
-    @fs_path = fs_path
-  end
-
-  def render(haml_context)
-    haml_context.render('index.haml', locals)
-  end
-
-  def locals
-    directories, files = @fs_path.children.partition { |child| child.directory? }
-
-    {
-      url_path: @url_path,
-      fs_path: @fs_path,
-      directories: sort_paths(directories),
-      files: sort_paths(files),
-      show_gallery: files.any? { |file| file.image? }
-    }
-  end
-
-  def sort_paths(paths)
-    Naturalsorter::Sorter.sort(paths.map(&:to_s), true).map { |path| Pathname.new(path) }
-  end
-end