Initial commit.

Adding files needed for Linux Foundation.

Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730
Issue-ID: SDC-1608
Signed-off-by: Israel Lavi <il0695@att.com>

1 files changed, 181 insertions, 0 deletions

diff --git a/stories/angular/infinite-scroll.stories.ts b/stories/angular/infinite-scroll.stories.ts
new file mode 100644
index 0000000..3a53a4f
--- /dev/null
+++ b/stories/angular/infinite-scroll.stories.ts
@@ -0,0 +1,181 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { InfiniteScrollDirective } from '../../src/angular/components';
+
+const basicStyle = `
+    .scroll-container {
+        margin: 12px;
+        border: none;
+        padding: 5px;
+        width: 200px;
+        height: 100px;
+        overflow: auto;
+        font-size: 20px !important;
+        box-shadow: #666 1px 1px 10px;
+    }
+    .example-source {
+        background: #eeeeee;
+        padding: 10px;
+        border: 1px solid #999999;
+    }
+    .example-source pre {
+        overflow: hidden;
+        background: #dddddd;
+        margin-top: 5px;
+        padding: 5px;
+        user-select: text;
+    }
+`;
+
+const makeBasicStyleDistance = (distance: number) => `
+    .scroll-container::after {
+        display: block;
+        content: '';
+        height: ${distance}px;
+        background: red;
+    }
+`;
+
+storiesOf('Infinite-Scroll', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        InfiniteScrollDirective
+      ],
+      imports: [
+      ]
+    })
+  )
+  .add('Simple', () => {
+    const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down');
+
+    return {
+        props: {
+            hitBottomCount: 0,
+            onScrollHitBottom: () => {
+                action('scroll hit bottom')();
+                this.hitBottomCount++;
+            },
+            numLines: Array(20).fill(null)
+        },
+        styles: [basicStyle],
+        template: `
+        <div (infiniteScroll)="onScrollHitBottom()" class="scroll-container">
+            <div *ngFor="let _i of numLines; let i=index">
+                Line {{i + 1}}
+            </div>
+        </div>
+        Hit bottom for <b>{{hitBottomCount}}</b> times!
+        `
+      }
+    },
+    { notes: `<h2>Infinite-Scroll</h2>
+            Simple infinite scroll, throws event when reach bottom (see in action logger).
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('With bottom distance', () => {
+    const _infiniteScrollDistance = number('infiniteScrollDistance', 20);
+    const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down');
+
+    return {
+        props: {
+            hitBottomCount: 0,
+            onScrollHitBottom: () => {
+                action('scroll hit bottom')();
+                this.hitBottomCount++;
+            },
+            numLines: Array(20).fill(null),
+            _infiniteScrollDistance
+        },
+        styles: [basicStyle, makeBasicStyleDistance(50)],
+        template: `
+        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container">
+            <div *ngFor="let _i of numLines; let i=index">
+                Line {{i + 1}}
+            </div>
+        </div>
+        Hit bottom for <b>{{hitBottomCount}}</b> times!
+        `
+      }
+    },
+    { notes: `<h2>Infinite-Scroll</h2>
+            Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger).
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('Expanding content synchrony', () => {
+    const _infiniteScrollDistance = number('infiniteScrollDistance', 20);
+    const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down');
+
+    return {
+        props: {
+            hitBottomCount: 0,
+            onScrollHitBottom: () => {
+                action('scroll hit bottom')();
+                this.hitBottomCount++;
+                this.insertPageImmediately(this.pageCount + 1);
+                this.pageCount++;
+            },
+            numLines: Array(20).fill(null),
+            _infiniteScrollDistance
+        },
+        styles: [basicStyle, makeBasicStyleDistance(50)],
+        template: `
+        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container">
+            <div *ngFor="let _i of numLines; let i=index">
+                Line {{i + 1}}
+            </div>
+        </div>
+        Hit bottom for <b>{{hitBottomCount}}</b> times!
+        `
+      }
+    },
+    { notes: `<h2>Infinite-Scroll</h2>
+            Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger).
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('Expanding content asynchrony', () => {
+    const _infiniteScrollDistance = number('infiniteScrollDistance', 20);
+    const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down');
+
+    return {
+        props: {
+            hitBottomCount: 0,
+            onScrollHitBottom: () => {
+                action('scroll hit bottom')();
+                this.hitBottomCount++;
+                if (!this.isPageLoading) {
+                    this.isPageLoading = true;
+                    this.loadPageAsync(this.pageCount + 1, 5000).then(() => {
+                        this.pageCount++;
+                        this.isPageLoading = false;
+                    });
+                }
+            },
+            numLines: Array(20).fill(null),
+            _infiniteScrollDistance
+        },
+        styles: [basicStyle, makeBasicStyleDistance(50)],
+        template: `
+        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container">
+            <div *ngFor="let _i of numLines; let i=index">
+                Line {{i + 1}}
+            </div>
+        </div>
+        Hit bottom for <b>{{hitBottomCount}}</b> times!<br/>
+        Loaded {{pageCount}} pages! <span *ngIf="isPageLoading">LOADING page #{{this.pageCount + 1}} ...</span>
+        `
+      }
+    },
+    { notes: `<h2>Infinite-Scroll</h2>
+            Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger).
+            Use the KNOBS tab to change values.`
+    }
+)