finalize gallery feature

_includes/gallery.html

@@ -22,7 +22,7 @@
 	</div>
 	<nav>
 		<div class="play">
-			<input type="checkbox" value="" id="{{ gallery_name }}-play" />
+			<input type="checkbox" checked="false" id="{{ gallery_name }}-play" />
 			<label for="{{ gallery_name }}-play"></label>
 		</div>
 	</nav>

_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 {
@@ -253,6 +244,7 @@ main {
 				border-radius: 6px;
 				display: none;
 				transition: all 300ms ease;
+				will-change: display;
 			}
 			
 			img:first-child {
@@ -272,37 +264,37 @@ main {
 				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: .5rem;
-
+					height: 1rem;
 					cursor: pointer;
+					border-color: transparent transparent transparent hsl($hue,50,40); // same color as i.selected
 
-					border-color: transparent transparent transparent #202020;
 					transition: 300ms all ease;
 					will-change: border-width;
 
 					// paused state
 					border-style: double;
-					border-width: 0 0 0 .5rem;
+					border-width: 0 0 0 1rem;
 				}
 				input[type='checkbox'] {
-					visibility: hidden;
+					display: none;
 					&:checked + label {
 						border-style: solid;
-						border-width: .3rem 0 .3rem .5rem;
+						border-width: .5rem 0 .5rem 1rem;
 					}
 				}
 			}

assets/js/gallery.js

@@ -1,12 +1,33 @@
 (function () {
-	var galleries = document.getElementsByClassName('gallery');
-
+	// "hydrate" div.gallery with play/pause and nav behaviors
 	var process_gallery = function (g) {
-		var images = g.querySelectorAll('.images img');
-		var navs = [];  // computed below
-		var gallery_nav = g.querySelector('nav');
-		var selected_index = 0;
+		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) {
@@ -18,6 +39,7 @@
 			}
 		}
 
+		// show next image
 		var next_image = function () {
 			if (selected_index >= images.length-1) {
 				select_image(0);
@@ -26,10 +48,21 @@
 			}
 		}
 
+		// 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) {
@@ -46,8 +79,14 @@
 			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);