pageflow-sitemap 0.1.0

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

@@ -0,0 +1,86 @@
+sitemap.storylinesView = sitemap.groupView.define('storyline', function(s) {
+  var width = s.settings.page.width + 35;
+  var options = this.options;
+
+  this.update()
+    .classed('selected', s.utils.fn.d('selected'))
+    .classed('highlighted', s.utils.fn.d('highlighted'))
+    .classed('main', s.utils.fn.d('main'))
+    .attr('transform', function(d) {
+      return s.utils.translate(
+        d.x - s.settings.page.width / 2 - 17,
+        d.y - s.settings.page.height / 2 - 50
+      );
+    })
+  ;
+
+  this.child('rect.border', function() {
+    this.enter()
+      .attr('rx', 5)
+      .attr('ry', 5)
+      .attr('width', width)
+    ;
+
+    this.update()
+      .attr('height', function (d) {
+        return d.height + 25;
+      })
+    ;
+  });
+
+  this.child('path.handle', function() {
+    var height = 20;
+
+    this.enter()
+      .attr('d', rectRounedAtTop)
+      .attr('width', width)
+      .attr('height', height)
+      .on('mouseover', function() {
+        d3.select(this.parentNode).classed('hover', true);
+      })
+      .on('mouseout', function() {
+        d3.select(this.parentNode).classed('hover', false);
+      })
+      .on('click', function() {
+        if (options.clicked) {
+          options.clicked.apply(this, arguments);
+        }
+      })
+      .on('dblclick', s.utils.fn.trigger(this.options.dblclick))
+      .on('mousedown', function() {
+        if (options.mousedown) {
+          options.mousedown.apply(this, arguments);
+        }
+      })
+    ;
+
+    function rectRounedAtTop() {
+      var radius = 5;
+
+      return 'M' + radius + ',' + 0 +
+        'h' + (width - 2 * radius) +
+        'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius +
+        'v' + (height - radius) +
+        'h' + (-width) +
+        'v' + (radius - height) +
+        'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius +
+        'z';
+    }
+  });
+
+
+  this.child('text', function() {
+    this.enter()
+      .attr('transform', s.utils.translate(7, 15))
+    ;
+
+    this.update()
+      .text(s.utils.fn.d('title'))
+    ;
+  });
+
+  this.enter().call(sitemap.behavior.multiDrag({
+    drag: options.drag,
+    dragend: options.dragend
+  }));
+});

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

@@ -0,0 +1,7 @@
+pageflow.sitemap.successorLinksView =
+  pageflow.sitemap.selectableLinksView({
+    className: 'successor_link',
+    path: pageflow.sitemap.successorPath,
+    direction: 'down',
+    placeholderTooltipTranslationKey: 'pageflow.sitemap.editor.tooltips.set_successor'
+  });

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

@@ -0,0 +1,45 @@
+pageflow.sitemap.textLabelView = pageflow.sitemap.groupView.define('text_label', function(s) {
+  var padding = this.options.padding || 5;
+  var dist = 10;
+
+  this.update()
+    .classed('empty', function(d) { return !d.label; })
+    .classed('anchor_right', function(d) { return d.anchor === 'right'; })
+    .attr('transform', s.utils.fn.translate('x', 'y'))
+  ;
+
+  this.child('rect');
+
+  this.child('text', function() {
+    this.update()
+      .attr('transform', function(d) {
+        if (d.anchor === 'right') {
+          return s.utils.translate(-dist, -dist);
+        }
+        else {
+          return s.utils.translate(dist, -dist);
+        }
+      })
+      .text(s.utils.fn.d('label'))
+    ;
+  });
+
+  this.update().each(function(d) {
+    resizeRectToText(this.getElementsByTagName('rect'),
+                     this.getElementsByTagName('text'),
+                     d.anchor);
+  });
+
+  function resizeRectToText(rect, text, anchor) {
+    var textRect = text[0].getBoundingClientRect();
+
+    d3.selectAll(rect)
+      .attr('transform', s.utils.translate(anchor === 'right' ?
+                                             -textRect.width - padding - dist :
+                                             dist - padding,
+                                           -textRect.height - padding / 2 - dist))
+      .attr('width', textRect.width + 2 * padding)
+      .attr('height', textRect.height + 2 * padding)
+    ;
+  }
+});

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

@@ -0,0 +1,20 @@
+//= require ./d3/utils
+//= require_tree ./d3/behaviors
+//= require_tree ./d3/paths
+
+//= require ./d3/options
+//= require ./d3/layout
+//= require ./d3/view_model
+
+//= require ./d3/views/group_view
+//= require ./d3/views/selectable_links_view
+
+//= require ./d3/graph_view
+//= require ./d3/views/storylines_view
+//= require ./d3/views/chapters_view
+//= require ./d3/views/chapter_placeholders_view
+//= require ./d3/views/pages_view
+//= require ./d3/views/page_links_view
+//= require ./d3/views/successor_links_view
+//= require ./d3/views/add_button_view
+//= require ./d3/views/text_label_view

data/app/assets/javascripts/pageflow/sitemap/editor/feature.js

@@ -0,0 +1,126 @@
+pageflow.features.register('editor', 'sitemap', function() {
+  var s = pageflow.sitemap;
+  var currentSitemapView = null;
+
+  pageflow.editor.selectPage = function (options) {
+    options = options || {};
+
+    var result = $.Deferred();
+    var controller = new s.SelectionModeController(pageflow.entry, options);
+    var graphView = new s.SitemapView({
+      controller: controller,
+      headerText: I18n.t(options.header || 'pageflow.sitemap.editor.headers.select_page'),
+      cancelButton: true
+    });
+
+    if (currentSitemapView) {
+      result.always(showSitemap);
+    }
+
+    controller.once('selected', function (selected) {
+      graphView.close();
+      result.resolve(selected);
+    });
+
+    graphView.once('closed', result.reject);
+
+    pageflow.editor.showViewInMainPanel(graphView);
+
+    return result.promise();
+  };
+
+  pageflow.editor.registerMainMenuItem({
+    translationKey: 'pageflow.sitemap.editor.main_menu_item',
+    click: function() {
+      showSitemap();
+      this.blur();
+    }
+  });
+
+  pageflow.editor.on('scaffold:storyline', function(storyline) {
+    if (!storyline.configuration.has('lane')) {
+      storyline.configuration.set({
+        row: 0,
+        lane: firstEmptyLane()
+      });
+    }
+  });
+
+  function firstEmptyLane() {
+    return Math.max(-1, _.max(pageflow.storylines.map(function(storyline) {
+      return storyline.configuration.get('lane') || 0;
+    }))) + 1;
+  }
+
+  pageflow.editor.on('add:chapter', function(chapter) {
+    rearrangeLane(chapter.storyline);
+  });
+
+  pageflow.editor.on('add:page', function(page) {
+    rearrangeLane(page.chapter.storyline);
+  });
+
+  function rearrangeLane(changedStoryline) {
+    var storylinesBelow = pageflow.storylines.select(function(storyline) {
+      return (storyline.configuration.get('lane') ===
+              changedStoryline.configuration.get('lane') &&
+              storyline.configuration.get('row') >
+              changedStoryline.configuration.get('row'));
+    });
+
+    if (!storylinesBelow.length) {
+      return;
+    }
+
+    var minRowBelow = _.min(_(storylinesBelow).map(function(storyline) {
+      return storyline.configuration.get('row');
+    }));
+
+    var height = Math.ceil(changedStoryline.chapters.reduce(function(result, chapter) {
+      return result + chapter.pages.length + 0.5;
+    }, 0) + 0.5);
+
+    var delta = changedStoryline.configuration.get('row') + height - minRowBelow;
+
+    if (delta > 0) {
+      _(storylinesBelow).each(function(storyline) {
+        storyline.configuration.set({
+          row: (storyline.configuration.get('row') || 0) + delta
+        });
+      });
+    }
+  }
+
+  $(document).on('keydown', function(event) {
+    if (event.altKey && event.which === 83) {
+      toggleSitemap();
+    }
+  });
+
+  function toggleSitemap() {
+    if (currentSitemapView) {
+      hideSitemap();
+    }
+    else {
+      showSitemap();
+    }
+  }
+
+  function showSitemap() {
+    if (!currentSitemapView) {
+      currentSitemapView = new s.SitemapView({
+        controller: new s.EditorModeController(pageflow.entry)
+      });
+
+      currentSitemapView.once('close', function() {
+        currentSitemapView = null;
+      });
+
+      pageflow.editor.showViewInMainPanel(currentSitemapView);
+    }
+  }
+
+  function hideSitemap() {
+    currentSitemapView.close();
+  }
+});

data/app/assets/javascripts/pageflow/sitemap/editor/models/selection.js

@@ -0,0 +1,41 @@
+pageflow.sitemap.Selection = Backbone.Model.extend({
+  defaults: function() {
+    return {
+      storylines: [],
+      pages: [],
+      chapters: [],
+      pageLinks: [],
+      successorLinks: []
+    };
+  },
+
+  contains: function(model) {
+    return _(this.get('storylines')).contains(model) ||
+      _(this.get('chapters')).contains(model) ||
+      _(this.get('pages')).contains(model) ||
+      _(this.get('pageLinks')).some(function(link) {
+        return link === model |
+          (link.id && link.id === model.id) ||
+          (link.placeholder && link.placeholder === model.placeholder);
+      }) ||
+      _(this.get('successorLinks')).some(function(link) {
+        return link.successor && link.successor === model.successor;
+      });
+  },
+
+  select: function(name, models, options) {
+    options = options || {};
+
+    var base = options.additive ? this.get(name) : [];
+    var attributes = this.defaults();
+
+    attributes[name] = base.concat(models);
+    this.set(attributes);
+
+    this.trigger('select:' + name, attributes[name]);
+  },
+
+  reset: function() {
+    this.select('pages', []);
+  }
+});

data/app/assets/javascripts/pageflow/sitemap/editor/templates/scroll_bar.jst.ejs

@@ -0,0 +1,2 @@
+<div class="slider">
+</div>

data/app/assets/javascripts/pageflow/sitemap/editor/templates/sitemap.jst.ejs

@@ -0,0 +1,85 @@
+<div class="close button">
+</div>
+
+<h2></h2>
+
+<div class="svgcontainer">
+  <svg>
+    <defs>
+      <marker id="Triangle"
+              viewBox="0 0 10 10"
+              refX="1" refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto">
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      </marker>
+
+      <marker id="page_link_triangle"
+              viewBox="0 0 10 10"
+              refX="1" refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto">
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      </marker>
+
+      <marker id="page_link_triangle_highlight"
+              viewBox="0 0 10 10"
+              refX="1" refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto">
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      </marker>
+
+      <marker id="successor_link_triangle"
+              viewBox="0 0 10 10"
+              refX="1" refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto">
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      </marker>
+
+      <marker id="successor_link_triangle_highlight"
+              viewBox="0 0 10 10"
+              refX="1" refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="auto">
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      </marker>
+
+      <marker id="follow_triangle"
+              viewBox="0 0 10 10"
+              refX="1" refY="5"
+              markerWidth="6"
+              markerHeight="6"
+              orient="90">
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      </marker>
+    </defs>
+    <g class="all">
+      <g class="lines"> </g>
+      <g class="chapters"> </g>
+      <g class="links"> </g>
+      <g class="pages"> </g>
+      <g class="controls"> </g>
+    </g>
+  </svg>
+</div>
+
+<div class="toolbar">
+  <div class="items">
+  </div>
+
+  <div class="scale_minus"></div>
+  <div class="scale_slider"></div>
+  <div class="scale_plus"></div>
+
+  <a class="help_button" title="<%= I18n.t('pageflow.sitemap.editor.templates.sitemap.help') %>"></a>
+</div>
+
+<div class="scroll_bar_x"></div>
+<div class="scroll_bar_y"></div>

data/app/assets/javascripts/pageflow/sitemap/editor/views/scroll_bar_view.js

@@ -0,0 +1,130 @@
+sitemap.ScrollBarView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/sitemap/editor/templates/scroll_bar',
+
+  ui: {
+    slider: '.slider'
+  },
+
+  onRender: function() {
+    this.$el.addClass('scroll_bar');
+
+    this.setupSlider();
+  },
+
+  onClose: function() {
+    this.options.graphView.on(this.graphViewChangeEvent, null);
+  },
+
+  setupSlider: function() {
+    var graphView = this.options.graphView;
+    var view = this;
+    var coord = this.options.orientation === 'vertical' ? 'Y' : 'X';
+
+    this.ui.slider.slider({
+      orientation: this.options.orientation,
+      slide: function(event, ui) {
+        graphView['setScroll' + coord](ui.value);
+      }
+    });
+
+    this.graphViewChangeEvent = 'change.scrollBar' + coord;
+
+    this.options.graphView.on(this.graphViewChangeEvent, function() {
+      view.ui.slider.slider('value', graphView['getScroll' + coord]());
+      view.resizeHandle();
+    });
+
+    this.wrapHandleInHelper();
+    this.resizeSliderToHelperDuringDrag();
+    this.resizeHandle();
+  },
+
+  wrapHandleInHelper: function() {
+    this.ui.handle = this.ui.slider.find('.ui-slider-handle');
+    this.ui.handleHelper = this.ui.handle
+      .wrap("<div class='ui-handle-helper-parent'></div>" )
+      .parent();
+  },
+
+  resizeSliderToHelperDuringDrag: function() {
+    var view = this;
+    var sizeMethod = this.options.orientation === 'vertical' ? 'height' : 'width';
+
+    this.ui.handle.on('mousedown', function() {
+      view.sliding = true;
+
+      var marginTop = view.ui.handleHelper.prop('offsetTop');
+      var marginLeft = view.ui.handleHelper.prop('offsetLeft');
+
+      view.ui.slider
+        .width(view.ui.handleHelper.width())
+        .height(view.ui.handleHelper.height())
+        .css({
+          'margin-top': marginTop + 'px',
+          'margin-left': marginLeft + 'px'
+        });
+
+      view.ui.handleHelper.css({
+        'margin-top': 0,
+        'margin-left': 0
+      });
+
+      $(document).one('mouseup', function() {
+        view.sliding = false;
+
+        view.ui.slider
+          .width('100%')
+          .height('100%')
+          .css({
+            'margin-top': 0,
+            'margin-left': 0
+          });
+
+        view.ui.handleHelper.css({
+          'margin-top': marginTop + 'px',
+          'margin-left': marginLeft + 'px'
+        });
+      });
+    });
+  },
+
+  resizeHandle: function() {
+    if (this.sliding) {
+      return;
+    }
+
+    var handleSize;
+    var handle = this.ui.slider.find('.ui-slider-handle');
+
+    if (this.options.orientation === 'vertical') {
+      handleSize = this.options.graphView.getScrollWindowProportionY() * this.$el.height();
+
+      handle.css({
+        height: handleSize,
+        'margin-bottom': -handleSize / 2
+      });
+
+      this.ui.handleHelper.css({
+        height: this.$el.height() - handleSize,
+        'margin-top': handleSize / 2
+      });
+
+      this.ui.slider.toggle(this.options.graphView.getScrollWindowProportionY() < 1);
+    }
+    else {
+      handleSize = this.options.graphView.getScrollWindowProportionX() * this.$el.width();
+
+      handle.css({
+        width: handleSize,
+        'margin-left': -handleSize / 2
+      });
+
+      this.ui.handleHelper.css({
+        width: this.$el.width() - handleSize,
+        'margin-left': handleSize / 2
+      });
+
+      this.ui.slider.toggle(this.options.graphView.getScrollWindowProportionX() < 1);
+    }
+  }
+});

data/app/assets/javascripts/pageflow/sitemap/editor/views/scroll_pane_view.js

@@ -0,0 +1,73 @@
+(function() {
+  var KEY_SHIFT = 16;
+  var KEY_CTRL = 17;
+
+  sitemap.ScrollPaneView = Backbone.Marionette.View.extend({
+    className: 'scroll_pane',
+
+    events: {
+      mousedown: function(event) {
+        this.scrolling = true;
+        this.lastX = event.pageX;
+        this.lastY = event.pageY;
+      },
+
+      mousemove: function(event) {
+        if (!event.ctrlKey) {
+          this.deactivate();
+        }
+
+        if (this.scrolling) {
+          var diffX = event.pageX - this.lastX;
+          var diffY = event.pageY - this.lastY;
+
+          this.options.graphView.scrollBy(diffX, diffY);
+
+          this.lastX = event.pageX;
+          this.lastY = event.pageY;
+        }
+      },
+
+      mouseup: function(event) {
+        this.scrolling = false;
+      },
+    },
+
+    initialize: function() {
+      this.keydownHandler = _.bind(this.onKeydown, this);
+      this.keyupHandler = _.bind(this.onKeyup, this);
+
+      $(document).on('keydown', this.keydownHandler);
+      $(document).on('keyup', this.keyupHandler);
+    },
+
+    onClose: function() {
+      $(document).off('keydown', this.keydownHandler);
+      $(document).off('keyup', this.keyupHandler);
+    },
+
+    onKeydown: function(event) {
+      if ((event.which === KEY_CTRL && event.shiftKey) ||
+          (event.which === KEY_SHIFT && event.ctrlKey)) {
+        this.activate();
+      }
+    },
+
+    onKeyup: function(event) {
+      if (event.which === KEY_CTRL || event.which === KEY_SHIFT) {
+        this.deactivate();
+      }
+    },
+
+    activate: function() {
+      this.$el.addClass('active');
+      document.body.style.cursor = 'move';
+    },
+
+    deactivate: function() {
+      this.scrolling = false;
+      this.$el.removeClass('active');
+      document.body.style.cursor = 'default';
+    }
+  });
+}());