pageflow-internal-links 0.1.0

data/app/assets/javascripts/pageflow/internal_links/editor/views/grid_item_embedded_view.js

@@ -0,0 +1,227 @@
+pageflow.internalLinks.GridItemEmbeddedView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/internal_links/editor/templates/grid_item_embedded',
+
+  modelEvents: {
+    'change': 'update'
+  },
+
+  ui: {
+    title: '.title'
+  },
+
+  events: {
+    'click .edit': function() {
+      pageflow.editor.navigate(this.pageLink().editPath(), {trigger: true});
+      return false;
+    },
+
+    'click .set': function() {
+      var view = this;
+
+      pageflow.editor.selectPage().then(function(page) {
+        view.setTargetPage(page.get('perma_id'));
+      });
+    },
+
+    'click .thumbnail': function () {
+      if (!this.$el.hasClass('editable')) {
+        var pageLink = this.pageLink();
+
+        pageflow.slides.goToByPermaId(pageLink.get('target_page_id'), {
+          transition: pageLink.get('page_transition')
+        });
+      }
+
+      return false;
+    },
+
+    'mousedown': function() {
+      if (this.$el.hasClass('editable') && !this.$el.hasClass('unassigned')) {
+        return false;
+      }
+    }
+  },
+
+  initialize: function() {
+    this.pageLinks = this.model.page.pageLinks();
+  },
+
+  onRender: function() {
+    var view = this;
+
+    this.$el.droppable({
+      tolerance: 'pointer',
+
+      accept: function() {
+        return view.$el.hasClass('editable') && view.$el.hasClass('unassigned');
+      },
+
+      activate: function() {
+        view.$el.addClass('droppable');
+      },
+
+      deactivate: function() {
+        view.$el.removeClass('droppable over');
+      },
+
+      over: function() {
+        view.$el.addClass('over');
+      },
+
+      out: function() {
+        view.$el.removeClass('over');
+      },
+
+      drop: function(event, ui) {
+        view.$el.removeClass('droppable over');
+        view.movePageLinkFrom(ui.draggable.data('referenceKey'));
+      }
+    });
+
+    this.$el.draggable({
+      disabled: true,
+
+      helper: 'clone',
+
+      revert: function(droppable) {
+        if (droppable) {
+          view.resetPageLink();
+        }
+
+        return !droppable;
+      },
+
+      start: function() {
+        view.$el.addClass('dragged');
+      },
+
+      stop: function() {
+        view.$el.removeClass('dragged');
+      },
+
+      revertDuration: 200
+    });
+
+    this.listenTo(this.model.page, 'change:' + 'internal_links_editable', function() {
+      view.updateClassNames();
+      view.updateDraggable();
+      view.options.container.refreshScroller();
+    });
+
+    this.update();
+  },
+
+  update: function() {
+    var targetPage = this.targetPage();
+    var pageLink = this.pageLink();
+
+    this.$el.attr('data-page-transition', pageLink ? pageLink.get('page_transition') : null);
+
+    this.updateTexts();
+    this.updateCurrentPageLink();
+    this.updateThumbnailView();
+    this.updateClassNames();
+    this.updateDraggable();
+  },
+
+  updateCurrentPageLink: function() {
+    var pageLink = this.pageLink();
+
+    if (this.currentPageLink !== pageLink) {
+      if (this.currentPageLink) {
+        this.stopListening(this.currentPageLink, 'change');
+      }
+
+      this.currentPageLink = pageLink;
+
+      if (pageLink) {
+        this.listenTo(pageLink, 'change', function() {
+          this.updateClassNames();
+          this.updateThumbnailView();
+        });
+      }
+    }
+  },
+
+  updateTexts: function() {
+    var targetPage = this.targetPage();
+    var pageLink = this.pageLink();
+
+    if (pageLink && pageLink.get('description')) {
+      this.ui.title.html(pageLink.get('description'));
+    }
+    else {
+      this.ui.title.html(targetPage ? targetPage.configuration.get('description') : '');
+    }
+  },
+
+  updateThumbnailView: function() {
+    var targetPage = this.targetPage();
+
+    if (this.currentLinkedPage !== targetPage) {
+      if (this.currentLinkedPage) {
+        this.stopListening(this.currentLinkedPage, 'change:highlighted');
+        this.stopListening(this.currentLinkedPage.configuration, 'change:description');
+      }
+
+      this.currentLinkedPage = targetPage;
+
+      if (this.thumbnailView) {
+        this.thumbnailView.close();
+      }
+
+      if (targetPage) {
+        this.thumbnailView = this.subview(new pageflow.PageThumbnailView({
+          model: targetPage,
+          imageUrlPropertyName: 'link_thumbnail_url'
+        }));
+
+        this.$el.append(this.thumbnailView.el);
+
+        this.listenTo(targetPage, 'change:highlighted', this.updateClassNames);
+        this.listenTo(targetPage.configuration, 'change:description', this.updateTitle);
+      }
+    }
+  },
+
+  updateClassNames: function() {
+    var editable = this.model.page.get('internal_links_editable');
+    var targetPage = this.targetPage();
+
+    this.$el.toggleClass('title_hover', !editable);
+    this.$el.toggleClass('editable', !!editable);
+    this.$el.toggleClass('empty', !targetPage && !editable);
+    this.$el.toggleClass('no_page', !targetPage);
+    this.$el.toggleClass('unassigned', !this.currentPageLink);
+    this.$el.toggleClass('highlighted', !!(this.currentPageLink && this.currentPageLink.get('highlighted')));
+  },
+
+  updateDraggable: function() {
+    this.$el.draggable('option', 'disabled', !this.$el.hasClass('editable') || this.$el.hasClass('unassigned'));
+  },
+
+  setTargetPage: function(pagePermaId) {
+    this.pageLinks.addWithPosition(this.position(), pagePermaId);
+  },
+
+  movePageLinkFrom: function(position) {
+    this.pageLinks.findByPosition(position).set('position', this.position());
+  },
+
+  resetPageLink: function() {
+    this.pageLinks.removeByPosition(this.position());
+  },
+
+  targetPage: function() {
+    var pageLink = this.pageLink();
+    return pageLink && pageLink.targetPage();
+  },
+
+  pageLink: function() {
+    return this.pageLinks.findByPosition(this.position());
+  },
+
+  position: function() {
+    return this.$el.data('referenceKey');
+  }
+});

data/app/assets/javascripts/pageflow/internal_links/editor/views/list_configuration_editor_view.js

@@ -0,0 +1,29 @@
+pageflow.internalLinks.ListConfigurationEditorView = pageflow.ConfigurationEditorView.extend({
+  configure: function() {
+    this.tab('general', function() {
+      this.group('general');
+    });
+
+    this.tab('files', function() {
+      this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
+      this.input('thumbnail_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        positioning: false
+      });
+    });
+
+    this.tab('links', function() {
+      this.view(pageflow.internalLinks.EditableLinksModeView, {
+        model: this.model.page
+      });
+
+      this.view(pageflow.PageLinksView, {
+        model: this.model.page
+      });
+    });
+
+    this.tab('options', function() {
+      this.group('options');
+    });
+  }
+});

data/app/assets/javascripts/pageflow/internal_links/editor/views/list_embedded_view.js

@@ -0,0 +1,23 @@
+pageflow.internalLinks.ListEmbeddedView = Backbone.Marionette.View.extend({
+  render: function() {
+    this.subview(new pageflow.CollectionView({
+      el: this.$el.find('ul'),
+      collection: this.model.internalLinksList(),
+      itemViewConstructor: pageflow.internalLinks.ListItemEmbeddedView,
+      itemViewOptions: {
+        page: this.model.page
+      }
+    }));
+
+    this.listenTo(this.model.page.pageLinks(), 'add remove', function() {
+      this.refreshScroller();
+    });
+
+    this.refreshScroller();
+
+    return this;
+  },
+
+  refreshScroller: function() {
+  }
+});

data/app/assets/javascripts/pageflow/internal_links/editor/views/list_item_embedded_view.js

@@ -0,0 +1,103 @@
+pageflow.internalLinks.ListItemEmbeddedView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/internal_links/editor/templates/list_item_embedded',
+
+  tagName: 'li',
+
+  modelEvents: {
+    'change': 'update'
+  },
+
+  ui: {
+    description: '.page_description',
+    link: '.page_link'
+  },
+
+  events: {
+    'click .edit': function() {
+      pageflow.editor.navigate(this.model.editPath(), {trigger: true});
+      return false;
+    },
+
+    'click': function() {
+      if (this.$el.hasClass('editable')) {
+        return false;
+      }
+    }
+  },
+
+  onRender: function() {
+    this.listenTo(this.options.page, 'change:internal_links_editable', function() {
+      this.updateClassNames();
+    });
+
+    this.update();
+  },
+
+  update: function() {
+    var targetPage = this.targetPage();
+
+    if (!('currentTargetPage' in this) || this.currentTargetPage !== targetPage) {
+      if (this.currentTargetPage) {
+        this.stopListening(this.currentTargetPage.configuration, 'change:description');
+      }
+
+      this.currentTargetPage = targetPage;
+
+      this.ui.link.attr('data-page', targetPage ? targetPage.get('perma_id') : null);
+
+      this.updateThumbnail();
+
+      if (targetPage) {
+        this.listenTo(targetPage.configuration, 'change:description', this.updateTexts);
+      }
+    }
+
+    this.updatePageTransition();
+    this.updateClassNames();
+    this.updateTexts();
+  },
+
+  updatePageTransition: function() {
+    this.ui.link.attr('data-page-transition', this.model.get('page_transition'));
+  },
+
+  updateTexts: function() {
+    var targetPage = this.targetPage();
+
+    if (this.model.get('description')) {
+      this.ui.description.html(this.model.get('description'));
+    }
+    else {
+      this.ui.description.html(targetPage ? targetPage.configuration.get('description') : '');
+    }
+  },
+
+  updateThumbnail: function() {
+    var targetPage = this.targetPage();
+
+    if (this.thumbnailView) {
+      this.thumbnailView.close();
+    }
+
+    this.thumbnailView = this.subview(new pageflow.PageThumbnailView({
+      model: targetPage,
+      imageUrlPropertyName: 'link_thumbnail_url'
+    }));
+
+    this.ui.link.prepend(this.thumbnailView.el);
+  },
+
+  updateClassNames: function() {
+    var editable = this.options.page.get('internal_links_editable');
+    var targetPage = this.targetPage();
+
+    this.$el.toggleClass('editable', !!editable);
+    this.$el.toggleClass('empty', !targetPage && !editable);
+    this.$el.toggleClass('unassigned', !targetPage);
+    this.$el.toggleClass('highlighted', !!this.model.get('highlighted'));
+  },
+
+  targetPage: function() {
+    return this.model.targetPage();
+  }
+});

data/app/assets/javascripts/pageflow/internal_links/editor/views/page_link_embedded_view.js

@@ -0,0 +1,106 @@
+pageflow.internalLinks.PageLinkEmbeddedView = Backbone.Marionette.ItemView.extend({
+  modelEvents: {
+    'change': 'update'
+  },
+
+  ui: {
+    title: '.title',
+    description: '.description'
+  },
+
+  events: {
+    'click .reset': function() {
+      this.setTargetPage(null);
+    },
+
+    'click .set': function() {
+      var view = this;
+
+      pageflow.editor.selectPage().then(function(page) {
+        view.setTargetPage(page.get('perma_id'));
+      });
+    },
+
+    'click .thumbnail': function () {
+      if (!this.$el.hasClass('editable')) {
+        pageflow.slides.goToById(this.targetPage().id);
+      }
+
+      return false;
+    },
+
+    'mousedown': function() {
+      if (this.$el.hasClass('editable') && !this.$el.hasClass('unassigned')) {
+        return false;
+      }
+    }
+  },
+
+  onRender: function() {
+    var view = this;
+
+    this.listenTo(this.model.page, 'change:' + this.options.propertyName + '_editable', function() {
+      view.updateClassName();
+      view.updateDraggable();
+      view.options.container.refreshScroller();
+    });
+
+    this.update();
+  },
+
+  update: function() {
+    var targetPage = this.targetPage();
+
+    this.$el.data('permaId', targetPage ? targetPage.get('perma_id') : null);
+
+    this.updateTexts();
+    this.updateThumbnailView();
+    this.updateClassNames();
+  },
+
+  updateTexts: function() {
+    var targetPage = this.targetPage();
+
+    this.ui.title.html(targetPage ? targetPage.configuration.get('description') : '');
+  },
+
+  updateThumbnailView: function() {
+    var targetPage = this.targetPage();
+
+    if (this.currentLinkedPage !== targetPage) {
+      if (this.currentLinkedPage) {
+        this.stopListening(this.currentLinkedPage, 'change:highlighted');
+        this.stopListening(this.currentLinkedPage.configuration, 'change:description');
+      }
+
+      this.currentLinkedPage = targetPage;
+
+      if (this.thumbnailView) {
+        this.thumbnailView.close();
+      }
+
+      if (targetPage) {
+        this.thumbnailView = this.subview(new pageflow.PageThumbnailView({
+          model: targetPage,
+          imageUrlPropertyName: 'link_thumbnail_url'
+        }));
+
+        this.$el.append(this.thumbnailView.el);
+
+        this.listenTo(targetPage, 'change:highlighted', this.updateClassName);
+        this.listenTo(targetPage.configuration, 'change:description', this.updateTitle);
+      }
+    }
+  },
+
+  updateClassNames: function() {
+    var editable = this.model.page.get(this.options.propertyName + '_editable');
+    var targetPage = this.targetPage();
+
+    this.$el.toggleClass('title_hover', !editable);
+    this.$el.toggleClass('editable', !!editable);
+    this.$el.toggleClass('empty', !targetPage && !editable);
+    this.$el.toggleClass('unassigned', !targetPage);
+    this.$el.toggleClass('highlighted', !!targetPage && !!targetPage.get('highlighted'));
+  }
+});

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

@@ -0,0 +1,11 @@
+//= require_self
+//= require_tree ./editor/models
+//= require_tree ./editor/collections
+//= require_tree ./editor/templates
+//= require_tree ./editor/views
+//= require_tree ./editor/routers
+//= require_tree ./editor/controllers
+
+//= require ./editor/config
+
+pageflow.internalLinks = pageflow.internalLinks || {};

data/app/assets/javascripts/pageflow/internal_links/grid_page_type.js

@@ -0,0 +1,31 @@
+pageflow.pageType.register('internal_links_grid', _.extend({
+  prepareNextPageTimeout: 0,
+
+  enhance: function(pageElement, configuration) {
+    pageElement.on('click', 'nav .thumbnail', function() {
+      pageflow.slides.goToByPermaId($(this).data('page'), {
+        transition: $(this).data('pageTransition')
+      });
+      return false;
+    });
+  },
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  update: function(pageElement, configuration) {
+    pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
+    pageElement.find('h2 .title').text(configuration.get('title') || '');
+    pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
+    pageElement.find('p').html(configuration.get('text') || '');
+
+    this.updateCommonPageCssClasses(pageElement, configuration);
+
+    pageElement.find('.shadow').css({
+      opacity: configuration.get('gradient_opacity') / 100
+    });
+
+    pageElement.find('nav').attr('data-layout', configuration.get('linked_pages_layout'));
+  }
+}, pageflow.commonPageCssClasses));

data/app/assets/javascripts/pageflow/internal_links/list_page_type.js

@@ -0,0 +1,29 @@
+pageflow.pageType.register('internal_links_list', _.extend({
+  prepareNextPageTimeout: 0,
+
+  enhance: function(pageElement, configuration) {
+    pageElement.on('click', 'nav a[data-page]', function() {
+      pageflow.slides.goToByPermaId($(this).data('page'), {
+        transition: $(this).data('pageTransition')
+      });
+      return false;
+    });
+  },
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  update: function(pageElement, configuration) {
+    pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
+    pageElement.find('h2 .title').text(configuration.get('title') || '');
+    pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
+    pageElement.find('.contentText p').html(configuration.get('text') || '');
+
+    this.updateCommonPageCssClasses(pageElement, configuration);
+
+    pageElement.find('.shadow').css({
+      opacity: configuration.get('gradient_opacity') / 100
+    });
+  }
+}, pageflow.commonPageCssClasses));

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

@@ -0,0 +1,2 @@
+//= require ./internal_links/grid_page_type
+//= require ./internal_links/list_page_type

data/app/assets/stylesheets/pageflow/internal_links/editor/embedded_grid_item.css.scss

@@ -0,0 +1,118 @@
+.page_link_grid li {
+  position: relative;
+  cursor: pointer;
+
+  .placeholder {
+    display: none;
+  }
+
+  .title {
+    pointer-events: none;
+  }
+
+  .edit,
+  .set {
+    @include icon-only-button(white);
+    position: absolute;
+    display: none;
+    z-index: 1;
+    top: 5px;
+    right: 15px;
+    background-color: #fff;
+    border: solid 1px #888;
+  }
+
+  .edit {
+    @include pencil-icon;
+  }
+
+  .set {
+    @include plus-icon;
+  }
+
+  @import "pageflow/editor/file_thumbnails";
+
+  .pictogram {
+    pointer-events: none;
+    background-color: #444;
+    position: absolute !important;
+    bottom: 0;
+  }
+
+  &.editable {
+    cursor: default;
+
+    &:hover .edit {
+      display: block;
+    }
+
+    &.unassigned:hover .set {
+      display: block;
+    }
+
+    &.unassigned {
+      .edit {
+        display: none;
+      }
+    }
+
+    &.no_page {
+      .placeholder {
+        display: block;
+      }
+    }
+
+    %highlight {
+      z-index: 0;
+      position: relative;
+      outline: solid 1px #000;
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        width: 100%;
+        height: 100%;
+        border: solid 1px #fff;
+        @include animation(blink 3s linear infinite);
+        z-index: 1;
+      }
+    }
+  }
+
+  &.droppable %highlight {
+    background-color: rgba(0, 0, 0, 0.3);
+
+    &:before {
+      background-color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  &.editable.highlighted %highlight,
+  &.over %highlight {
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  .placeholder,
+  .thumbnail {
+    @extend %highlight;
+  }
+
+  &.dragged {
+    .thumbnail {
+      background-image: none !important;
+    }
+
+    .pictogram {
+      display: none;
+    }
+  }
+}