Merge pull request #1186 from codevise/configurable-loading-spinner

Configurable loading spinner (14.5 Backport)
codevise · Sep 27, 2019 · c39b0e4 · c39b0e4
2 parents dc4dfb7 + b008792
commit c39b0e4
Show file tree

Hide file tree

Showing 20 changed files with 380 additions and 158 deletions.
diff --git a/app/assets/javascripts/pageflow/editor/api/widget_type.js b/app/assets/javascripts/pageflow/editor/api/widget_type.js
@@ -12,7 +12,6 @@ pageflow.WidgetType = pageflow.Object.extend({
 
   createConfigurationEditorView: function(options) {
     var constructor = this.configurationEditorView;
-
     return new constructor(_.extend({
       attributeTranslationKeyPrefixes: [
         'pageflow.editor.widgets.attributes.' + this.name,

diff --git a/app/assets/javascripts/pageflow/editor/views/widget_types/media_loading_spinner.js b/app/assets/javascripts/pageflow/editor/views/widget_types/media_loading_spinner.js
@@ -0,0 +1,18 @@
+pageflow.editor.widgetTypes.register('media_loading_spinner', {
+  configurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('loading_spinner', function() {
+        this.view(pageflow.InfoBoxView, {
+          text: I18n.t('pageflow.editor.media_loading_spinner.widget_type_info_box_text')
+        });
+        this.input('custom_background_image_id', pageflow.FileInputView, {
+          collection: 'image_files',
+          fileSelectionHandler: 'widgetConfiguration'
+        });
+        this.input('invert', pageflow.CheckBoxInputView);
+        this.input('remove_logo', pageflow.CheckBoxInputView);
+        this.input('blur_strength', pageflow.SliderInputView);
+      });
+    }
+  })
+});
diff --git a/app/assets/javascripts/pageflow/editor/views/widget_types/title_loading_spinner.js b/app/assets/javascripts/pageflow/editor/views/widget_types/title_loading_spinner.js
@@ -14,6 +14,9 @@ pageflow.editor.widgetTypes.register('title_loading_spinner', {
           collection: 'image_files',
           fileSelectionHandler: 'widgetConfiguration'
         });
+        this.input('invert', pageflow.CheckBoxInputView);
+        this.input('remove_logo', pageflow.CheckBoxInputView);
+        this.input('blur_strength', pageflow.SliderInputView);
       });
     }
   })

diff --git a/app/assets/stylesheets/pageflow/themes/default/base.scss b/app/assets/stylesheets/pageflow/themes/default/base.scss
@@ -17,9 +17,9 @@
 @import "./built_in_page_types";
 @import "./anchors";
 @import "./cookie_notice_bar";
-@import "./loading_spinner";
 @import "./logo";
 @import "./page";
+@import "./loading_spinner";
 @import "./indicators";
 @import "./navigation";
 @import "./navigation_share_box";

diff --git a/app/assets/stylesheets/pageflow/themes/default/loading_spinner.scss b/app/assets/stylesheets/pageflow/themes/default/loading_spinner.scss
@@ -46,8 +46,10 @@ $loading-spinner-glow-size: 140px !default;
 /// File extension of background and logo
 $loading-spinner-image-file-extension: "png" !default;
 
+@import "./loading_spinner/media";
 @import "./loading_spinner/title";
 
+
 @if not $custom-loading-spinner {
   .loading_spinner {
     // scss-lint:disable ImportantRule

diff --git a/app/assets/stylesheets/pageflow/themes/default/loading_spinner/media.scss b/app/assets/stylesheets/pageflow/themes/default/loading_spinner/media.scss
@@ -0,0 +1,56 @@
+$media-loading-spinner-duration: 7s;
+
+.media_loading_spinner {
+  &: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;
+    height: 100%;
+  }
+
+  &-logo {
+    @extend %pageflow_widget_margin_right !optional;
+    position: relative;
+
+    &:after {
+      @extend %background_logo;
+      content: "";
+      display: block;
+      z-index: 1;
+      opacity: 0;
+    }
+  }
+
+  &-logo-invert {
+    &:after{
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.#{$logo-image-file-extension}");
+    }
+  }
+
+  &-fade {
+    @include animation(fade_out 1s ease 1);
+    @include animation-delay($media-loading-spinner-duration + 0.5s);
+    @include animation-fill-mode(forwards);
+
+    .media_loading_spinner-logo:after {
+      @include animation(fade_in 1s ease-out 1);
+      @include animation-fill-mode(forwards);
+    }
+  }
+
+  &-invert {
+    color: #000 !important;
+  }
+
+}
+
diff --git a/app/assets/stylesheets/pageflow/themes/default/loading_spinner/title.scss b/app/assets/stylesheets/pageflow/themes/default/loading_spinner/title.scss
@@ -8,25 +8,13 @@ $title-loading-spinner-subtitle-typography: () !default;
 
 $title-loading-spinner-phone-subtitle-typography: () !default;
 
-.title_loading_spinner {
-  $duration: 7s;
+.media_loading_spinner {
 
-  &: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%;
+  &-fade {
+    .media_loading_spinner-titles {
+      @include animation(title_fade $media-loading-spinner-duration ease-out 1);
+      @include animation-fill-mode(forwards);
+    }
   }
 
   &-titles {
@@ -53,7 +41,7 @@ $title-loading-spinner-phone-subtitle-typography: () !default;
       content: "";
       display: block;
       width: 100px;
-      border-bottom: solid 2px #fff;
+      border-bottom: solid 2px;
       margin: 20px auto;
     }
 
@@ -96,36 +84,7 @@ $title-loading-spinner-phone-subtitle-typography: () !default;
       );
     }
   }
-
-  &-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%));
@@ -155,4 +114,5 @@ $title-loading-spinner-phone-subtitle-typography: () !default;
       opacity: 0;
     }
   }
-}
+
+}
diff --git a/app/models/pageflow/widget.rb b/app/models/pageflow/widget.rb
@@ -61,10 +61,14 @@ def result
       private
 
       def all
-        placeholders_by_role
-          .merge(defaults_by_role)
-          .merge(from_db_by_role)
-          .values
+        initial_widgets = placeholders_by_role.merge(defaults_by_role)
+        initial_widgets.merge(from_db_by_role) { |_role_key, old_val, new_val|
+          if old_val.configuration.present?
+            new_val.configuration = {} if new_val.configuration.nil?
+            new_val.configuration = old_val.configuration.merge(new_val.configuration)
+          end
+          new_val
+        }.values
       end
 
       def from_db_by_role
@@ -73,13 +77,15 @@ def from_db_by_role
 
       def defaults_by_role
         config.widget_types.defaults_by_role.each_with_object({}) do |(role, widget_type), result|
-          result[role] = Widget.new(role: role, type_name: widget_type.name, subject: nil)
+          result[role] = Widget.new(role: role, type_name: widget_type.name,
+                                    subject: nil,
+                                    configuration:
+                                      config.widget_types.default_configuration(role))
         end
       end
 
       def placeholders_by_role
         return {} unless options[:include_placeholders]
-
         config.widget_types.roles.each_with_object({}) do |role, result|
           result[role] = Widget.new(role: role, type_name: nil, subject: nil)
         end

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -1753,7 +1753,7 @@ en:
       main: Main storyline
       untitled: Unnamed storyline
     structured_data:
-      feature_name: Embedded structured data
+      feature_name: Embedded structured data 
     title_loading_spinner:
       feature_name: "'Title and image' loading view"
       widget_type_name: Title and Image

diff --git a/config/locales/new/loading_spinner.de.yml b/config/locales/new/loading_spinner.de.yml
@@ -0,0 +1,26 @@
+de:
+  pageflow:
+    editor:
+      widgets:
+        attributes:
+          media_loading_spinner:
+            custom_background_image_id:
+              inline_help: Standardmäßig wird das Hintergrundbild der ersten Seite verwendet.
+              label: Hintegrundbild
+            remove_logo:
+              label: Logo entfernen
+            blur_strength:
+              inline_help: Steuern Sie die Unschärfe des Hintergrundbilds.
+              label: Unschärfe
+          title_loading_spinner:
+            blur_strength:
+              inline_help: Steuern Sie die Unschärfe des Hintergrundbilds.
+              label: Unschärfe
+      media_loading_spinner:
+        widget_type_info_box_text: Dies ist eine Vorschau der Lade-Ansicht von 'Bild'. Die Animation wird ausgeführt, während die Seite geladen wird.
+  activerecord:
+    attributes:
+      pageflow/widget:
+        invert: Farben invertieren
+        remove_logo: Logo entfernen
+        blue_strength: Unschärfe
diff --git a/config/locales/new/loading_spinner.en.yml b/config/locales/new/loading_spinner.en.yml
@@ -0,0 +1,28 @@
+en:
+  pageflow:
+    editor:
+      widgets:
+        attributes:
+          media_loading_spinner:
+            custom_background_image_id:
+              inline_help: By default, the background image of the first page is used.
+              label: Background Image
+            remove_logo:
+              label: Remove logo
+            blur_strength:
+              inline_help: Control the bluriness of background image.
+              label: Blur Strength
+            title_loading_spinner:
+              blur_strength:
+                inline_help: Control the bluriness of background image.
+                label: Blur Strength
+      media_loading_spinner:
+        widget_type_info_box_text: This is a preview of the 'Image' loading view. The animation runs while the page is loading.
+    media_loading_spinner:
+      widget_type_name: Media
+  activerecord:
+    attributes:
+      pageflow/widget:
+        invert: Invert Color
+        remove_logo: Remove Logo
+        blur_strength: Bluriness
diff --git a/lib/pageflow/built_in_widget_type.rb b/lib/pageflow/built_in_widget_type.rb
@@ -61,5 +61,12 @@ def self.title_loading_spinner
                                          insert_point: :before_entry,
                                          server_rendering: true)
     end
+
+    def self.media_loading_spinner
+      Pageflow::React.create_widget_type('media_loading_spinner',
+                                         'loading_spinner',
+                                         insert_point: :before_entry,
+                                         server_rendering: true)
+    end
   end
 end
diff --git a/lib/pageflow/built_in_widget_types_plugin.rb b/lib/pageflow/built_in_widget_types_plugin.rb
@@ -9,12 +9,18 @@ def configure(config)
                                                .phone_horizontal_slideshow_mode)
       end
 
+      config.widget_types.register_widget_defaults('loading_spinner',
+                                                   'blur_strength' => 50,
+                                                   'remove_logo' => false,
+                                                   'invert' => false)
       config.widget_types.register(Pageflow::BuiltInWidgetType.classic_loading_spinner,
                                    default: true)
 
       config.features.register('title_loading_spinner') do |feature_config|
+        feature_config.widget_types.register(Pageflow::BuiltInWidgetType.media_loading_spinner)
         feature_config.widget_types.register(Pageflow::BuiltInWidgetType.title_loading_spinner)
       end
+      config.features.enable_by_default('title_loading_spinner')
 
       config.widget_types.register(Pageflow::BuiltInWidgetType.navigation, default: true)
       config.widget_types.register(Pageflow::BuiltInWidgetType.mobile_navigation, default: true)

diff --git a/lib/pageflow/widget_types.rb b/lib/pageflow/widget_types.rb
@@ -10,17 +10,21 @@ def initialize
 
     def register(widget_type, options = {})
       @widget_types[widget_type.name] = widget_type
-
       if options[:default]
         widget_type.roles.each do |role|
           defaults_by_role[role] = widget_type
         end
       end
     end
 
+    def register_widget_defaults(widget_role, default_configurations)
+      @default_configurations[widget_role] = default_configurations
+    end
+
     def clear
       @widget_types = {}
       @defaults_by_role = {}
+      @default_configurations = {}
     end
 
     def each(&block)
@@ -37,6 +41,10 @@ def fetch_by_name(name, &block)
       @widget_types.fetch(name, &block)
     end
 
+    def default_configuration(name)
+      @default_configurations[name]
+    end
+
     def find_all_by_role(role)
       select do |widget_type|
         widget_type.roles.include?(role)