index.html
<html>
<head>
<meta charset="utf-8">
<title>Talkie.js - HTML/CSS/JavaScript Presentation Library</title>
<link rel="stylesheet" href="//ahomu.github.io/Talkie/dist/talkie.min.css">
<link rel="stylesheet" href="//ahomu.github.io/Talkie/dist/talkie-default.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/monokai_sublime.min.css">
</head>
<body>
<template layout="cover" type="text/x-markdown">
# Talkie.js
HTML/CSS/JavaScript Presentation Library
Go to [repository](https://github.com/ahomu/Talkie)
</template>
<template layout="bullets" type="text/x-markdown">
## Feature
- Markdown support
- Code highlighting
- Responsive scaling
- FullScreen mode (press `F`)
- Pointer mode (press `B`)
- Layout attributes (WIP)
- Progress indicator
</template>
<template layout="bullets" type="text/x-markdown">
## 機能 (Japanese)
- Markdown書けるよ (੭ु˵＞ヮ＜)੭ु⁾⁾
- ハイライトばっちり _:(°ω° 」∠):＿
- レスポンシブだよ (^з^)-☆
- フルスクリーン対応 (press `F`) (｡•̀ᴗ-)✧
- ポインターだせるよ (press `B`) ( ꒪◡꒪)
- 属性でレイアウトできるよ (*´▽`)
- 進行度インジゲータあるよ c⌒っ.ω.)っ
</template>
<template layout="code" type="text/x-markdown">
## in HTML
```html
<section layout="title">
<h1>Section Title</h1>
<p>Lorem ipsum dolor sit amet, consect...</p>
</section>
<section layout="bullets">
<h2>The bullets</h2>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</section>
```
</template>
<template layout="code" type="text/x-markdown">
## in Markdown
```html
<script layout="title" type="text/x-markdown">
# Section Title
Lorem ipsum dolor sit amet, consect...
</script>
<script layout="bullets" type="text/x-markdown">
## The bullets
- Foo
- Bar
- Baz
</script>
```
You can use `template` element instead of `script`.
</template>
<template layout="code" type="text/x-markdown">
## Backface image & filter
```html
<section layout
backface="background-image.jpg"
backface-filter="blur(1px) brightness(.8)">
<h1>Title</h1>
<p>foo, bar, baz, qux...</p>
</section>
```
</template>
<template layout="title" invert type="text/x-markdown"
backface="https://farm8.staticflickr.com/7469/16209884502_211d01ac0d_z_d.jpg"
backface-filter="blur(3px) brightness(.9)">
# Backface (北極)
`backface-filter="blur(3px) brightness(.9)"`
</template>
<template layout="bullets" type="text/x-markdown">
## FullScreen mode
When you press the **"f"** key will be a full-screen mode. "f" or "Esc" key Press and then exit.
</template>
<template layout="bullets" type="text/x-markdown">
## Pointer mode
When you press the **"b"** key, the pointer `visibility` is toggled
</template>
<template layout="bullets" type="text/x-markdown">
## Presenter note
Open developer tools, will show presenter notes
-----
Yes! This is your note!
</template>
<template layout="code" type="text/x-markdown">
## Custom key binding & control (1/2)
```javascript
var talkie = Talkie({wide:false});
talkie.key('space').subscribe(talkie.next$);
talkie.key('s').subscribe(talkie.next$);
talkie.key('n').subscribe(talkie.next$);
talkie.key('a').subscribe(talkie.prev$);
talkie.key('p').subscribe(talkie.prev$);
```
</template>
<template layout="code" type="text/x-markdown">
## Custom key binding & control (2/2)
```javascript
window.next = function() {
talkie.next$.next();
};
window.prev = function() {
talkie.prev$.next();
};
window.jump = function(num) {
talkie.jump$.next(num);
};
```
</template>
<template layout="code" type="text/x-markdown">
## All Options
```typescript
interface TalkieOptions {
wide?: boolean;
control?: boolean;
pointer?: boolean;
progress?: boolean;
backface?: boolean;
notransition?: boolean;
}
Talkie(options);
```
</template>
<script layout="code" type="text/x-markdown">
## All Exports
```typescript
interface TalkieExports {
key: (charKey: string) => Observable<KeyboardEvent>;
notes: { [pageNum: number]: string };
changed: Observable<HTMLElement>;
ratio: Observable<number>;
next$: Subject<void>;
prev$: Subject<void>;
jump$: Subject<number>;
}
var exports = Talkie();
```
</script>
<template layout="cover" type="text/x-markdown">
## Enjoy!
[ahomu/Talkie - GitHub.com](https://github.com/ahomu/Talkie)
</template>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script src="//ahomu.github.io/Talkie/dist/talkie.min.js"></script>
<script>
var talkie = Talkie({wide: false});
talkie.key('s').subscribe(talkie.next$);
talkie.key('n').subscribe(talkie.next$);
talkie.key('a').subscribe(talkie.prev$);
talkie.key('p').subscribe(talkie.prev$);
document.addEventListener('DOMContentLoaded', function() {
talkie.changed.subscribe(function(current) {
console.info(talkie.notes[current.getAttribute('page')]);
});
});
</script>
</body>
</html>