Skip to content

Commit

Permalink
#572 for DataScroller
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Jul 21, 2016
1 parent c60b55e commit 0b60a71
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 176 deletions.
8 changes: 6 additions & 2 deletions components/datascroller/datascroller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {Component,ElementRef,AfterViewInit,OnDestroy,DoCheck,Input,Output,Render
import {Header} from '../common';
import {Footer} from '../common';
import {DomHandler} from '../dom/domhandler';
import {TemplateWrapper} from '../common';

@Component({
selector: 'p-dataScroller',
Expand All @@ -12,15 +13,18 @@ import {DomHandler} from '../dom/domhandler';
</div>
<div class="ui-datascroller-content ui-widget-content" [ngStyle]="{'max-height': scrollHeight}">
<ul class="ui-datascroller-list">
<template ngFor [ngForOf]="dataToRender" [ngForTemplate]="itemTemplate"></template>
<li *ngFor="let item of dataToRender">
<template [pTemplateWrapper]="itemTemplate" [item]="item"></template>
</li>
</ul>
</div>
<div class="ui-datascroller-footer ui-widget-header ui-corner-bottom" *ngIf="footer">
<ng-content select="footer"></ng-content>
</div>
</div>
`,
providers: [DomHandler]
providers: [DomHandler],
directives: [TemplateWrapper]
})
export class DataScroller implements AfterViewInit,DoCheck,OnDestroy {

Expand Down
67 changes: 31 additions & 36 deletions showcase/demo/datascroller/datascrollerdemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,12 @@ <h3>Import</h3>
</pre>

<h3>Getting Started</h3>
<p>DataScroller requires a collection of items as its value, number of rows to load and a template to display each item. Template should contain a li element as a wrapper. </p><p>Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the datascroller. Cars are loaded by a CarService that connects to a server to fetch the cars with a Promise.</p>
<p>DataScroller requires a collection of items as its value, number of rows to load and a template content to display
where each item can be accessed using the implicit variable.</p>

<p>Throughout the samples, a car interface having vin, brand, year and color properties are used
to define an object to be displayed by the datascroller. Cars are loaded by a CarService that
connects to a server to fetch the cars with a Promise.</p>
<pre>
<code class="language-typescript" pCode>
export interface Car {
Expand Down Expand Up @@ -132,9 +137,7 @@ <h3>Getting Started</h3>
<code class="language-markup" pCode>
&lt;p-dataScroller [value]="cars" [rows]="10"&gt;
&lt;template let-car&gt;
&lt;li&gt;
Car content
&lt;/li&gt;
Car content
&lt;/template&gt;
&lt;/p-dataScroller&gt;
</code>
Expand All @@ -154,9 +157,7 @@ <h3>Facets</h3>
&lt;header&gt;List of Cars&lt;/header&gt;
&lt;footer&gt;Choose from the list.&lt;/footer&gt;
&lt;template let-car&gt;
&lt;li&gt;
Car content
&lt;/li&gt;
Car content
&lt;/template&gt;
&lt;/p-dataScroller&gt;
</code>
Expand All @@ -168,9 +169,7 @@ <h3>Inline</h3>
<code class="language-markup" pCode>
&lt;p-dataScroller [value]="cars" [inline]="true" [rows]="10"&gt;
&lt;template let-car&gt;
&lt;li&gt;
Car content
&lt;/li&gt;
Car content
&lt;/template&gt;
&lt;/p-dataScroller&gt;
</code>
Expand All @@ -185,9 +184,7 @@ <h3>Lazy Loading</h3>
<code class="language-markup" pCode>
&lt;p-dataScroller [value]="cars" [rows]="10" [lazy]="true" (onLazyLoad)="loadData($event)"&gt;
&lt;template let-car&gt;
&lt;li&gt;
Car content
&lt;/li&gt;
Car content
&lt;/template&gt;
&lt;/p-dataScroller&gt;
</code>
Expand Down Expand Up @@ -329,33 +326,31 @@ <h3>Dependencies</h3>
Scroll Down to to Load More
&lt;/header&gt;
&lt;template let-car&gt;
&lt;li style="border-bottom:1px solid #D5D5D5;"&gt;
&lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px"&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
&lt;div class="ui-grid-col-9"&gt;
&lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;"&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
&lt;div class="ui-grid-col-9"&gt;
&lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/p-dataScroller&gt;

Expand Down
88 changes: 42 additions & 46 deletions showcase/demo/datascroller/datascrollerinfinitedemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,33 +51,31 @@
Scroll Down to to Load More
&lt;/header&gt;
&lt;template let-car&gt;
&lt;li style="border-bottom:1px solid #D5D5D5;"&gt;
&lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px"&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
&lt;div class="ui-grid-col-9"&gt;
&lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5"&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
&lt;div class="ui-grid-col-9"&gt;
&lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-grid-row"&gt;
&lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
&lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/p-dataScroller&gt;
</code>
Expand All @@ -94,33 +92,31 @@
Scroll Down to to Load More
</header>
<template let-car>
<li style="border-bottom:1px solid #D5D5D5;">
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-3" style="text-align:center"><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-fluid">
<div class="ui-grid-row">
<div class="ui-grid-col-2">Vin: </div>
<div class="ui-grid-col-10">{{car.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Year: </div>
<div class="ui-grid-col-10">{{car.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Brand: </div>
<div class="ui-grid-col-10">{{car.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Color: </div>
<div class="ui-grid-col-10">{{car.color}}</div>
</div>
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5">
<div class="ui-grid-row">
<div class="ui-grid-col-3" style="text-align:center"><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-fluid">
<div class="ui-grid-row">
<div class="ui-grid-col-2">Vin: </div>
<div class="ui-grid-col-10">{{car.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Year: </div>
<div class="ui-grid-col-10">{{car.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Brand: </div>
<div class="ui-grid-col-10">{{car.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Color: </div>
<div class="ui-grid-col-10">{{car.color}}</div>
</div>
</div>
</div>
</div>
</li>
</div>
</template>
</p-dataScroller>
</div>
Loading

0 comments on commit 0b60a71

Please sign in to comment.