Documentation

API

The Files

						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

The classes, ids and custom css properties

  • --th-slide-nlines
  • --th-slide-ratio
  • #th-contactsheet
    • .th-contactsheet (added to documentElement)
    • .th-contactsheet-caption
    • .th-contactsheet-container
    • .th-contactsheet-current
    • .th-contactsheet-exit-btn
    • .th-contactsheet-grid
    • .th-contactsheet-group
    • .th-contactsheet-number
    • .th-contactsheet-thumbnail
    • .th-contactsheet-title
  • Content markup
    • .th-no-figure
    • .th-no-markdown
    • .th-only-screen
    • .th-references
    • .th-slide-full (css only for now)
    • .th-slide-no-header (css only for now)
    • .th-slide-skip
    • .th-slide-split
    • .th-slide-only
  • Template markup
    • .th-container (data-selector)
  • Interface markup
    • .th-size (-> .th-btn-size)
    • .th-slide-start (-> .th-slide-btn-start)
    • .th-contrast (-> .th-btn-contrast)
  • .th-slide
    • .th-slideshow (Applied to body... change to documentElement)
    • .th-slide-backdrop
    • .th-slide-body
    • .th-slide-clock
    • .th-slide-continued
    • .th-slide-number
    • .th-slide-status
    • .th-slide-time
    • .th-slideshow-time
  • .th-slide-navigation
    • .th-slide-first (-> .th-slide-navigation-first)
    • .th-slide-previous (-> .th-slide-navigation-previous)
    • .th-slide-next (-> .th-slide-navigation-next)
    • .th-slide-last (-> .th-slide-navigation-last)
    • .th-slide-feedback
  • .th-slide-options
    • .th-option-contactsheet
    • .th-option-continous
    • .th-option-menu
    • .th-option-print
    • .th-option-slideshow
    • .th-option-stopslideshow
  • #th-toc
    • .th-toc-btn-pin
    • .th-toc-current
    • .th-toc-current-within
    • .th-toc-level-{number}
    • .th-toc-pin
    • .th-web-only

The dataset

  • data-th
  • data-th-slide-style
  • data-th-no-figure
  • data-th-{property}
  • data-th-{plugin}-{property}

Starting Point

						
<!DOCTYPE html>

						
<html lang="en" style="opacity:0;">

						
<head>

						
   <meta charset="UTF-8">

						
   <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

						
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

						
   <title>My first document</title>

						
   <script type="module">

						
      import App from "https://bobanum.github.io/theophile2/App.js";

						
      await App.exec();

						
   </script>

						
</head>

						
<body>

						
   <h1>My first document</h1>

						
   <p>Will be in an "intro" slide. (or not)</p>

						
   <h2>My first slide</h2>

						
   <p>Molestias magni eveniet porro perferendis, officia maxime ducimus quibusdam ut itaque! Voluptatum nam eius libero tempora. Ullam nam eaque magni reprehenderit repudiandae!</p>

						
   <h3>Part of a slide</h3>

						
   <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>

						
   <br/>

						
   <h3>Other part of a slide</h3>

						
   <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>

						
   <h2>My second slide</h2>

						
   <p>Place an image here</p>

						
   <div class="th-references">

						
   <a href="page2.html">Another document as a reference</a>

						
   </div>

						
</body>

						
</html>

Why opacity:0; ?

Theophile.js properties

  • this.headings = "h1, h2, h3";
  • data-th="exclude:Toc,Slide"
  • data-th="slide-zoom: .5;"
  • data-th-slide-style="--rangees: 4"

The plugins

Reference

Properties

Slide

Properties

  • footertext (Theophile🧰, Slide📦, object🎁)
  • nlines
  • slide ?
  • ratio
  • transition
  • transition-duration or transitionDuration
  • transition-options
  • include
  • split
  • exclude

Template

Properties

  • processIframes🧰 (process-iframes)

Toc

Properties

Config file theophile.json

						
{

						
   "nlines": 20,

						
   "ratio": [16, 9],

						
   "transition": "clip-vertical",

						
   "transition-duration": 500,

						
   "transition-options": {

						
      "direction": "e",

						
      "mode": "stack"

						
   },

						
   "slide": {

						
      "footertext": "My test"

						
   }

						
}

Markdown

iFrames

highlight.js

CDATA