pageflow 0.8.2 → 0.9.0

data/app/assets/javascripts/pageflow/ui/utils/i18n_utils.js

@@ -0,0 +1,23 @@
+pageflow.i18nUtils = {
+  findTranslation: function(keys, options) {
+    options = options || {};
+
+    return _.chain(keys).reverse().reduce(function(result, key) {
+      return I18n.t(key, {defaultValue: result});
+    }, options.defaultValue).value();
+  },
+
+  findKeyWithTranslation: function(keys) {
+    var missing = '_not_translated';
+
+    return _(keys).detect(function(key) {
+      return I18n.t(key, {defaultValue: missing}) !== missing;
+    }) || _.first(keys);
+  },
+
+  translationKeysWithSuffix: function(keys, suffix) {
+    return _.chain(keys).map(function(key) {
+      return [key + '_' + suffix, key];
+    }).flatten().value();
+  }
+};

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

@@ -16,6 +16,7 @@ pageflow.CollectionView = Backbone.Marionette.View.extend({
       });
       this.listenTo(this.collection, 'sync', function() {
         this.loading = false;
+        this.togglePlaceHolder();
       });
     }
   },
@@ -109,13 +110,16 @@ pageflow.CollectionView = Backbone.Marionette.View.extend({
   },
 
   togglePlaceHolder: function() {
-    var placeHolderConstructor = this.getPlaceHolderConstructor();
+    var lastPlaceholderConstructor = this.placeHolderConstructor;
+    this.placeHolderConstructor = this.getPlaceHolderConstructor();
 
-    if (this.itemViews.length || !placeHolderConstructor) {
+    if (this.itemViews.length || !this.placeHolderConstructor) {
       this.closePlaceHolderView();
     }
-    else if(!this.placeHolderView) {
-      this.placeHolderView = new placeHolderConstructor();
+    else if(!this.placeHolderView || lastPlaceholderConstructor !== this.placeHolderConstructor) {
+      this.closePlaceHolderView();
+
+      this.placeHolderView = new this.placeHolderConstructor();
       this.$el.append(this.placeHolderView.render().el);
     }
   },

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

@@ -8,7 +8,8 @@ pageflow.ConfigurationEditorTabView = Backbone.Marionette.View.extend({
   input: function(propertyName, view, options) {
     this.view(view, _.extend({
       placeholderModel: this.options.placeholderModel,
-      propertyName: propertyName
+      propertyName: propertyName,
+      attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
     }, options || {}));
   },
 
@@ -20,8 +21,8 @@ pageflow.ConfigurationEditorTabView = Backbone.Marionette.View.extend({
     }, options || {})));
   },
 
-  group: function(name) {
-    this.groups.apply(name, this);
+  group: function(name, options) {
+    this.groups.apply(name, this, options);
   },
 
   render: function() {
@@ -50,12 +51,12 @@ pageflow.ConfigurationEditorTabView.Groups = function() {
     groups[name] = fn;
   };
 
-  this.apply = function(name, context) {
+  this.apply = function(name, context, options) {
     if (!(name in groups)) {
       throw 'Undefined group named "' + name + '".';
     }
 
-    groups[name].call(context);
+    groups[name].call(context, options || {});
   };
 };
 

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

@@ -16,7 +16,8 @@ pageflow.ConfigurationEditorView = Backbone.Marionette.View.extend({
       var tabView = new pageflow.ConfigurationEditorTabView({
         model: this.model,
         placeholderModel: this.options.placeholderModel,
-        tab: name
+        tab: name,
+        attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
       });
 
       callback.call(tabView);
@@ -34,15 +35,5 @@ _.extend(pageflow.ConfigurationEditorView, {
   repository: {},
   register: function(pageTypeName, prototype) {
     this.repository[pageTypeName] = pageflow.ConfigurationEditorView.extend(prototype);
-  },
-
-  create: function(pageTypeName, options) {
-    if (!this.repository.hasOwnProperty(pageTypeName)) {
-      throw 'No configuration editor registered for page type "' + pageTypeName + '".';
-    }
-
-    options.pageType = pageflow.Page.typesByName[pageTypeName];
-
-    return new this.repository[pageTypeName](options);
   }
 });

data/app/assets/javascripts/pageflow/ui/views/inputs/select_input_view.js

@@ -33,8 +33,13 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
 
     if (!this.options.texts) {
       if (!this.options.translationKeys) {
+        var translationKeyPrefix = this.options.translationKeyPrefix ||
+          pageflow.i18nUtils.findKeyWithTranslation(this.attributeTranslationKeys('values', {
+            fallbackPrefix: 'activerecord.values'
+          }));
+
         this.options.translationKeys = _.map(this.options.values, function(value) {
-          return 'activerecord.values.' + this.model.i18nKey + '.' + this.options.propertyName + '.' + value;
+          return translationKeyPrefix + '.' + value;
         }, this);
       }
 

data/app/assets/javascripts/pageflow/ui/views/inputs/text_input_view.js

@@ -24,6 +24,10 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
     this.save();
   },
 
+  onClose: function() {
+    this.save();
+  },
+
   save: function() {
     this.model.set(this.options.propertyName, this.ui.input.val());
   },

data/app/assets/javascripts/pageflow/ui/views/mixins/input_view.js

@@ -1,9 +1,135 @@
+/**
+ * Mixin for input views handling common concerns like labels,
+ * inline help, visiblity and disabling.
+ *
+ * ## Label and Inline Help Translations
+ *
+ * By default `#labelText` and `#inlineHelpText` are defined through
+ * translations. If no `attributeTranslationKeyPrefixes` are given,
+ * translation keys for labels and inline help are constructed from
+ * the `i18nKey` of the model and the given `propertyName`
+ * option. Suppose the model's `i18nKey` is "page" and the
+ * `propertyName` option is "title". Then the key
+ *
+ *     activerecord.attributes.page.title
+ *
+ * will be used for the label. And the key
+ *
+ *     pageflow.ui.inline_help.page.title
+ *
+ * will be used for the inline help.
+ *
+ * ### Attribute Translation Key Prefixes
+ *
+ * The `attributeTranslationKeyPrefixes` option can be used to supply
+ * an array of scopes in which label and inline help translations
+ * shall be looked up based on the `propertyName` option.
+ *
+ * Suppose the array `['some.attributes', 'fallback.attributes']` is
+ * given as `attributeTranslationKeyPrefixes` option. Then, in the
+ * example above, the first existing translation key is used as label:
+ *
+ *     some.attributes.title.label
+ *     fallback.attributes.title.label
+ *     activerecord.attributes.post.title
+ *
+ * Accordingly, for the inline help:
+ *
+ *     some.attributes.title.inline_help
+ *     fallback.attributes.title.inline_help
+ *     pageflow.ui.inline_help.post.title
+ *
+ * This setup allows to keep all translation keys for an attribute
+ * to share a common prefix:
+ *
+ *    some:
+ *      attributes:
+ *        title:
+ *          label: "Label"
+ *          inline_help: "..."
+ *          inline_help_disabled: "..."
+ *
+ * ### Inline Help for Disabled Inputs
+ *
+ * For each inline help translation key, a separate key with an
+ * `"_disbaled"` suffix can be supplied, which provides a help string
+ * that shall be displayed when the input is disabled. More specific
+ * attribute translation key prefixes take precedence over suffixed
+ * keys:
+ *
+ *     some.attributes.title.inline_help
+ *     some.attributes.title.inline_help_disabled
+ *     fallback.attributes.title.inline_help
+ *     fallback.attributes.title.inline_help_disabled
+ *     pageflow.ui.inline_help.post.title
+ *     pageflow.ui.inline_help.post.title_disabled
+ *
+ * @option propertyName [String]
+ *   Name of the attribute on the model to display and edit.
+ *
+ * @option label [String]
+ *   Label text for the input.
+ *
+ * @option attributeTranslationKeyPrefixes [Array<String>]
+ *   An array of prefixes to lookup translations for labels and
+ *   inline help texts based on attribute names.
+ *
+ * @option disabled [Boolean]
+ *   Render input as disabled.
+ *
+ * @option visibleBinding [String]
+ *   Name of an attribute to control whether the input is visible. If
+ *   the `visible` and `visibleBindingValue` options are not set,
+ *   input will be visible whenever this attribute as a truthy value.
+ *
+ * @option visible [Function|Boolean]
+ *   A Function taking the value of the `visibleBinding` attribute as
+ *   parameter. Input will be visible only if function returns `true`.
+ *
+ * @option visibleBindingValue [Any]
+ *   Input will be visible whenever the value of the `visibleBinding`
+ *   attribute equals the value of this option.
+ */
 pageflow.inputView = {
   ui: {
     labelText: 'label .name',
     inlineHelp: 'label .inline_help'
   },
 
+  /**
+   * Returns an array of translation keys based on the propertyName
+   * options and the given prefixes.
+   *
+   * @param keyName [String]
+   *   Suffix to append to prefixes.
+   *
+   * @option attributeTranslationKeyPrefixes [Array<String>]
+   *   An array of strings to use as prefixes to constructs
+   *   translation keys.
+   *
+   * @option fallbackPrefix [String]
+   *   Optional additional prefix to form a model based translation
+   *   key of the form `prefix.modelI18nKey.propertyName.keyName
+   *
+   * @api edge
+   */
+  attributeTranslationKeys: function(keyName, options) {
+    var result = [];
+
+    if (this.options.attributeTranslationKeyPrefixes) {
+      result = result.concat(_(this.options.attributeTranslationKeyPrefixes).map(function(prefix) {
+        return prefix + '.' + this.options.propertyName + '.' + keyName;
+      }, this));
+    }
+
+    if (options && options.fallbackPrefix) {
+      result.push(options.fallbackPrefix + '.' + this.model.i18nKey + '.' + this.options.propertyName);
+    }
+
+    return result;
+  },
+
+  /** @private */
   onRender: function() {
     this.$el.addClass(this.model.modelName + '_' + this.options.propertyName);
     this.ui.labelText.text(this.labelText());
@@ -23,26 +149,27 @@ pageflow.inputView = {
   },
 
   localizedAttributeName: function() {
-    return I18n.t('activerecord.attributes.' + this.model.i18nKey + '.' + this.options.propertyName);
+    return pageflow.i18nUtils.findTranslation(this.attributeTranslationKeys('label', {fallbackPrefix: 'activerecord.attributes'}));
   },
 
   inlineHelpText: function() {
-    var key = 'pageflow.ui.inline_help.' + this.model.i18nKey + '.' + this.options.propertyName;
-    var text = I18n.t(key, {defaultValue: ''});
+    var keys = this.attributeTranslationKeys('inline_help', {fallbackPrefix: 'pageflow.ui.inline_help'});
 
     if (this.options.disabled) {
-      text = I18n.t(key + '_disabled', {defaultValue: text});
+      keys = pageflow.i18nUtils.translationKeysWithSuffix(keys, 'disabled');
     }
 
-    return text;
+    return pageflow.i18nUtils.findTranslation(keys, {defaultValue: ''});
   },
 
+  /** @private */
   updateDisabled: function() {
     if (this.ui.input) {
       this.updateDisabledAttribute(this.ui.input);
     }
   },
 
+  /** @private */
   updateDisabledAttribute: function(element) {
     if (this.options.disabled) {
       element.attr('disabled', true);
@@ -52,6 +179,7 @@ pageflow.inputView = {
     }
   },
 
+  /** @private */
   setupVisibleBinding: function() {
     var view = this;
 
@@ -61,7 +189,22 @@ pageflow.inputView = {
     }
 
     function updateVisible(model, value) {
-      view.$el.toggle(view.options.visibleBindingValue ? value === view.options.visibleBindingValue : !!value);
+      view.$el.toggle(isVisible(value));
+    }
+
+    function isVisible(value) {
+      if (view.options.visibleBindingValue) {
+        return value === view.options.visibleBindingValue;
+      }
+      else if (typeof view.options.visible === 'function') {
+        return !!view.options.visible(value);
+      }
+      else if ('visible' in view.options) {
+        return !!view.options.visible;
+      }
+      else {
+        return !!value;
+      }
     }
   }
 };

data/app/assets/javascripts/pageflow/ui/views/mixins/subview_container.js

@@ -5,6 +5,10 @@ pageflow.subviewContainer = {
     return view;
   },
 
+  appendSubview: function(view) {
+    return this.$el.append(this.subview(view).el);
+  },
+
   onClose: function() {
     if (this.subviews) {
       this.subviews.call('close');

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

@@ -1,4 +1,7 @@
+//= require ./media_player
+
 //= require_self
+
 //= require ./video_player/media_events
 //= require ./video_player/prebuffering
 //= require ./video_player/buffer_underrun_waiting
@@ -25,5 +28,7 @@ pageflow.VideoPlayer = function(element, options) {
     pageflow.VideoPlayer.bufferUnderrunWaiting(player);
   }
 
+  pageflow.mediaPlayer.enhance(player, options);
+
   return player;
 };

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

@@ -56,7 +56,7 @@ pageflow.VideoPlayer.bufferUnderrunWaiting = function(player) {
     player.off('progress', pauseAndPreloadOnUnderrun);
   }
 
-  if (pageflow.features.has('buffer underrun waiting support')) {
+  if (pageflow.browser.has('buffer underrun waiting support')) {
     player.on('play', function() {
       player.on('progress', pauseAndPreloadOnUnderrun);
     });

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

@@ -25,8 +25,12 @@ pageflow.VideoPlayer.Lazy = function(template, options) {
     }
   };
 
+  this.isPresent = function() {
+    return videoTag && !disposeTimeout;
+  };
+
   this.dispose = function() {
-    if (videoTag && !pageflow.features.has('mobile platform')) {
+    if (videoTag && !pageflow.browser.has('mobile platform')) {
       this.setEmptySrc();
 
       $(videoPlayer.el()).replaceWith(placeholder);
@@ -82,7 +86,7 @@ pageflow.VideoPlayer.Lazy = function(template, options) {
     return videoPlayer ? videoPlayer.srcFromOptions() : null;
   };
 
-  _.each(['play', 'pause', 'prebuffer', 'src', 'on', 'load'], function(method) {
+  _.each(['play', 'playAndFadeIn', 'pause', 'fadeOutAndPause', 'prebuffer', 'src', 'on', 'load', 'currentTime'], function(method) {
     that[method] = function(/* args */) {
       var args = arguments;
 
@@ -109,10 +113,10 @@ pageflow.VideoPlayer.Lazy = function(template, options) {
 
     var element = $(htmlWithPreload);
 
-    if (pageflow.features.has('mobile platform') && element.attr('data-mobile-poster')) {
+    if (pageflow.browser.has('mobile platform') && element.attr('data-mobile-poster')) {
       element.attr('poster', element.attr('data-mobile-poster'));
     }
-    else if (pageflow.features.has('high bandwidth') && !pageflow.features.has('mobile platform')) {
+    else if (pageflow.browser.has('high bandwidth') && !pageflow.browser.has('mobile platform')) {
       element.attr('poster', element.attr('data-large-poster'));
 
       element.find('source').each(function() {

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

@@ -6,7 +6,7 @@ pageflow.VideoPlayer.mediaEvents = function(player, context) {
       currentTime: player.currentTime(),
       duration: player.duration(),
       volume: player.volume(),
-      bitrate: pageflow.features.has('high bandwidth') ? 3500000 : 2000000
+      bitrate: pageflow.browser.has('high bandwidth') ? 3500000 : 2000000
     });
   }
 

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

@@ -13,7 +13,7 @@
     if (typeof lastAction == 'undefined' || now - lastAction > 400) {
       lastAction = now;
 
-      if (pageflow.features.has('phone platform')) {
+      if (pageflow.browser.has('phone platform')) {
         var elem = this.player_.tech.el();
         this.player_.play();
 

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

@@ -30,7 +30,7 @@ pageflow.VideoPlayer.prebuffering = function(player) {
     var deferred = $.Deferred();
     var timeout;
 
-    if (pageflow.features.has('prebuffering support')) {
+    if (pageflow.browser.has('prebuffering support')) {
       if (!player.isBufferedAhead(delta) && !player.prebufferDeferred) {
         pageflow.log('prebuffering video ' + player.srcFromOptions());