pageflow-text-page 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 6f9a83d5a3827d279ee978fd001c1de8fdc71787
-  data.tar.gz: 82b4803ca518a29fc5444139787b09370fb100d5
+SHA256:
+  metadata.gz: 8096e0ff17017dd6e7d493af58e2904245d78e2f8d10ff542f99fc7063062389
+  data.tar.gz: 702a53dec8cbd4731b1d06079146221279a3c4c2e6699e89a5403d0337cb1e26
 SHA512:
-  metadata.gz: 7aab723b94de3f4cc86a64959f251c11fe8dc5727f58453c5240343ec185a3c6d1695c0654396b45e88a96cfa7ebaf8d53ba91549bfa1be9a343c5e4baa122ff
-  data.tar.gz: 28acafd49c47130dd3860b22402195598742b3405cff90051206b75a3c15f13027c12a7cc269327bd354bee2e4be9c48fcb35a2f146f5136ae1a817793119863
+  metadata.gz: 6e88cba83d513144b9c59ae07a0f8fd8cc329c35970f491e6e87324cfd78b9a837b876f1b17e32ca11aa20b0ce829a88595b4385e97c93a10d7f45f9ee47f4d8
+  data.tar.gz: d8ba5eaf7953dead13a35349a0001369ff164aa86e7b4b15b42a1972e054e0f4b81bebcdeb0318b9399237feb88530b295890910e94fedd7a9c5dfbbfcceaf93

data/CHANGELOG.md

@@ -1,20 +1,29 @@
 # CHANGELOG
 
-### Version 1.0.0
+### Version 1.1.0
 
-2017-08-11
+2018-12-10
 
-[Compare changes](https://github.com/codevise/pageflow-text-page/compare/0-3-stable...v1.0.0)
+[Compare changes](https://github.com/codevise/pageflow-text-page/compare/1-0-stable...v1.1.0)
 
-- Prevent text from overlapping content image
-  ([#11](https://github.com/codevise/pageflow-text-page/pull/11))
-- Include styles for right aligned text
-  ([#10](https://github.com/codevise/pageflow-text-page/pull/10))
-- Require pageflow 12
-  ([#9](https://github.com/codevise/pageflow-text-page/pull/9))
-- Allow to use background video
-  ([#8](https://github.com/codevise/pageflow-text-page/pull/8))
+- Add support for Pageflow 13
+  ([#16](https://github.com/codevise/pageflow-text-page/pull/16))
+- Make background color of content area configurable
+  ([#14](https://github.com/codevise/pageflow-text-page/pull/14),
+   [#20](https://github.com/codevise/pageflow-text-page/pull/20))
+- Prevent empty but padded caption bar for inline images
+  ([#19](https://github.com/codevise/pageflow-text-page/pull/19))
+- Fix transition effect on chrome 66
+  ([#18](https://github.com/codevise/pageflow-text-page/pull/18))
+- Caption theme options
+  ([#17](https://github.com/codevise/pageflow-text-page/pull/17))
+- Add theme options for content text size
+  ([#15](https://github.com/codevise/pageflow-text-page/pull/15))
+- Prevent overlapping fonts on text-page headers with orientation center
+  ([#13](https://github.com/codevise/pageflow-text-page/pull/13))
+- Remove duplicate .scroller selector
+  ([#12](https://github.com/codevise/pageflow-text-page/pull/12))
 
 See
-[0-3-stable branch](https://github.com/codevise/pageflow-text-page/blob/0-3-stable/CHANGELOG.md)
+[1-0-stable branch](https://github.com/codevise/pageflow-text-page/blob/1-0-stable/CHANGELOG.md)
 for previous changes.

data/app/assets/javascript/pageflow/text_page/editor.js

@@ -23,6 +23,14 @@ pageflow.ConfigurationEditorView.register('text_page', {
       this.input('text_title', pageflow.TextInputView);
       this.input('text', pageflow.TextAreaInputView);
       this.input('invert_text', pageflow.CheckBoxInputView);
+      this.input('text_page_background_color', pageflow.ColorInputView, {
+        defaultValue: function(invertText) {
+          return invertText ? '#000000' : '#ffffff';
+        },
+        defaultValueBinding: 'invert_text',
+
+        swatches: usedBackgroundColors()
+      });
 
       this.input('text_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
@@ -49,5 +57,11 @@ pageflow.ConfigurationEditorView.register('text_page', {
       });
       this.group('options');
     });
+
+    function usedBackgroundColors() {
+      return _.chain(pageflow.pages.map(function(page) {
+        return page.configuration.get('text_page_background_color');
+      })).uniq().compact().value();
+    }
   }
 });

data/app/assets/javascript/pageflow/text_page/page_type.js

@@ -221,8 +221,15 @@ pageflow.react.registerPageTypeWithDefaultBackground('text_page', {
     });
 
     pageElement.find('.content_and_background').toggleClass('invert_text', !!configuration.get('invert_text'));
+    pageElement.find('.image_fullscreen_view').css({
+      backgroundColor: configuration.get('text_page_background_color') || ''
+    });
     pageElement.data('invertIndicator', !configuration.get('invert_text'));
 
+    pageElement.find('.content_background_layer').css({
+      backgroundColor: configuration.get('text_page_background_color') || ''
+    });
+
     pageElement.find('.shadow, .header_background_layer').css({
       opacity: configuration.get('gradient_opacity') / 100
     });

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

@@ -1 +1,54 @@
+/// Used to scale down text title and content text
+$text-page-content-text-base-font-size: 0.8em !default;
+
+/// Used to undo scaling of text title and content text on phone
+$text-page-content-text-phone-base-font-size: 1em !default;
+
+/// Typography of the header displayed above the content text
+/// paragraph.
+$text-page-text-title-typography: () !default;
+
+/// Inline Image Caption Text box Variables
+
+$text-page-inline-image-caption-background-color: black !default;
+$text-page-inline-image-caption-text-color: white !default;
+
+$text-page-inline-image-caption-inverted-background-color: null !default;
+$text-page-inline-image-caption-inverted-text-color: null !default;
+
+$text-page-inline-image-caption-padding: 7px 10px !default;
+
 @include pageflow-page-type-pictograms("text_page");
+
+.page .text_page {
+  .contentText {
+    font-size: $text-page-content-text-base-font-size;
+
+    @include phone {
+      font-size: $text-page-content-text-phone-base-font-size;
+    }
+
+    h3 {
+      @include typography(
+        $text-page-text-title-typography,
+        (
+          padding-bottom: 2em,
+          font-size: 1.5em
+        )
+      );
+    }
+  }
+
+  .inline_image_text {
+    background-color: $text-page-inline-image-caption-background-color;
+    color: $text-page-inline-image-caption-text-color;
+    padding: $text-page-inline-image-caption-padding;
+  }
+
+  &.invert_text .inline_image_text {
+    background-color: $text-page-inline-image-caption-inverted-background-color;
+    color: $text-page-inline-image-caption-inverted-text-color;
+  }
+
+
+}

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

@@ -55,7 +55,7 @@ $inverted-background-color: black;
     }
   }
 
-  .scroller, .scroller {
+  .scroller {
     > div {
       padding: 0;
       position: relative;
@@ -90,7 +90,12 @@ $inverted-background-color: black;
             padding: 2em 0;
             margin: 0;
             span {
-              margin: 0 auto;
+              margin-right: auto;
+              margin-left: auto;
+            }
+
+            .subtitle {
+              margin-bottom: 0em;
             }
 
             padding-right: $nav-bar-margin;
@@ -123,7 +128,6 @@ $inverted-background-color: black;
         }
 
         .contentText {
-          font-size: 0.8em;
           max-width: 500px;
           margin: auto;
           min-height: 300px;
@@ -132,7 +136,6 @@ $inverted-background-color: black;
 
           @include phone {
             max-width: 84%;
-            font-size: 1em;
           }
 
           @include pad_portrait {
@@ -141,8 +144,6 @@ $inverted-background-color: black;
 
           h3 {
             width: 100%;
-            padding-bottom: 2em;
-            font-size: 1.5em;
           }
 
           @include pad_portrait {
@@ -194,14 +195,7 @@ $inverted-background-color: black;
               outline: 0;
             }
             div {
-              background-color: black;
               width: auto;
-              color: white;
-
-              span {
-                padding: 10px;
-                display: block;
-              }
             }
 
             &:before, &:after {
@@ -214,10 +208,8 @@ $inverted-background-color: black;
               background-position: 0 0;
               background-repeat: no-repeat;
               position: absolute;
-              background-color: transparent;
               top: 18px;
               right: 18px;
-              color: transparent;
               text-indent: -4000px;
               opacity: 0;
               cursor: pointer;
@@ -467,8 +459,8 @@ $inverted-background-color: black;
     background-color: white;
   }
 
-  .content_and_background {
-    @include transition(1s ease);
+  &.active .content_and_background {
+    @include transition (opacity 1s ease);
   }
 
   &.active.animate-in-forwards .content_and_background {
@@ -556,13 +548,13 @@ $inverted-background-color: black;
 }
 
 .slideshow {
-  .text_page p, h3 span, .inline_image_text span, .fixed_header_area .page_header_wrapper {
+  .text_page p, h3 span, .inline_image_text, .fixed_header_area .page_header_wrapper {
     @include transition(0.5s ease);
   }
-  .hiddenByOverlay .text_page {
+  .hidden_by_overlay .text_page {
     .content {
       opacity: 1;
-      p, h3 span, .inline_image_text span {
+      p, h3 span, .inline_image_text {
         opacity: 0;
       }
     }
@@ -647,11 +639,9 @@ section.hide_title {
     .inline_image_text {
       position: absolute;
       bottom: 0;
-      background-color: black;
-      color: white;
-      padding: 15px 2%;
       text-align: left;
-      width: 96%;
+      width: 100%;
+      box-sizing: border-box;
     }
   }
   .invert_text & {

data/app/views/pageflow/text_page/page.html.erb

@@ -1,5 +1,5 @@
 <div class="blackLayer"></div>
-<div class="content_and_background text_page <% if configuration['sticky_inline_image'] %>sticky_inline_image<% end %> <%= background_asset_present_css_class(configuration) %> <% if configuration['invert_text'] %>invert_text<% end %>">
+<div class="content_and_background text_page <% if configuration['sticky_inline_image'].present? %>sticky_inline_image<% end %> <%= background_asset_present_css_class(configuration) %> <% if configuration['invert_text'].present? %>invert_text<% end %>">
   <div class="backgroundArea">
     <%= page_background_asset(configuration) %>
     <%= shadow_div :opacity => configuration['gradient_opacity'] %>
@@ -15,12 +15,12 @@
       </div>
     </div>
   </div>
-  <div class="content scroller inline_text_position_<%= configuration['inline_text_position'] ? configuration['inline_text_position'] : 'left'  %>">
+  <div class="content scroller inline_text_position_<%= configuration['inline_text_position'].present? ? configuration['inline_text_position'] : 'left'  %>">
     <div>
       <div class="contentWrapper">
         <div class="page_spacer"></div>
         <div class="contentInnerWrapper">
-          <div class="content_background_layer"></div>
+          <div class="content_background_layer" style="<%= configuration['text_page_background_color'].present? ? "background-color: #{configuration['text_page_background_color']}" : '' %>"></div>
           <div class="page_header">
             <div class="header_background_layer" style="opacity: <%= configuration['gradient_opacity'].to_i / 100.0 %>"></div>
             <h2>
@@ -34,14 +34,17 @@
             <h3>
               <span class="text_title"><%= configuration['text_title'] %></span>
             </h3>
-            <a <% if !configuration['prevent_fullscreen'] %> href="<%= fullscreen_image_url(configuration['text_image_id']) %>" target="_blank"<% else %> href="#" <% end %> class="inline_image <% if !configuration['text_image_id'] %>no_image_assigned<% end %>
-              <% if !configuration['prevent_fullscreen'] %>allow_fullscreen<% end %>">
+            <%= link_to(configuration['prevent_fullscreen'].blank? ? fullscreen_image_url(configuration['text_image_id']) : '#',
+                        target: ("_blank" if configuration['prevent_fullscreen'].blank?),
+                        class: 'inline_image' \
+                               "#{' no_image_assigned' if configuration['text_image_id'].blank?}" \
+                               "#{' allow_fullscreen' if configuration['prevent_fullscreen'].blank?}") do %>
               <%= content_image(configuration['text_image_id'], configuration['image_description']) %>
-              <% if configuration['image_description'] %>
-                <div class="inline_image_text"><% if !configuration['image_description'].blank? %><span><%= configuration['image_description'] %></span><% end %></div>
+              <% if configuration['image_description'].present? %>
+                <div class="inline_image_text"><span><%= configuration['image_description'] %></span></div>
               <% end %>
               <div class="bigscreen_toggler" tabindex="4" title="<%= t('pageflow.public.enlarge_view') %>"><%= t('pageflow.public.fullscreen') %></div>
-            </a>
+            <% end %>
             <p>
               <%= raw configuration['text'] %>
             </p>
@@ -50,12 +53,12 @@
       </div>
     </div>
   </div>
-  <div class="image_fullscreen_view">
+  <div class="image_fullscreen_view" style="<%= configuration['text_page_background_color'].present? ? "background-color: #{configuration['text_page_background_color']}" : '' %>">
     <div class="image_fullscreen_wrapper">
       <div class="image_fullscreen_inner_wrapper">
       <%= content_image_large(configuration['text_image_id'], configuration['image_description']) %>
-      <% if configuration['image_description'] %>
-        <div class="inline_image_text"><% if !configuration['image_description'].blank? %><span><%= configuration['image_description'] %></span><% end %></div>
+      <% if configuration['image_description'].present? %>
+        <div class="inline_image_text"><span><%= configuration['image_description'] %></span></div>
       <% end %>
       </div>
     </div>

data/config/locales/de.yml

@@ -10,6 +10,7 @@ de:
         sticky_inline_image: Bild an Seite haften
         text_coverage: Textabdeckung
         text_image_id: Bild im Text
+        text_page_background_color: Hintergrundfarbe
         text_titel: Überschrift
         text_title: Texttitel
         title_position: Titelposition
@@ -43,11 +44,12 @@ de:
           header: Titel
       inline_help:
         pageflow/page:
-          invert_text: Vertauscht Text- und Hintergrundfarbe im Fließtextbereich.
+          invert_text: Weißen Text auf dunklem Grund anzeigen.
           prevent_fullscreen: Verhindert, dass das Fließtextbild bei Klick auf das Bild im Vollbild dargestellt wird.
           sticky_inline_image: Das Bild wird zunächst zusammen mit dem Text gescrollt, bleibt dann aber vertikal zentriert stehen, während der Text weiter scrollt.
           text: Dies ist der Bereich für den Fließtext dieser Seite. Dieser Seitentyp ist für lange Texte optimiert. Bei Kurztexten sollte auf andere Seitentypen zurückgegriffen werden.
           text_coverage: Definiert, wie viel Text (und wie viel vom Titelbild) anfangs sichtbar ist.
           text_image_id: Dieses Bild wird neben dem Text angezeigt.
+          text_page_background_color: Nutze die 'Farben des Textbereichs invertieren' Option, um einen ausreichenden Kontrast des Texts zur gewählten Hintergrundfarbe sicherzustellen.
           topasset_dim: Titlebild abhängig von der Scroll-Position farblich abblenden.
           topasset_parallax: Titelbild abhängig von der Scroll-Position vertikal verschieben.

data/config/locales/en.yml

@@ -10,6 +10,7 @@ en:
         sticky_inline_image: Sticky image position
         text_coverage: Text coverage
         text_image_id: Inline image
+        text_page_background_color: Background color
         text_titel: Title
         text_title: Text title
         title_position: Title position
@@ -43,11 +44,12 @@ en:
           header: Title area
       inline_help:
         pageflow/page:
-          invert_text: Switches text and background colors
+          invert_text: Display white text on dark background.
           prevent_fullscreen: Prevents the image from opening fullscreen on click
           sticky_inline_image: The image scrolls with the text but eventually remains at a vertically centered position.
           text: This is the main contents of the page. This page type is made for long texts. Use a different page type if your main content text is short.
           text_coverage: Determines how much of the title image is visible initially.
           text_image_id: This image is displayed alongside the text.
+          text_page_background_color: Use the 'invert text area color' option to make sure there is sufficient contrast between text and selected background color.
           topasset_dim: Animate the opacity of the title image while scrolling down.
           topasset_parallax: Translate the title image vertically while scrolling down.

data/lib/pageflow/text_page/engine.rb

@@ -6,8 +6,7 @@ module Pageflow
       isolate_namespace Pageflow::TextPage
 
       config.autoload_paths << File.join(config.root, 'lib')
+      config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
     end
   end
 end
-
-

data/lib/pageflow/text_page/version.rb

@@ -1,5 +1,5 @@
 module Pageflow
   module TextPage
-    VERSION = '1.0.0'.freeze
+    VERSION = '1.1.0'.freeze
   end
 end

data/pageflow-text-page.gemspec

@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
 
   spec.required_ruby_version = '~> 2.1'
 
-  spec.add_runtime_dependency 'pageflow', '~> 12.x'
+  spec.add_runtime_dependency 'pageflow', ['>= 12.2.x', '< 14']
   spec.add_runtime_dependency 'pageflow-public-i18n', '~> 1.0'
 
   spec.add_development_dependency 'bundler', '~> 1.0'

metadata

@@ -1,29 +1,35 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-text-page
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Codevise Solutions Ltd.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-11 00:00:00.000000000 Z
+date: 2018-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 12.2.x
+    - - "<"
       - !ruby/object:Gem::Version
-        version: 12.x
+        version: '14'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 12.2.x
+    - - "<"
       - !ruby/object:Gem::Version
-        version: 12.x
+        version: '14'
 - !ruby/object:Gem::Dependency
   name: pageflow-public-i18n
   requirement: !ruby/object:Gem::Requirement
@@ -136,7 +142,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.8
+rubygems_version: 2.7.5
 signing_key: 
 specification_version: 4
 summary: Pageflow Page Type text pages