pageflow 12.0.4 → 12.1.0

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

@@ -24,7 +24,7 @@ pageflow.EditMetaDataView = Backbone.Marionette.Layout.extend({
 
     configurationEditor.tab('general', function() {
       this.input('title', pageflow.TextInputView, {
-        placeholder: entry.attributes.entry_title
+        placeholder: entry.get('entry_title')
       });
       this.input('locale', pageflow.SelectInputView, {
         values: pageflow.config.availablePublicLocales,
@@ -47,18 +47,20 @@ pageflow.EditMetaDataView = Backbone.Marionette.Layout.extend({
     });
 
     configurationEditor.tab('widgets', function() {
+      var theme = entry.getTheme();
+
       this.input('manual_start', pageflow.CheckBoxInputView);
       this.input('emphasize_chapter_beginning', pageflow.CheckBoxInputView);
       this.input('emphasize_new_pages', pageflow.CheckBoxInputView);
       this.input('home_button_enabled', pageflow.CheckBoxInputView, {
-        disabled: !pageflow.theming.hasHomeButton(),
+        disabled: !theme.hasHomeButton(),
         displayUncheckedIfDisabled: true
       });
       this.input('overview_button_enabled', pageflow.CheckBoxInputView, {
-        disabled: !pageflow.theming.hasOverviewButton(),
+        disabled: !theme.hasOverviewButton(),
         displayUncheckedIfDisabled: true
       });
-      if (pageflow.theming.hasHomeButton()) {
+      if (theme.hasHomeButton()) {
         this.input('home_url', pageflow.TextInputView, {
           placeholder: pageflow.theming.get('pretty_url'),
           visibleBinding: 'home_button_enabled'
@@ -68,6 +70,13 @@ pageflow.EditMetaDataView = Backbone.Marionette.Layout.extend({
         model: entry,
         widgetTypes: pageflow.editor.widgetTypes
       });
+      if (pageflow.features.isEnabled('selectable_themes') &&
+          pageflow.themes.length > 1) {
+        this.view(pageflow.ThemeInputView, {
+          themes: pageflow.themes,
+          propertyName: 'theme_name'
+        });
+      }
     });
 
     configurationEditor.tab('social', function() {
@@ -84,6 +93,10 @@ pageflow.EditMetaDataView = Backbone.Marionette.Layout.extend({
       });
     });
 
+    this.listenTo(entry.configuration, 'change:theme_name', function() {
+      configurationEditor.refresh();
+    });
+
     this.formContainer.show(configurationEditor);
   },
 

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

@@ -1,29 +1,19 @@
-pageflow.EditWidgetView = Backbone.Marionette.Layout.extend({
+pageflow.EditWidgetView = Backbone.Marionette.ItemView.extend({
   template: 'templates/edit_widget',
-  tagName: 'li',
   className: 'edit_widget',
 
-  regions: {
-    widgetTypeContainer: '.widget_type'
-  },
-
-  ui: {
-    role: 'h2'
+  events: {
+    'click a.back': function() {
+      editor.navigate('/meta_data/widgets', {trigger: true});
+    }
   },
 
   onRender: function() {
-    var widgetTypes = this.options.widgetTypes[this.model.role()] || [];
-
-    this.widgetTypeContainer.show(new pageflow.SelectInputView({
-      model: this.model,
-      propertyName: 'type_name',
-      label: I18n.t('pageflow.widgets.roles.' + this.model.role()),
-      collection: widgetTypes,
-      valueProperty: 'name',
-      translationKeyProperty: 'translationKey',
-      includeBlank: true
-    }));
+    var configurationEditor = this.model.widgetType().createConfigurationEditorView({
+      model: this.model.configuration,
+      tab: this.options.tab
+    });
 
-    this.$el.toggle(widgetTypes.length > 1);
+    this.appendSubview(configurationEditor);
   }
-});
+});

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

@@ -9,12 +9,10 @@ pageflow.EditWidgetsView = Backbone.Marionette.Layout.extend({
     this.subview(new pageflow.CollectionView({
       el: this.ui.widgets,
       collection: this.model.widgets,
-      itemViewConstructor: pageflow.EditWidgetView,
+      itemViewConstructor: pageflow.WidgetItemView,
       itemViewOptions: {
         widgetTypes: this.options.widgetTypes
       }
     }).render());
-
-    this.model.fetchWidgets();
   }
 });

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

@@ -31,9 +31,13 @@ pageflow.FileMetaDataItemValueView = Backbone.Marionette.ItemView.extend({
     }
   },
 
+  modelEvents: {
+    'change': 'toggleEditLink'
+  },
+
   onRender: function() {
     this.listenTo(this.model, 'change:' + this.options.name, this.update);
-    this.ui.editLink.toggle(!!this.options.settingsDialogTabLink);
+    this.toggleEditLink();
 
     this.update();
   },
@@ -45,5 +49,10 @@ pageflow.FileMetaDataItemValueView = Backbone.Marionette.ItemView.extend({
 
   getText: function() {
     throw new Error('Not implemented');
+  },
+
+  toggleEditLink: function() {
+    this.ui.editLink.toggle(!!this.options.settingsDialogTabLink &&
+                            !this.model.isNew());
   }
 });

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

@@ -14,6 +14,7 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend(
 
   ui: {
     title: '.title',
+    chooseButton: '.choose',
     unsetButton: '.unset',
     buttons: 'button'
   },
@@ -22,8 +23,8 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend(
     'click .choose': function() {
       var view = this;
 
-      this.choose().then(function(site) {
-        view.model.set(view.options.propertyName, site.get('perma_id'));
+      this.chooseValue().then(function(id) {
+        view.model.set(view.options.propertyName, id);
       });
 
       return false;
@@ -44,11 +45,26 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend(
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.update);
   },
 
+  /**
+   * Returns a promise for some identifying attribute.
+   *
+   * Default attribute name is perma_id. If the attribute is named
+   * differently, you can have your specific ReferenceInputView
+   * implement `chooseValue()` accordingly.
+   *
+   * Will be used to set the chosen Model for this View.
+   */
+  chooseValue: function() {
+    return this.choose().then(function(model) {
+      return model.get('perma_id');
+    });
+  },
+
   choose: function() {
     throw 'Not implemented: Override ReferenceInputView#choose to return a promise';
   },
 
-  getTarget: function() {
+  getTarget: function(targetId) {
     throw 'Not implemented: Override ReferenceInputView#getTarget';
   },
 
@@ -59,10 +75,26 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend(
   },
 
   update: function() {
+    if (this.isClosed) {
+      return;
+    }
+
     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);
+
+    this.ui.unsetButton.toggle(!!target && !this.options.hideUnsetButton);
+    this.ui.unsetButton.attr(
+      'title',
+      this.options.unsetButtonTitle ||
+        I18n.t('pageflow.editor.views.inputs.reference_input_view.unset')
+    );
+
+    this.ui.chooseButton.attr(
+      'title',
+      this.options.chooseButtonTitle ||
+        I18n.t('pageflow.editor.views.inputs.reference_input_view.choose')
+    );
 
     this.updateDisabledAttribute(this.ui.buttons);
 

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

@@ -0,0 +1,26 @@
+pageflow.ThemeInputView = pageflow.ReferenceInputView.extend({
+  options: function() {
+    return {
+      chooseButtonTitle: I18n.t('pageflow.editor.views.inputs.theme_input_view.choose'),
+      hideUnsetButton: true
+    };
+  },
+
+  choose: function() {
+    return pageflow.ChangeThemeDialogView.changeTheme({
+      model: this.model,
+      themes: this.options.themes,
+      themeInUse: this.model.get(this.options.propertyName)
+    });
+  },
+
+  chooseValue: function() {
+    return this.choose().then(function(model) {
+      return model.get('name');
+    });
+  },
+
+  getTarget: function(themeName) {
+    return this.options.themes.findByName(themeName);
+  }
+});

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

@@ -17,24 +17,38 @@ pageflow.ModelThumbnailView = Backbone.Marionette.View.extend({
   },
 
   update: function() {
-    var file = this.model && this.model.thumbnailFile();
-
-    if (this.fileThumbnailView && this.currentFileThumbnail == file) {
-      return;
+    if (this.model) {
+      if (_.isFunction(this.model.thumbnailFile)) {
+        var file = this.model && this.model.thumbnailFile();
+
+        if (this.thumbnailView && this.currentFileThumbnail == file) {
+          return;
+        }
+
+        this.currentFileThumbnail = file;
+
+        this.newThumbnailView = new pageflow.FileThumbnailView({
+          model: file,
+          className: 'thumbnail file_thumbnail',
+          imageUrlPropertyName: this.options.imageUrlPropertyName
+        });
+      }
+      else {
+        this.newThumbnailView = this.newThumbnailView ||
+          new pageflow.StaticThumbnailView({
+            model: this.model
+          });
+      }
     }
 
-    this.currentFileThumbnail = file;
-
-    if (this.fileThumbnailView) {
-      this.fileThumbnailView.close();
+    if (this.thumbnailView) {
+      this.thumbnailView.close();
     }
 
-    this.fileThumbnailView = this.subview(new pageflow.FileThumbnailView({
-      model: file,
-      className: 'thumbnail file_thumbnail',
-      imageUrlPropertyName: this.options.imageUrlPropertyName
-    }));
+    if (this.model) {
+      this.thumbnailView = this.subview(this.newThumbnailView);
 
-    this.$el.append(this.fileThumbnailView.el);
+      this.$el.append(this.thumbnailView.el);
+    }
   }
 });

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

@@ -0,0 +1,20 @@
+pageflow.StaticThumbnailView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/static_thumbnail',
+  className: 'static_thumbnail',
+
+  modelEvents: {
+    'change:configuration': 'update'
+  },
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    this.$el.css('background-image', 'url(' + this._imageUrl() + ')');
+  },
+
+  _imageUrl: function() {
+    return this.model.thumbnailUrl();
+  }
+});

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

@@ -0,0 +1,41 @@
+/** @api private */
+pageflow.ThemeItemView = Backbone.Marionette.ItemView.extend({
+  tagName: 'li',
+  template: 'pageflow/editor/templates/theme_item',
+  className: 'theme_item',
+
+  mixins: [pageflow.selectableView],
+
+  selectionAttribute: 'theme',
+
+  ui: {
+    themeName: '.theme_name',
+    useButton: '.use_theme',
+    inUseRegion: '.theme_in_use'
+  },
+
+  events: {
+    'click .use_theme': function() {
+      this.options.onUse(this.model);
+    },
+    'mouseenter': 'select',
+    'click': 'select'
+  },
+
+  onRender: function() {
+    this.$el.data('themeName', this.model.get('name'));
+    this.ui.themeName.text(this.model.title());
+
+    if (this.inUse()) {
+      this.ui.inUseRegion.text('✓');
+    }
+
+    this.ui.useButton.toggle(
+      !this.inUse()
+    );
+  },
+
+  inUse: function() {
+    return this.model.get('name') === this.options.themeInUse;
+  }
+});

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

@@ -0,0 +1,49 @@
+pageflow.WidgetItemView = Backbone.Marionette.Layout.extend({
+  template: 'templates/widget_item',
+  tagName: 'li',
+  className: 'widget_item',
+
+  regions: {
+    widgetTypeContainer: '.widget_type'
+  },
+
+  ui: {
+    role: 'h2'
+  },
+
+  modelEvents: {
+    'change:type_name': 'update'
+  },
+
+  events: {
+    'click .settings': function() {
+      pageflow.editor.navigate('/widgets/' + this.model.role(), {trigger: true});
+      return false;
+    },
+  },
+
+  onRender: function() {
+    var widgetTypes = this.options.widgetTypes.findAllByRole(this.model.role()) || [];
+    var isOptional = this.options.widgetTypes.isOptional(this.model.role());
+
+    this.widgetTypeContainer.show(new pageflow.SelectInputView({
+      model: this.model,
+      propertyName: 'type_name',
+      label: I18n.t('pageflow.widgets.roles.' + this.model.role()),
+      collection: widgetTypes,
+      valueProperty: 'name',
+      translationKeyProperty: 'translationKey',
+      includeBlank: isOptional || !this.model.get('type_name')
+    }));
+
+    this.$el.toggleClass('is_hidden', widgetTypes.length <= 1 &&
+                         !this.model.hasConfiguration() &&
+                         !isOptional);
+
+    this.update();
+  },
+
+  update: function() {
+    this.$el.toggleClass('has_settings', this.model.hasConfiguration());
+  }
+});

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

@@ -8,6 +8,9 @@ pageflow.History = function(slideshow, adapter) {
     if (options.back) {
       adapter.replaceState(null, '', adapter.hash());
     }
+    else if (options.ignoreInHistory) {
+      adapter.replaceState(null, '', hash);
+    }
     else {
       adapter.replaceState(options, '', adapter.hash());
       adapter.pushState(null, '', hash);
@@ -28,8 +31,11 @@ pageflow.History = function(slideshow, adapter) {
     slideshow.goToByPermaId(adapter.hash());
   });
 
+  this.getLandingPagePermaId = function() {
+    return adapter.hash() || pageParameter();
+  };
+
   this.start = function() {
-    slideshow.goToByPermaId(adapter.hash() || pageParameter());
     adapter.replaceState(null, '', slideshow.currentPage().attr('id'));
   };
 

data/app/assets/javascripts/pageflow/media_player/volume_fading/interval.js

@@ -0,0 +1,65 @@
+pageflow.mediaPlayer.volumeFading.interval = function(player) {
+  var originalVolume = player.volume;
+
+  var fadeVolumeDeferred;
+  var fadeVolumeInterval;
+
+  player.volume = function(value) {
+    if (typeof value !== 'undefined') {
+      cancelFadeVolume();
+    }
+
+    return originalVolume.apply(player, arguments);
+  };
+
+  player.fadeVolume = function(value, duration) {
+    cancelFadeVolume();
+
+    return new $.Deferred(function(deferred) {
+      var resolution = 10;
+      var startValue = volume();
+      var steps = duration / resolution;
+      var leap = (value - startValue) / steps;
+
+      if (value === startValue) {
+        deferred.resolve();
+      }
+      else {
+        fadeVolumeDeferred = deferred;
+        fadeVolumeInterval = setInterval(function() {
+          volume(volume() + leap);
+
+          if ((volume() >= value && value >= startValue) ||
+              (volume() <= value && value <= startValue)) {
+
+            resolveFadeVolume();
+          }
+        }, resolution);
+      }
+    });
+  };
+
+  player.one('dispose', cancelFadeVolume);
+
+  function volume(/* arguments */) {
+    return originalVolume.apply(player, arguments);
+  }
+
+  function resolveFadeVolume() {
+    clearInterval(fadeVolumeInterval);
+    fadeVolumeDeferred.resolve();
+
+    fadeVolumeInterval = null;
+    fadeVolumeDeferred = null;
+  }
+
+  function cancelFadeVolume() {
+    if (fadeVolumeInterval) {
+      clearInterval(fadeVolumeInterval);
+      fadeVolumeDeferred.reject();
+
+      fadeVolumeInterval = null;
+      fadeVolumeDeferred = null;
+    }
+  }
+};

data/app/assets/javascripts/pageflow/media_player/volume_fading/noop.js

@@ -0,0 +1,5 @@
+pageflow.mediaPlayer.volumeFading.noop = function(player) {
+  player.fadeVolume = function(value, duration) {
+    return new jQuery.Deferred().resolve().promise();
+  };
+};

data/app/assets/javascripts/pageflow/media_player/volume_fading/web_audio.js

@@ -0,0 +1,109 @@
+pageflow.mediaPlayer.volumeFading.webAudio = function(player, audioContext) {
+  var gainNode;
+
+  var currentDeferred;
+  var currentTimeout;
+
+  var currentValue = 1;
+
+  var lastStartTime;
+  var lastDuration;
+  var lastStartValue;
+
+  var allowedMinValue = 0.000001;
+
+  player.volume = function(value) {
+    ensureGainNode();
+
+    if (typeof value !== 'undefined') {
+      cancel();
+      currentValue = ensureInAllowedRange(value);
+
+      return gainNode.gain.setValueAtTime(currentValue,
+                                          audioContext.currentTime);
+    }
+
+    return Math.round(currentValue * 100) / 100;
+  };
+
+  player.fadeVolume = function(value, duration) {
+    ensureGainNode();
+
+    cancel();
+    recordFadeStart(duration);
+
+    currentValue = ensureInAllowedRange(value);
+
+    gainNode.gain.setValueAtTime(lastStartValue, audioContext.currentTime);
+    gainNode.gain.linearRampToValueAtTime(currentValue,
+                                          audioContext.currentTime + duration / 1000);
+
+    return new $.Deferred(function(deferred) {
+      currentTimeout = setTimeout(resolve, duration);
+      currentDeferred = deferred;
+    }).promise();
+  };
+
+  player.one('dispose', cancel);
+
+  function ensureGainNode() {
+    if (!gainNode) {
+      gainNode = audioContext.createGain();
+
+      var source = audioContext.createMediaElementSource(player.getMediaElement());
+
+      source.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+    }
+  }
+
+  function resolve() {
+    clearTimeout(currentTimeout);
+    currentDeferred.resolve();
+
+    currentTimeout = null;
+    currentDeferred = null;
+  }
+
+  function cancel() {
+    if (currentDeferred) {
+      gainNode.gain.cancelScheduledValues(audioContext.currentTime);
+
+      clearTimeout(currentTimeout);
+      currentDeferred.reject();
+
+      currentTimeout = null;
+      currentDeferred = null;
+
+      updateCurrentValueFromComputedValue();
+    }
+  }
+
+  function recordFadeStart(duration) {
+    lastStartTime = audioContext.currentTime;
+    lastStartValue = currentValue;
+    lastDuration = duration;
+  }
+
+  function updateCurrentValueFromComputedValue() {
+    // Firefox 54 on Ubuntu does not provide computed values when gain
+    // was changed via one of the scheduling methods. Instead
+    // gain.value always reports 1. Interpolate manually do determine
+    // how far the fade was performed before cancel was called.
+    if (gainNode.gain.value == 1) {
+      var performedDuration = (audioContext.currentTime - lastStartTime) * 1000;
+      var lastDelta = currentValue - lastStartValue;
+
+      currentValue = ensureInAllowedRange(
+        lastStartValue + (performedDuration / lastDuration * lastDelta)
+      );
+    }
+    else {
+      currentValue = gainNode.gain.value;
+    }
+  }
+
+  function ensureInAllowedRange(value) {
+    return value < allowedMinValue ? allowedMinValue : value;
+  }
+};