src/es6/tour.es6
import Tour from "bootstraptour";
import {PART} from "./parts";
class NbpresentTour {
constructor(nbpresent) {
this.nbpresent = nbpresent;
let fake_hover = (selector, value) => d3.selectAll(selector).classed({
fake_hover: value
});
this.tour = new Tour({
name: "nbpresent",
reflex: true, // click on element to continue tour
duration: 5000,
orphan: true,
steps: [
{
element: "#nbpresent_sorter_btn",
title: "Thanks for using nbpresent",
placement: "bottom",
content: "You just activated the nbpresent Sorter! Click Next to take the tour"
},
{
element: "#nbpresent_sorter_btn",
title: "Sorter",
placement: "bottom",
content: "You can add, reorder and remix your slides into a great presentation"
},
{
element: "#nbpresent_present_btn",
placement: "bottom",
title: "Presenter",
content: "With the Presenter, you can view that presentation, tweak the content in-place, and publish it to the world. But first..."
},
{
element: ".deck_toolbar .fa-plus-square-o",
title: "Deck Toolbar",
content: "Let's create a new slide",
placement: "top",
onNext: () => this.nbpresent.sorter.addSlide()
},
{
element: ".from_template",
title: "Template Library",
position: "top",
content: "You can pick from some existing templates..."
},
{
element: ".from_slide",
title: "Reuse Slide as Template",
position: "top",
content: "Or copy an existing slide"
},
{
element: ".nbpresent_template_library .slide:nth-of-type(2)",
title: "Simple Template",
position: "top",
content: "Let's use this one",
onNext: () => this.nbpresent.sorter.templatePicked(
d3.select(".nbpresent_template_library .slide:nth-of-type(2)")
.datum()
)
},
{
element: ".slides_wrap .slide:last-child",
placement: "top",
title: "Look at the slide, just look at it",
content: "Here's our new slide"
},
{
element: ".slides_wrap .slide:last-child .region",
placement: "right",
title: "Region",
onShow: () => {
let el = d3.select(".slides_wrap .slide:last-child .region");
el.on("click")(el.datum());
},
content: "It has one Region"
},
{
element: ".region_toolbar .fa-external-link-square",
placement: "top",
title: "Cell Part",
content: "You put a Part of a cell into a Region. The Parts are Inputs, like source code or Markdown..."
},
{
element: ".region_toolbar .fa-external-link",
placement: "top",
title: "Cell Part: Outputs",
content: "... the Outputs, such as calculations, tables and figures..."
},
{
element: ".region_toolbar .fa-sliders",
placement: "top",
title: "Cell Part: Widgets",
content: "...and interactive Widgets, including sliders and knobs."
},
{
element: ".region_toolbar .fa-unlink",
placement: "top",
title: "Cell Part: Unlinking",
content: "Since a Part can be linked to more than one Region, you might need to Unlink one."
},
{
element: ".cell.selected",
placement: "left",
title: "Linking an Input Part",
content: "Let's use this cell input"
},
{
element: ".slides_wrap .slide:last-child .region",
placement: "top",
title: "Part Thumbnail",
content: "A part thumbnail might look a little funny, but you should usually be able to get an idea of what you're seeing.",
onShow: () => this.nbpresent.sorter.linkContent(PART.source)
},
{
title: "Achievement Unlocked: Presentation",
content: "We're ready to look at the presentation!"
},
{
element: "#nbpresent_present_btn",
title: "Great, let's have a look",
placement: "bottom",
content: "Clicking this button brings up the Presenter",
onNext: () => this.nbpresent.present()
},
{
title: "Looks great!",
content: "Your slide is still made up of your notebook"
},
{
element: ".nbpresent_present",
placement: "top",
title: "Most Notebook Editing Functionality",
content: "This is still an editable input area"
},
{
element: ".nbpresent_present",
placement: "bottom",
title: "Part Execution",
content: "Inputs can even be executed with keyboard shortcuts like ctrl+enter"
},
// ...
{
element: ".presenter_toolbar .fa-step-forward",
title: "Go forward",
content: "Click here to go to the next Slide",
placement: "top",
onShown: () => fake_hover(".presenter_toolbar", true),
onHidden: () => fake_hover(".presenter_toolbar", 0)
},
{
element: ".presenter_toolbar .fa-step-backward",
title: "Go back",
content: "Clicking here to go back to the previous slide",
placement: "top",
onShown: () => fake_hover(".presenter_toolbar", true),
onHidden: () => fake_hover(".presenter_toolbar", 0)
},
{
element: ".presenter_toolbar .fa-fast-backward",
title: "Go back to the beginning",
content: "Clicking here to go back to the first Slide",
placement: "top",
onShown: () => fake_hover(".presenter_toolbar", true),
onHidden: () => fake_hover(".presenter_toolbar", 0)
},
{
element: ".presenter_toolbar .fa-book",
title: "My work is done here",
content: "Click here to go back to the Notebook",
placement: "top",
onShown: () => fake_hover(".presenter_toolbar", true),
onHidden: () => fake_hover(".presenter_toolbar", 0) &&
this.nbpresent.unpresent()
},
{
element: ".deck_toolbar .fa-edit",
title: "Edit Slide",
content: "If you need more control, you can edit a Slide's Regions directly",
placement: "top",
onHidden: () => this.nbpresent.sorter.editSlide(
this.nbpresent.sorter.selectedSlide.get()
)
},
{
element: ".nbpresent_editor .slide_bg",
placement: "top",
title: "Region Editor",
content: "This is the Region editor. You can click and drag Regions around and resize them."
},
{
element: ".nbpresent_regiontree",
placement: "right",
title: "Region Tree",
content: "This is the Region tree. It lets you reorder Regions and see the details of how your Regions will show their linked Parts."
},
{
element: ".region_attr .attr_name",
placement: "right",
title: "Attribute Editor",
content: "All of the properties of a region can be edited here"
},
{
element: ".nbpresent_regiontree .btn-toolbar .fa-tree",
placement: "right",
title: "Magic Layouts",
content: "In addition to manually moving regions around, you can use other Layouts, like this Treemap, which will fill the slide",
onHidden: () => {
this.nbpresent.sorter.editor.sidebar.layout("treemap");
}
},
{
element: ".region_attr .fa-tree",
placement: "right",
title: "Treemagic",
content: "This new value lets you make a Region bigger or smaller based on relative Weight"
},
// keep this last!
{
title: "FIN",
content: "Thank you for using nbpresent!"
},
]
});
}
init(){
this.tour.init();
return this;
}
start(){
this.tour.start();
return this;
}
restart(){
this.tour.restart();
return this;
}
}
export {NbpresentTour};