pageflow 0.8.2 → 0.9.0

data/app/assets/javascripts/pageflow/editor/views/edit_chapter_view.js

@@ -10,14 +10,34 @@ pageflow.EditChapterView = Backbone.Marionette.Layout.extend({
 
   events: {
     'click a.back': 'goBack',
-    'click a.destroy': 'destroy',
+    'click a.destroy': 'destroy'
   },
 
   onRender: function() {
-    this.formContainer.show(new pageflow.TextInputView({
-      model: this.model,
-      propertyName: 'title'
-    }));
+    var configurationEditor = new pageflow.ConfigurationEditorView({
+      model: this.model.configuration
+    });
+
+    this.configure(configurationEditor);
+    this.formContainer.show(configurationEditor);
+  },
+
+  configure: function(configurationEditor) {
+    var view = this;
+
+    configurationEditor.tab('general', function() {
+      this.input('title', pageflow.TextInputView, {
+        model: view.model
+      });
+
+      if (pageflow.features.isEnabled('chapter_hierachy')) {
+        this.input('parent_page_perma_id', pageflow.PageLinkInputView);
+        this.input('display_parent_page_button', pageflow.CheckBoxInputView);
+        this.input('navigation_bar_mode', pageflow.SelectInputView, {
+          values: pageflow.ChapterFilter.strategies
+        });
+      }
+    });
   },
 
   destroy: function() {

data/app/assets/javascripts/pageflow/editor/views/edit_entry_view.js

@@ -38,6 +38,7 @@ pageflow.EditEntryView = Backbone.Marionette.ItemView.extend({
       collection: this.model.chapters,
       itemViewConstructor: pageflow.NavigatableChapterItemView,
       itemViewOptions: {
+        sortable: true,
         pageItemViewOptions: {
           displayInNavigationHint: true
         }
@@ -52,9 +53,16 @@ pageflow.EditEntryView = Backbone.Marionette.ItemView.extend({
       var item = $('<li><a href="#"></a></li>');
       var link = item.find('a');
 
-      link.data('path', options.path);
+      if (options.path) {
+        link.data('path', options.path);
+      }
       link.text(I18n.t(options.translationKey));
 
+      if (options.click) {
+        $(link).click(options.click);
+      }
+
+
       view.ui.menu.append(item);
     });
   }

data/app/assets/javascripts/pageflow/editor/views/edit_page_view.js

@@ -22,8 +22,7 @@ pageflow.EditPageView = Backbone.Marionette.Layout.extend({
     this.pageTypeContainer.show(new pageflow.ExtendedSelectInputView({
       model: this.model,
       propertyName: 'template',
-
-      collection: pageflow.Page.types,
+      collection: pageflow.editor.pageTypes.pluck('seed'),
       valueProperty: 'name',
       translationKeyProperty: 'translation_key',
       groupTranslationKeyProperty: 'category_translation_key',
@@ -32,7 +31,8 @@ pageflow.EditPageView = Backbone.Marionette.Layout.extend({
       pictogramClass: 'type_pictogram',
 
       helpLinkClicked: function(value) {
-        pageflow.app.trigger('toggle-help', pageflow.Page.typesByName[value].help_entry_translation_key);
+        var pageType = pageflow.editor.pageTypes.findByName(value);
+        pageflow.app.trigger('toggle-help', pageType.seed.help_entry_translation_key);
       }
     }));
 
@@ -41,10 +41,12 @@ pageflow.EditPageView = Backbone.Marionette.Layout.extend({
   },
 
   load: function() {
-    this.configurationContainer.show(pageflow.ConfigurationEditorView.create(this.model.get('template'), {
+    var configurationEditor = this.model.pageType().createConfigurationEditorView({
       model: this.model.configuration,
       tab: this.options.tab
-    }));
+    });
+
+    this.configurationContainer.show(configurationEditor);
   },
 
   destroy: function() {

data/app/assets/javascripts/pageflow/editor/views/edit_widget_view.js

@@ -12,7 +12,7 @@ pageflow.EditWidgetView = Backbone.Marionette.Layout.extend({
   },
 
   onRender: function() {
-    var widgetTypes = this.options.widgetTypes[this.model.role()];
+    var widgetTypes = this.options.widgetTypes[this.model.role()] || [];
 
     this.widgetTypeContainer.show(new pageflow.SelectInputView({
       model: this.model,

data/app/assets/javascripts/pageflow/editor/views/embedded/background_image_embedded_view.js

@@ -31,7 +31,10 @@ pageflow.BackgroundImageEmbeddedView = Backbone.Marionette.View.extend({
   },
 
   imageValue: function() {
-    var url = this.model.getImageFileUrl(this.options.propertyName);
+    var url = this.model.getImageFileUrl(this.options.propertyName, {
+      styleGroup: this.$el.data('styleGroup')
+    });
+
     return url ? 'url("' + url  + '")' : 'none';
   }
 });

data/app/assets/javascripts/pageflow/editor/views/embedded/lazy_video_embedded_view.js

@@ -0,0 +1,41 @@
+pageflow.LazyVideoEmbeddedView = Backbone.Marionette.View.extend({
+  modelEvents: {
+    'change': 'update'
+  },
+
+  render: function() {
+    this.videoPlayer = this.$el.data('videoPlayer');
+
+    this.videoPlayer.ready(_.bind(function() {
+      this.videoPlayer.src(this.model.getVideoFileSources(this.options.propertyName));
+    }, this));
+
+    this.update();
+    return this;
+  },
+
+  update: function() {
+    if (this.videoPlayer.isPresent() && this.model.hasChanged(this.options.propertyName)) {
+      var paused = this.videoPlayer.paused();
+
+      this.videoPlayer.src(this.model.getVideoFileSources(this.options.propertyName));
+
+      if (!paused) {
+        this.videoPlayer.play();
+      }
+    }
+
+    if (this.options.dataSizeAttributes) {
+      var videoFile = this.model.getVideoFile(this.options.propertyName);
+
+      if (videoFile && videoFile.isReady()) {
+        this.$el.attr('data-width', videoFile.get('width'));
+        this.$el.attr('data-height', videoFile.get('height'));
+      }
+      else {
+        this.$el.attr('data-width', '16');
+        this.$el.attr('data-height', '9');
+      }
+    }
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/entry_preview_view.js

@@ -20,10 +20,7 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
       blankSlateViewConstructor: pageflow.BlankEntryView
     }));
 
-    this.ui.entry.append($('<div class="scroll_indicator indicator">' +
-                           I18n.t('pageflow.editor.views.entry_preview_view.scroll_hint',
-                                  {locale: this.model.configuration.get('locale') }) +
-                           '</div>'));
+    this.ui.entry.append($('#indicators_seed > *'));
 
     this.update();
 
@@ -41,8 +38,11 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
   },
 
   onShow: function() {
-    var slideshow = pageflow.slides =  new pageflow.Slideshow(this.ui.entry);
-    slideshow.update();
+    var slideshow = pageflow.Slideshow.setup({
+      element: this.ui.entry,
+      enabledFeatureNames: pageflow.entry.get('enabled_feature_names'),
+      simulateHistory: true
+    });
 
     this.listenTo(this.model.pages, 'add', function() {
       slideshow.update();

data/app/assets/javascripts/pageflow/editor/views/inputs/page_link_input_view.js

@@ -0,0 +1,9 @@
+pageflow.PageLinkInputView = pageflow.ReferenceInputView.extend({
+  choose: function() {
+    return pageflow.editor.selectPage();
+  },
+
+  getTarget: function(permaId) {
+    return pageflow.pages.getByPermaId(permaId);
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/inputs/reference_input_view.js

@@ -0,0 +1,66 @@
+pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend({
+  mixins: [pageflow.inputView],
+
+  template: 'pageflow/editor/templates/inputs/reference',
+  className: 'reference_input',
+
+  ui: {
+    title: '.title',
+    unsetButton: '.unset'
+  },
+
+  events: {
+    'click .choose': function() {
+      var view = this;
+
+      this.choose().then(function(site) {
+        view.model.set(view.options.propertyName, site.get('perma_id'));
+      });
+
+      return false;
+    },
+
+    'click .unset': function() {
+      this.model.unset(this.options.propertyName);
+      return false;
+    }
+  },
+
+  initialize: function() {
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.update);
+  },
+
+  onRender: function() {
+    this.update();
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.update);
+  },
+
+  choose: function() {
+    throw 'Not implemented: Override ReferenceInputView#choose to return a promise';
+  },
+
+  getTarget: function() {
+    throw 'Not implemented: Override ReferenceInputView#getTarget';
+  },
+
+  createThumbnailView: function(target) {
+    return new pageflow.ModelThumbnailView({
+      model: target
+    });
+  },
+
+  update: function() {
+    var target = this.getTarget(this.model.get(this.options.propertyName));
+
+    this.ui.title.text(target ? target.title() : I18n.t('pageflow.editor.views.inputs.reference_input_view.none'));
+    this.ui.unsetButton.toggle(!!target);
+
+    if (this.thumbnailView) {
+      this.thumbnailView.close();
+    }
+
+    this.thumbnailView = this.subview(this.createThumbnailView(target));
+
+    this.ui.title.before(this.thumbnailView.el);
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/list_item_view.js

@@ -0,0 +1,95 @@
+/** @api private */
+pageflow.ListItemView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/editor/templates/list_item',
+
+  tagName: 'li',
+  className: 'list_item',
+
+  ui: {
+    thumbnail: '.list_item_thumbnail',
+    typePictogram: '.list_item_type_pictogram',
+    title: '.list_item_title',
+    description: '.list_item_description',
+    editButton: '.list_item_edit_button',
+    removeButton: '.list_item_remove_button'
+  },
+
+  events: {
+    'click .list_item_edit_button': function() {
+      this.options.onEdit(this.model);
+      return false;
+    },
+
+    'click .list_item_remove_button': function() {
+      this.options.onRemove(this.model);
+      return false;
+    },
+
+    'mouseenter': function() {
+      if (this.options.highlight) {
+        this.model.highlight();
+      }
+    },
+
+    'mouseleave': function() {
+      if (this.options.highlight) {
+        this.model.resetHighlight();
+      }
+    }
+  },
+
+  modelEvents: {
+    'change': 'update'
+  },
+
+  onRender: function() {
+    this.subview(new pageflow.ModelThumbnailView({
+      el: this.ui.thumbnail,
+      model: this.model
+    }));
+
+    if (this.options.typeName) {
+      this.$el.addClass(this.typeName());
+    }
+
+    this.ui.editButton.toggleClass('is_available', !!this.options.onEdit);
+    this.ui.removeButton.toggleClass('is_available', !!this.options.onRemove);
+
+    this.update();
+  },
+
+  update: function() {
+    this.ui.typePictogram.attr('title', this.typeDescription());
+
+    this.ui.title.text(this.model.title() || I18n.t('pageflow.editor.views.page_link_item_view.unnamed'));
+
+    this.ui.description.text(this.description());
+    this.ui.description.toggle(!!this.description());
+
+    this.$el.toggleClass('is_invalid', !!this.getOptionResult('isInvalid'));
+  },
+
+  onClose: function() {
+    if (this.options.highlight) {
+      this.model.resetHighlight();
+    }
+  },
+
+  description: function() {
+    return this.getOptionResult('description');
+  },
+
+  typeName: function() {
+    return this.getOptionResult('typeName');
+  },
+
+  typeDescription: function() {
+    return this.getOptionResult('typeDescription');
+  },
+
+  getOptionResult: function(name) {
+    return typeof this.options[name]  === 'function' ?
+      this.options[name](this.model) :
+      this.options[name];
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/list_view.js

@@ -0,0 +1,59 @@
+/**
+ * A generic list view with items consisting of a thumbnail, text and
+ * possibly some buttons or a navigation arrow.
+ *
+ * Models inside the collection must implement the following methods:
+ *
+ * - `title` - A text for the list item.
+ * - `thumbnailFile` - The file to use as thumbnail for the list item.
+ *
+ * @option collection [Backbone.Collection]
+ * @option highlight [Boolean]
+ * @option sortable [Boolean]
+ * @option label [String]
+ * @option itemDescription [String|Function]
+ * @option itemTypeName [String|Function]
+ * @option itemTypeDescription [String|Function]
+ * @option itemIsInvalid [String|Function]
+ * @option onEdit [Function]
+ * @option onRemove [Function]
+ */
+pageflow.ListView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/editor/templates/list',
+  className: 'list',
+
+  ui: {
+    label: '.list_label',
+    items: '.list_items'
+  },
+
+  onRender: function() {
+    var collectionViewConstructor = this.options.sortable ?
+      pageflow.SortableCollectionView :
+      pageflow.CollectionView;
+
+    this.subview(new collectionViewConstructor({
+      el: this.ui.items,
+      collection: this.collection,
+
+      itemViewConstructor: pageflow.ListItemView,
+
+      itemViewOptions: _.extend({
+        description: this.options.itemDescription,
+        typeName: this.options.itemTypeName,
+        typeDescription: this.options.itemTypeDescription,
+        isInvalid: this.options.itemIsInvalid
+      }, _(this.options).pick('onEdit', 'onDelete', 'highlight')),
+
+      blankSlateViewConstructor: Backbone.Marionette.ItemView.extend({
+        tagName: 'li',
+        className: 'list_blank_slate',
+        template: 'pageflow/editor/templates/list_blank_slate'
+      })
+    }));
+
+    this.ui.label.text(this.options.label);
+
+    this.$el.toggleClass('with_type_pictogram', !!this.options.itemTypeName);
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/loading_view.js

@@ -0,0 +1,5 @@
+pageflow.LoadingView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/editor/templates/loading',
+  className: 'loading',
+  tagName: 'li'
+});

data/app/assets/javascripts/pageflow/editor/views/model_thumbnail_view.js

@@ -0,0 +1,37 @@
+/**
+ * Base thumbnail view for models supporting a `thumbnailFile` method.
+ */
+pageflow.ModelThumbnailView = Backbone.Marionette.View.extend({
+  className: 'model_thumbnail',
+
+  modelEvents: {
+    'change:configuration': 'update'
+  },
+
+  render: function() {
+    this.update();
+    return this;
+  },
+
+  update: function() {
+    var file = this.model && this.model.thumbnailFile();
+
+    if (this.fileThumbnailView && this.currentFileThumbnail == file) {
+      return;
+    }
+
+    this.currentFileThumbnail = file;
+
+    if (this.fileThumbnailView) {
+      this.fileThumbnailView.close();
+    }
+
+    this.fileThumbnailView = this.subview(new pageflow.FileThumbnailView({
+      model: file,
+      className: 'thumbnail file_thumbnail',
+      imageUrlPropertyName: this.options.imageUrlPropertyName
+    }));
+
+    this.$el.append(this.fileThumbnailView.el);
+  }
+});