pageflow 0.11.4 → 12.0.0.rc1

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

@@ -24,6 +24,9 @@ pageflow.HelpView = Backbone.Marionette.ItemView.extend({
         this.showSection(link.attr('href').substring(1),
                          {scrollIntoView: !link.parents('nav').length});
       }
+      else if (link.attr('href').match(/^http/)) {
+        window.open(link.attr('href'), '_blank');
+      }
 
       return false;
     },

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

@@ -0,0 +1,217 @@
+/**
+ * Input view to reference a file.
+ *
+ * @class
+ * @memberof module:pageflow/editor
+ */
+pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
+  mixins: [pageflow.inputView],
+
+  template: 'pageflow/editor/templates/inputs/file_input',
+  className: 'file_input',
+
+  ui: {
+    fileName: '.file_name',
+    thumbnail: '.file_thumbnail'
+  },
+
+  events: {
+    'click .choose': function() {
+      pageflow.editor.selectFile(
+        {
+          name: this.options.collection.name,
+          filter: this.options.filter
+        },
+        this.options.fileSelectionHandler || 'pageConfiguration',
+        _.extend({
+          id: this.model.getRoutableId ? this.model.getRoutableId() : this.model.id,
+          attributeName: this.options.propertyName,
+          returnToTab: this.options.parentTab
+        }, this.options.fileSelectionHandlerOptions || {})
+      );
+
+      return false;
+    },
+
+    'click .unset': function() {
+      this.model.unsetReference(this.options.propertyName);
+      return false;
+    }
+  },
+
+  initialize: function() {
+    this.options = _.extend({
+      positioning: true,
+      textTrackFiles: pageflow.textTrackFiles
+    }, this.options);
+
+    if (typeof this.options.collection === 'string') {
+      this.options.collection = pageflow.entry.getFileCollection(
+        pageflow.editor.fileTypes.findByCollectionName(this.options.collection)
+      );
+    }
+
+    this.textTrackMenuItems = new Backbone.Collection();
+  },
+
+  onRender: function() {
+    this.update();
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.update);
+
+    var dropDownMenuItems = this._dropDownMenuItems();
+
+    if (dropDownMenuItems.length) {
+      this.appendSubview(new pageflow.DropDownButtonView({
+        items: dropDownMenuItems
+      }));
+    }
+  },
+
+  update: function() {
+    var file = this._getFile();
+
+    this._listenToNestedTextTrackFiles(file);
+
+    this.$el.toggleClass('is_unset', !file);
+    this.ui.fileName.text(file ?
+                          file.get('file_name') :
+                          I18n.t('pageflow.ui.views.inputs.file_input_view.none'));
+
+    this.subview(new pageflow.FileThumbnailView({
+      el: this.ui.thumbnail,
+      model: file
+    }));
+  },
+
+  _dropDownMenuItems: function() {
+    var file = this._getFile(file);
+    var items = new Backbone.Collection();
+
+    if (this.options.defaultTextTrackFilePropertyName && file) {
+      items.add({
+        name: 'default_text_track',
+        label: I18n.t('pageflow.editor.views.inputs.file_input.default_text_track'),
+        items: this.textTrackMenuItems
+      });
+    }
+
+    if (this.options.positioning && file && file.isPositionable()) {
+      items.add(new pageflow.FileInputView.EditBackgroundPositioningMenuItem({
+        name: 'edit_background_positioning',
+        label: I18n.t('pageflow.editor.views.inputs.file_input.edit_background_positioning')
+      }, {
+        inputModel: this.model,
+        propertyName: this.options.propertyName,
+        filesCollection: this.options.collection
+      }));
+    }
+
+    if (file) {
+      items.add(new pageflow.FileInputView.EditFileSettingsMenuItem({
+        name: 'edit_file_settings',
+        label: I18n.t('pageflow.editor.views.inputs.file_input.edit_file_settings')
+      }, {
+        file: file,
+      }));
+    }
+
+    return items;
+  },
+
+  _listenToNestedTextTrackFiles: function(file) {
+    if (this.textTrackFiles) {
+      this.stopListening(this.textTrackFiles);
+      this.textTrackFiles = null;
+    }
+
+    if (file && this.options.defaultTextTrackFilePropertyName) {
+      this.textTrackFiles = file.nestedFiles(this.options.textTrackFiles);
+
+      this.listenTo(this.textTrackFiles, 'add remove', this._updateTextTrackMenuItems);
+      this._updateTextTrackMenuItems();
+    }
+  },
+
+  _updateTextTrackMenuItems: function update() {
+    var models = [null].concat(this.textTrackFiles.toArray());
+
+    this.textTrackMenuItems.set(models.map(function(textTrackFile) {
+      return new pageflow.FileInputView.DefaultTextTrackFileMenuItem({}, {
+        textTrackFiles: this.textTrackFiles,
+        textTrackFile: textTrackFile,
+        inputModel: this.model,
+        propertyName: this.options.defaultTextTrackFilePropertyName
+      });
+    }, this));
+  },
+
+  _getFile: function() {
+    return this.model.getReference(this.options.propertyName, this.options.collection);
+  }
+});
+
+pageflow.FileInputView.EditBackgroundPositioningMenuItem = Backbone.Model.extend({
+  initialize: function(attributes, options) {
+    this.options = options;
+  },
+
+  selected: function() {
+    pageflow.BackgroundPositioningView.open({
+      model: this.options.inputModel,
+      propertyName: this.options.propertyName,
+      filesCollection: this.options.filesCollection
+    });
+  }
+});
+
+pageflow.FileInputView.EditFileSettingsMenuItem = Backbone.Model.extend({
+  initialize: function(attributes, options) {
+    this.options = options;
+  },
+
+  selected: function() {
+    pageflow.FileSettingsDialogView.open({
+      model: this.options.file
+    });
+  }
+});
+
+pageflow.FileInputView.DefaultTextTrackFileMenuItem = Backbone.Model.extend({
+  initialize: function(attributes, options) {
+    this.options = options;
+
+    this.listenTo(this.options.inputModel, 'change:' + this.options.propertyName, this.update);
+
+    if (this.options.textTrackFile) {
+      this.listenTo(this.options.textTrackFile, 'change:configuration', this.update);
+    }
+
+    this.update();
+  },
+
+  update: function() {
+    this.set('checked', this.options.textTrackFile == this.getDefaultTextTrackFile());
+    this.set('name', this.options.textTrackFile ? null : 'no_default_text_track');
+    this.set('label', this.options.textTrackFile ?
+             this.options.textTrackFile.displayLabel() :
+             this.options.textTrackFiles.length ?
+             I18n.t('pageflow.editor.views.inputs.file_input.auto_default_text_track') :
+             I18n.t('pageflow.editor.views.inputs.file_input.no_default_text_track'));
+  },
+
+  selected: function() {
+    if (this.options.textTrackFile) {
+      this.options.inputModel.setReference(this.options.propertyName, this.options.textTrackFile);
+    }
+    else {
+      this.options.inputModel.unsetReference(this.options.propertyName);
+    }
+  },
+
+  getDefaultTextTrackFile: function() {
+    return this.options.inputModel.getReference(
+      this.options.propertyName,
+      this.options.textTrackFiles
+    );
+  }
+});

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

@@ -1,3 +1,9 @@
+/**
+ * Input view to reference a page.
+ *
+ * @class
+ * @memberof module:pageflow/editor
+ */
 pageflow.PageLinkInputView = pageflow.ReferenceInputView.extend({
   choose: function() {
     return pageflow.editor.selectPage({

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

@@ -1,4 +1,12 @@
-pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend({
+/**
+ * Base class for input views that reference models.
+ *
+ * @class
+ * @memberof module:pageflow/editor
+ */
+pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend(
+/** @lends module:pageflow/editor.pageflow.ReferenceInputView# */{
+
   mixins: [pageflow.inputView],
 
   template: 'pageflow/editor/templates/inputs/reference',
@@ -6,7 +14,8 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend({
 
   ui: {
     title: '.title',
-    unsetButton: '.unset'
+    unsetButton: '.unset',
+    buttons: 'button'
   },
 
   events: {
@@ -55,6 +64,8 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend({
     this.ui.title.text(target ? target.title() : I18n.t('pageflow.editor.views.inputs.reference_input_view.none'));
     this.ui.unsetButton.toggle(!!target);
 
+    this.updateDisabledAttribute(this.ui.buttons);
+
     if (this.thumbnailView) {
       this.thumbnailView.close();
     }

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

@@ -4,19 +4,29 @@
  *
  * 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]
+ * @param {Backbone.Collection} options.collection
+ *
+ * @param {string} options.label
+ *   Text of the label to display above the list.
+ *
+ * @param {boolean} [options.highlight=false]
+ *
+ * @param {boolean} [options.sortable=false]
+ *
+ * @param {string|function} [options.itemDescription]
+ *
+ * @param {string|function} [options.itemTypeName]
+ *
+ * @param {string|function} [options.itemTypeDescription]
+ *
+ * @param {string|function} [options.itemIsInvalid]
+ *
+ * @param {function} [options.onEdit]
+ *
+ * @param {function} [options.onRemove]
+ *
+ * @class
+ * @memberof module:pageflow/editor
  */
 pageflow.ListView = Backbone.Marionette.ItemView.extend({
   template: 'pageflow/editor/templates/list',
@@ -56,4 +66,4 @@ pageflow.ListView = Backbone.Marionette.ItemView.extend({
 
     this.$el.toggleClass('with_type_pictogram', !!this.options.itemTypeName);
   }
-});
+});

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

@@ -1,5 +1,8 @@
 /**
  * Base thumbnail view for models supporting a `thumbnailFile` method.
+ *
+ * @class
+ * @memberof module:pageflow/editor
  */
 pageflow.ModelThumbnailView = Backbone.Marionette.View.extend({
   className: 'model_thumbnail',
@@ -34,4 +37,4 @@ pageflow.ModelThumbnailView = Backbone.Marionette.View.extend({
 
     this.$el.append(this.fileThumbnailView.el);
   }
-});
+});

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

@@ -0,0 +1,94 @@
+pageflow.NestedFilesView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/nested_files',
+
+  className: 'nested_files',
+
+  ui: {
+    header: 'h2'
+  },
+
+  initialize: function() {
+    if (!this.options.selection.has('file')) {
+      this.options.selection.set('file', this.collection.first());
+      this.options.selection.set('nextFile', this.collection.at(1));
+    }
+
+    this.listenTo(this.collection, 'add', this.selectNewFile);
+    this.listenTo(this.collection, 'remove', this.selectNextFileIfSelectionDeleted);
+    this.listenTo(this.options.selection, 'change', this.setNextFile);
+    this.listenTo(this.collection, 'add', this.update);
+    this.listenTo(this.collection, 'remove', this.update);
+    this.listenTo(this.collection, 'request', this.update);
+    this.listenTo(this.collection, 'sync', this.update);
+  },
+
+  onRender: function() {
+    this.ui.header.text(
+      this.collection.parentModel.get('file_name')
+    );
+
+    this.appendSubview(new pageflow.TableView({
+      collection: this.collection,
+      attributeTranslationKeyPrefixes: [
+        'pageflow.editor.nested_files.' + this.options.fileType.collectionName
+      ],
+      columns: this.columns(this.options.fileType),
+      selection: this.options.selection,
+      selectionAttribute: 'file',
+      blankSlateText: this.options.tableBlankSlateText
+    }));
+
+    this.update();
+  },
+
+  update: function() {
+    this.$el.toggleClass('is_empty', this.collection.length === 0);
+  },
+
+  columns: function(fileType) {
+    var nestedFilesColumns = _(fileType.nestedFileTableColumns).map(function(column) {
+      return _.extend({}, column, {
+        configurationAttribute: true
+      });
+    });
+
+    nestedFilesColumns.push({
+      name: 'delete',
+      cellView: pageflow.DeleteRowTableCellView,
+      cellViewOptions: {
+        toggleDeleteButton: 'isUploading',
+        invertToggleDeleteButton: true
+      }
+    });
+
+    return nestedFilesColumns;
+  },
+
+  selectNewFile: function(file) {
+    this.options.selection.set('file', file);
+    this.setNextFile();
+  },
+
+  selectNextFileIfSelectionDeleted: function() {
+    var fileIndex = this.collection.indexOf(this.options.selection.get('file'));
+    if (fileIndex === -1)
+    {
+      var nextFile = this.options.selection.get('nextFile');
+      this.options.selection.set('file', nextFile);
+    }
+  },
+
+  setNextFile: _.debounce(function() {
+    var fileIndex = this.collection.indexOf(this.options.selection.get('file'));
+
+    if (typeof(this.collection.at(fileIndex + 1)) !== 'undefined') {
+      this.options.selection.set('nextFile', this.collection.at(fileIndex + 1));
+    }
+    else if (typeof(this.collection.at(fileIndex - 1)) !== 'undefined') {
+      this.options.selection.set('nextFile', this.collection.at(fileIndex - 1));
+    }
+    else {
+      this.options.selection.set('nextFile', undefined);
+    }
+  }, 200)
+});

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

@@ -47,13 +47,18 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     return this;
   },
 
-  updateTemplate: function() {
+  onClose: function() {
     this.$el.page('cleanup');
+  },
 
+  updateTemplate: function() {
+    this.$el.page('cleanup');
     this.$el.html(this.pageTemplate());
     this.$el.data('template', this.model.get('template'));
 
-    this.$el.page('reinit');
+    setTimeout(_.bind(function() {
+      this.$el.page('reinit');
+    }, this), 0);
   },
 
   update: function() {