Commit 56

ChangeLog.md

@@ -1,6 +1,13 @@
 # Change Log
 
 
+## 3.1.5 (2022-10-07)
+
+Changes:
+
+* Documentation
+
+
 ## 3.1.4 (2022-08-06)
 
 Changes:

dev/js-add-ons

@@ -0,0 +1 @@
+../dist/js-add-ons

dev/takefive-dev.css

@@ -7,7 +7,7 @@
 |*|
 |*|	https://github.com/madmurphy/takefive.css/
 |*|
-|*|	Version 3.1.4
+|*|	Version 3.1.5
 |*|
 |*|	(c) [email protected]
 |*|

dist/js-add-ons/takefive-clean-empty-hash.js

@@ -0,0 +1,17 @@
+window.addEventListener("DOMContentLoaded", function () {
+
+	var aEmptyHashLinks = document.querySelectorAll("a[href$=\"#\"]");
+
+	for (var nIdx = 0; nIdx < aEmptyHashLinks.length; nIdx++) {
+
+		aEmptyHashLinks[nIdx].addEventListener("click", function (oEvt) {
+
+			location.hash = "";
+			history.replaceState(null, "", this.href.split('#')[0]);
+			oEvt.preventDefault();
+
+		});
+
+	}
+
+}, false);

dist/js-add-ons/takefive-clean-history.js

@@ -0,0 +1,57 @@
+(function () {
+
+	var bOpenedWithSlide = false, nHistCount = -1;
+
+	function newSlideClicked () {
+
+		nHistCount--;
+
+	}
+
+	function exitClicked (oEvt) {
+
+		if (bOpenedWithSlide) {
+
+			/*  The page was loaded with a slide open  */
+			bOpenedWithSlide = false;
+
+		} else {
+
+			history.go(nHistCount);
+			oEvt.preventDefault();
+
+		}
+
+		nHistCount = -1;
+
+	}
+
+	addEventListener("DOMContentLoaded", function () {
+
+		var
+			elIter,
+			aLinks = document.querySelectorAll("article.slide a"),
+			elTest = document.createElement("a");
+
+		bOpenedWithSlide = Boolean(document.querySelector("article.slide:target"));
+		elTest.href = location.href;
+
+		for (var nLen = aLinks.length, nIdx = 0; nIdx < nLen; nIdx++) {
+
+			elIter = aLinks[nIdx];
+			elTest.hash = elIter.hash || "#";
+
+			if (elTest.href === elIter.href) {
+				elIter.addEventListener("click",
+					elIter.hash && document.querySelector("article.slide" + elIter.hash) ?
+						newSlideClicked
+					:
+						exitClicked
+				);
+			}
+
+		}
+
+	}, false);
+
+})();

dist/js-add-ons/takefive-keyboard-events.js

@@ -0,0 +1,23 @@
+/* close the slide currently open or do nothing */
+function closeCurrentSlide () {
+
+	var oSlide = document.querySelector("article.slide:target");
+
+	if (oSlide) {
+
+		var oExitLink = oSlide.querySelector("nav:first-of-type a[rel~=\"parent\"]");
+		location.assign(oExitLink ? oExitLink.href : "#");
+
+	}
+
+}
+
+window.addEventListener("keyup", function (oEvt) {
+
+	if (oEvt.key === "Escape") {
+
+		closeCurrentSlide();
+
+	}
+
+}, false);

dist/js-add-ons/takefive-touch-events.js

@@ -0,0 +1,55 @@
+(function () {
+
+	var nDownX = null, nDownY = null;
+
+	function handleTouchStart (oEvt) {
+
+		const oFirstTouch = oEvt.touches[0];
+
+		nDownX = oFirstTouch.clientX;
+		nDownY = oFirstTouch.clientY;
+
+	};
+
+	function handleTouchMove (oEvt) {
+
+		if (!nDownX || !nDownY) {
+
+			return;
+
+		}
+
+		var
+			oLink, sRel = null,
+			nDiffX = nDownX - oEvt.touches[0].clientX,
+			nDiffY = nDownY - oEvt.touches[0].clientY;
+
+		switch (Math.abs(nDiffX) > Math.abs(nDiffY) ? nDiffX > 0 ? 3 : 2 : nDiffY > 0 ? 1 : 0) {
+
+			/*  Cases: `0` -> down swipe, `1` -> up swipe, `2` -> right swipe, `3` -> left swipe  */
+			case 2: sRel = "prev"; break;	/*  Right swipe  */
+			case 3: sRel = "next"; break;	/*  Left swipe  */
+
+		}
+
+		nDownX = null;
+		nDownY = null;
+
+		sRel && (oLink = this.querySelector("nav:first-of-type a[href][rel~=\"" + sRel + "\"]")) && location.assign(oLink.href);
+
+	};
+
+	window.addEventListener("DOMContentLoaded", function () {
+
+		const aSlides = document.querySelectorAll("article.slide");
+
+		for (var nIdx = 0, nLen = aSlides.length; nIdx < nLen; nIdx++) {
+
+			aSlides[nIdx].addEventListener('touchstart', handleTouchStart, false);
+			aSlides[nIdx].addEventListener('touchmove', handleTouchMove, false);
+
+		}
+
+	}, false);
+
+})();

dist/takefive.css

@@ -7,7 +7,7 @@
 |*|
 |*|	https://github.com/madmurphy/takefive.css/
 |*|
-|*|	Version 3.1.4
+|*|	Version 3.1.5
 |*|
 |*|	(c) [email protected]
 |*|

docs/css/docs-classes.css

@@ -369,6 +369,10 @@ table.definition th:first-child {
 	padding-left: 1em;
 }
 
+table.definition.longterms th:first-child {
+	width: 13em;
+}
+
 table.definition th,
 table.definition thead th:first-child {
 	font-weight: bold;
@@ -881,6 +885,11 @@ mark, .bg0 {
 	background-color: #87e4ff;
 }
 
+.bg2 {
+	background-color: rgba(255, 93, 0, .1);
+}
+
+
 .resultbox {
 	box-sizing: border-box;
 	border: 2px inset;

docs/css/docs.css

@@ -175,7 +175,7 @@ mark {
 	}
 
 	figure img, figure object {
-		box-shadow: 0 8px 8px #000;
+		box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .6);
 	}
 
 }

docs/js-add-ons.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" type="text/css" href="css/print.min.css" />
+<link rel="stylesheet" type="text/css" href="css/docs.css" />
+<link rel="stylesheet" type="text/css" href="css/docs-classes.css" />
+<link rel="stylesheet" type="text/css" href="css/takefive.min.css" />
+<script type="text/javascript" src="js/takefive-clean-history.js"></script>
+<script type="text/javascript" src="js/takefive-keyboard-events.js"></script>
+<script type="text/javascript" src="js/takefive-touch-events.js"></script>
+<title>Take Five! &ndash; JavaScript Add-Ons</title>
+</head>
+
+<body>
+
+<header>
+<h1><em>Take Five!</em> &ndash; JavaScript Add-Ons</h1>
+</header>
+<p>This page includes a few scripts that allow to</p>
+<ul>
+<li>Clean the browser's history after leaving a presentation (<a href="js/takefive-clean-history.js" target="_blank"><code>js-add-ons/takefive-clean-history.js</code></a>)</li>
+<li>Leave a presentation by pressing <code>Esc</code> on the keyboard (<a href="js/takefive-keyboard-events.js" target="_blank"><code>js-add-ons/takefive-keyboard-events.js</code></a>)</li>
+<li>Swipe left and right via touch events (<a href="js/takefive-touch-events.js" target="_blank"><code>js-add-ons/takefive-touch-events.js</code></a>)</li>
+</ul>
+<p>A further script that allows to use an empty hash (<code>#</code>) as the exit link and leave no traces in the address bar is available (<a href="js/takefive-clean-empty-hash.js" target="_blank"><code>js-add-ons/takefive-clean-empty-hash.js</code></a>), however this is alternative to <a href="js/takefive-clean-history.js" target="_blank"><code>takefive-clean-history.js</code></a> and can be used only when the latter is not used.</p>
+<p style="text-align: center; font-size: 2em;"><a href="#example-slide-1">Try them live</a></p>
+<article class="slide" id="example-slide-1">
+	<header>
+		<h3>Slide 1</h3>
+	</header>
+	<figure>
+		<img src="media/10.jpg" />
+		<figcaption>Silhouette of tree near body of water during golden hour</figcaption>
+	</figure>
+	<nav>
+		<a href="#" rel="parent">Manual</a>
+		<a href="#example-slide-2" rel="next">Close up of leaf</a>
+		<a href="#example-slide-4" rel="last">Gray asphalt road surrounded by tall trees</a>
+		<a href="media/10.jpg" download rel="attachment" target="_blank">Download this picture</a>
+	</nav>
+</article>
+<article class="slide" id="example-slide-2">
+	<header>
+		<h3>Slide 2</h3>
+	</header>
+	<figure>
+		<img src="media/11.jpg" />
+		<figcaption>Close up of leaf</figcaption>
+	</figure>
+	<nav>
+		<a href="#" rel="parent">Manual</a>
+		<a href="#example-slide-1" rel="prev first">Silhouette of tree near body of water during golden hour</a>
+		<a href="#example-slide-3" rel="next">Green hill near body of water</a>
+		<a href="#example-slide-4" rel="last">Gray asphalt road surrounded by tall trees</a>
+		<a href="media/11.jpg" download rel="attachment" target="_blank">Download this picture</a>
+	</nav>
+</article>
+<article class="slide" id="example-slide-3">
+	<header>
+		<h3>Slide 3</h3>
+	</header>
+	<figure>
+		<img src="media/12.jpg" />
+		<figcaption>Green hill near body of water</figcaption>
+	</figure>
+	<nav>
+		<a href="#" rel="parent">Manual</a>
+		<a href="#example-slide-2" rel="prev">Close up of leaf</a>
+		<a href="#example-slide-4" rel="next last">Gray asphalt road surrounded by tall trees</a>
+		<a href="#example-slide-1" rel="first">Silhouette of tree near body of water during golden hour</a>
+		<a href="media/12.jpg" download rel="attachment" target="_blank">Download this picture</a>
+	</nav>
+</article>
+<article class="slide" id="example-slide-4">
+	<header>
+		<h3>Slide 4</h3>
+	</header>
+	<figure>
+		<img src="media/13.jpg" />
+		<figcaption>Gray asphalt road surrounded by tall trees</figcaption>
+	</figure>
+	<nav>
+		<a href="#" rel="parent">Manual</a>
+		<a href="#example-slide-3" rel="prev">Green hill near body of water</a>
+		<a href="#example-slide-1" rel="first">Silhouette of tree near body of water during golden hour</a>
+		<a href="media/13.jpg" download rel="attachment" target="_blank">Download this picture</a>
+	</nav>
+</article>
+<footer>
+<h2>Free software</h2>
+<p><strong>Take Five!</strong> is free software. You can redistribute it and/or modify it under the terms of the <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener">GPL license</a>, version 3 or any later version. The code is <a href="https://github.com/madmurphy/takefive.css/" target="_blank" rel="noopener">available on GitHub</a>.</p>
+</footer>
+
+</body>
+</html>

docs/js/takefive-clean-empty-hash.js

@@ -0,0 +1,17 @@
+window.addEventListener("DOMContentLoaded", function () {
+
+	var aEmptyHashLinks = document.querySelectorAll("a[href$=\"#\"]");
+
+	for (var nIdx = 0; nIdx < aEmptyHashLinks.length; nIdx++) {
+
+		aEmptyHashLinks[nIdx].addEventListener("click", function (oEvt) {
+
+			location.hash = "";
+			history.replaceState(null, "", this.href.split('#')[0]);
+			oEvt.preventDefault();
+
+		});
+
+	}
+
+}, false);

docs/js/takefive-clean-history.js

@@ -0,0 +1,57 @@
+(function () {
+
+	var bOpenedWithSlide = false, nHistCount = -1;
+
+	function newSlideClicked () {
+
+		nHistCount--;
+
+	}
+
+	function exitClicked (oEvt) {
+
+		if (bOpenedWithSlide) {
+
+			/*  The page was loaded with a slide open  */
+			bOpenedWithSlide = false;
+
+		} else {
+
+			history.go(nHistCount);
+			oEvt.preventDefault();
+
+		}
+
+		nHistCount = -1;
+
+	}
+
+	addEventListener("DOMContentLoaded", function () {
+
+		var
+			elIter,
+			aLinks = document.querySelectorAll("article.slide a"),
+			elTest = document.createElement("a");
+
+		bOpenedWithSlide = Boolean(document.querySelector("article.slide:target"));
+		elTest.href = location.href;
+
+		for (var nLen = aLinks.length, nIdx = 0; nIdx < nLen; nIdx++) {
+
+			elIter = aLinks[nIdx];
+			elTest.hash = elIter.hash || "#";
+
+			if (elTest.href === elIter.href) {
+				elIter.addEventListener("click",
+					elIter.hash && document.querySelector("article.slide" + elIter.hash) ?
+						newSlideClicked
+					:
+						exitClicked
+				);
+			}
+
+		}
+
+	}, false);
+
+})();