From 2cc63439448f03be940b9de683d20ee54598f0c0 Mon Sep 17 00:00:00 2001
From: rzen <rzen@nhl.com>
Date: Mon, 7 Sep 2020 10:00:23 -0400
Subject: [PATCH] add play button for gallery

---
 Gemfile                         |  2 +-
 _config.yaml                    |  2 +-
 _includes/gallery.html          |  9 ++++++--
 _sass/_isabelline.scss          | 35 +++++++++++++++++++++++++++--
 assets/js/gallery.js            |  3 ++-
 docker-compose.yaml             | 39 ++++++++++++++++-----------------
 jekyll-theme-isabelline.gemspec |  2 +-
 7 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/Gemfile b/Gemfile
index 721bdae..3a9fad5 100644
--- a/Gemfile
+++ b/Gemfile
@@ -6,7 +6,7 @@ gemspec
 
 group :jekyll_plugins do
   gem 'jekyll-tidy'
-  gem 'jekyll-tagging'
+  # gem 'jekyll-tagging'
   gem 'jekyll-mentions'
   gem 'jekyll-sitemap'
   gem 'jekyll-feed'
diff --git a/_config.yaml b/_config.yaml
index b03dd6a..13ec2b2 100644
--- a/_config.yaml
+++ b/_config.yaml
@@ -101,7 +101,7 @@ defaults:
 plugins:
   - rouge
   - jekyll-tidy
-  - jekyll/tagging
+  # - jekyll-tagging
   - jekyll-mentions
   - jekyll-sitemap
   - jekyll-feed
diff --git a/_includes/gallery.html b/_includes/gallery.html
index ce41c6d..6c87492 100644
--- a/_includes/gallery.html
+++ b/_includes/gallery.html
@@ -15,10 +15,15 @@
 			{% 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 }}" />
+					<img id="{{ gallery_name }}-{{ image_index }}" src="{{ site.baseurl }}{{ image_path }}" />
 				{% endif %}
 			{% endif %}
 		{% endfor %}
 	</div>
-	<nav></nav>
+	<nav>
+		<div class="play">
+			<input type="checkbox" value="" id="{{ gallery_name }}-play" />
+			<label for="{{ gallery_name }}-play"></label>
+		</div>
+	</nav>
 </div>
\ No newline at end of file
diff --git a/_sass/_isabelline.scss b/_sass/_isabelline.scss
index 6b24afc..0fe38fa 100644
--- a/_sass/_isabelline.scss
+++ b/_sass/_isabelline.scss
@@ -252,7 +252,7 @@ main {
 				cursor: pointer;
 				border-radius: 6px;
 				display: none;
-				transition: all .3s ease;
+				transition: all 300ms ease;
 			}
 			
 			img:first-child {
@@ -271,13 +271,44 @@ main {
 				width: 1rem;
 				height: 1rem;
 				border-radius: .5rem;
-				transition: all .3s ease;
+				transition: all 300ms ease;
 				background-color: hsl($hue,10,80);
 				&.selected {
 					background-color: hsl($hue,50,40);
 				}
 			}
+			.play {
+				label {
+					margin: .5rem;
+
+					display: inline-block;
+
+					box-sizing: border-box;
+
+					width: 0;
+					height: .5rem;
+
+					cursor: pointer;
+
+					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;
+				}
+				input[type='checkbox'] {
+					visibility: hidden;
+					&:checked + label {
+						border-style: solid;
+						border-width: .3rem 0 .3rem .5rem;
+					}
+				}
+			}
 		}
+
+
 	}
 
 	div.gallery + p {
diff --git a/assets/js/gallery.js b/assets/js/gallery.js
index 6131d77..13bce08 100644
--- a/assets/js/gallery.js
+++ b/assets/js/gallery.js
@@ -38,9 +38,10 @@
 			navHtml += '<i class="' + (i===0? 'selected' : '') + '" data-target="' + image.id + '"></i>'
 		}
 
-		gallery_nav.innerHTML = navHtml;
+		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)
diff --git a/docker-compose.yaml b/docker-compose.yaml
index dffb2bd..8567cf1 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -5,61 +5,60 @@ services:
 
   serve:
     container_name: isabelline-serve
-    image: docker.rzen.dev/jekyll-serve
-    # command: jekyll serve --host 0.0.0.0 --future --draft --force_polling --livereload
+    image: jekyll/jekyll:4
+    command: jekyll serve --host 0.0.0.0 --future --draft --force_polling --livereload
     environment:
       JEKYLL_ENV: local
     ports:
       - 4000:4000
       - 35729:35729
     volumes:
-      - .:/site
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
 
   # build and push to rubygems.org
 
   gem-push:
     container_name: jekyll-gem-push
-    image: docker.rzen.dev/jekyll
-    command: |
-      bash -c "gem build -v jekyll-theme-isabelline.gemspec 
-        && GEM_VER=`ruby -e '
-          require \"rubygems\"; 
-          spec = Gem::Specification::load(\"jekyll-theme-isabelline.gemspec\"); 
-          puts \"#{spec.version}\"'` 
+    image: jekyll/jekyll:4
+    command: >
+      bash -c "gem build -v jekyll-theme-isabelline.gemspec \
+        && GEM_VER=`ruby -e '\
+          require \"rubygems\"; \
+          spec = Gem::Specification::load(\"jekyll-theme-isabelline.gemspec\"); \
+          puts \"#{spec.version}\"'` \
         && gem push jekyll-theme-isabelline-$${GEM_VER}.gem
       "
     volumes:
-      - .:/site
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
-      - ./.gem:/root/.gem
+      - .gem:/root/.gem
 
   # helpers
 
   jekyll:
     container_name: jekyll
-    image: docker.rzen.dev/jekyll
+    image: jekyll/jekyll:4
     entrypoint: jekyll
     environment:      
       JEKYLL_ENV: local
     volumes:
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
-      - .:/site
 
   gem:
     container_name: jekyll-gem
-    image: docker.rzen.dev/jekyll
+    image: jekyll/jekyll:4
     entrypoint: gem
     volumes:
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
-      - .:/site
-      - ./.gem:/root/.gem
 
   bundle:
     container_name: bundle
-    image: jekyll/jekyll:4
+    image: jekyll/jekyll:4.0
     entrypoint: bundle
     volumes:
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
-      - .:/site
-      - ./.gem:/root/.gem
+      - .gem:/root/.gem
diff --git a/jekyll-theme-isabelline.gemspec b/jekyll-theme-isabelline.gemspec
index 208f104..77a1688 100644
--- a/jekyll-theme-isabelline.gemspec
+++ b/jekyll-theme-isabelline.gemspec
@@ -19,4 +19,4 @@ Gem::Specification.new do |spec|
   # TODO: jekyll ver should be same as image in docker-compose.yaml
   spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0"
   spec.add_development_dependency "bundler", "~> 2.1.0"
-end
\ No newline at end of file
+end 
\ No newline at end of file