Skip to content
This repository has been archived by the owner on Oct 30, 2022. It is now read-only.

Commit

Permalink
Version 1.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
ArthurClemens committed Feb 4, 2017
1 parent fea04e8 commit b5ca2f8
Show file tree
Hide file tree
Showing 72 changed files with 1,338 additions and 1,420 deletions.
4 changes: 1 addition & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
node_modules
.DS_Store
tmp
tmp-npm

npm-debug.log
lerna-debug.log
8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
# Infinite Scroll for Mithril on mobile and desktop

Compatible with Mithril 0.2.
Compatible with Mithril 1.0.

* [Documentation](https://github.com/ArthurClemens/mithril-infinite/tree/master/packages/mithril-infinite)
* [Examples](https://github.com/ArthurClemens/mithril-infinite/tree/master/packages/examples)


## Older release

* [Infinite Scroll for Mithril 0.2](https://github.com/ArthurClemens/mithril-infinite/releases/tag/v0.6.2)


## Licence

MIT
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { infinite } from "./src/index";
export { infinite } from './src/index';
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"lerna": "2.0.0-beta.34",
"lerna": "2.0.0-beta.36",
"packages": [
"packages/*"
],
Expand Down
26 changes: 18 additions & 8 deletions packages/examples/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
[Infinite Scroll documentation](https://github.com/ArthurClemens/mithril-infinite/tree/master/packages/mithril-infinite)



# Infinite Scroll examples


Expand All @@ -10,6 +11,8 @@
[View Infinite Scroll examples](http://arthurclemens.github.io/mithril-infinite/index.html)




## Viewing locally

* `git clone https://github.com/ArthurClemens/mithril-infinite.git`
Expand All @@ -31,34 +34,41 @@
Demonstrates support for unequal content heights and dynamic resizing of content elements, including options `before` and `after`.



### 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).

With CSS, the blocks `mithril-infinite__content`, `mithril-infinite__padding-before` and `mithril-infinite__padding-after` need to be set to `inline-block`.



### 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.

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

Demonstrating a list of simple table like data. To prevent redrawing issues, instead of `<table>` tags, we use divs with table styling.



### Short content

Traditional approaches use a div at the bottom of the content; when it is scrolled into the viewport, new data is fetched. This example demonstrates that this can be done faster. Infinite calculates the remaining space and increases the `preloadPages` count.
Traditional approaches use a div at the bottom of the content; when it is scrolled into the viewport, new data is fetched. This example demonstrates that an alternative approach is much faster. Infinite calculates the remaining space and increases the `preloadPages` count.


### 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).

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 shows how to get the total page count from a request, and use that to calculate the total content height.

### 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 option `contentSize` together with `pageSize`.


### Paging
Expand Down
20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-1.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-10.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-11.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-12.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-13.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-14.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-15.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-16.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-17.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-18.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-19.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-2.json

This file was deleted.

20 changes: 0 additions & 20 deletions packages/examples/dist/data/fixed/page-20.json

This file was deleted.

Loading

0 comments on commit b5ca2f8

Please sign in to comment.