pageflow-sitemap 0.1.0

data/spec/javascripts/pageflow/sitemap/editor/controllers/selection_navigator_spec.js

@@ -0,0 +1,52 @@
+describe('pageflow.sitemap.SelectioNavigator', function() {
+  var s = pageflow.sitemap;
+
+  describe('on select:chapters', function() {
+    it('navigates to chapter if only one is selected', function() {
+      var api = {navigate: sinon.spy()};
+      var selection = new s.Selection();
+      var selectionNavigator = new s.SelectionNavigator({
+        api: api,
+        selection: selection
+      });
+      var chapter = new Backbone.Model({id: 6});
+
+      selectionNavigator.attach();
+      selection.select('chapters', [chapter]);
+
+      expect(api.navigate).to.have.been.calledWith('/chapters/6', {trigger: true});
+    });
+
+    it('navigates to multiSelectionPath if more than one is selected', function() {
+      var api = {navigate: sinon.spy()};
+      var selection = new s.Selection();
+      var selectionNavigator = new s.SelectionNavigator({
+        api: api,
+        selection: selection,
+        multiSelectionPath: '/multi'
+      });
+      var chapter0 = new Backbone.Model({id: 6});
+      var chapter1 = new Backbone.Model({id: 7});
+
+      selectionNavigator.attach();
+      selection.select('chapters', [chapter0, chapter1]);
+
+      expect(api.navigate).to.have.been.calledWith('/multi', {trigger: true});
+    });
+
+    it('navigates to emptySelectionPath if more than one is selected', function() {
+      var api = {navigate: sinon.spy()};
+      var selection = new s.Selection();
+      var selectionNavigator = new s.SelectionNavigator({
+        api: api,
+        selection: selection,
+        emptySelectionPath: '/none'
+      });
+
+      selectionNavigator.attach();
+      selection.select('chapters', []);
+
+      expect(api.navigate).to.have.been.calledWith('/none', {trigger: true});
+    });
+  });
+});

data/spec/javascripts/pageflow/sitemap/editor/d3/layout/collision_spec.js

@@ -0,0 +1,99 @@
+describe('pageflow.sitemap.layout.Collision', function() {
+  var s = pageflow.sitemap;
+  var l = pageflow.sitemap.layout;
+  var f = support.factories;
+
+  describe('#pagesGroupedByDragTargetChapters', function() {
+    it('moves selected pages above drag target page', function() {
+      var sourceChapter = f.chapter();
+      var targetChapter = f.chapter();
+      var draggedPage = f.page(sourceChapter);
+      var otherSourcePage = f.page(sourceChapter);
+      var targetPage = f.page(targetPage);
+      var selection = new s.Selection({pages: [draggedPage]});
+
+      var draggedLayout = {
+        draggedPages: [draggedPage],
+        position: sinon.stub().returns({x: 110, y: 200}),
+      };
+
+      var targetLayout = {
+        isAbovePage: sinon.stub().returns(false),
+
+        isBelowChapter: sinon.stub().returns(false),
+
+        pagesGroupedByChapters: [
+          {
+            chapter: sourceChapter,
+            pages: [otherSourcePage]
+          },
+          {
+            chapter: targetChapter,
+            pages: [targetPage]
+          }
+        ]
+      };
+      targetLayout.isAbovePage.withArgs(targetPage, {x: 110, y: 200}).returns(true);
+
+      var collision = new l.Collision(draggedLayout, targetLayout);
+      var result = collision.pagesGroupedByDragTargetChapters();
+
+      expect(result).to.deep.eq([
+        {
+          chapter: sourceChapter,
+          pages: [otherSourcePage]
+        },
+        {
+          chapter: targetChapter,
+          pages: [draggedPage, targetPage]
+        },
+      ]);
+    });
+
+    it('moves selected pages to end of drag target chapter', function() {
+      var sourceChapter = f.chapter();
+      var targetChapter = f.chapter();
+      var draggedPage = f.page(sourceChapter);
+      var otherSourcePage = f.page(sourceChapter);
+      var targetPage = f.page(targetPage);
+      var selection = new s.Selection({pages: [draggedPage]});
+
+      var draggedLayout = {
+        draggedPages: [draggedPage],
+        position: sinon.stub().returns({x: 110, y: 200}),
+      };
+
+      var targetLayout = {
+        isAbovePage: sinon.stub().returns(false),
+
+        isBelowChapter: sinon.stub().returns(false),
+
+        pagesGroupedByChapters: [
+          {
+            chapter: sourceChapter,
+            pages: [otherSourcePage]
+          },
+          {
+            chapter: targetChapter,
+            pages: [targetPage]
+          }
+        ]
+      };
+      targetLayout.isBelowChapter.withArgs(targetChapter, {x: 110, y: 200}).returns(true);
+
+      var collision = new l.Collision(draggedLayout, targetLayout);
+      var result = collision.pagesGroupedByDragTargetChapters();
+
+      expect(result).to.deep.eq([
+        {
+          chapter: sourceChapter,
+          pages: [otherSourcePage]
+        },
+        {
+          chapter: targetChapter,
+          pages: [targetPage, draggedPage]
+        },
+      ]);
+    });
+  });
+});

data/spec/javascripts/pageflow/sitemap/editor/d3/layout/dragging_decorator_spec.js

@@ -0,0 +1,114 @@
+describe('pageflow.sitemap.layout.DraggingDecorator', function() {
+  var s = pageflow.sitemap;
+  var l = pageflow.sitemap.layout;
+  var f = support.factories;
+
+  var options = {rowHeight: 100, laneWidth: 100};
+
+  describe('#position', function() {
+    it('returns translated position if dragged', function() {
+      var chapter = f.chapter();
+      var selection = new s.Selection();
+      var layout = {
+        position: sinon.stub().returns({x: 100, y: 200})
+      };
+      var draggingLayout = new l.DraggingDecorator(selection,
+                                                   layout,
+                                                   layout,
+                                                   {delta: {x: 10, y: 15}});
+
+      selection.select('chapters', [chapter]);
+      var pos = draggingLayout.position(chapter);
+
+      expect(pos).to.deep.eq({x: 110, y: 215});
+    });
+
+    it('returns untranslated position if not dragged', function() {
+      var chapter = f.chapter();
+      var selection = new s.Selection();
+      var layout = {
+        position: sinon.stub().returns({x: 100, y: 200})
+      };
+      var draggingLayout = new l.DraggingDecorator(selection,
+                                                   layout,
+                                                   layout,
+                                                   {delta: {x: 10, y: 15}});
+
+      var pos = draggingLayout.position(chapter);
+
+      expect(pos).to.deep.eq({x: 100, y: 200});
+    });
+  });
+
+  describe('#draggedPages', function() {
+    it('contains selected pages if dragging', function() {
+      var page = f.page();
+      var selection = new s.Selection({pages: [page]});
+      var layout = {};
+
+      var draggingLayout = new l.DraggingDecorator(selection,
+                                                   layout,
+                                                   layout,
+                                                   {delta: {x: 10, y: 15}});
+
+      expect(draggingLayout.draggedPages).to.deep.eq([page]);
+    });
+
+    it('is empty if not dragging', function() {
+      var page = f.page();
+      var selection = new s.Selection({pages: [page]});
+      var layout = {};
+
+      var draggingLayout = new l.DraggingDecorator(selection,
+                                                   layout,
+                                                   layout,
+                                                   {});
+
+      expect(draggingLayout.draggedPages).to.deep.eq([]);
+    });
+  });
+
+  describe('#pagesGroupedByChapters', function() {
+    it('delegates to wrapped layout', function() {
+      var page = f.page();
+      var selection = new s.Selection({pages: [page]});
+      var groups = [];
+      var layout = {
+        pagesGroupedByChapters: groups
+      };
+
+      var draggingLayout = new l.DraggingDecorator(selection,
+                                                   layout,
+                                                   layout,
+                                                   {delta: {x: 10, y: 15}});
+
+      expect(draggingLayout.pagesGroupedByChapters).to.eq(groups);
+    });
+  });
+
+  describe('#nonDraggedPagesGroupedByChapters', function() {
+    it('filters out dragged pages', function() {
+      var chapter = f.chapter();
+      var page0 = f.page(chapter);
+      var page1 = f.page(chapter);
+      var selection = new s.Selection({pages: [page1]});
+      var groups = [{
+        chapter: chapter,
+        pages: [page0, page1]
+      }];
+      var layout = {
+        pagesGroupedByChapters: groups
+      };
+
+      var draggingLayout = new l.DraggingDecorator(selection,
+                                                   layout,
+                                                   layout,
+                                                   {delta: {x: 10, y: 15}});
+
+      expect(draggingLayout.nonDraggedPagesGroupedByChapters).to.deep.eq([{
+        chapter: chapter,
+        pages: [page0]
+      }]);
+    });
+  });
+});

data/spec/javascripts/pageflow/sitemap/editor/d3/layout/grid_spec.js

@@ -0,0 +1,183 @@
+describe('pageflow.sitemap.layout.Grid', function() {
+  var l = pageflow.sitemap.layout;
+  var f = support.factories;
+
+  var options = {
+    pageHeight: 60,
+    pageWidth: 60,
+    pageMarginWidth: 20,
+    pageMarginHeight: 20
+  };
+
+  describe('#position', function() {
+    it('returns storyline position accoring to coordinates', function() {
+      var storyline = f.storyline(f.entry(), {configuration: {row: 2, lane: 1}});
+      var chaptersGroupedByStorylines = [{
+        storyline: storyline,
+        chapters: []
+      }];
+      var pagesGroupedByChapters = [];
+      var gridLayout = new l.Grid(chaptersGroupedByStorylines, pagesGroupedByChapters, options);
+
+      var pos = gridLayout.position(storyline);
+
+      expect(pos).to.deep.eq({x: 100, y: 200});
+    });
+
+    it('returns chapter position accoring to storyline position', function() {
+      var storyline = f.storyline(f.entry(), {configuration: {row: 2, lane: 1}});
+      var chapter1 = f.chapter(storyline);
+      var chapter2 = f.chapter(storyline);
+      var chaptersGroupedByStorylines = [{
+        storyline: storyline,
+        chapters: [chapter1, chapter2]
+      }];
+      var pagesGroupedByChapters = [
+        {chapter: chapter1, pages: []},
+        {chapter: chapter2, pages: []}
+      ];
+      var gridLayout = new l.Grid(chaptersGroupedByStorylines, pagesGroupedByChapters, options);
+
+      var pos1 = gridLayout.position(chapter1);
+      var pos2 = gridLayout.position(chapter2);
+
+      expect(pos1).to.deep.eq({x: 100, y: 200});
+      expect(pos2).to.deep.eq({x: 100, y: 300});
+    });
+
+    xit('returns page position according to chapter coordinates', function() {
+      var chapter = f.chapter(f.entry(), {configuration: {row: 2, lane: 1}});
+      var page1 = f.page(chapter);
+      var page2 = f.page(chapter);
+      var gridLayout = new l.Grid([
+        {
+          chapter: chapter,
+          pages: [page1, page2]
+        }
+      ], options);
+
+      var pos1 = gridLayout.position(page1);
+      var pos2 = gridLayout.position(page2);
+
+      expect(pos1).to.deep.eq({x: 100, y: 200});
+      expect(pos2).to.deep.eq({x: 100, y: 300});
+    });
+  });
+
+  xdescribe('#chapterHeight', function() {
+    it('returns height of chapter', function() {
+      var chapter = f.chapter(f.entry(), {configuration: {row: 2, lane: 1}});
+      var page1 = f.page(chapter);
+      var page2 = f.page(chapter);
+      var gridLayout = new l.Grid([
+        {
+          chapter: chapter,
+          pages: [page1, page2]
+        }
+      ], options);
+
+      var height = gridLayout.chapterHeight(chapter);
+
+      expect(height).to.eq(60 + 20 + 20 + 60);
+    });
+  });
+
+  xdescribe('#isAbovePage', function() {
+    it('returns true if position is centered above page', function() {
+      var chapter = f.chapter(f.entry(), {configuration: {row: 2, lane: 1}});
+      var page = f.page(chapter);
+      var gridLayout = new l.Grid([
+        {
+          chapter: chapter,
+          pages: [page]
+        }
+      ], options);
+
+      var result = gridLayout.isAbovePage(page, {x: 100, y: 190});
+
+      expect(result).to.eq(true);
+    });
+
+    it('returns false if position is in lower half of page', function() {
+      var chapter = f.chapter(f.entry(), {configuration: {row: 2, lane: 1}});
+      var page = f.page(chapter);
+      var gridLayout = new l.Grid([
+        {
+          chapter: chapter,
+          pages: [page]
+        }
+      ], options);
+
+      var result = gridLayout.isAbovePage(page, {x: 100, y: 260});
+
+      expect(result).to.eq(false);
+    });
+  });
+
+  xdescribe('#isBelowChapter', function() {
+    it('returns true if position is centered below chapter', function() {
+      var chapter = f.chapter(f.entry(), {configuration: {row: 2, lane: 1}});
+      var page = f.page(chapter);
+      var gridLayout = new l.Grid([
+        {
+          chapter: chapter,
+          pages: [page]
+        }
+      ], options);
+
+      var result = gridLayout.isBelowChapter(chapter, {x: 100, y: 200 + 60 + 20});
+
+      expect(result).to.eq(true);
+    });
+
+    it('returns false if position is too far up inside the chapter', function() {
+      var chapter = f.chapter(f.entry(), {configuration: {row: 2, lane: 1}});
+      var page = f.page(chapter);
+      var gridLayout = new l.Grid([
+        {
+          chapter: chapter,
+          pages: [page]
+        }
+      ], options);
+
+      var result = gridLayout.isBelowChapter(chapter, {x: 100, y: 200 + 20});
+
+      expect(result).to.eq(false);
+    });
+  });
+
+  xdescribe('#laneAndRowFromPoint', function() {
+    it('maps point to row and lane', function() {
+      var gridLayout = new l.Grid([], options);
+
+      var result = gridLayout.laneAndRowFromPoint({x: 0, y: 100});
+
+      expect(result).to.deep.eql({lane: 0, row: 1});
+    });
+  });
+
+  xdescribe('#size', function() {
+    it('returns width and height of all pages', function() {
+      var chapter1 = f.chapter(f.entry(), {configuration: {row: 1, lane: 0}});
+      var page11 = f.page(chapter1);
+      var page12 = f.page(chapter1);
+      var page13 = f.page(chapter1);
+      var chapter2 = f.chapter(f.entry(), {configuration: {row: 0, lane: 2}});
+      var page21 = f.page(chapter2);
+      var gridLayout = new l.Grid([
+        {
+          chapter: chapter1,
+          pages: [page11, page12, page13]
+        },
+        {
+          chapter: chapter2,
+          pages: [page11]
+        }
+      ], options);
+
+      var result = gridLayout.size;
+
+      expect(result).to.deep.eq({x: 300, y: 400});
+    });
+  });
+});

data/spec/javascripts/pageflow/sitemap/editor/d3/layout_spec.js

@@ -0,0 +1,31 @@
+describe('pageflow.sitemap.layout', function() {
+  var s = pageflow.sitemap;
+  var f = support.factories;
+
+  describe('.create', function() {
+    it('creates a layout', function() {
+      var entry = f.entry();
+      var chapter = f.chapter(entry, {configuration: {lane: 0, row: 0}});
+      var otherChapter = f.chapter(entry, {configuration: {lane: 1, row: 0}});
+      var page = f.page(chapter);
+      var draggedPage = f.page(otherChapter);
+      var selection = new s.Selection({pages: [draggedPage]});
+
+      var layout = s.layout.create(entry, selection, {
+        dragDelta: {
+          x: 10,
+          y: 20
+        },
+        grid: {
+          pageHeight: 60,
+          pageWidth: 60,
+          pageMarginWidth: 20,
+          pageMarginHeight: 20,
+        }
+      });
+
+      expect(layout.position(page)).to.deep.eq({x: 0, y: 0});
+      expect(layout.position(draggedPage)).to.deep.eq({x: 110, y: 20});
+    });
+  });
+});

data/spec/javascripts/pageflow/sitemap/editor/d3/view_model_spec.js

@@ -0,0 +1,56 @@
+//describe('pageflow.sitemap.ViewModel', function() {
+//  var f = support.factories;
+//  var p = pageflow;
+//  var s = window.sitemap;
+//
+//  it('sets selected property on pages from selection', function() {
+//    var entry = f.entry();
+//    var chapter = f.chapter(entry);
+//    var page = f.page(chapter);
+//    var selection = new s.Selection();
+//
+//    selection.select('pages', [page]);
+//    var viewModel = new s.ViewModel(entry, selection);
+//
+//    expect(viewModel.pages[0].selected).to.eq(true);
+//  });
+//
+//  it('applies dragDx and dragDy to selected page', function() {
+//    var entry = f.entry();
+//    var chapter = f.chapter(entry);
+//    var page = f.page(chapter);
+//    var selection = new s.Selection();
+//
+//    selection.select('pages', [page]);
+//    var viewModel = new s.ViewModel(entry, selection, {dragDx: 10, dragDy: 10});
+//
+//    expect(viewModel.pages[0].x).to.eq(10);
+//    expect(viewModel.pages[0].y).to.eq(10);
+//  });
+//
+//  it('does not apply dragDx and dragDy to unselected page', function() {
+//    var entry = f.entry();
+//    var chapter = f.chapter(entry);
+//    var page = f.page(chapter);
+//    var selection = new s.Selection();
+//
+//    var viewModel = new s.ViewModel(entry, selection, {dragDx: 10, dragDy: 10});
+//
+//    expect(viewModel.pages[0].x).to.eq(0);
+//    expect(viewModel.pages[0].y).to.eq(0);
+//  });
+//
+//  describe('chapters[].virtualPages', function() {
+//    it('contains non selected pages of chapter', function() {
+//      var entry = f.entry();
+//      var chapter = f.chapter(entry, {configuration: {lane: 1, row: 1}});
+//      var otherChapter = f.chapter(entry, {configuration: {lane: 2, row: 1}});
+//      var page = f.page(chapter);
+//      var selection = new s.Selection();
+//
+//      var viewModel = new s.ViewModel(entry, selection);
+//
+//      expect(viewModel.chapters[0].virtualPages).to.deep.eq([page]);
+//    });
+//  });
+//});

data/spec/javascripts/pageflow/sitemap/editor/models/selection_spec.js

@@ -0,0 +1,62 @@
+describe('pageflow.sitemap.Selection', function() {
+  var s = pageflow.sitemap;
+
+  describe('#contains', function() {
+    it('returns true if page is selected', function() {
+      var selection = new s.Selection();
+      var page = {};
+
+      selection.select('pages', [page]);
+
+      expect(selection.contains(page)).to.eq(true);
+    });
+  });
+
+  describe('#select', function() {
+    it('resets previous selection', function() {
+      var selection = new s.Selection();
+      var page = {};
+      var chapter = {};
+
+      selection.select('pages', [page]);
+      selection.select('chapters', [chapter]);
+
+      expect(selection.get('pages')).to.deep.eq([]);
+    });
+
+    it('triggers select:<name> event', function() {
+      var selection = new s.Selection();
+      var page = {};
+      var handler = sinon.spy();
+
+      selection.on('select:pages', handler);
+      selection.select('pages', [page]);
+
+      expect(handler).to.have.been.calledWith([page]);
+    });
+
+    describe('with additive option', function() {
+      it('adds model of same type', function() {
+        var selection = new s.Selection();
+        var page0 = {};
+        var page1 = {};
+
+        selection.select('pages', [page0]);
+        selection.select('pages', [page1], {additive: true});
+
+        expect(selection.get('pages')).to.deep.eq([page0, page1]);
+      });
+
+      it('resets previous selection of other type', function() {
+        var selection = new s.Selection();
+        var page = {};
+        var chapter = {};
+
+        selection.select('chapters', [chapter]);
+        selection.select('pages', [page], {additive: true});
+
+        expect(selection.get('chapters')).to.deep.eq([]);
+      });
+    });
+  });
+});

data/spec/javascripts/pageflow/sitemap/scroll_navigator_spec.js

@@ -0,0 +1,5 @@
+describe('pageflow.sitemap.ScrollNavigator', function() {
+  describe('#back', function() {
+    
+  });
+});

data/spec/javascripts/spec_helper.js

@@ -0,0 +1,13 @@
+//= require support/sinon
+//= require support/chai
+//= require support/sinon-chai
+
+//= require pageflow/base
+//= require pageflow/editor/base
+//= require pageflow/sitemap/editor
+
+//= require_self
+//= require support/factories
+
+window.support = {};
+window.expect = chai.expect;

data/spec/javascripts/support/factories.js

@@ -0,0 +1,81 @@
+support.factories = {
+  entry: function(attributes) {
+    var entry = new Backbone.Model(attributes);
+
+    entry.storylines = new pageflow.StorylinesCollection();
+    entry.chapters = new pageflow.ChaptersCollection();
+    entry.pages = new pageflow.PagesCollection();
+
+    return entry;
+  },
+
+  storyline: function(entry, attributes) {
+    entry = entry || this.entry();
+
+    attributes = attributes || {};
+    attributes.id = _.uniqueId();
+
+    var storyline = new Backbone.Model(_(attributes).omit('configuration'));
+
+    storyline.configuration = new Backbone.Model(attributes.configuration);
+    storyline.chapter = new pageflow.StorylineChaptersCollection({
+      chapters: entry.chapters,
+      storyline: storyline
+    });
+
+    entry.storylines.add(storyline);
+
+    return storyline;
+  },
+
+  chapter: function(entry, storyline, attributes) {
+    storyline = storyline || this.storyline();
+
+    attributes = attributes || {};
+    attributes.id = _.uniqueId();
+
+    var chapter = new Backbone.Model(_(attributes).omit('configuration'));
+
+    chapter.configuration = new Backbone.Model(attributes.configuration);
+    chapter.pages = new pageflow.ChapterPagesCollection({
+      pages: entry.pages,
+      chapter: chapter
+    });
+
+    entry.chapters.add(chapter);
+
+    return chapter;
+  },
+
+  page: function(chapter, attributes) {
+    chapter = chapter || this.chapter();
+
+    attributes = attributes || {};
+    attributes.id = _.uniqueId();
+    attributes.chapter_id = chapter.id;
+
+    var page = new Backbone.Model(_(attributes).omit('configuration'));
+
+    page.configuration = new Backbone.Model(attributes.configuration);
+    page.pageLinks = function() {
+      return support.factories.pageLinks();
+    };
+    page.chapterPosition = function() {
+      return chapter.get('position');
+    };
+
+    chapter.pages.add(page);
+
+    return page;
+  },
+
+  pageLinks: function() {
+    var pageLinks = new Backbone.Collection();
+
+    pageLinks.canAddLink = function() {
+      return false;
+    };
+
+    return pageLinks;
+  }
+};