Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ahomu/Talkie

Simple slide presentation library. Responsive scaling & markdown ready.
https://github.com/ahomu/Talkie

html markdown rxjs slide talkie typescript

Last synced: 3 months ago
JSON representation

Simple slide presentation library. Responsive scaling & markdown ready.

Lists

README 

        
Talkie.js - Web Components based Slide library

====================



**The `master` branch is unstable because it makes comprehensive changes with v0.13. For v0.12 code, please refer to the [v0.12.x](https://github.com/ahomu/Talkie/tree/v0.12.x) branch.**



[![npm version][npm-image]][npm-url] [![build status][circle-image]][circle-url] [![Dependency Status][deps-image]][deps-url]



This library written in [TypeScript](https://github.com/Microsoft/TypeScript) & [ReactiveX/rxjs: A reactive programming library for JavaScript](https://github.com/ReactiveX/RxJS).



For more information about dependency Please look at the [package.json](package.json).



## Feature



- [x] Markdown support

- [x] Code highlighting

- [x] Layout attributes

- [x] keyboard control

- [x] touch control

- [x] Responsive scaling (4:3, 16:9)

- [x] FullScreen mode

- [x] Background image & filter

- [x] Progress indicator

- [x] Accessibility support

- [ ] Pointer mode (TODO)

- [ ] ~~Canvas drawing mode (experimental)~~ (drop v0.13~)



## Real presentation sample



- [WAI-ARIA IN FRESH! & AbemaTV](http://s.aho.mu/160809-a11y_informal_study/)

- [CLIENT SIDE OF █████FRESH.TV](http://s.aho.mu/160405-node_school/)

- [Reactive Programming in JavaScript](http://ahomu.github.io/s/150221-frontrend_conference/index.html)

- [Bacon.js & Talkie.js](http://ahomu.github.io/s/150217-lt/index.html)



## Getting started



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.



```html



  
Slide 1



# Slide 2



window.addEventListener('WebComponentsReady', function(e) {

  document.body.className += ' webcomponents-ready';

  talkie.run();

});



```



If you use the code highlighting, you must load these files.



```html



```



### Slide ratio



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



```javascript

talkie.run({wide: true});

```



### Scrolling direction



The default scrollable direction is vertical. If you execute it with the following code, the scroll direction becomes horizontal.



```javascript

talkie.run({horizontal: true});

```



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



```html



  
Title


  
foo, bar, baz, qux...



```



`backface-filter` attribute is applied to the background image as [CSS Filters](http://css-tricks.com/almanac/properties/f/filter/). But using this, will occur side effect significantly to performance on mobile device.



### All options



```typescript

interface TalkieOptions {

  wide?: boolean; // default: false

  horizontal?: boolean; // default: false

}



talkie.run(options);

```



### FullScreen mode



When you press the f will be a full-screen mode. f or Esc Press and then exit.



## Utilities



Many thanks!



- [ysugimoto/resumify: Capture screenshot and make PDF on your HTML presentation.](https://github.com/ysugimoto/resumify)

- [nakajmg/talkie-generator: Templates generator for Talkie.js](https://github.com/nakajmg/talkie-generator)



## Change Log



### v0.13



- TODO



### 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 of `visible`,

- Rename attribute, `page` to `data-page`.

- Rename attribute, `body-bg` to `data-body-bg`.

- Rename attribute, `no-transition` to `data-no-transition`.



### v0.9



- Remove the Bacon.js, to use the [ReactiveX/rxjs](https://github.com/ReactiveX/RxJS) instead.

- Add `TalkieExport.key: (charKey: string) => Observable`. 

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



[npm-image]: https://img.shields.io/npm/v/talkiejs.svg

[npm-url]: https://npmjs.org/package/talkiejs

[circle-image]: https://circleci.com/gh/ahomu/Talkie.svg?style=shield&circle-token=7ca8d50c44a6b81ca60ca327dc67e382a46a4829

[circle-url]: https://circleci.com/gh/ahomu/Talkie

[deps-image]: https://david-dm.org/ahomu/Talkie.svg

[deps-url]: https://david-dm.org/ahomu/Talkie