jekyll-theme-isabelline 0.1.22 → 0.1.23

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d30a71d9b0bcb312e53beaa8a903a41e7c7288dba58024d8b6ade9894487906
-  data.tar.gz: 4927fe5afa88bfd075044c9f843f9da5248cbe381f40de152bd4e645d9d5996f
+  metadata.gz: 54f8c8361f0dbdec8be508ff7a42a84c080888817d17bd50522a11d94291391c
+  data.tar.gz: a3568115fb01e50122908ca1928c7510a14fa5cade8c0aee347dfb28220772ae
 SHA512:
-  metadata.gz: 033eb7cbaedbf2b8546954fb9d0fc4b3437754bac11bdcabe8e24e2e2909c9f969478d4a4fc03ecd91d0301b57481ff34172120220d381ca475718f8df06b929
-  data.tar.gz: 4eec0a112f41ca095e4abcebc09c50acb156ced9c45bb0a4ee373b8cc83e5b016ff36e9808594106e61dca91efaf5d42b5e4af1ff4a15539b6fa5f1e8ff7a0ec
+  metadata.gz: 646ec113bc9e246c17ed30c6ebfa42039ca32da83e4a64ef6c4c705ea2c84e2e23ec1e7d5879f136e78d258bd226bad26601cd2194c492f2b2f1288b7dca792d
+  data.tar.gz: b545cc2d12f0faa42e24efee3dc0d86f1fbf2a480222f437df3c95ac3139ee1d03b4ee20b169fcc3eb337585b89d90a2d224df909db06a6b56d345503aee1bf1

data/README.md

@@ -17,7 +17,7 @@ Add this line to site's `Gemfile`:
 ```ruby
 gem "jekyll-theme-isabelline", "~> 0.1.0"
 ```
-And add this line to your Jekyll site:
+And add this line to your Jekyll site `_config.yaml`:
 
 ```yaml
 theme: jekyll-theme-isabelline

data/_includes/gallery.html

@@ -4,7 +4,7 @@
 
 {% assign sorted_static_files = site.static_files | map: "path" | sort %}
 
-{% assign image_extensions = "jpg,jpeg,png,gif" | split: "," %}
+{% assign valid_image_extensions = "jpg,jpeg,png,gif" | split: "," %}
 
 <div class="gallery" id="gallery-{{ gallery_name }}">
 	{% assign image_index = 0 %}
@@ -12,7 +12,7 @@
 	<div class="images">
 		{% for image_path in sorted_static_files %}
 			{% assign image_ext = image_path | split: "." | last %}
-			{% if image_extensions contains image_ext %}
+			{% if valid_image_extensions contains image_ext %}
 				{% if image_path contains gallery_prefix %}
 					{% assign image_index = image_index | plus: 1 %}
 					<img id="{{ gallery_name }}-{{ image_index }}" src="{{ site.baseurl }}{{ image_path }}" />

data/_sass/_isabelline.scss

@@ -235,20 +235,37 @@ main {
 			width: 100%;
 			
 			// height: 200px;
-			float: left;
+			// float: left;
 		}
 
 		div.images {
+			position: relative;
+			height: 500px;
+			overflow: hidden;
+
+			will-change: height;
+			transition: 300ms ease;
+
+			img.transition {
+				will-change: left;
+				transition: 300ms ease;
+			}
+
+			img.left   { left: -100% !important; }
+			img.right  { left:  100% !important; }
+			img.center { left:    0  !important; }
+
 			img {
 				cursor: pointer;
 				border-radius: 6px;
-				display: none;
-				transition: all 300ms ease;
-				will-change: display;
+				
+				position: absolute;
+				top: 0;
+				left: 100%;
 			}
 			
 			img:first-child {
-				display: block;
+				left: 0;
 			}
 		}
 
@@ -271,6 +288,8 @@ main {
 				}
 			}
 
+			// slightly modified version of
+			// https://css-tricks.com/making-pure-css-playpause-button/
 			.play {
 				float: left;
 

data/assets/js/gallery.js

@@ -3,9 +3,11 @@
 	var process_gallery = function (g) {
 		var
 			// milliseconds to wait before switch to next slide
-			NEXT_SLIDE_TIMEOUT = 5000;
+			NEXT_SLIDE_TIMEOUT = 3000;
 
 		var 
+			images_container = g.querySelector('.images'),
+
 			// images in this gallery
 			images = g.querySelectorAll('.images img'),
 
@@ -26,17 +28,71 @@
 			// handle to setInterval
 			play_interval;
 
+/*
+ +--------+--------+--------+
+ | image1 | image2 | image3 |
+ |        |selected|        |
+ +--------+--------+--------+
+ */
+
+ 		var adjust_height = function (index) {
+ 			images_container.style.height = images[index].offsetHeight + 'px';
+ 		}
+
 		// show image at index
 		// update nav controls accordingly
 		var select_image = function (index) {
-			// var image = images[index];
-			if (selected_index !== index) {
-				images[selected_index].style.display = 'none';
-				navs[selected_index].classList.remove('selected');
-				images[index].style.display = 'block';
+			if (selected_index === index) return;
+
+			var slide = function () {
+				images[selected_index].removeEventListener('transitionend', slide);
+
+				images[selected_index].classList.remove('transition');
+				images[index].classList.remove('transition');
+
 				navs[index].classList.add('selected');
+				navs[selected_index].classList.remove('selected');
+				
 				selected_index = index;
 			}
+
+			images[selected_index].addEventListener('transitionend', slide);
+
+			if (index < selected_index) {
+				setTimeout(function () {
+					images[index].classList.remove('right');
+					images[index].classList.add('left');
+
+					adjust_height(index);
+
+					setTimeout(function () {
+						images[index].classList.add('transition');
+						images[selected_index].classList.add('transition');
+						images[index].classList.remove('left');
+						images[index].classList.add('center');
+						images[selected_index].classList.add('right');
+						images[selected_index].classList.remove('center');
+					},1)
+				},1)
+
+			} else {
+				setTimeout(function () {
+					images[index].classList.remove('left');
+					images[index].classList.add('right');
+
+					adjust_height(index);
+
+					setTimeout(function () {
+						images[index].classList.add('transition');
+						images[selected_index].classList.add('transition');
+						images[index].classList.remove('right');
+						images[index].classList.add('center');
+						images[selected_index].classList.add('left');
+						images[selected_index].classList.remove('center');
+					},1);
+				},1);
+
+			}
 		}
 
 		// show next image
@@ -63,26 +119,37 @@
 			}
 		}
 
+		// build nav bullets
 		var navHtml = '';
-
 		for (var i=0; i<images.length; ++i) {
 			var image = images[i]
 			image.addEventListener('click', next_image)
 			navHtml += '<i class="' + (i===0? 'selected' : '') + '" data-target="' + image.id + '"></i>'
 		}
-
 		gallery_nav.innerHTML += navHtml;
 
+		// attach nav bullet listeners
 		navs = gallery_nav.querySelectorAll('i');
-
 		for (var i=0; i<navs.length; ++i) {
 			var nav = navs[i];
 			nav.addEventListener('click', nav_to_image)
 		}
 
+		// play button
 		play_checkbox = g.querySelector('.play input[type=checkbox]');
-
 		play_checkbox.addEventListener('change', toggle_play);
+
+		// resize image container when initial image loads
+		if (images[selected_index].complete) {
+			adjust_height(selected_index);
+		} else {
+			images[selected_index].addEventListener('load', function () {
+				adjust_height(selected_index);
+			});
+			images[selected_index].addEventListener('error', function() {
+				console.warn('error loading image', arguments, images[selected_index].src, images[selected_index])
+			});
+		}
 	}
 
 	var galleries = document.getElementsByClassName('gallery');

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-isabelline
 version: !ruby/object:Gem::Version
-  version: 0.1.22
+  version: 0.1.23
 platform: ruby
 authors:
 - Rouslan Zenetl
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-07 00:00:00.000000000 Z
+date: 2020-09-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -120,11 +120,8 @@ files:
 - assets/js/gallery.js
 - assets/js/slides.js
 - assets/js/snackbar.js
-- build/Dockerfile
-- build/Dockerfile-serve
-- build/docker-entrypoint.sh
 - index.html
-homepage: https://github.com/rzen/jekyll-theme-isabelline
+homepage: https://git.rzen.dev/rzen/jekyll-theme-isabelline
 licenses:
 - MIT
 metadata:

data/build/Dockerfile

@@ -1,17 +0,0 @@
-# borrowed from https://github.com/BretFisher/jekyll-serve
-
-FROM ruby:2.7-alpine
-
-RUN apk add --no-cache build-base gcc bash cmake git
-RUN apk add --no-cache imagemagick
-
-# install both bundler 1.x and 2.x
-RUN gem install bundler -v "~>1.0" && gem install bundler jekyll
-
-EXPOSE 4000
-
-WORKDIR /site
-
-ENTRYPOINT [ "jekyll" ]
-
-CMD [ "--help" ]

data/build/Dockerfile-serve

@@ -1,8 +0,0 @@
-FROM docker.rzen.dev/jekyll:latest
-
-COPY docker-entrypoint.sh /usr/local/bin/
-
-# on every container start, check if Gemfile exists and warn if it's missing
-ENTRYPOINT [ "docker-entrypoint.sh" ]
-
-CMD [ "bundle", "exec", "jekyll", "serve", "--force_polling", "-H", "0.0.0.0", "-P", "4000" ]

data/build/docker-entrypoint.sh

@@ -1,19 +0,0 @@
-#!/bin/bash
-set -e
-
-if [ ! -f Gemfile ]; then
-  echo "NOTE: hmm, I don't see a Gemfile so I don't think there's a jekyll site here"
-  echo "Either you didn't mount a volume, or you mounted it incorrectly."
-  echo "Be sure you're in your jekyll site root and use something like this to launch"
-  echo ""
-  echo "docker run -p 80:4000 -v \$(pwd):/site bretfisher/jekyll-serve"
-  echo ""
-  echo "NOTE: To create a new site, you can use the sister image bretfisher/jekyll like:"
-  echo ""
-  echo "docker run -v \$(pwd):/site bretfisher/jekyll new ."
-  exit 1
-fi
-
-bundle install --retry 5 --jobs 20
-
-exec "$@"