pageflow-sitemap 0.1.0

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

@@ -0,0 +1,137 @@
+sitemap.SitemapView = Backbone.Marionette.ItemView.extend({
+  className: 'container sitemap',
+  template: 'pageflow/sitemap/editor/templates/sitemap',
+
+  ui: {
+    scrollBarX: '.scroll_bar_x',
+    scrollBarY: '.scroll_bar_y',
+    scaleSlider: '.scale_slider',
+    toolbarItems: '.toolbar .items',
+    closeButton: '.close.button',
+    header: 'h2'
+  },
+
+  events: {
+    'click .close.button': function() {
+      this.trigger('closed');
+      this.close();
+    },
+
+    'click .help_button': function() {
+      pageflow.app.trigger('toggle-help', 'pageflow.sitemap.help_entries.main');
+      return false;
+    },
+
+    'click .toolbar .items': function(event) {
+      _(this.options.toolbarItems).each(function(item) {
+        if (item.name === $(event.target).data('name')) {
+          item.click();
+        }
+      });
+    },
+
+    'requesttooltip': function(event, options) {
+      this.tooltip.show(I18n.t(options.translationKey), options.position);
+    },
+
+    'resettooltip': function(event) {
+      this.tooltip.hide();
+    },
+
+    'mousewheel': function(event) {
+      event.preventDefault();
+    }
+  },
+
+  initialize: function() {
+    this.listenTo(this, 'close', function() {
+      this.graphView.on('change.scaleSlider', null);
+      this.options.controller.dispose();
+
+      sitemap.SitemapView.lastViewport = this.graphView.getViewport();
+    });
+
+    this.listenTo(this.options.controller, 'showPage', function(page) {
+      this.close();
+    });
+
+    this.listenTo(this.options.controller, 'showStoryline', function(storyline) {
+      pageflow.editor.navigate('?storyline=' + storyline.id, {trigger: true});
+      this.close();
+    });
+  },
+
+  onRender: function() {
+    this.$el.addClass(this.options.controller.name);
+
+    this.appendSubview(this.tooltip = new pageflow.TooltipView());
+    this.graphView = new sitemap.GraphView(this.$el.find('svg')[0], this.options.controller, {
+                                             defaultViewport: sitemap.SitemapView.lastViewport
+                                           });
+
+
+    this.listenTo(pageflow.app, 'resize', this.graphView.resize);
+
+    this.setupHeader();
+    this.setupScrollBars();
+    this.setupScrollPane();
+    this.setupScaleSlider();
+    this.setupToolbar();
+  },
+
+  onShow: function() {
+    this.graphView.resize();
+  },
+
+  setupHeader: function() {
+    this.ui.closeButton.text(I18n.t('pageflow.sitemap.editor.templates.sitemap.' + (this.options.cancelButton ? 'cancel' : 'close')));
+    this.ui.header.text(this.options.headerText);
+  },
+
+  setupScrollBars: function() {
+    this.subview(new sitemap.ScrollBarView({
+      el: this.ui.scrollBarX,
+      graphView: this.graphView
+    }));
+
+    this.subview(new sitemap.ScrollBarView({
+      el: this.ui.scrollBarY,
+      graphView: this.graphView,
+      orientation: 'vertical'
+    }));
+  },
+
+  setupScrollPane: function() {
+    this.appendSubview(new sitemap.ScrollPaneView({
+      graphView: this.graphView
+    }));
+  },
+
+  setupScaleSlider: function() {
+    var view = this;
+
+    this.ui.scaleSlider.slider({
+      slide: function(event, ui) {
+        view.graphView.setScale(ui.value);
+      }
+    });
+
+    this.graphView.on('change.scaleSlider', function() {
+      view.ui.scaleSlider.slider('value', view.graphView.getScale());
+    });
+  },
+
+  setupToolbar: function() {
+    var view = this;
+
+    _(this.options.toolbarItems).each(function(item) {
+      var link = $('<a />');
+
+      link.text(I18n.t('pageflow.sitemap.editor.toolbar_items.' + item.name));
+      link.addClass(item.name);
+      link.data('name', item.name);
+
+      view.ui.toolbarItems.append(link);
+    });
+  }
+});

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

@@ -0,0 +1,14 @@
+//= require_self
+
+//= require d3.v3.js
+//
+//= require_tree ./editor/models
+//= require ./editor/controllers/abstract_controller.js
+//= require_tree ./editor/controllers
+//= require_tree ./editor/templates
+//= require ./editor/d3.js
+//= require_tree ./editor/views
+//= require ./editor/feature.js
+
+pageflow.sitemap = pageflow.sitemap || {};
+window.sitemap = window.sitemap || pageflow.sitemap;

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

@@ -0,0 +1,3 @@
+pageflow.features.register('slideshow', 'sitemap', function() {
+//  pageflow.slides.scrollNavigator = new pageflow.sitemap.ScrollNavigator();
+});

data/app/assets/javascripts/pageflow/sitemap/scroll_navigator.js

@@ -0,0 +1,112 @@
+pageflow.sitemap.ScrollNavigator = function() {
+  function goToConfiguredSuccessor(currentPage) {
+    var configuration = currentPage.page('getConfiguration');
+
+    if('scroll_successor_id' in configuration) {
+      return pageflow.slides.goToByPermaId(configuration.scroll_successor_id);
+    }
+
+    return false;
+  }
+
+  function hasConfiguredSuccessor(currentPage, pages) {
+    return !!configuredSuccessor(currentPage, pages).length;
+  }
+
+  function configuredSuccessor(currentPage, pages) {
+    var configuration = currentPage.page('getConfiguration');
+
+    if ('scroll_successor_id' in configuration) {
+      return pages.filter('#' + configuration.scroll_successor_id);
+    }
+
+    return $();
+  }
+
+  function goToPreviousPageInStoryline(currentPage) {
+    return goToPageInStoryline(currentPage, currentPage.prev('.page'), {position: 'bottom'});
+  }
+
+  function goToNextPageInStoryline(currentPage) {
+    return goToPageInStoryline(currentPage, currentPage.next('.page'));
+  }
+
+  function nextPageInStoryline(currentPage) {
+    var page = currentPage.next('.page');
+
+    if (sameStoryline(currentPage, page)) {
+      return page;
+    }
+
+    return $();
+  }
+
+  function goToPageInStoryline(currentPage, targetPage, options) {
+    if (sameStoryline(currentPage, targetPage)) {
+      pageflow.slides.goTo(targetPage, options);
+      return true;
+    }
+
+    return false;
+  }
+
+  function goToPreviouslyVisitedPage() {
+    return pageflow.history.back();
+  }
+
+  function sameStoryline(page1, page2) {
+    return pageflow.entryData.getStorylineIdByPagePermaId(page1.page('getPermaId')) ==
+      pageflow.entryData.getStorylineIdByPagePermaId(page2.page('getPermaId'));
+  }
+
+  this.getLandingPage = function(pages) {
+    var result = pages.first();
+
+    pages.each(function() {
+      var page = $(this);
+      var configuration = page.page('getConfiguration');
+
+      if (configuration.start_page) {
+        result = page;
+      }
+    });
+
+    return result;
+  };
+
+  this.back = function(currentPage) {
+    return goToPreviousPageInStoryline(currentPage);
+  };
+
+  this.next = function(currentPage) {
+    return goToNextPageInStoryline(currentPage) ||
+      goToConfiguredSuccessor(currentPage);
+  };
+
+  this.nextPageExists = function(currentPage, pages) {
+    return sameStoryline(currentPage, currentPage.next('.page')) ||
+      hasConfiguredSuccessor(currentPage, pages);
+  };
+
+  this.previousPageExists = function(currentPage, pages) {
+    return sameStoryline(currentPage, currentPage.prev('.page'));
+  };
+
+  this.getNextPage = function(currentPage, pages) {
+    return nextPageInStoryline(currentPage) ||
+      configuredSuccessor(currentPage, pages);
+  };
+
+  this.getTransitionDirection = function(previousPage, currentPage, options) {
+    var direction;
+
+    if (sameStoryline(previousPage, currentPage)) {
+      direction = (currentPage.index() > previousPage.index() ? 'forwards' : 'backwards');
+    }
+    else {
+      direction = options.back ? 'backwards' : 'forwards';
+    }
+
+    return direction;
+  };
+};

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

@@ -0,0 +1,5 @@
+//= require_self
+//= require ./sitemap/scroll_navigator.js
+//= require ./sitemap/feature.js
+
+pageflow.sitemap = pageflow.sitemap || {};

data/app/assets/stylesheets/pageflow/sitemap/editor/add_button.scss

@@ -0,0 +1,29 @@
+.add_button {
+
+  text  {
+    -visibility: hidden;
+    opacity: 0;
+    @include transition(opacity 0.1s ease);
+    pointer-events: none;
+    font-family: 'entypo';
+    font-size: 20px;
+    fill: #000;
+    text-anchor: middle;
+    dominant-baseline: central;
+  }
+
+  rect {
+    cursor: pointer;
+    fill: transparent;
+  }
+
+  &.hover {
+    text {
+      opacity: 0.5;
+    }
+  }
+}
+
+&.selection_mode .add_button {
+  display: none;
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/chapter_placeholders.scss

@@ -0,0 +1,14 @@
+.chapter_placeholder {
+  rect {
+    fill: rgba(0, 0, 0, 0.5);
+  }
+
+  text  {
+    pointer-events: none;
+    font-family: 'entypo';
+    font-size: 20px;
+    fill: #000;
+    text-anchor: middle;
+    dominant-baseline: central;
+  }
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/chapters.scss

@@ -0,0 +1,62 @@
+.chapter {
+  .handle {
+    fill: #eee;
+  }
+
+  .border {
+    fill: #fff;
+    stroke: none;
+  }
+
+  .title_text {
+    color: #000;
+    font: $font;
+    font-size: 12px;
+    font-weight: bold;
+    pointer-events: none;
+    padding-top: 3px;
+    padding-left: 5px;
+  }
+
+  &.destroying {
+    opacity: 0.5;
+  }
+}
+
+&.editor_mode .chapter {
+  .handle {
+    cursor: pointer;
+  }
+
+  &.dragged,
+  &.hover {
+    .handle {
+      fill: $highlight-color;
+    }
+
+    .border {
+      fill: #f9f9f9;
+    }
+  }
+
+  &.selected {
+    .handle {
+      fill: #5AA5F9;
+      cursor: move;
+    }
+
+    .border {
+      fill: #D2E5FA;
+    }
+
+    .title_text {
+      color: #fff;
+    }
+  }
+
+  &.empty {
+    .add_page {
+      visibility: visible;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/page_links.scss

@@ -0,0 +1,19 @@
+.page_link {
+  .arrow {
+    stroke: $page-link-color;
+  }
+
+  &.placeholder {
+    .drag_target {
+      transform: translateX(-5px);
+    }
+  }
+}
+
+#page_link_triangle {
+  fill: $page-link-color;
+}
+
+#page_link_triangle_highlight {
+  fill: $highlight-color;
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/pages.scss

@@ -0,0 +1,78 @@
+.page {
+  .bg {
+    cursor: pointer;
+    fill: #444;
+    stroke: #444;
+    stroke-width: $stroke-width;
+    font: $font;
+  }
+
+  .border {
+    fill: transparent;
+    strole: none;
+    pointer-events: none;
+    stroke-width: 4px;
+  }
+
+  .title {
+    fill: #000;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .start_page_indicator {
+    display: none;
+  }
+
+  &.start_page .start_page_indicator {
+    display: block;
+  }
+
+  &.highlighted .border {
+    stroke: #5AA5F9;
+  }
+
+  &.disabled,
+  &.destroying {
+    opacity: 0.5;
+  }
+
+  .title_text {
+    color: #fff;
+    font: 13px sans-serif;
+    font-weight: bold;
+    pointer-events: none;
+    padding: 15px 5px;
+  }
+
+  image {
+    pointer-events: none;
+  }
+}
+
+&.editor_mode .page {
+  &.hover .border {
+    stroke: $highlight-color;
+  }
+
+  &.selected {
+    .border {
+      stroke: #5AA5F9;
+    }
+
+    .bg {
+      cursor: move;
+    }
+  }
+}
+
+&.selection_mode .page {
+  &.hover .border {
+    stroke: $selection-color;
+  }
+
+  &.highlighted,
+  &.disabled {
+    pointer-events: none;
+  }
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/scroll_bar.css.scss

@@ -0,0 +1,33 @@
+.scroll_bar {
+  .ui-slider {
+    border: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .ui-slider-handle {
+    background: #bbb;
+    border: solid 1px #888;
+    border-radius: 0;
+    cursor: move;
+
+    &:hover {
+      background: #aaa;
+    }
+  }
+
+  .ui-slider-horizontal .ui-slider-handle {
+    height: 11px;
+    top: 0;
+  }
+
+  .ui-slider-vertical .ui-slider-handle {
+    width: 11px;
+    left: 0;
+  }
+
+  .ui-handle-helper-parent {
+    position: relative;
+  }
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/scroll_pane.scss

@@ -0,0 +1,15 @@
+.scroll_pane {
+  display: none;
+  z-index: 10001;
+  cursor: move;
+
+  position: absolute;
+  top: 35px;
+  left: 1px;
+  right: 15px;
+  bottom: 15px;
+
+  &.active {
+    display: block;
+  }
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/selectable_links.scss

@@ -0,0 +1,88 @@
+.selectable_link {
+  .arrow {
+    fill: none;
+    stroke-width: $stroke-width;
+    pointer-events: none;
+  }
+
+  &.placeholder {
+    .arrow {
+      display: none;
+    }
+  }
+
+  .selection_highlight {
+    fill: none;
+    stroke: transparent;
+    stroke-width: 4px;
+    pointer-events: none;
+  }
+
+  .selection_target {
+    fill: none;
+    stroke: transparent;
+    stroke-width: 10px;
+    pointer-events: stroke;
+  }
+
+  .drag_target {
+    display: none;
+    fill: none;
+    cursor: move;
+    pointer-events: all;
+  }
+
+  &.placeholder {
+    .drag_target {
+      display: block;
+      fill: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  .text_label {
+    opacity: 0;
+    @include transition(opacity 0.3s ease);
+  }
+
+  &.highlight {
+    .text_label {
+      opacity: 1;
+    }
+  }
+}
+
+&.editor_mode .selectable_link {
+  &.dragged {
+    .arrow {
+      display: block;
+    }
+  }
+
+  &.dragged,
+  &.highlight {
+    .arrow {
+      stroke: $highlight-color;
+      stroke-width: 2px;
+    }
+  }
+
+  &.dragged {
+    .drag_target {
+      fill: none;
+    }
+  }
+
+  &.selected .selection_highlight {
+    stroke: $selection-color;
+  }
+
+  &.dragged .selection_highlight {
+    stroke: transparent;
+  }
+}
+
+&.selection_mode .selectable_link {
+  .drag_target {
+    display: none;
+  }
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/selection_rect.scss

@@ -0,0 +1,12 @@
+rect.selection {
+  fill: none;
+  stroke: #aaa;
+  stroke-width: 2px;
+  shape-rendering: crispEdges;
+  cursor: default;
+  vector-effect: non-scaling-stroke;
+}
+
+&.selection_mode rect.selection {
+  display: none;
+}

data/app/assets/stylesheets/pageflow/sitemap/editor/storylines.scss

@@ -0,0 +1,59 @@
+.storyline {
+  .handle {
+    fill: #ccc;
+  }
+
+  text {
+    fill: #444;
+    font: $font;
+    font-size: 12px;
+    font-weight: bold;
+    pointer-events: none;
+    padding-top: 3px;
+    padding-left: 5px;
+  }
+
+  .border {
+    fill: #ddd;
+  }
+
+  &.main {
+    > .handle {
+      fill: #444;
+    }
+
+    > text {
+      fill: #fff;
+    }
+  }
+}
+
+&.editor_mode .storyline {
+  &.hover {
+    .handle {
+      fill: $highlight-color;
+    }
+  }
+}
+
+&.editor_mode .storyline {
+  .handle {
+    cursor: pointer;
+  }
+}
+
+&.editor_mode .storyline.selected,
+&.selection_mode .storyline.highlighted {
+  > .handle {
+    fill: #5AA5F9;
+    cursor: move;
+  }
+
+  > text {
+    fill: #fff;
+  }
+
+  > .border {
+    fill: #D2E5FA;
+  }
+}