Implemented URL query parsing for initial token /opa/?token=abcde
[src/app-framework-demo.git] / afb-client / bower_components / tether / examples / element-scroll / index.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4       <link rel="stylesheet" href="../resources/css/base.css" />
5     </head>
6     <body>
7
8     <div class="scroll">
9       <p>For a long time after the course of the steamer <em>Sofala</em> had been
10       altered for the land, the low swampy coast had retained its appearance
11       of a mere smudge of darkness beyond a belt of glitter. The sunrays
12       seemed to fall violently upon the calm sea--seemed to shatter themselves
13       upon an adamantine surface into sparkling dust, into a dazzling vapor
14       of light that blinded the eye and wearied the brain with its unsteady
15       brightness.</p>
16
17       <p>Captain Whalley did not look at it. When his Serang, approaching the
18       roomy cane arm-chair which he filled capably, had informed him in a low
19       voice that the course was to be altered, he had risen at once and had
20       remained on his feet, face forward, while the head of his ship swung
21       through a quarter of a circle. He had not uttered a single word, not
22       even the word to steady the helm. It was the Serang, an elderly, alert,
23       little Malay, with a very dark skin, who murmured the order to the
24       helmsman. And then slowly Captain Whalley sat down again in the
25       arm-chair on the bridge and fixed his eyes on the deck between his feet.</p>
26
27       <p>He could not hope to see anything new upon this lane of the sea. He had
28       been on these coasts for the last three years. From Low Cape to Malantan
29       the distance was fifty miles, six hours' steaming for the old ship with
30       the tide, or seven against. Then you steered straight for the land, and
31       by-and-by three palms would appear on the sky, tall and slim, and with
32       their disheveled heads in a bunch, as if in confidential criticism of
33       the dark mangroves. The Sofala would be headed towards the somber
34       strip of the coast, which at a given moment, as the ship closed with
35       it obliquely, would show several clean shining fractures--the brimful
36       estuary of a river. Then on through a brown liquid, three parts water
37       and one part black earth, on and on between the low shores, three parts
38       black earth and one part brackish water, the Sofala would plow her way
39       up-stream, as she had done once every month for these seven years or
40       more, long before he was aware of her existence, long before he had ever
41       thought of having anything to do with her and her invariable voyages.
42       The old ship ought to have known the road better than her men, who had
43       not been kept so long at it without a change; better than the faithful
44       Serang, whom he had brought over from his last ship to keep the
45       captain's watch; better than he himself, who had been her captain for
46       the last three years only. She could always be depended upon to make her
47       courses. Her compasses were never out. She was no trouble at all to
48       take about, as if her great age had given her knowledge, wisdom, and
49       steadiness. She made her landfalls to a degree of the bearing, and
50       almost to a minute of her allowed time. At any moment, as he sat on
51       the bridge without looking up, or lay sleepless in his bed, simply by
52       reckoning the days and the hours he could tell where he was--the precise
53       spot of the beat. He knew it well too, this monotonous huckster's
54       round, up and down the Straits; he knew its order and its sights and its
55       people. Malacca to begin with, in at daylight and out at dusk, to cross
56       over with a rigid phosphorescent wake this highway of the Far East.
57       Darkness and gleams on the water, clear stars on a black sky, perhaps
58       the lights of a home steamer keeping her unswerving course in the
59       middle, or maybe the elusive shadow of a native craft with her mat sails
60       flitting by silently--and the low land on the other side in sight
61       at daylight. At noon the three palms of the next place of call, up a
62       sluggish river. The only white man residing there was a retired young
63       sailor, with whom he had become friendly in the course of many voyages.
64       Sixty miles farther on there was another place of call, a deep bay with
65       only a couple of houses on the beach. And so on, in and out, picking
66       up coastwise cargo here and there, and finishing with a hundred miles'
67       steady steaming through the maze of an archipelago of small islands up
68       to a large native town at the end of the beat. There was a three days'
69       rest for the old ship before he started her again in inverse order,
70       seeing the same shores from another bearing, hearing the same voices
71       in the same places, back again to the Sofala's port of registry on
72       the great highway to the East, where he would take up a berth nearly
73       opposite the big stone pile of the harbor office till it was time to
74       start again on the old round of 1600 miles and thirty days. Not a very
75       enterprising life, this, for Captain Whalley, Henry Whalley, otherwise
76       Dare-devil Harry--Whalley of the Condor, a famous clipper in her day.
77       No. Not a very enterprising life for a man who had served famous firms,
78       who had sailed famous ships (more than one or two of them his own); who
79       had made famous passages, had been the pioneer of new routes and new
80       trades; who had steered across the unsurveyed tracts of the South Seas,
81       and had seen the sun rise on uncharted islands. Fifty years at sea, and
82       forty out in the East ("a pretty thorough apprenticeship," he used
83       to remark smilingly), had made him honorably known to a generation of
84       shipowners and merchants in all the ports from Bombay clear over to
85       where the East merges into the West upon the coast of the two Americas.
86       His fame remained writ, not very large but plain enough, on the
87       Admiralty charts. Was there not somewhere between Australia and China a
88       Whalley Island and a Condor Reef? On that dangerous coral formation the
89       celebrated clipper had hung stranded for three days, her captain and
90       crew throwing her cargo overboard with one hand and with the other, as
91       it were, keeping off her a flotilla of savage war-canoes. At that time
92       neither the island nor the reef had any official existence. Later the
93       officers of her Majesty's steam vessel Fusilier, dispatched to make a
94       survey of the route, recognized in the adoption of these two names the
95       enterprise of the man and the solidity of the ship. Besides, as anyone
96       who cares may see, the "General Directory," vol. ii. p. 410, begins the
97       description of the "Malotu or Whalley Passage" with the words: "This
98       advantageous route, first discovered in 1850 by Captain Whalley in the
99       ship Condor," &amp;c., and ends by recommending it warmly to sailing vessels
100       leaving the China ports for the south in the months from December to
101       April inclusive.</p>
102
103       <p>This was the clearest gain he had out of life. Nothing could rob him
104       of this kind of fame. The piercing of the Isthmus of Suez, like the
105       breaking of a dam, had let in upon the East a flood of new ships, new
106       men, new methods of trade. It had changed the face of the Eastern seas
107       and the very spirit of their life; so that his early experiences meant
108       nothing whatever to the new generation of seamen.</p>
109
110       <p>In those bygone days he had handled many thousands of pounds of his
111       employers' money and of his own; he had attended faithfully, as by law
112       a shipmaster is expected to do, to the conflicting interests of owners,
113       charterers, and underwriters. He had never lost a ship or consented to
114       a shady transaction; and he had lasted well, outlasting in the end the
115       conditions that had gone to the making of his name. He had buried his
116       wife (in the Gulf of Petchili), had married off his daughter to the man
117       of her unlucky choice, and had lost more than an ample competence in the
118       crash of the notorious Travancore and Deccan Banking Corporation, whose
119       downfall had shaken the East like an earthquake. And he was sixty-five
120       years old.</p>
121
122       <p>His age sat lightly enough on him; and of his ruin he was not ashamed.
123       He had not been alone to believe in the stability of the Banking
124       Corporation. Men whose judgment in matters of finance was as expert as
125       his seamanship had commended the prudence of his investments, and had
126       themselves lost much money in the great failure. The only difference
127       between him and them was that he had lost his all. And yet not his all.
128       There had remained to him from his lost fortune a very pretty little
129       bark, Fair Maid, which he had bought to occupy his leisure of a retired
130       sailor--"to play with," as he expressed it himself.</p>
131
132       <p>He had formally declared himself tired of the sea the year preceding his
133       daughter's marriage. But after the young couple had gone to settle in
134       Melbourne he found out that he could not make himself happy on shore. He
135       was too much of a merchant sea-captain for mere yachting to satisfy him.
136       He wanted the illusion of affairs; and his acquisition of the Fair
137       Maid preserved the continuity of his life. He introduced her to his
138       acquaintances in various ports as "my last command." When he grew too
139       old to be trusted with a ship, he would lay her up and go ashore to be
140       buried, leaving directions in his will to have the bark towed out and
141       scuttled decently in deep water on the day of the funeral. His daughter
142       would not grudge him the satisfaction of knowing that no stranger would
143       handle his last command after him. With the fortune he was able to leave
144       her, the value of a 500-ton bark was neither here nor there. All this
145       would be said with a jocular twinkle in his eye: the vigorous old man
146       had too much vitality for the sentimentalism of regret; and a little
147       wistfully withal, because he was at home in life, taking a genuine
148       pleasure in its feelings and its possessions; in the dignity of his
149       reputation and his wealth, in his love for his daughter, and in his
150       satisfaction with the ship--the plaything of his lonely leisure.</p>
151
152       <p>He had the cabin arranged in accordance with his simple ideal of comfort
153       at sea. A big bookcase (he was a great reader) occupied one side of his
154       stateroom; the portrait of his late wife, a flat bituminous oil-painting
155       representing the profile and one long black ringlet of a young woman,
156       faced his bed-place. Three chronometers ticked him to sleep and greeted
157       him on waking with the tiny competition of their beats. He rose at five
158       every day. The officer of the morning watch, drinking his early cup
159       of coffee aft by the wheel, would hear through the wide orifice of the
160       copper ventilators all the splashings, blowings, and splutterings of
161       his captain's toilet. These noises would be followed by a sustained
162       deep murmur of the Lord's Prayer recited in a loud earnest voice. Five
163       minutes afterwards the head and shoulders of Captain Whalley emerged
164       out of the companion-hatchway. Invariably he paused for a while on the
165       stairs, looking all round at the horizon; upwards at the trim of the
166       sails; inhaling deep draughts of the fresh air. Only then he would step
167       out on the poop, acknowledging the hand raised to the peak of the cap
168       with a majestic and benign "Good morning to you." He walked the deck
169       till eight scrupulously. Sometimes, not above twice a year, he had to
170       use a thick cudgel-like stick on account of a stiffness in the hip--a
171       slight touch of rheumatism, he supposed. Otherwise he knew nothing of
172       the ills of the flesh. At the ringing of the breakfast bell he went
173       below to feed his canaries, wind up the chronometers, and take the
174       head of the table. From there he had before his eyes the big carbon
175       photographs of his daughter, her husband, and two fat-legged babies
176       --his grandchildren--set in black frames into the maplewood bulkheads
177       of the cuddy. After breakfast he dusted the glass over these portraits
178       himself with a cloth, and brushed the oil painting of his wife with a
179       plumate kept suspended from a small brass hook by the side of the heavy
180       gold frame. Then with the door of his stateroom shut, he would sit down
181       on the couch under the portrait to read a chapter out of a thick pocket
182       Bible--her Bible. But on some days he only sat there for half an hour
183       with his finger between the leaves and the closed book resting on his
184       knees. Perhaps he had remembered suddenly how fond of boat-sailing she
185       used to be.</p>
186
187       <p>She had been a real shipmate and a true woman too. It was like an
188       article of faith with him that there never had been, and never could be,
189       a brighter, cheerier home anywhere afloat or ashore than his home under
190       the poop-deck of the Condor, with the big main cabin all white and gold,
191       garlanded as if for a perpetual festival with an unfading wreath. She
192       had decorated the center of every panel with a cluster of home flowers.
193       It took her a twelvemonth to go round the cuddy with this labor of love.
194       To him it had remained a marvel of painting, the highest achievement of
195       taste and skill; and as to old Swinburne, his mate, every time he
196       came down to his meals he stood transfixed with admiration before the
197       progress of the work. You could almost smell these roses, he declared,
198       sniffing the faint flavor of turpentine which at that time pervaded the
199       saloon, and (as he confessed afterwards) made him somewhat less hearty
200       than usual in tackling his food. But there was nothing of the sort to
201       interfere with his enjoyment of her singing. "Mrs. Whalley is a regular
202       out-and-out nightingale, sir," he would pronounce with a judicial air
203       after listening profoundly over the skylight to the very end of the
204       piece. In fine weather, in the second dog-watch, the two men could hear
205       her trills and roulades going on to the accompaniment of the piano in
206       the cabin. On the very day they got engaged he had written to London
207       for the instrument; but they had been married for over a year before it
208       reached them, coming out round the Cape. The big case made part of the
209       first direct general cargo landed in Hong-kong harbor--an event that to
210       the men who walked the busy quays of to-day seemed as hazily remote as
211       the dark ages of history. But Captain Whalley could in a half hour of
212       solitude live again all his life, with its romance, its idyl, and its
213       sorrow. He had to close her eyes himself. She went away from under the
214       ensign like a sailor's wife, a sailor herself at heart. He had read
215       the service over her, out of her own prayer-book, without a break in his
216       voice. When he raised his eyes he could see old Swinburne facing him
217       with his cap pressed to his breast, and his rugged, weather-beaten,
218       impassive face streaming with drops of water like a lump of chipped red
219       granite in a shower. It was all very well for that old sea-dog to cry.
220       He had to read on to the end; but after the splash he did not remember
221       much of what happened for the next few days. An elderly sailor of the
222       crew, deft at needlework, put together a mourning frock for the child
223       out of one of her black skirts.</p>
224
225       <p>He was not likely to forget; but you cannot dam up life like a sluggish
226       stream. It will break out and flow over a man's troubles, it will close
227       upon a sorrow like the sea upon a dead body, no matter how much love has
228       gone to the bottom. And the world is not bad. People had been very
229       kind to him; especially Mrs. Gardner, the wife of the senior partner
230       in Gardner, Patteson, &amp; Co., the owners of the Condor. It was she who
231       volunteered to look after the little one, and in due course took her to
232       England (something of a journey in those days, even by the overland
233       mail route) with her own girls to finish her education. It was ten years
234       before he saw her again.</p>
235
236       <p>As a little child she had never been frightened of bad weather; she
237       would beg to be taken up on deck in the bosom of his oilskin coat to
238       watch the big seas hurling themselves upon the Condor. The swirl and
239       crash of the waves seemed to fill her small soul with a breathless
240       delight. "A good boy spoiled," he used to say of her in joke. He had
241       named her Ivy because of the sound of the word, and obscurely fascinated
242       by a vague association of ideas. She had twined herself tightly round
243       his heart, and he intended her to cling close to her father as to a
244       tower of strength; forgetting, while she was little, that in the nature
245       of things she would probably elect to cling to someone else. But
246       he loved life well enough for even that event to give him a certain
247       satisfaction, apart from his more intimate feeling of loss.</p>
248
249       <p>After he had purchased the Fair Maid to occupy his loneliness, he
250       hastened to accept a rather unprofitable freight to Australia simply for
251       the opportunity of seeing his daughter in her own home. What made him
252       dissatisfied there was not to see that she clung now to somebody else,
253       but that the prop she had selected seemed on closer examination "a
254       rather poor stick"--even in the matter of health. He disliked his
255       son-in-law's studied civility perhaps more than his method of
256       handling the sum of money he had given Ivy at her marriage. But of his
257       apprehensions he said nothing. Only on the day of his departure, with
258       the hall-door open already, holding her hands and looking steadily into
259       her eyes, he had said, "You know, my dear, all I have is for you and the
260       chicks. Mind you write to me openly." She had answered him by an almost
261       imperceptible movement of her head. She resembled her mother in
262       the color of her eyes, and in character--and also in this, that she
263       understood him without many words.</p>
264
265       <p>Sure enough she had to write; and some of these letters made Captain
266       Whalley lift his white eye-brows. For the rest he considered he was
267       reaping the true reward of his life by being thus able to produce on
268       demand whatever was needed. He had not enjoyed himself so much in a
269       way since his wife had died. Characteristically enough his son-in-law's
270       punctuality in failure caused him at a distance to feel a sort of
271       kindness towards the man. The fellow was so perpetually being jammed on
272       a lee shore that to charge it all to his reckless navigation would be
273       manifestly unfair. No, no! He knew well what that meant. It was bad
274       luck. His own had been simply marvelous, but he had seen in his life too
275       many good men--seamen and others--go under with the sheer weight of bad
276       luck not to recognize the fatal signs. For all that, he was cogitating
277       on the best way of tying up very strictly every penny he had to leave,
278       when, with a preliminary rumble of rumors (whose first sound reached
279       him in Shanghai as it happened), the shock of the big failure came;
280       and, after passing through the phases of stupor, of incredulity, of
281       indignation, he had to accept the fact that he had nothing to speak of
282       to leave.</p>
283
284       <p>Upon that, as if he had only waited for this catastrophe, the unlucky
285       man, away there in Melbourne, gave up his unprofitable game, and sat
286       down--in an invalid's bath-chair at that too. "He will never walk
287       again," wrote the wife. For the first time in his life Captain Whalley
288       was a bit staggered.</p>
289
290       <p>The Fair Maid had to go to work in bitter earnest now. It was no longer
291       a matter of preserving alive the memory of Dare-devil Harry Whalley in
292       the Eastern Seas, or of keeping an old man in pocket-money and clothes,
293       with, perhaps, a bill for a few hundred first-class cigars thrown in at
294       the end of the year. He would have to buckle-to, and keep her going hard
295       on a scant allowance of gilt for the ginger-bread scrolls at her stem
296       and stern.</p>
297
298       <p>This necessity opened his eyes to the fundamental changes of the world.
299       Of his past only the familiar names remained, here and there, but
300       the things and the men, as he had known them, were gone. The name of
301       Gardner, Patteson, &amp; Co. was still displayed on the walls of warehouses
302       by the waterside, on the brass plates and window-panes in the business
303       quarters of more than one Eastern port, but there was no longer a
304       Gardner or a Patteson in the firm. There was no longer for Captain
305       Whalley an arm-chair and a welcome in the private office, with a bit of
306       business ready to be put in the way of an old friend, for the sake of
307       bygone services. The husbands of the Gardner girls sat behind the desks
308       in that room where, long after he had left the employ, he had kept his
309       right of entrance in the old man's time. Their ships now had yellow
310       funnels with black tops, and a time-table of appointed routes like a
311       confounded service of tramways. The winds of December and June were all
312       one to them; their captains (excellent young men he doubted not) were,
313       to be sure, familiar with Whalley Island, because of late years the
314       Government had established a white fixed light on the north end (with
315       a red danger sector over the Condor Reef), but most of them would have
316       been extremely surprised to hear that a flesh-and-blood Whalley still
317       existed--an old man going about the world trying to pick up a cargo here
318       and there for his little bark.</p>
319
320       <p>And everywhere it was the same. Departed the men who would have nodded
321       appreciatively at the mention of his name, and would have thought
322       themselves bound in honor to do something for Dare-devil Harry Whalley.
323       Departed the opportunities which he would have known how to seize; and
324       gone with them the white-winged flock of clippers that lived in the
325       boisterous uncertain life of the winds, skimming big fortunes out of
326       the foam of the sea. In a world that pared down the profits to an
327       irreducible minimum, in a world that was able to count its disengaged
328       tonnage twice over every day, and in which lean charters were snapped up
329       by cable three months in advance, there were no chances of fortune for
330       an individual wandering haphazard with a little bark--hardly indeed any
331       room to exist.</p>
332
333       <p>He found it more difficult from year to year. He suffered greatly from
334       the smallness of remittances he was able to send his daughter. Meantime
335       he had given up good cigars, and even in the matter of inferior cheroots
336       limited himself to six a day. He never told her of his difficulties, and
337       she never enlarged upon her struggle to live. Their confidence in each
338       other needed no explanations, and their perfect understanding endured
339       without protestations of gratitude or regret. He would have been shocked
340       if she had taken it into her head to thank him in so many words, but
341       he found it perfectly natural that she should tell him she needed two
342       hundred pounds.</p>
343
344       <p>He had come in with the Fair Maid in ballast to look for a freight in
345       the Sofala's port of registry, and her letter met him there. Its tenor
346       was that it was no use mincing matters. Her only resource was in opening
347       a boarding-house, for which the prospects, she judged, were good. Good
348       enough, at any rate, to make her tell him frankly that with two hundred
349       pounds she could make a start. He had torn the envelope open, hastily,
350       on deck, where it was handed to him by the ship-chandler's runner, who
351       had brought his mail at the moment of anchoring. For the second time
352       in his life he was appalled, and remained stock-still at the cabin door
353       with the paper trembling between his fingers. Open a boarding-house! Two
354       hundred pounds for a start! The only resource! And he did not know where
355       to lay his hands on two hundred pence.</p>
356
357       <p>All that night Captain Whalley walked the poop of his anchored ship, as
358       though he had been about to close with the land in thick weather, and
359       uncertain of his position after a run of many gray days without a sight
360       of sun, moon, or stars. The black night twinkled with the guiding lights
361       of seamen and the steady straight lines of lights on shore; and all
362       around the Fair Maid the riding lights of ships cast trembling trails
363       upon the water of the roadstead. Captain Whalley saw not a gleam
364       anywhere till the dawn broke and he found out that his clothing was
365       soaked through with the heavy dew.</p>
366
367       <p>His ship was awake. He stopped short, stroked his wet beard, and
368       descended the poop ladder backwards, with tired feet. At the sight
369       of him the chief officer, lounging about sleepily on the quarterdeck,
370       remained open-mouthed in the middle of a great early-morning yawn.</p>
371
372       <p>"Good morning to you," pronounced Captain Whalley solemnly, passing into
373       the cabin. But he checked himself in the doorway, and without looking
374       back, "By the bye," he said, "there should be an empty wooden case put
375       away in the lazarette. It has not been broken up--has it?"</p>
376
377       <p>The mate shut his mouth, and then asked as if dazed, "What empty case,
378       sir?"</p>
379
380       <p>"A big flat packing-case belonging to that painting in my room. Let it
381       be taken up on deck and tell the carpenter to look it over. I may want
382       to use it before long."</p>
383
384       <p>The chief officer did not stir a limb till he had heard the door of the
385       captain's state-room slam within the cuddy. Then he beckoned aft the
386       second mate with his forefinger to tell him that there was something "in
387       the wind."</p>
388
389       <p>When the bell rang Captain Whalley's authoritative voice boomed out
390       through a closed door, "Sit down and don't wait for me." And his
391       impressed officers took their places, exchanging looks and whispers
392       across the table. What! No breakfast? And after apparently knocking
393       about all night on deck, too! Clearly, there was something in the wind.
394       In the skylight above their heads, bowed earnestly over the plates,
395       three wire cages rocked and rattled to the restless jumping of the
396       hungry canaries; and they could detect the sounds of their "old
397       man's" deliberate movements within his state-room. Captain Whalley was
398       methodically winding up the chronometers, dusting the portrait of
399       his late wife, getting a clean white shirt out of the drawers, making
400       himself ready in his punctilious unhurried manner to go ashore. He could
401       not have swallowed a single mouthful of food that morning. He had made
402       up his mind to sell the Fair Maid.</p>
403     </div>
404
405     <div class="pointer"></div>
406
407     <style>
408       body {
409         cursor: pointer;
410       }
411       .scroll {
412         height: 80vh;
413         width: 80vw;
414         max-height: 600px;
415         position: fixed;
416         top: 5em;
417         left: 10vw;
418
419         overflow-y: scroll;
420         padding: 4em;
421         box-sizing: border-box;
422         line-height: 1.2;
423       }
424       .scroll::-webkit-scrollbar, .scroll::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-thumb {
425         display: none;
426       }
427
428       .pointer {
429         height: 3.6em;
430         width: 77vw;
431         border: 5px solid #CCC;
432         border-radius: 15px;
433         background-color: rgba(0, 0, 0, 0.05);
434         pointer-events: none;
435       }
436       .highlight {
437         background-color: rgba(255, 255, 0, 0.3);
438       }
439       .hover {
440         background-color: rgba(0, 255, 255, 0.2);
441       }
442     </style>
443
444     <script src="../../tether.js"></script>
445     <script>
446       var pointer = document.querySelector('.pointer');
447       var scroll = document.querySelector('.scroll');
448
449       // This creates the pointer tether and links it up
450       // with the scroll handle
451       new Tether({
452         element: pointer,
453         target: scroll,
454         attachment: 'middle right',
455         targetAttachment: 'middle left',
456         targetModifier: 'scroll-handle'
457       });
458
459       // Everything after this is for the highlighting effect
460       var paras = document.querySelectorAll('p');
461       for(var i=paras.length; i--;){
462         var sents = paras[i].innerHTML.split('.');
463         for (var j=sents.length; j--;){
464           if (sents[j].trim().length)
465             sents[j] = '<span>' + sents[j] + '.</span>';
466         }
467         paras[i].innerHTML = sents.join('');
468       }
469
470       var spans = document.querySelectorAll('p span');
471
472       function highlight(){
473         if (!spans) return;
474
475         var bar = pointer.getBoundingClientRect();
476
477         for (var i=spans.length; i--;){
478           var coord = spans[i].getBoundingClientRect();
479
480           if (bar.top < coord.top && bar.bottom > coord.top){
481             spans[i].classList.add('hover');
482           } else if (spans[i].classList.contains('hover')) {
483             spans[i].classList.remove('hover');
484           }
485         }
486
487         requestAnimationFrame(highlight);
488       }
489
490       highlight();
491
492       document.body.addEventListener('click', function(){
493         var els = document.querySelectorAll('.hover');
494         for (var i=els.length; i--;)
495           els[i].classList.toggle('highlight');
496       });
497     </script>
498   </body>
499 </html>