Skip to content

Commit 3003c40

Browse files
bvaughnbvaughn
committed
Tidied up playground files a bit
1 parent 22135ed commit 3003c40

11 files changed

+110
-87
lines changed

‎playground/chat.html

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<body>
3838
<div id="mount"></div>
3939

40+
<script src="utils.js"></script>
4041
<script src="helper.js"></script>
4142
<script>
4243
loadReact();

‎playground/grid-test.html

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
<div id="mount"></div>
1717

1818
<script src="https://npmcdn.com/fps-measurer/dist/umd/fps-measurer.js"></script>
19+
<script src="utils.js"></script>
20+
<script src="tests.js"></script>
1921
<script src="helper.js"></script>
2022
<script>
2123
loadReact();

‎playground/grid-test.js

+1-30
Original file line numberDiff line numberDiff line change
@@ -31,36 +31,7 @@ ReactDOM.render(
3131
document.querySelector('#mount')
3232
)
3333

34-
/** Tests a specific use case- scrolling a large FlexTable */
35-
function testCase (completedCallback) {
36-
const flexTable = document.querySelector('.Grid')
37-
flexTable.scrollTop = 0
38-
39-
const maxScrollTop = flexTable.scrollHeight
40-
41-
var interval = 1
42-
var scrollTop = 0
43-
44-
function incrementScrollTop () {
45-
if (!testRunner.isRunning()) {
46-
return
47-
}
48-
49-
interval *= 1.05
50-
scrollTop = Math.min(scrollTop + interval, maxScrollTop)
51-
52-
flexTable.scrollTop = scrollTop
53-
54-
if (scrollTop < maxScrollTop) {
55-
requestAnimationFrame(incrementScrollTop)
56-
} else {
57-
completedCallback()
58-
}
59-
}
60-
61-
incrementScrollTop()
62-
}
63-
34+
const testCase = createScrollingTestCase(document.querySelector('.Grid'))
6435
const TestRunner = FpsMeasurer.TestRunner
6536
const testRunner = new TestRunner(testCase, 5)
6637

‎playground/grid.html

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
<body>
4141
<div id="mount"></div>
4242

43+
<script src="utils.js"></script>
4344
<script src="helper.js"></script>
4445
<script>
4546
loadReact();

‎playground/helper.js

+25-27
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,48 @@
11
function loadStyle (source, callback) {
2-
var link = document.createElement('link');
3-
link.setAttribute('rel', 'stylesheet');
4-
link.setAttribute('href', source);
2+
var link = document.createElement('link')
3+
link.setAttribute('rel', 'stylesheet')
4+
link.setAttribute('href', source)
55
link.onload = callback
6-
document.head.appendChild(link);
6+
document.head.appendChild(link)
77
}
88

99
function loadScript (source) {
10-
var script = document.createElement('script');
11-
script.setAttribute('src', source);
12-
script.async = false;
13-
document.head.appendChild(script);
10+
var script = document.createElement('script')
11+
script.setAttribute('src', source)
12+
script.async = false
13+
document.head.appendChild(script)
1414
}
1515

1616
function loadScriptsAndStyles (source) {
17-
var matches = window.location.search.match('source=([^&]+)');
18-
var baseDir = 'https://npmcdn.com/react-virtualized/';
17+
var baseDir = 'https://npmcdn.com/react-virtualized/'
18+
var sourceParam = getUrlParam('source')
1919

20-
if (matches) {
21-
baseDir = matches[1] === 'local'
20+
if (sourceParam) {
21+
baseDir = sourceParam === 'local'
2222
? '../'
23-
: `https://npmcdn.com/react-virtualized@${matches[1]}/`
23+
: `https://npmcdn.com/react-virtualized@${sourceParam}/`
2424
}
2525

26-
27-
28-
var styleSource = baseDir + 'styles.css';
29-
var scriptSource = baseDir + 'dist/umd/react-virtualized.js';
30-
var appSource = source;
26+
var styleSource = baseDir + 'styles.css'
27+
var scriptSource = baseDir + 'dist/umd/react-virtualized.js'
28+
var appSource = source
3129

3230
loadStyle(styleSource, function() {
33-
loadScript(scriptSource);
34-
loadScript(appSource);
35-
});
31+
loadScript(scriptSource)
32+
loadScript(appSource)
33+
})
3634
}
3735

3836
function loadReact () {
39-
var matches = window.location.search.match('react=([^&]+)');
4037
var baseDir = 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0'
38+
var reactParam = getUrlParam('react')
4139

42-
if (matches) {
43-
baseDir = matches[1] === 'latest'
40+
if (reactParam) {
41+
baseDir = reactParam === 'latest'
4442
? 'http://react.zpao.com/builds/master/latest'
45-
: `https://cdnjs.cloudflare.com/ajax/libs/react/${matches[1]}`
43+
: `https://cdnjs.cloudflare.com/ajax/libs/react/${reactParam}`
4644
}
4745

48-
loadScript(`${baseDir}/react-with-addons.min.js`);
49-
loadScript(`${baseDir}/react-dom.min.js`);
46+
loadScript(`${baseDir}/react-with-addons.min.js`)
47+
loadScript(`${baseDir}/react-dom.min.js`)
5048
}

‎playground/hover.html

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<body>
3434
<div id="mount"></div>
3535

36+
<script src="utils.js"></script>
3637
<script src="helper.js"></script>
3738
<script>
3839
loadReact();

‎playground/table.html

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
<div id="mount"></div>
1717

1818
<script src="https://npmcdn.com/fps-measurer/dist/umd/fps-measurer.js"></script>
19+
<script src="utils.js"></script>
20+
<script src="tests.js"></script>
1921
<script src="helper.js"></script>
2022
<script>
2123
loadReact();

‎playground/table.js

+1-30
Original file line numberDiff line numberDiff line change
@@ -52,36 +52,7 @@ ReactDOM.render(
5252
document.querySelector('#mount')
5353
)
5454

55-
/** Tests a specific use case- scrolling a large FlexTable */
56-
function testCase (completedCallback) {
57-
const flexTable = document.querySelector('.FlexTable__Grid')
58-
flexTable.scrollTop = 0
59-
60-
const maxScrollTop = flexTable.scrollHeight
61-
62-
var interval = 1
63-
var scrollTop = 0
64-
65-
function incrementScrollTop () {
66-
if (!testRunner.isRunning()) {
67-
return
68-
}
69-
70-
interval *= 1.1
71-
scrollTop = Math.min(scrollTop + interval, maxScrollTop)
72-
73-
flexTable.scrollTop = scrollTop
74-
75-
if (scrollTop < maxScrollTop) {
76-
requestAnimationFrame(incrementScrollTop)
77-
} else {
78-
completedCallback()
79-
}
80-
}
81-
82-
incrementScrollTop()
83-
}
84-
55+
const testCase = createScrollingTestCase(document.querySelector('.Grid'))
8556
const TestRunner = FpsMeasurer.TestRunner
8657
const testRunner = new TestRunner(testCase, 5)
8758

‎playground/tests.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
function createScrollingTestCase (component) {
2+
var scrollDown = getUrlParam('direction') !== 'up'
3+
4+
return function testCase (completedCallback) {
5+
component.scrollTop = scrollDown
6+
? 0
7+
: component.scrollHeight
8+
9+
var maxScrollTop = component.scrollHeight
10+
11+
var interval = 1
12+
var scrollTop = component.scrollTop
13+
14+
function incrementScrollDown () {
15+
if (!testRunner.isRunning()) {
16+
return
17+
}
18+
19+
interval *= 1.05
20+
scrollTop = Math.min(scrollTop + interval, maxScrollTop)
21+
22+
component.scrollTop = scrollTop
23+
24+
if (scrollTop < maxScrollTop) {
25+
requestAnimationFrame(incrementScrollDown)
26+
} else {
27+
completedCallback()
28+
}
29+
}
30+
31+
function incrementScrollUp () {
32+
if (!testRunner.isRunning()) {
33+
return
34+
}
35+
36+
interval *= 1.05
37+
scrollTop = Math.max(scrollTop - interval, 0)
38+
39+
component.scrollTop = scrollTop
40+
41+
if (scrollTop > 0) {
42+
requestAnimationFrame(incrementScrollUp)
43+
} else {
44+
completedCallback()
45+
}
46+
}
47+
48+
if (scrollDown) {
49+
incrementScrollDown()
50+
} else {
51+
incrementScrollUp()
52+
}
53+
}
54+
}

‎playground/tree.html

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<body>
3434
<div id="mount"></div>
3535

36+
<script src="utils.js"></script>
3637
<script src="helper.js"></script>
3738
<script>
3839
loadReact();

‎playground/utils.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
function getUrlParams () {
2+
var search = window.location.search
3+
4+
return search.length
5+
? search
6+
.substr(1)
7+
.split('&')
8+
.reduce(
9+
function(reduced, value) {
10+
var matches = value.split('=')
11+
reduced[matches[0]] = matches[1]
12+
return reduced
13+
},
14+
{}
15+
)
16+
: {}
17+
}
18+
19+
function getUrlParam (key) {
20+
return getUrlParams()[key]
21+
}

0 commit comments

Comments
 (0)