Talkie (Simple slide presentation library. Responsive scaling & markdown ready)

<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>

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>

```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>

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.clear();
    // print presenter notes
    console.info(talkie.notes[current.getAttribute('page')]);
  });
});
</script>
</body>
</html>

Updated missing url //ahomu.github.io/Talkie/dist/talkie.min.js to //ahomu.github.io/talkie/dist/talkie.min.js

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js

https://ahomu.github.io/Talkie/dist/talkie.min.js