Merge pull request #418 from fieg/overflow-example

Added overflow example
webcreate · Dec 13, 2019 · d882532 · d882532
2 parents 7512e46 + c2fe8f1
commit d882532
Show file tree

Hide file tree

Showing 13 changed files with 244 additions and 15 deletions.
diff --git a/Makefile b/Makefile
@@ -2,18 +2,16 @@ BUILD_DIR = .build
 TEST_DIR = .
 SEMVER=prerelease --preid=beta
 
+EXAMPLES=$(dir $(wildcard examples/*/package.json))
+
 install:
 	npm install
 	npm run build
-	cd examples/articles && npm install && npm link && npm run build;
-	cd examples/blocks && npm install && npm link && npm run build;
-	cd examples/masonry && npm install && npm link && npm run build;
+	$(foreach ex,$(EXAMPLES),(cd $(ex) && npm install && npm run link && npm run build) || exit $$?;)
 .PHONY: install
 
 update:
-	cd examples/articles && npm update;
-	cd examples/blocks && npm update;
-	cd examples/masonry && npm update;
+	$(foreach ex,$(EXAMPLES),(cd $(ex) && npm update) || exit $$?;)
 .PHONY: update
 
 up:

diff --git a/docs/advanced/history.md b/docs/advanced/history.md
@@ -2,8 +2,8 @@
 
 ## Updating url and title
 
-When users are scrolling through pages we can update the browser url and page title. This allows the current page to be shared or bookmarked. 
- 
+When users are scrolling through pages we can update the browser url and page title. This allows the current page to be shared or bookmarked.
+
 We can achieve this by listening for the [`page`](events.md#page) event. The page event contains the `url` and `title` of the current page in view.
 
 The [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) can be used to update the url.
@@ -19,7 +19,7 @@ ias.on('page', (event) => {
 });
 ```
 
-[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)
+[View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/articles/)
 
 ## Loading previous pages
 

diff --git a/docs/advanced/last-page-message.md b/docs/advanced/last-page-message.md
@@ -28,4 +28,4 @@ ias.on('last', function() {
 })
 ```
 
-[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)
+[View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/articles/)
diff --git a/docs/advanced/overflow.md b/docs/advanced/overflow.md
@@ -1,9 +1,5 @@
 # Overflow
 
-{% hint style='working' %}
-This feature is still work in progress
-{% endhint %}
-
 It is possible to have infinite scrolling pages inside an overflow element.
 
 First define a container element.
@@ -32,3 +28,5 @@ let ias = new InfiniteAjaxScroll('#scroller', {
   scrollContainer: '#scroller'
 });
 ```
+
+[View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/overflow/)
diff --git a/docs/events.md b/docs/events.md
@@ -147,4 +147,4 @@ ias.on('page', (event) => {
 })
 ```
 
-[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)
+[View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/articles/)
diff --git a/examples/overflow/.gitignore b/examples/overflow/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+.cache
+package-lock.json
+.npmrc
diff --git a/examples/overflow/index.html b/examples/overflow/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <title>Overflow</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="./style.css"/>
+
+</head>
+<body>
+
+<div class="surface-container">
+  <nav>
+    <div class="nav nav-tabs" id="nav-tab" role="tablist">
+      <a class="nav-item nav-link active" id="nav-overflow1-tab" data-toggle="tab" href="#nav-overflow1" role="tab" aria-controls="nav-overflow1" aria-selected="true">Overflow 1</a>
+      <a class="nav-item nav-link" id="nav-overflow2-tab" data-toggle="tab" href="#nav-overflow2" role="tab" aria-controls="nav-overflow2" aria-selected="false">Overflow 2</a>
+    </div>
+  </nav>
+
+  <div class="tab-content" id="nav-tabContent">
+    <div class="tab-pane fade show active" id="nav-overflow1" role="tabpanel" aria-labelledby="nav-overflow1-tab">
+      <div class="overflow-container" id="overflow1">
+        <div class="pager">
+          <a href="page1.html" class="pager__next">Next &rightarrow;</a>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="nav-overflow2" role="tabpanel" aria-labelledby="nav-overflow2-tab">
+      <div class="overflow-container" id="overflow2">
+        <div class="pager">
+          <a href="page1.html" class="pager__next">Next &rightarrow;</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+<script src="./index.js"></script>
+</body>
+</html>
diff --git a/examples/overflow/index.js b/examples/overflow/index.js
@@ -0,0 +1,15 @@
+import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
+
+window.ias1 = new InfiniteAjaxScroll('#overflow1', {
+  scrollContainer: '#overflow1',
+  item: '.item',
+  next: '.pager__next',
+  pagination: '#overflow1 .pager',
+});
+
+window.ias2 = new InfiniteAjaxScroll('#overflow2', {
+  scrollContainer: '#overflow2',
+  item: '.item',
+  next: '.pager__next',
+  pagination: '#overflow2 .pager',
+});
diff --git a/examples/overflow/package.json b/examples/overflow/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "infinite-ajax-scroll-overflow",
+  "description": "An example of infinite scroll with overflow",
+  "version": "1.0.0",
+  "homepage": "https://infiniteajaxscroll.com",
+  "repository": "github:webcreate/infinite-ajax-scroll",
+  "bugs": "https://github.com/webcreate/infinite-ajax-scroll/issues",
+  "author": {
+    "company": "Webcreate",
+    "name": "Jeroen Fiege",
+    "web": "https://webcreate.nl"
+  },
+  "private": true,
+  "scripts": {
+    "build": "parcel build *.html --public-url ./",
+    "watch": "parcel watch * --public-url ./",
+    "link": "npm link ../../"
+  },
+  "keywords": [
+    "infinite-ajax-scroll",
+    "infinite-scroll",
+    "infinite",
+    "endless",
+    "scroll",
+    "scrolling",
+    "ajax",
+    "pagination",
+    "ias",
+    "jquery-ias"
+  ],
+  "dependencies": {
+    "@webcreate/infinite-ajax-scroll": "^3.0.0-beta.4"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.12.4"
+  }
+}
diff --git a/examples/overflow/page1.html b/examples/overflow/page1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <title>Overflow Page 1</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="./style.css"/>
+</head>
+<body>
+
+<div class="container">
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+  <div class="item">4</div>
+  <div class="item">5</div>
+  <div class="item">6</div>
+  <div class="item">7</div>
+  <div class="item">8</div>
+  <div class="item">9</div>
+  <div class="item">10</div>
+
+  <div class="pager">
+    <a href="page2.html" class="pager__next">Next &rightarrow;</a>
+  </div>
+</div>
+
+</body>
diff --git a/examples/overflow/page2.html b/examples/overflow/page2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <title>Overflow Page 2</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="./style.css"/>
+</head>
+<body>
+
+<div class="container">
+  <div class="item">11</div>
+  <div class="item">12</div>
+  <div class="item">13</div>
+  <div class="item">14</div>
+  <div class="item">15</div>
+  <div class="item">16</div>
+  <div class="item">17</div>
+  <div class="item">18</div>
+  <div class="item">19</div>
+  <div class="item">20</div>
+
+  <div class="pager">
+    <a href="page3.html" class="pager__next">Next &rightarrow;</a>
+  </div>
+</div>
+
+</body>
diff --git a/examples/overflow/page3.html b/examples/overflow/page3.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <title>Overflow Page 3</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="./style.css"/>
+</head>
+<body>
+
+<div class="container">
+  <div class="item">21</div>
+  <div class="item">22</div>
+  <div class="item">23</div>
+  <div class="item">24</div>
+  <div class="item">25</div>
+  <div class="item">26</div>
+  <div class="item">27</div>
+  <div class="item">28</div>
+  <div class="item">29</div>
+  <div class="item">30</div>
+
+  <div class="pager"></div>
+</div>
+
+</body>
diff --git a/examples/overflow/style.css b/examples/overflow/style.css
@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.surface-container {
+  max-width: 1128px;
+  padding: 0 24px;
+  margin: 80px auto 0;
+}
+
+.overflow-container {
+  height: 60vh;
+  width: 100%;
+  overflow: auto;
+  border: solid 1px #dee2e6;
+  border-top: 0;
+}
+
+.item {
+  height: 80px;
+  margin: 16px;
+  padding: 16px;
+  border-radius: 4px;
+  background-color: #9370db;
+  color: #fff;
+}
+
+.pager {
+  text-align: center;
+}
+
+#overflow1 .item {
+  background-color: #9370db;
+}
+
+#overflow2 .item {
+  background-color: cornflowerblue;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,4 +28,4 @@ ias.on('last', function() { @@
     })
     ```
-    [View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)
+    [View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/articles/)