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.
- Markdown support
- Code highlighting
- Layout attributes
- keyboard control
- touch control
- Responsive scaling (4:3, 16:9)
- FullScreen mode
- Background image & filter
- Progress indicator
- Accessibility support
- Pointer mode (TODO)
-
Canvas drawing mode (experimental)(drop v0.13~)
- WAI-ARIA IN FRESH! & AbemaTV
- CLIENT SIDE OF █████FRESH.TV
- Reactive Programming in JavaScript
- Bacon.js & Talkie.js
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>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});The default scrollable direction is vertical. If you execute it with the following code, the scroll direction becomes horizontal.
talkie.run({horizontal: true});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.
interface TalkieOptions {
wide?: boolean; // default: false
horizontal?: boolean; // default: false
}
talkie.run(options);When you press the f will be a full-screen mode. f or Esc Press and then exit.
Many thanks!
- ysugimoto/resumify: Capture screenshot and make PDF on your HTML presentation.
- nakajmg/talkie-generator: Templates generator for Talkie.js
- TODO
- Add option
linkShouldBlank. - Add
[horizontal]style for default theme. - Fixed that transition suppression was not appropriate.
- Update dependencies.
- Add experimental feature "canvas drawing".
- Remove
Aozora Minchofrom default style.
- Improve accessibility support.
aria-hiddenattribute to use instead ofvisible,- Rename attribute,
pagetodata-page. - Rename attribute,
body-bgtodata-body-bg. - Rename attribute,
no-transitiontodata-no-transition.
- 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].
The MIT License (MIT)
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent