pageflow 12.2.0 → 12.3.0

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

@@ -2,14 +2,19 @@
   var attributeName = 'atmo_audio_file_id';
 
   pageflow.Atmo = pageflow.Object.extend({
-    initialize: function(slideshow, events, multiPlayer) {
-      this.slideshow = slideshow;
-      this.multiPlayer = multiPlayer;
+    initialize: function(options) {
+      this.slideshow = options.slideshow;
+      this.multiPlayer = options.multiPlayer;
+      this.backgroundMedia = options.backgroundMedia;
       this.disabled = pageflow.browser.has('mobile platform');
 
-      this.listenTo(events, 'page:change page:update', function() {
+      this.listenTo(options.events, 'page:change page:update background_media:unmute', function() {
         this.update();
       });
+
+      this.listenTo(options.multiPlayer, 'playfailed', function() {
+        options.backgroundMedia.mute();
+      });
     },
 
     disable: function() {
@@ -46,7 +51,7 @@
 
     resume: function() {
       if (this.multiPlayer.paused()) {
-        if (this.disabled) {
+        if (this.disabled || this.backgroundMedia.muted) {
           return new $.Deferred().resolve().promise();
         }
         else {
@@ -62,7 +67,12 @@
       var configuration = this.slideshow.currentPageConfiguration();
 
       if (!this.disabled) {
-        this.multiPlayer.fadeTo(configuration[attributeName]);
+        if (this.backgroundMedia.muted) {
+          this.multiPlayer.fadeOutAndPause();
+        }
+        else {
+          this.multiPlayer.fadeTo(configuration[attributeName]);
+        }
       }
     },
 
@@ -86,11 +96,12 @@
     }
   });
 
-  pageflow.Atmo.create = function(slideshow, events, audio) {
-    return new pageflow.Atmo(
-      slideshow,
-      events,
-      audio.createMultiPlayer({
+  pageflow.Atmo.create = function(slideshow, events, audio, backgroundMedia) {
+    return new pageflow.Atmo({
+      slideshow: slideshow,
+      events: events,
+      backgroundMedia: backgroundMedia,
+      multiPlayer: audio.createMultiPlayer({
         loop: true,
         fadeDuration: 500,
         crossFade: true,
@@ -98,7 +109,7 @@
         rewindOnChange: true,
         pauseInBackground: true
       })
-    );
+    });
   };
 
   pageflow.Atmo.duringPlaybackModes = ['play', 'mute', 'turn_down'];

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

@@ -1,6 +1,6 @@
 (function($) {
-  var creatingMethods = ['reinit', 'reactivate', 'activate', 'activateAsLandingPage', 'prepare', 'linkedPages'];
-  var ignoredMethods = ['cleanup', 'refreshScroller', 'resize', 'preload', 'deactivate', 'unprepare'];
+  var creatingMethods = ['reinit', 'reactivate', 'activate', 'activateAsLandingPage', 'prepare', 'preload', 'linkedPages'];
+  var ignoredMethods = ['cleanup', 'refreshScroller', 'resize',  'deactivate', 'unprepare'];
 
   var prototype = {
     _create: function() {

data/app/assets/javascripts/pageflow/slideshow/{adjacent_preparer.js → successor_preparer.js}

@@ -1,6 +1,6 @@
 //= require ./adjacent_pages
 
-pageflow.AdjacentPreparer = pageflow.Object.extend({
+pageflow.SuccessorPreparer = pageflow.Object.extend({
   initialize: function(adjacentPages) {
     this.adjacentPages = adjacentPages;
   },
@@ -12,14 +12,18 @@ pageflow.AdjacentPreparer = pageflow.Object.extend({
   schedule: function(page) {
     clearTimeout(this.scheduleTimeout);
 
-    var prepare = _.bind(this.prepareAdjacent, this, page.element.page('instance'));
+    var prepare = _.bind(this.prepareSuccessor, this, page);
     this.scheduleTimeout = setTimeout(prepare, page.prepareNextPageTimeout());
   },
 
-  prepareAdjacent: function(page) {
-    var adjacentPages = this.adjacentPages.of(page);
-    var noLongerPreparedPages = _.difference(this.lastPreparedPages, adjacentPages, [page]);
-    var newAdjacentPages = _.difference(adjacentPages, this.lastPreparedPages);
+  prepareSuccessor: function(page) {
+    var preparedPages = _.compact([
+      page,
+      this.adjacentPages.nextPage(page)
+    ]);
+
+    var noLongerPreparedPages = _.difference(this.lastPreparedPages, preparedPages);
+    var newAdjacentPages = _.difference(preparedPages, this.lastPreparedPages);
 
     _(noLongerPreparedPages).each(function(page) {
       if (!page.isDestroyed) {
@@ -29,18 +33,17 @@ pageflow.AdjacentPreparer = pageflow.Object.extend({
 
     _(newAdjacentPages).each(function(adjacentPage) {
       adjacentPage.prepare();
-      adjacentPage.preload();
     });
 
-    this.lastPreparedPages = adjacentPages.concat([page]);
+    this.lastPreparedPages = preparedPages;
   }
 });
 
-pageflow.AdjacentPreparer.create = function(pages, scrollNavigator) {
-  return new pageflow.AdjacentPreparer(
+pageflow.SuccessorPreparer.create = function(pages, scrollNavigator) {
+  return new pageflow.SuccessorPreparer(
     new pageflow.AdjacentPages(
       pages,
       scrollNavigator
     )
   );
-};
+};

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

@@ -3,7 +3,7 @@ pageflow.ConfigurationEditorView = Backbone.Marionette.View.extend({
 
   initialize: function() {
     this.tabsView = new pageflow.TabsView({
-      i18n: 'pageflow.ui.configuration_editor.tabs',
+      i18n: this.options.tabTranslationKeyPrefix || 'pageflow.ui.configuration_editor.tabs',
       defaultTab: this.options.tab
     });
     this.configure();
@@ -40,4 +40,4 @@ _.extend(pageflow.ConfigurationEditorView, {
   register: function(pageTypeName, prototype) {
     this.repository[pageTypeName] = pageflow.ConfigurationEditorView.extend(prototype);
   }
-});
+});

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

@@ -80,7 +80,7 @@ pageflow.VideoPlayer.Lazy = function(template, options) {
     return videoPlayer && videoPlayer.posterImage.unlockShowing();
   };
 
-  _.each(['play', 'playAndFadeIn', 'pause', 'fadeOutAndPause', 'prebuffer', 'src', 'on', 'load', 'currentTime'], function(method) {
+  _.each(['play', 'playAndFadeIn', 'pause', 'fadeOutAndPause', 'prebuffer', 'src', 'on', 'load', 'currentTime', 'muted'], function(method) {
     that[method] = function(/* args */) {
       var args = arguments;
 

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

@@ -4,6 +4,8 @@ pageflow.Visited = function(entryId, pages, events, cookies) {
   var unvisitedPages = [];
 
   function init() {
+    pageflow.cookieNotice.request();
+
     if (!cookies.hasItem(cookieName)) {
       storeVisitedPageIds(getAllIds());
     }

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

@@ -47,7 +47,7 @@
 
   .wrapper {
     text-align: center;
-    margin: 20px;
+    margin: 35px;
   }
 
   .previews {
@@ -96,6 +96,7 @@
   .slider {
     position: absolute;
     border: none;
+    background: #ddd;
 
     a {
       @include background-icon-center($font-size: 20px);
@@ -113,10 +114,10 @@
     }
 
     &.horizontal {
-      bottom: 0;
-      left: 40px;
-      right: 40px;
-      height: 0;
+      bottom: -10px;
+      left: 9px;
+      right: 11px;
+      height: 2px;
 
       a {
         @include transform(rotate(90deg));
@@ -126,10 +127,10 @@
     }
 
     &.vertical {
-      right: 0;
-      top: 40px;
-      bottom: 40px;
-      width: 0;
+      right: -10px;
+      top: 12px;
+      bottom: 11px;
+      width: 2px;
       height: auto;
 
       a {
@@ -139,6 +140,29 @@
     }
   }
 
+  .percent {
+    position: absolute;
+    font-size: 12px;
+    white-space: nowrap;
+
+    input {
+      width: 45px;
+      height: 25px;
+      box-sizing: border-box;
+      text-align: right;
+    }
+
+    &.horizontal {
+      left: -65px;
+      bottom: -26px;
+    }
+
+    &.vertical {
+      left: 100%;
+      top: -30px;
+    }
+  }
+
   a.save {
     @include check-icon;
     @include icon-button;
@@ -147,4 +171,4 @@
   a.close {
     @include icon-button(#888);
   }
-}
+}

data/app/assets/stylesheets/pageflow/page_types/video.scss

@@ -1,4 +1,5 @@
 @import "./video/content_hiding";
+@import "./video/mobile_poster";
 
 .has_native_video_player .page .videoPage .videoWrapper {
   margin-right: 0;
@@ -114,7 +115,3 @@
 .js .non_js_video {
   display: none;
 }
-
-.has_no_native_video_player .videoPage .background_image {
-  display: none;
-}

data/app/assets/stylesheets/pageflow/page_types/video/mobile_poster.scss

@@ -0,0 +1,15 @@
+.videoPage .background_image {
+  display: none;
+}
+
+.has_phone_platform {
+  // Show mobile poster only on phone platform
+  .videoPage .background_image {
+    display: block;
+  }
+
+  // But not while playing inline (e.g. on Android)
+  &.has_no_native_video_player .videoPage.should_play .background_image {
+    display: none;
+  }
+}

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

@@ -0,0 +1,68 @@
+$background-media-unmute-button-color: rgba(53, 53, 53, 0.9);
+
+$background-media-unmute-button-shadow-color: #ccc;
+
+$background-media-unmute-button-icon-color: #ddd;
+
+$background-media-unmute-button-icon-size: 24px;
+
+$background-media-unmute-button-size: 34px;
+
+$background-media-unmute-button-margin: 10px;
+
+.background_media_unmute_button {
+  position: absolute;
+  top: 26px;
+  right: 25px;
+  width: $background-media-unmute-button-size + $background-media-unmute-button-margin;
+  height: $background-media-unmute-button-size + $background-media-unmute-button-margin;
+
+  @extend %pageflow_widget_margin_right_max !optional;
+  @extend %pageflow_widget_margin_top !optional;
+
+  @include mobile {
+    top: 70px;
+    right: 11px;
+  }
+
+  &:before {
+    z-index: 2;
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: $background-media-unmute-button-size;
+    height: $background-media-unmute-button-size;
+    border-radius: $background-media-unmute-button-size / 2;
+    background-color: $background-media-unmute-button-color;
+    @include box-shadow(0 0 7px $background-media-unmute-button-shadow-color);
+    z-index: 1;
+  }
+
+  a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    position: relative;
+    @include background-icon-center($color: $background-media-unmute-button-icon-color,
+                                    $font-size: $background-media-unmute-button-icon-size);
+    @include fa-volume-down-icon;
+
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 25px;
+      left: 22px;
+      top: 22px;
+      border-top: solid 2px $background-media-unmute-button-icon-color;
+      border-bottom: solid 1px $background-media-unmute-button-color;
+      @include transform(translate(-50%, -50%) rotate(45deg));
+    }
+  }
+}

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

@@ -16,12 +16,14 @@
 
 @import "./built_in_page_types";
 @import "./anchors";
+@import "./cookie_notice_bar";
 @import "./loading_spinner";
 @import "./logo";
 @import "./page";
 @import "./indicators";
 @import "./navigation";
 @import "./mobile_navigation";
+@import "./background_media_unmute_button";
 @import "./multimedia_alert";
 @import "./overview";
 @import "./player_controls";

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

@@ -0,0 +1,57 @@
+/// Color of the cookie notice bar
+$cookie-notice-bar-background-color: rgba(20, 20, 20, 0.9);
+
+/// Color of the text inside cookie notice bar
+$cookie-notice-bar-text-color: #fff;
+
+$cookie-notice-bar-link-text-color: $main-color;
+
+$cookie-notice-bar-typography: ();
+
+$cookie-notice-bar-dismiss-button-background-color: $main-color-dark;
+
+$cookie-notice-bar-dismiss-button-text-color: #fff;
+
+.cookie_notice_bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: $cookie-notice-bar-background-color;
+  color: $cookie-notice-bar-text-color;
+  padding: 10px 20px;
+  z-index: 2;
+
+  @include standard-typography(
+    $cookie-notice-bar-typography
+  );
+
+  &-content {
+    @extend %pageflow_widget_margin_right_max !optional;
+  }
+
+  &-text {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: inline-block;
+
+    a {
+      color: $cookie-notice-bar-link-text-color;
+    }
+  }
+
+  &-dismiss {
+    background-color: $cookie-notice-bar-dismiss-button-background-color;
+    color: $cookie-notice-bar-dismiss-button-text-color;
+    border-radius: 3px;
+    float: right;
+    margin-top: 5px;
+    padding: 5px 10px;
+  }
+}
+
+@include pageflow-widget-margin("cookie_notice_bar_visible", "bottom") {
+  @include desktop {
+    margin-bottom: 60px;
+  }
+}

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

@@ -84,6 +84,7 @@ $page-content-text-font-size: 1.2em !default;
 $page-content-text-line-height: 1.5em !default;
 
 @import "./page/anchors";
+@import "./page/hyphenate";
 @import "./page/paddings";
 @import "./page/scroller";
 @import "./page/shadow";

data/app/assets/stylesheets/pageflow/themes/default/page/hyphenate.scss

@@ -0,0 +1,24 @@
+/// Let browser break words in header.
+///
+/// - `"narrow"`: Only allow hyphenating words when header is narrow,
+///   i.e. in portrait phone layout.
+///
+/// - `"always"`: Always break words
+///
+/// - `"never"`: Never break words
+$page-hyphenate-header: "narrow" !default;
+
+.page {
+  h2 {
+    @if $page-hyphenate-header == "always" {
+
+      hyphens: auto;
+
+    } @else if $page-hyphenate-header == "narrow" {
+
+      @include phone_portrait {
+        hyphens: auto;
+      }
+    }
+  }
+}