jekyll-theme-isabelline 0.1.21 → 0.1.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7fbcb35eae9031bcf4277856f409768a004b04d021da36ca1c0bece35b120e7
-  data.tar.gz: 1fa0cad1f31dc913b4926eac4ebb065bffd9d360c2c130106ad9e36b7b20e0da
+  metadata.gz: 5d30a71d9b0bcb312e53beaa8a903a41e7c7288dba58024d8b6ade9894487906
+  data.tar.gz: 4927fe5afa88bfd075044c9f843f9da5248cbe381f40de152bd4e645d9d5996f
 SHA512:
-  metadata.gz: c818a615a1e17472a0dbcf7ac65fc698dc92ce86cafd1b5b5ed409a838493c9003850f4bff27f71ca65d8c5e9f7e6862b7277d775f5e4c42c66fb9372886fc03
-  data.tar.gz: 85c8bb13c14aba6acf0dc79a808eac0a2bbe9aa8e10bd6a9fc48a9410dbe4bb7947f48b33b28cbf2b1eff54aee358ee130bca1ebb58667654ad6c65ddbcf9e13
+  metadata.gz: 033eb7cbaedbf2b8546954fb9d0fc4b3437754bac11bdcabe8e24e2e2909c9f969478d4a4fc03ecd91d0301b57481ff34172120220d381ca475718f8df06b929
+  data.tar.gz: 4eec0a112f41ca095e4abcebc09c50acb156ced9c45bb0a4ee373b8cc83e5b016ff36e9808594106e61dca91efaf5d42b5e4af1ff4a15539b6fa5f1e8ff7a0ec

data/_includes/footer.html

@@ -28,4 +28,5 @@
 
 <div id="snackbar">Loading...</div>
 <!-- <script src='/assets/js/slides.js'></script> -->
-<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/gallery.js" | relative_url }}'></script>

data/_includes/gallery.html

@@ -1,8 +1,29 @@
-{% assign images = (include.images | split: "|") %}
-{% assign thumbnails = (include.thumbnails | split: "|") %}
+{% assign gallery_name = include.name | default: "gallery" %}
 
-<div class="gallery">
-	{% for image in images %}
-		<a href="{{ include.dir }}/{{ image }}"><img src="{{ include.dir }}/{{ image }}" /></a>
-	{% endfor %}
+{% assign gallery_prefix = page.id | prepend: "/assets" | append: "/" | append: gallery_name %}
+
+{% assign sorted_static_files = site.static_files | map: "path" | sort %}
+
+{% assign image_extensions = "jpg,jpeg,png,gif" | split: "," %}
+
+<div class="gallery" id="gallery-{{ gallery_name }}">
+	{% assign image_index = 0 %}
+	{% assign gallery_nav = "" %}
+	<div class="images">
+		{% for image_path in sorted_static_files %}
+			{% assign image_ext = image_path | split: "." | last %}
+			{% if 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 }}" />
+				{% endif %}
+			{% endif %}
+		{% endfor %}
+	</div>
+	<nav>
+		<div class="play">
+			<input type="checkbox" checked="false" id="{{ gallery_name }}-play" />
+			<label for="{{ gallery_name }}-play"></label>
+		</div>
+	</nav>
 </div>

data/_sass/_isabelline.scss

@@ -159,15 +159,6 @@ header {
 	}
 }
 
-// div.column {
-// 	width: 30%;
-// 	float: left;
-// 	padding: .5rem;
-// 	margin: .5rem;
-// 	border: 1px solid #ccc;
-// }
-
-// link styling
 a {
 	color: darken($link-color,15%);
 	&:hover, &:active, &:visited {
@@ -204,13 +195,13 @@ main {
 		}
 
 		img {
-			border-radius: 4px;
+			border-radius: 6px;
 			// width: 100%;
 		}
 	}
 
 	p img {
-		border-radius: 4px;
+		border-radius: 6px;
 		width: 100%;
 	}
 
@@ -241,11 +232,75 @@ main {
 		margin-bottom: 1em;
 		
 		img {
-			// width: 45%;
+			width: 100%;
 			
-			height: 200px;
+			// height: 200px;
 			float: left;
 		}
+
+		div.images {
+			img {
+				cursor: pointer;
+				border-radius: 6px;
+				display: none;
+				transition: all 300ms ease;
+				will-change: display;
+			}
+			
+			img:first-child {
+				display: block;
+			}
+		}
+
+
+		nav {
+			width: 100%;
+			text-align: center;
+			i {
+				cursor: pointer;
+				margin: .5rem;
+				display: inline-block;
+				width: 1rem;
+				height: 1rem;
+				border-radius: .5rem;
+				transition: all 300ms ease;
+
+				background-color: hsl($hue,10,80);
+				&.selected {
+					background-color: hsl($hue,50,40);
+				}
+			}
+
+			.play {
+				float: left;
+
+				label {
+					margin: .5rem;
+					display: inline-block;
+					box-sizing: border-box;
+					width: 0;
+					height: 1rem;
+					cursor: pointer;
+					border-color: transparent transparent transparent hsl($hue,50,40); // same color as i.selected
+
+					transition: 300ms all ease;
+					will-change: border-width;
+
+					// paused state
+					border-style: double;
+					border-width: 0 0 0 1rem;
+				}
+				input[type='checkbox'] {
+					display: none;
+					&:checked + label {
+						border-style: solid;
+						border-width: .5rem 0 .5rem 1rem;
+					}
+				}
+			}
+		}
+
+
 	}
 
 	div.gallery + p {

data/assets/js/gallery.js

@@ -0,0 +1,94 @@
+(function () {
+	// "hydrate" div.gallery with play/pause and nav behaviors
+	var process_gallery = function (g) {
+		var
+			// milliseconds to wait before switch to next slide
+			NEXT_SLIDE_TIMEOUT = 5000;
+
+		var 
+			// images in this gallery
+			images = g.querySelectorAll('.images img'),
+
+			// container for nav buttons
+			gallery_nav = g.querySelector('nav'),
+			
+			// clickable buttons, one per image
+			// computed below
+			navs = [],
+
+			// index of the currently selected image
+			selected_index = 0,
+
+			// play control consists of a label and a checkbox
+			// defer computing because nav innerHTML gets clobbered
+			play_checkbox,
+
+			// handle to setInterval
+			play_interval;
+
+		// 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';
+				navs[index].classList.add('selected');
+				selected_index = index;
+			}
+		}
+
+		// show next image
+		var next_image = function () {
+			if (selected_index >= images.length-1) {
+				select_image(0);
+			} else {
+				select_image(selected_index+1);
+			}
+		}
+
+		// handler for nav buttons
+		// selects an image corresponding to the clicked nav button
+		var nav_to_image = function () {
+			select_image(Array.from(navs).indexOf(this));
+		}
+
+		// play/pause slideshow
+		var toggle_play = function () {
+			if (play_checkbox.checked===true) {
+				clearInterval(play_interval);
+			} else {
+				play_interval = setInterval(next_image, NEXT_SLIDE_TIMEOUT);
+			}
+		}
+
+		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;
+
+		navs = gallery_nav.querySelectorAll('i');
+
+		for (var i=0; i<navs.length; ++i) {
+			var nav = navs[i];
+			nav.addEventListener('click', nav_to_image)
+		}
+
+		play_checkbox = g.querySelector('.play input[type=checkbox]');
+
+		play_checkbox.addEventListener('change', toggle_play);
+	}
+
+	var galleries = document.getElementsByClassName('gallery');
+
+	for (var i=0; i<galleries.length; ++i) {
+		var g = galleries[i];
+		process_gallery(g);
+	}
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-isabelline
 version: !ruby/object:Gem::Version
-  version: 0.1.21
+  version: 0.1.22
 platform: ruby
 authors:
 - Rouslan Zenetl
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-05 00:00:00.000000000 Z
+date: 2020-09-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -79,11 +79,15 @@ files:
 - _sass/_syntax.scss
 - assets/.DS_Store
 - assets/blog/example/Quarter_Horse_Buckskin.jpg
+- assets/blog/example/gallery/1/lanius_isabellinus1.jpg
 - assets/blog/example/gallery/Lanius_isabellinus1.jpg
 - assets/blog/example/gallery/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg
 - assets/blog/example/gallery/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg
 - assets/blog/example/gallery/maurits-bausenhart-OkYjLpB2gzA-unsplash.jpg
 - assets/blog/example/gallery/sneaky-elbow-h00rqvO5A-M-unsplash.jpg
+- assets/blog/example/gallery2/Quarter_Horse_Buckskin.jpg
+- assets/blog/example/gallery2/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg
+- assets/blog/example/gallery2/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg
 - assets/blog/getting-started/undraw_browsing_online_sr8c.svg
 - assets/css/style.scss
 - assets/favicon/README.md
@@ -113,6 +117,7 @@ files:
 - assets/fonts/Noto Serif/ga6Iaw1J5X9T9RW6j9bNfFoWaDq8fMVxMw.woff2
 - assets/fonts/Noto Serif/ga6Iaw1J5X9T9RW6j9bNfFsWaDq8fMVxMw.woff2
 - assets/js/clipboard.js
+- assets/js/gallery.js
 - assets/js/slides.js
 - assets/js/snackbar.js
 - build/Dockerfile
@@ -139,7 +144,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.6
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Simple clean mobile-friendly theme for long form note taking. Works for blogging