pageflow 13.0.0 → 13.1.0

data/app/assets/javascripts/pageflow/editor/models/widget.js

@@ -8,6 +8,7 @@ pageflow.Widget = Backbone.Model.extend({
     this.configuration = new pageflow.WidgetConfiguration(
       this.get('configuration') || {}
     );
+    this.configuration.parent = this;
 
     this.listenTo(this.configuration, 'change', function() {
       this.trigger('change:configuration', this);
@@ -37,4 +38,4 @@ pageflow.Widget = Backbone.Model.extend({
       configuration: this.configuration.toJSON()
     };
   },
-});
+});

data/app/assets/javascripts/pageflow/editor/models/widget_configuration_file_selection_handler.js

@@ -0,0 +1,16 @@
+pageflow.WidgetConfigurationFileSelectionHandler = function(options) {
+  var widget = pageflow.entry.widgets.get(options.id);
+
+  this.call = function(file) {
+    widget.configuration.setReference(options.attributeName, file);
+  };
+
+  this.getReferer = function() {
+    return '/widgets/' + widget.id;
+  };
+};
+
+pageflow.editor.registerFileSelectionHandler(
+  'widgetConfiguration',
+  pageflow.WidgetConfigurationFileSelectionHandler
+);

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

@@ -68,6 +68,8 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
       simulateHistory: true
     });
 
+    pageflow.delayedStart.perform();
+
     this.listenTo(this.pages, 'add', function() {
       slideshow.update();
     });

data/app/assets/javascripts/pageflow/editor/views/widget_types/classic_loading_spinner.js

@@ -0,0 +1,11 @@
+pageflow.editor.widgetTypes.register('classic_loading_spinner', {
+  configurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('loading_spinner', function() {
+        this.view(pageflow.InfoBoxView, {
+          text: I18n.t('pageflow.editor.classic_loading_spinner.widget_type_info_box_text')
+        });
+      });
+    }
+  })
+});

data/app/assets/javascripts/pageflow/editor/views/widget_types/title_loading_spinner.js

@@ -0,0 +1,20 @@
+pageflow.editor.widgetTypes.register('title_loading_spinner', {
+  configurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('loading_spinner', function() {
+        this.view(pageflow.InfoBoxView, {
+          text: I18n.t('pageflow.editor.title_loading_spinner.widget_type_info_box_text')
+        });
+        this.input('title', pageflow.TextInputView, {
+          placeholder: pageflow.entry.configuration.get('title') ||
+                       pageflow.entry.get('entry_title'),
+        });
+        this.input('subtitle', pageflow.TextInputView);
+        this.input('custom_background_image_id', pageflow.FileInputView, {
+          collection: 'image_files',
+          fileSelectionHandler: 'widgetConfiguration'
+        });
+      });
+    }
+  })
+});

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

@@ -10,3 +10,13 @@ $.fn.updateTitle = function () {
     this.attr('title', this.data('title'));
   }
 };
+
+$.fn.loadLazyImages = function() {
+  this.find('img[data-src]').each(function() {
+    var img = $(this);
+
+    if (!img.attr('src')) {
+      img.attr('src', img.data('src'));
+    }
+  });
+};

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

@@ -4,32 +4,14 @@ pageflow.manualStart = (function($) {
 
   $(function() {
     if (pageflow.manualStart.enabled) {
+      pageflow.delayedStart.waitFor(waitDeferred);
       requiredDeferred.resolve(waitDeferred.resolve);
     }
-    else {
-      waitDeferred.resolve();
-    }
   });
 
   return {
-    wait: function(callback) {
-      var cancelled = false;
-
-      waitDeferred.then(function() {
-        if (!cancelled) {
-          callback();
-        }
-      });
-
-      return {
-        cancel: function() {
-          cancelled = true;
-        }
-      };
-    },
-
     required: function() {
       return requiredDeferred.promise();
     }
   };
-}(jQuery));
+}(jQuery));

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

@@ -6,6 +6,7 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
 
       body.one('pagepreloaded', function() {
         readyDeferred.resolve();
+        pageflow.events.trigger('ready');
       });
 
       pageflow.Visited.setup();
@@ -32,6 +33,7 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
             $('.multimedia_alert').multimediaAlert();
 
             pageflow.widgetTypes.enhance(body);
+            pageflow.delayedStart.perform();
             pageflow.phoneLandscapeFullscreen();
           }
         });
@@ -42,4 +44,4 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
       pageflow.nativeScrolling.preventScrollingOnEmbed(slideshow);
     });
   };
-}).promise();
+}).promise();

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

@@ -194,7 +194,7 @@ pageflow.Slideshow = function($el, configurations) {
   }
 
   function getPageByPermaId(permaId) {
-    return $el.find('#' + permaId);
+    return $el.find('#' + parseInt(permaId, 10));
   }
 
   this.on = function() {

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

@@ -175,7 +175,7 @@
 
     _triggerDelayedPageTypeHook: function(name) {
       var that = this;
-      var handle = pageflow.manualStart.wait(function() {
+      var handle = pageflow.delayedStart.wait(function() {
         that._triggerPageTypeHook(name);
       });
 

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

@@ -104,7 +104,7 @@
         that.element.removeClass('visible');
       });
 
-      $.when(pageflow.ready, pageflow.manualStart).done(function() {
+      $.when(pageflow.ready, pageflow.delayedStart.promise()).done(function() {
         setTimeout(function() {
           that.element.addClass('attract');
           setTimeout(function() {

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

@@ -1,8 +1,22 @@
 pageflow.VideoPlayer.filterSources = function(playerElement) {
-  if ($(playerElement).is('video') && pageflow.browser.has('mp4 support only')) {
+  if (!$(playerElement).is('video')) {
+    return playerElement;
+  }
+
+  var changed = false;
+
+  if (pageflow.browser.has('mp4 support only')) {
     // keep only mp4 source
     $(playerElement).find('source').not('source[type="video/mp4"]').remove();
+    changed = true;
+  }
+  else if (pageflow.browser.has('mse and native hls support')) {
+    // remove dash source to ensure hls is used
+    $(playerElement).find('source[type="application/dash+xml"]').remove();
+    changed = true;
+  }
 
+  if (changed) {
     // the video tags initially in the dom are broken since they "saw"
     // the other sources. replace with clones
     var clone = $(playerElement).clone(true);
@@ -13,4 +27,4 @@ pageflow.VideoPlayer.filterSources = function(playerElement) {
   else {
     return playerElement;
   }
-};
+};

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

@@ -35,6 +35,7 @@ pageflow.widgets = (function() {
       .addClass(replacement);
 
     pageflow.events.trigger('widgets:update');
+    pageflow.slides.triggerResizeHooks();
   }
 
   function className(name, state) {

data/app/assets/javascripts/pageflow/widgets/navigation.js

@@ -87,6 +87,7 @@
         var handlerIn = function() {
           if (!('ontouchstart' in document.documentElement)) {
             $(overlays[index]).css("top", $(this).offset().top).addClass('visible').removeClass('hidden');
+            overlays.loadLazyImages();
           }
         };
 

data/app/assets/javascripts/pageflow/widgets/navigation_mobile.js

@@ -19,6 +19,7 @@
       $('.menu.index', element).click(function() {
         if(!$(element).hasClass('sharing') && !$(element).hasClass('imprint')) {
           $(element).toggleClass('active');
+          element.loadLazyImages();
         }
         $(element).removeClass('imprint sharing');
       });

data/app/assets/javascripts/pageflow/widgets/overview.js

@@ -18,6 +18,8 @@ jQuery(function($) {
         var scrollIndicator = $('.slideshow .scroll_indicator');
 
         overview.toggleClass('active', state);
+        overview.loadLazyImages();
+
         indexButton
           .toggleClass('active', state)
           .updateTitle();
@@ -126,4 +128,4 @@ jQuery(function($) {
       }
     }
   });
-});
+});

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

@@ -158,10 +158,6 @@
 
   .navigation_site_detail {
     @include box(-40px);
-
-    img {
-      margin-top: 12px;
-    }
   }
 
   .navigation_bg, .navigation_bullet .button {

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

@@ -46,6 +46,8 @@ $loading-spinner-glow-size: 140px !default;
 /// File extension of background and logo
 $loading-spinner-image-file-extension: "png" !default;
 
+@import "./loading_spinner/title";
+
 @if not $custom-loading-spinner {
   .loading_spinner {
     // scss-lint:disable ImportantRule

data/app/assets/stylesheets/pageflow/themes/default/loading_spinner/title.scss

@@ -0,0 +1,158 @@
+$title-loading-spinner-typography: () !default;
+
+$title-loading-spinner-title-typography: () !default;
+
+$title-loading-spinner-phone-title-typography: () !default;
+
+$title-loading-spinner-subtitle-typography: () !default;
+
+$title-loading-spinner-phone-subtitle-typography: () !default;
+
+.title_loading_spinner {
+  $duration: 7s;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+
+  &-image {
+    background-size: cover;
+    filter: blur(50px);
+    height: 100%;
+  }
+
+  &-titles {
+    @include standard-typography(
+      $title-loading-spinner-typography,
+      (
+        text-align: center
+      )
+    );
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    width: 100%;
+    padding: 1em;
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    color: #fff;
+    opacity: 0;
+  }
+
+  &-title {
+    &:after {
+      content: "";
+      display: block;
+      width: 100px;
+      border-bottom: solid 2px #fff;
+      margin: 20px auto;
+    }
+
+    @include typography(
+      $title-loading-spinner-title-typography,
+      (
+        font-weight: bold,
+        font-size: 5.3em
+      )
+    );
+
+    @include phone {
+      &:after {
+        border-bottom-width: 1px;
+      }
+
+      @include typography(
+        $title-loading-spinner-phone-title-typography,
+        (
+          font-size: 2em
+        )
+      );
+    }
+  }
+
+  &-subtitle {
+    @include typography(
+      $title-loading-spinner-subtitle-typography,
+      (
+        font-size: 1.5em,
+      )
+    );
+
+    @include phone {
+      @include typography(
+        $title-loading-spinner-phone-subtitle-typography,
+        (
+          font-size: 1em
+        )
+      );
+    }
+  }
+
+  &-logo {
+    @extend %pageflow_widget_margin_right !optional;
+    position: relative;
+
+    &:after {
+      @extend %background_logo;
+      content: "";
+      display: block;
+      z-index: 1;
+      opacity: 0;
+    }
+  }
+
+  &-fade {
+    @include animation(fade_out 1s ease 1);
+    @include animation-delay($duration + 0.5s);
+    @include animation-fill-mode(forwards);
+
+    .title_loading_spinner-titles {
+      @include animation(title_fade $duration ease-out 1);
+      @include animation-fill-mode(forwards);
+    }
+
+    .title_loading_spinner-logo:after {
+      @include animation(fade_in 1s ease-out 1);
+      @include animation-fill-mode(forwards);
+    }
+  }
+
+  @include keyframes(title_fade) {
+    0% {
+      @include transform(translate(-50%, -30%));
+      opacity: 0;
+    }
+
+    20% {
+      @include transform(translate(-50%, -30%));
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    60% {
+      @include transform(translate(-50%, -50%));
+    }
+
+    70% {
+      @include transform(translate(-50%, -50%));
+      opacity: 1;
+    }
+
+    100% {
+      @include transform(translate(-50%, -50%));
+      opacity: 0;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/logo/variant/background_image.scss

@@ -32,40 +32,45 @@ $logo-background-image-variant-banner-phone-height: null !default;
 ) {
   $page-selector: if($first-page-only, ":first-child", "");
 
-  .page#{$page-selector} {
-    .content_and_background .scroller > div:after {
-      content: "";
-      position: absolute;
-      top: $top;
-      z-index: 200;
-      min-width: $min-width;
-      max-width: $max-width;
-      width: $width;
-      height: $height;
-      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.#{$logo-image-file-extension}");
-      background-repeat: no-repeat;
-      background-size: contain;
-
-      @include dir-ltr {
-        background-position: #{$logo-alignment} top;
-      }
+  %background_logo {
+    top: $top;
+    position: absolute;
+    min-width: $min-width;
+    max-width: $max-width;
+    width: $width;
+    height: $height;
+    background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.#{$logo-image-file-extension}");
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    @include dir-ltr {
+      background-position: #{$logo-alignment} top;
+    }
 
-      @include dir-rtl {
-        background-position: #{if($logo-alignment == "left", "right", "left")} top;
-      }
+    @include dir-rtl {
+      background-position: #{if($logo-alignment == "left", "right", "left")} top;
+    }
 
-      @include mobile {
-        background-position: left top;
-        padding-top: $logo-background-image-variant-mobile-padding-top;
-        height: $mobile-height;
-      }
+    @include mobile {
+      background-position: left top;
+      padding-top: $logo-background-image-variant-mobile-padding-top;
+      height: $mobile-height;
+    }
 
-      @include phone {
-        height: $phone-height;
-        top: $phone-top;
-      }
+    @include phone {
+      height: $phone-height;
+      top: $phone-top;
+    }
 
-      @include logo-alignment;
+    @include logo-alignment;
+  }
+
+  .page#{$page-selector} {
+    .content_and_background .scroller > div:after {
+      @extend %background_logo;
+
+      content: "";
+      z-index: 200;
     }
 
     &.invert .content_and_background .scroller > div:after {