servel 0.29.0 → 0.30.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1a3dd807fc8742bfefce8bd115359ffeded03a593d53fae33735ac85a84d26c1
-  data.tar.gz: bdbddea7446d74d2cbec18b52f3a409ab9324cf2fcc02a1e3b534f7ee59ead86
+  metadata.gz: dce6f55af17def653868138167feedca557e981ff15f3010585ece287e5f0e8d
+  data.tar.gz: 8c1e5087a5f219b6523eb3e65daca81d91c149d50cfbe1607cc5bae3a8024dad
 SHA512:
-  metadata.gz: 98924a312e2b53f280c10fc8f8fa9d6fb4eb81a7380aa69dfe633aa401b59908a5b827a13292c3dacb9d34352536f56acdf0dd304799fe4dba4671d87d7d9e33
-  data.tar.gz: 515ff2a1ee7351316169de116585fcd9a4d0c6c282218120ff2984d9aad4caa041507f6602ace2da685c2a196988749118fa6df490aa1c85f710b29f1268cbbd
+  metadata.gz: 609b927a7d22c511a93b024cdb736a6553da2f6bd26301fa4ef716862a2ab9543f795d0fde3ad768c7bb8501a4fc3590045b0218abdba091e619471127014fc4
+  data.tar.gz: 549e6337e9871ba4db2d851702a246a2ebf9174e3a76e08a9155ec0707a32208fd4514bcbf965b1de0cb54127415ba41b9bcbc49f2a04aa14ee72c13a93f8690

data/app/_gallery.haml

@@ -6,9 +6,10 @@
   #page-back.paginator ◀
   #page-next.paginator ▶
 #content
-  %img#image
-  %video#video{controls: false, loop: true}
-  %audio#audio{controls: true}
-  #text
-    %a#text-anchor{href: '#'}
-    #text-content
+  #scroller
+    %img#image
+    %video#video{controls: false, loop: true}
+    %audio#audio{controls: true}
+    #text
+      %a#text-anchor{href: '#'}
+      #text-content

data/app/css/gallery.css

@@ -1,25 +1,85 @@
 #gallery {
   background: #333;
   display: none;
-  flex-direction: column;
 }
 
 body.has-gallery.gallery #gallery {
   display: flex;
 }
 
+#controls {
+  display: flex;
+}
+
+#page-jump-listing {
+  flex-grow: 1;
+}
+
+.paginator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 75px;
+
+  font-size: 2em;
+  font-weight: bold;
+  text-align: center;
+  background-color: #1f1f1f;
+  color: #858585;
+
+  cursor: pointer;
+}
+
+.paginator:hover {
+  background-color: #0f0f0f;
+  color: #c1c1c1;
+}
+
 #content {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+#scroller {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}
+
+body.portrait #gallery {
+  flex-direction: column;
+}
+
+body.portrait .paginator {
+  width: 100px;
+}
+
+body.portrait #page-jump-listing {
+  width: auto;
+}
+
+body.landscape #gallery {
+  flex-direction: row;
+}
+
+body.landscape #controls {
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 100px;
+}
+
+body.landscape #page-jump-listing {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
 }
 
 #image, #video, #audio, #text {
   display: none;
-  max-width: 100%;
   margin: 0 auto 0 auto;
-  padding-top: 75px;
 }
 
 #video:focus, #audio:focus {
@@ -51,36 +111,6 @@ body.has-gallery.gallery #gallery {
   display: block;
 }
 
-#controls {
-  position: fixed;
-  left: 0;
-  right: 0;
-  display: flex;
-  z-index: 10;
-}
-
-.paginator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100px;
-  height: 75px;
-
-  font-size: 2em;
-  font-weight: bold;
-  text-align: center;
-  background-color: #000000;
-  color: #ffffff;
-
-  opacity: 0.4;
-  cursor: pointer;
-}
-
-#page-jump-listing {
-  flex-grow: 1;
-  width: auto;
-}
-
 @media screen and (max-width: 767px) {
   #gallery.video, #gallery.audio, #gallery.text {
     padding: 0;
@@ -101,9 +131,3 @@ body.has-gallery.gallery #gallery {
     display: none;
   }
 }
-
-@media screen and (min-width: 768px) {
-  .paginator:hover {
-    opacity: 0.7;
-  }
-}

data/app/js/gallery.js

@@ -1,9 +1,11 @@
 "use strict";
 
 var Gallery = (function() {
-  var LAYOUT_MODES = ["fit-both", "fit-width", "clamp-width"];
+  var LAYOUT_MODES = ["fit-both", "fit-width", "clamp-width", "full-size"];
 
+  var $body;
   var $gallery;
+  var $image;
   var $video;
   var $audio;
   var currentIndex;
@@ -155,15 +157,38 @@ var Gallery = (function() {
   }
 
   function layout() {
-    var viewportHeight = document.documentElement.clientHeight + "px";
-    $gallery.style.minHeight = viewportHeight;
+    var vw = document.documentElement.clientWidth;
+    var vh = document.documentElement.clientHeight;
+
+    var viewportOrientation = vw > vh ? "landscape" : "portrait";
+    $body.classList.remove("landscape", "portrait");
+    $body.classList.add(viewportOrientation);
+
+    $gallery.style.height = vh + "px";
+
+    var scrollerMaxHeight = viewportOrientation == "landscape" ? vh : vh - 75;
 
     var layoutMode = LAYOUT_MODES[layoutModeIndex];
-    var maxHeight = layoutMode == "fit-both" ? viewportHeight : "none";
-    var maxWidth = layoutMode == "clamp-width" ? "1000px" : "100%";
 
-    $("#image").style.maxWidth = maxWidth;
-    $("#image").style.maxHeight = maxHeight;
+    if(layoutMode == "fit-both") {
+      var maxWidth = "100%";
+      var maxHeight = (scrollerMaxHeight + "px");
+    }
+    else if(layoutMode == "fit-width") {
+      var maxWidth = "100%";
+      var maxHeight = "none";
+    }
+    else if(layoutMode == "clamp-width") {
+      var maxWidth = "1000px";
+      var maxHeight = "none";
+    }
+    else if(layoutMode == "full-size") {
+      var maxWidth = "none";
+      var maxHeight = "none";
+    }
+
+    $image.style.maxWidth = maxWidth;
+    $image.style.maxHeight = maxHeight;
     $video.style.maxWidth = maxWidth;
     $video.style.maxHeight = maxHeight;
     $audio.style.maxWidth = maxWidth;
@@ -181,7 +206,9 @@ var Gallery = (function() {
   }
 
   function init() {
+    $body = $("body");
     $gallery = $("#gallery");
+    $image = $("#image");
     $video = $("#video");
     $audio = $("#audio");
 

data/app/js/index.js

@@ -19,51 +19,8 @@ var Index = (function() {
     document.body.classList.add("gallery");
   }
 
-  function jumpScroll() {
-    if(galleryVisible()) {
-      jumpListing();
-      window.scrollTo(0, 0);
-    }
-    else {
-      jumpGallery();
-      window.scrollTo(0, document.body.scrollHeight);
-    }
-  }
-
-  function atTop() {
-    return window.scrollY == 0;
-  }
-
-  function bottomScrollDown(event) {
-    return galleryVisible() && atBottom() && event.deltaY > 0;
-  }
-
-  function topScrollUp(event) {
-    return listingVisible() && atTop() && event.deltaY < 0;
-  }
-
-  function initEvents() {
-    var scrollSize = 0;
-
-    window.addEventListener("wheel", function(event) {
-      if(bottomScrollDown(event) || topScrollUp(event)) {
-        scrollSize += Math.abs(event.deltaY);
-
-        if(scrollSize >= 1500) {
-          scrollSize = 0;
-          jumpScroll();
-        }
-      }
-      else {
-        scrollSize = 0;
-      }
-    });
-  }
-
   function init() {
     jumpListing();
-
-    initEvents();
   }
 
   return {

data/lib/servel/version.rb

@@ -1,3 +1,3 @@
 module Servel
-  VERSION = "0.29.0"
+  VERSION = "0.30.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: servel
 version: !ruby/object:Gem::Version
-  version: 0.29.0
+  version: 0.30.0
 platform: ruby
 authors:
 - Brenton "B-Train" Fletcher
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-11-06 00:00:00.000000000 Z
+date: 2020-02-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler