pageflow-sitemap 0.1.0

data/app/assets/javascripts/pageflow/sitemap/editor/d3/view_model.js

@@ -0,0 +1,202 @@
+pageflow.sitemap.ViewModel = function(session, layout) {
+  var entry = session.entry;
+  var selection = session.selection;
+  var highlightedStoryline = session.highlightedStoryline;
+  var highlightedPage = session.highlightedPage;
+  var isPageDisabled = session.isPageDisabled || function() { return false; };
+
+  var storylines = this.storylines = [];
+  var chapters = this.chapters = [];
+  var nodes = this.nodes = this.pages = [];
+  var successorLinks = this.successorLinks = [];
+  var pageLinks = this.links = [];
+  var chapterPlaceholders = this.chapterPlaceholders = [];
+  var size = this.size = {x: 0, y: 0};
+
+  var nodesByName = {};
+
+  buildStorylines();
+  buildSuccessorLinks();
+  buildPageLinks();
+  buildChapterPlaceholders();
+
+  function buildStorylines() {
+    entry.storylines.each(function(storyline) {
+      storylines.push({
+        id: 'storyline:' + storyline.cid,
+        storyline: storyline,
+
+        title: storyline.title(),
+
+        main: storyline.isMain(),
+        selected: selection.contains(storyline),
+        dragged: layout.isDragging(storyline),
+        droppable: layout.isLegal(),
+        highlighted: highlightedStoryline === storyline,
+
+        x: layout.position(storyline).x,
+        y: layout.position(storyline).y,
+        height: layout.height(storyline)
+      });
+
+      buildChapters(storyline.chapters);
+    });
+  }
+
+  function buildChapters(chaptersCollection) {
+    chaptersCollection.each(function(chapter) {
+      var chapterNodes = [];
+
+      chapter.pages.each(function(page) {
+        var id = "page:" + page.cid;
+
+        var thumbnailFile = page.thumbnailFile();
+
+        var node = {
+          id: id,
+
+          page: page,
+          chapter: chapter,
+
+          pageCid: page.cid,
+          title: page.title() || I18n.t('pageflow.sitemap.editor.unnamed_page'),
+          thumbnailUrl: thumbnailFile ? thumbnailFile.get('link_thumbnail_url') : '',
+
+          selected: selection.contains(page),
+          dragged: layout.isDragging(page),
+          highlighted: highlightedPage === page,
+          destroying: page.isDestroying() || chapter.isDestroying(),
+          disabled: isPageDisabled(page),
+
+          x0: layout.position(page).x,
+          y0: layout.position(page).y,
+          x: layout.position(page).x,
+          y: layout.position(page).y,
+        };
+
+        chapterNodes.push(node);
+        nodes.push(node);
+
+        nodesByName[page.cid] = node;
+      });
+
+      chapters.push({
+        id: 'group:' + chapter.cid,
+        chapter: chapter,
+
+        title: chapter.get('title') || I18n.t('pageflow.sitemap.editor.unnamed_chapter'),
+
+        selected: selection.contains(chapter),
+        dragged: layout.isDragging(chapter),
+        droppable: layout.isLegal(),
+        empty: chapterNodes.length === 0,
+        destroying: chapter.isDestroying(),
+
+        x: layout.position(chapter).x,
+        y: layout.position(chapter).y,
+        height: layout.chapterHeight(chapter)
+      });
+    });
+  }
+
+  function buildPageLinks() {
+    entry.pages.each(function(page) {
+      if (page.pageLinks()) {
+        page.pageLinks().each(function(link) {
+          var targetPage = link.targetPage();
+
+          if (targetPage) {
+            pageLinks.push({
+              id: 'link' + ':' + page.cid + '-' + targetPage.cid,
+              link: link,
+              links: page.pageLinks(),
+              sourcePage: page,
+
+              source: layout.linkSource(page),
+              target: layout.linkTarget(targetPage, link),
+
+              label: link.label(),
+
+              selected: selection.contains(link),
+              dragged: layout.isDragging(link),
+              placeholder: false
+            });
+          }
+        });
+
+        if (!page.isDestroying() && !page.chapter.isDestroying()) {
+          var link = {placeholder: page};
+
+          pageLinks.push({
+            id: 'dangling-link' + ':' + page.cid,
+            link: link,
+            links: page.pageLinks(),
+            sourcePage: page,
+
+            source:  layout.linkSource(page),
+            target: layout.linkTarget(page, link),
+
+            selected: selection.contains(link),
+            dragged: layout.isDragging(link),
+            placeholder: true
+          });
+        }
+      }
+    });
+  }
+
+  function buildSuccessorLinks() {
+    entry.storylines.each(function(storyline) {
+      var successorPage = entry.pages.getByPermaId(storyline.configuration.get('scroll_successor_id'));
+      var link = {successor: storyline};
+
+      if (successorPage) {
+        successorLinks.push({
+          id: 'successor:' + storyline.cid + '-' + successorPage.cid,
+          storyline: storyline,
+          link: link,
+
+          source: layout.linkSource(storyline),
+          target: layout.linkTarget(successorPage, link),
+
+          selected: selection.contains(link),
+          dragged: layout.isDragging(link),
+          placeholder: false
+        });
+      }
+      else if (!storyline.isDestroying()) {
+        successorLinks.push({
+          id: 'dangling-successor:' + storyline.cid,
+          storyline: storyline,
+          link: link,
+
+          source: layout.linkSource(storyline),
+          target: layout.linkTarget(storyline, link),
+
+          selected: selection.contains(link),
+          dragged: layout.isDragging(link),
+          placeholder: true
+        });
+      }
+    });
+  }
+
+  function buildChapterPlaceholders() {
+    if (layout.chapterPlaceholder) {
+      chapterPlaceholders.push(_.extend({
+        id: 'chapter-placeholder'
+      }, layout.chapterPlaceholder));
+    }
+  }
+
+  function eachPair(collection, fn) {
+    if (collection.length < 2) {
+      return;
+    }
+
+    _.reduce(collection, function(last, item) {
+      fn(last, item);
+      return item;
+    });
+  }
+};

data/app/assets/javascripts/pageflow/sitemap/editor/d3/views/add_button_view.js

@@ -0,0 +1,28 @@
+pageflow.sitemap.addButtonView = pageflow.sitemap.groupView.define('add_button', function(s) {
+  this.update()
+    .attr('transform', s.utils.fn.translate('left', 'top'))
+  ;
+
+  this.child('rect', function() {
+    this.enter()
+      .attr('width', s.utils.fn.d('width'))
+      .attr('height', s.utils.fn.d('height'))
+      .call(s.behavior.tooltipTarget(this.options.tooltipTranslationKey))
+      .on('mouseover', function() {
+        d3.select(this.parentNode).classed('hover', true);
+      })
+      .on('mouseout', function() {
+        d3.select(this.parentNode).classed('hover', false);
+      })
+      .on('click', s.utils.fn.trigger(this.options.click))
+    ;
+  });
+
+  this.child('text', function() {
+    this.enter()
+      .attr('transform', function(d) {
+        return s.utils.translate(d.width / 2, d.height / 2);
+      })
+      .text("\u2795");
+  });
+});

data/app/assets/javascripts/pageflow/sitemap/editor/d3/views/chapter_placeholders_view.js

@@ -0,0 +1,22 @@
+sitemap.chapterPlaceholdersView = sitemap.groupView.define('chapter_placeholder', function(s) {
+  this.update()
+    .attr('transform', function(d) {
+      return s.utils.translate(d.x - d.width / 2, d.y - d.height / 2);
+    })
+  ;
+
+  this.child('rect', function() {
+    this.update()
+      .attr('width', s.utils.fn.d('width'))
+      .attr('height', s.utils.fn.d('height'))
+    ;
+  });
+
+  this.child('text', function() {
+    this.enter()
+      .attr('transform', function(d) {
+        return s.utils.translate(d.width / 2, d.height / 2);
+      })
+      .text('+');
+  });
+});

data/app/assets/javascripts/pageflow/sitemap/editor/d3/views/chapters_view.js

@@ -0,0 +1,89 @@
+/*global options*/
+
+sitemap.chaptersView = sitemap.groupView.define('chapter', function(s) {
+  var opts = this.options;
+
+  var w = options.page.width + 20,
+      barHeight = 20;
+
+  this.update()
+    .classed('selected', s.utils.fn.d('selected'))
+    .classed('dragged', s.utils.fn.d('dragged'))
+    .classed('empty', s.utils.fn.d('empty'))
+    .classed('destroying', s.utils.fn.d('destroying'))
+    .attr('transform', function(d) {
+      return 'translate(' +
+        (d.x - options.page.width / 2 - 10) + ',' +
+        (d.y - options.page.height / 2 - 25) +
+        ')';
+    })
+  ;
+
+  this.child('rect.border', function() {
+    this.enter()
+      .attr('width', w)
+    ;
+
+    this.update()
+      .attr('height', function (d) { var h = d.height + 35 + 13; return h > 0 ? h : 0; })
+    ;
+  });
+
+  this.child('rect.handle', function() {
+    this.enter()
+      .attr('width', w)
+      .attr('height', barHeight)
+      .on('mouseover', function() {
+        d3.select(this.parentNode).classed('hover', true);
+      })
+      .on('mouseout', function() {
+        d3.select(this.parentNode).classed('hover', false);
+      })
+      .on('click', function() {
+        if (opts.clicked) {
+          opts.clicked.apply(this, arguments);
+        }
+      })
+      .on('mousedown', function() {
+        if (opts.mousedown) {
+          opts.mousedown.apply(this, arguments);
+        }
+      })
+    ;
+  });
+
+  this.enter().call(sitemap.behavior.multiDrag({
+    drag: opts.drag,
+    dragend: opts.dragend
+  }));
+
+  this.enter()
+    .append('foreignObject')
+        .style('pointer-events', 'none')
+        .attr('width', w)
+        .attr('height', barHeight)
+        .append('xhtml:body')
+        .html('<div class="title_text"></div>')
+  ;
+
+  this.update().each(function(d) {
+    d3.selectAll(this.getElementsByTagName('div'))
+      .text(d.title);
+  });
+
+  this.call(s.addButtonView(addChapterButtonData, {
+    tooltipTranslationKey: 'pageflow.sitemap.editor.tooltips.insert_chapter',
+    click: s.utils.fn.trigger(this.options.addChapterButtonClick)
+  }));
+
+  function addChapterButtonData(d) {
+    return [{
+      id: d.id + ':add_chapter',
+      chapter: d.chapter,
+      left: 0,
+      top: d.height + 38 + 11,
+      width: w,
+      height: 21
+    }];
+  }
+});

data/app/assets/javascripts/pageflow/sitemap/editor/d3/views/group_view.js

@@ -0,0 +1,104 @@
+pageflow.sitemap.groupView = {
+  define: function(className, fn) {
+    var s = pageflow.sitemap;
+
+    return function(data, options) {
+      options = options || {};
+
+      return function(container) {
+        var previousNodes = container
+          .selectAll('.' + className);
+
+        var previousData = {};
+
+        if (previousNodes.length) {
+          previousData = _(previousNodes.data()).reduce(function(result, data) {
+            result[data.id] = withoutModels(data);
+            return result;
+          }, {});
+        }
+
+        var nodes = previousNodes
+          .data(data, s.utils.fn.d('id'))
+          .order();
+
+        var nodesEnter = nodes
+          .enter()
+          .append('g');
+
+        var nodesUpdate = nodes
+          .filter(function(d) {
+            var prev = previousData[d.id];
+
+            return !prev || !_.isEqual(prev, withoutModels(d));
+          });
+
+        nodesEnter
+          .attr('id', s.utils.fn.d('id'))
+          .classed(className, true);
+
+        fn.call({
+          options: options || {},
+
+          enter: function() {
+            return nodesEnter;
+          },
+
+          update: function() {
+            return nodesUpdate;
+          },
+
+          call: function(fn) {
+            nodesUpdate.call(fn);
+          },
+
+          child: childFactory(nodesEnter, nodesUpdate, options)
+        }, pageflow.sitemap);
+
+        if (!window.dontRemove) {
+          nodes.exit()
+            .remove();
+        }
+      };
+    };
+
+    function childFactory(nodesEnter, nodesUpdate, options) {
+      return function(selector, fn) {
+        var components = selector.split('.');
+        var tagName = components[0];
+        var className = components[1];
+
+        var enteredChild = nodesEnter
+          .append(tagName)
+          .attr('class', className);
+
+        var child = nodesUpdate.select(selector);
+
+        if (fn) {
+          fn.call({
+            options: options,
+
+            enter: function() {
+              return enteredChild;
+            },
+
+            update: function() {
+              return child;
+            },
+          });
+        }
+
+        return child;
+      };
+    }
+
+    function withoutModels(item) {
+      return _(item).reduce(function(result, value, key) {
+        if (!value || !value.cid) {
+          result[key] = value;
+        }
+        return result;
+      }, {});
+    }
+  }
+};

data/app/assets/javascripts/pageflow/sitemap/editor/d3/views/page_links_view.js

@@ -0,0 +1,7 @@
+pageflow.sitemap.pageLinksView =
+  pageflow.sitemap.selectableLinksView({
+    className: 'page_link',
+    path: pageflow.sitemap.linkpath,
+    direction: 'right',
+    placeholderTooltipTranslationKey: 'pageflow.sitemap.editor.tooltips.add_page_link'
+  });

data/app/assets/javascripts/pageflow/sitemap/editor/d3/views/pages_view.js

@@ -0,0 +1,112 @@
+/*global options*/
+
+pageflow.sitemap.pagesView = pageflow.sitemap.groupView.define('page', function(s) {
+  this.update()
+    .classed('selected', function(d) { return d.selected; })
+    .classed('highlighted', function(d) { return d.highlighted; })
+    .classed('destroying', s.utils.fn.d('destroying'))
+    .classed('disabled', s.utils.fn.d('disabled'))
+    .attr('transform', transformStart)
+    .transition().duration(options.duration)
+    .attr('transform', transformFinal)
+  ;
+
+  this.enter()
+    .call(sitemap.behavior.multiDrag({
+      drag: this.options.drag,
+      dragend: this.options.dragend
+    }))
+  ;
+
+  var trX = -options.page.width / 2,
+      trY = options.page.height / 2,
+      opts = this.options;
+
+  this.child('rect.bg', function() {
+    this.enter()
+      .attr('width', options.page.width)
+      .attr('height', options.page.height)
+      .attr('transform', 'translate(' + trX + ',' + (-trY) + ')')
+      .on('mouseover', function(d) {
+        d3.select(this.parentNode).classed('hover', true);
+        d3.selectAll('[id^="link:' + d.pageCid +'"]').classed('highlight', true);
+      })
+      .on('mouseout', function(d) {
+        d3.select(this.parentNode).classed('hover', false);
+        d3.selectAll('.highlight').classed('highlight', false);
+      })
+      .on('click', s.utils.fn.trigger(this.options.click))
+      .on('dblclick', s.utils.fn.trigger(this.options.dblclick))
+      .on('mousedown', s.utils.fn.trigger(this.options.mousedown))
+    ;
+  });
+
+  this.child('image', function() {
+    this.enter()
+      .attr('x', 0)
+      .attr('y', 0)
+      .attr('width', options.page.width)
+      .attr('height', options.page.height)
+      .attr('transform', 'translate(' + trX + ',' + (-trY) + ')')
+    ;
+
+    this.update()
+      .each(function(d) {
+        d3.select(this)
+          .attr('xlink:href', d.thumbnailUrl)
+        ;
+      })
+    ;
+  });
+
+  this.child('rect.title', function() {
+    this.enter()
+      .attr('width', options.page.width)
+      .attr('height', options.page.height)
+      .attr('transform', 'translate(' + (trX) + ',' + (-trY) + ')')
+    ;
+  });
+
+  this.child('rect.border', function() {
+    this.enter()
+      .attr('width', options.page.width + 8)
+      .attr('height', options.page.height +8 )
+      .attr('transform', 'translate(' + (trX -4) + ',' + (-trY -4) + ')')
+    ;
+  });
+
+  this.enter()
+    .append('foreignObject')
+    .style('pointer-events', 'none')
+    .attr('width', options.page.width-2)
+    .attr('height', options.page.height)
+    .attr('transform', 'translate(' + (trX+1) + ',' + (-trY) + ')')
+    .append('xhtml:body')
+    .html('<div class="title_text"></div>')
+  ;
+
+  this.update()
+    .each(function(d) {
+      d3.selectAll(this.getElementsByTagName('div')).text(d.title || '');
+    })
+  ;
+
+  this.call(s.addButtonView(addPageButtonData, {
+    tooltipTranslationKey: 'pageflow.sitemap.editor.tooltips.insert_page',
+    click: s.utils.fn.trigger(this.options.addPageButtonClick)
+  }));
+
+  function addPageButtonData(d) {
+    return [{
+      id: d.id + ':add_page',
+      page: d.page,
+      left: trX - 1,
+      top: 37,
+      width: options.page.width + 2,
+      height: 20
+    }];
+  }
+
+  function transformStart(d) { return 'translate(' + d.x0 + ',' + d.y0 + ')'; }
+  function transformFinal(d) { return 'translate(' + d.x + ',' + d.y + ')'; }
+});

data/app/assets/javascripts/pageflow/sitemap/editor/d3/views/selectable_links_view.js

@@ -0,0 +1,104 @@
+pageflow.sitemap.selectableLinksView = function(options, fn) {
+  var className = options.className;
+  var path = options.path;
+  var direction = options.direction;
+
+  return pageflow.sitemap.groupView.define(className, function(s) {
+    this.enter()
+      .classed('selectable_link', true)
+    ;
+
+    this.update()
+      .sort(function(d1, d2) {
+        return d1.placeholder || d1.selected ? 1 : -1;
+      })
+      .classed('selected', s.utils.fn.d('selected'))
+      .classed('dragged', s.utils.fn.d('dragged'))
+      .classed('placeholder', s.utils.fn.d('placeholder'))
+    ;
+
+    this.child('path.selection_highlight', function() {
+      this.update()
+        .attr('d', path)
+      ;
+    });
+
+    this.child('path.arrow', function() {
+      this.update()
+        .attr('d', path)
+        .attr('marker-end', function(d) {
+          return 'url(#' + className + (d.dragged ? '_triangle_highlight)' : '_triangle)');
+        })
+      ;
+    });
+
+    this.child('path.selection_target', function() {
+      this.enter()
+        .on('mousedown', this.options.click)
+        .on('mouseover', function() {
+          d3.select(this.parentNode)
+            .classed('highlight', true)
+            .select('.arrow').attr('marker-end', 'url(#' + className + '_triangle_highlight)')
+          ;
+        })
+        .on('mouseout', function() {
+          d3.select(this.parentNode)
+            .classed('highlight', false)
+            .select('.arrow').attr('marker-end', 'url(#' + className + '_triangle)')
+          ;
+        })
+        .call(sitemap.behavior.multiDrag({
+          drag: this.options.drag,
+          dragend: this.options.dragend,
+          enabled: function(d) {
+            return d.selected;
+          }
+        }))
+      ;
+
+      this.update()
+        .attr('d', path);
+    });
+
+    this.update().call(s.textLabelView(function(d) {
+      var p = path.points(d);
+
+      return [{
+        id: d.id + ':label',
+        label: d.label,
+        x: p.end.x,
+        y: p.end.y,
+        anchor: p.end.x - p.start.x < 10 ? 'left' : 'right'
+      }];
+    }));
+
+    this.child('path.drag_target', function() {
+      this.enter()
+        .call(s.behavior.tooltipTarget(options.placeholderTooltipTranslationKey))
+        .on('mousedown', this.options.click)
+        .call(sitemap.behavior.multiDrag({
+          drag: this.options.drag,
+          dragend: this.options.dragend,
+        }));
+
+      this.update()
+        .attr('d', function(d) {
+          var point = path.points(d).end;
+          return direction === 'down' ? halfCircleBottom(point) : halfCircleRight(point);
+        })
+      ;
+
+      function halfCircleBottom(point) {
+        return 'M' + point.x + ',' + (point.y + 5) + ' h20 a20,20 0 0 1 -20,20 a20,20 0 0 1 -20,-20 z';
+      }
+
+      function halfCircleRight(point) {
+        return 'M' + point.x + ',' + point.y + ' v-20 a20,20 0 0 1 20,20 a20,20 0 0 1 -20,20 z';
+      }
+    });
+
+    if (fn) {
+      fn.call(this, s);
+    }
+  });
+};