Talkie.js - HTML/CSS/JavaScript Slide library
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
- Markdown support
- Code highlighting
- Layout attributes
- keyboard control
- touch control
- Responsive scaling (4:3, 16:9)
- FullScreen mode
- Background image & filter
- Pointer attention
- Progress indicator
- Accessibility support
- Canvas drawing mode (experimental)
Real presentation sample
- WAI-ARIA IN FRESH! & AbemaTV
- CLIENT SIDE OF █████FRESH.TV
- Reactive Programming in JavaScript
- Bacon.js & Talkie.js
Getting started
Talkie.js contains two of the CSS and one of JavaScript.
- dist/talkie.min.css
- dist/talkie.min.js
- dist/talkie-default.min.css
Next code is the simplest example.
<!-- Pure HTML style --> Slide 1 <!-- Markdown style ( require `type` attribute ) --> <!-- You can also use `<template>` element --># Slide 2
If you use the code highlighting, you must load these files.
Slide ratio
The default slide 4:3 (width 1024px, height 768px). In the following code ratio 16:9 (width: 1366px, height 768px) you will.
;
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.
Title foo, bar, baz, qux...
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
Talkieoptions;
FullScreen mode
When you press the "f" key will be a full-screen mode. "f" or "Esc" key Press and then exit.
Pointer mode
When you press the "b" key, the pointer visibility
is toggled
Canvas drawing mode
When you press the "v" key, the drawing mode is toggled, and clear line when press "c" key.
Custom key binding & control
Talkie()
returns an object with initialization. This object has some of the control bus and functionality.
var talkie = ;
You can define any key bindings.
talkie;talkie;talkie;talkie;talkie;
It is also possible to control these functions in the program.
window { talkienext$next;};window { talkieprev$next;};window { talkiejump$nextnum;};
All exports
;
Utilities
Many thanks!
- ysugimoto/resumify: Capture screenshot and make PDF on your HTML presentation.
- nakajmg/talkie-generator: Templates generator for Talkie.js
Change Log
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 ofvisible
,- Rename attribute,
page
todata-page
. - Rename attribute,
body-bg
todata-body-bg
. - Rename attribute,
no-transition
todata-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)