servel 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 61283059635d7f385d05267c238bc0594697e227
-  data.tar.gz: d48cdd82439abf2a4f0d9377b0e1c76b438c9a67
+  metadata.gz: e91e5efe5fb7ebf0a803c7b8651d84188582b93c
+  data.tar.gz: db7b14fbe9096a17722164c6b389fc324268b0c0
 SHA512:
-  metadata.gz: '08f68881ff271c9f5a2af6a78d3105f2bcacdd33e616547e6809deb3ccc661c061e6551a95e6c9f31054d10ca5f54be47ac81fd0f89ef01e9814ba4642a129b8'
-  data.tar.gz: 80bd1ff843f20e00958765c8669b8ce3ff9f46dc96668b98f6eb17faffa9e732e01b1b4fd3b0bfbf5b8585a8d894f78900b1101db28afa541582b15d4ec4c498
+  metadata.gz: b56fedb3ecc2caf4f023a58d5bec0d817256d268991d78051c9bdbed8d2f76e8ee40174c4f14c71cc5308a89cddacef9e7fabf4ba273bdabfb6c85ee947275a3
+  data.tar.gz: fbb024ed53a80cb97f9d4d407f69dc9b5840709517b50a9454bc37076893363f3b4084c50a43ba15f70a20da403eed495a1f7c10098dff67c753a5ed7558d071

data/lib/servel.rb

@@ -2,6 +2,7 @@ require 'rack'
 require 'rack/handler/puma'
 require 'haml'
 require 'naturalsorter'
+require 'active_support/all'
 
 require 'json'
 require 'pathname'
@@ -13,6 +14,5 @@ require "servel/version"
 require "servel/core_ext/pathname"
 require "servel/haml_context"
 require "servel/index_view"
-require "servel/gallery_view"
 require "servel/middleware"
 require "servel/servel"

data/lib/servel/core_ext/pathname.rb

@@ -2,4 +2,8 @@ class Pathname
   def image?
     file? && extname && %w(.jpg .jpeg .png .gif).include?(extname.downcase)
   end
+
+  def video?
+    file? && extname && %w(.webm).include?(extname.downcase)
+  end
 end

data/lib/servel/haml_context.rb

@@ -1,4 +1,6 @@
 class Servel::HamlContext
+  include ActiveSupport::NumberHelper
+
   ENGINE_OPTIONS = { remove_whitespace: true, escape_html: true, ugly: true }
 
   def initialize()

data/lib/servel/middleware.rb

@@ -20,13 +20,7 @@ class Servel::Middleware
 
     url_path << "/" if url_path != "" && !url_path.end_with?("/")
 
-    klass = if env['QUERY_STRING'] == "gallery"
-      Servel::GalleryView
-    else
-      Servel::IndexView
-    end
-
-    [200, {}, StringIO.new(klass.new(url_path, fs_path).render(@haml_context))]
+    [200, {}, StringIO.new(Servel::IndexView.new(url_path, fs_path).render(@haml_context))]
   end
 
   def url_path_for(url_path)

data/lib/servel/templates/_gallery.haml

@@ -0,0 +1,7 @@
+%img#image.hidden
+%video#video.hidden{autoplay: true, controls: true}
+#page-back.paginator ◀
+#page-next.paginator ▶
+#page-back-10.paginator ◀◀
+#page-next-10.paginator ▶▶
+#page-toggle-size.paginator ❌

data/lib/servel/templates/_listing.haml

@@ -0,0 +1,27 @@
+%h1 Directory Listing of #{url_path}
+%table
+  %thead
+    %tr
+      %th Name
+      %th Size
+      %th 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)
+      %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)
+        %td= file.mtime.strftime("%e %b %Y %l:%M %p")

data/lib/servel/templates/common.css

@@ -4,6 +4,9 @@
 
 body {
   padding: 0;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.4;
 
   -webkit-user-select: none;
   -moz-user-select: none;

data/lib/servel/templates/gallery.css

@@ -1,19 +1,21 @@
-html, body {
-  height: 100%;
+#gallery {
+  padding: 20px;
+  background: #333;
+  transform: translateZ(0px);
 }
 
-body {
-  background-color: #333333;
+.hidden {
+  display: none !important;
 }
 
-#image {
+#image, #video {
   display: block;
   max-width: 100%;
   margin: 0 auto 0 auto;
 }
 
 @media (min-width: 992px) {
-  #image {
+  #image, #video {
     max-height: 100%;
   }
 }
@@ -83,4 +85,11 @@ body {
   right: 0;
   height: 100px;
   z-index: 10001;
+}
+
+#page-toggle-size {
+  top: 0;
+  left: 0;
+  height: 100px;
+  z-index: 10001;
 }

data/lib/servel/templates/gallery.js

@@ -1,9 +1,21 @@
+var pages = null;
 var currentPage = 1;
 
+function loadPages() {
+  pages = [];
+
+  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 });
+  }
+}
+
 function page(index) {
   if(arguments.length == 1) {
     if(isNaN(index) || index < 1) index = 1;
-    if(index > imagePaths.length) index = imagePaths.length;
+    if(index > pages.length) index = pages.length;
     
     currentPage = index;
     showCurrentPage();
@@ -36,6 +48,10 @@ function initPaginator() {
     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())) {
@@ -51,13 +67,46 @@ function initPaginator() {
 
 function showCurrentPage() {
   window.scrollTo(0, 0);
-  document.querySelector("#image").src = imagePaths[currentPage - 1];
-  if(currentPage < imagePaths.length) (new Image()).src = imagePaths[currentPage];
+  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;
+  }
+  else {
+    document.querySelector("#gallery #image").classList.add("hidden");
+    document.querySelector("#gallery #video").classList.remove("hidden");
+    document.querySelector("#gallery #video").src = page.url;
+  }
+
+  //if(currentPage < imageUrls.length) (new Image()).src = imageUrls[currentPage];
 }
 
-function init() {
+function openLink(event) {
+  event.preventDefault();
+
+  for(var i = 0; i < pages.length; i++) {
+    if(pages[i].url == this.href) {
+      page(i + 1);
+      return;
+    }
+  }
+}
+
+function initGallery() {
+  if(!document.querySelector("#gallery")) return;
+
   initPaginator();
-  showCurrentPage();
+  loadPages();
+
+  document.body.addEventListener("click", function(e) {
+    console.log("clicked, e: ", e);
+    if(e.target && e.target.matches("a.viewable")) openLink.call(e.target, e);
+  });
+
+  page(1);
 }
 
-window.addEventListener("DOMContentLoaded", init);
+window.addEventListener("DOMContentLoaded", initGallery);

data/lib/servel/templates/index.css

@@ -1,3 +1,36 @@
-#container {
-  padding: 20px;
-}
+html, body, #gallery {
+  height: 100%;
+}
+
+body.split-screen #listing {
+  height: 100%;
+  width: 50%;
+  float: left;
+  overflow: auto;
+}
+
+body.split-screen #gallery {
+  width: 50%;
+  float: right;
+}
+/*
+@media screen and (min-width: 1800px) {
+  #listing {
+    float: left;
+    width: 800px;
+    height: 100%;
+    overflow: auto;
+  }
+
+  #gallery {
+    margin-left: 800px;
+  }
+
+  body.gallery-expanded #listing {
+    display: none;
+  }
+
+  body.gallery-expanded #gallery {
+    margin-left: 0;
+  }
+}*/

data/lib/servel/templates/index.haml

@@ -7,20 +7,12 @@
       #{include('normalize.css')}
       #{include('common.css')}
       #{include('index.css')}
+      #{include('listing.css')}
+      #{include('gallery.css')}
+
+    :javascript
+      #{include('gallery.js')}
   %body
-    #container
-      %h1 Directory Listing of #{url_path}
-      %ul
-        - if show_gallery
-          %li
-            %a{href: "#{url_path}?gallery"} Gallery
-        - unless url_path == "/"
-          %li
-            %a{href: "../"} ../
-        - (directories + files).each do |file|
-          - relative_path = file.relative_path_from(fs_path).to_s
-          %li
-            - if file.directory?
-              (Dir) 
-            %a{href: relative_path}
-              = relative_path
+    - if show_gallery
+      #gallery!= partial('gallery')
+    #listing!= partial('listing', { url_path: url_path, fs_path: fs_path, directories: directories, files: files })

data/lib/servel/templates/listing.css

@@ -0,0 +1,22 @@
+#listing {
+  padding: 20px;
+}
+
+#listing h1 {
+  margin-top: 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #ddd;
+}
+
+th, td {
+  padding: 5px;
+  border: 1px solid #ddd;
+}
+
+tbody > tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}

data/lib/servel/version.rb

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

data/servel.gemspec

@@ -27,4 +27,5 @@ Gem::Specification.new do |spec|
   spec.add_dependency "puma"
   spec.add_dependency "naturalsorter"
   spec.add_dependency "haml", "~> 4"
+  spec.add_dependency "activesupport"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: servel
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Brenton "B-Train" Fletcher
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-21 00:00:00.000000000 Z
+date: 2017-12-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -94,6 +94,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4'
+- !ruby/object:Gem::Dependency
+  name: activesupport
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Serves files and directories over HTTP.
 email:
 - i@bloople.net
@@ -112,17 +126,18 @@ files:
 - bin/setup
 - lib/servel.rb
 - lib/servel/core_ext/pathname.rb
-- lib/servel/gallery_view.rb
 - lib/servel/haml_context.rb
 - lib/servel/index_view.rb
 - lib/servel/middleware.rb
 - lib/servel/servel.rb
+- lib/servel/templates/_gallery.haml
+- lib/servel/templates/_listing.haml
 - lib/servel/templates/common.css
 - lib/servel/templates/gallery.css
-- lib/servel/templates/gallery.haml
 - lib/servel/templates/gallery.js
 - lib/servel/templates/index.css
 - lib/servel/templates/index.haml
+- lib/servel/templates/listing.css
 - lib/servel/templates/normalize.css
 - lib/servel/version.rb
 - servel.gemspec

data/lib/servel/gallery_view.rb

@@ -1,24 +0,0 @@
-class Servel::GalleryView
-  def initialize(url_path, fs_path)
-    @url_path = url_path
-    @fs_path = fs_path
-  end
-
-  def render(haml_context)
-    haml_context.render('gallery.haml', locals)
-  end
-
-  def locals
-    image_paths = @fs_path.children.select { |child| child.image? }
-
-    {
-      url_path: @url_path,
-      fs_path: @fs_path,
-      image_paths: sort_paths(image_paths)
-    }
-  end
-
-  def sort_paths(paths)
-    Naturalsorter::Sorter.sort(paths.map(&:to_s), true).map { |path| Pathname.new(path) }
-  end
-end

data/lib/servel/templates/gallery.haml

@@ -1,21 +0,0 @@
-!!!
-%html
-  %head
-    %meta{charset: 'utf-8'}
-    %title Gallery for #{url_path}
-    :css
-      #{include('normalize.css')}
-      #{include('common.css')}
-      #{include('gallery.css')}
-
-    :javascript
-      var imagePaths = #{image_paths.map { |file| file.relative_path_from(fs_path).to_s }.to_json};
-      #{include('gallery.js')}
-
-  %body
-    #container
-      %img#image
-      #page-back.paginator ◀
-      #page-next.paginator ▶
-      #page-back-10.paginator ◀◀
-      #page-next-10.paginator ▶▶