pageflow-internal-links 0.2.0 → 1.4.0

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

@@ -2,3 +2,6 @@
                                        $directory: "pageflow/internal_links/themes/default/pictograms/grid");
 @include pageflow-page-type-pictograms("internal_links_list",
                                        $directory: "pageflow/internal_links/themes/default/pictograms/list");
+
+@import "./default/grid/colors";
+@import "./default/grid/typography";

data/app/assets/stylesheets/pageflow/internal_links/themes/default/grid/colors.scss

@@ -0,0 +1,41 @@
+/// Color of overlay displayed when hovering a grid item
+$internal-links-grid-item-active-background-color: rgba(0, 0, 0, 0.8) !default;
+
+/// Color of text displayed when hovering a grid item
+$internal-links-grid-item-active-text-color: #fff !default;
+
+/// Color of overlay displayed when hovering a grid item on an inverted page
+$internal-links-grid-item-inverted-active-background-color: rgba(255, 255, 255, 0.8) !default;
+
+/// Color of text displayed when hovering a grid item on an inverted page
+$internal-links-grid-item-inverted-active-text-color: #000 !default;
+
+.internal_links_page {
+  nav {
+    .title {
+      color: $internal-links-grid-item-active-text-color;
+    }
+
+    .placeholder,
+    .thumbnail {
+      &:after {
+        background-color: $internal-links-grid-item-active-background-color;
+      }
+    }
+  }
+}
+
+.invert .internal_links_page {
+  nav {
+    .thumbnail,
+    .placeholder {
+      &:after {
+        background-color: $internal-links-grid-item-inverted-active-background-color;
+      }
+    }
+
+    .title {
+      color: $internal-links-grid-item-inverted-active-text-color;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/internal_links/themes/default/grid/typography.scss

@@ -0,0 +1,35 @@
+// Typography of the title displayed in grid items
+$internal-links-grid-item-typography: () !default;
+
+// Typography of the title displayed in large grid item
+$internal-links-grid-hero-item-typography: () !default;
+
+.internal_links_page {
+  nav {
+    .title {
+      @include typography(
+        $internal-links-grid-item-typography,
+        (
+          text-transform: uppercase,
+          text-align: center,
+          line-height: 1.2em,
+          letter-spacing: 0.05em,
+          font-size: 0.8em
+        )
+      );
+    }
+
+    &[data-layout="hero_top_left"],
+    &[data-layout="hero_top_right"] {
+      .title {
+        @include typography(
+          $internal-links-grid-hero-item-typography,
+          (
+            font-size: 1em,
+            line-height: 1.4em
+          )
+        );
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/internal_links/themes/default/list_as_multiple_choice.scss

@@ -2,6 +2,14 @@
   $internal-links-list-main-color: $main-color-dark !default;
   $internal-links-list-item-background-color: rgba(48, 48, 48, 0.8) !default;
 
+  .page_text {
+    margin-bottom: 250px;
+
+    @include mobile {
+      margin-bottom: 0;
+    }
+  }
+
   nav {
     position: absolute;
     bottom: 6.666%;
@@ -46,21 +54,66 @@
       -ms-interpolation-mode: nearest-neighbor;
 
       .details {
-        position: absolute;
-        top: 50%;
-        margin: 0;
-        padding: 10%;
-        width: 100%;
-        box-sizing: border-box;
-        @include transform(translate(0,-50%));
-
         p:last-of-type {
           margin: 0;
         }
       }
 
-      .page_thumbnail {
-        display: none;
+      &.no_custom_thumbnail {
+        .details {
+          position: absolute;
+          top: 50%;
+          margin: 0;
+          padding: 10%;
+          width: 100%;
+          box-sizing: border-box;
+          @include transform(translate(0,-50%));
+
+          p:last-of-type {
+            margin: 0;
+          }
+        }
+
+        .page_thumbnail {
+          display: none;
+        }
+      }
+
+      &.custom_thumbnail {
+        .details {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          padding: 7px 10px;
+          margin: 0;
+          font-size: 15px;
+
+          @media (max-width: 500px) {
+            font-size: 12px;
+          }
+        }
+
+        &.no_own_description {
+          .details {
+            display: none;
+          }
+        }
+
+        .page_thumbnail {
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 35px;
+          padding: 0;
+        }
+
+        .page_thumbnail,
+        .page_thumbnail div {
+          background-position: 50% 50%;
+        }
       }
     }
     li:hover {
@@ -117,4 +170,4 @@
       }
     }
   }
-}
+}

data/app/helpers/pageflow/internal_links/grid_helper.rb

@@ -3,7 +3,7 @@ module Pageflow
     module GridHelper
       def internal_links_grid(entry, configuration)
         Grid.new(self,
-                 InternalLinks::PageLinks.deserialize(entry, configuration),
+                 InternalLinks::PageLinks.deserialize(self, entry, configuration),
                  configuration['linked_pages_layout']).render
       end
 

data/app/helpers/pageflow/internal_links/list_helper.rb

@@ -3,7 +3,7 @@ module Pageflow
     module ListHelper
       def internal_links_list(entry, configuration)
         render('pageflow/internal_links/list/list',
-               page_links: InternalLinks::PageLinks.deserialize(entry, configuration))
+               page_links: InternalLinks::PageLinks.deserialize(self, entry, configuration))
       end
     end
   end

data/app/helpers/pageflow/internal_links/page_links.rb

@@ -1,8 +1,8 @@
 module Pageflow
   module InternalLinks
-    class PageLinks < Struct.new(:entry, :configuration)
-      def self.deserialize(entry, configuration)
-        new(entry, configuration).deserialize
+    class PageLinks < Struct.new(:template, :entry, :configuration)
+      def self.deserialize(template, entry, configuration)
+        new(template, entry, configuration).deserialize
       end
 
       def deserialize
@@ -29,24 +29,28 @@ module Pageflow
 
       def parse_collection(collection)
         collection.map do |attributes|
-          PageLink.new(attributes['target_page_id'],
+          PageLink.new(template,
+                       attributes['target_page_id'],
                        attributes['position'].to_i,
                        attributes['page_transition'],
-                       attributes['description'])
+                       attributes['description'],
+                       attributes['thumbnail_image_id'])
         end.sort_by(&:position)
       end
 
       def parse_legacy_hash(hash)
         hash.map do |position, target_page_id|
-          PageLink.new(target_page_id, (position.to_i - 1), nil, nil)
+          PageLink.new(template, target_page_id, (position.to_i - 1), nil, nil, nil)
         end
       end
     end
 
-    class PageLink < Struct.new(:target_page_id,
+    class PageLink < Struct.new(:template,
+                                :target_page_id,
                                 :position,
                                 :page_transition,
-                                :optional_description)
+                                :optional_description,
+                                :custom_thumbnail_image_id)
 
       attr_accessor :target_page
 
@@ -58,6 +62,19 @@ module Pageflow
         optional_description.presence || target_page_description
       end
 
+      def thumbnail_file
+        custom_thumbnail_file ||
+          (target_page && template.page_thumbnail_file(target_page))
+      end
+
+      def css_class
+        [
+          'page_link',
+          custom_thumbnail_file ? 'custom_thumbnail' : 'no_custom_thumbnail',
+          optional_description.present? ? 'own_description' : 'no_own_description'
+        ].compact.join(' ')
+      end
+
       def data_attributes
         {}.tap do |result|
           result[:page] = target_page.perma_id if target_page
@@ -71,6 +88,11 @@ module Pageflow
 
       private
 
+      def custom_thumbnail_file
+        @custom_thumbnail_file = template.find_file_in_entry(ImageFile,
+                                                             custom_thumbnail_image_id)
+      end
+
       def target_page_description
         target_page ? target_page.configuration['description'] : ''
       end

data/app/views/pageflow/internal_links/grid/page.html.erb

@@ -1,24 +1,14 @@
-<div class="blackLayer"></div>
+<div class="black_layer"></div>
 <div class="content_and_background internal_links_page">
-  <div class="backgroundArea">
-    <%= background_image_div(configuration, 'background_image') %>
+  <div class="page_background">
+    <%= page_background_asset(page) %>
     <%= shadow_div :opacity => configuration['gradient_opacity'] %>
   </div>
   <div class="content scroller">
     <div>
-      <div class="contentWrapper">
-        <div class="page_header">
-          <h2>
-            <span class="tagline"><%= configuration['tagline'] %></span>
-            <span class="title"><%= configuration['title'] %></span>
-            <span class="subtitle"><%= configuration['subtitle'] %></span>
-          </h2>
-          <%= background_image_tag(configuration['background_image_id'], {"class" => "print_image"}) %>
-        </div>
-        <div class="contentText">
-          <p><%= raw configuration['text'] %></p>
-        </div>
-        <%= internal_links_grid(@entry, configuration) %>
+      <div class="content_wrapper">
+        <%= page_default_content(page) %>
+        <%= internal_links_grid(entry, configuration) %>
       </div>
     </div>
   </div>

data/app/views/pageflow/internal_links/list/_page_link.html.erb

@@ -1,10 +1,9 @@
 <li>
-  <%= link_to("#", class: 'page_link', data: page_link.data_attributes) do %>
+  <%= link_to("#", class: page_link.css_class, data: page_link.data_attributes) do %>
     <%= content_tag(:div,
                     '',
                     class: ['page_thumbnail',
-                            page_link.target_page ? page_thumbnail_image_class(page_link.target_page, false) : nil].compact * ' ') %>
-
+                            file_thumbnail_css_class(page_link.thumbnail_file, :link_thumbnail_large)].compact * ' ') %>
     <div class="details">
       <p class="page_description">
         <%= raw(strip_links(page_link.description)) %>

data/app/views/pageflow/internal_links/list/page.html.erb

@@ -1,25 +1,14 @@
-<div class="blackLayer"></div>
+<div class="black_layer"></div>
 <div class="content_and_background internal_links_list_page">
-  <div class="backgroundArea">
-    <%= background_image_div(configuration, 'background_image') %>
+  <div class="page_background">
+    <%= page_background_asset(page) %>
     <%= shadow_div :opacity => configuration['gradient_opacity'] %>
   </div>
   <div class="content scroller">
     <div>
-      <div class="contentWrapper">
-        <div class="page_header">
-          <h2>
-            <span class="tagline"><%= configuration['tagline'] %></span>
-            <span class="title"><%= configuration['title'] %></span>
-            <span class="subtitle"><%= configuration['subtitle'] %></span>
-          </h2>
-          <%= background_image_tag(configuration['background_image_id'], {"class" => "print_image"}) %>
-        </div>
-        <div class="contentText">
-          <p><%= raw configuration['text'] %></p>
-        </div>
-
-        <%= internal_links_list(@entry, configuration) %>
+      <div class="content_wrapper">
+        <%= page_default_content(page) %>
+        <%= internal_links_list(entry, configuration) %>
       </div>
     </div>
   </div>

data/bin/rspec

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'rspec' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+bundle_binstub = File.expand_path("../bundle", __FILE__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 150) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("rspec-core", "rspec")

data/config/locales/de.yml

@@ -1,4 +1,8 @@
 de:
+  activerecord:
+    attributes:
+      pageflow/internal_links/page_link:
+        thumbnail_image_id: Bild
   pageflow:
     internal_links:
       editor:
@@ -13,7 +17,6 @@ de:
         views:
           edit_page_link_view:
             confirm_destroy: Verweis wirklich löschen?
-            default_page_transition: "(Standard)"
       grid:
         help_entries:
           page_type:
@@ -25,6 +28,8 @@ de:
               Im Gegensatz zur externen Verweis-Seite, werden hier interne Seiten innerhalb des
               Pageflows verlinkt. Dies bietet sich an, um den User gezielt durch den Pageflow zu leiten.
 
+              Für den Hintergrund kann ein Bild oder Video verwendet werden.
+
               Typische Anwendungsbeispiele: Willkommens-Seite, Kapitel-Startseite
         page_attributes:
           linked_pages_layout:
@@ -46,6 +51,8 @@ de:
 
               Links auf andere Seiten des Pageflows dargestellt als horizontal angeordnete Boxen mit einem kurzen Text.
 
+              Für den Hintergrund kann ein Bild oder Video verwendet werden.
+
               Typische Anwendungsbeispiele: Frage/Antwort-Seite, interaktives Interview, Quiz
         page_type_category_name: Verweise
         page_type_description: Verweise auf andere Seiten als Reihe von Antworten
@@ -56,3 +63,7 @@ de:
           label: Beschreibung
     internal_links_list:
       page_type_feature_name: Multiple Choice Seitentyp
+    ui:
+      inline_help:
+        pageflow/internal_links/page_link:
+          thumbnail_image_id: Ein Bild in der Verweis-Box anzeigen.

data/config/locales/en.yml

@@ -1,4 +1,8 @@
 en:
+  activerecord:
+    attributes:
+      pageflow/internal_links/page_link:
+        thumbnail_image_id: Image
   pageflow:
     internal_links:
       editor:
@@ -13,21 +17,11 @@ en:
         views:
           edit_page_link_view:
             confirm_destroy: Really delete this link?
-            default_page_transition: Default page transition
       grid:
         help_entries:
           page_type:
             menu_item: Internal Links Grid
-            text: |-
-              # Internal Links Grid
-
-              References to other pages inside a Pageflow
-
-              In contrast to external link, you can link to pages inside
-              your Pageflow. This page type helps you guide your users
-              through your Pageflow.
-
-              Examples of application: Welcome page, chapter homepage
+            text: "# Internal Links Grid\n\nReferences to other pages inside a Pageflow\n\nIn contrast to external link, you can link to pages inside\nyour Pageflow. This page type helps you guide your users\nthrough your Pageflow. \n\nYou can use an image or video for the background.\n\nExamples of application: Welcome page, chapter homepage"
         page_attributes:
           linked_pages_layout:
             inline_help: Emphasize one of the thumbnails.
@@ -43,13 +37,14 @@ en:
         help_entries:
           page_type:
             menu_item: Multiple Choice
-            text: |+
+            text: |-
               # Multiple Choice
 
               A collection of links to other pages of the Pageflow displayed as a row of boxes with some text.
 
-              Examples of application: Question/answer page, interactive interview, quiz
+              You can use an image or video for the background.
 
+              Examples of application: Question/answer page, interactive interview, quiz
         page_type_category_name: Links
         page_type_description: Links to other pages as collection of answers
         page_type_name: Multiple Choice
@@ -59,3 +54,7 @@ en:
           label: Description
     internal_links_list:
       page_type_feature_name: Multiple Choice Page Type
+    ui:
+      inline_help:
+        pageflow/internal_links/page_link:
+          thumbnail_image_id: Display image inside of page link box.