History

nbpresent/tests/js/_utils.js

@@ -65,6 +65,29 @@ root.canSeeAndClick = function(message, visible, click){
   return that;
 }
 
+root.cantSee = function(message, invisible){
+  var things = message,
+    that = this;
+
+  if(arguments.length !== 1){
+    things = [[message, invisible]];
+  }
+
+  things.map(function(thing){
+    var message = thing[0],
+      invisible = thing[1];
+
+    that = that
+      .waitWhileVisible(invisible)
+      .then(function(){
+        this.test.assertNotExists(invisible, "I CAN'T see " + message);
+        this.screenshot("no " + message);
+      });
+  });
+
+  return that;
+};
+
 root.hasMeta = function(path, tests){
   var meta;
 

nbpresent/tests/js/test_notebook_basic.js

@@ -25,5 +25,5 @@ function basic_test(){
     t.assertResourceExists(function(resource) {
       return resource.url.match(pattern);
     });
-  };
+  }
 }

nbpresent/tests/js/test_notebook_create.js

@@ -70,7 +70,15 @@ function create_test(){
     .waitWhileVisible(".nbp-sorter")
     .waitWhileVisible(".nbp-regiontree")
     .canSeeAndClick([
-      ["the presenter button", "#nbp-present-btn"],
-      ["the presenter", ".nbp-presenter"]
+      ["the app bar button", "#nbp-app-btn"],
+      ["the history button", ".nbp-app-bar .fa-history"],
+      ["the initial load", ".nbp-snapshot .fa-gift"],
+      ["the presenter button", "#nbp-present-btn"]
+    ])
+    .cantSee([
+      ["any cell content", ".nbp-present"]
+    ])
+    .canSeeAndClick([
+      ["fin", "body"]
     ]);
 }

nbpresent/tests/js/test_notebook_history.js

@@ -0,0 +1,19 @@
+/* global casper */
+casper.notebook_test(function(){
+  casper.screenshot.init("history");
+  casper.viewport(1440, 900)
+    .then(basic_test);
+});
+
+function basic_test(){
+  this.baseline_notebook();
+
+  this.canSeeAndClick([
+      ["the sorter button", "#nbp-app-btn"],
+      ["the history button", ".nbp-app-bar .fa-history"]
+    ])
+    .wait(500)
+    .canSeeAndClick([
+      ["the initial load", ".nbp-snapshot .fa-gift"]
+    ]);
+}

src/es6/editor.es6

@@ -1,12 +1,14 @@
 import {d3} from "nbpresent-deps";
 
+import {bbox} from "./d3.bbox";
+
+import {ICON} from "./icons";
 import {PART} from "./parts";
 
 import {RegionTree} from "./regiontree";
 import {NotebookCellManager} from "./cells/notebook";
 import {NotebookActions} from "./actions/notebook";
 
-import {bbox} from "./d3.bbox";
 
 const DIRS = ["left", "right", "up", "down"],
   DIR_ATTR = {
@@ -29,11 +31,7 @@ export class Editor {
     * @param {baobab.Cursor} slide - the slide to edit
     * @param {object} selectedRegion - the slide id and region id
     * @listens {/slides/{slide}}  */
-  constructor(slide, selectedRegion) {
-    /** whether this Editor has been killed.
-      * @type {bool} */
-    this.destroyed = false;
-
+  constructor(slide, selectedRegion, mode) {
     /** cursor pointed at a specific slide.
       * @type {baobab.Cursor} */
     this.slide = slide;
@@ -43,6 +41,14 @@ export class Editor {
       * @param {baobab.Cursor} the region/slide to edit */
     this.selectedRegion = selectedRegion;
 
+    /** Handlers, like snapshot
+      * @type {object} */
+    this.mode = mode;
+
+    /** whether this Editor has been killed.
+      * @type {bool} */
+    this.destroyed = false;
+
     /** a sub-cursor for just region changes
       * @type {baobab.Cursor} */
     this.regions = this.slide.select("regions");
@@ -66,7 +72,8 @@ export class Editor {
     // TODO: move this?
     /** sub-ui for editing regions
       * @type {RegionTree} */
-    this.sidebar = new RegionTree(this.slide, this.selectedRegion);
+    this.sidebar = new RegionTree(this.slide, this.selectedRegion,
+                                  this.mode);
 
     // ready to behave
     this.initBehavior()
@@ -172,6 +179,8 @@ export class Editor {
           memo[key] = value.invert($el.attr(key));
           return memo;
         }, {}));
+
+    this.mode.snapshot("Move/Resize Region", ICON.manual);
   }
 
   /**
@@ -290,7 +299,8 @@ export class Editor {
       this.regions.set(
         [region, "attrs", attr],
         this.regions.get([region, "attrs", attr]) + (delta * amount)
-      )
+      );
+      this.mode.snapshot("Nudge Region", ICON.manual);
     }
     return this;
   }

src/es6/history/historian.es6

@@ -0,0 +1,93 @@
+import {d3, _} from "nbpresent-deps";
+
+
+export class Historian {
+  constructor(tree, {mode}){
+    this.tree = tree;
+    this.mode = mode;
+
+    this.head = this.tree.select(["history", "head"]);
+    this.snapshots = this.tree.select(["history", "snapshots"]);
+
+    this.watcher = this.tree.watch({
+      head: this.head,
+      snapshots: this.snapshots
+    });
+    this.watcher.on("update", () => this.update());
+
+    this.initUI();
+    _.delay(() => {
+      this.$body.classed({"nbp-curating": 1});
+      this.update();
+    }, 10);
+  }
+
+  initUI(){
+    this.$body = d3.select("body");
+    this.$ui = this.$body.append("div")
+      .classed({"nbp-historian": 1});
+
+    this.$shots = this.$ui.append("div")
+      .classed({"nbp-snapshots": 1});
+
+    this.$h2 = this.$ui.append("h2")
+      .text("history ")
+
+    this.$h2.append("hr");
+  }
+
+  update(){
+    let history = this.watcher.get(),
+      snapshots = _.sortBy(d3.entries(history.snapshots), "key").reverse(),
+      prevHead = history.head,
+      headLogIds = [null, history.head],
+      prevShot;
+
+    while(prevHead){
+      prevShot = history.snapshots[prevHead];
+      prevHead = prevShot && prevShot.parent;
+      prevHead && headLogIds.push(prevHead);
+    }
+
+    let $shot = this.$shots.selectAll(".nbp-snapshot")
+      .data(snapshots);
+
+    $shot.enter().append("div")
+      .classed({"nbp-snapshot": 1})
+      .append("button")
+      .classed({"btn btn-default": 1})
+      .on("click", (d) => this.rollback(d))
+      .call((btn) => {
+        btn.append("i").classed({"fa fa-fw": 1});
+        btn.append("span");
+      });
+
+    $shot.exit().remove();
+
+    $shot.classed({
+        "nbp-history-head": (d) => d.key === history.head,
+        "nbp-history-not-head-parent": (d) => headLogIds.indexOf(d.key) === -1
+      })
+      .select("button")
+      .call((btn) => {
+        btn.select("span")
+          .text((d) => d.value.message)
+        btn.select("i")
+          .attr("class", (d) => `fa fa-fw fa-${d.value.icon}`)
+      })
+
+    return this;
+  }
+
+  rollback(snapshotEntry){
+    this.head.set(snapshotEntry.key);
+    this.tree.set(["slides"], snapshotEntry.value.state.slides);
+    this.tree.set(["themes"], snapshotEntry.value.state.themes);
+  }
+
+  destroy(){
+    this.$body.classed({"nbp-curating": 0});
+    this.watcher.release();
+    _.delay(() => this.$ui.remove(), 500);
+  }
+}

src/es6/icons.es6

@@ -1,20 +1,22 @@
 export const ICON = {
-  showRules: "adjust",
   addRegion: "plus-square",
   addSlide: "plus-square-o",
   addTheme: "plus-circle",
-  defaultThemeActive: "star",
   defaultTheme: "star-o",
+  defaultThemeActive: "star",
   editor: "edit",
   editRegion: "edit",
   grid: "th",
   help: "question-circle",
+  history: "history",
   intro: "home",
+  keyboard: "keyboard-o",
   link: "link",
   manual: "arrows",
   nbpresent: "gift",
   presenter: "youtube-play",
   preview: "eye-slash",
+  showRules: "adjust",
   slides: "film",
   themer: "paint-brush",
   trash: "trash",

src/es6/mode/notebook.es6

@@ -10,6 +10,7 @@ import {NotebookPresenter} from "../presenter/notebook";
 import {Sorter} from "../sorter";
 import {ThemeManager} from "../theme/manager";
 import {Helper} from "../help/helper";
+import {Historian} from "../history/historian";
 
 import {BaseMode} from "./base";
 
@@ -19,17 +20,25 @@ import {NotebookActions} from "../actions/notebook";
 export const THEMER = "themer",
   SORTER = "sorter",
   HELPER = "helper",
+  HISTORIAN = "historian",
   MODES = [
-    THEMER,
+    HELPER,
+    HISTORIAN,
     SORTER,
-    HELPER
+    THEMER
   ];
 
-export class NotebookMode extends BaseMode {
 
+export class NotebookMode extends BaseMode {
   init() {
     super.init();
 
+    this.history = this.tree.select(["history"]);
+    this.history.set({
+      head: null,
+      snapshots: {}
+    });
+
     this.enabled = this.tree.select(["app", "enabled"]);
     this.enabled.on("update", () => this.enabledChanged());
 
@@ -38,12 +47,16 @@ export class NotebookMode extends BaseMode {
 
     let debouncedSave = _.debounce(() => this.metadata(true), 1e3);
 
-    [this.slides, this.themes].map(({on}) => on("update", debouncedSave));
+    this.tree.watch({
+      slides: this.slides,
+      themes: this.themes
+    }).on("update", () => debouncedSave());
 
     this.slides.on("update", () => this.update());
 
     this.initActions();
     this.initEvents();
+    this.initSnapshot();
 
     this.$body = d3.select("body");
 
@@ -77,6 +90,11 @@ export class NotebookMode extends BaseMode {
           label: "Themes",
           click: () => this.mode.set(this.mode.get() === THEMER ? null : THEMER)
         }],
+        [{
+          icon: `${ICON.history} fa-2x`,
+          label: "History",
+          click: () => this.mode.set(this.mode.get() === HISTORIAN ? null : HISTORIAN)
+        }],
         [{
           icon: `${ICON.help} fa-2x`,
           label: "Help",
@@ -149,10 +167,9 @@ export class NotebookMode extends BaseMode {
   metadata(update){
     let md = Jupyter.notebook.metadata;
     if(update){
-      md.nbpresent = {
-        slides: this.slides.serialize(),
-        themes: this.themes.serialize()
-      };
+      let slides = this.slides.serialize(),
+        themes = this.themes.serialize();
+      md.nbpresent = {slides, themes};
     }else{
       return md.nbpresent || {
         slides: {},
@@ -161,6 +178,28 @@ export class NotebookMode extends BaseMode {
     }
   }
 
+  initSnapshot(){
+    this.snapshot("Load from Server", ICON.nbpresent);
+  }
+
+  snapshot(message, icon){
+    let history = this.tree.get(["history"]),
+      snapshotId = (new Date()).toISOString(),
+      state = {
+        slides: this.slides.serialize(),
+        themes: this.themes.serialize()
+      };
+
+    this.history.set(["snapshots", snapshotId], {
+      state,
+      parent: history.head,
+      message: message,
+      icon: icon
+    });
+
+    this.history.set(["head"], snapshotId);
+  }
+
   enabledChanged(){
     let enabled = this.enabled.get();
 
@@ -182,10 +221,12 @@ export class NotebookMode extends BaseMode {
 
 
   modeClass(mode){
+    // TODO: some plugin thing or another
     return {
       themer: ThemeManager,
       sorter: Sorter,
-      helper: Helper
+      helper: Helper,
+      historian: Historian
     }[mode];
   }
 
@@ -220,7 +261,6 @@ export class NotebookMode extends BaseMode {
     return this;
   }
 
-
   ensurePresenter(){
     if(!(this.presenter)){
       this.presenter = new NotebookPresenter(this.tree);