Merge pull request #5 from jpamental/Part6_Side_swipe

Part 6 - Swipe UI
jpamental · May 29, 2020 · f153dc1 · f153dc1
2 parents 2b1bf34 + 624fccb
commit f153dc1
Show file tree

Hide file tree

Showing 168 changed files with 8,408 additions and 10,880 deletions.
diff --git a/_includes/_layouts/chapter.liquid b/_includes/_layouts/chapter.liquid
@@ -2,13 +2,16 @@
 
 <article class="chapter">
   {{ content }}
+
+  <nav aria-labelledby="chapter-pagination">
+    <h2 id="chapter-pagination" class="visually-hidden">Previous/Next Chapter</h2>
+    <ul class="prev-next-chapters">
+      <li class="previous">{% if prevPost.url %}<a href="{{ prevPost.url }}">&laquo; {{ prevPost.data.title }}</a>{% else %}<a href="/contents">&laquo; Table of Contents</a>{% endif %}</li>
+      <li class="next">{% if nextPost.url %}<a href="{{ nextPost.url }}">{{ nextPost.data.title }} &raquo;</a>{% endif %}</li>
+    </ul>
+  </nav>
+
 </article>
-<nav aria-labelledby="chapter-pagination">
-  <h2 id="chapter-pagination" class="visually-hidden">Previous/Next Chapter</h2>
-  <ul class="prev-next-chapters">
-    <li class="previous">{% if prevPost.url %}<a href="{{ prevPost.url }}">&laquo; {{ prevPost.data.title }}</a>{% else %}<a href="/contents">&laquo; Table of Contents</a>{% endif %}</li>
-    <li class="next">{% if nextPost.url %}<a href="{{ nextPost.url }}">{{ nextPost.data.title }} &raquo;</a>{% endif %}</li>
-  </ul>
-</nav>
+<div class="pager-wrapper" id="pager_wrapper"></div>
 
 {% include partials/meta_close %}
diff --git a/_includes/_layouts/page.liquid b/_includes/_layouts/page.liquid
@@ -1,5 +1,6 @@
 {% include partials/meta_open %}
 
   {{ content }}
+<div class="pager-wrapper" id="pager_wrapper"></div>
 
 {% include partials/meta_close %}
diff --git a/_includes/partials/meta_close.liquid b/_includes/partials/meta_close.liquid
@@ -2,8 +2,7 @@
     <footer>
       <a href="#top">Top</a> | 
       <a href="{{ '/' | url }}">Home</a> | 
-      <a href="https://github.com/jpamental/moby-dick">Source on GitHub</a> | 
-      <a href="https://www.gutenberg.org/files/2701/2701-h/2701-h.htm">Book text on Project Gutenberg</a>
+      <a href="{{ '/' | url }}about">About this project</a> 
     </footer>
     <script src="{{ '/' | url }}assets/js/scripts.js" async></script>
   </body>

diff --git a/_includes/partials/meta_open.liquid b/_includes/partials/meta_open.liquid
@@ -20,12 +20,15 @@
     <script type="text/javascript">
   		(function() {
   			document.documentElement.className += " wf-inactive"; 
+  			document.documentElement.className += " swipe"; 
 
-        function cssPropertyValueSupported(prop, value) {
-          var d = document.createElement('div');
-          d.style[prop] = value;
-          return d.style[prop] === value;
-        }
+        // Check for Swipe UI preference
+				if (document.cookie.split(';').some((item) => item.includes('swipe=on'))) {
+					// set a cookie to save the setting
+					document.cookie = "swipe=on;max-age=31536000;path=/;samesite=strict";
+				} else {
+					document.getElementsByTagName("html")[0].classList.remove('swipe');
+				}
 
         // set initial var for support of variable fonts
         // starting with true since most browsers support them now
@@ -34,7 +37,7 @@
         // Check for browser support of variable fonts
         var vfSupport = "CSS" in window && "supports" in CSS && CSS.supports("(font-variation-settings: normal)");
         // should return true if the browser supports variable fonts
-				console.log('vfSupport: '+vfSupport);
+				//console.log('vfSupport: '+vfSupport);
         
   			// Optimization for Repeat Views
   			if( sessionStorage.foutFontsLoaded ) {
@@ -122,16 +125,21 @@
   	</script>
 
   </head>
-  <body>
+  <body class="">
     <header id="top" class="top-bar">
       <a href="#main_content" class="visually-hidden">Jump to main <span role="presentation">content</span></a>
       <div>
         <a href="{{ '/' | url }}" class="title-link">{{ metadata.title }}</a>
       </div>
-      <nav class="toc">
-        <a href="{{ '/' | url }}contents" class="toc-trigger">Table of Contents</a>
-        {% include partials/toc.liquid %}
-      </nav>
+      <div class="link-wrapper">
+				<nav class="toc dd-menu">
+					<a href="{{ '/' | url }}contents" class="dd-menu-trigger" id="toc_trigger">Contents</a>
+					{% include partials/toc.liquid %}
+				</nav>
+				<div class="settings dd-menu">
+					<a href="{{ '/' | url }}settings" class="dd-menu-trigger" id="settings_trigger">Settings</a>
+					{% include partials/settings.liquid %}
+				</div>
+			</div>
     </header>
-    <main id="main_content">
-        {% include partials/webfont_toggle.liquid %}
+    <main id="main_content" class="main-content">
diff --git a/_includes/partials/settings.liquid b/_includes/partials/settings.liquid
@@ -0,0 +1,5 @@
+<ul class="menu">
+    <li>
+      <a href="#" id="toggle-swipe" class="toggle-swipe off">Swipe UI</a>
+    </li>
+</ul>
diff --git a/_includes/partials/swipe_toggle.liquid b/_includes/partials/swipe_toggle.liquid
@@ -0,0 +1,55 @@
+        		<!-- BEGIN swipe toggle -->
+        		<a href="#" id="toggle-swipe" class="toggle-swipe button off">Swipe UI</a>
+				<style>
+					.button {
+					  font-size: 14px;
+					  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
+					  text-decoration: none;
+					  font-weight: bold;
+					  color: #383838;
+					  background-color: #fefafa;
+					  background-image: linear-gradient(#ffffff, #ede9e9);
+					  padding: 0.25em;
+					  border-radius: 0.5em;
+					  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+					}
+          .button:link,
+          .button:visited {
+            text-decoration: none;
+          }
+					.button:hover {
+					  background-color: #e4e1e1;
+					  background-image: linear-gradient(#fefafa, #cbc7c7);
+					}
+					.toggle-swipe {
+					  position: fixed; 
+					  top: 3.5em; 
+					  right: 1em;
+					  z-index: 98;
+					}
+					.toggle-swipe.on:after {
+					  content: ": on";
+					}
+					.toggle-swipe.off:after {
+					  content: ": off";
+					}
+				</style>
+
+
+				<script>
+					if (!'classList' in document.createElement('span')) {
+  					document.getElementById('c-unsupported').classList.remove('hidden');
+            document.getElementById('execute').setAttribute('disabled', 'disabled');
+          } else {
+            document.getElementById('toggle-swipe').addEventListener('click', function(e) {
+              e.preventDefault();
+							document.getElementById('toggle-swipe').classList.toggle('on');
+							document.getElementById('toggle-swipe').classList.toggle('off');
+							document.getElementsByTagName("html")[0].classList.toggle('swipe');
+              pageCounter();
+
+            });
+         	}
+        </script>
+
+        		<!-- END swipe toggle -->
diff --git a/_includes/partials/toc.liquid b/_includes/partials/toc.liquid
@@ -1,4 +1,4 @@
-<ul class="toc-menu">
+<ul class="menu">
  {%- for chapter in collections.chapter -%}
     <li{% if page.url == chapter.url %} class="active"{% endif %}>
       {% if page.url != chapter.url %}<a href="{{ chapter.url }}">{% endif %}{{ chapter.data.title }}{% if page.url != chapter.url %}</a>{% endif %}