This gist should give you a starting point, of how to implement the monocle framework.
The framework can much more. Check the examples in the test folder.
Make sure you have the monocle framework present in the folder js. You should clone it with git but you can also download it via the Download button.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Lorem Ipsum</title> | |
| </head> | |
| <body> | |
| <h3>I</h3> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque neque, varius volutpat cursus vel, tristique vel mi. Etiam tincidunt metus sed libero fringilla venenatis. Suspendisse interdum, neque sit amet fringilla consectetur, nunc nulla accumsan est, vitae porta ligula eros non felis. Donec volutpat viverra metus, eu tincidunt lectus dapibus ac. | |
| </p> | |
| <p> | |
| Sed porttitor tristique libero, at feugiat ligula feugiat ut. Morbi cursus ornare blandit. Suspendisse sit amet sapien metus, sagittis condimentum elit. Sed mollis turpis sed turpis viverra venenatis. Ut viverra dignissim orci, sed egestas nisi lobortis quis. Nulla mi lacus, dictum quis interdum fringilla vitae, pretium sit amet sem. Phasellus vitae ante in mauris varius imperdiet volutpat sed felis. Donec mollis felis vitae magna luctus ut gravida augue luctus. Maecenas suscipit purus id odio euismod porttitor at volutpat purus. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque neque, varius volutpat cursus vel, tristique vel mi. Etiam tincidunt metus sed libero fringilla venenatis. Suspendisse interdum, neque sit amet fringilla consectetur, nunc nulla accumsan est, vitae porta ligula eros non felis. Donec volutpat viverra metus, eu tincidunt lectus dapibus ac. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget magna tortor, eget ullamcorper orci. Morbi vel odio et enim vestibulum varius. Praesent consequat porttitor augue, et vehicula mi venenatis eu. Curabitur dignissim dictum nulla in dignissim. Etiam et mauris nulla, at gravida augue. Donec quis nulla urna. Donec et diam eu arcu mollis blandit at a libero. Fusce iaculis, neque vitae hendrerit faucibus, odio orci euismod nisi, ut mattis lacus est ac dolor. Proin dictum pellentesque augue, ac lobortis tellus dignissim eget. Suspendisse nec nisl sapien, sit amet imperdiet lorem. Praesent vel lectus et risus mollis aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce nec imperdiet elit. Ut rhoncus purus id leo lobortis faucibus. Maecenas at nulla nibh, vitae vulputate magna. Ut id eleifend tortor. Ut mollis tortor at nisl blandit elementum iaculis metus placerat. <i>Cras sed risus erat. Cras tincidunt massa et tellus rutrum consequat.</i> Pellentesque imperdiet augue sit amet turpis porta quis volutpat tortor mattis. Nunc non arcu quis nisl faucibus tempor. Nullam fringilla nisl et dolor convallis et imperdiet nunc ornare. In dictum fringilla enim, sed ultricies dolor ultrices et. Vestibulum consectetur eleifend viverra. Phasellus tempor tristique erat pharetra viverra. Aliquam varius nulla id risus egestas quis interdum nisi dapibus. Phasellus porttitor, lectus a bibendum feugiat, mi tellus pulvinar augue, a tempor orci urna vitae sapien. Suspendisse ante elit, dictum ut sodales nec, dictum ac sem. Curabitur et porttitor tellus. Morbi dapibus elementum placerat. Sed dui nisl, condimentum non faucibus sed, commodo in sem. Suspendisse non ipsum turpis, et suscipit massa. <i>Proin varius ante quis urna sollicitudin sollicitudin.</i> Vestibulum lectus elit, sagittis sit amet tincidunt eu, rutrum sed urna. Praesent pellentesque mi quis est interdum in congue erat congue. Ut nec felis sed orci sagittis dapibus. Proin orci lorem, viverra non porttitor nec, euismod elementum nunc. Mauris non scelerisque velit. Suspendisse potenti. Cras iaculis dictum elit ut ullamcorper. Integer sed urna pharetra odio semper vulputate eu in elit. Phasellus mollis lectus non nisl rutrum molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget magna tortor, eget ullamcorper orci. Morbi vel odio et enim vestibulum varius. Praesent consequat porttitor augue, et vehicula mi venenatis eu. Curabitur dignissim dictum nulla in dignissim. Etiam et mauris nulla, at gravida augue. Donec quis nulla urna. Donec et diam eu arcu mollis blandit at a libero. Fusce iaculis, neque vitae hendrerit faucibus, odio orci euismod nisi, ut mattis lacus est ac dolor. | |
| </p> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Lorem Ipsum</title> | |
| </head> | |
| <body> | |
| <h3>II</h3> | |
| <p> | |
| Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. | |
| </p> | |
| <p> | |
| Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. | |
| </p> | |
| <p> | |
| Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. | |
| </p> | |
| <p> | |
| Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? | |
| </p> | |
| <p> | |
| Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? | |
| </p> | |
| <p> | |
| At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. | |
| </p> | |
| <p> | |
| Et harum quidem rerum facilis est et expedita distinctio gremlins. | |
| </p> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <head> | |
| <title>Dummy</title> | |
| <!-- MONOCLE CORE --> | |
| <script type="text/javascript" src="js/monocle/src/monocle.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/compat.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/factory.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/events.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/styles.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/reader.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/book.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/component.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/place.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/framer.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/dimensions/columns.js"></script> | |
| <!-- MONOCLE FLIPPERS --> | |
| <script type="text/javascript" src="js/monocle/src/controls/panel.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/panels/twopane.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/dimensions/columns.js"></script> | |
| <script type="text/javascript" src="js/monocle/src/flippers/slider.js"></script> | |
| <link rel="stylesheet" type="text/css" href="js/monocle/src/monocle.css" /> | |
| <script type="text/javascript"> | |
| var bookData = { | |
| getComponents: function () { | |
| return [ | |
| 'content1.html', | |
| 'content2.html' | |
| ]; | |
| }, | |
| getContents: function () { | |
| return [ | |
| {title: "Content Title 1", src: 'content1.html'}, | |
| {title: "Content Title 2", src: 'content2.html'} | |
| ] | |
| }, | |
| getComponent: function (componentId) { | |
| return {url:componentId}; | |
| }, | |
| getMetaData: function(key) { | |
| return { | |
| title: "Test document", | |
| creator: "Aron Woost" | |
| }[key]; | |
| } | |
| } | |
| Monocle.Events.listen( | |
| window, | |
| 'load', | |
| function () { | |
| window.reader = Monocle.Reader('reader', bookData); | |
| } | |
| ); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="reader" style="width:300px; height:450px;">test</div> | |
| </body> | |
| </html> |
I'm having a hard time getting this to run. It expects a bunch of .js files that don't seem to exist in the Monocle clone.