pageflow-internal-links 0.1.0

data/app/assets/stylesheets/pageflow/internal_links/editor/embedded_list_item.scss

@@ -0,0 +1,33 @@
+.internal_links_list_page {
+  .edit {
+    @include icon-only-button(white);
+    @include pencil-icon;
+    position: absolute;
+    display: none;
+    z-index: 2;
+    top: 5px;
+    right: 15px;
+  }
+
+  nav li.editable:hover .edit {
+    display: block;
+  }
+
+  li.highlighted .page_link {
+    z-index: 0;
+    position: relative;
+    outline: solid 2px #000;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      width: 100%;
+      height: 100%;
+      border: solid 2px #fff;
+      @include animation(blink 3s linear infinite);
+      z-index: 1;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/internal_links/editor.css.scss

@@ -0,0 +1,2 @@
+@import "./editor/embedded_grid_item";
+@import "./editor/embedded_list_item";

data/app/assets/stylesheets/pageflow/internal_links/grid.scss

@@ -0,0 +1,230 @@
+@include pageflow-page-type(internal_links_grid);
+
+.js .page .internal_links_page .scroller > div,
+.page .internal_links_page .scroller > div
+ {
+  @include pad_portrait {
+    padding: 15% 8% 5% 8%;
+  }
+}
+
+.js .page:first-child .internal_links_page .scroller > div,
+.js .page:first-child .content_and_background.internal_links_page > .page_header,
+.page:first-child .internal_links_page .scroller > div,
+.js .page:first-child .content_and_background.internal_links_page > .page_header {
+  @include pad_portrait {
+    padding: 110px 8% 5% 8%;
+  }
+}
+
+.js .page .internal_links_page {
+  .scroller > div {
+    padding: 15% 14% 5% 8%;
+    width: 100%;
+  }
+}
+
+.internal_links_page {
+  nav {
+    position: relative;
+    max-width: 1011px;
+    pointer-events: all;
+
+    ul {
+      padding: 0;
+      top: 0;
+      left: 0;
+      width: 100%;
+      margin: 0 0 30px 0;
+    }
+
+    li {
+      display: inline-block;
+      list-style: none;
+      width: 19%;
+      max-width: 192px;
+      max-height: 108px;
+      padding: 0 1% 1% 0;
+      margin:  0 -4px -4px 0;
+
+      @include phone {
+        width: 48%;
+        max-width: 350px;
+        max-height: 250px;
+        padding: 0 2% 1% 0;
+        margin: 0 -3px -1px 0;
+      }
+
+      &.empty {
+        padding: 0 1% 0 0;
+
+        @include phone {
+          display: none;
+        }
+      }
+    }
+
+    .title {
+      display: none;
+    }
+
+    .title_hover {
+      .title {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        color: white;
+        text-transform: uppercase;
+        text-align: center;
+        line-height: 1.2em;
+        letter-spacing: 0.05em;
+        font-size: 0.8em;
+        opacity: 0;
+        z-index: 1;
+        @include transform(translate3d(0,-50%,0));
+        @include transition(opacity 500ms);
+      }
+
+      &:hover {
+        .title {
+          opacity: 1;
+        }
+
+        .placeholder,
+        .thumbnail {
+          &:after {
+            opacity: 0.8;
+          }
+        }
+      }
+
+      .placeholder,
+      .thumbnail {
+        &:after {
+          opacity: 0;
+          background-color: black;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          content: "";
+          @include transition(opacity 500ms);
+        }
+      }
+    }
+
+    .placeholder,
+    .thumbnail {
+      display: block;
+      width: 100%;
+      padding-top: 56.25%;
+      background-position: center;
+      background-size: cover;
+      position: relative;
+
+      div {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    %hero {
+      max-width: 394px;
+      max-height: 226px;
+      width: 38.9%;
+
+      @include phone {
+        width: 98%;
+        max-width: 700px;
+        max-height: 600px;
+        float: none;
+      }
+
+      .placeholder,
+      .thumbnail {
+        padding-top: 58.5%;
+      }
+
+      .title {
+        font-size: 1em;
+        line-height: 1.4em;
+      }
+
+      &.empty {
+        padding-top: 22.815%;
+
+        @include phone {
+          padding-top: 0;
+        }
+      }
+    }
+
+    %hero_left {
+      @extend %hero;
+      float: left;
+      margin: 0;
+
+      @include phone {
+        float: none;
+      }
+    }
+
+    %hero_right {
+      @extend %hero;
+      float: right;
+      margin: 0;
+      padding: 0 1.3% 0 0px;
+
+      @include phone {
+        margin: 0;
+        float: none;
+      }
+    }
+
+    &[data-layout="hero_top_left"],
+    &[data-layout="hero_top_right"] {
+      li[data-reference-key="23"],
+      li[data-reference-key="24"],
+      li[data-reference-key="25"] {
+        display: none;
+      }
+    }
+
+    &[data-layout="hero_top_left"] {
+      li:first-child {
+        @extend %hero_left;
+      }
+    }
+
+    &[data-layout="hero_top_right"] {
+      li:first-child {
+        @extend %hero_right;
+      }
+    }
+  }
+}
+
+.invert .internal_links_page {
+  nav {
+    .thumbnail, .placeholder {
+      &:after {
+        background-color: white;
+      }
+    }
+
+    .title {
+      color: black;
+    }
+  }
+}
+
+.text_position_right .internal_links_page {
+  nav {
+    margin-left: auto;
+  }
+}

data/app/assets/stylesheets/pageflow/internal_links/list.scss

@@ -0,0 +1,76 @@
+@include pageflow-page-type(internal_links_list);
+
+.internal_links_list_page {
+  nav li {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    margin-bottom: 10px;
+    pointer-events: all;
+  }
+
+  nav .page_link {
+    display: block;
+    width: 250px;
+    max-height: 400px;
+    height: 400px;
+    margin-right: 10px;
+
+    background-color: rgb(20,20,20);
+    background-color: rgba(20,20,20, 0.8);
+    color: white;
+    vertical-align: top;
+    text-align: left;
+    text-decoration: none;
+    @include transition(0.3s);
+
+    @include phone {
+      width: 230px;
+      margin-right: 0;
+      margin-bottom: 10px;
+      height: 290px;
+      max-height: 290px;
+      margin-right: 5px;
+      margin-left: 5px;
+    }
+  }
+
+  nav li:hover .page_link {
+    text-decoration: underline;
+    background-color: rgba(20,20,20, 1);
+    @include transform(scale(1.05));
+
+    @include phone {
+      @include transform(scale(1));
+    }
+  }
+
+  .page_thumbnail {
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    padding-top: 56.25%;
+    position: relative;
+  }
+
+  .file_thumbnail {
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .details {
+    margin: 20px;
+    text-decoration: none;
+    color: #fff;
+
+    p {
+      width: 100%;
+      white-space: normal;
+      line-height: 1.3em;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/internal_links.css.scss

@@ -0,0 +1,2 @@
+@import "./internal_links/grid";
+@import "./internal_links/list";

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

@@ -0,0 +1,50 @@
+module Pageflow
+  module InternalLinks
+    module GridHelper
+      def internal_links_grid(entry, configuration)
+        Grid.new(self,
+                 InternalLinks::PageLinks.deserialize(entry, configuration),
+                 configuration['linked_pages_layout']).render
+      end
+
+      class Grid < Struct.new(:template, :page_links, :layout)
+        def render
+          template.render('pageflow/internal_links/grid/grid', grid: self)
+        end
+
+        def item(position)
+          page_link = page_links_by_position[position.to_i] || PageLink.null
+
+          template.content_tag(:li,
+                               page_link.target_page ? thumbnail_link(page_link, hero?(position)) : '',
+                               :data => {:reference_key => position},
+                               :class => page_link.target_page ? 'title_hover' : 'title_hover empty')
+        end
+
+        private
+
+        def page_links_by_position
+          @page_links_by_position ||= page_links.index_by(&:position)
+        end
+
+        def thumbnail_link(page_link, hero)
+          span = template.content_tag(:span, template.raw(page_link.description), :class => 'title')
+
+          template.link_to(span,
+                           "##{page_link.target_page_id}",
+                           :title => page_link.title,
+                           :data => page_link.data_attributes,
+                           :class => link_css_class(page_link.target_page, hero))
+        end
+
+        def link_css_class(page, hero)
+          ['thumbnail', template.page_thumbnail_image_class(page, hero)] * ' '
+        end
+
+        def hero?(position)
+          position == 0
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,79 @@
+module Pageflow
+  module InternalLinks
+    class PageLinks < Struct.new(:entry, :configuration)
+      def self.deserialize(entry, configuration)
+        new(entry, configuration).deserialize
+      end
+
+      def deserialize
+        page_links = parse
+
+        pages_by_perma_id = entry.pages
+          .where(perma_id: page_links.map(&:target_page_id))
+          .index_by(&:perma_id)
+
+        page_links.each do |page_link|
+          page_link.target_page = pages_by_perma_id[page_link.target_page_id]
+        end
+      end
+
+      private
+
+      def parse
+        if configuration.key?('internal_links')
+          parse_collection(configuration['internal_links'] || [])
+        else
+          parse_legacy_hash(configuration['linked_page_ids'] || {})
+        end
+      end
+
+      def parse_collection(collection)
+        collection.map do |attributes|
+          PageLink.new(attributes['target_page_id'],
+                       attributes['position'].to_i,
+                       attributes['page_transition'],
+                       attributes['description'])
+        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)
+        end
+      end
+    end
+
+    class PageLink < Struct.new(:target_page_id,
+                                :position,
+                                :page_transition,
+                                :optional_description)
+
+      attr_accessor :target_page
+
+      def title
+        target_page ? target_page.configuration['title'] : ''
+      end
+
+      def description
+        optional_description.presence || target_page_description
+      end
+
+      def data_attributes
+        {}.tap do |result|
+          result[:page] = target_page.perma_id if target_page
+          result[:page_transition] = page_transition if page_transition.present?
+        end
+      end
+
+      def self.null
+        new(nil, nil, nil, nil)
+      end
+
+      private
+
+      def target_page_description
+        target_page ? target_page.configuration['description'] : ''
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= content_tag :nav, data: {layout: grid.layout} do %>
+  <ul class="page_link_grid">
+    <% 0.upto(24).each do |index| %>
+      <%= grid.item(index) %>
+    <% end %>
+  </ul>
+<% end %>

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

@@ -0,0 +1,25 @@
+<div class="blackLayer"></div>
+<div class="content_and_background internal_links_page">
+  <div class="backgroundArea">
+    <%= background_image_div(configuration, 'background_image') %>
+    <%= 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>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+<nav>
+  <ul>
+    <%= render partial: 'pageflow/internal_links/list/page_link',
+               collection: page_links %>
+  </ul>
+</nav>

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

@@ -0,0 +1,14 @@
+<li>
+  <%= link_to("#", class: 'page_link', 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 * ' ') %>
+
+    <div class="details">
+      <p class="page_description">
+        <%= raw(strip_links(page_link.description)) %>
+      </p>
+    </div>
+  <% end %>
+</li>

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

@@ -0,0 +1,26 @@
+<div class="blackLayer"></div>
+<div class="content_and_background internal_links_list_page">
+  <div class="backgroundArea">
+    <%= background_image_div(configuration, 'background_image') %>
+    <%= 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>
+    </div>
+  </div>
+</div>

data/config/locales/de.yml

@@ -0,0 +1,61 @@
+de:
+  activerecord:
+    attributes:
+      pageflow/internal_links/page_link:
+        description: Beschreibung
+        label: Bezeichnung
+        page_transition: Seitenübergangseffekt
+        target_page_id: Zielseite
+      pageflow/page:
+        linked_pages_layout: Hervorgehobenes Element
+    values:
+      pageflow/page:
+        linked_pages_layout:
+          default: (Kein)
+          hero_top_left: Links oben
+          hero_top_right: Rechts oben
+  pageflow:
+    internal_links:
+      editor:
+        templates:
+          edit_page_link:
+            back: Zurück
+            destroy: Löschen
+          embedded:
+            grid_page_link:
+              edit: Bearbeiten
+              set: Zielseite auswählen
+        views:
+          edit_page_link_view:
+            confirm_destroy: Verweis wirklich löschen?
+            default_page_transition: (Standard)
+      grid:
+        help_entries:
+          page_type:
+            menu_item: Seitenverweise
+            text: ! '# Seitenverweise
+
+
+              Verweise auf andere Seiten innerhalb eines Pageflows
+
+              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.
+
+
+              Typische Anwendungsbeispiele: Willkommens-Seite, Kapitel-Startseite
+
+'
+        page_type_category_name: Verweise
+        page_type_description: Sammlung von Verweisen zu anderen Seiten dieses Pageflows
+        page_type_name: Seitenverweise
+      list:
+        help_entries:
+          page_type:
+            menu_item: Seitenverweise
+            text: TODO
+        page_type_category_name: Verweise
+        page_type_description: Sammlung von Verweisen zu anderen Seiten dieses Pageflows
+        page_type_name: Seitenverweis-Liste
+    internal_links_list:
+      page_type_feature_name: Seitenverweis-Liste Seitentyp

data/config/locales/en.yml

@@ -0,0 +1,64 @@
+en:
+  activerecord:
+    attributes:
+      pageflow/internal_links/page_link:
+        description: Description
+        label: Label
+        page_transition: Page transition
+        target_page_id: Target page
+      pageflow/page:
+        linked_pages_layout: Hero
+    values:
+      pageflow/page:
+        linked_pages_layout:
+          default: (none)
+          hero_top_left: Top left
+          hero_top_right: Top right
+  pageflow:
+    internal_links:
+      editor:
+        templates:
+          edit_page_link:
+            back: Back
+            destroy: Delete
+          embedded:
+            grid_page_link:
+              edit: Edit
+              set: Set
+        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
+            text: ! '# Internal Links
+
+
+              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
+
+'
+        page_type_category_name: Links
+        page_type_description: A grid of thumbnails linking to other pages inside the Pageflow
+        page_type_name: Internal Links
+      list:
+        help_entries:
+          page_type:
+            menu_item: Internal Links List
+            text: TODO
+        page_type_category_name: Links
+        page_type_description: TODO
+        page_type_name: Internal Links List
+    internal_links_list:
+      page_type_feature_name: Internal Links Page Types