This library written in es6 JavaScript & baconjs/bacon.js. Also serve as a practice of es6 and functional reactive programming.
For more information about dependency Please look at the package.json.
- Markdown support
- Code highlighting
- CSS transitions
- Layout attributes (WIP)
- keyboard control
- touch control
- Responsive scaling (4:3, 16:9)
- FullScreen mode
- Background image & filter
- Pointer attention
- Progress indicator
- Thumbnail previews
Talkie.js contains one of the CSS and one of JavaScript.
- dist/talkie.min.css
- dist/talkie.min.js
Next code is the simplest sample.
<html>
<head>
<link rel="stylesheet" href="./dist/talkie.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai_sublime.min.css">
</head>
<body>
<!-- Pure HTML style -->
<section layout>
<h1>Slide 1</h1>
</section>
<!-- Markdown style ( require `type` attribute ) -->
<script layout type="text/x-markdown">
# Slide 2
</script>
<!-- You can also use `<template>` element -->
<template layout type="text/x-markdown">
# Slide 2
</template>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="./dist/talkie.js"></script>
<script>Talkie();</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/8.4/styles/monokai_sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
The default slide 4:3 (width 1024px, height 768px). In the following code ratio 16:9 (width: 1366px, height 768px) you will.
Talkie({wide: 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.
<section layout
backface="background-image.jpg"
backface-filter="blur(1px) brightness(.8)">
<h1>Title</h1>
<p>foo, bar, baz, qux...</p>
</section>
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.
/**
* @typedef {Object} TalkieOptions
* @property {Boolean} [api=false]
* @property {Boolean} [wide=false]
* @property {Boolean} [control=true]
* @property {Boolean} [pointer=true]
* @property {Boolean} [progress=true]
* @property {Boolean} [backface=true]
* @property {Boolean} [notransition=false]
*/
Talkie(options);
When you press the "f" key will be a full-screen mode. "f" or "Esc" key Press and then exit.
When you press the "b" key, the pointer visibility
is toggled
Talkie()
returns an object with initialization. This object has some of the control bus and functionality.
/**
* @typedef {Object} TalkieExport
*/
var talkie = Talkie({wide:false});
You can define any key bindings.
talkie.next.plug(talkie.control.key('space'));
talkie.next.plug(talkie.control.key('s'));
talkie.next.plug(talkie.control.key('n'));
talkie.prev.plug(talkie.control.key('a'));
talkie.prev.plug(talkie.control.key('p'));
It is also possible to control these functions in the program.
window.next = function() {
talkie.next.push();
};
window.prev = function() {
talkie.prev.push();
};
window.jump = function(num) {
talkie.jump.push(num);
};
/**
* @typedef {Object} TalkieExport
* @param {Object.<Function>} control
* @param {Bacon.EventStream} changed
* @param {Bacon.Bus} next
* @param {Bacon.Bus} prev
* @param {Bacon.Bus} jump
* @param {Bacon.Property} ratio
* @param {Object.<Number, String>} notes
*/
// @type {TalkieExport}
var talkie = Talkie();
If you want to using Talkie internal api. Like this and will get Talkie api object.
<script src="./talkie.js"></script>
<script>var talkie = Talkie({api: true});</script>
or you can use require
by browserify.
// npm install --save talkiejs
var talkie = require('talkiejs')({api:true});
Look at the index.js you will see how to use the internal API. You referring to index.js, can build a slide in its own UI.
The MIT License (MIT)