v0.4.2

Mobius1 · Nov 27, 2018 · ffa13e4 · ffa13e4
1 parent 9ba060b
commit ffa13e4
Show file tree

Hide file tree

Showing 8 changed files with 216 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ Pageable transforms a web page into a full page scrolling presentation.
   - [Playground](https://mobius1.github.io/Pageable/)
   - [Adding progress bars](https://mobius1.github.io/Pageable/progress.html)
   - [Infinite Scrolling](https://mobius1.github.io/Pageable/infinite.html)
+  - [Infinite Slideshow](https://mobius1.github.io/Pageable/slideshow.html)
   - [Fun with delays](https://mobius1.github.io/Pageable/delay.html)
   - [Full-page image gallery](https://mobius1.github.io/Pageable/gallery.html)
 

diff --git a/dist/pageable.js b/dist/pageable.js
diff --git a/docs/css/slideshow.css b/docs/css/slideshow.css
@@ -0,0 +1,164 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,700");
+body {
+  margin: 0;
+  font-family: "Roboto Mono";
+  overflow: hidden;
+  background-color: #373737;
+  font-size: 40px;
+  font-weight: bold;
+}
+
+pre {
+  background-color: #3a3a3a;
+  padding: 20px;
+  border-radius: 5px;
+}
+
+section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: row;
+  color: #fff;
+  position: relative;
+}
+
+#page-1 {
+  background-color: #3F51B5;
+}
+
+#page-2 {
+  background-color: #673AB7;
+}
+
+#page-3 {
+  background-color: #9C27B0;
+}
+
+#page-4 {
+  background-color: #E91E63;
+}
+
+#page-5 {
+  background-color: #F44336;
+}
+
+#page-6 {
+  background-color: #4CAF50;
+}
+
+#page-1-clone {
+  background-color: #3F51B5;
+}
+
+#page-6-clone {
+  background-color: #4CAF50;
+}
+
+nav {
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  z-index: 100;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+nav ul li a span {
+  background: #fff;
+}
+
+nav li {
+  display: block;
+  width: 10px;
+  height: 10px;
+  margin: 16px;
+  position: relative;
+}
+
+nav span:after {
+  background: rgba(255, 255, 255, 0.15);
+  position: absolute;
+  content: "";
+  display: block;
+  top: 4px;
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
+  border-radius: 100%;
+  transition: 0.3s;
+}
+
+nav li .active span {
+  background: #fff;
+  position: absolute;
+}
+
+nav li .active span:after {
+  top: -6px;
+  left: -6px;
+  bottom: -6px;
+  right: -6px;
+}
+
+nav ul {
+  margin: 0;
+  padding: 0;
+}
+
+nav ul li {
+  display: block;
+  width: 14px;
+  height: 13px;
+  margin: 7px;
+  position: relative;
+}
+
+nav ul li a {
+  display: block;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+nav ul li a.active span,
+nav ul li:hover a.active span {
+  height: 12px;
+  width: 12px;
+  margin: -6px 0 0 -6px;
+  border-radius: 100%;
+}
+
+nav ul li a span {
+  border-radius: 50%;
+  position: absolute;
+  z-index: 1;
+  height: 4px;
+  width: 4px;
+  border: 0;
+  background: #fff;
+  left: 50%;
+  top: 50%;
+  margin: -2px 0 0 -2px;
+  transition: all 0.1s ease-in-out;
+}
+
+nav ul li:hover a span {
+  width: 10px;
+  height: 10px;
+  margin: -5px 0px 0px -5px;
+}
+
+.pg-horizontal nav {
+  width: 100vw;
+  left: 0;
+  bottom: 20px;
+}
+.pg-horizontal nav ul li {
+  float: left;
+}
diff --git a/docs/js/slideshow.js b/docs/js/slideshow.js
@@ -0,0 +1,8 @@
+const pageable = new Pageable("main", {
+    freeScroll: true,
+    swipeThreshold: 200,
+    infinite: true,
+    slideshow: {
+        interval: 2000,
+    },
+});
diff --git a/docs/slideshow.html b/docs/slideshow.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html >
+	<head>
+		<meta charset="UTF-8">
+		<title>Pageable - Slideshow</title>
+		<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css">
+		<link rel="stylesheet" href="css/slideshow.css">
+	</head>
+	<body>
+		<main>
+			<section data-anchor="page 1">1</section>
+			<section data-anchor="page 2">2</section>
+			<section data-anchor="page 3">3</section>
+			<section data-anchor="page 4">4</section>
+			<section data-anchor="page 5">5</section>
+			<section data-anchor="page 6">6</section>
+		</main>
+		<script src="https://unpkg.com/pageable@latest/dist/pageable.js"></script>
+		<script src="js/slideshow.js"></script>
+	</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pageable",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Create full page scrolling web pages. No jQuery.",
   "main": "dist/pageable.js",
   "scripts": {

diff --git a/src/classes/slideshow.js b/src/classes/slideshow.js
@@ -10,6 +10,9 @@ export default class SlideShow {
             this.running = true;
             this.instance.slideIndex = this.instance.index;
             this.instance.interval = setInterval(() => {
+                if ( this.instance.config.infinite ) {
+                    this.instance._overScroll(true);
+                }                
                 this.instance.index < this.instance.pageCount ? this.instance.slideIndex++ : this.instance.slideIndex = 0;
                 this.instance.scrollToIndex(this.instance.slideIndex);
 

diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,7 @@ import SlideShow from "./classes/slideshow";
 import Emitter from "./classes/emitter";
 
 /**
- * Pageable 0.4.1
+ * Pageable 0.4.2
  * 
  * https://github.com/Mobius1/Pageable
  * Released under the MIT license
@@ -161,7 +161,6 @@ export default class Pageable extends Emitter {
 
                     if (this[str]) {
                         this[str].classList.add("pg-nav");
-                        this[str].onclick = this[dir.toLowerCase()].bind(this);
                     }
                 }
             }
@@ -276,6 +275,13 @@ export default class Pageable extends Emitter {
             false
         );
 
+        if ( this.navPrevEl ) {
+            this.navPrevEl.addEventListener("click", this.callbacks.prev, false);
+
+        if ( this.navNextEl )
+            this.navNextEl.addEventListener("click", this.callbacks.next, false);
+        }
+
         document.addEventListener("readystatechange", e => {
             if (document.readyState === "loading") {
                 document.addEventListener("DOMContentLoaded", this.events.load);
@@ -315,6 +321,13 @@ export default class Pageable extends Emitter {
             this.callbacks.stop
         );
 
+        if ( this.navPrevEl ) {
+            this.navPrevEl.removeEventListener("click", this.callbacks.prev, false);
+
+        if ( this.navNextEl )
+            this.navNextEl.removeEventListener("click", this.callbacks.next, false);
+        }
+
         document.removeEventListener("click", this.callbacks.click);
     }
 
@@ -506,6 +519,7 @@ export default class Pageable extends Emitter {
             for (const page of this.pages) {
                 page.style.height = ``;
                 page.style.width = ``;
+                page.style.float = ``;
                 page.classList.remove("pg-page");
                 page.classList.remove("pg-active");
             }
@@ -516,7 +530,6 @@ export default class Pageable extends Emitter {
                 if (this[str]) {
                     this[str].classList.remove("active");
                     this[str].classList.remove("pg-nav");
-                    this[str].onclick = () => {};
                 }
             }