Talkie.js - Web Components based Slide library

The master branch is unstable because it makes comprehensive changes with v0.13. For v0.12 code, please refer to the v0.12.x branch.

This library written in TypeScript & ReactiveX/rxjs: A reactive programming library for JavaScript.

For more information about dependency Please look at the package.json.

Feature

Real presentation sample

Getting started

Talkie.js contains two of the CSS and one of JavaScript.

dist/talkie.min.css
dist/talkie.min.js
dist/talkie.theme-default.css

Next code is the simplest example.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./dist/talkie.css">
<link rel="stylesheet" href="./dist/talkie.theme-default.css">
</head>
<body>

<!-- Pure HTML style -->
<tk-slide layout>
  <h1>Slide 1</h1>
</tk-slide>

<!-- Markdown style ( require `type` attribute ) -->
<tk-slide layout type="text/x-markdown">
# Slide 2
</tk-slide>

<script src="./dist/webcomponents-loader.js"></script>
<script src="./dist/talkie.js"></script>
<script>
window.addEventListener('WebComponentsReady', function(e) {
  document.body.className += ' webcomponents-ready';
  talkie.run();
});
</script>
</body>
</html>

If you use the code highlighting, you must load these files.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

Slide ratio

The default slide is 4:3 (width 1024px, height 768px). If you execute it with the following code, the slide ratio becomes 16:9 (width: 1366px, height 768px).

talkie.run({wide: true});

Scrolling direction

The default scrollable direction is vertical. If you execute it with the following code, the scroll direction becomes horizontal.

talkie.run({horizontal: true});

Backface image & filter

You can add backface attribute into each slides. Image path that you specify in the backface attribute will be the background of when the slide is displayed.

<tk-slide layout
          backface="background-image.jpg"
          backface-filter="blur(1px) brightness(.8)">

  <h1>Title</h1>
  <p>foo, bar, baz, qux...</p>

</tk-slide>

backface-filter attribute is applied to the background image as CSS Filters. But using this, will occur side effect significantly to performance on mobile device.

All options

interface TalkieOptions {
  wide?: boolean; // default: false
  horizontal?: boolean; // default: false
}

talkie.run(options);

FullScreen mode

When you press the f will be a full-screen mode. f or Esc Press and then exit.

Utilities

Many thanks!

Change Log

v0.13

TODO

v0.12

Add option linkShouldBlank.
Add [horizontal] style for default theme.
Fixed that transition suppression was not appropriate.
Update dependencies.

v0.11

Add experimental feature "canvas drawing".
Remove Aozora Mincho from default style.

v0.10

Improve accessibility support.
aria-hidden attribute to use instead of visible,
Rename attribute, page to data-page.
Rename attribute, body-bg to data-body-bg.
Rename attribute, no-transition to data-no-transition.

v0.9

Remove the Bacon.js, to use the ReactiveX/rxjs instead.
Add TalkieExport.key: (charKey: string) => Observable<KeyboardEvent>.
Deprecated TalkieExport.api
Deprecated TalkieExport.controls
Fixed unexpected transparent background at fullscreen.
Default theme some style changes.
- [invert] has been cut out from the specified value of the layout.
- Deprecated layouts [title-invert], [bullets-invert]
- Now it is specified as [layout=title][invert].

License

The MIT License (MIT)

ahomu/Talkie