decktape/plugins/generic.js
2023-08-03 16:41:42 +02:00

104 lines
3.0 KiB
JavaScript

// The generic plugin emulates end-user interaction by pressing keyboard
// and detects changes to the DOM. The deck is considered over when no change
// is detected afterward.
import { pause } from '../libs/util.js';
export const options = {
keys : {
full : 'key',
metavar : '<key>',
list : true,
default : ['ArrowRight'],
help : 'Key pressed to navigate to next slide, can be repeated',
},
maxSlides : {
full : 'max-slides',
metavar : '<size>',
help : 'Maximum number of slides to export',
},
media: {
default : 'screen',
choices : ['screen', 'print'],
metavar : '<media>',
help : 'CSS media type to emulate, one of [print, screen]',
},
};
export const help =
`Emulates the end-user interaction by pressing the key with the specified --key option,
and iterates over the presentation as long as:
- Any change to the DOM is detected by observing mutation events targeting the body element
and its subtree,
- Nor the number of slides exported has reached the specified --max-slides option.
The --key option must be a list of 'KeyboardEvent' keys, and defaults to [${options.keys.default}].`;
export const create = (page, opts) => new Generic(page, opts);
class Generic {
constructor(page, opts) {
this.page = page;
this.options = opts;
this.currentSlide = 1;
this.isNextSlideDetected = false;
this.keys = this.options.keys || options.keys.default;
this.media = this.options.media || options.media.default;
}
getName() {
return 'Generic';
}
isActive() {
return true;
}
async configure() {
await this.page.emulateMediaType(this.media);
await this.page.exposeFunction('onMutation', _ => (this.isNextSlideDetected = true));
await this.page.evaluate(_ =>
new MutationObserver(_ => window.onMutation()).observe(document, {
attributes : true,
childList : true,
subtree : true,
})
);
}
slideCount() {
return undefined;
}
// A priori knowledge is impossible to achieve in a generic way. Thus the only way is to
// actually emulate end-user interaction by pressing the configured key and check whether
// the DOM has changed a posteriori.
async hasNextSlide() {
if (this.options.maxSlides && this.currentSlide >= this.options.maxSlides) {
return false;
}
for (let key of this.keys) {
this.isNextSlideDetected = false;
await this.page.keyboard.press(key);
// TODO: use mutation event directly instead of relying on a timeout
// TODO: detect cycle to avoid infinite navigation for frameworks
// that support loopable presentations like impress.js and flowtime.js
await pause(1000);
if (this.isNextSlideDetected) {
return true;
}
}
return false;
}
nextSlide() {
this.currentSlide++;
}
async currentSlideIndex() {
const hash = await this.page.evaluate(_ => window.location.hash);
const [, fragment] = hash.match(/^#\/?([^?]*)/) || [];
return fragment || this.currentSlide;
}
}