pageflow 0.11.4 → 12.0.0.rc1

data/app/assets/javascripts/pageflow/ui/views/table_cells/enum_table_cell_view.js

@@ -0,0 +1,26 @@
+/**
+ * A table cell mapping column attribute values to a list of
+ * translations.
+ *
+ * ## Attribute Translations
+ *
+ * The following attribute translations are used:
+ *
+ * - `.cell_text.<attribute_value>` - Used as cell content.
+ * - `.cell_text.blank` - Used as cell content if attribute is blank.
+ * - `.cell_title.<attribute_value>` - Used as title attribute.
+ * - `.cell_title.blank` - Used as title attribute if attribute is blank.
+ *
+ * @since 12.0
+ */
+pageflow.EnumTableCellView = pageflow.TableCellView.extend({
+  className: 'enum_table_cell',
+
+  update: function() {
+    this.$el.text(this.attributeTranslation('cell_text.' + (this.attributeValue() || 'blank')));
+    this.$el.attr('title',
+                  this.attributeTranslation('cell_title.' + (this.attributeValue() || 'blank'), {
+                    defaultValue: ''
+                  }));
+  }
+});

data/app/assets/javascripts/pageflow/ui/views/table_cells/icon_table_cell_view.js

@@ -0,0 +1,40 @@
+/**
+ * A table cell mapping column attribute values to icons.
+ *
+ * ## Attribute Translations
+ *
+ * The following attribute translations are used:
+ *
+ * - `.cell_title.<attribute_value>` - Used as title attribute.
+ * - `.cell_title.blank` - Used as title attribute if attribute is blank.
+ *
+ * @param {string[]} [options.icons]
+ *   An array of all possible attribute values to be mapped to HTML
+ *   classes of the same name. A global mapping from those classes to
+ *   icon mixins is provided in
+ *   pageflow/ui/table_cells/icon_table_cell.scss.
+ *
+ * @since 12.0
+ */
+pageflow.IconTableCellView = pageflow.TableCellView.extend({
+  className: 'icon_table_cell',
+
+  update: function() {
+    var icon = this.attributeValue();
+    var isPresent = !!this.attributeValue();
+
+    this.removeExistingIcons();
+
+    this.$el.attr('title',
+                  isPresent ?
+                  this.attributeTranslation('cell_title.' + icon, {
+                    value: this.attributeValue()
+                  }) :
+                  this.attributeTranslation('cell_title.blank'));
+    this.$el.addClass(icon);
+  },
+
+  removeExistingIcons: function() {
+    this.$el.removeClass(this.options.icons.join(' '));
+  }
+});

data/app/assets/javascripts/pageflow/ui/views/table_cells/presence_table_cell_view.js

@@ -0,0 +1,31 @@
+/**
+ * A table cell representing whether the column attribute is present
+ * on the row model.
+ *
+ * ## Attribute Translations
+ *
+ * The following attribute translations are used:
+ *
+ * - `.cell_title.present` - Used as title attribute if the attribute
+ *   is present. The current attribute value is provided as
+ *   interpolation `%{value}`.
+ * - `.cell_title.blank` - Used as title attribute if the
+ *   attribute is blank.
+ *
+ * @since 12.0
+ */
+pageflow.PresenceTableCellView = pageflow.TableCellView.extend({
+  className: 'presence_table_cell',
+
+  update: function() {
+    var isPresent = !!this.attributeValue();
+
+    this.$el.attr('title',
+                  isPresent ?
+                  this.attributeTranslation('cell_title.present', {
+                    value: this.attributeValue()
+                  }) :
+                  this.attributeTranslation('cell_title.blank'));
+    this.$el.toggleClass('is_present', isPresent);
+  }
+});

data/app/assets/javascripts/pageflow/ui/views/table_cells/table_cell_view.js

@@ -0,0 +1,101 @@
+/**
+ * Base class for table cell views.
+ *
+ * Inside sub classes the name of the column options are available as
+ * `this.options.column`. Override the `update` method to populate the
+ * element.
+ *
+ * @param {string} [options.className]
+ *   Class attribute to apply to the cell element.
+ *
+ * @since 12.0
+ */
+pageflow.TableCellView = Backbone.Marionette.ItemView.extend({
+  tagName: 'td',
+  template: 'templates/table_cell',
+
+  className: function() {
+    return this.options.className;
+  },
+
+  onRender: function() {
+    this.listenTo(this.getModel(), 'change:' + this.options.column.name, this.update);
+    this.setupContentBinding();
+    this.update();
+  },
+
+  /**
+   * Override in concrete cell view.
+   */
+  update: function() {
+    throw 'Not implemented';
+  },
+
+  /**
+   * Returns the column attribute's value in the row model.
+   */
+  attributeValue: function() {
+    if (typeof this.options.column.value == 'function') {
+      return this.options.column.value(this.model);
+    }
+    else {
+      return this.getModel().get(this.options.column.name);
+    }
+  },
+
+  getModel: function() {
+    if (this.options.column.configurationAttribute) {
+      return this.model.configuration;
+    }
+    else {
+      return this.model;
+    }
+  },
+
+  /**
+   * Look up attribute specific translations based on
+   * `attributeTranslationKeyPrefixes` of the the parent `TableView`.
+   *
+   * @param {Object} [options]
+   *   Interpolations to apply to the translation.
+   *
+   * @param {string} [options.defaultValue]
+   *   Fallback value if no translation is found.
+   *
+   * @protected
+   *
+   * @example
+   *
+   * this.attribute.attributeTranslation("cell_title");
+   * // Looks for keys of the form:
+   * // <table_view_translation_key_prefix>.<column_attribute>.cell_title
+   */
+  attributeTranslation: function(keyName, options) {
+    return pageflow.i18nUtils.findTranslation(
+      this.attributeTranslationKeys(keyName),
+      options
+    );
+  },
+
+  attributeTranslationKeys: function(keyName) {
+    return _(this.options.attributeTranslationKeyPrefixes || []).map(function(prefix) {
+      return prefix + '.' + this.options.column.name + '.' + keyName;
+    }, this);
+  },
+
+  /**
+   * Set up content binding to update this view upon change of
+   * specified attribute on this.getModel().
+   *
+   * @param {string} [options.column.contentBinding]
+   *   Name of the attribute to which this cell's update is bound
+   *
+   * @protected
+   */
+  setupContentBinding: function() {
+    if (this.options.column.contentBinding) {
+      this.listenTo(this.getModel(), 'change:' + this.options.column.contentBinding, this.update);
+      this.update();
+    }
+  }
+});

data/app/assets/javascripts/pageflow/ui/views/table_cells/table_header_cell_view.js

@@ -0,0 +1,10 @@
+pageflow.TableHeaderCellView = pageflow.TableCellView.extend({
+  tagName: 'th',
+
+  render: function() {
+    this.$el.text(this.attributeTranslation('column_header'));
+    this.$el.data('columnName', this.options.column.name);
+
+    return this;
+  }
+});

data/app/assets/javascripts/pageflow/ui/views/table_cells/text_table_cell_view.js

@@ -0,0 +1,46 @@
+/**
+ * A table cell using the row model's value of the column attribute as
+ * text. If attribute value is empty, use most specific default
+ * available.
+ *
+ * @param {function|string} [options.column.default]
+ *   A function returning a default value for display if attribute
+ *   value is empty.
+ *
+ * @param {string} [options.column.contentBinding]
+ *   If this is provided, the function `options.column.default`
+ *   receives the values of `options.column.contentBinding` and of
+ *   this.getModel() via its options hash. No-op if
+ *   `options.column.default` is not a function.
+ *
+ * @since 12.0
+ */
+pageflow.TextTableCellView = pageflow.TableCellView.extend({
+  className: 'text_table_cell',
+
+  update: function() {
+    this.$el.text(this._updateText());
+  },
+
+  _updateText: function() {
+    if (!!this.attributeValue()) {
+      return this.attributeValue();
+    }
+    else if (typeof this.options.column.default === 'function') {
+      var options = {};
+      if (!!this.options.column.contentBinding) {
+        options = {
+          contentBinding: this.options.column.contentBinding,
+          model: this.getModel()
+        };
+      }
+      return this.options.column.default(options);
+    }
+    else if ('default' in this.options.column) {
+      return this.options.column.default;
+    }
+    else {
+      return I18n.t('pageflow.ui.text_table_cell_view.empty');
+    }
+  }
+});

data/app/assets/javascripts/pageflow/ui/views/table_row_view.js

@@ -0,0 +1,47 @@
+pageflow.TableRowView = Backbone.Marionette.View.extend({
+  tagName: 'tr',
+
+  events: {
+    'click': function() {
+      if (this.options.selection) {
+        this.options.selection.set(
+          this.selectionAttribute(),
+          this.model
+        );
+      }
+    }
+  },
+
+  initialize: function() {
+    if (this.options.selection) {
+      this.listenTo(this.options.selection, 'change', this.updateClassName);
+    }
+  },
+
+  render: function() {
+    _(this.options.columns).each(function(column) {
+      this.appendSubview(new column.cellView(_.extend({
+        model: this.model,
+        column: column,
+        attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
+      }, column.cellViewOptions || {})));
+    }, this);
+
+    this.updateClassName();
+
+    return this;
+  },
+
+  updateClassName: function() {
+    this.$el.toggleClass('is_selected', this.isSelected());
+  },
+
+  isSelected: function() {
+    return this.options.selection &&
+      this.options.selection.get(this.selectionAttribute()) === this.model;
+  },
+
+  selectionAttribute: function() {
+    return this.options.selectionAttribute || 'current';
+  }
+});

data/app/assets/javascripts/pageflow/ui/views/table_view.js

@@ -0,0 +1,47 @@
+pageflow.TableView = Backbone.Marionette.ItemView.extend({
+  tagName: 'table',
+  className: 'table_view',
+  template: 'pageflow/ui/templates/table',
+
+  ui: {
+    headRow: 'thead tr',
+    body: 'tbody'
+  },
+
+  onRender: function() {
+    var view = this;
+
+    _(this.options.columns).each(function(column) {
+      this.ui.headRow.append(this.subview(new pageflow.TableHeaderCellView({
+        column: column,
+        attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
+      })).el);
+    }, this);
+
+    this.subview(new pageflow.CollectionView({
+      el: this.ui.body,
+      collection: this.collection,
+
+      itemViewConstructor: pageflow.TableRowView,
+      itemViewOptions: {
+        columns: this.options.columns,
+        selection: this.options.selection,
+        selectionAttribute: this.options.selectionAttribute,
+        attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
+      },
+
+      blankSlateViewConstructor: Backbone.Marionette.ItemView.extend({
+        tagName: 'tr',
+        className: 'blank_slate',
+        template: 'pageflow/ui/templates/table_blank_slate',
+
+        serializeData: function() {
+          return {
+            blankSlateText: view.options.blankSlateText,
+            colSpan: view.options.columns.length
+          };
+        }
+      })
+    }));
+  }
+});

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

@@ -2,23 +2,27 @@
 
 //= require_self
 
+//= require ./video_player/dash
+//= require ./video_player/use_slim_controls_during_phone_playback
 //= require ./video_player/media_events
 //= require ./video_player/prebuffering
 //= require ./video_player/buffer_underrun_waiting
-//= require ./video_player/src_from_options_method
-//= require ./video_player/play_button_patch
-//= require ./video_player/player_buffered_patch
 //= require ./video_player/filter_sources
 //= require ./video_player/lazy
+//= require ./video_player/cue_settings_methods
 
 pageflow.VideoPlayer = function(element, options) {
   options = options || {};
 
   element = pageflow.VideoPlayer.filterSources(element);
-  var player = vjs(element, options);
+  var player = videojs(element, options);
+
+  if (options.useSlimPlayerControlsDuringPhonePlayback) {
+    pageflow.mediaPlayer.useSlimPlayerControlsDuringPhonePlayback(player);
+  }
 
   pageflow.VideoPlayer.prebuffering(player);
-  pageflow.VideoPlayer.srcFromOptionsMethod(player);
+  pageflow.VideoPlayer.cueSettingsMethods(player);
 
   if (options.mediaEvents) {
     pageflow.VideoPlayer.mediaEvents(player, options.context);

data/app/assets/javascripts/pageflow/video_player/buffer_underrun_waiting.js

@@ -1,4 +1,11 @@
 pageflow.VideoPlayer.bufferUnderrunWaiting = function(player) {
+  var originalPause = player.pause;
+
+  player.pause = function() {
+    cancelWaiting();
+    originalPause.apply(this, arguments);
+  };
+
   function pauseAndPreloadOnUnderrun() {
     if (bufferUnderrun()) {
       pauseAndPreload();
@@ -13,11 +20,12 @@ pageflow.VideoPlayer.bufferUnderrunWaiting = function(player) {
     pageflow.log('Buffer underrun');
 
     player.trigger('bufferunderrun');
+    player.pause();
+
     player.waitingOnUnderrun = true;
 
-    player.pause();
     player.prebuffer({secondsToBuffer: 5, secondsToWait: 5}).then(function() {
-      // do nothing if user aborted waiting by clicking play
+      // do nothing if user aborted waiting by clicking pause
       if (player.waitingOnUnderrun) {
         player.waitingOnUnderrun = false;
         player.trigger('bufferunderruncontinue');
@@ -25,18 +33,12 @@ pageflow.VideoPlayer.bufferUnderrunWaiting = function(player) {
         player.play();
       }
     });
+  }
 
-    player.on('play', onNextPlay);
-
-    function onNextPlay() {
-      player.off('play', onNextPlay);
-
-      // if user presses play button, ignore buffer underruns for a
-      // moment to give the user the possibility to pause the video.
-      if (player.waitingOnUnderrun) {
-        player.ignoreUnderrunsUntil = new Date().getTime() + 5 * 1000;
-        player.waitingOnUnderrun = false;
-      }
+  function cancelWaiting() {
+    if (player.waitingOnUnderrun) {
+      player.ignoreUnderrunsUntil = new Date().getTime() + 5 * 1000;
+      player.waitingOnUnderrun = false;
 
       player.trigger('bufferunderruncontinue');
     }

data/app/assets/javascripts/pageflow/video_player/cue_settings_methods.js

@@ -0,0 +1,33 @@
+pageflow.VideoPlayer.cueSettingsMethods = function(player) {
+  player.updateCueLineSettings = function(line, forceUpdate) {
+    var value = line.split('.')[0];
+    value = value == 'top' ? 1 : value;
+
+    var changed = false;
+
+    _(player.textTracks()).each(function(textTrack) {
+      if (textTrack.mode == 'showing' && textTrack.cues) {
+        for (var i = 0; i < textTrack.cues.length; i++) {
+          if (textTrack.cues[i].line != value) {
+            textTrack.cues[i].line = value;
+            changed = true;
+          }
+        }
+      }
+    });
+
+    // Setting `line` does not update display directly, but only when
+    // the next cue is displayed. This is problematic, when we
+    // reposition text tracks to prevent overlap with player
+    // controls. Triggering the event makes VideoJS update positions.
+    // Ensure display is also updated when the current showing text
+    // track changed since the last call, i.e. `line` has been changed
+    // for a cue even though the previous call had the same
+    // parameters.
+    if (this.prevLine !== line || changed) {
+      player.tech({IWillNotUseThisInPlugins: true}).trigger('texttrackchange');
+    }
+
+    this.prevLine = line;
+  };
+};