JavaScript
7 |History
8 |Trademark
9 |Features
10 |Imperative and structured
11 |Dynamic
12 |Functional
13 |Syntax
14 | ``` 15 | 16 | Contents will generate the following markup for the above content: 17 | 18 | ```html 19 |-
20 |
-
21 | JavaScript
22 |
23 |
-
24 |
- 25 | History 26 | 27 |
- 28 | Trademark 29 | 30 |
-
31 | Features
32 |
33 |
-
34 |
- 35 | Imperative and structured 36 | 37 |
- 38 | Dynamic 39 | 40 |
- 41 | Functional 42 | 43 |
45 | - 46 | Syntax 47 | 48 |
50 |
- ` | ✓ | - | - |
10 | | [Smooth scrolling](#smooth-scrolling) | - | ✓ | ✓ |
11 | | Forward and back button support | ✓ | - | ✓ |
12 | | [Events](#events) | ✓ | - | - |
13 | | [Efficient `scroll` event](#window-resize-and-scroll-event-handling) | ✓ | ✓ | - |
14 | | [Reflect `window` resize](#window-resize-and-scroll-event-handling) | ✓ | - | ✓ |
15 | | [Extract table of contents as an array](#table-of-contents-array) | ✓ | - | - |
16 | | Overwrite markup and navigation | ✓ | - | - |
17 | | Can have multiple on a page | ✓ | ✓ | ✓ |
18 | | [Required 3rd party libraries](#required-3rd-party-libraries) | - | jQuery | jQuery, jQueryUI |
19 | | Size | < 6.000 kb | 2.581 kb | 7.246 kb |
20 | | GitHub Stars | 192 | 307 | 435 |
21 |
22 | Last updated: Saturday, 22-Nov-14 08:44:41 UTC.
23 |
24 | ### Required 3rd Party Libraries
25 |
26 | There are no 3rd party dependencies. jQuery selectors are used in the examples to make it simple for the reader.
27 |
28 | ### Smooth Scrolling
29 |
30 | You can implement smooth scrolling using either of the existing libraries. See [Integration Examples](#integration-examples).
31 |
32 | ### Window Resize and `scroll` Event Handling
33 |
34 | The library will index `offsetTop` of all articles. This index is used to reflect the [change event](#events). The index is built upon loading the page, and in response to `window.onresize` and [`ready`](#events) events.
35 |
36 | Reading `offsetTop` causes a [reflow](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html). Therefore, this should not be done while scrolling.
37 |
38 | # Table of Contents Array
39 |
40 | You can extract the table of contents as a collection of nested objects representing the table of contents.
41 |
42 | ```js
43 | /**
44 | * @return {array} Array representation of the table of contents.
45 | */
46 | contents.tree();
47 | ```
48 |
49 | Tree is a collection of nodes:
50 |
51 | ```js
52 | [
53 | // Node
54 | {
55 | // Hierarchy level (e.g. h1 = 1)
56 | level: 1,
57 | // Id derived using articleId() function.
58 | id: '',
59 | // Name derived using articleName() function.
60 | name: '',
61 | // The article element.
62 | element: null,
63 | // Collection of the descendant nodes.
64 | descendants: [ /* node */ ]
65 | }
66 | ]
67 | ```
68 |
--------------------------------------------------------------------------------
/.README/linking.md:
--------------------------------------------------------------------------------
1 | ## Linking
2 |
3 | `link` method is used to represent article in the table of contents and to setup navigation. This method is called once for each article after the list of the table of contents is generated.
4 |
5 | The default implementation:
6 |
7 | 1. Derives ID from the article
8 | 2. Generates a hyperlink using article ID as the anchor
9 | 3. Appends the URL to the table of contents
10 | 4. Wraps the article node in a self-referencing hyperlink.
11 |
12 | ```js
13 | /**
14 | * This function is called after the table of contents is generated.
15 | * It is called for each article in the index.
16 | * Used to represent article in the table of contents and to setup navigation.
17 | *
18 | * @param {HTMLElement} guide An element in the table of contents representing an article.
19 | * @param {HTMLElement} article The represented content element.
20 | */
21 | Contents.link = (guide, article) => {
22 | const guideLink = document.createElement('a'),
23 | const articleLink = document.createElement('a'),
24 | const articleName = article.innerText,
25 | const articleId = article.id || Contents.id(articleName);
26 |
27 | article.id = articleId;
28 |
29 | articleLink.href = '#' + articleId;
30 |
31 | while (article.childNodes.length) {
32 | articleLink.appendChild(article.childNodes[0], articleLink);
33 | }
34 |
35 | article.appendChild(articleLink);
36 |
37 | guideLink.appendChild(document.createTextNode(articleName));
38 | guideLink.href = '#' + articleId;
39 | guide.insertBefore(guideLink, guide.firstChild);
40 | };
41 |
42 | ```
43 |
44 | To overwrite the default behavior, you can provide your own `link` function as part of the configuration:
45 |
46 | ```js
47 | Contents({
48 | // Example of implementation that does not wrap
49 | // article node in a hyperlink.
50 | link: (guide, article) => {
51 | var guideLink,
52 | articleName,
53 | articleId;
54 |
55 | guide = $(guide);
56 | article = $(article);
57 |
58 | guideLink = $('');
59 | articleName = article.text();
60 | articleId = article.attr('id') || Contents.id(articleName);
61 |
62 | guideLink
63 | .text(articleName)
64 | .attr('href', '#' + articleId)
65 | .prependTo(guide);
66 |
67 | article.attr('id', articleId);
68 | }
69 | });
70 |
71 | ```
72 |
73 | ### Article ID
74 |
75 | The default implementation relies on each article having an "id" attribute to enable anchor navigation.
76 |
77 | If you are overwriting the default `link` implementation, you can take advantage of the `Contents.id` function.
78 |
79 | `Contents.id` is responsible for deriving a unique ID from the text of the article, e.g.
80 |
81 | ```html
82 |
- 1 table-spoonful raspberry syrup. 62 |
- 2 do. white sugar. 63 |
- 1 wine-glass water. 64 |
- 1 do. brandy. 65 |
- ½ small-sized lemon. 66 |
- 2 slices of orange. 67 |
- 1 piece of pine-apple. 68 |
- 1 gallon of water. 80 |
- 3 quarts of brandy. 81 |
- ½ pint of Jamaica ram. 82 |
- 2 lbs. of sugar. 83 |
- Juice of 6 lemons. 84 |
- 3 oranges sliced. 85 |
- 1 pine-apple, pared, and cut up. 86 |
- 1 gill of Curaçao. 87 |
- 2 gills of raspberry syrup. 88 |
- Ice, and add berries in season. 89 |
- 100 |
- 1 wine-glass of brandy. 101 |
- ½ do. Jamaica rum. 102 |
- ½ do. Bourbon whiskey. 103 |
- ½ do. water. 104 |
- 1½ table-spoonful of powdered white sugar. 105 |
- ¼ of a large lemon. 106 | 107 | 108 |
- 2 wine-glasses of sherry. 125 |
- 1 table-spoonful of sugar. 126 |
- 2 or 3 slices of orange. 127 |
- 1 table-spoonful of sugar. 139 |
- 1 piece each or orange and lemon peel. 140 |
- 1 teaspoonful of sugar dissolved in one table-spoonful of crater. 152 |
- 2 wineglasses of wine. 153 |
- 1 table-spoonful of white pulverized sugar. 181 |
- 2½ do. water, mix well with a spoon. 182 |
-
323 | JavaScript
324 |
325 |
-
326 |
- 327 | History 328 | 329 |
- 330 | Trademark 331 | 332 |
-
333 | Features
334 |
335 |
-
336 |
- 337 | Imperative and structured 338 | 339 |
- 340 | Dynamic 341 | 342 |
- 343 | Functional 344 | 345 |
347 | - 348 | Syntax 349 | 350 |
352 | - A1
- B1
- C1
- A1
- B1
- C1
- B1
- A1
- B1
- B2
- A1
- B1
- C1
- B2
- B1
- A2
- A1
- B1
- C1
- B1
- A2
Allow me to reiterate
83 |Allow me to reiterate
84 |Allow me to reiterate
85 | 86 | ``` 87 | 88 | The default `link` implementation will use `Contents.id` to give each article a unique ID: 89 | 90 | ```html 91 |Allow me to reiterate
92 |Allow me to reiterate
93 |Allow me to reiterate
94 | 95 | ``` 96 | -------------------------------------------------------------------------------- /examples/good-looking/main.css: -------------------------------------------------------------------------------- 1 | body, main, aside, article, ul, ol, li, h1, h2, h3, hr, p { 2 | display: block; 3 | margin: 0; 4 | padding: 0; } 5 | 6 | body { 7 | font: normal 16px/24px 'Helvetica Neue', Helvetica, Arial, freesans, sans-serif; 8 | background: #F8F9FA; } 9 | 10 | aside { 11 | position: fixed; 12 | left: 0; 13 | top: 0; 14 | width: 360px; } 15 | aside li { 16 | display: block; 17 | z-index: 10; } 18 | aside li a { 19 | display: block; 20 | padding: 10px; 21 | text-decoration: none; 22 | color: #666; 23 | border: 1px solid #D9E0E2; 24 | background: #fff; 25 | width: 280px; 26 | position: relative; } 27 | aside > ol > li ol { 28 | margin: 10px 0 10px 20px; } 29 | aside > ol > li ol a { 30 | border-bottom: none; } 31 | aside > ol > li ol li:last-child a { 32 | border-bottom: 1px solid #D9E0E2; } 33 | aside > ol { 34 | padding: 20px; } 35 | aside > ol > li.active > a, aside > ol > li.active-child > a { 36 | background: #EF4836; 37 | color: #fff; } 38 | aside > ol > li.active > a::after { 39 | content: '•'; 40 | font-size: 45px; 41 | line-height: 45px; 42 | position: absolute; 43 | right: 10px; 44 | top: 0; 45 | color: #fff; } 46 | aside > ol > li li.active > a::after, aside > ol > li li.active-child > a::after { 47 | content: '•'; 48 | font-size: 45px; 49 | line-height: 45px; 50 | position: absolute; 51 | right: 10px; 52 | top: 0; 53 | color: #EF4836; } 54 | aside > ol:hover > li.active > a, aside > ol:hover > li.active-child > a { 55 | background: #666; } 56 | aside > ol:hover > li li.active > a::after, aside > ol:hover > li li.active-child > a::after { 57 | color: #666; } 58 | aside > ol > li:hover > a { 59 | background: #EF4836 !important; 60 | color: #fff; } 61 | aside > ol > li li:hover > a::after { 62 | content: '•'; 63 | font-size: 45px; 64 | line-height: 45px; 65 | position: absolute; 66 | right: 10px; 67 | top: 0; 68 | color: #EF4836 !important; } 69 | aside > ol li.active ol, aside > ol li.active-child ol, aside > ol li:hover ol { 70 | opacity: 1; } 71 | aside > ol ol { 72 | opacity: 0.5; } 73 | aside > ol > li { 74 | counter-reset: drink; } 75 | aside > ol > li li a::before { 76 | counter-increment: drink; 77 | content: counter(drink) '. '; } 78 | 79 | main { 80 | margin: 0 0 0 340px; 81 | padding: 0 20px; } 82 | main hr { 83 | border: none; 84 | height: 1px; } 85 | 86 | article { 87 | width: 680px; 88 | min-height: 930px; 89 | box-sizing: border-box; 90 | margin: 50px auto; 91 | background: #fff; 92 | border: 1px solid #D9E0E2; 93 | overflow: hidden; 94 | padding: 60px 100px; 95 | font: 16px/22px Merriweather, 'times new roman', serif; } 96 | article h1, article h2 { 97 | text-align: center; } 98 | article h1 a, article h2 a { 99 | color: #FF3C1F; 100 | text-decoration: none; } 101 | article h1 { 102 | margin: 0 0 20px 0; 103 | font-size: 30px; 104 | line-height: 40px; 105 | font-weight: 700; 106 | counter-reset: drink; 107 | text-transform: uppercase; } 108 | article h2 { 109 | padding: 20px 0 0 0; 110 | font-size: 20px; 111 | font-weight: 400; 112 | line-height: 30px; } 113 | article h2::before { 114 | counter-increment: drink; 115 | content: counter(drink) '.'; 116 | font-size: 25px; 117 | font-weight: 300; } 118 | article p { 119 | margin: 20px 0; } 120 | article img { 121 | display: block; 122 | margin: 40px auto; 123 | max-width: 100%; } 124 | article .serving { 125 | text-align: center; 126 | font-weight: 300; } 127 | article .serving::before { 128 | content: '('; } 129 | article .serving::after { 130 | content: ')'; } 131 | article .ingredients { 132 | margin: 20px; } 133 | article .ingredients li { 134 | list-style: none; } 135 | article .making { 136 | text-indent: 20px; } 137 | 138 | #source { 139 | color: #666; 140 | margin: 20px; 141 | text-align: center; } 142 | #source a { 143 | color: inherit; } 144 | -------------------------------------------------------------------------------- /examples/good-looking/main.scss: -------------------------------------------------------------------------------- 1 | body, 2 | main, 3 | aside, 4 | article, 5 | ul, 6 | ol, 7 | li, 8 | h1, 9 | h2, 10 | h3, 11 | hr, 12 | p { 13 | display: block; margin: 0; padding: 0; 14 | } 15 | 16 | body { 17 | font: normal 16px/24px 'Helvetica Neue', Helvetica, Arial, freesans, sans-serif; background: #F8F9FA; 18 | } 19 | 20 | aside { 21 | position: fixed; left: 0; top: 0; width: 360px; 22 | 23 | li { 24 | display: block; z-index: 10; 25 | 26 | a { 27 | display: block; padding: 10px; text-decoration: none; color: #666; border: 1px solid #D9E0E2; background: #fff; width: 280px; position: relative; 28 | } 29 | } 30 | 31 | // Dimensional 32 | 33 | > ol > li { 34 | ol { 35 | margin: 10px 0 10px 20px; 36 | 37 | a { 38 | border-bottom: none; 39 | } 40 | 41 | li:last-child a { 42 | border-bottom: 1px solid #D9E0E2; 43 | } 44 | } 45 | } 46 | 47 | // Color 48 | 49 | > ol { 50 | padding: 20px; 51 | 52 | > li.active > a, 53 | > li.active-child > a { 54 | background: #EF4836; color: #fff; 55 | } 56 | 57 | > li.active > a { 58 | &::after { 59 | content: '•'; font-size: 45px; line-height: 45px; position: absolute; right: 10px; top: 0; color: #fff; 60 | } 61 | } 62 | 63 | > li li.active > a, 64 | > li li.active-child > a { 65 | &::after { 66 | content: '•'; font-size: 45px; line-height: 45px; position: absolute; right: 10px; top: 0; color: #EF4836; 67 | } 68 | } 69 | 70 | &:hover { 71 | > li.active > a, 72 | > li.active-child > a { 73 | background: #666; 74 | } 75 | 76 | > li li.active > a, 77 | > li li.active-child > a { 78 | &::after { 79 | color: #666; 80 | } 81 | } 82 | } 83 | 84 | > li:hover > a { 85 | background: #EF4836!important; color: #fff; 86 | } 87 | 88 | > li li:hover > a { 89 | &::after { 90 | content: '•'; font-size: 45px; line-height: 45px; position: absolute; right: 10px; top: 0; color: #EF4836!important; 91 | } 92 | } 93 | 94 | li.active, 95 | li.active-child, 96 | li:hover { 97 | ol { 98 | opacity: 1; 99 | } 100 | } 101 | 102 | ol { 103 | opacity: .5; 104 | } 105 | } 106 | 107 | // Counter 108 | 109 | > ol > li { 110 | counter-reset: drink; 111 | 112 | li a::before { 113 | counter-increment: drink; content: counter(drink) '. '; 114 | } 115 | } 116 | } 117 | 118 | main { 119 | margin: 0 0 0 340px; padding: 0 20px; 120 | 121 | hr { 122 | border: none; height: 1px; 123 | } 124 | } 125 | 126 | article { 127 | width: 680px; min-height: 930px; box-sizing: border-box; margin: 50px auto; background: #fff; border: 1px solid #D9E0E2; overflow: hidden; padding: 60px 100px; font: 16px/22px Merriweather, 'times new roman', serif; 128 | 129 | h1, 130 | h2 { 131 | text-align: center; 132 | 133 | a { color: #FF3C1F; text-decoration: none; } 134 | } 135 | 136 | h1 { 137 | margin: 0 0 20px 0; font-size: 30px; line-height: 40px; font-weight: 700; counter-reset: drink; text-transform: uppercase; 138 | } 139 | 140 | h2 { 141 | padding: 20px 0 0 0; font-size: 20px; font-weight: 400; line-height: 30px; 142 | 143 | &::before { 144 | counter-increment: drink; content: counter(drink) '.'; font-size: 25px; font-weight: 300; 145 | } 146 | } 147 | 148 | p { 149 | margin: 20px 0; 150 | } 151 | 152 | img { 153 | display: block; margin: 40px auto; max-width: 100%; 154 | } 155 | 156 | .serving { 157 | text-align: center; font-weight: 300; 158 | 159 | &::before { 160 | content: '('; 161 | } 162 | &::after { 163 | content: ')'; 164 | } 165 | } 166 | 167 | .ingredients { 168 | margin: 20px; 169 | 170 | li { list-style: none; } 171 | } 172 | 173 | .making { 174 | text-indent: 20px; 175 | } 176 | } 177 | 178 | #source { 179 | color: #666; margin: 20px; text-align: center; 180 | 181 | a { color: inherit; } 182 | } -------------------------------------------------------------------------------- /examples/jquery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 |Pellentesque habitant
21 | 22 |Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
23 | 24 |Etiam dignissim interdum
25 | 26 |Mauris sed diam vel nulla vestibulum porttitor sed ut orci. Nulla facilisi. In et mauris eget justo pulvinar cursus vel at ligula. Maecenas rhoncus turpis a eros lobortis ultrices. Nulla vel tellus leo. Nunc vitae sodales mi, non interdum tortor. Aliquam erat volutpat.
27 | 28 |Dapibus ut vehicula vitae
29 | 30 |Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer a felis non augue fringilla condimentum. Mauris at semper ex. Aliquam magna dolor, gravida ut risus id, malesuada fringilla ligula. Nunc nec magna non augue elementum porta a eu arcu. Donec pellentesque dapibus neque, sit amet pulvinar nisl mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus lacinia tellus tincidunt sagittis. Ut feugiat massa eu viverra varius. Nunc eget magna eu dolor sagittis sodales.
31 | 32 |Proin feugiat massa id fermentum molestie. Nam eu congue ante, eget molestie mi. In commodo orci a augue pharetra, eget sollicitudin diam scelerisque. Suspendisse cursus elit sit amet metus faucibus, non vulputate nibh ornare. Duis fermentum efficitur eros, vel pellentesque leo bibendum eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel nisi nec lorem ullamcorper molestie id auctor leo. Nunc facilisis dignissim nisi, sit amet interdum neque egestas sed. Aliquam erat dui, rutrum sed orci at, laoreet blandit diam. Donec commodo lacus leo, et rhoncus eros laoreet fermentum. Mauris sit amet tempor neque, ac lacinia ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat velit. Mauris mollis leo quis ullamcorper sollicitudin. Proin non justo at leo iaculis bibendum.
33 | 34 |Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae eros sit amet orci malesuada elementum vitae quis leo. Maecenas turpis metus, viverra id tempor in, vehicula vel eros. Etiam finibus a nisl a scelerisque. Fusce ut auctor urna, ac congue eros. Sed eu finibus libero, commodo eleifend enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tristique erat eu erat suscipit, a venenatis lorem vehicula. Nulla dapibus rhoncus tincidunt. Etiam iaculis sem mi, a suscipit massa interdum et. Aliquam ultricies dolor et semper maximus. Donec egestas faucibus metus, quis placerat nisl blandit sed. Morbi porttitor elit scelerisque, vestibulum neque ac, porttitor sem. Ut vel ligula consectetur, pharetra nibh at, sollicitudin erat.
35 | 36 |Sed luctus
37 | 38 |Metus eget laoreet feugiat, felis sem faucibus metus, quis cursus ante ex ut nisi. Etiam id hendrerit felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc commodo cursus lacus at congue. Morbi laoreet iaculis quam non iaculis. Etiam volutpat auctor risus in accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ultrices dolor, eu rutrum ex. Suspendisse tincidunt metus metus, ut egestas nisi efficitur non. Curabitur consequat dictum dolor nec auctor. Vestibulum id felis ac justo congue rhoncus. Phasellus pharetra elit id aliquet aliquet. Vestibulum elementum lorem arcu, eu tincidunt odio euismod consectetur. Sed porta dolor orci, a pellentesque nibh elementum sed. Proin ligula ante, aliquam sit amet magna eget, dignissim scelerisque ante. Nulla vulputate tortor ut mi dapibus, a iaculis nulla facilisis.
39 | 40 |Ut dignissim lobortis vestibulum
41 | 42 |Integer a libero vitae nisi vulputate convallis. Mauris in metus non tortor bibendum scelerisque at quis ante. Nulla dui diam, faucibus sit amet ullamcorper ac, lacinia porta neque. Nulla et urna non sem porta bibendum eu ac tortor. Fusce id metus sem. Vivamus nisl urna, vulputate quis arcu ut, auctor iaculis lacus. Aliquam sed dui sed nulla interdum laoreet non at dolor. Duis laoreet sem justo, vulputate ullamcorper diam pretium ac. Sed convallis ante sit amet metus lacinia, sit amet egestas nunc tempor. Sed eget mi tempor, semper libero porttitor, facilisis leo. Aenean vel imperdiet tellus. Aenean venenatis erat sed odio finibus, at vehicula lorem aliquam. Praesent porttitor velit interdum nunc mollis gravida at non nunc. Proin vitae vulputate elit, vitae commodo tellus.
43 | 44 |Nullam sodales orci
45 | 46 |Pellentesque eu sem mauris. Quisque condimentum nisi a magna tempor dictum. Vestibulum placerat maximus ligula, vitae ultrices nibh aliquam non. In consequat elementum nunc ut elementum. Donec maximus condimentum metus id porta. Sed id congue justo, ac lacinia ex. Nunc convallis imperdiet sem eget euismod. Aenean tristique ex massa, sed ultrices est varius eget. Vivamus vitae metus vitae nisi ornare vehicula.
47 | 48 |Curabitur posuere, massa vel gravida hendrerit, turpis ligula tincidunt ligula, vitae consequat quam risus ac lorem. Aenean lacinia vitae diam sed lobortis. Vivamus vestibulum quam dui, facilisis tempor ante pellentesque sit amet. Proin quis arcu commodo, dapibus tortor id, euismod ex. Mauris sit amet libero et felis euismod pulvinar. Donec tempor tincidunt elementum.
49 | 50 |Nulla placerat urna laoreet
51 | 52 |Pharetra massa vitae, lacinia lectus. Pellentesque tristique purus velit, non malesuada lectus ullamcorper non. Donec sed molestie libero, vel pharetra arcu. Fusce efficitur nisi ex, eu bibendum massa laoreet eu. Proin malesuada condimentum quam. Curabitur in cursus justo. Duis suscipit vulputate ante quis commodo. Sed tincidunt rhoncus tortor, sed vestibulum nisi vulputate nec. Maecenas hendrerit, ipsum vitae egestas suscipit, lorem nibh dignissim lorem, ac placerat mi est eu risus. Vestibulum nisl nisl, auctor nec ante feugiat, maximus pretium mi.
53 | 54 |Donec a malesuada nibh, in cursus eros. Pellentesque sit amet accumsan justo. Donec ut quam lobortis, sagittis erat eu, finibus leo. Proin vestibulum ex dui, id ultrices ligula vulputate quis. Suspendisse est sem, hendrerit sed augue quis, tempus iaculis metus. Etiam rutrum gravida interdum. Duis vitae auctor nunc. Praesent ac metus massa. In ligula sapien, aliquam consequat tincidunt a, iaculis at enim. Nulla facilisi. Cras vulputate ante purus, vitae volutpat ipsum dignissim sed. Mauris dapibus nisl tincidunt dolor blandit, sit amet ultricies neque bibendum. Sed tempor nunc id odio iaculis porta. Pellentesque ut scelerisque mauris, eu bibendum eros.
55 | 56 |Morbi dignissim aliquet nunc eu dignissim. Nulla ultrices felis elit, a posuere massa tincidunt nec. Nulla facilisi. Maecenas lorem nisi, lobortis eu dolor vitae, pretium dapibus ante. Aenean lacus ex, fringilla venenatis tempus sit amet, mollis id tortor. Duis massa mauris, aliquam a lacus a, elementum finibus sem. Praesent elementum tortor est, ut condimentum justo ullamcorper nec. Quisque quis ligula eu ex venenatis sagittis in non dui.
57 | 58 |Fusce mattis sagittis
59 | 60 |Etiam condimentum, risus eu hendrerit mattis, ipsum nisi aliquam ipsum, a venenatis purus ipsum sit amet lorem. Maecenas tempus dolor nec elit pharetra semper. Nullam id nibh blandit, viverra sem non, porttitor est. Vestibulum ac sollicitudin ligula. Aliquam erat volutpat. Donec id neque a erat sagittis tempus. Duis feugiat velit eget ligula egestas suscipit. Cras pharetra auctor vestibulum. Nullam et lorem eu mi fermentum dignissim. Sed interdum enim ac sem faucibus, non faucibus est placerat. Sed pharetra lorem sit amet augue feugiat auctor.
61 |Pellentesque habitant
21 | 22 |Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
23 | 24 |Etiam dignissim interdum
25 | 26 |Mauris sed diam vel nulla vestibulum porttitor sed ut orci. Nulla facilisi. In et mauris eget justo pulvinar cursus vel at ligula. Maecenas rhoncus turpis a eros lobortis ultrices. Nulla vel tellus leo. Nunc vitae sodales mi, non interdum tortor. Aliquam erat volutpat.
27 | 28 |Dapibus ut vehicula vitae
29 | 30 |Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer a felis non augue fringilla condimentum. Mauris at semper ex. Aliquam magna dolor, gravida ut risus id, malesuada fringilla ligula. Nunc nec magna non augue elementum porta a eu arcu. Donec pellentesque dapibus neque, sit amet pulvinar nisl mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus lacinia tellus tincidunt sagittis. Ut feugiat massa eu viverra varius. Nunc eget magna eu dolor sagittis sodales.
31 | 32 |Proin feugiat massa id fermentum molestie. Nam eu congue ante, eget molestie mi. In commodo orci a augue pharetra, eget sollicitudin diam scelerisque. Suspendisse cursus elit sit amet metus faucibus, non vulputate nibh ornare. Duis fermentum efficitur eros, vel pellentesque leo bibendum eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel nisi nec lorem ullamcorper molestie id auctor leo. Nunc facilisis dignissim nisi, sit amet interdum neque egestas sed. Aliquam erat dui, rutrum sed orci at, laoreet blandit diam. Donec commodo lacus leo, et rhoncus eros laoreet fermentum. Mauris sit amet tempor neque, ac lacinia ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat velit. Mauris mollis leo quis ullamcorper sollicitudin. Proin non justo at leo iaculis bibendum.
33 | 34 |Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae eros sit amet orci malesuada elementum vitae quis leo. Maecenas turpis metus, viverra id tempor in, vehicula vel eros. Etiam finibus a nisl a scelerisque. Fusce ut auctor urna, ac congue eros. Sed eu finibus libero, commodo eleifend enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tristique erat eu erat suscipit, a venenatis lorem vehicula. Nulla dapibus rhoncus tincidunt. Etiam iaculis sem mi, a suscipit massa interdum et. Aliquam ultricies dolor et semper maximus. Donec egestas faucibus metus, quis placerat nisl blandit sed. Morbi porttitor elit scelerisque, vestibulum neque ac, porttitor sem. Ut vel ligula consectetur, pharetra nibh at, sollicitudin erat.
35 | 36 |Sed luctus
37 | 38 |Metus eget laoreet feugiat, felis sem faucibus metus, quis cursus ante ex ut nisi. Etiam id hendrerit felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc commodo cursus lacus at congue. Morbi laoreet iaculis quam non iaculis. Etiam volutpat auctor risus in accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ultrices dolor, eu rutrum ex. Suspendisse tincidunt metus metus, ut egestas nisi efficitur non. Curabitur consequat dictum dolor nec auctor. Vestibulum id felis ac justo congue rhoncus. Phasellus pharetra elit id aliquet aliquet. Vestibulum elementum lorem arcu, eu tincidunt odio euismod consectetur. Sed porta dolor orci, a pellentesque nibh elementum sed. Proin ligula ante, aliquam sit amet magna eget, dignissim scelerisque ante. Nulla vulputate tortor ut mi dapibus, a iaculis nulla facilisis.
39 | 40 |Ut dignissim lobortis vestibulum
41 | 42 |Integer a libero vitae nisi vulputate convallis. Mauris in metus non tortor bibendum scelerisque at quis ante. Nulla dui diam, faucibus sit amet ullamcorper ac, lacinia porta neque. Nulla et urna non sem porta bibendum eu ac tortor. Fusce id metus sem. Vivamus nisl urna, vulputate quis arcu ut, auctor iaculis lacus. Aliquam sed dui sed nulla interdum laoreet non at dolor. Duis laoreet sem justo, vulputate ullamcorper diam pretium ac. Sed convallis ante sit amet metus lacinia, sit amet egestas nunc tempor. Sed eget mi tempor, semper libero porttitor, facilisis leo. Aenean vel imperdiet tellus. Aenean venenatis erat sed odio finibus, at vehicula lorem aliquam. Praesent porttitor velit interdum nunc mollis gravida at non nunc. Proin vitae vulputate elit, vitae commodo tellus.
43 | 44 |Nullam sodales orci
45 | 46 |Pellentesque eu sem mauris. Quisque condimentum nisi a magna tempor dictum. Vestibulum placerat maximus ligula, vitae ultrices nibh aliquam non. In consequat elementum nunc ut elementum. Donec maximus condimentum metus id porta. Sed id congue justo, ac lacinia ex. Nunc convallis imperdiet sem eget euismod. Aenean tristique ex massa, sed ultrices est varius eget. Vivamus vitae metus vitae nisi ornare vehicula.
47 | 48 |Curabitur posuere, massa vel gravida hendrerit, turpis ligula tincidunt ligula, vitae consequat quam risus ac lorem. Aenean lacinia vitae diam sed lobortis. Vivamus vestibulum quam dui, facilisis tempor ante pellentesque sit amet. Proin quis arcu commodo, dapibus tortor id, euismod ex. Mauris sit amet libero et felis euismod pulvinar. Donec tempor tincidunt elementum.
49 | 50 |Nulla placerat urna laoreet
51 | 52 |Pharetra massa vitae, lacinia lectus. Pellentesque tristique purus velit, non malesuada lectus ullamcorper non. Donec sed molestie libero, vel pharetra arcu. Fusce efficitur nisi ex, eu bibendum massa laoreet eu. Proin malesuada condimentum quam. Curabitur in cursus justo. Duis suscipit vulputate ante quis commodo. Sed tincidunt rhoncus tortor, sed vestibulum nisi vulputate nec. Maecenas hendrerit, ipsum vitae egestas suscipit, lorem nibh dignissim lorem, ac placerat mi est eu risus. Vestibulum nisl nisl, auctor nec ante feugiat, maximus pretium mi.
53 | 54 |Donec a malesuada nibh, in cursus eros. Pellentesque sit amet accumsan justo. Donec ut quam lobortis, sagittis erat eu, finibus leo. Proin vestibulum ex dui, id ultrices ligula vulputate quis. Suspendisse est sem, hendrerit sed augue quis, tempus iaculis metus. Etiam rutrum gravida interdum. Duis vitae auctor nunc. Praesent ac metus massa. In ligula sapien, aliquam consequat tincidunt a, iaculis at enim. Nulla facilisi. Cras vulputate ante purus, vitae volutpat ipsum dignissim sed. Mauris dapibus nisl tincidunt dolor blandit, sit amet ultricies neque bibendum. Sed tempor nunc id odio iaculis porta. Pellentesque ut scelerisque mauris, eu bibendum eros.
55 | 56 |Morbi dignissim aliquet nunc eu dignissim. Nulla ultrices felis elit, a posuere massa tincidunt nec. Nulla facilisi. Maecenas lorem nisi, lobortis eu dolor vitae, pretium dapibus ante. Aenean lacus ex, fringilla venenatis tempus sit amet, mollis id tortor. Duis massa mauris, aliquam a lacus a, elementum finibus sem. Praesent elementum tortor est, ut condimentum justo ullamcorper nec. Quisque quis ligula eu ex venenatis sagittis in non dui.
57 | 58 |Fusce mattis sagittis
59 | 60 |Etiam condimentum, risus eu hendrerit mattis, ipsum nisi aliquam ipsum, a venenatis purus ipsum sit amet lorem. Maecenas tempus dolor nec elit pharetra semper. Nullam id nibh blandit, viverra sem non, porttitor est. Vestibulum ac sollicitudin ligula. Aliquam erat volutpat. Donec id neque a erat sagittis tempus. Duis feugiat velit eget ligula egestas suscipit. Cras pharetra auctor vestibulum. Nullam et lorem eu mi fermentum dignissim. Sed interdum enim ac sem faucibus, non faucibus est placerat. Sed pharetra lorem sit amet augue feugiat auctor.
61 |Pellentesque habitant
21 | 22 |Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
23 | 24 |Etiam dignissim interdum
25 | 26 |Mauris sed diam vel nulla vestibulum porttitor sed ut orci. Nulla facilisi. In et mauris eget justo pulvinar cursus vel at ligula. Maecenas rhoncus turpis a eros lobortis ultrices. Nulla vel tellus leo. Nunc vitae sodales mi, non interdum tortor. Aliquam erat volutpat.
27 | 28 |Dapibus ut vehicula vitae
29 | 30 |Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer a felis non augue fringilla condimentum. Mauris at semper ex. Aliquam magna dolor, gravida ut risus id, malesuada fringilla ligula. Nunc nec magna non augue elementum porta a eu arcu. Donec pellentesque dapibus neque, sit amet pulvinar nisl mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus lacinia tellus tincidunt sagittis. Ut feugiat massa eu viverra varius. Nunc eget magna eu dolor sagittis sodales.
31 | 32 |Proin feugiat massa id fermentum molestie. Nam eu congue ante, eget molestie mi. In commodo orci a augue pharetra, eget sollicitudin diam scelerisque. Suspendisse cursus elit sit amet metus faucibus, non vulputate nibh ornare. Duis fermentum efficitur eros, vel pellentesque leo bibendum eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel nisi nec lorem ullamcorper molestie id auctor leo. Nunc facilisis dignissim nisi, sit amet interdum neque egestas sed. Aliquam erat dui, rutrum sed orci at, laoreet blandit diam. Donec commodo lacus leo, et rhoncus eros laoreet fermentum. Mauris sit amet tempor neque, ac lacinia ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat velit. Mauris mollis leo quis ullamcorper sollicitudin. Proin non justo at leo iaculis bibendum.
33 | 34 |Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae eros sit amet orci malesuada elementum vitae quis leo. Maecenas turpis metus, viverra id tempor in, vehicula vel eros. Etiam finibus a nisl a scelerisque. Fusce ut auctor urna, ac congue eros. Sed eu finibus libero, commodo eleifend enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tristique erat eu erat suscipit, a venenatis lorem vehicula. Nulla dapibus rhoncus tincidunt. Etiam iaculis sem mi, a suscipit massa interdum et. Aliquam ultricies dolor et semper maximus. Donec egestas faucibus metus, quis placerat nisl blandit sed. Morbi porttitor elit scelerisque, vestibulum neque ac, porttitor sem. Ut vel ligula consectetur, pharetra nibh at, sollicitudin erat.
35 | 36 |Sed luctus
37 | 38 |Metus eget laoreet feugiat, felis sem faucibus metus, quis cursus ante ex ut nisi. Etiam id hendrerit felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc commodo cursus lacus at congue. Morbi laoreet iaculis quam non iaculis. Etiam volutpat auctor risus in accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ultrices dolor, eu rutrum ex. Suspendisse tincidunt metus metus, ut egestas nisi efficitur non. Curabitur consequat dictum dolor nec auctor. Vestibulum id felis ac justo congue rhoncus. Phasellus pharetra elit id aliquet aliquet. Vestibulum elementum lorem arcu, eu tincidunt odio euismod consectetur. Sed porta dolor orci, a pellentesque nibh elementum sed. Proin ligula ante, aliquam sit amet magna eget, dignissim scelerisque ante. Nulla vulputate tortor ut mi dapibus, a iaculis nulla facilisis.
39 | 40 |Ut dignissim lobortis vestibulum
41 | 42 |Integer a libero vitae nisi vulputate convallis. Mauris in metus non tortor bibendum scelerisque at quis ante. Nulla dui diam, faucibus sit amet ullamcorper ac, lacinia porta neque. Nulla et urna non sem porta bibendum eu ac tortor. Fusce id metus sem. Vivamus nisl urna, vulputate quis arcu ut, auctor iaculis lacus. Aliquam sed dui sed nulla interdum laoreet non at dolor. Duis laoreet sem justo, vulputate ullamcorper diam pretium ac. Sed convallis ante sit amet metus lacinia, sit amet egestas nunc tempor. Sed eget mi tempor, semper libero porttitor, facilisis leo. Aenean vel imperdiet tellus. Aenean venenatis erat sed odio finibus, at vehicula lorem aliquam. Praesent porttitor velit interdum nunc mollis gravida at non nunc. Proin vitae vulputate elit, vitae commodo tellus.
43 | 44 |Nullam sodales orci
45 | 46 |Pellentesque eu sem mauris. Quisque condimentum nisi a magna tempor dictum. Vestibulum placerat maximus ligula, vitae ultrices nibh aliquam non. In consequat elementum nunc ut elementum. Donec maximus condimentum metus id porta. Sed id congue justo, ac lacinia ex. Nunc convallis imperdiet sem eget euismod. Aenean tristique ex massa, sed ultrices est varius eget. Vivamus vitae metus vitae nisi ornare vehicula.
47 | 48 |Curabitur posuere, massa vel gravida hendrerit, turpis ligula tincidunt ligula, vitae consequat quam risus ac lorem. Aenean lacinia vitae diam sed lobortis. Vivamus vestibulum quam dui, facilisis tempor ante pellentesque sit amet. Proin quis arcu commodo, dapibus tortor id, euismod ex. Mauris sit amet libero et felis euismod pulvinar. Donec tempor tincidunt elementum.
49 | 50 |Nulla placerat urna laoreet
51 | 52 |Pharetra massa vitae, lacinia lectus. Pellentesque tristique purus velit, non malesuada lectus ullamcorper non. Donec sed molestie libero, vel pharetra arcu. Fusce efficitur nisi ex, eu bibendum massa laoreet eu. Proin malesuada condimentum quam. Curabitur in cursus justo. Duis suscipit vulputate ante quis commodo. Sed tincidunt rhoncus tortor, sed vestibulum nisi vulputate nec. Maecenas hendrerit, ipsum vitae egestas suscipit, lorem nibh dignissim lorem, ac placerat mi est eu risus. Vestibulum nisl nisl, auctor nec ante feugiat, maximus pretium mi.
53 | 54 |Donec a malesuada nibh, in cursus eros. Pellentesque sit amet accumsan justo. Donec ut quam lobortis, sagittis erat eu, finibus leo. Proin vestibulum ex dui, id ultrices ligula vulputate quis. Suspendisse est sem, hendrerit sed augue quis, tempus iaculis metus. Etiam rutrum gravida interdum. Duis vitae auctor nunc. Praesent ac metus massa. In ligula sapien, aliquam consequat tincidunt a, iaculis at enim. Nulla facilisi. Cras vulputate ante purus, vitae volutpat ipsum dignissim sed. Mauris dapibus nisl tincidunt dolor blandit, sit amet ultricies neque bibendum. Sed tempor nunc id odio iaculis porta. Pellentesque ut scelerisque mauris, eu bibendum eros.
55 | 56 |Morbi dignissim aliquet nunc eu dignissim. Nulla ultrices felis elit, a posuere massa tincidunt nec. Nulla facilisi. Maecenas lorem nisi, lobortis eu dolor vitae, pretium dapibus ante. Aenean lacus ex, fringilla venenatis tempus sit amet, mollis id tortor. Duis massa mauris, aliquam a lacus a, elementum finibus sem. Praesent elementum tortor est, ut condimentum justo ullamcorper nec. Quisque quis ligula eu ex venenatis sagittis in non dui.
57 | 58 |Fusce mattis sagittis
59 | 60 |Etiam condimentum, risus eu hendrerit mattis, ipsum nisi aliquam ipsum, a venenatis purus ipsum sit amet lorem. Maecenas tempus dolor nec elit pharetra semper. Nullam id nibh blandit, viverra sem non, porttitor est. Vestibulum ac sollicitudin ligula. Aliquam erat volutpat. Donec id neque a erat sagittis tempus. Duis feugiat velit eget ligula egestas suscipit. Cras pharetra auctor vestibulum. Nullam et lorem eu mi fermentum dignissim. Sed interdum enim ac sem faucibus, non faucibus est placerat. Sed pharetra lorem sit amet augue feugiat auctor.
61 |Pellentesque habitant
28 | 29 |Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
30 | 31 |Etiam dignissim interdum
32 | 33 |Mauris sed diam vel nulla vestibulum porttitor sed ut orci. Nulla facilisi. In et mauris eget justo pulvinar cursus vel at ligula. Maecenas rhoncus turpis a eros lobortis ultrices. Nulla vel tellus leo. Nunc vitae sodales mi, non interdum tortor. Aliquam erat volutpat.
34 | 35 |Dapibus ut vehicula vitae
36 | 37 |Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer a felis non augue fringilla condimentum. Mauris at semper ex. Aliquam magna dolor, gravida ut risus id, malesuada fringilla ligula. Nunc nec magna non augue elementum porta a eu arcu. Donec pellentesque dapibus neque, sit amet pulvinar nisl mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus lacinia tellus tincidunt sagittis. Ut feugiat massa eu viverra varius. Nunc eget magna eu dolor sagittis sodales.
38 | 39 |Proin feugiat massa id fermentum molestie. Nam eu congue ante, eget molestie mi. In commodo orci a augue pharetra, eget sollicitudin diam scelerisque. Suspendisse cursus elit sit amet metus faucibus, non vulputate nibh ornare. Duis fermentum efficitur eros, vel pellentesque leo bibendum eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel nisi nec lorem ullamcorper molestie id auctor leo. Nunc facilisis dignissim nisi, sit amet interdum neque egestas sed. Aliquam erat dui, rutrum sed orci at, laoreet blandit diam. Donec commodo lacus leo, et rhoncus eros laoreet fermentum. Mauris sit amet tempor neque, ac lacinia ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat velit. Mauris mollis leo quis ullamcorper sollicitudin. Proin non justo at leo iaculis bibendum.
40 | 41 |Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae eros sit amet orci malesuada elementum vitae quis leo. Maecenas turpis metus, viverra id tempor in, vehicula vel eros. Etiam finibus a nisl a scelerisque. Fusce ut auctor urna, ac congue eros. Sed eu finibus libero, commodo eleifend enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tristique erat eu erat suscipit, a venenatis lorem vehicula. Nulla dapibus rhoncus tincidunt. Etiam iaculis sem mi, a suscipit massa interdum et. Aliquam ultricies dolor et semper maximus. Donec egestas faucibus metus, quis placerat nisl blandit sed. Morbi porttitor elit scelerisque, vestibulum neque ac, porttitor sem. Ut vel ligula consectetur, pharetra nibh at, sollicitudin erat.
42 | 43 |Sed luctus
44 | 45 |Metus eget laoreet feugiat, felis sem faucibus metus, quis cursus ante ex ut nisi. Etiam id hendrerit felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc commodo cursus lacus at congue. Morbi laoreet iaculis quam non iaculis. Etiam volutpat auctor risus in accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ultrices dolor, eu rutrum ex. Suspendisse tincidunt metus metus, ut egestas nisi efficitur non. Curabitur consequat dictum dolor nec auctor. Vestibulum id felis ac justo congue rhoncus. Phasellus pharetra elit id aliquet aliquet. Vestibulum elementum lorem arcu, eu tincidunt odio euismod consectetur. Sed porta dolor orci, a pellentesque nibh elementum sed. Proin ligula ante, aliquam sit amet magna eget, dignissim scelerisque ante. Nulla vulputate tortor ut mi dapibus, a iaculis nulla facilisis.
46 | 47 |Ut dignissim lobortis vestibulum
48 | 49 |Integer a libero vitae nisi vulputate convallis. Mauris in metus non tortor bibendum scelerisque at quis ante. Nulla dui diam, faucibus sit amet ullamcorper ac, lacinia porta neque. Nulla et urna non sem porta bibendum eu ac tortor. Fusce id metus sem. Vivamus nisl urna, vulputate quis arcu ut, auctor iaculis lacus. Aliquam sed dui sed nulla interdum laoreet non at dolor. Duis laoreet sem justo, vulputate ullamcorper diam pretium ac. Sed convallis ante sit amet metus lacinia, sit amet egestas nunc tempor. Sed eget mi tempor, semper libero porttitor, facilisis leo. Aenean vel imperdiet tellus. Aenean venenatis erat sed odio finibus, at vehicula lorem aliquam. Praesent porttitor velit interdum nunc mollis gravida at non nunc. Proin vitae vulputate elit, vitae commodo tellus.
50 | 51 |Nullam sodales orci
52 | 53 |Pellentesque eu sem mauris. Quisque condimentum nisi a magna tempor dictum. Vestibulum placerat maximus ligula, vitae ultrices nibh aliquam non. In consequat elementum nunc ut elementum. Donec maximus condimentum metus id porta. Sed id congue justo, ac lacinia ex. Nunc convallis imperdiet sem eget euismod. Aenean tristique ex massa, sed ultrices est varius eget. Vivamus vitae metus vitae nisi ornare vehicula.
54 | 55 |Curabitur posuere, massa vel gravida hendrerit, turpis ligula tincidunt ligula, vitae consequat quam risus ac lorem. Aenean lacinia vitae diam sed lobortis. Vivamus vestibulum quam dui, facilisis tempor ante pellentesque sit amet. Proin quis arcu commodo, dapibus tortor id, euismod ex. Mauris sit amet libero et felis euismod pulvinar. Donec tempor tincidunt elementum.
56 | 57 |Nulla placerat urna laoreet
58 | 59 |Pharetra massa vitae, lacinia lectus. Pellentesque tristique purus velit, non malesuada lectus ullamcorper non. Donec sed molestie libero, vel pharetra arcu. Fusce efficitur nisi ex, eu bibendum massa laoreet eu. Proin malesuada condimentum quam. Curabitur in cursus justo. Duis suscipit vulputate ante quis commodo. Sed tincidunt rhoncus tortor, sed vestibulum nisi vulputate nec. Maecenas hendrerit, ipsum vitae egestas suscipit, lorem nibh dignissim lorem, ac placerat mi est eu risus. Vestibulum nisl nisl, auctor nec ante feugiat, maximus pretium mi.
60 | 61 |Donec a malesuada nibh, in cursus eros. Pellentesque sit amet accumsan justo. Donec ut quam lobortis, sagittis erat eu, finibus leo. Proin vestibulum ex dui, id ultrices ligula vulputate quis. Suspendisse est sem, hendrerit sed augue quis, tempus iaculis metus. Etiam rutrum gravida interdum. Duis vitae auctor nunc. Praesent ac metus massa. In ligula sapien, aliquam consequat tincidunt a, iaculis at enim. Nulla facilisi. Cras vulputate ante purus, vitae volutpat ipsum dignissim sed. Mauris dapibus nisl tincidunt dolor blandit, sit amet ultricies neque bibendum. Sed tempor nunc id odio iaculis porta. Pellentesque ut scelerisque mauris, eu bibendum eros.
62 | 63 |Morbi dignissim aliquet nunc eu dignissim. Nulla ultrices felis elit, a posuere massa tincidunt nec. Nulla facilisi. Maecenas lorem nisi, lobortis eu dolor vitae, pretium dapibus ante. Aenean lacus ex, fringilla venenatis tempus sit amet, mollis id tortor. Duis massa mauris, aliquam a lacus a, elementum finibus sem. Praesent elementum tortor est, ut condimentum justo ullamcorper nec. Quisque quis ligula eu ex venenatis sagittis in non dui.
64 | 65 |Fusce mattis sagittis
66 | 67 |Etiam condimentum, risus eu hendrerit mattis, ipsum nisi aliquam ipsum, a venenatis purus ipsum sit amet lorem. Maecenas tempus dolor nec elit pharetra semper. Nullam id nibh blandit, viverra sem non, porttitor est. Vestibulum ac sollicitudin ligula. Aliquam erat volutpat. Donec id neque a erat sagittis tempus. Duis feugiat velit eget ligula egestas suscipit. Cras pharetra auctor vestibulum. Nullam et lorem eu mi fermentum dignissim. Sed interdum enim ac sem faucibus, non faucibus est placerat. Sed pharetra lorem sit amet augue feugiat auctor.
68 |Pellentesque habitant
34 | 35 |Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
36 | 37 |Etiam dignissim interdum
38 | 39 |Mauris sed diam vel nulla vestibulum porttitor sed ut orci. Nulla facilisi. In et mauris eget justo pulvinar cursus vel at ligula. Maecenas rhoncus turpis a eros lobortis ultrices. Nulla vel tellus leo. Nunc vitae sodales mi, non interdum tortor. Aliquam erat volutpat.
40 | 41 |Dapibus ut vehicula vitae
42 | 43 |Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer a felis non augue fringilla condimentum. Mauris at semper ex. Aliquam magna dolor, gravida ut risus id, malesuada fringilla ligula. Nunc nec magna non augue elementum porta a eu arcu. Donec pellentesque dapibus neque, sit amet pulvinar nisl mollis nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus lacinia tellus tincidunt sagittis. Ut feugiat massa eu viverra varius. Nunc eget magna eu dolor sagittis sodales.
44 | 45 |Proin feugiat massa id fermentum molestie. Nam eu congue ante, eget molestie mi. In commodo orci a augue pharetra, eget sollicitudin diam scelerisque. Suspendisse cursus elit sit amet metus faucibus, non vulputate nibh ornare. Duis fermentum efficitur eros, vel pellentesque leo bibendum eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel nisi nec lorem ullamcorper molestie id auctor leo. Nunc facilisis dignissim nisi, sit amet interdum neque egestas sed. Aliquam erat dui, rutrum sed orci at, laoreet blandit diam. Donec commodo lacus leo, et rhoncus eros laoreet fermentum. Mauris sit amet tempor neque, ac lacinia ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat velit. Mauris mollis leo quis ullamcorper sollicitudin. Proin non justo at leo iaculis bibendum.
46 | 47 |Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae eros sit amet orci malesuada elementum vitae quis leo. Maecenas turpis metus, viverra id tempor in, vehicula vel eros. Etiam finibus a nisl a scelerisque. Fusce ut auctor urna, ac congue eros. Sed eu finibus libero, commodo eleifend enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tristique erat eu erat suscipit, a venenatis lorem vehicula. Nulla dapibus rhoncus tincidunt. Etiam iaculis sem mi, a suscipit massa interdum et. Aliquam ultricies dolor et semper maximus. Donec egestas faucibus metus, quis placerat nisl blandit sed. Morbi porttitor elit scelerisque, vestibulum neque ac, porttitor sem. Ut vel ligula consectetur, pharetra nibh at, sollicitudin erat.
48 | 49 |Sed luctus
50 | 51 |Metus eget laoreet feugiat, felis sem faucibus metus, quis cursus ante ex ut nisi. Etiam id hendrerit felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc commodo cursus lacus at congue. Morbi laoreet iaculis quam non iaculis. Etiam volutpat auctor risus in accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ultrices dolor, eu rutrum ex. Suspendisse tincidunt metus metus, ut egestas nisi efficitur non. Curabitur consequat dictum dolor nec auctor. Vestibulum id felis ac justo congue rhoncus. Phasellus pharetra elit id aliquet aliquet. Vestibulum elementum lorem arcu, eu tincidunt odio euismod consectetur. Sed porta dolor orci, a pellentesque nibh elementum sed. Proin ligula ante, aliquam sit amet magna eget, dignissim scelerisque ante. Nulla vulputate tortor ut mi dapibus, a iaculis nulla facilisis.
52 | 53 |Ut dignissim lobortis vestibulum
54 | 55 |Integer a libero vitae nisi vulputate convallis. Mauris in metus non tortor bibendum scelerisque at quis ante. Nulla dui diam, faucibus sit amet ullamcorper ac, lacinia porta neque. Nulla et urna non sem porta bibendum eu ac tortor. Fusce id metus sem. Vivamus nisl urna, vulputate quis arcu ut, auctor iaculis lacus. Aliquam sed dui sed nulla interdum laoreet non at dolor. Duis laoreet sem justo, vulputate ullamcorper diam pretium ac. Sed convallis ante sit amet metus lacinia, sit amet egestas nunc tempor. Sed eget mi tempor, semper libero porttitor, facilisis leo. Aenean vel imperdiet tellus. Aenean venenatis erat sed odio finibus, at vehicula lorem aliquam. Praesent porttitor velit interdum nunc mollis gravida at non nunc. Proin vitae vulputate elit, vitae commodo tellus.
56 | 57 |Nullam sodales orci
58 | 59 |Pellentesque eu sem mauris. Quisque condimentum nisi a magna tempor dictum. Vestibulum placerat maximus ligula, vitae ultrices nibh aliquam non. In consequat elementum nunc ut elementum. Donec maximus condimentum metus id porta. Sed id congue justo, ac lacinia ex. Nunc convallis imperdiet sem eget euismod. Aenean tristique ex massa, sed ultrices est varius eget. Vivamus vitae metus vitae nisi ornare vehicula.
60 | 61 |Curabitur posuere, massa vel gravida hendrerit, turpis ligula tincidunt ligula, vitae consequat quam risus ac lorem. Aenean lacinia vitae diam sed lobortis. Vivamus vestibulum quam dui, facilisis tempor ante pellentesque sit amet. Proin quis arcu commodo, dapibus tortor id, euismod ex. Mauris sit amet libero et felis euismod pulvinar. Donec tempor tincidunt elementum.
62 | 63 |Nulla placerat urna laoreet
64 | 65 |Pharetra massa vitae, lacinia lectus. Pellentesque tristique purus velit, non malesuada lectus ullamcorper non. Donec sed molestie libero, vel pharetra arcu. Fusce efficitur nisi ex, eu bibendum massa laoreet eu. Proin malesuada condimentum quam. Curabitur in cursus justo. Duis suscipit vulputate ante quis commodo. Sed tincidunt rhoncus tortor, sed vestibulum nisi vulputate nec. Maecenas hendrerit, ipsum vitae egestas suscipit, lorem nibh dignissim lorem, ac placerat mi est eu risus. Vestibulum nisl nisl, auctor nec ante feugiat, maximus pretium mi.
66 | 67 |Donec a malesuada nibh, in cursus eros. Pellentesque sit amet accumsan justo. Donec ut quam lobortis, sagittis erat eu, finibus leo. Proin vestibulum ex dui, id ultrices ligula vulputate quis. Suspendisse est sem, hendrerit sed augue quis, tempus iaculis metus. Etiam rutrum gravida interdum. Duis vitae auctor nunc. Praesent ac metus massa. In ligula sapien, aliquam consequat tincidunt a, iaculis at enim. Nulla facilisi. Cras vulputate ante purus, vitae volutpat ipsum dignissim sed. Mauris dapibus nisl tincidunt dolor blandit, sit amet ultricies neque bibendum. Sed tempor nunc id odio iaculis porta. Pellentesque ut scelerisque mauris, eu bibendum eros.
68 | 69 |Morbi dignissim aliquet nunc eu dignissim. Nulla ultrices felis elit, a posuere massa tincidunt nec. Nulla facilisi. Maecenas lorem nisi, lobortis eu dolor vitae, pretium dapibus ante. Aenean lacus ex, fringilla venenatis tempus sit amet, mollis id tortor. Duis massa mauris, aliquam a lacus a, elementum finibus sem. Praesent elementum tortor est, ut condimentum justo ullamcorper nec. Quisque quis ligula eu ex venenatis sagittis in non dui.
70 | 71 |Fusce mattis sagittis
72 | 73 |Etiam condimentum, risus eu hendrerit mattis, ipsum nisi aliquam ipsum, a venenatis purus ipsum sit amet lorem. Maecenas tempus dolor nec elit pharetra semper. Nullam id nibh blandit, viverra sem non, porttitor est. Vestibulum ac sollicitudin ligula. Aliquam erat volutpat. Donec id neque a erat sagittis tempus. Duis feugiat velit eget ligula egestas suscipit. Cras pharetra auctor vestibulum. Nullam et lorem eu mi fermentum dignissim. Sed interdum enim ac sem faucibus, non faucibus est placerat. Sed pharetra lorem sit amet augue feugiat auctor.
74 |Punch
49 | 50 |To make punch of any sort in perfection, the ambrosial essence of the lemon most be extracted by rubbing lumps of sugar on the rind, which breaks the delicate little vessels that contain the essence, and at the same time absorbs it. This, and making the mixture sweet and strong, using tea instead of water, and thoroughly amalgamating all the compounds, so that the taste of neither the bitter, the sweet, the spirit,- nor the element, shall be perceptible one over the other, is the grand secret, only to be acquired by practice.
51 |In making hot toddy, or hot punch, you must put in the spirits before the water: in cold punch, grog, &c., the other way.
52 |The precise portions of spirit and water, or even of the acidity and sweetness, can have no general rule, as scarcely two persons make punch alike.
53 | 54 |
55 |
56 | Brandy Punch
57 | 58 |Use large bar glass.
59 | 60 |-
61 |
71 |
115 |
167 |
168 |
169 | 
172 |
173 |
220 |
221 |
Fill the tumbler with shaved ice, shake well, and dress the top with berries in season; sip through a straw.
72 |
73 | 74 |Brandy Punch
75 | 76 |For a party of twenty.
77 | 78 |-
79 |
92 |
94 |
95 | Mix the materials well together in a large bowl, and you have a splendid punch.
93 |Mississippi Punch
96 | 97 |Use large bar glass.
98 | 99 |
109 |
112 |
113 |
114 | Fill a tumbler with shaved ice.
110 |The above must be well shaken, and to those who like their draughts "like linked sweetness long drawn out," let them use a glass tube or straw to sip the nectar through. The top of this punch should be ornamented with small pieces of orange, and berries in season.
111 |The Cobbler
116 | 117 |Like the julep, this delicious potation is an American invention, although it is now a favorite in all warm climates. The "cobbler" does not require much skill in compounding, but to make it acceptable to the eye, as well as to the palate, it is necessary to display Home taste in ornamenting the glass after the beverage is made. We give an illustration showing how a cobbler should look when made to suit an epicure.
118 | 119 |Sherry Cobbler
120 | 121 |Use large bar glass.
122 | 123 |-
124 |
130 |
132 |
133 | Fill a tumbler with shaved ice, shake well and ornament with berries in season. Place a straw as represented in the wood-eat.
131 |Champagne Cobbler
134 | 135 |One bottle of wine to four large bar glasses.
136 | 137 |-
138 |
143 |
145 |
146 | Fill the tumbler one-third full with shaved ice, and fill balance with wine, ornament in a tasty manner with berries in season. This beverage should be sipped through a straw.
144 |Catawba Cobbler
147 | 148 |Use large bar glass.
149 | 150 |-
151 |
156 |
158 |
159 | Fill tumbler with shaved ice, and ornament with sliced orange and berries in season. Place a straw as described in the sherry cobbler.
157 |Hock Cobbler
160 | 161 |Use large bar glass.
162 | 163 |
164 |
166 | This drink is made the same way as the Catawba cobbler, using Hock wine instead of Catawba.
165 |Juleps
170 | 171 |
172 |
173 | The julep is peculiarly an American beverage, and in the Southern states is more popular than any other. It was introduced into England by Captain Marryatt, where it is now quite a favorite. The gallant captain seems to have had a penchant for the nectarous drink, and publish- ed the recipe in his work on America. We give it in his own words: "I must descant a little upon the mint julep, as it is, with the thermometer at 100°, one of the most delightful and insinuating potations that ever was invented, and may be drunk with equal satisfaction when the thermometer is as low as 70°. There are many varieties, such as those composed of claret, Madeira, &c. ; but the ingredients of the real mint julep are as follows. I learned how to make them, and succeeded pretty well. Put into a tumbler about a dozen sprigs of the tender shoots of mint, upon them put a spoonful of white sugar, and equal pro- portions of peach and common brandy, so as to fill it up one-third, or perhaps a little less. Then take rasped or pounded ice, and fill up the tumbler. Epicures rub the lips of the tumbler with a piece of fresh pineapple, and the tumbler itself is very often encrusted outside with stalactites of ice. As the ice melts, you drink. I once over- heard two ladies talking in the next room to me, and one of them said, * Well, if I have a weakness for any one thing, it is for a mint julep!' — a very amiable weakness, and proving her good sense and good taste. _ They are, in fact, like the American ladies, irresistible."
174 | 175 |Mint Julep
176 | 177 |Use large bar glass.
178 | 179 |-
180 |
185 |
187 |
188 | Take three or four sprigs of fresh mint, and press them well in the sugar arid water, until the flavor of the mint is extracted; add one and a half wine-glass of Cognac brandy, and fill the glass with fine shaved ice, then draw out the sprigs of mint and insert them in the ice with the stems downward, so that the leaves will be above, in the shape of a bouquet ; arrange berries, and small pieces of sliced orange on top in a tasty manner, dash with Jamaica rum, and sprinkle white sugar on top. Place a straw as represented in the cut, and you have a julep that is fit for an emperor.
186 |Brandy Julep
189 | 190 |Use large bar glass.
191 | 192 |
193 |
195 |
196 | The brandy juice is made with the same ingredients as the mint julep, omitting the fancy fixings.
194 |Gin Julep
197 | 198 |Use large bar glass.
199 | 200 |
201 |
203 |
204 | The gin julep is made with the same ingredients as the mint julep, omitting the fancy fixings.
202 |Whiskey Julep
205 | 206 |Use large bar glass.
207 | 208 |
209 |
211 |
212 | The whiskey julep is made the same as the mint julep, omitting all fruits and berries.
210 |Pineapple Julep
213 | 214 |For a party of five.
215 | 216 |
217 |
219 | Peel, slice, and cut up a ripe pineapple into a glass bowl, add the juice of two oranges, a gill of raspberry syrup, a gill of maraschino, a gill of old gin, a bottle of sparkling Moselle, and about a pound of pure ice in shaves; mix, ornament with berries in season, and serve in flat glasses.
218 |
222 |
225 |
226 |
227 |
228 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Table of Contents (TOC) Generator
3 |
4 | [](https://travis-ci.org/gajus/contents)
5 | [](https://www.npmjs.org/package/contents)
6 |
7 |
10 |
11 | Table of contents generator.
12 |
13 | * [Table of Contents (TOC) Generator](#table-of-contents-toc-generator)
14 | * [Usage](#table-of-contents-toc-generator-usage)
15 | * [Quick Start](#table-of-contents-toc-generator-usage-quick-start)
16 | * [Examples](#table-of-contents-toc-generator-usage-examples)
17 | * [Introduction of ES6 in 4.0.0](#table-of-contents-toc-generator-introduction-of-es6-in-4-0-0)
18 | * [Similar Libraries](#table-of-contents-toc-generator-similar-libraries)
19 | * [Required 3rd Party Libraries](#table-of-contents-toc-generator-similar-libraries-required-3rd-party-libraries)
20 | * [Smooth Scrolling](#table-of-contents-toc-generator-similar-libraries-smooth-scrolling)
21 | * [Window Resize and `scroll` Event Handling](#table-of-contents-toc-generator-similar-libraries-window-resize-and-scroll-event-handling)
22 | * [Table of Contents Array](#table-of-contents-array)
23 | * [Download](#table-of-contents-array-download)
24 | * [Configuration](#table-of-contents-array-configuration)
25 | * [Content Indexing](#table-of-contents-array-content-indexing)
26 | * [Hierarchy](#table-of-contents-array-content-indexing-hierarchy)
27 | * [Linking](#table-of-contents-array-linking)
28 | * [Article ID](#table-of-contents-array-linking-article-id)
29 | * [Markup](#table-of-contents-array-markup)
30 | * [Events](#table-of-contents-array-events)
31 |
32 |
33 |
34 | ## Usage
35 |
36 |
37 | ### Quick Start
38 |
39 | ```js
40 | import Contents from 'contents';
41 |
42 | // This example generates a table of contents for all of the headings in the document.
43 | // Table of contents is an ordered list element.
44 | const contents = Contents();
45 |
46 | // Append the generated list element (table of contents) to the container.
47 | document.querySelector('#your-table-of-contents-container').appendChild(contents.list());
48 |
49 | // Attach event listeners:
50 | contents.eventEmitter().on('change', function () {
51 | console.log('User has navigated to a new section of the page.');
52 | });
53 |
54 | // The rest of the code illustrates firing "resize" event after you have
55 | // added new content after generating the table of contents.
56 | const newHeading = document.createElement('h2');
57 |
58 | newHeading.innerHTML = 'Dynamically generated title';
59 |
60 | document.body.appendChild(newHeading);
61 |
62 | // Firing the "resize" event will regenerate the table of contents.
63 | contents.eventEmitter().trigger('resize');
64 |
65 | ```
66 |
67 |
68 | ### Examples
69 |
70 | * [Good looking](http://gajus.com/sandbox/contents/examples/good-looking/) example.
71 | * [Plain](http://gajus.com/sandbox/contents/examples/plain/) table of contents not using jQuery.
72 | * [Events](http://gajus.com/sandbox/contents/examples/events/) table of contents with all events logged in the `console.log`.
73 | * [Obtain Generated List Element](http://gajus.com/sandbox/contents/examples/list-element/).
74 | * [jQuery](http://gajus.com/sandbox/contents/examples/jquery/) table of contents using jQuery.
75 | * [Smooth scrolling](http://gajus.com/sandbox/contents/examples/smooth-scrolling/) implemented using [jquery-smooth-scroll](https://github.com/kswedberg/jquery-smooth-scroll).
76 |
77 | The code for all of the examples is in the [examples](./examples/) folder.
78 |
79 | [Raise an issue](https://github.com/gajus/contents/issues) if you are missing an example.
80 |
81 |
82 | ## Introduction of ES6 in 4.0.0
83 |
84 | [Similar Libraries](#rimilar-libraries) stats have been generated in 22-Nov-14 08:44:41 UTC. Since then Contents has evolved a lot. The source code is written in ES6 and depends on `babel-core` to run. In projects that already depend on Babel and use webpack to build packages, this is not going to be a problem. Other projects need to consider the relatively heavy weight of the generated package.
85 |
86 |
87 | ## Similar Libraries
88 |
89 | | Feature | [contents](https://github.com/gajus/contents) | [toc](https://github.com/jgallen23/toc) | [jquery.tocify.js](https://github.com/gfranko/jquery.tocify.js) |
90 | | --- | --- | --- | --- |
91 | | Markup using nested `Demonstration of https://github.com/gajus/contents implementation.
223 |The material is taken from How to Mix Drinks: Or, The Bon-vivant's Companion, Containing (1862).
224 |- ` | ✓ | - | - |
92 | | [Smooth scrolling](#smooth-scrolling) | - | ✓ | ✓ |
93 | | Forward and back button support | ✓ | - | ✓ |
94 | | [Events](#events) | ✓ | - | - |
95 | | [Efficient `scroll` event](#window-resize-and-scroll-event-handling) | ✓ | ✓ | heading- |
96 | | [Reflect `window` resize](#window-resize-and-scroll-event-handling) | ✓ | - | ✓ |
97 | | [Extract table of contents as an array](#table-of-contents-array) | ✓ | - | - |
98 | | Overwrite markup and navigation | ✓ | - | - |
99 | | Can have multiple on a page | ✓ | ✓ | ✓ |
100 | | [Required 3rd party libraries](#required-3rd-party-libraries) | - | jQuery | jQuery, jQueryUI |
101 | | Size | < 6.000 kb | 2.581 kb | 7.246 kb |
102 | | GitHub Stars | 192 | 307 | 435 |
103 |
104 | Last updated: Saturday, 22-Nov-14 08:44:41 UTC.
105 |
106 |
107 | ### Required 3rd Party Libraries
108 |
109 | There are no 3rd party dependencies. jQuery selectors are used in the examples to make it simple for the reader.
110 |
111 |
112 | ### Smooth Scrolling
113 |
114 | You can implement smooth scrolling using either of the existing libraries. See [Integration Examples](#integration-examples).
115 |
116 |
117 | ### Window Resize and
scroll Event Handling
118 |
119 | The library will index `offsetTop` of all articles. This index is used to reflect the [change event](#events). The index is built upon loading the page, and in response to `window.onresize` and [`ready`](#events) events.
120 |
121 | Reading `offsetTop` causes a [reflow](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html). Therefore, this should not be done while scrolling.
122 |
123 |
124 | # Table of Contents Array
125 |
126 | You can extract the table of contents as a collection of nested objects representing the table of contents.
127 |
128 | ```js
129 | /**
130 | * @return {array} Array representation of the table of contents.
131 | */
132 | contents.tree();
133 | ```
134 |
135 | Tree is a collection of nodes:
136 |
137 | ```js
138 | [
139 | // Node
140 | {
141 | // Hierarchy level (e.g. h1 = 1)
142 | level: 1,
143 | // Id derived using articleId() function.
144 | id: '',
145 | // Name derived using articleName() function.
146 | name: '',
147 | // The article element.
148 | element: null,
149 | // Collection of the descendant nodes.
150 | descendants: [ /* node */ ]
151 | }
152 | ]
153 | ```
154 |
155 |
156 | ## Download
157 |
158 | Using [NPM](https://www.npmjs.org/):
159 |
160 | ```sh
161 | npm install contents
162 |
163 | ```
164 |
165 |
166 | ## Configuration
167 |
168 | | Name | Type | Description |
169 | | --- | --- | --- |
170 | | `articles` | `NodeList`, `jQuery` | (optional) The default behavior is to index all headings (H1-H6) in the document. See [Content Indexing](#content-indexing). |
171 | | `link` | `function` | (optional) Used to represent article in the table of contents and to setup navigation. See [Linking](#linking). |
172 |
173 | ## Content Indexing
174 |
175 | The default behavior is to index all headings (H1-H6) in the document.
176 |
177 | Use `articles` setting to index content using your own selector:
178 |
179 | ```js
180 | Contents({
181 | articles: document.querySelectorAll('main h2, main h2')
182 | // If you are using jQuery
183 | // articles: $('main').find('h2, h3').get()
184 | });
185 |
186 | ```
187 |
188 |
189 | ### Hierarchy
190 |
191 | `articles` will be used to make the table of contents. `articles` have level of importance. The level of importance determines list nesting (see [Markup](#markup)). For HTML headings, the level of importance is derived from the tag name (`Allow me to reiterate
288 |Allow me to reiterate
289 |Allow me to reiterate
290 | 291 | ``` 292 | 293 | The default `link` implementation will use `Contents.id` to give each article a unique ID: 294 | 295 | ```html 296 |Allow me to reiterate
297 |Allow me to reiterate
298 |Allow me to reiterate
299 | 300 | ``` 301 | 302 | 303 | ## Markup 304 | 305 | Table of contents is an ordered [list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol). List nesting reflects the heading hierarchy. The default behavior is to represent each heading using a hyperlink (See [Linking](#linking)), e.g. 306 | 307 | ```html 308 |JavaScript
309 |History
310 |Trademark
311 |Features
312 |Imperative and structured
313 |Dynamic
314 |Functional
315 |Syntax
316 | ``` 317 | 318 | Contents will generate the following markup for the above content: 319 | 320 | ```html 321 |-
322 |
- ).
50 | * @param {Object} config Result of contents.config.
51 | * @return {Object} Result of contents.eventEmitter.
52 | */
53 | Contents.bind = (eventEmitter, list, config) => {
54 | let articleOffsetIndex;
55 | let lastArticleIndex = null;
56 | let windowHeight;
57 |
58 | const guides = list.querySelectorAll('li');
59 |
60 | eventEmitter.on('resize', () => {
61 | windowHeight = Contents.windowHeight();
62 | articleOffsetIndex = Contents.indexOffset(config.articles);
63 |
64 | eventEmitter.trigger('scroll');
65 | });
66 |
67 | eventEmitter.on('scroll', () => {
68 | let changeEvent;
69 |
70 | const articleIndex = Contents.getIndexOfClosestValue(Contents.windowScrollY() + windowHeight * 0.2, articleOffsetIndex);
71 |
72 | if (articleIndex !== lastArticleIndex) {
73 | changeEvent = {};
74 |
75 | changeEvent.current = {
76 | article: config.articles[articleIndex],
77 | guide: guides[articleIndex]
78 | };
79 |
80 | if (lastArticleIndex !== null) {
81 | changeEvent.previous = {
82 | article: config.articles[lastArticleIndex],
83 | guide: guides[lastArticleIndex]
84 | };
85 | }
86 |
87 | eventEmitter.trigger('change', changeEvent);
88 |
89 | lastArticleIndex = articleIndex;
90 | }
91 | });
92 |
93 | // This allows the script that constructs Contents
94 | // to catch the first ready, resize and scroll events.
95 | setTimeout(() => {
96 | eventEmitter.trigger('resize');
97 | eventEmitter.trigger('ready');
98 |
99 | global.window.addEventListener('resize', Contents.throttle(() => {
100 | eventEmitter.trigger('resize');
101 | }, 100));
102 |
103 | global.window.addEventListener('scroll', Contents.throttle(() => {
104 | eventEmitter.trigger('scroll');
105 | }, 100));
106 | }, 10);
107 | };
108 |
109 | /**
110 | * @return {number}
111 | */
112 | Contents.windowHeight = () => {
113 | return global.innerHeight || global.document.documentElement.clientHeight;
114 | };
115 |
116 | /**
117 | * @return {number}
118 | */
119 | Contents.windowScrollY = () => {
120 | return global.pageYOffset || global.document.documentElement.scrollTop;
121 | };
122 |
123 | /**
124 | * Interpret execution configuration.
125 | *
126 | * @param {Object} userConfig
127 | * @return {Object}
128 | */
129 | Contents.config = (userConfig = {}) => {
130 | const properties = [
131 | 'articles',
132 | 'articleName',
133 | 'articleId',
134 | 'link'
135 | ];
136 |
137 | const difference = _.difference(Object.keys(userConfig), properties);
138 |
139 | if (difference.length) {
140 | throw new Error('Unknown configuration property "' + difference[0] + '".');
141 | }
142 |
143 | const defaultConfig = {
144 | articleId: Contents.articleId,
145 | articleName: Contents.articleName,
146 | articles: global.document.querySelectorAll('h1, h2, h3, h4, h5, h6'),
147 | link: Contents.link
148 | };
149 |
150 | const instanceConfig = _.assign({}, defaultConfig, userConfig);
151 |
152 | if (!instanceConfig.articles.length || !(instanceConfig.articles[0] instanceof global.window.HTMLElement)) {
153 | throw new Error('Option "articles" is not a collection of HTMLElement objects.');
154 | }
155 |
156 | if (typeof instanceConfig.articleName !== 'function') {
157 | throw new TypeError('Option "articleName" must be a function.');
158 | }
159 |
160 | if (typeof instanceConfig.articleId !== 'function') {
161 | throw new TypeError('Option "articleId" must be a function.');
162 | }
163 |
164 | if (typeof instanceConfig.link !== 'function') {
165 | throw new TypeError('Option "link" must be a function.');
166 | }
167 |
168 | return instanceConfig;
169 | };
170 |
171 | /**
172 | * Derive article name.
173 | *
174 | * This method can be overwritten using config.articleName.
175 | *
176 | * @param {HTMLElement} element
177 | * @return {string}
178 | */
179 | Contents.articleName = (element) => {
180 | return element.innerText || element.textContent;
181 | };
182 |
183 | /**
184 | * Derive article ID.
185 | *
186 | * This method can be overwritten using config.articleId.
187 | *
188 | * @param {string} articleName
189 | * @param {HTMLElement} element
190 | * @return {string}
191 | */
192 | Contents.articleId = (articleName, element) => {
193 | return element.id || articleName;
194 | };
195 |
196 | /**
197 | * Make element ID unique in the context of the document.
198 | *
199 | * @param {string} inputId
200 | * @param {Array} existingIDs Existing IDs in the document. Required for markup-contents. (https://github.com/gajus/markdown-contents)
201 | * @return {string}
202 | */
203 | Contents.uniqueID = (inputId, existingIDs) => {
204 | let assignedId;
205 |
206 | let i = 1;
207 |
208 | const formattedId = Contents.formatId(inputId);
209 |
210 | if (existingIDs) {
211 | assignedId = formattedId;
212 |
213 | while (existingIDs.indexOf(assignedId) !== -1) {
214 | assignedId = formattedId + '-' + i++;
215 | }
216 |
217 | existingIDs.push(assignedId);
218 | } else {
219 | if (!global.document) {
220 | throw new Error('No document context.');
221 | }
222 |
223 | assignedId = formattedId;
224 |
225 | while (global.document.querySelector('#' + assignedId)) {
226 | assignedId = formattedId + '-' + i++;
227 | }
228 | }
229 |
230 | return assignedId;
231 | };
232 |
233 | /**
234 | * Formats text into an ID/anchor safe value.
235 | *
236 | * @see http://stackoverflow.com/a/1077111/368691
237 | * @param {string} str
238 | * @return {string}
239 | */
240 | Contents.formatId = (str) => {
241 | return str
242 | .toLowerCase()
243 | .replace(/[ãàáäâ]/g, 'a')
244 | .replace(/[ẽèéëê]/g, 'e')
245 | .replace(/[ìíïî]/g, 'i')
246 | .replace(/[õòóöô]/g, 'o')
247 | .replace(/[ùúüû]/g, 'u')
248 | .replace(/[ñ]/g, 'n')
249 | .replace(/[ç]/g, 'c')
250 | .replace(/\s+/g, '-')
251 | .replace(/[^a-z0-9\-_]+/g, '-')
252 | .replace(/-+/g, '-')
253 | .replace(/^-|-$/g, '')
254 | .replace(/^[^a-z]+/g, '');
255 | };
256 |
257 | /**
258 | * Generate flat index of the articles.
259 | *
260 | * @param {Array} elements
261 | * @param {Contents.articleName} articleName
262 | * @param {Contents.articleId} articleId
263 | * @return {Array}
264 | */
265 | Contents.articles = (elements, articleName = Contents.articleName, articleId = Contents.articleId) => {
266 | return _.map(elements, (element) => {
267 | const article = {};
268 |
269 | article.level = Contents.level(element);
270 | article.name = articleName(element);
271 | article.id = articleId(article.name, element);
272 | article.element = element;
273 |
274 | return article;
275 | });
276 | };
277 |
278 | /**
279 | * Makes hierarchical index of the articles from a flat index.
280 | *
281 | * @param {Array} articles Generated using Contents.articles.
282 | * @param {boolean} makeUniqueIDs
283 | * @param {Array} uniqueIDpool
284 | * @return {Array}
285 | */
286 | Contents.tree = (articles, makeUniqueIDs = true, uniqueIDpool = []) => {
287 | let lastNode;
288 |
289 | const rootNode = {
290 | descendants: [],
291 | level: 0
292 | };
293 |
294 | const tree = rootNode.descendants;
295 |
296 | _.forEach(articles, (article) => {
297 | if (makeUniqueIDs) {
298 | article.id = Contents.uniqueID(article.id, uniqueIDpool);
299 | }
300 | article.descendants = [];
301 |
302 | if (!lastNode) {
303 | tree.push(article);
304 | } else if (lastNode.level === article.level) {
305 | Contents.tree.findParentNode(lastNode, rootNode).descendants.push(article);
306 | } else if (article.level > lastNode.level) {
307 | lastNode.descendants.push(article);
308 | } else {
309 | Contents.tree.findParentNodeWithLevelLower(lastNode, article.level, rootNode).descendants.push(article);
310 | }
311 |
312 | lastNode = article;
313 | });
314 |
315 | return tree;
316 | };
317 |
318 | /**
319 | * Find the object whose descendant is the needle object.
320 | *
321 | * @param {Object} needle
322 | * @param {Object} haystack
323 | * @return {HTMLElement}
324 | */
325 | Contents.tree.findParentNode = (needle, haystack) => {
326 | if (haystack.descendants.indexOf(needle) !== -1) {
327 | return haystack;
328 | }
329 |
330 | let parent;
331 | let i = haystack.descendants.length;
332 |
333 | while (i--) {
334 | parent = Contents.tree.findParentNode(needle, haystack.descendants[i]);
335 |
336 | if (parent) {
337 | return parent;
338 | }
339 | }
340 |
341 | throw new Error('Invalid tree.');
342 | };
343 |
344 | /**
345 | * Find the object whose descendant is the needle object.
346 | * Look for parent (including parents of the found object) with level lower than level.
347 | *
348 | * @param {Object} needle
349 | * @param {number} level
350 | * @param {Object} haystack
351 | * @return {HTMLElement}
352 | */
353 | Contents.tree.findParentNodeWithLevelLower = (needle, level, haystack) => {
354 | const parent = Contents.tree.findParentNode(needle, haystack);
355 |
356 | if (parent.level < level) {
357 | return parent;
358 | } else {
359 | return Contents.tree.findParentNodeWithLevelLower(parent, level, haystack);
360 | }
361 | };
362 |
363 | /**
364 | * Generate ordered list from a tree (see tree) object.
365 | *
366 | * @param {Array} tree
367 | * @param {Function} link Used to customize the destination element in the list and the source element.
368 | * @return {HTMLElement}
369 | */
370 | Contents.list = (tree, link) => {
371 | const list = global.document.createElement('ol');
372 |
373 | _.forEach(tree, (article) => {
374 | const li = global.document.createElement('li');
375 |
376 | if (link) {
377 | link(li, article);
378 | }
379 |
380 | if (article.descendants.length) {
381 | li.appendChild(Contents.list(article.descendants, link));
382 | }
383 |
384 | list.appendChild(li);
385 | });
386 |
387 | return list;
388 | };
389 |
390 | /**
391 | * This function is called after the table of contents is generated.
392 | * It is called for each article in the index.
393 | * Used to represent article in the table of contents and to setup navigation.
394 | *
395 | * @todo wrong description
396 | * @param {HTMLElement} guide An element in the table of contents representing an article.
397 | * @param {Object} article {level, id, name, element, descendants}
398 | * @return {undefined}
399 | */
400 | Contents.link = (guide, article) => {
401 | const guideLink = global.document.createElement('a');
402 | const articleLink = global.document.createElement('a');
403 |
404 | article.element.id = article.id;
405 |
406 | articleLink.href = '#' + article.id;
407 |
408 | while (article.element.childNodes.length) {
409 | articleLink.appendChild(article.element.childNodes[0]);
410 | }
411 |
412 | article.element.appendChild(articleLink);
413 |
414 | guideLink.appendChild(global.document.createTextNode(article.name));
415 | guideLink.href = '#' + article.id;
416 |
417 | guide.insertBefore(guideLink, guide.firstChild);
418 | };
419 |
420 | /**
421 | * Extract element level used to construct list hierarchy, e.g.