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