Update documentation

README.md

@@ -1,6 +1,6 @@
 # Infinite Scroll for Mithril on mobile and desktop
 
-Compatible with Mithril 0.2.5.
+Compatible with Mithril 0.2.
 
 * [Documentation](https://github.com/ArthurClemens/mithril-infinite/tree/master/packages/mithril-infinite)
 * [Examples](https://github.com/ArthurClemens/mithril-infinite/tree/master/packages/examples)

package.json

@@ -14,10 +14,10 @@
     "babel-preset-es2015-rollup": "^3.0.0",
     "babel-register": "^6.22.0",
     "del": "^2.2.2",
-    "eslint": "^3.14.1",
+    "eslint": "^3.15.0",
     "eslint-config-airbnb-base": "^11.0.1",
     "eslint-plugin-import": "^2.2.0",
-    "lerna": "2.0.0-beta.34",
+    "lerna": "2.0.0-beta.36",
     "rollup": "^0.41.4",
     "rollup-plugin-babel": "^2.7.1",
     "rollup-plugin-buble": "^0.15.0",

packages/examples/README.md

@@ -1,33 +1,41 @@
+[Infinite Scroll documentation](https://github.com/ArthurClemens/mithril-infinite/tree/master/packages/mithril-infinite)
 
-# Infinite Scroll for Mithril - Examples
 
+# Infinite Scroll examples
 
-* [Infinite Scroll documentation](https://github.com/ArthurClemens/mithril-infinite/tree/master/packages/mithril-infinite)
 
 
 ## Online examples
 
-* [Infinite Scroll Examples](http://arthurclemens.github.io/mithril-infinite/index.html)
-* [Example with header panel (Polythene)](http://arthurclemens.github.io/Polythene-examples/index.html#/header-panel/infinite)
+[View Infinite Scroll examples](http://arthurclemens.github.io/mithril-infinite/index.html)
 
 
+## Viewing locally
 
-## About the examples
+* `git clone https://github.com/ArthurClemens/mithril-infinite.git`
+* `cd mithril-infinite`
+* `npm install -g lerna`
+* `npm install`
+* `lerna init`
+* `lerna bootstrap`
+* `cd packages/examples`
+* `npm run watch`
+* Open browser at [localhost:8080](http://localhost:8080/)
 
-### Images
 
-Demonstrates an endless list of images with irregular heights that can each be further expanded.
 
-On a regular laptop/desktop screen, not more than 3 page elements (out of 20) exist at a time.
+## About the examples
+
+### Images
 
-This demo shows the parameters `before` and `after`.
+Demonstrates support for unequal content heights and dynamic resizing of content elements, including options `before` and `after`.
 
 
 ### Grid
 
-A grid of `inline-block` items. A naive approach would be to use the principle of the image list. But scrolled up pages are removed including all of its elements. This would easily lead to gaps in the row, causing all kinds of jumping around of the remaining images.
+A grid of `inline-block` items. A naive approach would be to use the principle of the image list, but scrolled up pages are removed including all of its elements. This would easily lead to gaps in the row, causing all kinds of jumping around of the remaining images.
 
-The trick here is to load page data with 12 images at a time, and laying out the grid as 2, 3, 4 or 6 columns. This way pages are always displayed (and removed) as complete rows.
+The trick here is to get neat blocks as "pages" by loading page data with 12 images at a time, and laying them out on a grid of 2, 3, 4 or 6 columns. This way pages are always displayed (and removed) as complete rows.
 
 
 ### Table
@@ -42,31 +50,21 @@ Traditional approaches use a div at the bottom of the content; when it is scroll
 
 ### Horizontal
 
-This is a bit more tricky because the horizontal width needs to be set ("auto" or "100%"" doesn"t work).
-In the demo we use `pageSize` that returns the item width * item count, making sure we have a default width in case the count is 0 (which happens when no data has been received yet).
+This is a bit more tricky because the horizontal width needs to be set ("auto" or "100%" doesn't work).
+In the demo we use `pageSize` that returns the `item width * item count`, making sure we have a default width in case the count is 0 (which happens when no data has been received yet).
 
-With CSS, the blocks "mithril-infinite__content", "mithril-infinite__padding-before" and "mithril-infinite__padding-after" need to be set to `inline-block`.
+With CSS, the blocks `mithril-infinite__content`, `mithril-infinite__padding-before` and `mithril-infinite__padding-after` need to be set to `inline-block`.
 
 
 ### Fixed
 
-Sometimes it is useful to present the user predictable scrollbar behavior: scrolling the scroll knob all the way down leads to the last content page. This is only possible when you know the size of the content (calculated by the number of pages times the height of each page). This example demonstrates the use of the param `contentSize` together with `pageSize`.
+Sometimes it is useful to present the user predictable scrollbar behavior: scrolling the scroll knob all the way down leads to the last content page. This is only possible when you know the size of the content (calculated by the number of pages times the height of each page). This example demonstrates the use of the option `contentSize` together with `pageSize`.
 
 
 ### Paging
 
-Demonstrates how to set up pagination with Next / Previous buttons.
-
-
-
-## Running the examples locally
+Demonstrates how to set up pagination with Previous / Next buttons.
 
-From the project root:
 
-* `npm install`
-* `lerna bootstrap`
-* `cd packages/examples`
-* `npm run watch`
-* Open browser at http://localhost:8080/
 
 

packages/mithril-infinite/README.md

@@ -1,11 +1,10 @@
 # Infinite Scroll for Mithril on mobile and desktop
 
-Compatible with Mithril 0.2.5.
+Compatible with Mithril 0.2.
 
 ## Examples
 
-* [Infinite Scroll Examples](http://arthurclemens.github.io/mithril-infinite/index.html)
-* [Example with header panel (Polythene)](http://arthurclemens.github.io/Polythene-examples/index.html#/header-panel/infinite)
+[Infinite Scroll Examples](http://arthurclemens.github.io/mithril-infinite/index.html)
 
 
 ## Features
@@ -33,7 +32,7 @@ Not included:
 Use as npm module:
 
 ~~~bash
-npm install mithril-infinite
+npm install --save mithril-infinite
 ~~~
 
 or download/clone from Github, `packages/mithril-infinite`.
@@ -242,22 +241,6 @@ Using `<table>` tags causes reflow problems. Use divs instead, with CSS styling
 }
 ~~~
 
-### Generated HTML
-
-~~~html
-<div class="mithril-infinite__scroll-view mithril-infinite__scroll-view--y">
-    <div class="mithril-infinite__scroll-content">
-        <div style="height: 0px;"></div> <!-- padding before -->
-        <div class="mithril-infinite__content">
-            <div data-page="000001" class="mithril-infinite__page mithril-infinite__page--odd" style="height: auto;">
-                <!-- list items -->
-            </div>
-        </div>
-        <div style="height: 0px;"></div> <!-- padding after -->
-    </div>
-</div>
-~~~
-
 
 
 ## Styling
@@ -293,12 +276,39 @@ Or:
 
 
 
-## Future improvements
+## Viewing the examples
 
-* Store current "page" in url so the location can be bookmarked.
-* Smarter handling of "no data found" (works fine if maxPages is set, otherwise gives 404 in console).
-* Optimize page load order, for example de-prioritize loading of the previous page.
-* `after` content does not work well with "loadable space" (example "short content").
+* `git clone https://github.com/ArthurClemens/mithril-infinite.git`
+* `cd mithril-infinite`
+* `npm install -g lerna`
+* `npm install`
+* `lerna init`
+* `lerna bootstrap`
+* `cd packages/examples`
+* `npm run watch`
+* Open browser at [localhost:8080](http://localhost:8080/)
+
+
+
+## CSS classes
+
+| **Element**           | **Key**       |  **Class** |
+| --------------------- | ------------- | --------------- |
+| Scroll view           | scrollView    | `mithril-infinite__scroll-view` |
+| Scroll content        | scrollContent | `mithril-infinite__scroll-content` |
+| Content container     | content       | `mithril-infinite__content` |
+| Pages container       | pages         | `mithril-infinite__pages` |
+| Page                  | page          | `mithril-infinite__page` |
+| Content before        | before        | `mithril-infinite__before` |
+| Content after         | after         | `mithril-infinite__after` |
+
+| **State**             | **Key**     |  **Class** |
+| --------------------- | ----------- | --------------- |
+| Scroll view, x axis   | scrollViewX | `mithril-infinite__scroll-view--x` |
+| Scroll view, y axis   | scrollViewY | `mithril-infinite__scroll-view--y` |
+| Even numbered page    | pageEven    | `mithril-infinite__page--even` |
+| Odd numbered page     | pageOdd     | `mithril-infinite__page--odd` |
+| Page, now placeholder | placeholder | `mithril-infinite__page--placeholder` |
 
 
 
@@ -310,14 +320,17 @@ Minified and gzipped: ~ 5.5 Kb
 
 ## Dependencies
 
-Included in mithril-infinite.js:
-
 * [Verge](https://www.npmjs.com/package/verge) - for measuring the viewport
 * [j2c](https://github.com/pygy/j2c) - for creating js stylesheets
+* [Mithril](https://www.npmjs.com/package/mithril)
 
-External dependency
 
-* [Mithril](https://www.npmjs.com/package/mithril)
+
+## Future improvements
+
+* Smarter handling of "no data found" (works fine if maxPages is set, otherwise gives 404 in console).
+* Optimize page load order, for example de-prioritize loading of the previous page.
+
 
 
 ## Licence

packages/mithril-infinite/package.json

@@ -2,7 +2,7 @@
   "name": "mithril-infinite",
   "main": "dist/mithril-infinite.js",
   "module": "dist/mithril-infinite.mjs",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Infinite Scroll for Mithril",
   "scripts": {
     "build": "DEPS=false ../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.umd.js && ../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.es.js"