Skip to content

Commit f2c94bc

Browse files
kamilkpkamilkp
committedApr 19, 2016
temporarily include temp directory
1 parent 97ba498 commit f2c94bc

File tree

6 files changed

+179
-3
lines changed

6 files changed

+179
-3
lines changed
 

‎.gitignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
node_modules
2-
temp
1+
node_modules

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng2-vs-for",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"scripts": {
55
"tsc": "tsc",
66
"tsc:w": "tsc -w",

‎temp/boot.js

+50
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎temp/boot.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎temp/boot.ts

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
2+
3+
import {bootstrap} from 'angular2/platform/browser';
4+
import {Component} from 'angular2/core';
5+
import {VsFor} from '../src/ng2-vs-for.js';
6+
7+
@Component({
8+
selector: 'ng2-vs-for-test',
9+
directives: [VsFor],
10+
styles: [`
11+
.container {
12+
height: 300px;
13+
overflow-y: auto;
14+
background: wheat;
15+
}
16+
17+
.container.tall {
18+
height: 500px;
19+
background: lightgreen;
20+
}
21+
22+
@media (max-width: 500px) {
23+
/*.repeat-item {
24+
height: 50px !important;
25+
}*/
26+
}
27+
`],
28+
template: `
29+
<div class="container" [ngClass]="{tall: isTall}" *ngIf="shown">
30+
<div *vsFor="items; getSize:getItemSize; #_items = vsCollection; #_startIndex = vsStartIndex" vsScrollParent=".container">
31+
<div *ngFor="#item of _items" title="{{item.index}}" style="height: {{item.index % 2 ? '25px' : '50px'}}" class="repeat-item">
32+
{{ item.value }} {{ _startIndex }}
33+
</div>
34+
</div>
35+
</div>
36+
<button (click)="refresh()">
37+
refresh
38+
</button>
39+
<button (click)="clear()">
40+
clear
41+
</button>
42+
<button (click)="isTall = !isTall">
43+
toggle tall
44+
</button>
45+
<button (click)="shown = !shown">
46+
toggle shown
47+
</button>
48+
`
49+
// <table>
50+
// <tbody *vsFor="items; #_items = vsCollection" vsScrollParent=".container" vsTag="tr">
51+
// <tr *ngFor="#item of _items" title="{{item.index}}">
52+
// <td>{{ item.value }}</td>
53+
// </tr>
54+
// </tbody>
55+
// </table>
56+
})
57+
58+
class Boot {
59+
items = [];
60+
refresh() {
61+
this.items = [];
62+
let len = ~~(Math.random() * 100) + 5;
63+
let i = 0;
64+
while(len--) {
65+
this.items.push({value: Math.random(), index: i++});
66+
}
67+
const tic = Date.now();
68+
setTimeout(() => {
69+
console.info(Date.now() - tic);
70+
});
71+
}
72+
getItemSize(item) {
73+
return item.index % 2 ? 25 : 50;
74+
}
75+
clear() {
76+
this.items = [];
77+
}
78+
constructor() {
79+
// this.refresh();
80+
}
81+
}
82+
83+
bootstrap(Boot, []);

‎temp/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<html>
2+
3+
<head>
4+
<title>ng2-vs-for test</title>
5+
6+
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
7+
<script src="/node_modules/systemjs/dist/system.src.js"></script>
8+
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
9+
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
10+
11+
<script>
12+
System.import('boot.js').then(null, console.error.bind(console));
13+
</script>
14+
15+
<style type="text/css">
16+
::-webkit-scrollbar
17+
{
18+
width: 12px; /* for vertical scrollbars */
19+
height: 12px; /* for horizontal scrollbars */
20+
}
21+
22+
::-webkit-scrollbar-track
23+
{
24+
background: rgba(0, 0, 0, 0.1);
25+
}
26+
27+
::-webkit-scrollbar-thumb
28+
{
29+
background: rgba(0, 0, 0, 0.5);
30+
}
31+
</style>
32+
33+
</head>
34+
35+
<body>
36+
<ng2-vs-for-test>Loading...</ng2-vs-for-test>
37+
<div id="time"></div>
38+
<script type="text/javascript">
39+
document.getElementById('time').innerHTML = new Date();
40+
</script>
41+
</body>
42+
43+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.