src/es6/speaker/base.es6
import {d3} from "nbpresent-deps";
import {Toolbar} from "../toolbar";
export class SpeakerBase {
constructor(tree){
this.tree = tree;
this.current = this.tree.select(["selectedSlide"]);
this.presenting = this.tree.select(["presenting"]);
this.initUI();
this.presenting.on("update", () => this.update());
this.update();
}
initUI(){
this.$ui = d3.select("body")
.append("div")
.classed({nbpresent_speaker: 1});
this.initToolbar();
}
update(){
this.$ui.style({display: this.presenting.get() ? null : "none"});
}
toolbarIcons(){
let that = this;
return [
[{
icon: "fast-backward",
click: () => that.current.set(this.tree.get(["sortedSlides", 0, "key"])),
tip: "Back to Start"
}],
[{
icon: "step-backward",
click: () => {
let current = that.tree.get(["slides", this.current.get()]);
this.current.set(current.prev);
},
tip: "Previous Slide"
}],
[{
icon: "step-forward",
click: () => this.advance(),
tip: "Next Slide"
}]
];
}
advance(){
let slides = this.tree.get(["slides"]),
current = slides[this.current.get()];
d3.entries(slides).map((d)=> {
if(d.value.prev === current.id){
this.current.set(d.key);
}
});
return this.current.get();
}
initToolbar(){
let toolbar = new Toolbar();
toolbar
.btnGroupClass("btn-group-vertical")
.btnClass("btn-link btn-lg")
.tipOptions({container: "body", placement: "top"});
// TODO: Make this overlay (Jupyter-branded Reveal Compass)
this.$toolbar = this.$ui.append("div")
.classed({presenter_toolbar: 1})
.datum(this.toolbarIcons())
.call(toolbar.update);
}
}