hub / github.com/ahomu/Talkie

github.com/ahomu/Talkie @v0.12.1

Chat with this repo

repository ↗ · DeepWiki ↗ · release v0.12.1 ↗ · + Follow

60 symbols 148 edges 25 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

Talkie.js - HTML/CSS/JavaScript Slide library

This library written in TypeScript & ReactiveX/rxjs: A reactive programming library for JavaScript.

For more information about dependency Please look at the 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] Pointer attention
[x] Progress indicator
[x] Accessibility support
[x] Canvas drawing mode (experimental)

Real presentation sample

Getting started

Talkie.js contains two of the CSS and one of JavaScript.

dist/talkie.min.css
dist/talkie.min.js
dist/talkie-default.min.css

Next code is the simplest example.

<html>
<head>
  <link rel="stylesheet" href="https://github.com/ahomu/Talkie/raw/v0.12.1/dist/talkie.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/monokai_sublime.min.css">
</head>
<body>


<section layout>
  <h1>Slide 1</h1>
</section>


<script layout type="text/x-markdown">
# Slide 2
</script>


<template layout type="text/x-markdown">
# Slide 2
</template>

<script src="https://github.com/ahomu/Talkie/raw/v0.12.1/cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script src="https://github.com/ahomu/Talkie/raw/v0.12.1/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.9.1/styles/monokai_sublime.min.css">
<script src="https://github.com/ahomu/Talkie/raw/v0.12.1/cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>

Slide ratio

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

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.

<section layout
         backface="background-image.jpg"
         backface-filter="blur(1px) brightness(.8)">

  <h1>Title</h1>


foo, bar, baz, qux...



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

All options

interface TalkieOptions {
  wide?: boolean;
  control?: boolean;
  pointer?: boolean;
  progress?: boolean;
  backface?: boolean;
  notransition?: boolean;
  linkShouldBlank?: boolean;
}

Talkie(options);

FullScreen mode

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

Pointer mode

When you press the "b" key, the pointer visibility is toggled

Canvas drawing mode

When you press the "v" key, the drawing mode is toggled, and clear line when press "c" key.

Custom key binding & control

Talkie() returns an object with initialization. This object has some of the control bus and functionality.

var talkie  = Talkie({wide:false});

You can define any key bindings.

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

It is also possible to control these functions in the program.

window.next = function() {
  talkie.next$.next();
};
window.prev = function() {
  talkie.prev$.next();
};
window.jump = function(num) {
  talkie.jump$.next(num);
};

All exports

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

Utilities

Many thanks!

Change Log

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 instead.
Add TalkieExport.key: (charKey: string) => Observable<KeyboardEvent>.
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)

Extension points exported contracts — how you extend this code

SlideOption (Interface)

(no doc)

src/slide.ts

TalkieOptions (Interface)

(no doc)

src/index.ts

CanvasOptions (Interface)

(no doc)

src/canvas.ts

PagingOptions (Interface)

(no doc)

src/paging.ts

ResponsiveOptions (Interface)

(no doc)

src/responsive.ts

TouchMoveDelta (Interface)

(no doc)

src/control.ts

TalkieExports (Interface)

(no doc)

src/index.ts

DragDeltaLog (Interface)

(no doc)

src/control.ts

Core symbols most depended-on inside this repo

Shape

Function 52

Interface 8

Languages

TypeScript100%

Modules by API surface

src/control.ts19 symbols

src/util.ts13 symbols

src/slide.ts6 symbols

src/responsive.ts5 symbols

src/paging.ts5 symbols

test/paging.js3 symbols

src/canvas.ts3 symbols

src/index.ts2 symbols

test/libs/key-event.js1 symbols

test/libs/click-event.js1 symbols

src/query.ts1 symbols

src/fullscreen.ts1 symbols

For agents

$ claude mcp add Talkie \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact