-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
297 lines (274 loc) · 11.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE HTML>
<!--
Copyright (C) 2012 Adobe Systems, Incorporated. All rights reserved.
The contents of this package are subject to various licenses.
You will find the license information either directly in the files
or the directory will contain the appropriate license for the components of that
directory.
Unless otherwise noted, code and content is licensed under a <a rel="license"
href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution
3.0 Unported License</a>.
-->
<html>
<head>
<title>CSS Regions — Road Trip Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<p class="hidden-error">
<strong>Warning:</strong>
You need to use a
<a href="http://nightly.webkit.org/" target="_blank">WebKit nightly</a>
browser build to see this example working correctly.
</p>
<div id="viewport">
<div>
<div class="page" style="display:block">
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
</div>
</div>
</div>
<div id="content">
<h1>
<span>Into</span>
<span>The</span>
<span>Great</span>
<span>Wide</span>
<span>Open</span>
</h1>
<p>
The first successful North American transcontinental trip by
automobile took place in 1903, and was piloted by H. Nelson Jackson
and Sewall K. Crocker, accompanied by a canine named Bud.
The trip was completed using a 1903 Winton Touring Car,
dubbed “Vermont” by Jackson. The trip took
a total of 63 days between San Francisco and New York, and
cost US$8,000. The total cost included items such as food,
gasoline, lodging, tires, parts, other supplies, and the cost
of the Winton.
</p>
<p>
The first woman to cross the American landscape by car
was Alice Ramsey with three female passengers in 1909. Ramsey left
from Hell’s Gate in Manhattan, New York and traveled 59 days
to San Francisco, California. Ramsey was followed in 1910 by
Blanche Stuart Scott, who is often mistakenly cited as
the first woman to make the cross-country journey by
automobile East-to-West (but was a true pioneer in aviation).
</p>
<blockquote>
…on the lost art of the great American road trip
</blockquote>
<p>
New highways in the early 1900s helped propel automobile
travel in the United States, primarily cross-country travel.
Commissioned in 1926, and completely paved near the end of
the 1930s, Route 66 is a living icon of early modern
road tripping.
</p>
<p>
Motorists ventured cross-country for holiday as well as migrating
to California and other locations. The modern American road
trip began to take shape in the late 1930s and into
the 1940s, ushering in an era of a nation on
the move.
</p>
<p>
As a result of this new vacation-by-road style, many
businesses began to cater to road-weary travelers. More reliable
vehicles and services made long distance road trips easier for
families, as the length of time required to cross
the continent was reduced from months to days. Within one
week, the average family can travel to destinations across
North America.
</p>
<p>
The greatest change to the American road trip was
the start, and subsequent expansion, of the Interstate
Highway System. The higher speeds and controlled access nature
of the Interstate allowed for greater distances to be traveled
in less time and with improved safety as highways became divided.
</p>
<p>
So many people connected with our trip in so many ways and we have
been an inspiration to many to hit the road or follow
their dreams. Some of those we inspired were inspired to beat our
record and accomplished just that. The trip was great,
the sense of accomplishment was wonderful but knowing we might
have made a difference in someone’s day, let alone life,
is better than any record.
</p>
<p>
Travelers from European countries, Australia and elsewhere soon
came to the US to take part in the American idea of
a road trip.
</p>
<blockquote>
“To anyone we inspired, thank you!”
</blockquote>
</div>
<div id="license">
Text from <a href="http://en.wikipedia.org/wiki/Road_trip">Road Trip</a>
on Wikipedia. <a
href="http://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License">License</a>
</div>
<script src="thirdparty/js/swipe/swipe.min.js"></script>
<script src="http://use.typekit.com/yyf0ttn.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script>
(function () {
/* basic feature detection */
var CSSRegions = (function () {
return {
isSupported: (function () {
var el = document.body;
if (el) {
var style = window.getComputedStyle(el, null);
if (style) {
// intentional bias towards -webkit because the
// prototype uses code under prefixed notation that is
// still being debated in the W3C
return "-webkit-flow-into" in style;
}
}
return false;
}()),
hasOversetProperty: (function () {
if (!("webkitGetNamedFlows" in document)) {
return false;
}
var head = document.getElementsByTagName("head")[0],
hasOverset,
flow;
head.style["-webkit-flow-into"] = "testflow";
flow = document.webkitGetNamedFlows().namedItem("testflow");
// older implementations used to have overflow not overset
hasOverset = "overset" in flow;
// cleanup
head.style["-webkit-flow-into"] = "none";
return hasOverset;
}())
};
}());
var swipe,
currSlide = 0,
viewport = document.querySelector("#viewport"),
conf = {
flow: "article",
pageSelector: ".page",
regionSelector: ".region"
},
debounce = function (f) {
var timer;
return function () {
clearTimeout(timer);
timer = setTimeout(function () {
timer = null;
f();
}, 50);
};
},
doLayout = debounce(function () {
var flow = getNamedFlow(conf.flow),
pages = getAllPages(),
page = pages.pop();
if (flow.overset) {
// duplicate the DOM nodes of the last page
page = page.parentNode.appendChild(page.cloneNode(true));
} else {
var counter = 0,
regions = page.querySelectorAll(conf.regionSelector);
for (var i = 0; i < regions.length; i++) {
// increment counter if the region is empty
counter += +isRegionEmpty(regions[i]);
}
// if all regions on the last page are empty, remove the page
if (counter == regions.length) {
page.parentNode.removeChild(page);
}
}
setSwipe();
});
function setSwipe(startSlide) {
var pages = getAllPages(),
options = {
// make sure to render with actual page length range
startSlide: Math.min(currSlide, pages.length),
// transition speed between slides
speed: 300,
// update currently visible page
callback: function () {
currSlide = swipe.getPos();
}
},
el;
if (swipe) {
el = swipe.element;
el.removeEventListener("webkitTransitionEnd", swipe, false);
el.removeEventListener("msTransitionEnd", swipe, false);
el.removeEventListener("oTransitionEnd", swipe, false);
el.removeEventListener("transitionend", swipe, false);
window.removeEventListener("resize", swipe, false);
window.removeEventListener("touchstart", swipe, false);
window.removeEventListener("touchmove", swipe, false);
window.removeEventListener("touchend", swipe, false);
window.removeEventListener("touchcancel", swipe, false);
}
swipe = new Swipe(viewport, options);
el = swipe.element;
el.removeEventListener("touchstart", swipe, false);
el.removeEventListener("touchmove", swipe, false);
el.removeEventListener("touchend", swipe, false);
el.removeEventListener("touchcancel", swipe, false);
window.addEventListener("touchstart", swipe, false);
window.addEventListener("touchmove", swipe, false);
window.addEventListener("touchend", swipe, false);
window.addEventListener("touchcancel", swipe, false);
}
function getNamedFlow(flowName) {
return document.webkitGetNamedFlows().namedItem(flowName);
}
function getAllPages() {
var pages = document.querySelectorAll(conf.pageSelector);
return Array.prototype.slice.call(pages);
}
function isRegionEmpty(region) {
return region && !region.webkitGetRegionFlowRanges().length;
}
function setup() {
// Check CSS regions support and warn the user if the browser isn't
// supported
if (!CSSRegions.isSupported || !CSSRegions.hasOversetProperty) {
document.querySelectorAll(".hidden-error")[0].className = "error";
// bail out
return;
}
document.addEventListener("keydown", function (e) {
switch (e.keyCode) {
// right arrowkey
case 39:
// do not loop to the first page
if (swipe.getPos() < getAllPages().length - 1) {
swipe.next();
}
break;
// left arrowkey
case 37:
swipe.prev();
break;
}
});
window.addEventListener("resize", doLayout);
document.addEventListener("DOMSubtreeModified", doLayout);
doLayout();
}
document.addEventListener("DOMContentLoaded", setup);
}());
</script>
</body>
</html>