pageflow 0.11.4 → 12.0.0.rc1

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/background_image.js

@@ -5,7 +5,8 @@ pageflow.ConfigurationEditorView.register('background_image', {
     });
 
     this.tab('files', function() {
-      this.input('background_image_id', pageflow.FileInputView, {collection: pageflow.imageFiles});
+      this.group('background');
+
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
         positioning: false
@@ -16,4 +17,4 @@ pageflow.ConfigurationEditorView.register('background_image', {
       this.group('options');
     });
   }
-});
+});

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/groups/background.js

@@ -0,0 +1,35 @@
+pageflow.ConfigurationEditorTabView.groups.define('background', function(options) {
+  options = options || {};
+
+  var prefix = options.propertyNamePrefix ? options.propertyNamePrefix + '_' : '';
+  var backgroundTypeProperty = prefix + 'background_type';
+
+  this.input(backgroundTypeProperty, pageflow.SelectInputView, {
+    values: ['image', 'video'],
+    ensureValueDefined: true
+  });
+  this.input(prefix + 'background_image_id', pageflow.FileInputView, {
+    collection: pageflow.imageFiles,
+    visibleBinding: backgroundTypeProperty,
+    visibleBindingValue: 'image',
+    fileSelectionHandlerOptions: options
+  });
+  this.input(prefix + 'video_file_id', pageflow.FileInputView, {
+    collection: pageflow.videoFiles,
+    visibleBinding: backgroundTypeProperty,
+    visibleBindingValue: 'video',
+    fileSelectionHandlerOptions: options
+  });
+  this.input(prefix + 'poster_image_id', pageflow.FileInputView, {
+    collection: pageflow.imageFiles,
+    visibleBinding: backgroundTypeProperty,
+    visibleBindingValue: 'video',
+    fileSelectionHandlerOptions: options
+  });
+  this.input(prefix + 'mobile_poster_image_id', pageflow.FileInputView, {
+    collection: pageflow.imageFiles,
+    visibleBinding: backgroundTypeProperty,
+    visibleBindingValue: 'video',
+    fileSelectionHandlerOptions: options
+  });
+});

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/groups/options.js

@@ -13,16 +13,14 @@ pageflow.ConfigurationEditorTabView.groups.define('options', function(options) {
 
   this.input('description', pageflow.TextAreaInputView, {size: 'short', disableLinks: true});
 
-  if (pageflow.features.isEnabled('atmo')) {
-    this.input('atmo_audio_file_id', pageflow.FileInputView, {
-      collection: pageflow.audioFiles
-    });
+  this.input('atmo_audio_file_id', pageflow.FileInputView, {
+    collection: pageflow.audioFiles
+  });
 
-    if (options.canPauseAtmo) {
-      this.input('atmo_during_playback', pageflow.SelectInputView, {
-        values: pageflow.Atmo.duringPlaybackModes
-      });
-    }
+  if (options.canPauseAtmo) {
+    this.input('atmo_during_playback', pageflow.SelectInputView, {
+      values: pageflow.Atmo.duringPlaybackModes
+    });
   }
 
   if (pageflow.theming.supportsScrollIndicatorModes()) {

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/video.js

@@ -10,19 +10,20 @@ pageflow.ConfigurationEditorView.register('video', {
     this.tab('files', function() {
       this.input('video_file_id', pageflow.FileInputView, {
         collection: pageflow.videoFiles,
-        positioning: false
+        positioning: false,
+        defaultTextTrackFilePropertyName: 'default_text_track_file_id'
       });
       this.input('poster_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        positioning: false
+        positioning: false,
       });
-      this.input('thumbnail_image_id', pageflow.FileInputView, {
+      this.input('mobile_poster_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
         positioning: false
       });
-      this.input('mobile_poster_image_id', pageflow.FileInputView, {
+      this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        imagePositioning: false
+        positioning: false
       });
     });
 

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

@@ -0,0 +1,69 @@
+pageflow.ConfirmUploadView = Backbone.Marionette.Layout.extend({
+  template: 'templates/confirm_upload',
+  className: 'confirm_upload editor dialog',
+
+  mixins: [pageflow.dialogView],
+
+  regions: {
+    selectedFileRegion: '.selected_file_region'
+  },
+
+  ui: {
+    filesPanel: '.files_panel',
+  },
+
+  events: {
+    'click .upload': function() {
+      this.options.fileUploader.submit();
+      this.close();
+    }
+  },
+
+  initialize: function() {
+    this.selection = new Backbone.Model();
+    this.listenTo(this.selection, 'change', this.update);
+  },
+
+  onRender: function() {
+    this.options.fileTypes.each(function(fileType) {
+      this.ui.filesPanel.append(this.subview(new pageflow.UploadableFilesView({
+        collection: this.options.files[fileType.collectionName],
+        fileType: fileType,
+        selection: this.selection
+      })).el);
+    }, this);
+
+    this.update();
+  },
+
+  onClose: function() {
+    this.options.fileUploader.abort();
+  },
+
+  update: function() {
+    var file = this.selection.get('file');
+
+    if (file) {
+      this.selectedFileRegion.show(new pageflow.EditFileView({
+        model: file
+      }));
+    }
+    else {
+      this.selectedFileRegion.close();
+    }
+  }
+});
+
+pageflow.ConfirmUploadView.watch = function(fileUploader, fileTypes, files) {
+  fileUploader.on('new:batch', function() {
+    pageflow.ConfirmUploadView.open({
+      fileUploader: fileUploader,
+      fileTypes: fileTypes,
+      files: files
+    });
+  });
+};
+
+pageflow.ConfirmUploadView.open = function(options) {
+  pageflow.app.dialogRegion.show(new pageflow.ConfirmUploadView(options));
+};

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

@@ -28,7 +28,7 @@ pageflow.ConfirmableFileItemView = Backbone.Marionette.ItemView.extend({
 
   destroy: function() {
     if (confirm("Datei wirklich wirklich löschen?")) {
-      this.model.destroyUsage();
+      this.model.destroy();
     }
   },
 

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

@@ -0,0 +1,9 @@
+/** @api private */
+pageflow.DropDownButtonItemListView = function(options) {
+  return new pageflow.CollectionView({
+    tagName: 'ul',
+    className: 'drop_down_button_items',
+    collection: options.items,
+    itemViewConstructor: pageflow.DropDownButtonItemView
+  });
+};

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

@@ -5,7 +5,8 @@ pageflow.DropDownButtonItemView = Backbone.Marionette.ItemView.extend({
   className: 'drop_down_button_item',
 
   ui: {
-    link: '> a'
+    link: '> a',
+    label: '> .label'
   },
 
   events: {
@@ -24,10 +25,22 @@ pageflow.DropDownButtonItemView = Backbone.Marionette.ItemView.extend({
 
   onRender: function() {
     this.update();
+
+    if (this.model.get('items')) {
+      this.appendSubview(new pageflow.DropDownButtonItemListView({
+        items: this.model.get('items')
+      }));
+    }
   },
 
   update: function() {
     this.ui.link.text(this.model.get('label'));
+    this.ui.label.text(this.model.get('label'));
+
+    this.$el.toggleClass('is_selectable', !!this.model.selected);
     this.$el.toggleClass('is_disabled', !!this.model.get('disabled'));
+    this.$el.toggleClass('is_checked', !!this.model.get('checked'));
+
+    this.$el.data('name', this.model.get('name'));
   }
 });

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

@@ -1,11 +1,28 @@
 /**
  * A button that displays a drop down menu on hover.
  *
- * @option label [String]
- * @options items [Backbone.Collection] The `label` attribute is used
- *   as text for the item. Items can be disabled by setting the
- *   `disabled` property to `true`. On click a `selected` method is
- *   called on the item model.
+ * @param {String} options.label
+ *   Button text.
+ *
+ * @param {Backbone.Collection} options.items
+ *   Collection of menu items. See below for supported attributes.
+ *
+ * ## Item Models
+ *
+ * The following model attributes can be used to control the
+ * appearance of a menu item:
+ *
+ * - `name` - A name for the menu item which is not displayed.
+ * - `label` - Used as menu item label.
+ * - `disabled` - Make the menu item inactive.
+ * - `checked` - Display a check mark in front of the item
+ * - `items` - A Backbone collection of nested menu items.
+ *
+ * If the menu item model provdised a `selected` method, it is called
+ * when the menu item is clicked.
+ *
+ * @class
+ * @memberof module:pageflow/editor
  */
 pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
   template: 'pageflow/editor/templates/drop_down_button',
@@ -13,8 +30,7 @@ pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
 
   ui: {
     button: '> button',
-    menu: '.drop_down_button_menu',
-    items: '.drop_down_button_items'
+    menu: '.drop_down_button_menu'
   },
 
   events: {
@@ -24,20 +40,21 @@ pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
     },
 
     'mouseleave': function() {
-      this.hideMenu();
+      this.scheduleHideMenu();
     }
   },
 
   onRender: function() {
     var view = this;
 
+    this.ui.button.toggleClass('has_icon_and_text', !!this.options.label);
+    this.ui.button.toggleClass('has_icon_only', !this.options.label);
+
     this.ui.button.text(this.options.label);
 
-    this.subview(new pageflow.CollectionView({
-      el: this.ui.items,
-      collection: this.options.items,
-      itemViewConstructor: pageflow.DropDownButtonItemView
-    }));
+    this.ui.menu.append(this.subview(new pageflow.DropDownButtonItemListView({
+      items: this.options.items
+    })).el);
 
     this.ui.menu.on({
       'mouseenter': function() {
@@ -45,7 +62,7 @@ pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
       },
 
       'mouseleave': function() {
-        view.hideMenu();
+        view.scheduleHideMenu();
       }
     });
 
@@ -66,15 +83,29 @@ pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
   },
 
   showMenu: function() {
+    this.ensureOnlyOneDropDownButtonShowsMenu();
+
     clearTimeout(this.hideMenuTimeout);
     this.ui.menu.addClass('is_visible');
   },
 
+  ensureOnlyOneDropDownButtonShowsMenu: function() {
+    if (pageflow.DropDownButtonView.currentlyShowingMenu) {
+      pageflow.DropDownButtonView.currentlyShowingMenu.hideMenu();
+    }
+
+    pageflow.DropDownButtonView.currentlyShowingMenu = this;
+  },
+
   hideMenu: function() {
-    this.hideMenuTimeout = setTimeout(_.bind(function() {
-      if (!this.isClosed) {
-        this.ui.menu.removeClass('is_visible');
-      }
-    }, this), 500);
+    clearTimeout(this.hideMenuTimeout);
+
+    if (!this.isClosed) {
+      this.ui.menu.removeClass('is_visible');
+    }
+  },
+
+  scheduleHideMenu: function() {
+    this.hideMenuTimeout = setTimeout(_.bind(this.hideMenu, this), 300);
   }
-});
+});

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

@@ -1,9 +1,10 @@
 pageflow.EditEntryView = Backbone.Marionette.ItemView.extend({
   template: 'templates/edit_entry',
 
-  mixins: [pageflow.failureIndicatingView],
+  mixins: [pageflow.failureIndicatingView, pageflow.tooltipContainer],
 
   ui: {
+    publishButton: 'a.publish',
     publicationStateButton: 'a.publication_state',
     menu: '.menu',
     storylines: '.edit_entry_storylines'
@@ -17,7 +18,10 @@ pageflow.EditEntryView = Backbone.Marionette.ItemView.extend({
     },
 
     'click a.publish': function() {
-      editor.navigate('/publish', {trigger: true});
+      if (!this.ui.publishButton.hasClass('disabled')) {
+        editor.navigate('/publish', {trigger: true});
+      }
+
       return false;
     },
 
@@ -29,6 +33,7 @@ pageflow.EditEntryView = Backbone.Marionette.ItemView.extend({
 
   onRender: function() {
     this._addMenuItems();
+    this._updatePublishButton();
 
     this.subview(new pageflow.StorylinePickerView({
       el: this.ui.storylines,
@@ -40,6 +45,20 @@ pageflow.EditEntryView = Backbone.Marionette.ItemView.extend({
     }));
   },
 
+  _updatePublishButton: function() {
+    var disabled = !pageflow.entry.get('publishable');
+
+    this.ui.publishButton.toggleClass('disabled', disabled);
+
+    if (disabled) {
+      this.ui.publishButton.attr('data-tooltip',
+                                 'pageflow.editor.views.edit_entry_view.cannot_publish');
+    }
+    else {
+      this.ui.publishButton.removeAttr('data-tooltip');
+    }
+  },
+
   _addMenuItems: function() {
     var view = this;
 

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

@@ -0,0 +1,52 @@
+pageflow.EditFileView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/edit_file',
+  className: 'edit_file',
+
+  onRender: function() {
+    var fileType = this.model.fileType();
+    var entry = this.options.entry || pageflow.entry;
+
+    var tab = new pageflow.ConfigurationEditorTabView({
+      model: this.model.configuration,
+      attributeTranslationKeyPrefixes: [
+        'pageflow.editor.files.attributes.' + fileType.collectionName,
+        'pageflow.editor.files.common_attributes',
+        'pageflow.editor.nested_files.' + fileType.collectionName,
+        'pageflow.editor.nested_files.common_attributes'
+      ]
+    });
+
+    tab.input('file_name', pageflow.TextInputView, {
+      model: this.model,
+      disabled: true
+    });
+
+    tab.input('rights', pageflow.TextInputView, {
+      model: this.model,
+      placeholder: entry.get('default_file_rights')
+    });
+
+    _(this.fileTypeInputs()).each(function(options) {
+      tab.input(options.name, options.inputView, options.inputViewOptions);
+    });
+
+    tab.input('original_url', pageflow.UrlDisplayView, {
+      model: this.model
+    });
+
+    this.appendSubview(tab);
+  },
+
+  fileTypeInputs: function() {
+    var fileType = this.model.fileType();
+
+    return _.chain(fileType.configurationEditorInputs).map(function(inputs) {
+      if (_.isFunction(inputs)) {
+        return inputs(this.model);
+      }
+      else {
+        return inputs;
+      }
+    }, this).flatten().value();
+  }
+});