servel 0.23.0 → 0.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03c3feecb15ee92f88b8b894137f5467fa27d6624897e4dedab6a5565af81ccd
-  data.tar.gz: 220d370dd4fe8e6d2498fdaed9aaa96cb30d9b2a23aa05f6b8980a68e181cbc7
+  metadata.gz: a863f769dc401adeac14d38484a6e5ae7492d7f322e80a1fefd62bc4b7e5f286
+  data.tar.gz: c65d410dbf1ad9a645dcb9dc7d94e97c18d6a7a8badcc7f77a21959a4eb02112
 SHA512:
-  metadata.gz: 22b562149952ac1a5dacdd34e10460da7db3cbd6bf3658e345eae9e3479bb5f74b70b8f3d0db57309c72248e81d7241071e2b4be6b8442e1cb6fe311591c4b2f
-  data.tar.gz: e11dbee063265ce660be78b84162dd8fbdcd7dc3c82fdc81c5cfed21818ea51d7a912f57a9a29c7d367f4f6a73197717e7261ea05ab3a7f6ea7dd3319ca04ec2
+  metadata.gz: a6b43b998bd6f67609370def7f37e4768083a8ec1df98e7ea5c00726b77f718c0a4211249966365315aed058b63d95aef2cc4b597885fb7b63aa655d8255c5e1
+  data.tar.gz: 51a0748759c661a13883a52018ba6819b9d800a1f42413ca469a22d41465c95e653f23b2ed96b606b1949d44ffb02279f714578cd27337985aa546bf0eb7892c

data/app/_gallery.haml

@@ -7,8 +7,8 @@
   #page-next.paginator ▶
 #content
   %img#image
-  %video#video{autoplay: true, controls: true}
-  %audio#audio{autoplay: true, controls: true}
+  %video#video{controls: true}
+  %audio#audio{controls: true}
   #text
     %a#text-anchor{href: '#'}
     #text-content

data/app/css/gallery.css

@@ -13,13 +13,13 @@ body.has-gallery.gallery #gallery {
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-  padding-top: 75px;
 }
 
 #image, #video, #audio, #text {
   display: none;
   max-width: 100%;
   margin: 0 auto 0 auto;
+  padding-top: 75px;
 }
 
 #video:focus, #audio:focus {

data/app/css/listing.css

@@ -24,6 +24,7 @@ body.listing #listing {
 #jump-gallery-wrapper {
   display: none;
   padding-left: 20px;
+  white-space: nowrap;
 }
 
 body.has-gallery #jump-gallery-wrapper {

data/app/index.haml

@@ -20,10 +20,11 @@
     :javascript
       #{include('js/natural-orderby.min.js')}
       #{include('js/entries.js')}
+      #{include('js/common.js')}
+      #{include('js/index.js')}
       #{include('js/listing.js')}
       #{include('js/ume.js')}
       #{include('js/gallery.js')}
-      #{include('js/index.js')}
   %body
     #gallery!= partial('gallery')
     #listing!= partial('listing', { url_root: url_root, url_path: url_path })

data/app/js/common.js

@@ -0,0 +1,11 @@
+"use strict";
+
+function atBottom() {
+  return (window.scrollY + window.innerHeight) == document.body.scrollHeight;
+}
+
+function common() {
+  window.$ = document.querySelector.bind(document);
+}
+
+window.addEventListener("DOMContentLoaded", common);

data/app/js/gallery.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var Gallery = (function() {
-  var $;
   var $gallery;
   var currentIndex;
   var layoutItemMax = false;
@@ -35,16 +34,21 @@ var Gallery = (function() {
 
     $gallery.classList.add(type);
 
+    var $element;
     if(type == "text") {
       renderText(url);
     }
     else {
-      var $element = $("#" + type);
+      $element = $("#" + type);
       $element.src = url;
       $element.focus();
     }
 
-    window.scrollTo(0, 0);
+    if(Index.galleryVisible()) {
+      window.scrollTo(0, 0);
+
+      if(type == "video" || type == "audio") $element.play();
+    }
 
     //if(currentPage < imageUrls.length) (new Image()).src = imageUrls[currentPage];
   }
@@ -86,10 +90,6 @@ var Gallery = (function() {
     go(index);
   }
 
-  function atBottom() {
-    return (window.scrollY + window.innerHeight) == document.body.scrollHeight;
-  }
-
   function initEvents() {
     document.body.addEventListener("click", function(e) {
       if(!e.target) return;
@@ -136,11 +136,10 @@ var Gallery = (function() {
   }
 
   function layout() {
-    var viewportHeight = document.documentElement.clientHeight;
-    $gallery.style.minHeight = viewportHeight + "px";
+    var viewportHeight = document.documentElement.clientHeight + "px";
+    $gallery.style.minHeight = viewportHeight;
 
-    var controlsHeight = $("#controls").scrollHeight;
-    var maxHeight = layoutItemMax ? "none" : (viewportHeight - controlsHeight) + "px";
+    var maxHeight = layoutItemMax ? "none" : viewportHeight;
     $("#image").style.maxHeight = maxHeight;
     $("#video").style.maxHeight = maxHeight;
     $("#audio").style.maxHeight = maxHeight;
@@ -148,7 +147,7 @@ var Gallery = (function() {
 
   function initLayout() {
     window.addEventListener("resize", layout);
-    setTimeout(layout, 0);
+    layout();
   }
 
   function onEntriesUpdate() {
@@ -157,7 +156,6 @@ var Gallery = (function() {
   }
 
   function init() {
-    $ = document.querySelector.bind(document);
     $gallery = $("#gallery");
 
     onEntriesUpdate();

data/app/js/index.js

@@ -1,6 +1,14 @@
 "use strict";
 
 var Index = (function() {
+  function galleryVisible() {
+    return document.body.classList.contains("gallery");
+  }
+
+  function listingVisible() {
+    return document.body.classList.contains("listing");
+  }
+
   function jumpListing() {
     document.body.classList.remove("gallery");
     document.body.classList.add("listing");
@@ -11,13 +19,58 @@ 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() {
-    if(document.body.classList.contains("has-gallery")) jumpGallery();
+    if((Entries.media().length / Entries.all().length) >= 0.5) jumpGallery();
     else jumpListing();
+
+    initEvents();
   }
 
   return {
     init: init,
+    galleryVisible: galleryVisible,
+    listingVisible: listingVisible,
     jumpListing: jumpListing,
     jumpGallery: jumpGallery
   };

data/app/js/listing.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var Listing = (function() {
-  var $;
   var $container;
   var perPage = 99;
   var currentIndex;
@@ -61,10 +60,6 @@ var Listing = (function() {
     $container.insertAdjacentHTML("beforeend", renderTable(currentEntries));
   }
 
-  function atBottom() {
-    return (window.scrollY + window.innerHeight) == document.body.scrollHeight;
-  }
-
   function onScrolled() {
     if(atBottom() && moreContent) {
       currentIndex += perPage;
@@ -131,7 +126,6 @@ var Listing = (function() {
   }
 
   function init() {
-    $ = document.querySelector.bind(document);
     $container = $("#listing-container");
 
     onEntriesUpdate();

data/lib/servel/version.rb

@@ -1,3 +1,3 @@
 module Servel
-  VERSION = "0.23.0"
+  VERSION = "0.24.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: servel
 version: !ruby/object:Gem::Version
-  version: 0.23.0
+  version: 0.24.0
 platform: ruby
 authors:
 - Brenton "B-Train" Fletcher
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-09-09 00:00:00.000000000 Z
+date: 2018-09-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -131,6 +131,7 @@ files:
 - app/css/normalize.css
 - app/home.haml
 - app/index.haml
+- app/js/common.js
 - app/js/entries.js
 - app/js/gallery.js
 - app/js/index.js