servel 0.18.0 → 0.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: d7c13a885b678e1a5e5cbee6baad93472321d283
-  data.tar.gz: eec84def55b4357fc8637cf22f40fbe641e990ef
+SHA256:
+  metadata.gz: 46aac7ea1121e835e50af2f906be76d30fb73190171842ce642381585b334ea6
+  data.tar.gz: 0f31b01220a763c8fcdd96561d76ee75bed06c2d052d7f5f521b8e9968f14791
 SHA512:
-  metadata.gz: 461aff2f7d6af7cd1a7538b2fc2fb54629c02cf25eb9f2e12e1c1cf07634bab98befb70ed170c6e05fe5680cde08d052a13214b86fa485ec0ff0c60762dfa7b0
-  data.tar.gz: 98132d09d7ea180348bfbac09cb5a8cf1d0264cec83bc000d640dfd3e279bba9fe2c001698b56aa08aa0e45b667f1ef1974ce356ed9a179556c995b3fca7d7a6
+  metadata.gz: febe17fedca3812eb8e2a21cff9a0e869a8a3a683bb593e85dcde279b065bdc3b47ff0c0e9789367db331b2a9b3b1183c11ccbf533769914aad9154f730315a5
+  data.tar.gz: 0313e123f72be5c37852fa9f1205a97ec30c44137525b8a2e776cc3527ad7bbc9e080f565632814c099d800f874f9dcfc33f1b4287881cb98cacfd936d8fdb6e

data/lib/servel/templates/_gallery.haml

@@ -4,8 +4,10 @@
 #text
   %a#text-anchor{href: '#'}
   #text-content
-#page-back.paginator ◀
-#page-next.paginator ▶
-#page-back-10.paginator ◀◀
-#page-next-10.paginator ▶▶
-#page-toggle-size.paginator ⤡
+#controls
+  #page-back.paginator ◀
+  #page-next.paginator ▶
+  #page-back-10.paginator ◀◀
+  #page-next-10.paginator ▶▶
+  #page-jump-listing.paginator ▼
+  #page-max-item.paginator ⤡

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

@@ -1,6 +1,5 @@
 #gallery {
   background: #333;
-  transform: translateZ(0px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9,7 +8,6 @@
 #image, #video, #audio, #text {
   display: none;
   max-width: 100%;
-  max-height: 100%;
   margin: 0 auto 0 auto;
 }
 
@@ -22,7 +20,6 @@
 }
 
 #text {
-  overflow: auto;
   color: #000000;
   background-color: #ffffff;
 }
@@ -47,11 +44,16 @@
   display: block;
 }
 
-.paginator {
+#controls {
   position: fixed;
-  width: 100px;
-  z-index: 10000;
+  top: 0;
+  right: 0;
+  left: 0;
+}
 
+.paginator {
+  position: absolute;
+  width: 100px;
   opacity: 0;
   font-size: 20px;
   font-weight: bold;
@@ -69,7 +71,7 @@
 }
 
 #page-back {
-  top: 100px;
+  top: 0;
   bottom: 100px;
   left: 0;
 }
@@ -84,21 +86,26 @@
   bottom: 0;
   left: 0;
   height: 100px;
-  z-index: 10001;
 }
 
 #page-next-10 {
   bottom: 0;
   right: 0;
   height: 100px;
-  z-index: 10001;
 }
 
-#page-toggle-size {
+#page-jump-listing {
+  right: 100px;
+  bottom: 0;
+  left: 100px;
+  height: 100px;
+  width: auto;
+}
+
+#page-max-item {
   top: 0;
-  left: 0;
+  left: 100px;
   height: 100px;
-  z-index: 10001;
 }
 
 @media screen and (max-width: 767px) {
@@ -106,10 +113,6 @@
     padding: 0;
   }
 
-  #page-toggle-size {
-    display: none;
-  }
-
   #page-back-10 {
     top: 0;
     bottom: auto;
@@ -127,18 +130,30 @@
   }
 
   #page-back {
-    top: 0;
     bottom: auto;
     height: 75px;
     width: 100px;
   }
 
   #page-next {
-    top: 0;
     bottom: auto;
     height: 75px;
     width: 100px;
   }
+
+  #page-jump-listing {
+    top: 0;
+    right: 220px;
+    bottom: auto;
+    left: 220px;
+    height: 75px;
+  }
+
+  #page-max-item {
+    top: 75px;
+    left: 0;
+    height: 75px;
+  }
 }
 
 @media screen and (max-width: 479px) {
@@ -159,6 +174,18 @@
   #page-next {
     width: 75px;
   }
+
+  #page-jump-listing {
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    width: 75px;
+  }
+
+  #page-max-item {
+    width: 75px;
+  }
 }
 
 @media screen and (min-width: 768px) {

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

@@ -1,5 +1,8 @@
 #listing {
   padding: 10px;
+  position: relative;
+  z-index: 1;
+  background-color: #fff;
 }
 
 #listing h1 {

data/lib/servel/templates/index.haml

@@ -7,7 +7,6 @@
     :css
       #{include('css/normalize.css')}
       #{include('css/common.css')}
-      #{include('css/index.css')}
       #{include('css/listing.css')}
       #{include('css/gallery.css')}
       #{include('css/gallery-text.css')}

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

@@ -1,10 +1,10 @@
 var $;
 
 var Gallery = (function() {
-  var TYPES = ["image", "video", "audio", "text"];
   var urls = [];
   var types = [];
   var currentIndex = 0;
+  var layoutItemMax = false;
   var $gallery;
 
   function initItems() {
@@ -19,7 +19,7 @@ var Gallery = (function() {
 
   function renderText(url) {
     var http = new XMLHttpRequest();
-    http.open("GET", url, true);
+    http.open("GET", url);
     http.onload = function() {
       $("#text-content").innerHTML = ume(http.responseText);
       $("#text").scrollTop = 0;
@@ -29,18 +29,11 @@ var Gallery = (function() {
   }
 
   function clearContent() {
-    for(var i = 0; i < TYPES.length; i++) {
-      var type = TYPES[i];
-
-      $gallery.classList.remove(type);
-
-      if(type == "text") {
-        $("#text-content").innerHTML = "";
-      }
-      else {
-        $("#" + type).src = "about:none";
-      }
-    }
+    $gallery.classList.remove("image", "video", "audio", "text");
+    $("#image").src = "about:none";
+    $("#video").src = "about:none";
+    $("#audio").src = "about:none";
+    $("#text-content").innerHTML = "";
   }
 
   function render() {
@@ -127,9 +120,14 @@ var Gallery = (function() {
         e.stopPropagation();
         fastForward();
       }
-      else if(e.target.matches("#page-toggle-size")) {
+      else if(e.target.matches("#page-jump-listing")) {
+        e.stopPropagation();
+        $("#listing").scrollIntoView();
+      }
+      else if(e.target.closest("#page-max-item")) {
         e.stopPropagation();
-        document.body.classList.toggle("split-screen");
+        layoutItemMax = !layoutItemMax;
+        layout();
       }
     });
 
@@ -145,11 +143,28 @@ var Gallery = (function() {
     });
   }
 
+  function layout() {
+    var viewportHeight = document.documentElement.clientHeight + "px";
+    $gallery.style.minHeight = viewportHeight;
+    $("#controls").style.height = viewportHeight;
+
+    var maxHeight = layoutItemMax ? "none" : viewportHeight;
+    $("#image").style.maxHeight = maxHeight;
+    $("#video").style.maxHeight = maxHeight;
+    $("#audio").style.maxHeight = maxHeight;
+  }
+
+  function initLayout() {
+    window.addEventListener("resize", layout);
+    layout();
+  }
+
   function init() {
     $gallery = $("#gallery");
 
     initItems();
     initEvents();
+    initLayout();
     render();
   }
 

data/lib/servel/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: servel
 version: !ruby/object:Gem::Version
-  version: 0.18.0
+  version: 0.19.0
 platform: ruby
 authors:
 - Brenton "B-Train" Fletcher
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-06-25 00:00:00.000000000 Z
+date: 2018-08-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -153,7 +153,6 @@ files:
 - lib/servel/templates/css/gallery-text.css
 - lib/servel/templates/css/gallery.css
 - lib/servel/templates/css/home.css
-- lib/servel/templates/css/index.css
 - lib/servel/templates/css/listing.css
 - lib/servel/templates/css/normalize.css
 - lib/servel/templates/home.haml
@@ -184,7 +183,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.14
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
 summary: Serves files and directories over HTTP.

data/lib/servel/templates/css/index.css

@@ -1,15 +0,0 @@
-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;
-}