Home Reference Source Repository

src/es6/templates.es6

import {d3, uuid, $} from "nbpresent-deps";

import {MiniSlide} from "./mini";

// TODO: this needs to be an extensible, registerable thing
let _templates = [
  {
    regions: [
      {x: 0.1, y: 0.1, width: 0.8, height: 0.6},
      {x: 0.1, y: 0.7, width: 0.4, height: 0.2},
      {x: 0.5, y: 0.7, width: 0.4, height: 0.2}
    ]
  },
  {
    regions: [
      {x: 0.1, y: 0.1, width: 0.8, height: 0.8}
    ]
  },
  {
    regions: [
      {x: 0.1, y: 0.1, width: 0.2, height: 0.8},
      {x: 0.4, y: 0.1, width: 0.2, height: 0.8},
      {x: 0.7, y: 0.1, width: 0.2, height: 0.8}
    ]
  },
  {
    regions: [
      {x: 0.1, y: 0.1, width: 0.4, height: 0.4},
      {x: 0.5, y: 0.1, width: 0.4, height: 0.4},
      {x: 0.1, y: 0.5, width: 0.4, height: 0.4},
      {x: 0.5, y: 0.5, width: 0.4, height: 0.4},
    ]
  }
];

class TemplateLibrary {
  constructor(picked) {
    this.picked = picked;

    this.initUI();

    this.mini = new MiniSlide();

    this.fakeSlide = this.fakeSlide.bind(this);
    this.update = this.update.bind(this);

    this.update();
  }

  destroy() {
    this.$ui.transition()
      .style({opacity: 0})
      .remove();
    this.killed = true;
  }

  fakeSlide(template) {
    let id = uuid.v4();
    return {
      key: id,
      value: {
        id,
        regions: template.regions.reduce((memo, template) => {
          let id = uuid.v4();
          memo[id] = $.extend({}, {id}, {attrs: template});
          return memo;
        }, {})
      }
    }
  }

  initUI(){
    this.$ui = d3.select("body")
      .append("div")
      .classed({nbpresent_template_library: 1});

    this.$ui.append("button")
      .classed({btn: 1, hide_library: 1, "btn-default": 1})
      .on("click", () => this.picked(null))
      .append("i")
      .classed({fa: 1, "fa-remove": 1});

    this.$ui.append("h3")
      .classed({from_template: 1})
      .text("Pick template");

    this.$ui.append("h3")
      .classed({from_slide: 1})
      .text("Reuse slide as template");
  }

  update(){
    let $slide = this.$ui.selectAll(".slide")
      .data(_templates.map(this.fakeSlide));

    $slide.enter()
      .append("div")
      .classed({slide: 1})
      .call(this.mini.update);

    $slide.on("click", this.picked);
  }
}

export {TemplateLibrary};