Simple slide presentation library. Responsive scaling & markdown ready.
MIT License
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.
Talkie.js contains two of the CSS and one of JavaScript.
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!
linkShouldBlank
.[horizontal]
style for default theme.Aozora Mincho
from default style.aria-hidden
attribute to use instead of visible
,page
to data-page
.body-bg
to data-body-bg
.no-transition
to data-no-transition
.TalkieExport.key: (charKey: string) => Observable<KeyboardEvent>
.TalkieExport.api
TalkieExport.controls
[invert]
has been cut out from the specified value of the layout.[title-invert]
, [bullets-invert]
[layout=title][invert]
.The MIT License (MIT)