pageflow 12.0.4 → 12.1.0

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

@@ -1,68 +1,17 @@
-pageflow.mediaPlayer.volumeFading = 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) {
-    if (!pageflow.browser.has('volume control support')) {
-      return new jQuery.Deferred().resolve().promise();
-    }
-
-    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)) {
+//= require_self
+//= require_tree ./volume_fading
 
-            resolveFadeVolume();
-          }
-        }, resolution);
-      }
-    });
-
-    function volume(/* arguments */) {
-      return originalVolume.apply(player, arguments);
-    }
-  };
-
-  player.one('dispose', cancelFadeVolume);
-
-  function resolveFadeVolume() {
-    clearInterval(fadeVolumeInterval);
-    fadeVolumeDeferred.resolve();
-
-    fadeVolumeInterval = null;
-    fadeVolumeDeferred = null;
+pageflow.mediaPlayer.volumeFading = function(player) {
+  if (!pageflow.browser.has('volume control support')) {
+    return pageflow.mediaPlayer.volumeFading.noop(player);
   }
-
-  function cancelFadeVolume() {
-    if (fadeVolumeInterval) {
-      clearInterval(fadeVolumeInterval);
-      fadeVolumeDeferred.reject();
-
-      fadeVolumeInterval = null;
-      fadeVolumeDeferred = null;
-    }
+  else if (pageflow.audioContext.get() && player.getMediaElement) {
+    return pageflow.mediaPlayer.volumeFading.webAudio(
+      player,
+      pageflow.audioContext.get()
+    );
+  }
+  else {
+    return pageflow.mediaPlayer.volumeFading.interval(player);
   }
-};
+};

data/app/assets/javascripts/pageflow/slideshow/dom_order_scroll_navigator.js

@@ -12,12 +12,15 @@ pageflow.DomOrderScrollNavigator = function(slideshow, entryData) {
     }
 
     slideshow.goTo(previousPage, {
-      position: position
+      position: position,
+      ignoreInHistory: true
     });
   };
 
   this.next = function(currentPage, pages) {
-    slideshow.goTo(this.getNextPage(currentPage, pages));
+    slideshow.goTo(this.getNextPage(currentPage, pages), {
+      ignoreInHistory: true
+    });
   };
 
   this.nextPageExists = function(currentPage, pages) {

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

@@ -85,7 +85,7 @@ pageflow.Slideshow = function($el, configurations) {
 
   this.goToByPermaId = function(permaId, options) {
     if (permaId) {
-      return this.goTo($el.find('#' + permaId), options);
+      return this.goTo(getPageByPermaId(permaId), options);
     }
   };
 
@@ -129,7 +129,7 @@ pageflow.Slideshow = function($el, configurations) {
     return this.goTo(pages.first());
   };
 
-  this.update = function() {
+  this.update = function(options) {
     pages = $el.find('section.page');
 
     pages.each(function(index) {
@@ -141,7 +141,7 @@ pageflow.Slideshow = function($el, configurations) {
       });
     });
 
-    ensureCurrentPage();
+    ensureCurrentPage(options);
   };
 
   this.currentPage = function() {
@@ -152,8 +152,8 @@ pageflow.Slideshow = function($el, configurations) {
     return currentPage.page('getConfiguration');
   };
 
-  function ensureCurrentPage() {
-    var newCurrentPage = findNewCurrentPage();
+  function ensureCurrentPage(options) {
+    var newCurrentPage = findNewCurrentPage(options);
 
     if (newCurrentPage) {
       currentPage = newCurrentPage;
@@ -164,15 +164,23 @@ pageflow.Slideshow = function($el, configurations) {
     }
   }
 
-  function findNewCurrentPage() {
+  function findNewCurrentPage(options) {
     if (!currentPage.length) {
-      return that.scrollNavigator.getLandingPage(pages);
+      var permaId = options && options.landingPagePermaId;
+
+      return permaId ?
+        getPageByPermaId(permaId) :
+        that.scrollNavigator.getLandingPage(pages);
     }
     else if (!currentPage.parent().length) {
       return nearestPage(currentPageIndex);
     }
   }
 
+  function getPageByPermaId(permaId) {
+    return $el.find('#' + permaId);
+  }
+
   this.on = function() {
     $el.on.apply($el, arguments);
   };
@@ -241,7 +249,10 @@ pageflow.Slideshow.setup = function(options) {
     options.beforeFirstUpdate();
   }
 
-  pageflow.slides.update();
+  pageflow.slides.update({
+    landingPagePermaId: pageflow.history.getLandingPagePermaId()
+  });
+
   pageflow.history.start();
 
   return pageflow.slides;

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

@@ -25,6 +25,10 @@ pageflow.ConfigurationEditorView = Backbone.Marionette.View.extend({
     }, this));
   },
 
+  refresh: function() {
+    this.tabsView.refresh();
+  },
+
   render: function() {
     this.$el.append(this.subview(this.tabsView).el);
     return this;

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

@@ -12,17 +12,21 @@
  * @param {boolean} [options.disableRichtext=false]
  *   Do not provide text formatting options.
  *
+ * @see
+ * {@link module:pageflow/ui.pageflow.inputWithPlaceholderText pageflow.inputWithPlaceholderText}
+ * for placeholder related options
+ *
  * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for further options
  * @class
  * @memberof module:pageflow/ui
  */
 pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
-  mixins: [pageflow.inputView],
+  mixins: [pageflow.inputView, pageflow.inputWithPlaceholderText],
 
   template: 'pageflow/ui/templates/inputs/text_area_input',
 
   ui: {
-    textarea: 'textarea',
+    input: 'textarea',
     toolbar: '.toolbar'
   },
 
@@ -31,10 +35,11 @@ pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
   },
 
   onRender: function() {
-    this.ui.textarea.addClass(this.options.size);
+    this.ui.input.addClass(this.options.size);
     this.load();
+    this.updatePlaceholder();
 
-    this.editor = new wysihtml5.Editor(this.ui.textarea[0], {
+    this.editor = new wysihtml5.Editor(this.ui.input[0], {
       toolbar: this.ui.toolbar[0],
       autoLink: this.options.disableLinks ? 0 : 1,
       parserRules: {
@@ -77,7 +82,7 @@ pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
   },
 
   load: function() {
-    this.ui.textarea.val(this.model.get(this.options.propertyName));
+    this.ui.input.val(this.model.get(this.options.propertyName));
   }
 });
 

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

@@ -4,28 +4,16 @@
  * @param {boolean} [options.required=false]
  *   Display an error if the input is blank.
  *
- * @param {string|function} [options.placeholder]
- *   Display a placeholder string if the input is blank. Either a
- *   string or a function taking the model as a first parameter and
- *   returning a string.
- *
- * @param {string} [options.placeholderBinding]
- *   Name of an attribute. Recompute the placeholder function whenever
- *   this attribute changes.
- *
- * @param {boolean} [options.hidePlaceholderIfDisabled]
- *   Do not display the placeholder if the input is disabled.
- *
- * @param {Backbone.Model} [options.placeholderModel]
- *   Obtain placeholder by looking up the configured `propertyName`
- *   inside a given model.
+ * @see
+ * {@link module:pageflow/ui.pageflow.inputWithPlaceholderText pageflow.inputWithPlaceholderText}
+ * for placeholder related further options
  *
  * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for further options
  * @class
  * @memberof module:pageflow/ui
  */
 pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
-  mixins: [pageflow.inputView],
+  mixins: [pageflow.inputView, pageflow.inputWithPlaceholderText],
 
   template: 'pageflow/ui/templates/inputs/text_input',
 
@@ -38,17 +26,10 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
   },
 
   onRender: function() {
-    this.updatePlaceholder();
     this.load();
     this.validate();
 
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
-
-    if (this.options.placeholderBinding) {
-      this.listenTo(this.model,
-                    'change:' + this.options.placeholderBinding,
-                    this.updatePlaceholder);
-    }
   },
 
   onChange: function() {
@@ -85,30 +66,5 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
   resetValidationError: function(message) {
     this.$el.removeClass('invalid');
     this.ui.input.attr('title', '');
-  },
-
-  updatePlaceholder: function() {
-    this.ui.input.attr('placeholder', this.placeholderText());
-  },
-
-  placeholderText: function() {
-    if (!this.options.disabled || !this.options.hidePlaceholderIfDisabled) {
-      if (this.options.placeholder) {
-        if (typeof this.options.placeholder == 'function') {
-          return this.options.placeholder(this.model);
-        }
-        else {
-          return this.options.placeholder;
-        }
-      }
-      else {
-        return this.placeholderModelValue();
-      }
-    }
-  },
-
-  placeholderModelValue: function() {
-    return this.options.placeholderModel &&
-      this.options.placeholderModel.get(this.options.propertyName);
   }
 });

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

@@ -0,0 +1,58 @@
+/**
+ * Text based input view that can display a placeholder.
+ *
+ * @param {string|function} [options.placeholder]
+ *   Display a placeholder string if the input is blank. Either a
+ *   string or a function taking the model as a first parameter and
+ *   returning a string.
+ *
+ * @param {string} [options.placeholderBinding]
+ *   Name of an attribute. Recompute the placeholder function whenever
+ *   this attribute changes.
+ *
+ * @param {boolean} [options.hidePlaceholderIfDisabled]
+ *   Do not display the placeholder if the input is disabled.
+ *
+ * @param {Backbone.Model} [options.placeholderModel]
+ *   Obtain placeholder by looking up the configured `propertyName`
+ *   inside a given model.
+ *
+ * @mixin
+ * @memberof module:pageflow/ui
+ */
+pageflow.inputWithPlaceholderText = {
+  onRender: function() {
+    this.updatePlaceholder();
+
+    if (this.options.placeholderBinding) {
+      this.listenTo(this.model,
+                    'change:' + this.options.placeholderBinding,
+                    this.updatePlaceholder);
+    }
+  },
+
+  updatePlaceholder: function() {
+    this.ui.input.attr('placeholder', this.placeholderText());
+  },
+
+  placeholderText: function() {
+    if (!this.options.disabled || !this.options.hidePlaceholderIfDisabled) {
+      if (this.options.placeholder) {
+        if (typeof this.options.placeholder == 'function') {
+          return this.options.placeholder(this.model);
+        }
+        else {
+          return this.options.placeholder;
+        }
+      }
+      else {
+        return this.placeholderModelValue();
+      }
+    }
+  },
+
+  placeholderModelValue: function() {
+    return this.options.placeholderModel &&
+      this.options.placeholderModel.get(this.options.propertyName);
+  }
+};

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

@@ -0,0 +1,16 @@
+// vendor JavaScript manifest for Pageflow.
+// This file is meant to hold code we don't develop and/or rarely change.
+// It means this asset will stay cached for much longer.
+
+//= require i18n
+//= require jquery
+//= require jquery-ui/widget
+//= require jquery_ujs
+//= require jquery.fullscreen
+//= require jquery.placeholder
+
+//= require iscroll
+//= require audio5.min
+
+//= require react
+//= require backbone-rails

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

@@ -0,0 +1,6 @@
+pageflow.VideoPlayer.getMediaElementMethod = function(player) {
+  player.getMediaElement = function() {
+    var tech = player.tech({IWillNotUseThisInPlugins: true});
+    return tech && tech.el();
+  };
+};

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

@@ -10,6 +10,7 @@
 //= require ./video_player/filter_sources
 //= require ./video_player/lazy
 //= require ./video_player/cue_settings_methods
+//= require ./video_player/get_media_element_method
 
 pageflow.VideoPlayer = function(element, options) {
   options = options || {};
@@ -23,6 +24,7 @@ pageflow.VideoPlayer = function(element, options) {
 
   pageflow.VideoPlayer.prebuffering(player);
   pageflow.VideoPlayer.cueSettingsMethods(player);
+  pageflow.VideoPlayer.getMediaElementMethod(player);
 
   if (options.mediaEvents) {
     pageflow.VideoPlayer.mediaEvents(player, options.context);

data/app/assets/stylesheets/pageflow/admin/entries.scss

@@ -23,7 +23,7 @@
     float: right;
   }
 
-  span[title] {
+  td > span[title] {
     border-bottom: 1px #aaa dotted;
     cursor: default;
   }

data/app/assets/stylesheets/pageflow/admin/quotas.scss

@@ -1,4 +1,4 @@
-.quota_state {
+.quota_state_description {
   margin: 0 10px 10px 10px;
   padding: 5px 10px;
   background-color: #fff;

data/app/assets/stylesheets/pageflow/admin.scss

@@ -1,3 +1,5 @@
+@import "active_admin/searchable_select";
+
 @import "pageflow/mixins";
 
 @import "pageflow/admin/badge_list";

data/app/assets/stylesheets/pageflow/base.scss

@@ -72,7 +72,6 @@ a {
 @import "./header";
 @import "./focus_outline";
 @import "./skip_links";
-@import "./text_variants";
 @import "./multimedia_alert";
 @import "./hide_text";
 @import "./subshare";

data/app/assets/stylesheets/pageflow/editor/base.scss

@@ -17,6 +17,7 @@
 @import "./unsupported_browser_hint";
 
 .editor {
+  @import "./change_theme";
   @extend %pageflow-ui;
 
   font-family: Helvetica, "Sans-Serif";
@@ -68,6 +69,7 @@
   @import "./file_thumbnails";
   @import "./file_settings_dialog";
   @import "./text_tracks";
+  @import "./static_thumbnails";
   @import "./wysihtml5";
   @import "./notifications";
   @import "./publish_entry";

data/app/assets/stylesheets/pageflow/editor/change_theme.scss

@@ -0,0 +1,114 @@
+&.change_theme {
+  .box {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    bottom: 20px;
+    right: 20px;
+    max-width: 1100px;
+    max-height: 650px;
+    background-color: #eee;
+  }
+
+  .content {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    bottom: 50px;
+    left: 20px;
+    overflow: auto;
+    overflow-y: scroll;
+    background-color: #fff;
+
+    >div {
+      padding: 10px;
+    }
+  }
+
+  .footer {
+    position: absolute;
+    right: 20px;
+    bottom: 10px;
+    left: 20px;
+  }
+
+  .themes_panel {
+    position: absolute;
+    top: 60px;
+    left: 20px;
+    width: 330px;
+  }
+
+  .preview_panel {
+    position: absolute;
+    top: 68px;
+    right: 30px;
+    left: 370px;
+    bottom: 50px;
+  }
+
+  .use_theme {
+    @include button(#590);
+  }
+
+  .theme_name {
+    margin: 10px;
+  }
+
+  .button_or_checkmark {
+    margin-right: 10px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .theme_in_use {
+    font-size: 35px;
+  }
+
+  li {
+    position: relative;
+    line-height: 60px;
+    background-color: #eeeeee;
+    margin: 10px;
+
+    .active {
+      background-color: #d2e5fa;
+    }
+  }
+
+  h2.themes_header {
+    display: block;
+    font-size: 1.5em;
+    font-weight: bold;
+    text-transform: none;
+    position: absolute;
+    top: 25px;
+    left: 30px;
+  }
+
+  h2.preview_header {
+    font-size: 14px;
+    text-transform: none;
+  }
+
+  .preview_image_region {
+    margin-bottom: 30px;
+    border: 1px solid #eee;
+    padding-top: 71%;
+    position: relative;
+  }
+
+  .preview_image {
+    position: absolute;
+    top: 0;
+    max-width: 100%;
+    z-index: 2;
+  }
+
+  .loading {
+    position: absolute;
+    top: 50px;
+    z-index: 1;
+    width: 100%;
+  }
+}

data/app/assets/stylesheets/pageflow/editor/static_thumbnails.scss

@@ -0,0 +1,4 @@
+.static_thumbnail {
+  background-size: cover;
+  height: 100%;
+}

data/app/assets/stylesheets/pageflow/editor/widgets.scss

@@ -1,4 +1,28 @@
-.edit_widget {
+.widget_item {
   list-style: none;
   padding: 5px 0;
-}
+  position: relative;
+
+  &.is_hidden {
+    display: none;
+  }
+
+  &.has_settings {
+    .widget_type {
+      padding-right: 40px;
+    }
+
+    .settings {
+      display: block;
+    }
+  }
+
+  .settings {
+    @include icon-only-button(#aaa);
+    @include cog-icon;
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 19px;
+  }
+}

data/app/assets/stylesheets/pageflow/page.scss

@@ -81,19 +81,6 @@
     display: none;
   }
 
-  h1, h2 span.subtitle, h2 span.tagline, h3, p {
-    max-width: 500px;
-    width: 60%;
-    @include mobile {
-      width: 100%;
-    }
-  }
-
-  h2 .title {
-    max-width: 700px;
-    width: 100%;
-  }
-
   .shadow {
     position: absolute;
     top: 0;
@@ -135,4 +122,4 @@
   @include phone {
     margin-bottom: 80px;
   }
-}
+}

data/app/assets/stylesheets/pageflow/themes/default/indicators.scss

@@ -12,6 +12,9 @@
 /// - `"icon_font"`: Use font icons for icon.
 $indicator-icons: "icon_font" !default;
 
+/// Display the scroll indicator at the bottom of the page.
+$display-scroll-indicator: true !default;
+
 @import "./indicators/icons/default";
 @import "./indicators/icons/icon_font";
 @import "./indicators/icons/sprite";
@@ -26,3 +29,12 @@ $indicator-icons: "icon_font" !default;
 } @else {
   @include indicators-icons-default;
 }
+
+@if not $display-scroll-indicator {
+  .scroll_indicator {
+    // Override inline style used to display scroll indicator
+    // scss-lint:disable ImportantRule
+    display: none !important;
+    // scss-lint:enable ImportantRule
+  }
+}