pageflow-timeline-page 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 994702dcbaaf89d67d961e7979925807849c40f8
+  data.tar.gz: 7da5bfb08e81052571929656bd2a4e6e1b56b4db
+SHA512:
+  metadata.gz: 73daa8bc375381fb3cb1551b0367c0c78628906322171d069c8ae9750ad9169df01b5bf2fad04a2ca377564fac7b362a3b605c7cf253721e3bc5ac025ec97ca7
+  data.tar.gz: 9bf524ca7c9418a2f68f2d504e1a47982a69efb4441416f248450c9de2a56587920433ca28189eccf5b3b934aef38b172dbe788953d78f0721dbae445a44f97a

data/.gitignore

@@ -0,0 +1,23 @@
+*.gem
+*.rbc
+*.sqlite3
+.bundle
+.config
+.yardoc
+.idea
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+log
+Gemfile.lock
+
+.localeapp
+.localeapp

data/CHANGELOG.md

@@ -0,0 +1,7 @@
+# CHANGELOG
+
+### Version 0.1.0
+
+2016-06-09
+
+- Initial release.

data/Gemfile

@@ -0,0 +1,10 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in chart.gemspec
+gemspec
+
+# Rails 4 compat
+gem 'activeadmin', :git => 'https://github.com/codevise/active_admin.git', :branch => 'rails4'
+gem 'ransack'
+gem 'inherited_resources', '1.4.1'
+gem 'formtastic', '2.3.0.rc2'

data/README.md

@@ -0,0 +1,56 @@
+# Pageflow Timeline Page
+
+[![Gem Version](https://badge.fury.io/rb/pageflow-timeline-page.svg)](http://badge.fury.io/rb/pageflow-timeline-page)
+
+Page type to display a chronological list of page links.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    # Gemfile
+    gem 'pageflow-timeline-page'
+
+Register the plugin:
+
+    # config/initializers/pageflow.rb
+    Pageflow.configure do |config|
+      config.plugin(Pageflow::TimelinePage.plugin)
+    end
+
+Include javascripts and stylesheets:
+
+    # app/assets/javascripts/components.js
+    //= require "pageflow/timeline_page/components"
+
+    # app/assets/javascripts/pageflow/application.js
+    //= require "pageflow/timeline_page"
+
+    # app/assets/javascripts/pageflow/editor.js
+    //= require pageflow/timeline_page/editor
+
+    # app/assets/stylesheets/pageflow/application.css.scss
+    @import "pageflow/timeline_page";
+
+    # app/assets/stylesheets/pageflow/themes/default.css.scss
+    @import "pageflow/timeline_page/themes/default";
+
+Execute `bundle install` and restart the application server.
+
+Now you can enable the page type in your feature settings.
+
+## Troubleshooting
+
+If you run into problems while installing the page type, please also
+refer to the
+[Troubleshooting](https://github.com/codevise/pageflow/wiki/Troubleshooting)
+wiki page in the
+[Pageflow repository](https://github.com/codevise/pageflow). If that
+doesn't help, consider
+[filing an issue](https://github.com/codevise/pageflow-timeline-page/issues).
+
+## Contributing Locales
+
+Edit the translations directly on the
+[pageflow-timeline-page](http://www.localeapp.com/projects/public?search=tf/pageflow-timeline-page)
+locale project.

data/Rakefile

@@ -0,0 +1,10 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+Bundler::GemHelper.install_tasks
+
+require 'semmy'
+Semmy::Tasks.install

data/app/assets/javascripts/pageflow/timeline_page/components/page.jsx

@@ -0,0 +1,28 @@
+(function() {
+  class Page extends React.Component {
+    render() {
+      var {PageWrapper,
+           PageBackground, PageBackgroundImage, PageShadow,
+           PageContent, PageHeader, PageText} = pageflow.react.components;
+      var {Timeline} = pageflow.timelinePage;
+
+      return (
+        <PageWrapper>
+          <PageBackground>
+            <PageBackgroundImage page={this.props.page} />
+            <PageShadow page={this.props.page} />
+          </PageBackground>
+
+          <PageContent>
+            <PageHeader page={this.props.page} />
+            <PageText page={this.props.page} />
+            <Timeline pageLinks={this.props.page.pageLinks}
+                      layout={this.props.page.timelineLayout}/>
+          </PageContent>
+        </PageWrapper>
+      );
+    }
+  };
+
+  pageflow.timelinePage.Page = pageflow.react.createPage(Page);
+}());

data/app/assets/javascripts/pageflow/timeline_page/components/timeline.jsx

@@ -0,0 +1,27 @@
+(function() {
+  class Timeline extends React.Component {
+    render() {
+      return (
+        <ul className="timeline">
+          {this.renderTimelineItems()}
+        </ul>
+      );
+    }
+
+    renderTimelineItems() {
+      var {TimelineItem} = pageflow.timelinePage;
+
+      return this.pageLinks().map((pageLink) => {
+        return (
+          <TimelineItem timelineLayout={this.props.layout} pageLink={pageLink} key={pageLink.id} />
+        );
+      });
+    }
+
+    pageLinks() {
+      return this.props.pageLinks || [];
+    }
+  };
+
+  pageflow.timelinePage.Timeline = pageflow.react.createContainer(Timeline);
+}());

data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item.jsx

@@ -0,0 +1,73 @@
+
+(function() {
+  var resolve = pageflow.react.resolve;
+
+  class TimelineItem extends React.Component {
+    render() {
+      var {PageLink, LazyLoadedPageThumbnail} = pageflow.react.components;
+      var {TimelineItemSpacer} = pageflow.timelinePage;
+      var targetPage = this.props.pageLink.targetPage;
+
+      return (
+        <li className={this.className()}>
+          <TimelineItemSpacer pageLink={this.props.pageLink} />
+
+          <div className="timeline_item-wrapper">
+            <PageLink pageLink={this.props.pageLink}>
+              <LazyLoadedPageThumbnail className="timeline_item-thumbnail"
+                                       imageStyle="thumbnail_large"
+                                       page={targetPage}
+                                       customThumbnailId={this.props.pageLink.thumbnailImageId} />
+
+              <div className="timeline_item-caption">
+                <span className="timeline_item-tagline">{this.props.pageLink.tagline}</span>
+                {this.caption()}
+              </div>
+            </PageLink>
+          </div>
+        </li>
+      );
+    }
+
+    className() {
+      return [
+        'timeline_item',
+        'position_' + (this.props.pageLink.timelineItemPosition || 'left'),
+        'alignment_' + this.alignment(),
+        this.props.pageLink.timelineItemSize || 'medium'
+      ].join(' ');
+    }
+
+    alignment() {
+      var position = this.props.pageLink.timelineItemPosition;
+
+      if (this.props.timelineLayout === 'right') {
+        return 'right';
+      }
+      else if (this.props.timelineLayout === 'left') {
+        return 'left';
+      }
+      else if (this.props.timelineLayout === 'margin') {
+        return position === 'right' ? 'right' : 'left';
+      }
+      else {
+        return position === 'right' ? 'left' : 'right';
+      }
+    }
+
+    caption() {
+      return this.props.pageLink.title ||
+             (this.props.pageLink.targetPage && this.props.pageLink.targetPage.title);
+    }
+  };
+
+  pageflow.timelinePage.TimelineItem = pageflow.react.createContainer(TimelineItem, {
+    fragments: {
+      pageLink: {
+        targetPage: resolve('page', {
+          property: 'targetPageId'
+        })
+      }
+    }
+  });
+}());

data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item_editor_menu.jsx

@@ -0,0 +1,96 @@
+(function() {
+  var mutate = pageflow.react.mutate;
+
+  class TimelineItemEditorMenu extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {};
+    }
+
+    render() {
+      var {Draggable} = pageflow.react.components;
+
+      var start = {x: 0, y: this.props.top || 0};
+      var bounds = {left: 0, right: 0, top: 0, bottom: 1000};
+
+      return (
+        <Draggable start={start}
+                   grid={[5, 5]}
+                   bounds={bounds}
+                   moveOnStartChange={this.state.topChanged}
+                   handle=".timeline_item_editor_menu-handle"
+                   onStart={this._handleDragStart.bind(this)}
+                   onDrag={this._handleDrag.bind(this)}
+                   onStop={this._handleDragStop.bind(this)}>
+
+          <div className="timeline_item_editor_menu">
+            <div className="timeline_item_editor_menu-handle"
+                 title="Zum verschieben ziehen" />
+            <div className="timeline_item_editor_menu-button timeline_item_editor_menu-toggle_position"
+                 title="Rechts/links umschalten"
+                 onClick={this._handleTogglePositionClick.bind(this)}/>
+            <div className="timeline_item_editor_menu-button timeline_item_editor_menu-toggle_size"
+                 title="Größe umschalten"
+                 onClick={this._handleToggleSizeClick.bind(this)} />
+            <div className="timeline_item_editor_menu-button timeline_item_editor_menu-edit"
+                 title="Bearbeiten"
+                 onClick={this._handleEditClick.bind(this)} />
+          </div>
+        </Draggable>
+      );
+    }
+
+    componentWillReceiveProps(nextProps) {
+      this.setState({
+        topChanged: (nextProps.top !== this.props.top)
+      });
+    }
+
+    _handleDragStart() {
+      this.context.pageScroller.disable();
+    }
+
+    _handleDrag(event, ui) {
+      this.props.onDrag(ui.position.top);
+    }
+
+    _handleDragStop(event, ui) {
+      this.props.onDragStop(ui.position.top);
+      this.context.pageScroller.enable();
+    }
+
+    _handleEditClick() {
+      pageflow.editor.navigate(`/page_links/${this.props.pageLink.id}`, {trigger: true})
+    }
+
+    _handleToggleSizeClick() {
+      var sizes = ['large', 'small', 'medium'];
+      var currentSizeIndex = sizes.indexOf(this.props.pageLink.timelineItemSize);
+      var newSize = sizes[(currentSizeIndex + 1) % sizes.length];
+
+      mutate('updatePageLink', {
+        id: this.props.pageLink.id,
+        attributes: {
+          timeline_item_size: newSize
+        }
+      });
+    }
+
+    _handleTogglePositionClick() {
+      mutate('updatePageLink', {
+        id: this.props.pageLink.id,
+        attributes: {
+          timeline_item_position: this.props.pageLink.timelineItemPosition === 'right' ? 'left' : 'right'
+        }
+      });
+    }
+  };
+
+  TimelineItemEditorMenu.contextTypes = {
+    pageScroller: React.PropTypes.object
+  }
+
+  pageflow.timelinePage.TimelineItemEditorMenu = pageflow.react.createContainer(TimelineItemEditorMenu, {
+    editorOnly: true
+  });
+}());

data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item_spacer.jsx

@@ -0,0 +1,94 @@
+(function() {
+  var mutate = pageflow.react.mutate;
+
+  class TimelineItemSpacer extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {};
+    }
+
+    render() {
+      var {TimelineItemEditorMenu} = pageflow.timelinePage;
+
+      return (
+        <div className={this._className()}>
+          <div className="timeline_item_spacer-inner" style={this._style()} />
+          <TimelineItemEditorMenu pageLink={this.props.pageLink}
+                                  top={this._menuTop()}
+                                  onDrag={this._handleDrag.bind(this)}
+                                  onDragStop={this._handleDragStop.bind(this)}/>
+        </div>
+      );
+    }
+
+    pageDidActivate() {
+      this._measure();
+    }
+
+    pageDidResize() {
+      this._measure();
+    }
+
+    _className() {
+      return [
+        'timeline_item_spacer',
+        this._isDragging() ? 'is_dragging' : null
+      ].join(' ');
+    }
+
+    _style() {
+      if (this._isDragging()) {
+        return {
+          height: this.state.height
+        };
+      }
+      else {
+        return {
+          paddingTop: this.props.pageLink.top + '%'
+        };
+      }
+    }
+
+    _menuTop() {
+      if (this.state.width) {
+        return this.state.width * (this.props.pageLink.top || 0) / 100;
+      }
+
+      return 0;
+    }
+
+    _isDragging() {
+      return this.state && this.state.dragging;
+    }
+
+    _handleDrag(top) {
+      this.setState({
+        dragging: true,
+        height: top
+      });
+    }
+
+    _handleDragStop(top) {
+      this.setState({
+        dragging: false
+      });
+
+      var width = ReactDOM.findDOMNode(this).offsetWidth;
+
+      mutate('updatePageLink', {
+        id: this.props.pageLink.id,
+        attributes: {
+          top: top / width * 100
+        }
+      });
+    }
+
+    _measure() {
+      this.setState({
+        width: ReactDOM.findDOMNode(this).offsetWidth
+      });
+    }
+  }
+
+  pageflow.timelinePage.TimelineItemSpacer = pageflow.react.createPageComponent(TimelineItemSpacer);
+}());

data/app/assets/javascripts/pageflow/timeline_page/components.js

@@ -0,0 +1,4 @@
+//= require_self
+//= require_tree ./components
+
+pageflow.timelinePage = pageflow.timelinePage || {};

data/app/assets/javascripts/pageflow/timeline_page/editor/models/page_link.js

@@ -0,0 +1,4 @@
+pageflow.timelinePage.PageLink = pageflow.PageLink.extend({
+  defaults: {
+  }
+});

data/app/assets/javascripts/pageflow/timeline_page/editor.js

@@ -0,0 +1,66 @@
+//= require_tree ./editor/models
+//= require_self
+
+pageflow.editor.pageTypes.register('timeline_page', {
+  configurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('general', function() {
+        this.group('general');
+      });
+
+      this.tab('files', function() {
+        this.input('background_image_id', pageflow.FileInputView, {
+          collection: 'image_files'
+        });
+        this.input('thumbnail_image_id', pageflow.FileInputView, {
+          collection: 'image_files',
+          positioning: false
+        });
+      });
+
+      this.tab('links', function() {
+        this.input('timeline_layout', pageflow.SelectInputView, {
+          values: ['center', 'left', 'right', 'margin']
+        });
+        this.view(pageflow.PageLinksView, {
+          model: this.model.page
+        });
+      });
+
+      this.tab('options', function() {
+        this.group('options');
+      });
+    }
+  }),
+
+  pageLinks: function(configuration) {
+    configuration._timelinePageLinks = configuration._timelinePageLinks ||
+      new pageflow.OrderedPageLinksCollection(null, {
+        model: pageflow.timelinePage.PageLink,
+        configuration: configuration
+      });
+
+    return configuration._timelinePageLinks;
+  },
+
+  pageLinkConfigurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('general', function() {
+        this.group('page_link');
+
+        this.input('thumbnail_image_id', pageflow.FileInputView, {
+          collection: 'image_files',
+          fileSelectionHandler: 'pageLink'
+        });
+        this.input('timeline_item_position', pageflow.SelectInputView, {
+          values: ['left', 'right']
+        });
+        this.input('timeline_item_size', pageflow.SelectInputView, {
+          values: ['small', 'medium', 'large']
+        });
+        this.input('tagline', pageflow.TextInputView);
+        this.input('title', pageflow.TextInputView);
+      });
+    }
+  })
+});

data/app/assets/javascripts/pageflow/timeline_page/page_type.js

@@ -0,0 +1,2 @@
+pageflow.pageType.register('timeline_page',
+                           pageflow.react.createPageType(pageflow.timelinePage.Page));

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

@@ -0,0 +1,9 @@
+//= require react
+//= require pageflow/react
+
+//= require_self
+
+//= require ./timeline_page/components
+//= require ./timeline_page/page_type
+
+pageflow.timelinePage = pageflow.timelinePage || {};

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

@@ -0,0 +1,55 @@
+@include pageflow-page-type-pictograms("timeline_page");
+
+$timeline-item-padding: 2px;
+
+$timeline-main-color: $main-color !default;
+
+$timeline-item-background-color: #1a171c !default;
+
+$timeline-item-text-color: #fff !default;
+
+$timeline-item-typography: () !default;
+
+$timeline-item-tagline-color: $timeline-main-color !default;
+
+$timeline-item-tagline-typography: () !default;
+
+$timeline-item-hover-scale: 1.02 !default;
+
+.timeline {
+  @mixin ensure-anti-alias-for-webkit-during-transition {
+    -webkit-backface-visibility: hidden;
+  }
+
+  .timeline_item a {
+    background-color: $timeline-item-background-color;
+    color: $timeline-item-text-color;
+    padding: $timeline-item-background-color;
+    @include transition(transform 0.3s);
+    @include ensure-anti-alias-for-webkit-during-transition;
+
+    &:hover {
+      @include transform(scale($timeline-item-hover-scale));
+
+      @include phone {
+        @include transform(scale(1));
+      }
+    }
+  }
+
+  .timeline_item-caption {
+    @include typography(
+      $timeline-item-typography,
+      (
+        font-size: 15px,
+        font-weight: bold,
+        line-height: 21px
+      )
+    );
+  }
+
+  .timeline_item-tagline {
+    color: $timeline-item-tagline-color;
+    @include typography($timeline-item-tagline-typography, ());
+  }
+}

data/app/assets/stylesheets/pageflow/timeline_page/timeline.scss

@@ -0,0 +1,8 @@
+.timeline {
+  @include clearfix;
+
+  width: 100%;
+  max-width: 1000px;
+  padding: 0;
+  pointer-events: all;
+}

data/app/assets/stylesheets/pageflow/timeline_page/timeline_item.scss

@@ -0,0 +1,146 @@
+.timeline_item {
+  $item-width-small: 60%;
+  $item-width-medium: 80%;
+  $item-width-large: 100%;
+
+  $thumbnail-ratio: 16 / 9;
+
+  $menu-margin: 5px;
+
+  list-style: none;
+
+  .timeline_item-wrapper,
+  .timeline_item_spacer {
+    width: 49%;
+    float: left;
+    clear: left;
+    position: relative;
+  }
+
+  .timeline_item-wrapper {
+    margin-bottom: 1.5%;
+  }
+
+  &.position_right {
+    .timeline_item-wrapper,
+    .timeline_item_spacer {
+      float: right;
+      clear: right;
+    }
+  }
+
+  .timeline_item_editor_menu {
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    opacity: 0;
+    @include transition(opacity 0.2s ease 0.5s,
+                        visibility 0.2s ease 0.5s);
+  }
+
+  &:hover .timeline_item_editor_menu {
+    visibility: visible;
+    opacity: 1;
+    @include transition(opacity 0.2s ease,
+                        visibility 0.2s ease);
+  }
+
+  &.position_left {
+    .timeline_item_editor_menu {
+      margin-right: $menu-margin;
+    }
+
+    &.small .timeline_item_editor_menu {
+      right: $item-width-small;
+    }
+
+    &.medium .timeline_item_editor_menu {
+      right: $item-width-medium;
+    }
+
+    &.large .timeline_item_editor_menu,
+    &.alignment_left .timeline_item_editor_menu {
+      right: $item-width-large;
+    }
+  }
+
+  &.position_right {
+    .timeline_item_editor_menu {
+      margin-left: $menu-margin;
+    }
+
+    &.small .timeline_item_editor_menu {
+      left: $item-width-small;
+    }
+
+    &.medium .timeline_item_editor_menu {
+      left: $item-width-medium;
+    }
+
+    &.large .timeline_item_editor_menu,
+    &.alignment_right .timeline_item_editor_menu {
+      left: $item-width-large;
+    }
+  }
+
+  a {
+    width: $item-width-medium;
+    display: block;
+    float: right;
+    text-decoration: none;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  &.small {
+    a {
+      width: $item-width-small;
+    }
+  }
+
+  &.large {
+    a {
+      width: $item-width-large;
+    }
+  }
+
+  &.alignment_left {
+    a {
+      float: left;
+    }
+  }
+
+  .timeline_item-caption {
+    padding: 7px 10px;
+  }
+
+  .timeline_item-tagline {
+    display: block;
+  }
+
+  .timeline_item-thumbnail {
+    padding-top: floor(percentage(1 / $thumbnail-ratio));
+    background-size: 100% auto;
+  }
+
+  @include phone {
+    .timeline_item_editor_menu {
+      display: none;
+    }
+
+    .timeline_item-wrapper, &.position_right .timeline_item-wrapper {
+      float: none !important;
+      width: 100% !important;
+      margin-bottom: 15px;
+    }
+
+    .timeline_item_spacer {
+      display: none;
+    }
+
+    a, &.alignment_left a {
+      float: none !important;
+      width: $item-width-large !important;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/timeline_page/timeline_item_editor_menu.scss

@@ -0,0 +1,47 @@
+.timeline_item_editor_menu {
+  width: 40px;
+  z-index: 1;
+
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 3px;
+  border: solid 1px #444;
+
+  .timeline_item_editor_menu-handle,
+  .timeline_item_editor_menu-button {
+    @include background-icon-center($color: #ddd);
+    height: 40px;
+
+    &:hover {
+      @include background-icon-color(#fff);
+    }
+  }
+
+  .timeline_item_editor_menu-handle {
+    @include fa-arrows-v-icon;
+    cursor: move;
+  }
+
+  .timeline_item_editor_menu-button {
+    @include background-icon-center($color: #ddd);
+  }
+
+  .timeline_item_editor_menu-edit {
+    @include pencil-icon;
+  }
+
+  .timeline_item_editor_menu-toggle_position {
+    @include fa-long-arrow-right-icon;
+
+    .timeline_item.position_right & {
+      @include fa-long-arrow-left-icon;
+    }
+  }
+
+  .timeline_item_editor_menu-toggle_size {
+    @include resize-full-icon;
+
+    .timeline_item.large & {
+      @include resize-small-icon;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/timeline_page/timeline_item_spacer.scss

@@ -0,0 +1,5 @@
+.timeline_item_spacer {
+  &.is_dragging {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+}

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

@@ -0,0 +1,6 @@
+@include pageflow-page-type(timeline_page);
+
+@import "timeline_page/timeline";
+@import "timeline_page/timeline_item";
+@import "timeline_page/timeline_item_spacer";
+@import "timeline_page/timeline_item_editor_menu";

data/config/locales/de.yml

@@ -0,0 +1,55 @@
+de:
+  pageflow:
+    timeline_page:
+      help_entries:
+        page_type:
+          menu_item: Collage
+          text: ! '# Collage
+
+
+            Stelle eine Liste von Links mit dem Aussehen einer Collage zusammen. Dieser Seitentyp ist am besten geeignet, um chronologisch geordnete Inhalte aufzubereiten.
+
+
+            Jeder Eintrag verweist auf eine andere Seite des Beitrags, auf der der Leser vertiefende Informationen finden kann.
+
+
+            Typische Anwendungsbeispiele: Liste historischer Ereignisse, Interview Reihe, Darstellung eines mehrschrittigen Prozesses.'
+      page_attributes:
+        timeline_layout:
+          inline_help: Wähle hier die Ausrichtung der Verweis-Bilder für die gesamte Seite.
+          label: Layout
+          values:
+            center: Mittig ausgerichtet
+            left: Links ausgerichtet
+            margin: Außen ausgerichtet
+            right: Rechts ausgerichtet
+      page_link_attributes:
+        tagline:
+          label: Tagline
+        thumbnail_image_id:
+          inline_help: Bild, das in der Collage angezeigt werden soll, manuell festlegen. Ansonsten wird das Thumbnail der Zielseite verwendet.
+          label: Benutzerdefiniertes Thumbnail
+        timeline_item_position:
+          inline_help: Eintrag in der Collage auf der rechten oder linken Seite zeigen.
+          label: Position
+          values:
+            left: Links
+            right: Rechts
+        timeline_item_size:
+          inline_help: Einträge in der Collage können in verschiedenen Größen gezeigt werden, um das Erscheinungsbild der Seite aufzulockern.
+          label: Größe
+          values:
+            large: Groß
+            medium: Medium
+            small: Klein
+        title:
+          inline_help: Leer lassen, um den Titel der Zielseite zu verwenden.
+          label: Titel
+      page_type_category_name: Verweise
+      page_type_description: Verweise auf andere Seiten in Form einer Collage
+      page_type_feature_name: Collage Seitentyp
+      page_type_name: Collage
+    ui:
+      configuration_editor:
+        tabs:
+          appearance: Erscheinungsbild

data/config/locales/en.yml

@@ -0,0 +1,55 @@
+en:
+  pageflow:
+    timeline_page:
+      help_entries:
+        page_type:
+          menu_item: Collage
+          text: ! '# Collage
+
+
+            Build a Collage like list of links to other pages. This page type works best to visualize chronological content.
+
+
+            Each item links to a page inside the Pageflow allowing the user to further explore details of a topic.
+
+
+            Examples of application: List of historical events, series of interviews, depicting a multi step processes.'
+      page_attributes:
+        timeline_layout:
+          inline_help: Choose the alignment of images for the collage page.
+          label: Layout
+          values:
+            center: Centered
+            left: Left aligned
+            margin: Aligned at margins
+            right: Right aligned
+      page_link_attributes:
+        tagline:
+          label: Tagline
+        thumbnail_image_id:
+          inline_help: Manually define image to display in collage. Page thumbnail is used by default.
+          label: Custom Thumbnail
+        timeline_item_position:
+          inline_help: Alignment of collage item.
+          label: Position
+          values:
+            left: Left
+            right: Right
+        timeline_item_size:
+          inline_help: Collage items can be displayed in different sizes.
+          label: Size
+          values:
+            large: Large
+            medium: Medium
+            small: Small
+        title:
+          inline_help: Leave blank to use title of target page.
+          label: Title
+      page_type_category_name: Links
+      page_type_description: Links ordered as a timeline.
+      page_type_feature_name: Collage Page Type
+      page_type_name: Collage
+    ui:
+      configuration_editor:
+        tabs:
+          appearance: Appearance

data/lib/pageflow/timeline_page/engine.rb

@@ -0,0 +1,14 @@
+module Pageflow
+  module TimelinePage
+    class Engine < Rails::Engine
+      isolate_namespace Pageflow::TimelinePage
+
+      config.autoload_paths << File.join(config.root, 'lib')
+      config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
+
+      initializer "pageflow-timline-page.add_watchable_files", group: :all do |app|
+        app.config.watchable_files.concat Dir["#{config.root}/app/assets/javascripts/**/*.jsx*"]
+      end
+    end
+  end
+end

data/lib/pageflow/timeline_page/plugin.rb

@@ -0,0 +1,9 @@
+module Pageflow
+  module TimelinePage
+    class Plugin < Pageflow::Plugin
+      def configure(config)
+        config.features.register(PageTypeFeature.new(TimelinePage.page_type))
+      end
+    end
+  end
+end

data/lib/pageflow/timeline_page/version.rb

@@ -0,0 +1,5 @@
+module Pageflow
+  module TimelinePage
+    VERSION = '0.1.0'.freeze
+  end
+end

data/lib/pageflow-timeline-page.rb

@@ -0,0 +1,13 @@
+require 'pageflow/timeline_page/engine'
+
+module Pageflow
+  module TimelinePage
+    def self.plugin
+      TimelinePage::Plugin.new
+    end
+
+    def self.page_type
+      Pageflow::React.create_page_type('timeline_page', 'pageflow.timelinePage.Page')
+    end
+  end
+end

data/pageflow-timeline-page.gemspec

@@ -0,0 +1,26 @@
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'pageflow/timeline_page/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'pageflow-timeline-page'
+  spec.version       = Pageflow::TimelinePage::VERSION
+  spec.authors       = ['Codevise Solutions']
+  spec.email         = ['info@codevise.de']
+  spec.summary       = 'Pageflow page type for links ordered as timeline.'
+  spec.homepage      = 'https://github.com/codevise/pageflow-timeline-page'
+  spec.license       = 'MIT'
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ['lib']
+
+  spec.add_dependency 'pageflow', '~> 0.10'
+
+  # Using translations from rails locales in javascript code.
+  spec.add_dependency 'i18n-js'
+
+  # Semantic versioning rake tasks
+  spec.add_development_dependency 'semmy', '~> 0.2'
+end

metadata

@@ -0,0 +1,121 @@
+--- !ruby/object:Gem::Specification
+name: pageflow-timeline-page
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Codevise Solutions
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-06-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: pageflow
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.10'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.10'
+- !ruby/object:Gem::Dependency
+  name: i18n-js
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: semmy
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+description: 
+email:
+- info@codevise.de
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- CHANGELOG.md
+- Gemfile
+- README.md
+- Rakefile
+- app/assets/images/pageflow/ov-timeline_page.png
+- app/assets/images/pageflow/timeline_page/themes/default/pictograms/sprite.png
+- app/assets/images/pageflow/timeline_page/themes/default/pictograms/wide.png
+- app/assets/images/pageflow/timeline_page_pictogram.png
+- app/assets/images/pageflow/timeline_page_pictogram_small.png
+- app/assets/images/pageflow/timeline_page_sprite.png
+- app/assets/javascripts/pageflow/timeline_page.js
+- app/assets/javascripts/pageflow/timeline_page/components.js
+- app/assets/javascripts/pageflow/timeline_page/components/page.jsx
+- app/assets/javascripts/pageflow/timeline_page/components/timeline.jsx
+- app/assets/javascripts/pageflow/timeline_page/components/timeline_item.jsx
+- app/assets/javascripts/pageflow/timeline_page/components/timeline_item_editor_menu.jsx
+- app/assets/javascripts/pageflow/timeline_page/components/timeline_item_spacer.jsx
+- app/assets/javascripts/pageflow/timeline_page/editor.js
+- app/assets/javascripts/pageflow/timeline_page/editor/models/page_link.js
+- app/assets/javascripts/pageflow/timeline_page/editor/views/edit_page_link_view.js
+- app/assets/javascripts/pageflow/timeline_page/page_type.js
+- app/assets/stylesheets/pageflow/timeline_page.scss
+- app/assets/stylesheets/pageflow/timeline_page/themes/default.scss
+- app/assets/stylesheets/pageflow/timeline_page/timeline.scss
+- app/assets/stylesheets/pageflow/timeline_page/timeline_item.scss
+- app/assets/stylesheets/pageflow/timeline_page/timeline_item_editor_menu.scss
+- app/assets/stylesheets/pageflow/timeline_page/timeline_item_spacer.scss
+- config/locales/de.yml
+- config/locales/en.yml
+- lib/pageflow-timeline-page.rb
+- lib/pageflow/timeline_page/engine.rb
+- lib/pageflow/timeline_page/plugin.rb
+- lib/pageflow/timeline_page/version.rb
+- pageflow-timeline-page.gemspec
+homepage: https://github.com/codevise/pageflow-timeline-page
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.5
+signing_key: 
+specification_version: 4
+summary: Pageflow page type for links ordered as timeline.
+test_files: []