@samuelbradshaw/highlight-helper-js 0.9.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/test-load.html CHANGED
@@ -1,224 +1,260 @@
1
- <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
2
- <style>
3
- #disambiguation-panel {
4
- color: black;
5
- background-color: white;
6
- width: 400px; max-width: 100%;
7
- flex-direction: column;
8
- gap: 0.5em;
9
- box-sizing: border-box;
10
- &[open] { display: flex; }
11
- #disambiguation-buttons {
12
- display: flex;
13
- flex-direction: column;
14
- & button {
15
- display: inline-block;
16
- border: none;
17
- background-color: inherit;
18
- color: inherit;
19
- font-family: inherit;
20
- font-size: inherit;
21
- text-align: inherit;
22
- margin-bottom: 1em;
23
- & * {
24
- display: inline;
1
+ <!DOCTYPE html>
2
+ <html lang="en" translate="no">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>HighlightHelper.js Load Test</title>
6
+ <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
7
+ <meta name="google" content="notranslate">
8
+ </head>
9
+ <body>
10
+ <h1>
11
+ <span id="highlights-count"></span> Highlights<br>
12
+ <small id="time-to-load"></small>
13
+ </h1>
14
+
15
+ <p>
16
+ Drawing mode:<br>
17
+ <label><input type="radio" name="drawingMode" value="svg" checked> SVG shapes</label><br>
18
+ <label><input type="radio" name="drawingMode" value="highlight-api"> CSS Highlight API</label><br>
19
+ <label><input type="radio" name="drawingMode" value="mark-elements"> HTML mark elements</label><br>
20
+ </p>
21
+
22
+ <p>
23
+ Highlight overlap:<br>
24
+ <label><input type="radio" name="overlap" value="true" checked> Yes</label> <label><input type="radio" name="overlap" value="false"> No</label><br>
25
+ </p>
26
+
27
+ <p>
28
+ Wrappers:<br>
29
+ <label><input type="radio" name="wrappers" value="true"> Yes</label> <label><input type="radio" name="wrappers" value="false" checked> No</label><br>
30
+ </p>
31
+
32
+ <p>
33
+ Limit:<br>
34
+ <label><input type="radio" name="limit" value="5000" checked> 5000 highlights</label><br>
35
+ <label><input type="radio" name="limit" value="1000"> 1000 highlights</label><br>
36
+ <label><input type="radio" name="limit" value="500"> 500 highlights</label><br>
37
+ <label><input type="radio" name="limit" value="100"> 100 highlights</label><br>
38
+ </p>
39
+
40
+ <p>
41
+ HighlightHelper.js version:<br>
42
+ <label><input type="radio" name="version" value="" checked> Latest</label><br>
43
+ <label><input type="radio" name="version" value="0.10.0"> v0.10.0</label><br>
44
+ <label><input type="radio" name="version" value="0.9.0"> v0.9.0</label><br>
45
+ <label><input type="radio" name="version" value="0.8.1"> v0.8.1</label><br>
46
+ </p>
47
+
48
+ <h2>Content</h2>
49
+ <main>
50
+ <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo felis sapien, eget sodales purus tempor in. Morbi sed nulla elementum, porttitor tortor id, fermentum felis. Vestibulum at diam ipsum. Praesent cursus, velit in posuere cursus, purus ligula varius lacus, auctor consectetur tortor diam non augue. Vestibulum et ipsum feugiat nulla condimentum vehicula id quis sapien. Curabitur nibh quam, cursus eu porta ac, consectetur eget purus. Aenean gravida, odio id lobortis lacinia, sapien sem tincidunt nunc, nec tristique lorem quam quis velit. Sed nec ipsum convallis, consequat turpis nec, placerat dui. Aliquam et velit et lorem tincidunt condimentum. Integer venenatis suscipit laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
51
+ <p id="p2">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nec ullamcorper massa. Quisque sodales ac nisl quis ultricies. Nullam condimentum mollis felis, vel porta nunc consectetur a. Sed vitae ex ligula. Donec suscipit eu est viverra, vitae bibendum erat interdum. Maecenas efficitur lobortis finibus. Praesent auctor orci at sapien mattis euismod. Quisque vitae lobortis mi, vitae consectetur odio. Sed volutpat gravida mollis. Morbi laoreet elit non neque vestibulum egestas. Donec a consequat nisi.</p>
52
+ <p id="p3">Suspendisse potenti. Donec lobortis rhoncus lectus, aliquet pellentesque nisi rutrum nec. Aenean tincidunt turpis at diam pretium malesuada. In congue vel nibh eu lobortis. Nam quis lacinia magna. Fusce a leo sit amet tortor egestas luctus quis in justo. Cras eu pellentesque enim, sit amet blandit arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque velit erat, porttitor sit amet commodo a, sodales eget urna. Etiam bibendum urna ut urna elementum, ut sollicitudin nunc ultricies.</p>
53
+ <p id="p4">Phasellus luctus pulvinar dolor, vitae porttitor velit lobortis eu. Fusce tincidunt condimentum magna sit amet suscipit. Nullam nec nibh dapibus neque cursus imperdiet. Donec at magna ornare, egestas massa nec, interdum arcu. Nullam in scelerisque nibh. Quisque efficitur molestie consequat. Donec nibh ligula, blandit eget est id, viverra venenatis urna. Vivamus quis tincidunt lorem. Fusce bibendum mattis felis, id interdum justo tristique quis. Donec egestas lacinia lacus eu consequat. Integer vestibulum egestas metus in ultrices. Cras venenatis bibendum mi in pharetra. Nunc vulputate pretium odio sed ultricies. Donec ultrices rhoncus tellus, a commodo sem placerat eget. Nam aliquet arcu in luctus rutrum.</p>
54
+ <p id="p5">Duis tortor sem, ullamcorper quis dictum a, suscipit vel orci. Suspendisse mattis turpis id ipsum gravida tempor. Sed suscipit semper purus, ac lobortis nulla euismod eu. Nullam auctor lacinia sem non gravida. Suspendisse potenti. Vestibulum finibus nunc eu velit tincidunt, sit amet pellentesque mi placerat. In vitae mi accumsan, laoreet erat ac, eleifend nulla.</p>
55
+ <p id="p6">Suspendisse accumsan quis velit facilisis vulputate. Nullam laoreet, felis ut egestas gravida, velit enim varius diam, a pellentesque turpis sit amet mauris. In tincidunt pharetra odio eget ullamcorper. Nullam nec vestibulum sem, non finibus arcu. Fusce pulvinar in ligula ornare auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed egestas ultrices nulla non fermentum.</p>
56
+ <p id="p7">Etiam interdum lorem at velit vestibulum, eu gravida sodales. Aenean magna arcu, euismod porttitor mi et, feugiat semper massa. Duis vulputate lectus quis lorem rhoncus tempus. Vivamus ac leo id sapien iaculis finibus. Sed a dui. Aliquam auctor, vel facilisis efficitur, arcu nibh vehicula ante, sit amet imperdiet mi massa sit amet turpis. Vestibulum ullamcorper blandit dui id placerat. Duis at vehicula nunc, at vestibulum justo. Aenean commodo leo at dolor finibus pretium.</p>
57
+ <p id="p8">Morbi sodales orci eu dolor porttitor elementum. Aliquam vehicula elit ante, sed auctor libero luctus sed. In sed feugiat ipsum, hendrerit dictum justo. Vestibulum facilisis volutpat nunc, a sagittis leo pulvinar non. Sed congue est eget diam pretium egestas. Pellentesque placerat erat non nisi sollicitudin interdum. Morbi sagittis, ligula aliquam dapibus fringilla, lectus purus tincidunt velit, et egestas nulla est quis tellus. Morbi accumsan dolor at turpis tincidunt rhoncus. In porttitor non neque at consectetur. Ut feugiat cursus laoreet. Duis consequat, orci ut commodo aliquet, nisi enim tempus mi, ac posuere felis ipsum et urna. Duis eu neque ut sem tristique tristique ac sit amet justo. Mauris vel lectus a lacus dapibus congue. Maecenas felis neque, semper hendrerit laoreet a, rhoncus vitae felis.</p>
58
+ <p id="p9">In a efficitur elit. Sed nec fringilla elit. Proin blandit, nisl sit amet feugiat egestas, urna velit rutrum erat, vel imperdiet mi diam non massa. Proin nec malesuada augue. Aenean venenatis eu elit auctor, non facilisis nulla convallis. Duis in sem sed ligula lobortis imperdiet. Ut elementum erat et nisl rutrum varius. Vivamus eget vehicula augue, vitae luctus neque.</p>
59
+ <p id="p10">Proin viverra enim sit amet vestibulum pretium. Morbi rutrum tempus tempor. In condimentum libero id molestie bibendum. Sed sed neque lacinia, finibus orci sit amet, sagittis nibh. Phasellus in placerat lacus. Donec congue, vitae scelerisque semper, est justo congue ipsum, id hendrerit mauris ante sit amet risus. Aenean viverra eget risus a convallis. Sed quis faucibus nulla.</p>
60
+ <p id="p11">Aenean non bibendum tellus. Phasellus eget varius mauris. Maecenas blandit auctor sapien in aliquam. Aliquam cursus tortor quis bibendum tincidunt. Aliquam viverra nibh a massa facilisis ornare. Nulla facilisi. Duis auctor sem ut nisi pretium mollis. In et viverra lectus.</p>
61
+ <p id="p12">Nulla in turpis volutpat, vehicula urna vel, finibus dolor. Morbi lacinia purus ut leo molestie finibus. Duis id molestie risus. Quisque quis arcu id massa aliquam fermentum. Pellentesque lectus sapien, cursus non sodales non, blandit in diam. In sed sollicitudin dui, sed imperdiet urna. Cras eu nisl elementum orci ornare tempor. Maecenas faucibus, risus id sodales lacinia, lectus libero consectetur magna, eget mattis mi diam vitae neque. Ut lacinia efficitur ligula vel elementum. Quisque malesuada lorem quis neque suscipit, non malesuada dolor facilisis. Nam mollis ligula vitae nisi consequat varius. Quisque sodales, felis a imperdiet malesuada, neque ipsum rutrum sem, at consectetur urna tellus euismod ante. Donec augue neque, rutrum sit amet est in, auctor malesuada nibh. Sed eu aliquet tellus. Donec eget felis vel felis faucibus tincidunt a ac dui. Suspendisse potenti.</p>
62
+ <p id="p13">Proin pretium mauris risus, euismod feugiat diam condimentum eu. Aliquam erat volutpat. Nam mauris odio, vestibulum sit amet vehicula eu, vulputate in nulla. Integer nibh sapien, ultricies ac ipsum nec, pellentesque fringilla arcu. Nunc at ultrices leo. In egestas odio aliquet dolor sodales, ullamcorper condimentum nisi imperdiet. Nullam sed nisl vehicula enim molestie dictum eu eu ipsum.</p>
63
+ <p id="p14">Etiam ut scelerisque enim. Vestibulum eget nisl at mauris volutpat fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis rutrum et dui a imperdiet. Morbi pharetra convallis nunc, vitae efficitur ipsum faucibus sed. Vivamus ultrices nunc quis mauris elementum elementum. Aliquam est nibh, commodo ut magna sit amet, fringilla volutpat arcu. Etiam in nulla efficitur, laoreet mauris ut, feugiat purus. Fusce nec feugiat urna. Cras tellus ipsum, accumsan vel efficitur a, luctus vel risus.</p>
64
+ <p id="p15">Sed in porttitor arcu. Fusce iaculis, purus sit amet iaculis vulputate, elit risus faucibus, ut malesuada dolor enim eget metus. Duis vestibulum urna ut erat fermentum, ac maximus ipsum consectetur. Sed sed malesuada tortor. Aenean suscipit ullamcorper varius. Nulla malesuada varius, sed dictum leo rutrum in. Fusce libero nisl, pharetra id feugiat nec, posuere vel dui. Ut non enim blandit, ullamcorper lorem sed, mollis ex. Curabitur nisl massa, aliquam eget tortor vel, scelerisque lobortis dui. Duis nec suscipit nibh.</p>
65
+ <p id="p16">Nunc mollis placerat venenatis. Phasellus ac iaculis sem, et placerat diam. Phasellus vitae libero at nulla porta varius sit amet sed nisl. Sed dictum nisi eu urna eleifend, id tincidunt erat auctor. Fusce eu tincidunt nulla. Ut porttitor turpis ut vulputate porta. Quisque nibh sapien, finibus vitae malesuada vitae, placerat eget lacus. Duis at nibh facilisis, ultrices lectus in, aliquam. Curabitur magna sem, semper non tellus quis, pretium mattis leo. Fusce ac dapibus. Suspendisse dictum fermentum nulla, quis pellentesque odio tristique et.</p>
66
+ <p id="p17">Suspendisse lobortis turpis nulla, eu ultrices nisl pharetra vel. Curabitur tincidunt, elit ac imperdiet volutpat, sapien erat convallis lectus, sit amet fermentum ex enim quis nisl. Mauris ante libero, porttitor ut nisl id, aliquet vestibulum dui. Phasellus ac erat blandit, lobortis nisl euismod, posuere diam. Proin tempor velit sit amet nulla mattis tristique. Morbi nisl ante, viverra eget scelerisque id, pulvinar eget velit. Sed ac dui non quam dignissim porta in eu lacus. Nam feugiat leo vel magna congue, tristique fermentum nisi dictum. Suspendisse potenti. Proin posuere posuere vulputate.</p>
67
+ <p id="p18">Fusce vulputate velit non libero consequat, at ultrices nulla fringilla. In placerat, est eget ornare viverra, libero justo interdum tortor, ac pharetra urna nulla fermentum ligula. Nulla congue ante vel sapien volutpat, eget semper auctor. Quisque dictum tortor lorem, a commodo est ornare at. Vestibulum sit amet risus at neque venenatis imperdiet in vehicula ante. Donec vel erat orci. Nullam condimentum efficitur tellus sit amet consequat. Praesent faucibus diam quam, eu iaculis nisi dapibus sed. Nullam diam sapien, pulvinar eget laoreet in, luctus eu est. Ut sit amet nulla nibh. Phasellus dapibus risus velit, eget dapibus est varius nec. Integer a sagittis ligula. Nullam fermentum blandit consectetur. Morbi non sodales orci, et facilisis nisi. Sed a justo turpis. Maecenas nibh orci, pharetra vitae maximus vulputate, sollicitudin ut ipsum.</p>
68
+ <p id="p19">Aenean imperdiet vel nibh sed blandit. Vivamus quis vestibulum nulla. Pellentesque id dui at felis scelerisque dignissim. Praesent non leo enim. Aliquam eleifend ultrices tristique. Vestibulum sit amet purus dui. Nullam cursus maximus vehicula. Vivamus faucibus, eget semper luctus, ante lectus maximus mauris, at maximus ligula felis quis lacus. Donec lacus lacus, commodo luctus vestibulum a, euismod quis risus. Proin tristique leo nulla, quis semper nisi fringilla at. Integer quis condimentum elit. Integer id dolor a dui consequat tincidunt. Praesent eu leo feugiat, suscipit nulla in, feugiat urna. Nullam nisi, commodo at semper ac, viverra dapibus ante. Donec vel volutpat neque. Pellentesque at tellus.</p>
69
+ <p id="p20">Donec cursus urna elementum dolor iaculis, pretium consectetur urna auctor. Maecenas a pretium purus, a placerat odio. Duis leo mauris, tristique iaculis blandit id, vulputate in tortor. Suspendisse nisl, iaculis non vehicula in, aliquet ac. Vivamus fermentum pretium feugiat. Sed tempor est eu erat laoreet, sed suscipit augue dictum. Mauris ultrices metus eu pretium sodales. Suspendisse aliquet orci orci, eget fermentum bibendum non. Etiam a eleifend quam. Nunc ex ex, tempus id vulputate in, aliquam nec leo. Ut rutrum mollis nibh eget pellentesque.</p>
70
+ <p id="p21">Donec iaculis venenatis accumsan. Maecenas tristique nec sapien et dapibus. Suspendisse et orci ac nisi tincidunt tincidunt ac ut purus. Vivamus ex nunc, mattis sit amet tempor in, bibendum in orci. Proin ornare quam ex, sit amet scelerisque orci semper in. Praesent dapibus leo quis volutpat tristique. Aliquam consequat neque sit amet luctus faucibus. Nulla vel neque sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque lacinia orci quam, ac laoreet nisl dapibus sed.</p>
71
+ <p id="p22">Nunc eget sem nec lorem porttitor ultrices. In laoreet a mauris a viverra. Nunc fringilla dictum justo, ac commodo magna ultrices vel. Sed ultrices tempor tempus. Aenean a magna neque. Morbi in convallis tortor. Vivamus in tortor sapien. Praesent iaculis dolor vel pharetra consectetur. Nulla fringilla nibh at nunc ullamcorper, id malesuada nibh vulputate. Quisque vitae imperdiet odio. Aliquam eu ligula in ante bibendum tempus sed at est.</p>
72
+ <p id="p23">Praesent efficitur, lacus id pulvinar blandit, massa magna vulputate turpis, ut porttitor massa ante in sapien. Proin vehicula dui pharetra lacinia cursus. Donec laoreet, lorem sed cursus vulputate, sapien dui commodo elit, eu interdum nibh ex eget risus. Duis sit amet ipsum tincidunt, tristique ligula gravida, congue tellus. Cras vel volutpat turpis. Praesent fermentum quam augue. Cras posuere consectetur mollis. Aliquam dapibus ut nisl eu pharetra. Duis lacinia venenatis nulla, volutpat pellentesque urna vestibulum quis. Duis cursus iaculis pharetra. Pellentesque eget venenatis justo, ac blandit felis. Pellentesque iaculis luctus urna at tristique. Donec at sem placerat, tristique dui id, mollis purus. Donec venenatis egestas eleifend.</p>
73
+ <p id="p24">Donec egestas, lacus ac condimentum tempus, arcu nibh accumsan velit, ac mollis sapien ipsum eu massa. Nulla mattis consequat quam, eget mollis diam viverra vel. Sed placerat ex et vehicula porttitor. Vestibulum iaculis non risus euismod egestas. Quisque gravida auctor lorem sed ullamcorper. Maecenas egestas augue urna, at pellentesque lorem egestas et. Fusce feugiat pretium mauris, in pellentesque nulla. Praesent ac ipsum id orci sodales blandit. Pellentesque a mauris scelerisque, dictum augue vitae, ultrices lorem. Proin lorem tellus, venenatis id nisl aliquet, dictum feugiat odio. Curabitur eget rhoncus erat. Nulla id nisi id dui aliquam ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi imperdiet, mauris in faucibus ullamcorper, neque justo posuere nunc, eu scelerisque arcu diam nec leo. Suspendisse quis finibus urna. Fusce diam felis, posuere vel eleifend ut, iaculis in ante.</p>
74
+ <p id="p25">Proin ac sapien vitae augue congue tincidunt ultricies ac odio. Quisque faucibus felis quis leo ornare sagittis. Pellentesque varius est quis neque suscipit, in vestibulum nisi sodales. Aenean venenatis, massa eget scelerisque accumsan, quam ante viverra odio, sit amet mollis tellus ipsum at mauris. Nam tincidunt auctor sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi a blandit mi. Curabitur sed ante ullamcorper, consequat lorem quis, vehicula felis. Nam malesuada id nulla sed faucibus. Nullam in tincidunt magna, vel maximus ligula.</p>
75
+ <p id="p26">Donec finibus fermentum quam a efficitur. Suspendisse vehicula, lorem vel molestie cursus, quam nisi elementum nunc, eu dictum ante purus nec odio. Fusce ac sagittis odio. Suspendisse rutrum nunc in ex tristique, ut porttitor lectus tristique. In luctus quis urna non efficitur. Suspendisse et mattis lorem. Ut in volutpat erat. Praesent vel odio sed turpis tempor mollis. Sed vitae ligula quam. Cras ac viverra mi, quis euismod dolor. Maecenas sit amet mauris euismod, dictum nulla vitae, venenatis dolor. Nulla nibh dolor, euismod in quam sit amet, imperdiet vehicula est.</p>
76
+ <p id="p27">Vivamus blandit rutrum mi, sit amet blandit nisl vestibulum non. Suspendisse hendrerit aliquet urna, in pellentesque purus blandit vitae. Mauris aliquam dapibus bibendum. Curabitur facilisis eleifend odio vitae accumsan. Donec iaculis elit sed lectus commodo molestie at in turpis. Suspendisse congue sem quis commodo vestibulum. Nam varius in arcu at ornare. Cras mollis quam sit amet ex imperdiet, vel lacinia odio ullamcorper. Nullam vehicula augue non sodales semper. Duis at feugiat urna. Duis malesuada vel lectus vel porttitor. Integer mattis dignissim nisl, quis aliquet mauris malesuada sit amet. Proin vitae tincidunt justo. Pellentesque sed diam at ipsum cursus varius ut nec dui.</p>
77
+ <p id="p28">Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vestibulum id dui nec egestas. Duis velit neque, mollis at bibendum eget, sodales quis dui. Proin dui augue, maximus vel gravida sit amet, placerat ac ipsum. Etiam mollis felis at libero sodales venenatis. Morbi vitae venenatis felis, sed ultricies enim. Etiam nec metus nec mi venenatis maximus. Integer ac vehicula lorem. Aenean at elit mauris. Nunc aliquet porttitor ultricies. In aliquam imperdiet purus mollis consequat.</p>
78
+ <p id="p29">Mauris odio turpis, tempor et eleifend eget, posuere in lectus. Maecenas cursus dui vel ante suscipit euismod. Mauris a fringilla dui. Donec ullamcorper accumsan molestie. Mauris bibendum molestie sem eu aliquam. Sed sit amet ultricies sem, vitae posuere metus. Phasellus dignissim commodo risus, sit amet aliquet purus tincidunt non.</p>
79
+ <p id="p30">Vivamus tincidunt varius odio, nec tempus feugiat eu. Duis et lectus commodo, molestie mauris vel, luctus neque. Etiam consequat pellentesque purus non tincidunt. Nam ut aliquet diam. Nulla suscipit, metus non tempor tincidunt, urna velit vestibulum quam, at scelerisque est neque ac justo. Vestibulum ex nisi, eleifend commodo erat quis, luctus placerat est. Donec consectetur metus ut augue euismod blandit. Curabitur a scelerisque augue.</p>
80
+ <p id="p31">Etiam in lectus mi. Pellentesque dictum dui eu massa sodales, a fermentum mauris porta. Vestibulum sollicitudin dui ac mauris vestibulum, ut euismod nulla luctus. Pellentesque venenatis arcu vitae dapibus lacinia. Integer id aliquet nunc. Curabitur elementum libero at varius tristique. Nam et mattis nulla. Morbi vel dignissim odio, vitae bibendum justo. Etiam at semper nisl, id tempus erat. Aenean ultricies efficitur ex, ut viverra tortor sagittis sed. Phasellus consectetur est erat.</p>
81
+ <p id="p32">Phasellus finibus finibus dui nec interdum. Duis at pretium nibh, eget cursus erat. Nunc elementum eleifend tortor, vitae bibendum nisl sodales ut. In nec arcu massa. Nam rutrum non imperdiet hendrerit. In ornare diam ut tortor fermentum, sed interdum sapien porta. Quisque mollis eu turpis sit amet commodo. Quisque non maximus justo. Suspendisse potenti. Fusce vestibulum dolor lorem, sit amet mollis leo commodo mattis. Ut blandit nulla ac nunc accumsan, nec luctus tortor porttitor. Vestibulum a leo id neque consectetur ultricies at eget elit. Curabitur a pulvinar turpis. Ut pretium placerat enim, dictum aliquam lacus mollis sed.</p>
82
+ <p id="p33">Ut porta nisl a enim accumsan tincidunt. Sed ac ex vestibulum, aliquam nunc vel, dapibus mauris. Duis ac porttitor, a pretium tortor. Morbi sit amet felis magna. Pellentesque dignissim magna at gravida molestie. Duis sit amet tellus non erat tincidunt ultricies in vel dui. Cras faucibus augue at odio hendrerit elementum. Donec lobortis ante ut posuere ultrices. Etiam a elit pretium, tristique sit amet, rhoncus lacus. Curabitur tempus facilisis enim. Vestibulum ex leo, congue et lectus sed, pretium varius elit. Nullam tempus ante vel faucibus finibus. Curabitur elementum erat vel ultricies rhoncus. Etiam at faucibus nisl. Donec placerat nunc rutrum consequat convallis. Donec eget felis vitae enim sodales varius eget non purus.</p>
83
+ <p id="p34">Curabitur id ligula lorem. Vivamus at risus eget nisi convallis faucibus. Nam nec suscipit libero, vulputate bibendum neque. Nunc sit amet enim egestas, aliquet leo sed, euismod est. Nulla malesuada, libero in placerat finibus, dui augue posuere sem, eu vestibulum sem sit amet velit. Maecenas non tortor quis nisl tristique facilisis. Duis imperdiet porta fermentum. Vivamus sed sodales massa. Proin vestibulum nulla hendrerit nisi porta, id eleifend nisi consequat. Praesent eu tellus ex. Phasellus id consectetur dolor. Integer non vel arcu lacinia tristique. Aenean tincidunt porttitor sodales. Nam ac justo et arcu tristique porttitor eget in ex.</p>
84
+ <p id="p35">Suspendisse vel scelerisque, venenatis leo vitae, accumsan libero. Pellentesque nec laoreet massa. Maecenas vel justo sed odio varius molestie nec quis turpis. Vivamus a ultrices mi. Proin nibh nisl, sodales et erat et, hendrerit vehicula nisl. Cras commodo, dolor pulvinar lobortis tristique, nulla risus tristique mauris, ac vestibulum nisl lacus a libero. Integer ut mollis justo, sed tempor leo. Ut non est eu dolor ultrices lacinia sed imperdiet dolor. Nam feugiat nunc lorem, eget blandit arcu cursus a.</p>
85
+ <p id="p36">Maecenas sed ipsum tellus. Nam vitae felis enim. Morbi ut feugiat enim. Praesent eget lorem elementum, vehicula ligula at, vulputate purus. Morbi dignissim justo, at imperdiet sapien commodo quis. Proin mollis elementum rhoncus. Cras porta vel ipsum sed venenatis. Aenean justo sapien, euismod sit amet sapien ut, lobortis congue elit. Nunc tincidunt turpis eu lacinia rhoncus. Aenean eget est nec velit tristique dignissim. Nunc lobortis bibendum arcu, quis aliquet risus commodo eu. Vivamus ullamcorper, neque eget eleifend ultricies, nunc porta neque, placerat malesuada urna tortor id mi. Morbi in interdum mauris. Integer cursus ex felis, quis posuere felis tempor et. Ut pulvinar lacus eu posuere bibendum.</p>
86
+ <p id="p37">Vivamus ex turpis, volutpat non egestas sit amet, cursus id enim. Nunc pellentesque venenatis ante ut auctor. In hac habitasse platea dictumst. Nam pellentesque, enim sit amet malesuada egestas, lectus lectus ornare metus, at sodales turpis odio id nisl. Pellentesque lacinia dui velit, viverra mattis mauris laoreet et. Fusce sed egestas elit. Aliquam et lorem dictum, consequat ipsum in, fringilla ipsum. Aliquam a tincidunt sem. Aenean dapibus vitae felis ut molestie.</p>
87
+ <p id="p38">Nulla a sapien id risus dignissim pulvinar. Suspendisse luctus nisl nec quam aliquam egestas. Aliquam et sapien non neque fringilla faucibus. Curabitur euismod facilisis arcu, eu ullamcorper neque gravida accumsan. Quisque purus orci, tincidunt sit amet rutrum vel, imperdiet sed nisl. Integer a vehicula odio, non viverra nisi. Etiam eu massa eu nibh rhoncus tincidunt eget ut orci. Nullam luctus pellentesque nulla a dignissim. Quisque pretium ligula eu dignissim vehicula.</p>
88
+ <p id="p39">Maecenas erat dolor, mollis vitae dolor pellentesque, mollis sollicitudin nulla. Nunc vel nunc accumsan, tristique lorem ac, efficitur sem. Nullam non placerat diam. Integer vitae ipsum at lorem viverra eleifend sed ut arcu. Integer sed elit vel erat interdum imperdiet vel nec massa. Sed scelerisque blandit commodo. Pellentesque augue mi, tempus id ex id, hendrerit dapibus ligula. Nam dignissim turpis quis maximus semper. Etiam in venenatis dolor. Morbi a mauris vitae velit sodales tristique sed ut enim. In hac habitasse platea dictumst.</p>
89
+ <p id="p40">Quisque commodo, mauris auctor scelerisque imperdiet, enim quam mollis purus, vel vestibulum enim ex quis ipsum. Pellentesque metus sem, facilisis ut libero in, tempus fermentum purus. Curabitur et leo pharetra, blandit purus ac, facilisis ligula. Curabitur eget felis congue, sodales nunc facilisis, luctus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec lectus mollis, aliquet massa eget, euismod elit. In hendrerit felis quis lectus dapibus imperdiet. Nunc sollicitudin orci eu dolor venenatis suscipit.</p>
90
+ <p id="p41">Vestibulum vel varius quam. Praesent vitae orci nulla. Cras vel dolor non risus efficitur semper vitae quis urna. Sed sit amet neque tempor, suscipit lectus ac, consequat quam. Pellentesque sodales turpis nec aliquam sodales. In tincidunt libero quis nisl lobortis, nec accumsan ipsum auctor. Suspendisse accumsan placerat egestas. Nullam eget sollicitudin, vulputate ligula mattis, scelerisque augue. Phasellus orci nulla, luctus ac efficitur ultrices, feugiat eget sapien. Mauris varius dolor ligula, in varius enim porttitor in. Quisque id nisi at ante interdum tempus ut non ligula. Nam laoreet ante eu orci semper tempor. Curabitur facilisis metus nunc, vitae rutrum nibh ultrices ut. Vivamus eget rhoncus dui. Donec aliquam lectus id efficitur consequat. Maecenas ac mi in orci hendrerit rhoncus.</p>
91
+ <p id="p42">Etiam ac pharetra turpis, sed iaculis enim. Pellentesque sapien ligula, rhoncus vitae nisi vitae, pharetra egestas nisi. Donec sit amet quam sit amet euismod vulputate et nec sapien. Donec ac consectetur mi, ut venenatis leo. Fusce dignissim leo in congue ornare. Quisque nisl lectus, aliquet sed lobortis rutrum, iaculis ac ipsum. Cras sagittis molestie consectetur. Sed semper erat leo, sed viverra dui convallis laoreet. Nunc ut libero blandit ligula pulvinar tincidunt interdum eu nibh.</p>
92
+ <p id="p43">Donec enim arcu, maximus pretium sapien sit amet, finibus imperdiet mi. Maecenas id condimentum dui, sit amet sodales felis. Curabitur feugiat luctus urna vel rhoncus. Proin vehicula eleifend nibh, ac luctus leo dictum consectetur. Morbi et lacinia urna. Donec at nibh ut purus semper facilisis. Pellentesque volutpat arcu nec turpis gravida interdum. Donec eget enim accumsan, rhoncus ipsum quis, pharetra quam. Sed quis mollis orci, quis gravida dui. Morbi non ex rutrum, pharetra felis at, gravida turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
93
+ <p id="p44">Nullam congue odio sed massa blandit dapibus. Nunc tempor sed quam a volutpat. Suspendisse hendrerit lacinia sapien, non iaculis nulla. Aenean ligula neque, ultrices vel tellus non, ullamcorper finibus ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque convallis ligula, sed tincidunt fermentum non. Donec suscipit diam sapien, in maximus dui tempor quis. Aliquam arcu elit, iaculis in tristique nec, tempor nec tellus. Mauris pulvinar libero nec dolor suscipit blandit. Phasellus ultrices vitae orci vitae faucibus. Suspendisse non euismod leo, ut auctor metus. Morbi dignissim, purus a laoreet porttitor, ante ex ultricies, et suscipit orci odio non justo.</p>
94
+ <p id="p45">Cras eleifend ipsum turpis, sed feugiat quam suscipit ut. Sed eu ligula varius, iaculis arcu quis, pellentesque lectus. Ut in lacus pretium, posuere arcu non, eleifend ex. Etiam ac ornare ante. Integer pharetra luctus purus at auctor. Curabitur nec lacus nec lacus interdum placerat ac vel lectus. Mauris vulputate odio efficitur nulla tristique volutpat.</p>
95
+ <p id="p46">Mauris tellus risus, vehicula eget lacus sit amet, tristique auctor dui. Nunc urna libero, porta in lorem at, scelerisque consequat purus. Praesent tempor, eget suscipit accumsan, nunc justo rutrum ante, quis porta magna ipsum eu. Fusce auctor nibh risus, vel scelerisque dui venenatis nec. Nulla vel hendrerit mauris. Vivamus imperdiet velit nulla. Maecenas cursus, odio sed accumsan congue, ipsum ligula imperdiet risus, at egestas risus tellus eget ipsum. Cras odio quam, sollicitudin eu tincidunt sagittis, viverra nec justo. Suspendisse commodo vulputate mi id rutrum. Mauris sed convallis lacus, et ultricies ligula. Quisque faucibus vel leo et faucibus.</p>
96
+ <p id="p47">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget mauris vulputate, posuere tortor vitae, consequat enim. Etiam iaculis lacus sit amet ex pharetra bibendum. Donec vitae dictum magna, a aliquam leo. Fusce sit amet sem augue. Donec maximus urna at mauris cursus, a suscipit nulla posuere. Vestibulum ac bibendum purus, sed volutpat nisi.</p>
97
+ <p id="p48">Duis at turpis ultricies, faucibus ligula sit amet, scelerisque nisi. Cras pretium aliquet augue quis vestibulum. Curabitur ultricies elit feugiat nibh vestibulum dapibus. Proin in libero accumsan, vulputate ante vel, semper augue. Praesent ex mi, placerat quis tellus ut, pharetra sodales mauris. Nullam eget erat a purus vulputate imperdiet eu ut justo. Duis efficitur dui eu elit ultrices aliquet. Phasellus porttitor, arcu non sollicitudin imperdiet, neque lacus ultricies ex, nec efficitur lorem orci pretium ligula. Proin sapien metus, malesuada eget nibh in, porta auctor tortor. Pellentesque commodo bibendum ipsum vitae eleifend.</p>
98
+ <p id="p49">Morbi placerat diam sit amet odio faucibus commodo. Nam bibendum ac nisl sed porta. Etiam euismod, orci venenatis volutpat dignissim, lectus nisi pretium odio, nec blandit justo eu elit. Mauris vehicula elit tortor, eget tincidunt diam facilisis quis. Mauris posuere elit mauris, et eleifend quam tempor quis. Nunc justo nunc, efficitur eu lacus in, vulputate aliquam leo. Vivamus ut nisi risus. Suspendisse massa justo, tristique sed nunc quis, laoreet commodo magna. Curabitur gravida mauris nisl, a tincidunt massa consequat in. Donec vel eleifend orci. Nunc vulputate erat risus, quis ultrices vestibulum nec. Nulla fermentum tortor id dolor volutpat, eu vehicula sapien iaculis. Cras rutrum, vel ultricies hendrerit, lorem tellus blandit arcu, vitae congue ligula lacus ac elit. In hac habitasse platea dictumst. Ut quis diam quis enim maximus egestas sagittis et augue.</p>
99
+ <p id="p50">Donec vitae enim sed nulla sollicitudin vehicula. Nam est sapien, consequat et mauris eget, euismod commodo tortor. Integer mattis convallis porta. Integer vel leo non risus elementum hendrerit sit amet at nisl. Etiam quis lacus nisl. Nunc pellentesque, libero nec scelerisque semper, lacus libero elementum leo, non sodales turpis neque vitae ligula. Sed ut est ante. Morbi egestas tristique molestie. In sit amet erat at leo vulputate sodales. Pellentesque malesuada felis ut quam porta, non eleifend dui sagittis. Cras bibendum neque at dolor tincidunt, id lobortis arcu condimentum.</p>
100
+ <p id="p51">Ut vehicula erat sit amet tellus tincidunt, ac sagittis erat efficitur. Sed viverra dolor in viverra fermentum. Praesent in consequat leo, ornare aliquet libero. Proin nec lacus commodo, malesuada diam eget, ornare lorem. Integer id pretium massa, finibus volutpat magna. Donec porttitor aliquet sapien id aliquet. Integer quis lobortis mi. Vivamus ut luctus orci. Aliquam sit amet odio consectetur, viverra sapien vitae, feugiat sapien. Nunc finibus dui quis massa consequat, ac ornare enim maximus. Donec eget enim nec tellus suscipit sagittis placerat vel urna. Donec tincidunt lobortis suscipit. Donec congue, leo id facilisis elementum, dui sem feugiat odio, a cursus velit felis sit amet velit. Proin euismod dolor, nec feugiat dolor viverra id. Nam consectetur est ipsum, sed cursus risus maximus ut.</p>
101
+ <p id="p52">Praesent viverra lobortis neque, at sollicitudin odio dictum vel. Phasellus ut ante elementum, vestibulum ex eu, venenatis ipsum. Mauris feugiat sodales velit nec tristique. Ut nec congue lorem, id tincidunt tellus. Praesent euismod ornare turpis sit amet placerat. In ultricies, ex nec feugiat finibus, dui metus dictum orci, a venenatis est tellus in tellus. Aenean sit amet augue eget dignissim malesuada. Praesent ullamcorper tellus ac pellentesque lobortis. Sed ultrices vulputate laoreet. Maecenas aliquam sapien metus, et dignissim sapien accumsan fermentum. Sed tempus, ex a malesuada facilisis, metus velit maximus lacus, nec tincidunt arcu nisi at massa. Pellentesque vel ultricies dui, eget consectetur augue. Nulla malesuada nulla sed venenatis accumsan.</p>
102
+ <p id="p53">Donec quis enim id arcu dictum accumsan. Donec ut scelerisque diam, vel sagittis odio. Aenean mattis condimentum metus et elementum. In mauris augue, tristique non purus ac, cursus aliquet risus. Nam aliquet nulla in faucibus convallis. Donec et efficitur nisl. Aliquam lacinia, magna et porta eleifend, libero leo tempor urna, vel auctor est nibh consectetur urna. Nunc augue ipsum, cursus eget lorem accumsan, vehicula dignissim ipsum. Nullam varius ligula vel feugiat tristique. Donec elementum, dui non vestibulum laoreet, sem arcu ullamcorper lorem, ac eleifend magna enim eget nisi.</p>
103
+ <p id="p54">Fusce sed fringilla sem mollis luctus eget ut diam. Praesent odio tellus, malesuada non faucibus sed, pulvinar vel velit. Vivamus non enim nibh. Duis eget sollicitudin nisl, sit amet rhoncus lorem. Proin et porta mauris. Quisque interdum sem eget tincidunt vulputate. Quisque mattis massa vel ultrices sodales. Cras eget cursus augue. Suspendisse mollis sem tortor, eu faucibus consequat quis. Sed lobortis ac urna vel facilisis.</p>
104
+ <p id="p55">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis faucibus urna quis est commodo, at vulputate elit vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin at lectus venenatis, suscipit sapien eu, tempus purus. Morbi non nibh id justo imperdiet faucibus vel a sem. Suspendisse rutrum erat nunc, nec pharetra diam interdum quis. Curabitur sit amet neque nec sapien egestas venenatis. In venenatis est nec odio euismod porta.</p>
105
+ <p id="p56">Suspendisse quis nulla non nisl laoreet mollis vel ac est. Pellentesque id eleifend felis. Ut id ipsum in orci lobortis euismod ac sed. Curabitur pellentesque et tortor ac laoreet. Morbi est ex, vulputate ornare commodo ac, elementum vel purus. Aenean non velit eget ex porta cursus. Fusce sit amet sagittis mauris. Vivamus in egestas dui.</p>
106
+ <p id="p57">Sed feugiat aliquam tempus. Maecenas ultrices felis et massa fermentum dictum. Phasellus tincidunt maximus hendrerit. Aliquam erat volutpat. Etiam euismod ac risus fringilla laoreet. Vestibulum id mi ut mauris consequat eleifend. Proin porta nec turpis nec lacinia. Aliquam viverra ante nec malesuada pretium. Duis ornare arcu nisi, et hendrerit metus lacinia vitae. Vestibulum faucibus, arcu sit amet varius lobortis, nibh ante vulputate sapien, at blandit erat leo et felis. Pellentesque aliquam sollicitudin odio, ut aliquet felis cursus id. Quisque gravida, tellus quis iaculis mattis, ex dui luctus nunc, at tincidunt nibh quam eget odio. Nunc non sem a mi egestas placerat. Morbi arcu nisl, tempus pharetra elementum at, pretium a lacus. Aenean volutpat commodo lectus sed sollicitudin. Donec viverra dictum purus, a dignissim ex dapibus a.</p>
107
+ <p id="p58">Aliquam porttitor nibh vel diam ornare malesuada. Praesent luctus sollicitudin risus. Donec finibus tellus sit amet est aliquet, id dictum lorem convallis. Phasellus eget orci metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas ac orci nisi. Phasellus euismod ac nibh vitae consequat. Donec lobortis luctus ex vel rhoncus.</p>
108
+ <p id="p59">Proin condimentum commodo nunc, ut ornare erat molestie tincidunt. Nam efficitur, nisi eu ultrices vestibulum, lorem elit dapibus purus, id sollicitudin purus mauris quis neque. Praesent id mauris molestie, malesuada elit vitae, ullamcorper ipsum. Duis et arcu ac nisl eleifend pharetra. Praesent nec pellentesque nunc. Aliquam facilisis leo eget molestie accumsan. Ut lorem leo, efficitur sit amet fringilla eget, rhoncus nec massa. Fusce faucibus egestas tortor, vitae egestas ligula sodales vitae. Aliquam tincidunt euismod massa sed elementum. Donec tortor lorem, facilisis vel viverra eget, ultrices convallis leo. Aliquam pulvinar eget massa eget vestibulum. In velit sem, varius ut blandit vel, varius pulvinar velit. Nam arcu sem, dapibus vel orci nec, fringilla laoreet ex.</p>
109
+ <p id="p60">Suspendisse vitae quam sed nisl eleifend luctus vel a augue. Vestibulum id ante ut sapien ultricies accumsan. Nullam ac nunc a ante rutrum rutrum non sed felis. Suspendisse hendrerit, metus eget facilisis commodo, mauris lorem ultrices justo, id consequat orci in leo. Nulla gravida viverra accumsan. Ut venenatis eu leo vitae finibus. Morbi aliquam urna et felis rhoncus rutrum. Nullam eget libero et nulla viverra faucibus.</p>
110
+ <p id="p61">Proin pulvinar sapien nec rutrum congue. Aenean ac mi commodo, commodo metus eu, tempus diam. Integer lorem risus, vehicula nec facilisis non, consectetur eu leo. Phasellus nisl urna, commodo non sodales id, laoreet in. Aliquam suscipit augue id massa condimentum fringilla. Praesent tempor elit at quam bibendum molestie. Curabitur rhoncus velit et lorem scelerisque finibus.</p>
111
+ <p id="p62">In mattis hendrerit felis eget egestas. Nam turpis nisi, accumsan et felis in, maximus consectetur elit. Phasellus vel mi vel massa sollicitudin aliquam. Proin at ultrices velit. Nam sed quam sed tortor blandit lacinia. Integer aliquet, diam eu maximus placerat, tortor ex porta nibh, vel laoreet libero ligula et leo. Aliquam felis sem, aliquam in ligula in, sollicitudin luctus ipsum.</p>
112
+ <p id="p63">Etiam laoreet eleifend nunc id scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus at purus id nulla pretium rutrum sed sit amet ex. Nunc lobortis nec magna nec placerat. Aliquam sit amet lorem pellentesque, posuere augue commodo, tempor nunc. Sed in odio sed dolor bibendum porttitor non vitae purus. Mauris porttitor pellentesque urna vitae consectetur. Vivamus lacus nibh, mollis quis pellentesque in, porttitor sit amet tortor.</p>
113
+ <p id="p64">Aenean sollicitudin, arcu eget condimentum finibus, augue magna fermentum mauris, id blandit lacus dolor eu quam. Aliquam nec rhoncus odio. Nunc iaculis risus id quam mattis varius. Nunc pulvinar nunc eget blandit maximus. Aliquam diam dui, luctus eget nunc vitae, ultricies faucibus lacus. Quisque viverra quis libero sit amet venenatis. Aenean at quam placerat, pellentesque orci et, consectetur magna.</p>
114
+ <p id="p65">In consequat tristique magna at euismod. Phasellus sodales lorem eu enim condimentum, eu iaculis risus tristique. Maecenas ac justo sit amet ex ullamcorper cursus a a tellus. Sed lacinia nunc quis ante ullamcorper, at fringilla leo ultricies. Pellentesque accumsan justo id nisi cursus posuere. Vivamus eu dui diam. Donec turpis tortor, pulvinar vitae egestas at, viverra sit amet. Ut egestas augue pulvinar, malesuada diam sed, volutpat neque. In iaculis ac elit vel venenatis.</p>
115
+ <p id="p66">Praesent tincidunt fringilla dolor, at aliquam lectus facilisis ut. Proin dapibus finibus lacus in posuere. Ut dui ante, elementum ac justo sit amet, dapibus finibus turpis. Proin ornare velit sit amet erat luctus, vel sagittis augue molestie. Cras fringilla eget tortor ut sagittis. Morbi id nibh et sem tristique porta. Quisque molestie turpis tortor, in blandit quam tempus nec. Proin sed congue. Ut fringilla magna nec efficitur luctus.</p>
116
+ <p id="p67">Curabitur posuere imperdiet volutpat. Nam nec ante commodo, dictum enim sed, vehicula libero. Sed convallis pulvinar urna, eget hendrerit felis auctor non. Cras sem risus, finibus id massa eu, rutrum tempus dui. Aenean cursus pharetra ligula, id ultrices nunc gravida vel. Aenean pharetra eleifend elit vehicula, vel placerat nisi auctor. Fusce tristique at turpis quis imperdiet. Curabitur ligula magna, venenatis nec scelerisque vel, venenatis quis tortor. Ut hendrerit mi non enim dignissim, vel feugiat est porttitor. Etiam elementum maximus mi, sed cursus diam tincidunt quis. Donec molestie auctor orci et faucibus. Pellentesque malesuada libero vel lectus gravida, et porttitor tellus lacinia.</p>
117
+ <p id="p68">Cras consectetur elit sed accumsan hendrerit. Nulla eleifend vitae nisi ac viverra. Suspendisse eget urna justo. Duis vitae efficitur mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam dignissim nisl id sagittis consequat. Donec at tellus accumsan, commodo nunc id, elementum turpis. Maecenas tincidunt sagittis libero non rutrum.</p>
118
+ <p id="p69">Phasellus dictum urna ligula, facilisis bibendum suscipit et. Ut a tincidunt arcu. Mauris quis nulla aliquam, tincidunt nunc nec, venenatis arcu. Integer ornare egestas mauris a ultrices. Maecenas volutpat cursus, id dignissim augue. Morbi et quam vel mi finibus faucibus ut vel quam. Fusce vitae ante id justo cursus facilisis. Praesent sit amet finibus dui. Donec pellentesque ligula eu eleifend sagittis. Vestibulum sit amet nisl a quam porttitor suscipit nec et nibh. Integer interdum elementum urna ut ullamcorper. Etiam fringilla lacinia, sed mollis nulla malesuada convallis.</p>
119
+ <p id="p70">Aenean iaculis nunc vel massa pulvinar cursus. Vestibulum vulputate scelerisque molestie. Nulla vel leo vel elit accumsan semper. Morbi eget tellus dolor. Sed nec euismod arcu. Integer in mi ut magna venenatis dictum lacinia rhoncus erat. Aenean eget porttitor tellus. Duis fermentum, orci eu commodo accumsan, mi ante sollicitudin turpis, in porttitor purus ex interdum sapien. Nulla sagittis dolor neque. Aenean elementum aliquam facilisis. Vestibulum tincidunt, nibh vel eleifend rhoncus, lacus nisi convallis enim, eu laoreet ipsum mi cursus nisi. Phasellus suscipit lacus dolor.</p>
120
+ <p id="p71">Quisque dignissim turpis, ac dapibus purus facilisis non. Pellentesque purus velit, aliquam sed lorem nec, pharetra maximus erat. Donec dolor dui, posuere vel et, tincidunt fermentum libero. Quisque maximus diam sed ultricies condimentum. Quisque eu porttitor metus, ut feugiat quam. Nulla nisi massa, condimentum id ac, finibus condimentum sapien. Sed luctus, justo et congue vulputate, lectus neque pulvinar quam, sit amet varius turpis urna facilisis nunc. Phasellus nec magna lobortis, imperdiet magna ut, pulvinar sapien. Morbi bibendum augue eu libero scelerisque porttitor. Aliquam pulvinar risus sed tristique imperdiet. In neque tortor, cursus a consequat sit amet, auctor tristique massa.</p>
121
+ <p id="p72">Nam finibus facilisis diam, et eleifend diam sodales non. Nulla fermentum neque sed ante vehicula vestibulum. Nunc a vulputate risus. Ut convallis turpis ut nulla efficitur molestie. Duis in tortor eget nibh viverra eleifend. Sed a semper quam. Maecenas ut vulputate nisl. Praesent tempus tincidunt aliquet. In porta urna et rhoncus suscipit. Morbi quis urna convallis nunc faucibus aliquam. Suspendisse vitae ante a dolor faucibus placerat. Donec nunc ligula, iaculis non congue in, ultrices nec ante. Nam sit amet libero aliquam, semper magna id, faucibus mauris. Suspendisse accumsan tortor non vestibulum malesuada. Phasellus sed ligula eget neque auctor aliquam.</p>
122
+ <p id="p73">Ut laoreet sit amet lacus sed faucibus. Etiam dui massa, posuere quis dui vitae, vulputate scelerisque erat. Nunc quam urna, iaculis quis velit ac, tincidunt hendrerit elit. Proin malesuada sapien ultrices nibh dapibus, a luctus nibh pulvinar. Ut vestibulum at et volutpat. Morbi ac ipsum quam. Pellentesque non sagittis lectus. Praesent in molestie tellus. Curabitur turpis sapien, cursus ac ante ut, bibendum efficitur elit. Fusce vulputate nunc non lorem faucibus fermentum. Morbi molestie posuere gravida. Integer pulvinar, tortor ut finibus rhoncus, mauris dolor pellentesque mi, eu egestas lorem libero eget odio. Ut a hendrerit purus. Mauris sollicitudin quam nunc, non finibus risus pharetra quis. Morbi enim neque, pharetra sed ornare in, commodo ut nisl.</p>
123
+ <p id="p74">Pellentesque et porta quam. In rutrum turpis id velit fermentum varius. Vivamus mollis tincidunt vehicula. Nunc molestie ipsum purus, sed luctus tellus auctor tincidunt. Phasellus massa neque, blandit ut consequat in, vulputate mollis tellus. Sed aliquam massa et sem ultrices, vel egestas quam mollis. Fusce convallis molestie rhoncus. Nullam consequat tortor orci, vitae sodales elit tincidunt a.</p>
124
+ <p id="p75">Sed sollicitudin ultricies massa, nec vestibulum felis placerat scelerisque. Suspendisse eget justo magna. Aenean sem metus, vestibulum ultrices ornare ut, laoreet quis nulla. Morbi sagittis elementum orci, vestibulum volutpat nulla commodo sed. Maecenas dictum sodales egestas. Sed vel sagittis quam. Maecenas posuere diam ac congue cursus. Nam porttitor interdum ex a fringilla. Etiam et facilisis augue. In hac habitasse platea dictumst. Vivamus interdum venenatis libero eu ultrices. Vivamus vel tellus pellentesque, tempor massa eu, cursus tortor. Suspendisse vel metus et arcu fermentum suscipit.</p>
125
+ <p id="p76">Cras dignissim rhoncus nisi, in elementum augue sodales in. Fusce mollis rutrum nisl quis rhoncus. Sed ac velit lobortis, feugiat odio vel, scelerisque sapien. Praesent justo nulla, venenatis ac nibh eu, interdum egestas ex. Nam tempor quam mauris, ullamcorper iaculis massa volutpat eu. Nam sit amet porta velit, sed ultricies. Quisque sollicitudin pharetra leo non cursus. Quisque sit amet lacus ornare, volutpat arcu et, gravida ipsum. Praesent blandit est eu quam consectetur, sed placerat nibh auctor.</p>
126
+ <p id="p77">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla rutrum orci id sapien molestie, vel tempor fringilla. Sed consequat congue finibus. Mauris venenatis semper efficitur. Cras sit amet non libero malesuada efficitur. Etiam mi quam, consequat a quam vitae, pretium aliquam dui. Etiam gravida, urna vel feugiat imperdiet, odio est ullamcorper sapien, quis pretium enim dolor consectetur tellus.</p>
127
+ <p id="p78">Pellentesque vulputate tincidunt sagittis. Mauris sed tellus ac tellus eleifend rhoncus in finibus lorem. In hac habitasse platea dictumst. Donec consequat bibendum turpis, et hendrerit enim luctus lobortis. Maecenas non dolor rhoncus, ornare felis vel, fringilla dui. Mauris dui nulla, interdum vitae massa in, eleifend volutpat nisl. Aenean consequat quis purus eu pulvinar. Praesent pharetra libero vel dui sollicitudin, egestas egestas felis hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non ante neque. Nunc bibendum sollicitudin ornare.</p>
128
+ <p id="p79">Pellentesque finibus sapien sit amet metus volutpat, non hendrerit diam aliquet. Integer vel rhoncus massa, sed sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque tristique leo a enim bibendum facilisis. Duis a nibh non orci venenatis sodales. Sed efficitur, mauris eu facilisis congue, est ante sollicitudin est, non accumsan quam dui vehicula dolor. Sed pellentesque a turpis et accumsan. Mauris fringilla ac nulla vel vestibulum. Aliquam pulvinar mattis nibh, non aliquet elit blandit ut. Nam eu dignissim sem. Vestibulum finibus tincidunt lacus ut porttitor. Donec eleifend luctus ipsum vel imperdiet.</p>
129
+ <p id="p80">Phasellus a magna et metus iaculis commodo. Vivamus eu laoreet, ac ultrices orci. Aenean mollis urna ac nisl feugiat rhoncus. Quisque ut sapien tincidunt, blandit ipsum nec, semper risus. Suspendisse ac convallis nisl, ut consectetur sapien. Sed egestas erat a semper dictum. Aenean malesuada placerat orci id auctor. Nunc sem lacus, hendrerit id nisi in, faucibus elementum ipsum. Vestibulum porta fringilla libero, ut fermentum ante pulvinar vitae. Mauris tincidunt ac nunc ut dapibus.</p>
130
+ <p id="p81">Nulla nec massa vitae magna varius fermentum at ac erat. Praesent sit amet commodo ipsum, non dapibus sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta magna id varius blandit. Cras id neque vehicula tellus feugiat accumsan non et sapien. Vivamus pretium pretium nunc vitae tincidunt. Phasellus sed neque et nulla pretium pretium ac at tellus.</p>
131
+ <p id="p82">Fusce ac faucibus orci. Pellentesque posuere, erat eget ultrices tincidunt, enim quam dapibus enim, sollicitudin vulputate nisl magna ac odio. Nam ornare aliquet porta. Cras fringilla lacinia tortor non fringilla. Mauris suscipit elementum sagittis. Nam vel mollis massa. Donec ante elit, eleifend ac mi vel, placerat interdum tellus. Morbi varius urna massa, at imperdiet libero lobortis a. Ut ultrices non ante quis fringilla. Nulla mollis consequat dapibus. Suspendisse potenti. Vestibulum ex elit, maximus eu sapien non, porttitor dignissim purus. Donec tempus est lorem, eu consectetur mauris tristique at.</p>
132
+ <p id="p83">Vivamus iaculis feugiat nulla, et eleifend mauris volutpat et. Pellentesque tristique ipsum mauris, sed pretium ante viverra ac. Suspendisse interdum dui vel gravida rutrum. Sed pharetra, lorem eu scelerisque imperdiet, nulla nulla rutrum arcu, id congue mi felis fringilla turpis. Praesent eu metus et lectus pretium pellentesque dictum nec nisl. Fusce posuere enim eu lorem facilisis gravida. Donec eget posuere massa. Donec vitae purus sed nulla eleifend interdum sed a nisl. Maecenas gravida, sem tristique pretium mollis, quam ipsum dapibus massa, a rhoncus quam risus ut elit. Duis sit amet arcu lacus. Suspendisse interdum pharetra suscipit. Sed viverra, metus a blandit posuere, turpis quam mollis augue, in imperdiet ligula felis a elit. Suspendisse imperdiet magna est.</p>
133
+ <p id="p84">Phasellus id purus at dui blandit consectetur at et dolor. Sed nec dignissim erat. Phasellus non mauris convallis, dapibus nisl eget, sodales mauris. Praesent sit amet ultricies libero, malesuada viverra tellus. Integer gravida purus in faucibus vestibulum. Suspendisse tincidunt pretium lorem ac eleifend. Duis nec odio at tellus tempor tempor. Suspendisse non tortor id risus bibendum lacinia et nec augue. Nam varius lectus sit amet dapibus sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris lobortis risus et sem eleifend condimentum. Phasellus efficitur magna nisl, vitae facilisis ante lacinia vel. Aliquam ut semper erat. Nam consectetur massa orci, at venenatis odio fermentum viverra. Curabitur at quam nec urna suscipit ultricies ut non neque.</p>
134
+ <p id="p85">Phasellus posuere vestibulum mauris at vehicula. Phasellus vitae lectus at sapien gravida fringilla. Aliquam pharetra imperdiet est accumsan placerat. Quisque vel orci eget nulla condimentum semper sit amet vitae. Cras ligula velit, laoreet ac imperdiet eget, accumsan ac mi. Nunc convallis molestie metus vitae tempus. Sed pellentesque, neque sed ultricies pulvinar, nisi tellus ullamcorper massa, vitae placerat est libero ut massa. Phasellus eget libero augue. In hac habitasse platea dictumst. Maecenas leo sem, porttitor vitae felis sit amet, lobortis tristique dui. Etiam a fermentum velit. Curabitur odio felis, faucibus ac nisl a, rutrum aliquam mauris.</p>
135
+ <p id="p86">Donec id commodo tellus, quis convallis sapien. Pellentesque sed eleifend mauris. Suspendisse quis hendrerit urna. Nulla porttitor ipsum in pellentesque tristique. Proin consectetur faucibus dui, sagittis accumsan lectus condimentum vel. Cras ac dui ut massa auctor congue. Aliquam ac consectetur metus, at ultrices massa. Quisque ultricies est augue, convallis rhoncus justo faucibus id. Etiam lacinia, ligula eu sagittis mattis, sem nisi efficitur metus, nec ultrices nulla nisi finibus arcu. Curabitur faucibus nunc a quam dignissim, sit amet varius est consequat. Etiam lobortis, erat eget rhoncus laoreet, tortor leo vulputate lacus, non malesuada lacus turpis fringilla massa. Donec porta interdum malesuada. Vivamus orci nisl, vehicula ut facilisis quis, luctus et ligula.</p>
136
+ <p id="p87">Etiam euismod velit magna, a vulputate tellus cursus vitae. Duis at quam ligula. Ut elementum scelerisque ligula, nec varius dolor rhoncus et. Mauris nunc libero, lobortis sed tempor a, bibendum in orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed dui nulla, pellentesque non iaculis ut, fermentum sit amet massa. Vestibulum rhoncus massa non magna viverra, sit amet tincidunt risus pretium. Vivamus id turpis tortor. Nunc sodales sem lacus. Donec sit amet nunc ullamcorper, fermentum purus non, fermentum leo. Phasellus venenatis hendrerit mi, sed posuere risus congue eu.</p>
137
+ <p id="p88">Sed accumsan imperdiet lorem at blandit. Morbi sagittis, quam vitae finibus faucibus, massa est convallis ipsum, ut imperdiet arcu nisi nec. Suspendisse pulvinar libero vitae arcu suscipit ultricies. Nullam volutpat tortor eu tortor varius laoreet. Morbi non ipsum porttitor, sodales nulla nec, accumsan leo. Nunc lacus nunc, malesuada dapibus dictum quis, venenatis a nunc. Nullam a mauris lobortis, tincidunt augue ac, accumsan diam. Maecenas convallis, nunc vitae rhoncus facilisis, urna turpis aliquet diam, et tristique est justo vel felis. Sed non tempus lorem, ac consectetur tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec et arcu a sapien rhoncus tempor. Donec sapien, cursus ut ex eu, volutpat blandit turpis.</p>
138
+ <p id="p89">Curabitur luctus eget nunc viverra gravida. Aliquam eu risus quis libero dignissim sodales. Etiam vel tortor laoreet, convallis nibh at, malesuada risus. Curabitur et semper turpis, at tristique mi. Sed orci massa, interdum ut aliquam a, auctor eget elit. Mauris consectetur lectus, non hendrerit enim posuere a. Integer suscipit eget neque quis pulvinar. Phasellus ullamcorper velit neque, vitae luctus ipsum pulvinar et. Aenean arcu augue, dictum a ligula nec, laoreet lobortis velit. Sed vehicula ipsum nec magna ultricies, vitae imperdiet velit egestas. Vestibulum orci justo, porta ac tellus et, ultrices vestibulum metus.</p>
139
+ <p id="p90">Maecenas posuere augue sit amet gravida volutpat. Morbi efficitur a neque vitae vehicula. Fusce auctor, ligula a lobortis fermentum, sapien neque rutrum nisi, at aliquet nisi velit ut dui. Integer placerat metus ut augue ullamcorper, eu tincidunt sem ornare. Donec augue tortor, gravida vel lacus eu, finibus aliquam massa. Donec blandit in ex ut ornare. Duis condimentum varius magna. Curabitur iaculis ex nisi, sit amet dictum ex vestibulum ac. Pellentesque nunc risus, sollicitudin sed dolor vel, blandit ullamcorper urna. Morbi congue aliquam tellus ac maximus. In accumsan, turpis quis maximus vestibulum, risus elit placerat magna, a pretium metus mauris ut nisi. Nam at lorem mi. Sed eu massa sit amet mi tempor euismod hendrerit non lectus. Integer tempus et nulla at placerat. Sed efficitur sem egestas, tristique rhoncus, consequat purus. Praesent ac elementum velit, sed elementum libero.</p>
140
+ <p id="p91">Suspendisse vestibulum quam et nisl vestibulum, et tristique odio maximus. Proin et laoreet. Duis consectetur dictum tincidunt. Quisque sit amet neque consectetur ipsum facilisis dapibus. Etiam tortor neque, semper et tellus tristique, tincidunt aliquam urna. Duis lacinia, felis at feugiat elementum, nulla elit finibus est, nec aliquet nisi massa sed nibh. Phasellus porta iaculis dolor, ut dignissim odio fringilla quis. Sed maximus eleifend sapien vitae faucibus. Phasellus gravida sollicitudin dui vel tempus. Phasellus sagittis nulla nec interdum porttitor. Donec lacus metus, lacinia eu viverra eget, iaculis sed est.</p>
141
+ <p id="p92">Mauris vitae arcu imperdiet, mollis sapien auctor, rhoncus enim. Etiam dapibus mollis lectus vitae venenatis. Vivamus sed maximus elit, sit amet tristique ante. Sed felis neque, placerat eget convallis pretium, luctus ut ligula. Aliquam erat volutpat. Mauris a fringilla augue. Duis euismod turpis id scelerisque hendrerit. Aliquam erat volutpat.</p>
142
+ <p id="p93">Aenean vitae pulvinar ipsum. Suspendisse potenti. Aliquam imperdiet sem in turpis gravida lobortis. Donec egestas at lectus a ultricies. Donec tincidunt massa et egestas volutpat. Duis lacinia scelerisque faucibus. Donec non efficitur metus. Phasellus sit amet lacus. Pellentesque vestibulum, est quis hendrerit mattis, arcu dolor bibendum tellus, vitae commodo velit dui nec nisl. Etiam ut congue tellus. Nulla a ex tortor. Vivamus iaculis hendrerit libero porta dignissim. In a mattis diam. Maecenas vulputate lacus ac leo scelerisque, luctus euismod metus lacinia. Proin placerat luctus quam a pretium.</p>
143
+ <p id="p94">Integer quis tempor dui. Curabitur congue nisi vel libero condimentum, et molestie lectus pulvinar. Fusce porta nibh eget commodo iaculis. Phasellus eu ullamcorper ante. Curabitur nec elementum leo. Phasellus quis lacus nisl. Vivamus sagittis, orci quis feugiat tincidunt, leo ex posuere lectus, vel venenatis enim ante nec leo. Sed magna ligula, suscipit tristique commodo nec, rutrum ac lacus. Donec justo nibh, euismod a et, cursus finibus ex. Phasellus at libero vulputate, imperdiet ex eu, maximus ante. Nullam augue elit, aliquet nec ex ut, vestibulum eleifend est. Quisque magna nulla, tristique eu luctus at, dictum in ligula. Ut semper iaculis enim in luctus.</p>
144
+ <p id="p95">Proin tincidunt metus id tincidunt fringilla. Aliquam imperdiet porttitor urna quis lobortis. Praesent tempor sed sapien id accumsan. Sed enim ex, vulputate a facilisis in, maximus tincidunt libero. In nec pretium dolor porta viverra in ac dolor. Vestibulum in ligula ligula. Integer et vulputate velit, at pretium enim. Ut vitae magna eu ante sodales bibendum eget eu ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ac venenatis nisi.</p>
145
+ <p id="p96">Donec auctor rhoncus ullamcorper. Aliquam erat volutpat. In eget sapien vel nisi dictum pharetra in sit amet neque. Integer vel molestie tortor. Morbi maximus turpis at nisi aliquam pulvinar id ut lorem. Aenean faucibus suscipit sollicitudin. Nulla diam tellus, porta eget enim vel, viverra interdum est.</p>
146
+ <p id="p97">Maecenas mollis ex id dui finibus, at aliquet lorem feugiat. Maecenas sodales tortor semper ante vehicula, a efficitur velit tincidunt. Vestibulum nec imperdiet ex. Nulla facilisi. Integer vitae scelerisque magna. Duis non dapibus diam, vel mattis massa. Vivamus ut sodales metus. Donec interdum consequat magna at feugiat.</p>
147
+ <p id="p98">Cras nibh tellus, vulputate in cursus molestie, accumsan sit amet velit. Morbi vestibulum commodo vehicula. Proin malesuada, augue sit amet sagittis varius, lectus lacus dignissim ex, non cursus elit enim sed dui. Cras sodales hendrerit dolor, ac porttitor elit laoreet vitae. Sed in volutpat dui. Morbi commodo neque eget urna tincidunt tempor. Donec bibendum posuere elementum. Etiam ultricies dui vitae cursus auctor. Fusce fermentum faucibus est eu bibendum. Sed sollicitudin diam ac nisl consequat, et auctor ipsum gravida. Duis congue metus et volutpat commodo. Mauris sed porta nulla. Quisque ligula ligula, volutpat in urna nec, vehicula rhoncus turpis. Donec porttitor scelerisque tellus, quis tristique nibh ullamcorper nec. In feugiat eleifend odio tempus pulvinar. Suspendisse facilisis odio ac tellus tincidunt volutpat.</p>
148
+ <p id="p99">Sed viverra ex lectus, sit amet pellentesque ex ultrices fringilla. Donec ut venenatis lectus. Vestibulum fringilla lorem nec odio vestibulum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer placerat nisl ut felis vestibulum, posuere dignissim erat tempor. Suspendisse sed est eu turpis vulputate vulputate placerat in mauris. Aenean finibus congue risus et efficitur. Nam porttitor nisi at mollis fermentum. Suspendisse auctor hendrerit tempus. Morbi dictum erat lectus, et volutpat massa pharetra a. Morbi posuere, lorem id ornare commodo, justo risus semper ligula, nec tincidunt risus erat non arcu. Aliquam et convallis mi.</p>
149
+ <p id="p100">Duis quam dui, tincidunt nec elementum vitae, viverra quis augue. Curabitur efficitur suscipit luctus. Ut efficitur sed augue a vestibulum. Ut ac nibh elit. Etiam nulla odio, pretium ut bibendum eu, facilisis eu nulla. In hac habitasse platea dictumst. Praesent leo est, malesuada eu sapien sit amet, posuere efficitur ante. Quisque consequat lectus at ante cursus accumsan. Praesent nec dolor ac odio porttitor vestibulum at vel diam. Vestibulum libero mi, eleifend sit amet nibh non, interdum ultrices orci. Nam vestibulum rhoncus dolor. Quisque eget ante eu diam ultricies sagittis euismod sit amet nulla. Cras volutpat ante in tortor vestibulum, a semper ipsum facilisis. Aenean id neque turpis. Nam magna sapien, placerat non lectus eu, tincidunt accumsan.</p>
150
+ </main>
151
+
152
+ <script>
153
+ // Get URL query parameters
154
+ const url = new URL(window.location.href);
155
+ const loadParameters = {
156
+ drawingMode: url.searchParams.get('drawingMode') || 'svg',
157
+ overlap: (url.searchParams.get('overlap') || 'true') === 'true',
158
+ wrappers: (url.searchParams.get('wrappers') || 'false') === 'true',
159
+ limit: Number.parseInt(url.searchParams.get('limit') || '5000'),
160
+ version: url.searchParams.get('version') || '',
161
+ }
162
+
163
+ // Define highlights
164
+ const highlights = [];
165
+ const colors = ['red', 'orange', 'yellow', 'green', 'blue'];
166
+ const numbers = [null, null, null, 5, 6, 7, 8, 9, 10, 11, 12, 13];
167
+ for (const paragraph of document.querySelectorAll('main [id]')) {
168
+ let wordOffset = 0;
169
+ const text = paragraph.textContent;
170
+ const words = text.split(' ');
171
+ const characterCount = text.length;
172
+ for (let i = 0; i < words.length; i++) {
173
+ if (highlights.length === loadParameters.limit) break;
174
+ const randomColor = colors[Math.floor(Math.random() * colors.length)];
175
+ const startOffset = wordOffset;
176
+ wordOffset = startOffset + words[i].length + 1;
177
+ if (loadParameters.overlap) {
178
+ const randomNumber = numbers[Math.floor(Math.random() * numbers.length)];
179
+ const endOffset = startOffset + randomNumber;
180
+ if (!randomNumber || endOffset >= characterCount) continue;
181
+ highlights.push({
182
+ wrapper: loadParameters.wrappers ? 'screen-reader-label' : null,
183
+ variables: loadParameters.wrappers ? { 'startLabel': 'start', 'endLabel': 'end' } : null,
184
+ highlightId: `${paragraph.id}_${startOffset}`,
185
+ color: randomColor, style: 'fill',
186
+ startParagraphId: paragraph.id, startParagraphOffset: startOffset,
187
+ endParagraphId: paragraph.id, endParagraphOffset: endOffset,
188
+ });
189
+ } else {
190
+ const endOffset = startOffset + words[i].length;
191
+ highlights.push({
192
+ highlightId: `${paragraph.id}_${startOffset}`,
193
+ color: randomColor, style: 'fill',
194
+ startParagraphId: paragraph.id, startParagraphOffset: startOffset,
195
+ endParagraphId: paragraph.id, endParagraphOffset: endOffset,
196
+ });
197
+ }
25
198
  }
26
199
  }
27
- }
28
- &::backdrop {
29
- background-color: hsla(0, 0%, 0%, 0.5);
30
- }
31
- }
32
- </style>
33
200
 
34
- <h1><span id="highlights-count"></span> Highlights <small id="time-to-load"></small></h1>
35
- <p>
36
- <label><input type="checkbox" id="hh-snap-to-word"> Snap to word</label>
37
- </p>
38
- <p>
39
- Drawing mode:<br>
40
- <label><input type="radio" name="hh-drawing-mode" value="svg" checked> SVG shapes</label><br>
41
- <label><input type="radio" name="hh-drawing-mode" value="highlight-api"> Custom Highlight API</label><br>
42
- <label><input type="radio" name="hh-drawing-mode" value="mark-elements"> HTML mark elements</label><br>
43
- </p>
201
+ // Define options
202
+ const containerSelector = 'main';
203
+ const paragraphSelector = 'main [id]';
204
+ const currentOptions = {
205
+ containerSelector: containerSelector, // For pre-1.0 versions
206
+ paragraphSelector: paragraphSelector, // For pre-1.0 versions
207
+ drawingMode: loadParameters.drawingMode,
208
+ };
44
209
 
45
- <main>
46
- <p id="p1">Lorem ipsum odor amet, consectetuer adipiscing elit. Habitant facilisi erat pulvinar luctus faucibus pharetra porttitor. Erat natoque fermentum ultrices donec, ornare dapibus vulputate semper. Sagittis laoreet ornare ipsum vivamus morbi vehicula venenatis. Aliquet finibus id primis nibh metus nulla molestie. Duis congue ut turpis turpis lacus. Eget nostra est est nisl cursus id.</p>
47
- <p id="p2">Dui nam eget auctor dignissim mi curabitur sollicitudin magnis purus. Fringilla nec quisque ultricies lectus viverra nullam pharetra vulputate per. Aptent penatibus nam taciti fames ac. Aptent tempor fusce ut elementum vehicula mus. Pellentesque habitant rhoncus diam duis odio magna vehicula morbi senectus. Ut posuere ex conubia sem fermentum ridiculus diam finibus molestie. Maximus donec neque donec potenti etiam aliquam.</p>
48
- <p id="p3">Malesuada pellentesque ultricies egestas maecenas; sed dis per sollicitudin per. Penatibus etiam habitant proin enim neque tristique sociosqu. Porttitor finibus tristique duis velit primis dolor risus lacus. Efficitur non cursus nulla luctus ex curabitur cursus per. Ligula facilisi nunc tempus commodo habitant. Eget maximus parturient tempus, malesuada est phasellus suspendisse dignissim elementum. Accumsan convallis viverra posuere nam aenean ornare maecenas scelerisque.</p>
49
- <p id="p4">Ultricies nisl nascetur lacus arcu tellus, mollis vel. Non finibus phasellus quis varius diam elementum fermentum semper eget. Aliquet imperdiet pharetra molestie lobortis est taciti; finibus nec placerat. Enim iaculis fringilla feugiat eget ligula integer consequat molestie. Class tortor porttitor phasellus sodales duis eget netus rutrum. Praesent fringilla nam placerat ridiculus eleifend sodales duis. Nullam maecenas duis donec tempus facilisi accumsan nec condimentum.</p>
50
- <p id="p5">Accumsan dapibus mus elementum tortor dolor habitasse primis. Donec viverra hendrerit ornare venenatis turpis. Ac id habitant ultricies netus tempor eros. Aptent gravida posuere pellentesque condimentum senectus justo vivamus. Massa pharetra mollis, posuere est urna class. Risus arcu tempor consectetur quisque aliquam adipiscing ipsum. Sit nullam velit elit quis et convallis a efficitur. Penatibus dis auctor vitae diam lacinia; tincidunt nullam senectus. Adipiscing platea vulputate id tincidunt primis, efficitur vivamus ipsum.</p>
51
- <p id="p6">Tellus pellentesque justo, aenean turpis nibh proin. Pretium aliquet accumsan mollis phasellus taciti lacus lobortis. Senectus vivamus inceptos quam aenean eget. Tempor sapien aptent proin purus sagittis feugiat primis proin. Potenti lobortis sit proin orci condimentum. Eu magnis elit quam eros curae interdum augue euismod aliquet. Posuere nec efficitur mus, dui nostra inceptos mattis. Hendrerit eleifend nisi ultrices luctus proin orci non.</p>
52
- <p id="p7">Egestas finibus montes cras vitae aliquam per tristique. Fusce ultrices iaculis; semper turpis semper habitasse nam? Condimentum cursus facilisis inceptos magnis tempor efficitur ultrices. Aenean velit ex vel neque molestie himenaeos tempus efficitur eros. Maecenas sapien diam volutpat ac eros eget mus! Auctor suspendisse id feugiat parturient elit. Et penatibus donec auctor egestas consequat integer. Elit pharetra inceptos sem quisque libero. Nunc tempor per fusce efficitur consequat fusce nisi interdum.</p>
53
- <p id="p8">Fames suspendisse orci sodales; vitae mattis dignissim. Laoreet potenti volutpat lacus suspendisse metus pellentesque convallis quisque. Eros ut egestas turpis viverra eleifend lobortis ultrices sollicitudin. Pharetra viverra penatibus conubia eros dui mauris dolor cubilia? Hac lacinia fames malesuada semper sagittis lacus dapibus eu. Turpis dis justo nec elit pulvinar rutrum nibh ultrices. Lacinia per ornare molestie inceptos maximus vivamus quis.</p>
54
- <p id="p9">Rutrum nec mauris fusce a faucibus. Nullam egestas arcu congue platea suscipit malesuada. Ultricies nascetur pulvinar ex himenaeos habitant at quisque. Condimentum quis vel feugiat at ligula curae urna pharetra sit. Dictum mi turpis dapibus proin nullam mi pulvinar. Ipsum pellentesque varius bibendum placerat egestas tempor sit. Massa venenatis consectetur vehicula vulputate metus, est egestas porta.</p>
55
- <p id="p10">Euismod tincidunt ridiculus neque ullamcorper eget suspendisse maximus arcu. Placerat consectetur dignissim tincidunt odio at vitae id. Venenatis torquent dui parturient, tincidunt vehicula libero. Luctus nibh purus taciti maecenas tincidunt aenean quam metus. Donec quis auctor efficitur per class vivamus sodales ullamcorper blandit. Consequat eros vitae ornare euismod imperdiet metus elit. Quis convallis platea phasellus commodo montes fusce viverra odio. Enim tristique dictum turpis gravida porta suscipit. Sollicitudin ligula phasellus nec ornare lectus dictumst class.</p>
56
- <p id="p11">Semper nostra ornare ultricies enim ante aenean; mattis nam leo. Commodo himenaeos rutrum libero nunc vestibulum montes. Dui primis class blandit quisque volutpat dignissim. Faucibus nulla amet neque finibus condimentum metus. Aliquam nunc convallis et eget varius nullam in blandit. Gravida malesuada lacinia turpis gravida, aptent quam aliquam viverra dictum. Parturient amet id lacinia est est suspendisse. Hac suscipit turpis tellus fames dapibus erat blandit id. Urna a facilisi vehicula, sapien rutrum torquent mattis. Vel erat laoreet fermentum rhoncus eleifend, lectus lacus.</p>
57
- <p id="p12">Eget lacinia luctus per fringilla vel dictum proin. Sem sodales elementum, felis eu quisque ornare. Egestas morbi dis sociosqu nascetur enim dignissim! Egestas tristique mi vestibulum sed taciti morbi senectus efficitur. Porta feugiat cubilia eu ad fusce natoque. Venenatis nascetur fermentum eros eget luctus id. Placerat porttitor id metus vitae fringilla tincidunt nascetur.</p>
58
- <p id="p13">Morbi massa sagittis vehicula ante penatibus natoque metus dolor. Hac finibus accumsan pellentesque taciti facilisi odio semper metus. Lorem malesuada phasellus nunc felis parturient maximus eleifend torquent. Pretium suscipit euismod phasellus ultrices sem leo interdum duis. Blandit platea dis class mollis nostra. Gravida facilisis ligula non malesuada quam efficitur finibus tellus. Tellus gravida et finibus enim ullamcorper magna gravida dis. Interdum justo viverra sapien aptent ipsum litora est lobortis aptent?</p>
59
- <p id="p14">Tempus gravida porttitor fringilla, justo magnis sagittis iaculis. At consequat non tellus scelerisque lectus penatibus aptent consectetur eget. Ex porttitor ad nam magnis ligula odio? Sed justo malesuada nascetur venenatis elit placerat potenti nascetur. Habitasse nisi magnis vestibulum ipsum natoque. Cubilia proin a hac maximus gravida risus, blandit ut. Ex integer iaculis velit habitant pharetra auctor. Proin justo eget fringilla primis ac nisi montes lacinia platea. Sed aenean in tellus neque vehicula purus placerat sem.</p>
60
- <p id="p15">At conubia dictum neque senectus suspendisse vivamus rhoncus justo. Litora cubilia ridiculus sollicitudin hac, volutpat dignissim venenatis arcu. Efficitur urna turpis suspendisse ut duis dignissim cras nascetur. Curae porttitor ultrices hendrerit; nostra fames litora. Pulvinar malesuada euismod dapibus ut placerat metus. Faucibus quam tempus, malesuada id nascetur varius magna. Vel egestas lobortis viverra iaculis nibh, fringilla purus blandit dignissim. Rutrum consectetur nam arcu amet massa feugiat, himenaeos pellentesque nam.</p>
61
- <p id="p16">Consectetur nibh aptent convallis eget blandit, pretium euismod eleifend consectetur. Tortor sagittis nisl lectus molestie convallis himenaeos. Pulvinar egestas nec varius porttitor aliquet nec. Praesent hendrerit ligula velit porttitor parturient. Phasellus nam taciti vivamus eros, condimentum vel at mus conubia. Ultrices mus metus augue senectus ac.</p>
62
- <p id="p17">Ut consectetur enim class porttitor fusce lacinia. Semper iaculis viverra odio fames vel sem duis vivamus. Dui phasellus tristique hac ipsum ex cras neque enim metus. Sed platea tempor sem magnis pulvinar morbi ultrices? Consequat gravida vel; felis leo dis nam. Ligula feugiat malesuada nisi vestibulum libero? Dictum ullamcorper enim suspendisse; vestibulum laoreet purus mauris. Vivamus facilisi sociosqu class orci vitae volutpat. Ac ipsum cras in metus quisque duis phasellus vehicula.</p>
63
- <p id="p18">Senectus interdum lobortis arcu sagittis amet morbi. Ultrices sagittis feugiat fermentum justo consequat, volutpat dolor. Ipsum tortor mollis feugiat sodales hac at. Tempus ligula nibh hac torquent in nec. Enim nunc orci praesent euismod cras curae habitant. Feugiat habitasse molestie nisi ad suscipit vitae. Convallis eleifend mi nibh, habitant pharetra libero. Ornare dignissim lacinia conubia aliquet aptent primis. Ante mus fames est in nascetur dis fusce morbi. Ad facilisis praesent vestibulum mus quis sodales pretium.</p>
64
- <p id="p19">Ante ipsum nec adipiscing vitae nullam pretium; euismod massa malesuada. Turpis cras duis sed erat nascetur mollis inceptos luctus quam. Mattis accumsan euismod malesuada finibus magnis curae. Consectetur pharetra penatibus ullamcorper convallis curabitur rhoncus tempor euismod. Aptent ut etiam sem nisl facilisis eros dolor accumsan. Tristique faucibus laoreet accumsan sapien scelerisque senectus mus. Nulla curabitur a litora eleifend mi vitae.</p>
65
- <p id="p20">Risus lobortis mus sem etiam id tincidunt. Ipsum habitasse sagittis odio ante libero felis. Leo nascetur nascetur massa curae odio amet adipiscing class. Pellentesque posuere potenti blandit himenaeos, ligula cursus dolor ipsum. Suspendisse ut cubilia pretium mauris cubilia aptent suscipit justo. Convallis congue mollis purus ipsum pharetra erat mattis faucibus. Vulputate eros dignissim mi fringilla massa elementum placerat quis. Tellus adipiscing auctor vitae molestie condimentum. Vestibulum ipsum natoque dui odio sociosqu dis ad suspendisse leo. Magnis placerat lacus sem a nisi praesent suscipit.</p>
66
- <p id="p21">Semper fermentum tincidunt eros semper aliquam aenean inceptos. Elit elementum augue rutrum orci per tortor sodales senectus augue. Nulla aliquam mus sapien diam sem venenatis eu. Quam montes nullam phasellus nec eros arcu auctor venenatis. Habitasse urna primis laoreet finibus etiam felis condimentum. Habitasse pellentesque rutrum sapien ornare erat senectus? Sollicitudin malesuada pellentesque felis nam tincidunt scelerisque?</p>
67
- <p id="p22">Ornare per lobortis himenaeos lobortis integer. Eros feugiat cras et sagittis; torquent erat metus. Enim blandit cursus felis nostra augue litora. Diam praesent placerat senectus mollis dolor sit nascetur. Proin nunc lobortis arcu blandit libero aliquet morbi urna vestibulum. Congue nulla proin sagittis senectus ac elit nostra. Donec libero ultricies luctus orci efficitur. Tristique adipiscing fusce molestie metus at neque augue. Habitant taciti est mus id proin ultrices praesent at auctor.</p>
68
- <p id="p23">Nascetur mus fringilla pulvinar porta adipiscing nec vulputate iaculis. Porttitor torquent condimentum; nibh sociosqu ridiculus volutpat. Vivamus sodales pulvinar lectus hac etiam nec mauris arcu. Arcu class lacinia nam scelerisque curae. Litora laoreet curabitur sapien; tempus senectus accumsan id. Odio mollis aliquet maximus ullamcorper sapien euismod odio. Nullam urna tellus cras tempor nostra nulla litora donec. Lobortis orci ut pretium maecenas leo commodo. Platea risus pellentesque diam per; praesent metus vel ultrices hac.</p>
69
- <p id="p24">Auctor non phasellus id molestie libero conubia. Amet porttitor vulputate natoque hac ipsum iaculis conubia. Fermentum placerat dictum at; egestas massa nec lacus placerat. Nostra id odio; ad mollis curae nam. Integer sem tempor pellentesque class consectetur placerat non suspendisse scelerisque. Bibendum eros enim sit pellentesque inceptos felis justo urna. Litora odio justo est amet ridiculus urna. Sollicitudin justo sed mollis sodales integer bibendum pulvinar phasellus semper. Egestas himenaeos maecenas sed mattis integer aliquam urna.</p>
70
- <p id="p25">Nisi risus eu placerat amet hendrerit sapien facilisi sed. Vel est vel nunc cursus, purus penatibus. Porttitor tincidunt dui feugiat ut mus per. Proin massa sit sociosqu vel varius in velit. Ipsum faucibus luctus pulvinar vitae mus ridiculus velit vivamus leo. Purus cras urna tempor congue quis maximus.</p>
71
- <p id="p26">Felis aliquet dignissim est sodales lacinia tortor porttitor vestibulum. Diam tristique vitae tempus facilisi fringilla ultricies nullam ut litora. Ullamcorper elit porttitor dapibus metus etiam adipiscing conubia et nibh. Integer purus nostra id sed neque penatibus imperdiet tellus. Tortor varius interdum per erat cursus vivamus nec nec. Venenatis fringilla varius maecenas vehicula tempus ex sit. Habitasse ullamcorper neque non fermentum sed pharetra massa enim.</p>
72
- <p id="p27">Convallis cras rutrum natoque elementum vestibulum magna non. Enim per curae conubia tempus justo sociosqu velit. Morbi augue est dis mattis inceptos. Eget lectus justo metus ipsum himenaeos. Per nisi quam mus id fusce at nec. Elit aliquam blandit sagittis neque dapibus, malesuada morbi vehicula ad. Per lobortis vivamus laoreet facilisis cubilia morbi dui.</p>
73
- <p id="p28">Nibh dolor adipiscing mauris congue libero morbi consectetur elementum. Curae condimentum senectus cursus fermentum commodo. Fermentum fusce ultrices dapibus quam conubia tempus adipiscing nunc faucibus. Cras ligula per aliquet sodales platea montes donec fermentum venenatis. Tortor netus feugiat nulla commodo litora conubia aptent torquent. Mauris libero lacinia non conubia nec rhoncus iaculis justo. Hendrerit cras nunc volutpat id aptent lacus natoque. Finibus porta ridiculus volutpat enim ipsum.</p>
74
- <p id="p29">Neque non arcu risus nascetur id; varius tristique. Netus mauris nunc nibh aenean mattis fringilla proin felis. Primis vehicula blandit aptent aenean ornare lobortis luctus ad. Blandit rhoncus interdum elit curabitur fusce sollicitudin facilisis. Habitasse nisi ullamcorper euismod imperdiet laoreet ullamcorper. Primis maximus netus natoque phasellus ridiculus metus.</p>
75
- <p id="p30">Aptent mi ut, ridiculus porttitor himenaeos etiam montes. Condimentum dolor consectetur viverra; malesuada sed viverra. Sociosqu leo aliquet ipsum non efficitur vel consectetur? Rhoncus elementum erat platea pharetra diam sollicitudin. Justo finibus penatibus magnis quis vestibulum justo consequat. Vitae cras primis bibendum taciti montes tincidunt turpis efficitur maximus. Interdum sed fusce dictumst mattis sagittis odio metus lorem. Rutrum nostra cras eros felis, maecenas nascetur erat quisque.</p>
76
- <p id="p31">Habitasse curabitur neque libero tincidunt rutrum porttitor rhoncus mus. Dolor nunc congue eros lorem morbi ac commodo tempus venenatis. Arhoncus habitasse nec euismod magna montes. Efficitur magnis mollis iaculis ut dictum convallis ipsum bibendum. Facilisis senectus himenaeos morbi fringilla in. Nascetur interdum per tincidunt adipiscing rutrum etiam auctor ultrices congue. Euismod praesent finibus tempus rutrum suscipit morbi accumsan. Felis lacus eros odio semper gravida ullamcorper convallis consequat commodo. Ultricies lobortis nisl interdum vivamus eros cubilia nam.</p>
77
- <p id="p32">Conubia pretium nascetur amet quisque quis. Curae justo sodales facilisi metus faucibus taciti placerat quisque. Fermentum fames gravida, primis imperdiet duis libero. Eget orci vestibulum risus lacus faucibus cursus. Vel orci finibus at; suscipit duis duis dui netus. Diam praesent natoque primis dis maximus. Porttitor tortor sollicitudin litora ut senectus eros amet a.</p>
78
- <p id="p33">Facilisis pretium hac curabitur nisi lacus dolor platea. Congue mus aliquam pharetra ante nibh urna nascetur. Sagittis luctus commodo facilisis tellus ad hac. Fames nibh per ac eget vivamus. Habitant enim fermentum class condimentum dignissim dictum posuere a pulvinar. Cubilia fermentum porta lobortis urna enim.</p>
79
- <p id="p34">Condimentum fames molestie himenaeos lacus ultrices eleifend. Hendrerit in massa dignissim suspendisse ullamcorper cursus lacus. Mauris molestie porttitor lobortis fringilla pretium cubilia himenaeos dictum. Dolor nulla leo facilisis dolor ridiculus sollicitudin. Class habitasse conubia laoreet litora fermentum risus pellentesque senectus mus. Rhoncus pulvinar nisl id laoreet, convallis euismod metus. Pretium bibendum magna nulla fringilla arcu lacus urna. Netus sollicitudin hac venenatis integer conubia vitae dolor gravida. Tellus vehicula senectus iaculis facilisi facilisis turpis primis fusce. Erat vitae lacinia; sed turpis vitae vestibulum penatibus laoreet ante.</p>
80
- <p id="p35">Interdum leo magnis condimentum sed finibus netus ad purus. Integer odio platea cursus vitae efficitur; rutrum semper. Cubilia montes enim libero nam morbi potenti magna torquent venenatis. Dui senectus lobortis nunc nec phasellus semper donec. Egestas sociosqu conubia consectetur vulputate curae lobortis tincidunt erat nullam. Aliquam dolor ut potenti; pellentesque nibh ad condimentum. Placerat metus dignissim iaculis posuere ut commodo pellentesque imperdiet ut. Pretium adipiscing dictum curae sem class placerat ridiculus vitae volutpat. At a ligula tempus nullam pretium.</p>
81
- <p id="p36">Semper fusce massa rhoncus non nullam. Eleifend litora mi, fringilla ad lectus facilisi. Potenti felis eros bibendum donec pulvinar accumsan platea egestas velit. Aliquam pretium dui rutrum dolor; diam praesent. Habitant senectus tortor faucibus tempus pharetra, lacinia integer. Id per purus varius maecenas amet nisl vitae tempor. Egestas nunc pulvinar id taciti congue vel.</p>
82
- <p id="p37">Enim elit lacinia elit ad vulputate dapibus. Diam dignissim odio tristique platea; habitasse rhoncus? Tincidunt venenatis rhoncus eros nam nulla accumsan elit euismod. Nunc lacinia lacus magnis ut curae ornare enim. Maecenas dis non dolor bibendum, sodales elementum fusce porta. Condimentum orci aenean himenaeos faucibus dolor neque faucibus nisi. Augue duis finibus pellentesque volutpat orci nascetur. Vivamus a posuere massa habitasse non. Sagittis interdum dapibus donec ad suspendisse nisi quis. Feugiat placerat euismod efficitur efficitur vehicula.</p>
83
- <p id="p38">Tempus dui dui vehicula non; ad neque ullamcorper. Taciti etiam dapibus nam lacus et, sollicitudin commodo feugiat. Vivamus aliquet sapien fermentum vulputate hac iaculis. Consequat consectetur ut integer natoque ligula laoreet. Ornare risus scelerisque augue eget nibh posuere interdum sagittis. Elit placerat accumsan varius magna ac a fringilla. Taciti tincidunt eu dignissim hendrerit libero.</p>
84
- <p id="p39">Quis sociosqu metus scelerisque habitant mollis nascetur magna. Blandit cras massa quis gravida amet habitasse. Augue magna ullamcorper mollis sollicitudin vivamus nisl. Lacus dapibus tincidunt netus convallis vivamus, leo natoque accumsan ornare. Dignissim phasellus orci congue; taciti rhoncus curae. Dictum ut ridiculus ligula urna curae sapien tempor viverra. Conubia potenti augue leo, nunc magnis efficitur.</p>
85
- <p id="p40">Massa suspendisse tortor pretium sit, sociosqu nulla. Commodo imperdiet ex dignissim sagittis et parturient suscipit consectetur tristique. Dis aliquet amet adipiscing lectus accumsan nisl curabitur tempor. Sociosqu nullam maecenas tempus velit laoreet tortor laoreet pharetra potenti? Aliquam netus senectus conubia lorem placerat etiam dui. Cras malesuada morbi turpis tristique suspendisse platea. Mollis metus nascetur id natoque ante primis ex aliquet. Morbi tristique porta inceptos donec eleifend.</p>
86
- <p id="p41">Justo rutrum molestie eget habitant aliquam ultrices; penatibus curabitur. Velit per nulla, ornare faucibus per vivamus ullamcorper nam. Himenaeos euismod lacinia vitae pretium consequat per egestas class. Felis egestas maecenas dui libero inceptos montes molestie. Rutrum eros vehicula dis libero gravida tempor libero. Sem habitasse malesuada ullamcorper placerat mus mi nulla magnis. Lectus lectus integer malesuada, vestibulum amet habitasse. Ante mi justo elementum potenti leo tortor euismod. Fames metus primis in id ante ultrices in suspendisse. Efficitur duis metus pretium tempus eu vehicula magna.</p>
87
- <p id="p42">Adipiscing mauris vivamus dolor semper pulvinar dui praesent. Natoque tincidunt venenatis; dolor senectus posuere tincidunt. Eget aliquam vulputate quis pulvinar integer luctus auctor leo fermentum. Sollicitudin leo faucibus praesent integer ultrices mus vehicula maecenas. Diam dictum blandit urna sociosqu diam. Hac iaculis augue eros, est velit odio. Viverra risus vitae urna quisque velit per ultricies. Mattis nunc hendrerit fringilla turpis et ut dapibus vehicula.</p>
88
- <p id="p43">Elit nibh porta etiam cras duis eros justo orci suscipit. Enim ultricies vel ante; aptent augue himenaeos. Duis ultrices malesuada lacus fames; hac platea gravida habitasse orci. Ex magnis torquent etiam imperdiet finibus dolor blandit. Nostra varius finibus est imperdiet porttitor penatibus per potenti. Platea volutpat risus magna tellus cursus arcu eleifend. Sed tincidunt iaculis ipsum consequat a? Eu finibus volutpat pharetra odio aliquam nisi. Ad eget est augue; tristique vitae sapien montes malesuada.</p>
89
- <p id="p44">Porta arcu elementum aptent tristique porttitor porttitor scelerisque nisl. Sodales ante rhoncus mauris faucibus potenti vulputate. Rhoncus tristique eros augue convallis senectus ornare parturient class sociosqu. Augue felis quisque magnis gravida ex. Ex faucibus iaculis vulputate dui maecenas rutrum tempor congue. Curae erat praesent nisl odio duis tempus neque tempus dis. Dolor tellus vulputate nec rhoncus; varius vitae diam hac. Turpis gravida leo habitasse ridiculus quis pulvinar nulla.</p>
90
- <p id="p45">Himenaeos fermentum amet sociosqu morbi, quisque ad convallis conubia. Velit feugiat metus natoque ornare porttitor, suscipit nullam tempus vitae. Bibendum maximus posuere varius lacinia neque pulvinar ultrices habitant vivamus. Montes maecenas lacinia mauris sagittis tincidunt posuere torquent consequat. Sem tincidunt urna metus sem at, ut semper a. Semper hendrerit semper est conubia enim libero himenaeos. Mollis inceptos est suspendisse suspendisse natoque. Fusce nisi gravida scelerisque tellus in; viverra fermentum justo. Class erat magna dui tempus massa vivamus dui eros.</p>
91
- <p id="p46">Ultricies malesuada mi porta; convallis mi parturient. Nunc lectus non vulputate dui ultrices; tristique dis. Nulla ante quam penatibus fringilla morbi. Torquent ultricies dui proin nisi sollicitudin commodo ornare class. Integer curabitur maecenas sodales commodo metus nibh himenaeos. Convallis aptent eleifend magna quam risus id maecenas etiam neque. Maecenas aptent eleifend sollicitudin tincidunt, risus conubia eu vehicula volutpat.</p>
92
- <p id="p47">Lobortis efficitur libero suspendisse dictum blandit ultrices? Vel lacinia malesuada et placerat curae augue. Pellentesque egestas blandit tristique tincidunt gravida laoreet tortor felis aptent. Urna vivamus mi volutpat faucibus nostra parturient nec. Luctus et dis rutrum nulla primis sit. Dignissim proin sodales pellentesque mattis dui urna eget venenatis auctor. Aliquet tristique blandit ullamcorper auctor donec tempus? Quis lobortis tristique montes; curabitur at potenti aliquam fringilla curae.</p>
93
- <p id="p48">Arcu odio ornare eros fames mus. Morbi placerat turpis hendrerit rutrum netus nulla. Tortor tellus habitant consectetur vulputate aliquam tempor taciti gravida. Asem tempus amet curabitur, nibh vehicula rhoncus tincidunt. Vitae imperdiet sapien velit vestibulum condimentum. Risus facilisis mattis euismod, lacus elit condimentum placerat. Nec nascetur habitasse ipsum parturient magna. Consequat risus taciti dui; erat convallis elementum aenean. Feugiat suspendisse cursus ad pellentesque integer aptent pulvinar. Maecenas fames id vivamus faucibus tortor.</p>
94
- <p id="p49">Cursus sociosqu cursus quis quam habitasse. Phasellus arcu hac faucibus himenaeos vel turpis hac. Taciti iaculis per conubia turpis malesuada per a? Tortor mattis vestibulum tortor eleifend ipsum class orci elit. Amet diam vivamus tempus at himenaeos lacus vitae. Ligula sagittis neque luctus, integer nisl placerat. Sapien volutpat purus phasellus sem fermentum malesuada egestas nibh. Vestibulum potenti cras, tristique purus hendrerit bibendum. Orci amet mollis posuere varius ultrices. Lacus interdum mauris maximus nisi per congue ultrices sodales.</p>
95
- <p id="p50">Purus sapien luctus lobortis lectus natoque dapibus fames. Feugiat habitant nullam dolor dolor penatibus, condimentum consectetur odio. Quisque nunc litora egestas taciti est, consectetur vulputate. Tortor hendrerit metus molestie porttitor nisi lectus. Eu placerat dictum dictum eu rutrum egestas ullamcorper aliquam. Eu elementum sed venenatis; aenean vivamus sit libero. Justo aliquam eu molestie primis pharetra cubilia. Ullamcorper et praesent magnis suscipit mollis, justo ullamcorper neque.</p>
96
- <p id="p51">Velit nunc tristique libero litora ante sollicitudin elementum aliquet. Ad phasellus odio neque aliquet senectus porta ante pretium. Volutpat donec fusce imperdiet sagittis fusce euismod. Metus duis litora cursus hendrerit fusce bibendum; at mattis phasellus. Augue porttitor ridiculus morbi sollicitudin urna vitae congue eleifend vivamus. Ipsum class hac mollis varius mus non. Magna cubilia magna donec cras quisque vel tellus.</p>
97
- <p id="p52">Eu finibus interdum orci tempor torquent. Augue nascetur pellentesque augue sed lacinia euismod. Penatibus torquent vulputate purus posuere urna quisque euismod feugiat. Fames sem dolor tempor vivamus imperdiet convallis quis. Volutpat dictum vitae lacus turpis, urna aptent dignissim. Penatibus nostra per, orci sagittis massa tristique vel maximus rhoncus. Turpis sodales per torquent suscipit ante sollicitudin volutpat molestie.</p>
98
- <p id="p53">Fermentum nam phasellus commodo ipsum placerat habitant fermentum velit. Habitant fringilla placerat morbi non consequat. Dignissim vivamus rutrum, iaculis suscipit arcu aenean eleifend elit. Molestie ad auctor quisque morbi risus. Nascetur fames hac euismod dictum fames placerat purus aenean. Finibus accumsan eros cras ad nisi potenti maximus. Sapien odio facilisis, suscipit parturient gravida maximus. Risus nulla vulputate tristique interdum curae eu enim. Semper magnis malesuada etiam sem tortor integer vel.</p>
99
- <p id="p54">Suscipit consequat conubia felis nisl blandit natoque. Quisque penatibus dolor eu aptent rutrum ac suscipit vel tortor. Ad facilisis sagittis inceptos aenean sapien tempus sollicitudin risus. Ac per montes erat tristique orci orci. Vivamus nulla etiam convallis scelerisque litora hendrerit. Eleifend orci penatibus donec consequat senectus est ad. Congue est tellus natoque massa cursus mattis.</p>
100
- <p id="p55">Finibus hac taciti egestas justo potenti. Avel maximus quam sed, orci consectetur potenti lorem euismod. Augue parturient pulvinar efficitur pellentesque integer inceptos. Facilisi etiam commodo felis class accumsan in elit. Congue tristique suspendisse sit mi et nascetur condimentum aliquet. Finibus augue consectetur ipsum quis quis orci bibendum dui. Taciti ornare nisi duis fames nec fringilla torquent posuere. Lobortis semper sollicitudin nec pellentesque eget sit senectus et.</p>
101
- <p id="p56">Imperdiet ipsum fusce elementum proin porttitor sem per elementum. Tincidunt nascetur quisque bibendum, congue aenean rutrum. Maecenas finibus porta non habitant netus. Consequat elementum non posuere risus facilisis metus mollis. Volutpat platea etiam duis convallis tristique gravida. Augue fermentum parturient lacus; venenatis quisque senectus habitant orci. Suspendisse facilisi elit eleifend per id suscipit potenti.</p>
102
- <p id="p57">Erat montes metus urna facilisis purus duis vulputate inceptos. Ante eleifend gravida porttitor, sociosqu sem elit. Pharetra morbi litora fusce hac; integer habitant justo. Porta habitasse fames mi tellus auctor placerat. Ante nostra amet per augue ornare ante porta aptent et. Parturient felis ultrices dapibus; dapibus litora primis ullamcorper.</p>
103
- <p id="p58">Molestie senectus posuere nam nostra curae maximus proin inceptos. Placerat massa molestie ridiculus pulvinar pellentesque ridiculus nisi. Gravida eros enim libero gravida non. Suscipit fames vitae ac finibus interdum nostra augue sodales. Pretium litora orci elit inceptos et. Montes dictumst porttitor ad eleifend eleifend risus augue vestibulum. Nostra pellentesque nec bibendum nulla nascetur? Mollis pretium aliquam etiam pharetra suscipit sodales elementum.</p>
104
- <p id="p59">Augue per leo sollicitudin parturient hac. Platea vivamus parturient tortor parturient nibh. Condimentum eget habitasse sit habitant libero facilisis maximus consectetur. Ultricies inceptos at consequat phasellus sodales turpis egestas. Sagittis non cubilia etiam aptent mus hac. Convallis nam sem sodales dapibus, proin torquent magnis. Sem lectus pretium neque, feugiat pretium nibh accumsan? Hendrerit natoque mi potenti ultrices venenatis tortor. Congue etiam dis penatibus; inceptos pellentesque ut. At in torquent pharetra aliquam class.</p>
105
- <p id="p60">Ultrices curabitur congue sit torquent fringilla. Netus accumsan sollicitudin purus pharetra gravida parturient dapibus dolor fringilla. Fusce porta pulvinar risus semper ipsum ante faucibus sapien. Elementum suscipit ultricies ornare sapien a gravida pulvinar dignissim. Platea magnis curae mi enim ultricies mus velit ultricies. Lectus elementum pellentesque; adipiscing cras non eget scelerisque. Eros netus parturient praesent quis porttitor suscipit.</p>
106
- <p id="p61">Ante et dolor sagittis lectus facilisi ex. Est hendrerit nisl nisi varius himenaeos. Orci primis pretium mollis lacus turpis pulvinar turpis. Ullamcorper nam eros enim aptent duis ligula porttitor interdum dolor. Libero ipsum ridiculus parturient dictumst, faucibus nec tortor. Scelerisque habitant magna euismod tincidunt auctor torquent. Natoque nunc nisi molestie augue eleifend. Fames hendrerit mattis diam lectus ligula aliquet class. Tellus fames odio natoque ipsum vestibulum a. Egestas rhoncus tristique feugiat; magnis montes odio.</p>
107
- <p id="p62">Habitant nisl diam dictum eleifend maximus. Lectus potenti et hac convallis lobortis. Enim aliquet phasellus curae hac varius arcu. Venenatis tortor sollicitudin ullamcorper cubilia sollicitudin; eleifend ac ligula. Etiam accumsan enim ipsum consequat elit. Duis feugiat ipsum posuere vitae tincidunt nulla quis felis iaculis.</p>
108
- <p id="p63">Aliquam justo hendrerit massa non; tortor tortor dapibus. Justo aliquet vehicula quis, dui cubilia condimentum nibh elit. Odio curabitur porttitor nam augue vulputate. Eu sed fringilla curae ornare condimentum turpis ultrices rhoncus. Nulla nostra iaculis potenti duis ad dolor. Dui nostra venenatis nunc curabitur laoreet curae faucibus volutpat himenaeos.</p>
109
- <p id="p64">Eu dapibus netus vitae magnis pellentesque purus neque tempus ut. Quam per metus luctus neque gravida neque. Ultricies facilisi elit sit consectetur auctor quisque sed. Porta sed risus nisi quis convallis nascetur. Litora curae hendrerit mi risus montes magnis. Orci nullam porta nec consectetur a eleifend sagittis litora pellentesque. Sed cras ridiculus dictumst facilisis eros integer a pretium. Proin in posuere fringilla magna, mus in?</p>
110
- <p id="p65">Bibendum torquent elit ornare erat a justo. Ante magnis elementum convallis dictum finibus. Libero penatibus molestie volutpat vitae aptent. Praesent posuere metus arcu per varius senectus? Inceptos eleifend nisl vel dictum ultricies malesuada facilisi fringilla. Auctor metus lacus elementum, venenatis interdum iaculis. Semper habitant nostra ex nisi mus risus nisi sagittis fermentum. Per semper suspendisse porta curabitur maecenas, condimentum porta mauris.</p>
111
- <p id="p66">Habitant maecenas dolor, convallis quisque fames mauris nam. Pharetra elit fames laoreet varius varius. Ligula eros laoreet pellentesque dis ac malesuada. Libero congue massa tincidunt; amet magna dapibus. Cursus et ultricies ultrices rutrum luctus accumsan hac. Justo magnis montes ullamcorper, nullam sapien consequat elementum. Enim ultricies viverra ultrices iaculis ultricies mus curabitur.</p>
112
- <p id="p67">Nec fringilla sem habitant finibus sodales praesent cursus tortor. Elementum erat vitae aliquet, phasellus at a etiam morbi. Finibus sagittis pharetra habitasse gravida viverra class sociosqu. Viverra faucibus nullam imperdiet litora a adipiscing porttitor; euismod praesent. Ut habitant hendrerit; himenaeos luctus non et. Eget proin fames potenti mauris eu luctus himenaeos. Rutrum eget himenaeos adipiscing phasellus pharetra maecenas eros ultricies. Nulla magna fames ex dignissim eros.</p>
113
- <p id="p68">Ut nisl facilisis morbi turpis mi efficitur volutpat, vulputate fringilla. Ullamcorper luctus varius praesent litora tincidunt consectetur pharetra. Lacus consectetur eu fames enim odio etiam dapibus. Mattis pretium montes congue fusce volutpat montes commodo. Risus penatibus ante bibendum mi imperdiet ultrices egestas. Libero inceptos nullam himenaeos tempus tortor pharetra. Elit velit dapibus nec donec eros dis ipsum. Ut molestie suscipit mus senectus tristique fringilla interdum nunc. Etiam aenean nulla non ex risus tellus cubilia enim.</p>
114
- <p id="p69">Diam tellus arcu, phasellus tincidunt sapien consectetur. Potenti metus inceptos risus magna consequat litora. Tincidunt bibendum vel quis lacus tempor. Donec justo aliquet nostra felis orci. Efficitur litora venenatis ridiculus fermentum efficitur diam rhoncus commodo. Mus molestie himenaeos et massa felis amet fusce blandit. Adipiscing tortor consequat nostra ac metus a imperdiet curae. Primis risus vel ultrices tempus ac. Cubilia montes cubilia sollicitudin velit laoreet netus dolor cras. Dolor posuere in adipiscing fermentum commodo enim praesent.</p>
115
- <p id="p70">Arcu mauris sapien amet habitasse consequat duis ridiculus pulvinar euismod. Sodales mattis fusce ad sagittis orci odio duis. Iaculis urna sed, nostra sem finibus pharetra. Nulla quisque nisl praesent nunc urna rutrum consectetur fermentum. Pharetra eros scelerisque maximus platea fringilla sodales dui dui. Maximus ornare eget laoreet, donec integer mi. Feugiat imperdiet dignissim penatibus sed nostra facilisis. Duis varius at lacinia molestie, rutrum finibus rutrum.</p>
116
- <p id="p71">Dictumst integer et mauris sollicitudin sollicitudin aenean dolor taciti. Risus ac scelerisque felis etiam; gravida ornare consectetur. Malesuada aptent quam aenean luctus egestas habitasse cras. Et ligula eros lacinia facilisi nascetur euismod nec curabitur. Donec non tempor porttitor nunc erat tincidunt taciti. Habitant sapien venenatis, risus sem semper consequat per mi ac.</p>
117
- <p id="p72">Dictum integer nostra curae porttitor nisl sociosqu senectus inceptos enim. Massa sagittis nulla habitant nullam felis aenean ad. Dapibus erat dis finibus quam torquent. Arcu sagittis elementum sit adipiscing elit. Interdum fusce nostra mollis pellentesque; lorem libero eget. Neque porttitor neque luctus gravida himenaeos ex? Orci ad placerat platea senectus dis; dictum facilisi condimentum finibus. Volutpat tempor potenti efficitur ac ex; accumsan cursus? Litora est primis ante iaculis arcu vestibulum suspendisse.</p>
118
- <p id="p73">Facilisis pellentesque sociosqu enim rutrum velit urna. Ad sit placerat malesuada dapibus placerat commodo ac. Ipsum tempor lobortis, feugiat egestas erat vulputate. Nibh non euismod taciti; lobortis nulla lobortis. Libero eleifend tincidunt quis dis sem vehicula. Primis aliquam feugiat ligula suscipit convallis aenean libero fames. Litora id curabitur venenatis bibendum lacus; quis proin. Sit ornare lorem suscipit mi risus consectetur.</p>
119
- <p id="p74">Fames quam orci id malesuada magnis viverra morbi mollis. Torquent libero pharetra netus dui molestie dapibus commodo. Ut senectus condimentum est feugiat tempor platea a at. Mus augue ullamcorper; adipiscing suspendisse purus euismod consequat. Fringilla maecenas diam non pretium, venenatis lobortis. Taciti mi eget semper vehicula egestas enim; ad rutrum facilisi? Ultrices enim orci et habitasse rhoncus lacinia semper? Semper risus venenatis ultricies duis interdum. Odio euismod nullam purus duis elementum pellentesque.</p>
120
- <p id="p75">Ullamcorper ex mattis ac maecenas consectetur massa dictumst felis. Eros penatibus nibh netus erat nostra vestibulum. Est varius nascetur vivamus, velit ullamcorper vulputate fringilla. Orci ex augue lobortis quis sollicitudin rutrum risus faucibus. Inceptos sodales dui curae sodales ac, purus elit. Enim malesuada rhoncus; dapibus potenti ligula diam.</p>
121
- </main>
210
+ // Load specific version of HighlightHelper.js
211
+ const scriptElement = document.createElement('script');
212
+ scriptElement.onload = loadHighlighter;
213
+ scriptElement.src = loadParameters.version ? `https://cdn.jsdelivr.net/gh/samuelbradshaw/highlight-helper-js@${loadParameters.version}/highlight-helper.min.js` : 'highlight-helper.js';
214
+ document.body.appendChild(scriptElement);
122
215
 
123
- <dialog id="disambiguation-panel">
124
- <h1>Select One</h1>
125
- <div id="disambiguation-buttons"></div>
126
- <button id="disambiguation-cancel">Cancel</button>
127
- </dialog>
216
+ // Load highlights
217
+ let highlighter;
218
+ function loadHighlighter() {
219
+ highlightsCountElement.textContent = '';
220
+ loadTimeElement.textContent = '(loading…)';
221
+ requestAnimationFrame(() => requestAnimationFrame(() => {
222
+ if (loadParameters.version.startsWith('0.')) {
223
+ highlighter = new Highlighter(currentOptions);
224
+ } else if (!loadParameters.version || loadParameters.version.startsWith('1.')) {
225
+ highlighter = new Highlighter(containerSelector, paragraphSelector);
226
+ highlighter.setOptions(currentOptions);
227
+ }
228
+ highlighter.loadHighlights(highlights);
229
+ }));
230
+ }
128
231
 
129
- <script src="highlight-helper.js"></script>
130
- <script>
131
- // Define highlights
132
- const highlights = [];
133
- const colors = ['red', 'orange', 'yellow', 'green', 'blue'];
134
- const numbers = [null, null, null, 5, 6, 7, 8, 9, 10, 11, 12, 13];
135
- for (const paragraph of document.querySelectorAll('main [id]')) {
136
- let wordOffset = 0;
137
- const words = paragraph.textContent.split(' ');
138
- const characterCount = paragraph.textContent.length;
139
- for (let i = 0; i < words.length; i++) {
140
- const randomColor = colors[Math.floor(Math.random() * colors.length)];
141
- const randomNumber = numbers[Math.floor(Math.random() * numbers.length)];
142
- startOffset = wordOffset;
143
- endOffset = startOffset + randomNumber;
144
- wordOffset = startOffset + words[i].length + 1
145
- if (!randomNumber || endOffset >= characterCount) continue;
146
-
147
- highlights.push({
148
- highlightId: `${paragraph.id}_${startOffset}`,
149
- color: randomColor, style: 'fill',
150
- startParagraphId: paragraph.id, startParagraphOffset: startOffset,
151
- endParagraphId: paragraph.id, endParagraphOffset: endOffset,
232
+ // Radio buttons
233
+ for (const radioButton of document.querySelectorAll('input[type="radio"]')) {
234
+ if (radioButton.value === loadParameters[radioButton.name].toString()) radioButton.checked = true;
235
+ radioButton.addEventListener('change', (event) => {
236
+ url.searchParams.set(event.currentTarget.name, event.currentTarget.value);
237
+ window.location.replace(url);
238
+ });
239
+ }
240
+
241
+ // Respond to hh:highlightsload
242
+ const highlightsCountElement = document.getElementById('highlights-count');
243
+ const loadTimeElement = document.getElementById('time-to-load');
244
+ document.querySelector(containerSelector).addEventListener('hh:highlightsload', (event) => {
245
+ const seconds = ((event.detail.loadTimeMs ?? event.detail.timeToLoad) / 1000).toFixed(3);
246
+ highlightsCountElement.textContent = event.detail.totalCount;
247
+ loadTimeElement.textContent = `(${seconds} seconds)`;
152
248
  });
153
- }
154
- }
155
-
156
- // Load highlights
157
- const highlighter = new Highlighter({
158
- containerSelector: 'main',
159
- paragraphSelector: 'main [id]',
160
- drawingMode: 'svg',
161
- });
162
- highlighter.loadHighlights(highlights);
163
-
164
- // Show highlight count and time to load
165
- const container = document.querySelector(highlighter.getOptions().containerSelector);
166
- const highlightsCountElement = document.getElementById('highlights-count');
167
- const timeToLoadElement = document.getElementById('time-to-load');
168
- container.addEventListener('hh:highlightsload', (event) => {
169
- const seconds = Math.round(event.detail.timeToLoad / 10) / 100;
170
- highlightsCountElement.innerHTML = event.detail.totalCount;
171
- timeToLoadElement.innerHTML = `(${seconds} seconds)`;
172
- });
173
-
174
- // Handle snap to word checkbox
175
- const snapToWordCheckbox = document.getElementById('hh-snap-to-word');
176
- snapToWordCheckbox.addEventListener('change', (event) => { highlighter.setOption('snapToWord', event.currentTarget.checked); });
177
-
178
- // Handle drawing mode radio buttons
179
- const drawingModeRadioButtons = document.getElementsByName('hh-drawing-mode');
180
- for (const drawingModeRadioButton of drawingModeRadioButtons) {
181
- drawingModeRadioButton.addEventListener('change', (event) => {
182
- let drawingMode = document.querySelector('[name="hh-drawing-mode"]:checked').value;
183
- highlighter.setOption('drawingMode', drawingMode);
184
- });
185
- }
186
249
 
187
- // Listen for and respond to ambiguous actions sent back from Highlight Helper (when a user taps on overlapping highlights, or an overlapping link and highlight)
188
- const disambiguationPanel = document.getElementById('disambiguation-panel');
189
- const disambiguationButtonsDiv = document.getElementById('disambiguation-buttons');
190
- const disambiguationCancelButton = document.getElementById('disambiguation-cancel');
191
- disambiguationCancelButton.addEventListener('click', (event) => disambiguationPanel.close());
192
- container.addEventListener('hh:ambiguousaction', handleAmbiguousAction);
193
- function handleAmbiguousAction(event) {
194
- disambiguationButtonsDiv.innerHTML = '';
195
- for (const highlight of event.detail.highlights) {
196
- let buttonStyle = highlighter.getOptions().styles[highlight.style]['css']
197
- let buttonHtml = `
198
- <button data-color="${highlight.color}" onclick="disambiguationPanel.close();highlighter.activateHighlight('${highlight.highlightId}');">
199
- <span style="${buttonStyle}">${highlight.rangeHtml}</span>
200
- </button>
201
- `;
202
- disambiguationButtonsDiv.insertAdjacentHTML('beforeend', buttonHtml);
203
- }
204
- for (const hyperlink of event.detail.hyperlinks) {
205
- let buttonStyle = 'color: var(--gray-50); text-decoration: underline;'
206
- let buttonHtml = `
207
- <button onclick="disambiguationPanel.close();highlighter.activateHyperlink(${hyperlink.position});">
208
- <span style="${buttonStyle}">${hyperlink.text}</span>
209
- </button>
210
- `;
211
- disambiguationButtonsDiv.insertAdjacentHTML('beforeend', buttonHtml);
212
- }
213
- // TODO: Waiting 10 milliseconds before showing the disambiguation panel is a workaround for an issue in Android Chrome where a click event fires right after the pointerup event that triggered hh:ambiguousaction. If the click event happens to be at the same position as a button in the panel, the button will receive the click, dismissing the panel before the user sees it.
214
- setTimeout(function() { disambiguationPanel.showModal(); }, 10);
215
- }
216
-
217
- // Log events for debugging
218
- container.addEventListener('hh:highlightsload', console.log)
219
- container.addEventListener('hh:highlightactivate', console.log)
220
- container.addEventListener('hh:highlightdeactivate', console.log)
221
- container.addEventListener('hh:selectionupdate', console.log)
222
- container.addEventListener('hh:ambiguousaction', console.log)
223
- container.addEventListener('hh:tap', console.log)
224
- </script>
250
+ // Respond to hh:tap (and pre-1.0 event hh:ambiguousaction)
251
+ function respondToHighlightTap(event) {
252
+ const firstHighlight = event.detail.highlights[0];
253
+ if (firstHighlight) highlighter.activateHighlight(firstHighlight.highlightId);
254
+ }
255
+ document.querySelector(containerSelector).addEventListener('hh:tap', respondToHighlightTap);
256
+ document.querySelector(containerSelector).addEventListener('hh:ambiguousaction', respondToHighlightTap);
257
+
258
+ </script>
259
+ </body>
260
+ </html>