theophile

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/docs.css" /> <script src="js/Doc.js"></script> <title>Documentation</title> </head> <body> <div class="interface"> <header> <h1>Documentation</h1> <a href="api">API</a> </header> <footer> © Martin Boudreau </footer> <div class="body"> <div class="column"> </div> <div class="content"> <article id="the_files" class="collapse"> <h2>The Files</h2> <pre style="white-space: pre-line; line-height: 1;"> theophile/ ┣━docs/ ┣━example/ ┣━img/ ┣━src/ ┃ ┣━css/ ┃ ┃ ┗━style.scss ┃ ┣━plugins/ ┃ ┃ ┣━Reference/ ┃ ┃ ┃ ┣━Reference.js ┃ ┃ ┃ ┗━style.scss ┃ ┃ ┣━Slide/ ┃ ┃ ┃ ┣━Properties.js ┃ ┃ ┃ ┣━Slide.js ┃ ┃ ┃ ┣━style.scss ┃ ┃ ┃ ┣━_contactsheet.scss ┃ ┃ ┃ ┗━_navigation.scss ┃ ┃ ┣━Template/ ┃ ┃ ┃ ┣━Properties.js ┃ ┃ ┃ ┣━style.scss ┃ ┃ ┃ ┗━Template.js ┃ ┃ ┣━Toc/ ┃ ┃ ┃ ┣━style.scss ┃ ┃ ┃ ┗━Toc.js ┃ ┃ ┗━Plugin.js ┃ ┣━transitions/ ┃ ┃ ┣━Transition.js ┃ ┃ ┣━TransitionBlur.js ┃ ┃ ┣━TransitionBox.js ┃ ┃ ┣━TransitionClip.js ┃ ┃ ┣━TransitionFade.js ┃ ┃ ┣━TransitionFlip.js ┃ ┃ ┣━TransitionMask.js ┃ ┃ ┣━TransitionNone.js ┃ ┃ ┗━TransitionSlide.js ┃ ┗━Theophile.js ┣━App.js //TODO Update ┗━README.md </pre> </article> <article id="the_classes" class="collapse"> <h2>The classes, ids and custom css properties</h2> <ul class="hierarchy"> <li>--th-slide-nlines</li> <li>--th-slide-ratio</li> <li>#th-contactsheet <ul> <li>.th-contactsheet (added to documentElement)</li> <li>.th-contactsheet-caption</li> <li>.th-contactsheet-container</li> <li>.th-contactsheet-current</li> <li>.th-contactsheet-exit-btn</li> <li>.th-contactsheet-grid</li> <li>.th-contactsheet-group</li> <li>.th-contactsheet-number</li> <li>.th-contactsheet-thumbnail</li> <li>.th-contactsheet-title</li> </ul> </li> <li>Content markup <ul> <li>.th-no-figure</li> <li>.th-no-markdown</li> <li>.th-only-screen</li> <li>.th-references</li> <li>.th-slide-full (css only for now)</li> <li>.th-slide-no-header (css only for now)</li> <li>.th-slide-skip</li> <li>.th-slide-split</li> <li>.th-slide-only</li> </ul> </li> <li>Template markup <ul> <li>.th-container (data-selector)</li> </ul> </li> <li>Interface markup <ul> <li>.th-size (-> .th-btn-size)</li> <li>.th-slide-start (-> .th-slide-btn-start)</li> <li>.th-contrast (-> .th-btn-contrast)</li> </ul> </li> <li>.th-slide <ul> <li>.th-slideshow (Applied to body... change to documentElement)</li> <li>.th-slide-backdrop</li> <li>.th-slide-body</li> <li>.th-slide-clock</li> <li>.th-slide-continued</li> <li>.th-slide-number</li> <li>.th-slide-status</li> <li>.th-slide-time</li> <li>.th-slideshow-time</li> </ul> </li> <li>.th-slide-navigation <ul> <li>.th-slide-first (-> .th-slide-navigation-first)</li> <li>.th-slide-previous (-> .th-slide-navigation-previous)</li> <li>.th-slide-next (-> .th-slide-navigation-next)</li> <li>.th-slide-last (-> .th-slide-navigation-last)</li> <li>.th-slide-feedback</li> </ul> </li> <li>.th-slide-options <ul> <li>.th-option-contactsheet</li> <li>.th-option-continous</li> <li>.th-option-menu</li> <li>.th-option-print</li> <li>.th-option-slideshow</li> <li>.th-option-stopslideshow</li> </ul> </li> <li>#th-toc <ul> <li>.th-toc-btn-pin</li> <li>.th-toc-current</li> <li>.th-toc-current-within</li> <li>.th-toc-level-{number}</li> <li>.th-toc-pin</li> <li>.th-web-only</li> </ul> </li> </ul> </article> <article id="the_dataset" class="collapse"> <h2>The dataset</h2> <ul> <li>data-th</li> <li>data-th-slide-style</li> <li>data-th-no-figure</li> <li>data-th-{property}</li> <li>data-th-{plugin}-{property}</li> </ul> </article> <article id="starting_point" class="collapse"> <h2>Starting Point</h2> <pre class="codeblock"> <div><!DOCTYPE html></div> <div><html lang="en" style="opacity:0;"></div> <div><head></div> <div> <meta charset="UTF-8"></div> <div> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"></div> <div> <meta name="viewport" content="width=device-width, initial-scale=1.0"></div> <div> <title>My first document</title></div> <div> <script type="module"></div> <div> import App from "https://bobanum.github.io/theophile2/App.js";</div> <div> await App.exec();</div> <div> </script></div> <div></head></div> <div><body></div> <div> <h1>My first document</h1></div> <div> <p>Will be in an "intro" slide. (or not)</p></div> <div> <h2>My first slide</h2></div> <div> <p>Molestias magni eveniet porro perferendis, officia maxime ducimus quibusdam ut itaque! Voluptatum nam eius libero tempora. Ullam nam eaque magni reprehenderit repudiandae!</p></div> <div> <h3>Part of a slide</h3></div> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ducimus neque eaque dolor accusantium vitae magnam modi consequatur, minus voluptate quas minima nemo autem cumque laborum et eum doloribus asperiores!</p></div> <div> <br/></div> <div> <h3>Other part of a slide</h3></div> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quaerat, necessitatibus dignissimos ratione similique aliquid veritatis qui itaque ducimus tempora exercitationem sunt tempore labore accusantium quibusdam optio eos eius ipsa?</p></div> <div> <h2>My second slide</h2></div> <div> <p>Place an image here</p></div> <div> <div class="th-references"></div> <div> <a href="page2.html">Another document as a reference</a></div> <div> </div></div> <div></body></div> <div></html></div> </pre> </article> <article id="why_opacity"> <h2>Why <code>opacity:0;</code> ?</h2> </article> <article id="theophile.js_properties"> <h2>Theophile.js properties</h2> <ul> <li>this.headings = "h1, h2, h3";</li> <li>data-th="exclude:Toc,Slide"</li> <li>data-th="slide-zoom: .5;"</li> <li>data-th-slide-style="--rangees: 4"</li> </ul> </article> <article id="the_plugins"> <h2>The plugins</h2> <h3>Reference</h3> <h4>Properties</h4> <h3>Slide</h3> <h4>Properties</h4> <ul> <li>footertext (Theophile🧰, Slide📦, object🎁)</li> <li>nlines</li> <li>slide ?</li> <li>ratio</li> <li>transition</li> <li>transition-duration or transitionDuration</li> <li>transition-options</li> <li>include</li> <li>split</li> <li>exclude</li> </ul> <h3>Template</h3> <h4>Properties</h4> <ul> <li>processIframes🧰 (process-iframes)</li> </ul> <h3>Toc</h3> <h4>Properties</h4> </article> <article id="config_file_theophile.json"> <h2>Config file <code>theophile.json</code></h2> <pre class="codeblock"> <div>{</div> <div> "nlines": 20,</div> <div> "ratio": [16, 9],</div> <div> "transition": "clip-vertical",</div> <div> "transition-duration": 500,</div> <div> "transition-options": {</div> <div> "direction": "e",</div> <div> "mode": "stack"</div> <div> },</div> <div> "slide": {</div> <div> "footertext": "My test"</div> <div> }</div> <div>}</div> </pre> </article> <article id="markdown"> <h2>Markdown</h2> </article> <article id="iframes"> <h2>iFrames</h2> </article> <article id="highlight.js"> <h2>highlight.js</h2> </article> <article id="cdata"> <h2>CDATA</h2> </article>  </div> </div> </div> </body> </html>