pageflow-timeline-page 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +23 -0
  3. data/CHANGELOG.md +7 -0
  4. data/Gemfile +10 -0
  5. data/README.md +56 -0
  6. data/Rakefile +10 -0
  7. data/app/assets/images/pageflow/ov-timeline_page.png +0 -0
  8. data/app/assets/images/pageflow/timeline_page/themes/default/pictograms/sprite.png +0 -0
  9. data/app/assets/images/pageflow/timeline_page/themes/default/pictograms/wide.png +0 -0
  10. data/app/assets/images/pageflow/timeline_page_pictogram.png +0 -0
  11. data/app/assets/images/pageflow/timeline_page_pictogram_small.png +0 -0
  12. data/app/assets/images/pageflow/timeline_page_sprite.png +0 -0
  13. data/app/assets/javascripts/pageflow/timeline_page/components/page.jsx +28 -0
  14. data/app/assets/javascripts/pageflow/timeline_page/components/timeline.jsx +27 -0
  15. data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item.jsx +73 -0
  16. data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item_editor_menu.jsx +96 -0
  17. data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item_spacer.jsx +94 -0
  18. data/app/assets/javascripts/pageflow/timeline_page/components.js +4 -0
  19. data/app/assets/javascripts/pageflow/timeline_page/editor/models/page_link.js +4 -0
  20. data/app/assets/javascripts/pageflow/timeline_page/editor/views/edit_page_link_view.js +0 -0
  21. data/app/assets/javascripts/pageflow/timeline_page/editor.js +66 -0
  22. data/app/assets/javascripts/pageflow/timeline_page/page_type.js +2 -0
  23. data/app/assets/javascripts/pageflow/timeline_page.js +9 -0
  24. data/app/assets/stylesheets/pageflow/timeline_page/themes/default.scss +55 -0
  25. data/app/assets/stylesheets/pageflow/timeline_page/timeline.scss +8 -0
  26. data/app/assets/stylesheets/pageflow/timeline_page/timeline_item.scss +146 -0
  27. data/app/assets/stylesheets/pageflow/timeline_page/timeline_item_editor_menu.scss +47 -0
  28. data/app/assets/stylesheets/pageflow/timeline_page/timeline_item_spacer.scss +5 -0
  29. data/app/assets/stylesheets/pageflow/timeline_page.scss +6 -0
  30. data/config/locales/de.yml +55 -0
  31. data/config/locales/en.yml +55 -0
  32. data/lib/pageflow/timeline_page/engine.rb +14 -0
  33. data/lib/pageflow/timeline_page/plugin.rb +9 -0
  34. data/lib/pageflow/timeline_page/version.rb +5 -0
  35. data/lib/pageflow-timeline-page.rb +13 -0
  36. data/pageflow-timeline-page.gemspec +26 -0
  37. metadata +121 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 994702dcbaaf89d67d961e7979925807849c40f8
4
+ data.tar.gz: 7da5bfb08e81052571929656bd2a4e6e1b56b4db
5
+ SHA512:
6
+ metadata.gz: 73daa8bc375381fb3cb1551b0367c0c78628906322171d069c8ae9750ad9169df01b5bf2fad04a2ca377564fac7b362a3b605c7cf253721e3bc5ac025ec97ca7
7
+ data.tar.gz: 9bf524ca7c9418a2f68f2d504e1a47982a69efb4441416f248450c9de2a56587920433ca28189eccf5b3b934aef38b172dbe788953d78f0721dbae445a44f97a
data/.gitignore ADDED
@@ -0,0 +1,23 @@
1
+ *.gem
2
+ *.rbc
3
+ *.sqlite3
4
+ .bundle
5
+ .config
6
+ .yardoc
7
+ .idea
8
+ InstalledFiles
9
+ _yardoc
10
+ coverage
11
+ doc/
12
+ lib/bundler/man
13
+ pkg
14
+ rdoc
15
+ spec/reports
16
+ test/tmp
17
+ test/version_tmp
18
+ tmp
19
+ log
20
+ Gemfile.lock
21
+
22
+ .localeapp
23
+ .localeapp
data/CHANGELOG.md ADDED
@@ -0,0 +1,7 @@
1
+ # CHANGELOG
2
+
3
+ ### Version 0.1.0
4
+
5
+ 2016-06-09
6
+
7
+ - Initial release.
data/Gemfile ADDED
@@ -0,0 +1,10 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in chart.gemspec
4
+ gemspec
5
+
6
+ # Rails 4 compat
7
+ gem 'activeadmin', :git => 'https://github.com/codevise/active_admin.git', :branch => 'rails4'
8
+ gem 'ransack'
9
+ gem 'inherited_resources', '1.4.1'
10
+ gem 'formtastic', '2.3.0.rc2'
data/README.md ADDED
@@ -0,0 +1,56 @@
1
+ # Pageflow Timeline Page
2
+
3
+ [![Gem Version](https://badge.fury.io/rb/pageflow-timeline-page.svg)](http://badge.fury.io/rb/pageflow-timeline-page)
4
+
5
+ Page type to display a chronological list of page links.
6
+
7
+ ## Installation
8
+
9
+ Add this line to your application's Gemfile:
10
+
11
+ # Gemfile
12
+ gem 'pageflow-timeline-page'
13
+
14
+ Register the plugin:
15
+
16
+ # config/initializers/pageflow.rb
17
+ Pageflow.configure do |config|
18
+ config.plugin(Pageflow::TimelinePage.plugin)
19
+ end
20
+
21
+ Include javascripts and stylesheets:
22
+
23
+ # app/assets/javascripts/components.js
24
+ //= require "pageflow/timeline_page/components"
25
+
26
+ # app/assets/javascripts/pageflow/application.js
27
+ //= require "pageflow/timeline_page"
28
+
29
+ # app/assets/javascripts/pageflow/editor.js
30
+ //= require pageflow/timeline_page/editor
31
+
32
+ # app/assets/stylesheets/pageflow/application.css.scss
33
+ @import "pageflow/timeline_page";
34
+
35
+ # app/assets/stylesheets/pageflow/themes/default.css.scss
36
+ @import "pageflow/timeline_page/themes/default";
37
+
38
+ Execute `bundle install` and restart the application server.
39
+
40
+ Now you can enable the page type in your feature settings.
41
+
42
+ ## Troubleshooting
43
+
44
+ If you run into problems while installing the page type, please also
45
+ refer to the
46
+ [Troubleshooting](https://github.com/codevise/pageflow/wiki/Troubleshooting)
47
+ wiki page in the
48
+ [Pageflow repository](https://github.com/codevise/pageflow). If that
49
+ doesn't help, consider
50
+ [filing an issue](https://github.com/codevise/pageflow-timeline-page/issues).
51
+
52
+ ## Contributing Locales
53
+
54
+ Edit the translations directly on the
55
+ [pageflow-timeline-page](http://www.localeapp.com/projects/public?search=tf/pageflow-timeline-page)
56
+ locale project.
data/Rakefile ADDED
@@ -0,0 +1,10 @@
1
+ begin
2
+ require 'bundler/setup'
3
+ rescue LoadError
4
+ puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
5
+ end
6
+
7
+ Bundler::GemHelper.install_tasks
8
+
9
+ require 'semmy'
10
+ Semmy::Tasks.install
@@ -0,0 +1,28 @@
1
+ (function() {
2
+ class Page extends React.Component {
3
+ render() {
4
+ var {PageWrapper,
5
+ PageBackground, PageBackgroundImage, PageShadow,
6
+ PageContent, PageHeader, PageText} = pageflow.react.components;
7
+ var {Timeline} = pageflow.timelinePage;
8
+
9
+ return (
10
+ <PageWrapper>
11
+ <PageBackground>
12
+ <PageBackgroundImage page={this.props.page} />
13
+ <PageShadow page={this.props.page} />
14
+ </PageBackground>
15
+
16
+ <PageContent>
17
+ <PageHeader page={this.props.page} />
18
+ <PageText page={this.props.page} />
19
+ <Timeline pageLinks={this.props.page.pageLinks}
20
+ layout={this.props.page.timelineLayout}/>
21
+ </PageContent>
22
+ </PageWrapper>
23
+ );
24
+ }
25
+ };
26
+
27
+ pageflow.timelinePage.Page = pageflow.react.createPage(Page);
28
+ }());
@@ -0,0 +1,27 @@
1
+ (function() {
2
+ class Timeline extends React.Component {
3
+ render() {
4
+ return (
5
+ <ul className="timeline">
6
+ {this.renderTimelineItems()}
7
+ </ul>
8
+ );
9
+ }
10
+
11
+ renderTimelineItems() {
12
+ var {TimelineItem} = pageflow.timelinePage;
13
+
14
+ return this.pageLinks().map((pageLink) => {
15
+ return (
16
+ <TimelineItem timelineLayout={this.props.layout} pageLink={pageLink} key={pageLink.id} />
17
+ );
18
+ });
19
+ }
20
+
21
+ pageLinks() {
22
+ return this.props.pageLinks || [];
23
+ }
24
+ };
25
+
26
+ pageflow.timelinePage.Timeline = pageflow.react.createContainer(Timeline);
27
+ }());
@@ -0,0 +1,73 @@
1
+
2
+ (function() {
3
+ var resolve = pageflow.react.resolve;
4
+
5
+ class TimelineItem extends React.Component {
6
+ render() {
7
+ var {PageLink, LazyLoadedPageThumbnail} = pageflow.react.components;
8
+ var {TimelineItemSpacer} = pageflow.timelinePage;
9
+ var targetPage = this.props.pageLink.targetPage;
10
+
11
+ return (
12
+ <li className={this.className()}>
13
+ <TimelineItemSpacer pageLink={this.props.pageLink} />
14
+
15
+ <div className="timeline_item-wrapper">
16
+ <PageLink pageLink={this.props.pageLink}>
17
+ <LazyLoadedPageThumbnail className="timeline_item-thumbnail"
18
+ imageStyle="thumbnail_large"
19
+ page={targetPage}
20
+ customThumbnailId={this.props.pageLink.thumbnailImageId} />
21
+
22
+ <div className="timeline_item-caption">
23
+ <span className="timeline_item-tagline">{this.props.pageLink.tagline}</span>
24
+ {this.caption()}
25
+ </div>
26
+ </PageLink>
27
+ </div>
28
+ </li>
29
+ );
30
+ }
31
+
32
+ className() {
33
+ return [
34
+ 'timeline_item',
35
+ 'position_' + (this.props.pageLink.timelineItemPosition || 'left'),
36
+ 'alignment_' + this.alignment(),
37
+ this.props.pageLink.timelineItemSize || 'medium'
38
+ ].join(' ');
39
+ }
40
+
41
+ alignment() {
42
+ var position = this.props.pageLink.timelineItemPosition;
43
+
44
+ if (this.props.timelineLayout === 'right') {
45
+ return 'right';
46
+ }
47
+ else if (this.props.timelineLayout === 'left') {
48
+ return 'left';
49
+ }
50
+ else if (this.props.timelineLayout === 'margin') {
51
+ return position === 'right' ? 'right' : 'left';
52
+ }
53
+ else {
54
+ return position === 'right' ? 'left' : 'right';
55
+ }
56
+ }
57
+
58
+ caption() {
59
+ return this.props.pageLink.title ||
60
+ (this.props.pageLink.targetPage && this.props.pageLink.targetPage.title);
61
+ }
62
+ };
63
+
64
+ pageflow.timelinePage.TimelineItem = pageflow.react.createContainer(TimelineItem, {
65
+ fragments: {
66
+ pageLink: {
67
+ targetPage: resolve('page', {
68
+ property: 'targetPageId'
69
+ })
70
+ }
71
+ }
72
+ });
73
+ }());
@@ -0,0 +1,96 @@
1
+ (function() {
2
+ var mutate = pageflow.react.mutate;
3
+
4
+ class TimelineItemEditorMenu extends React.Component {
5
+ constructor(props) {
6
+ super(props);
7
+ this.state = {};
8
+ }
9
+
10
+ render() {
11
+ var {Draggable} = pageflow.react.components;
12
+
13
+ var start = {x: 0, y: this.props.top || 0};
14
+ var bounds = {left: 0, right: 0, top: 0, bottom: 1000};
15
+
16
+ return (
17
+ <Draggable start={start}
18
+ grid={[5, 5]}
19
+ bounds={bounds}
20
+ moveOnStartChange={this.state.topChanged}
21
+ handle=".timeline_item_editor_menu-handle"
22
+ onStart={this._handleDragStart.bind(this)}
23
+ onDrag={this._handleDrag.bind(this)}
24
+ onStop={this._handleDragStop.bind(this)}>
25
+
26
+ <div className="timeline_item_editor_menu">
27
+ <div className="timeline_item_editor_menu-handle"
28
+ title="Zum verschieben ziehen" />
29
+ <div className="timeline_item_editor_menu-button timeline_item_editor_menu-toggle_position"
30
+ title="Rechts/links umschalten"
31
+ onClick={this._handleTogglePositionClick.bind(this)}/>
32
+ <div className="timeline_item_editor_menu-button timeline_item_editor_menu-toggle_size"
33
+ title="Größe umschalten"
34
+ onClick={this._handleToggleSizeClick.bind(this)} />
35
+ <div className="timeline_item_editor_menu-button timeline_item_editor_menu-edit"
36
+ title="Bearbeiten"
37
+ onClick={this._handleEditClick.bind(this)} />
38
+ </div>
39
+ </Draggable>
40
+ );
41
+ }
42
+
43
+ componentWillReceiveProps(nextProps) {
44
+ this.setState({
45
+ topChanged: (nextProps.top !== this.props.top)
46
+ });
47
+ }
48
+
49
+ _handleDragStart() {
50
+ this.context.pageScroller.disable();
51
+ }
52
+
53
+ _handleDrag(event, ui) {
54
+ this.props.onDrag(ui.position.top);
55
+ }
56
+
57
+ _handleDragStop(event, ui) {
58
+ this.props.onDragStop(ui.position.top);
59
+ this.context.pageScroller.enable();
60
+ }
61
+
62
+ _handleEditClick() {
63
+ pageflow.editor.navigate(`/page_links/${this.props.pageLink.id}`, {trigger: true})
64
+ }
65
+
66
+ _handleToggleSizeClick() {
67
+ var sizes = ['large', 'small', 'medium'];
68
+ var currentSizeIndex = sizes.indexOf(this.props.pageLink.timelineItemSize);
69
+ var newSize = sizes[(currentSizeIndex + 1) % sizes.length];
70
+
71
+ mutate('updatePageLink', {
72
+ id: this.props.pageLink.id,
73
+ attributes: {
74
+ timeline_item_size: newSize
75
+ }
76
+ });
77
+ }
78
+
79
+ _handleTogglePositionClick() {
80
+ mutate('updatePageLink', {
81
+ id: this.props.pageLink.id,
82
+ attributes: {
83
+ timeline_item_position: this.props.pageLink.timelineItemPosition === 'right' ? 'left' : 'right'
84
+ }
85
+ });
86
+ }
87
+ };
88
+
89
+ TimelineItemEditorMenu.contextTypes = {
90
+ pageScroller: React.PropTypes.object
91
+ }
92
+
93
+ pageflow.timelinePage.TimelineItemEditorMenu = pageflow.react.createContainer(TimelineItemEditorMenu, {
94
+ editorOnly: true
95
+ });
96
+ }());
@@ -0,0 +1,94 @@
1
+ (function() {
2
+ var mutate = pageflow.react.mutate;
3
+
4
+ class TimelineItemSpacer extends React.Component {
5
+ constructor(props) {
6
+ super(props);
7
+ this.state = {};
8
+ }
9
+
10
+ render() {
11
+ var {TimelineItemEditorMenu} = pageflow.timelinePage;
12
+
13
+ return (
14
+ <div className={this._className()}>
15
+ <div className="timeline_item_spacer-inner" style={this._style()} />
16
+ <TimelineItemEditorMenu pageLink={this.props.pageLink}
17
+ top={this._menuTop()}
18
+ onDrag={this._handleDrag.bind(this)}
19
+ onDragStop={this._handleDragStop.bind(this)}/>
20
+ </div>
21
+ );
22
+ }
23
+
24
+ pageDidActivate() {
25
+ this._measure();
26
+ }
27
+
28
+ pageDidResize() {
29
+ this._measure();
30
+ }
31
+
32
+ _className() {
33
+ return [
34
+ 'timeline_item_spacer',
35
+ this._isDragging() ? 'is_dragging' : null
36
+ ].join(' ');
37
+ }
38
+
39
+ _style() {
40
+ if (this._isDragging()) {
41
+ return {
42
+ height: this.state.height
43
+ };
44
+ }
45
+ else {
46
+ return {
47
+ paddingTop: this.props.pageLink.top + '%'
48
+ };
49
+ }
50
+ }
51
+
52
+ _menuTop() {
53
+ if (this.state.width) {
54
+ return this.state.width * (this.props.pageLink.top || 0) / 100;
55
+ }
56
+
57
+ return 0;
58
+ }
59
+
60
+ _isDragging() {
61
+ return this.state && this.state.dragging;
62
+ }
63
+
64
+ _handleDrag(top) {
65
+ this.setState({
66
+ dragging: true,
67
+ height: top
68
+ });
69
+ }
70
+
71
+ _handleDragStop(top) {
72
+ this.setState({
73
+ dragging: false
74
+ });
75
+
76
+ var width = ReactDOM.findDOMNode(this).offsetWidth;
77
+
78
+ mutate('updatePageLink', {
79
+ id: this.props.pageLink.id,
80
+ attributes: {
81
+ top: top / width * 100
82
+ }
83
+ });
84
+ }
85
+
86
+ _measure() {
87
+ this.setState({
88
+ width: ReactDOM.findDOMNode(this).offsetWidth
89
+ });
90
+ }
91
+ }
92
+
93
+ pageflow.timelinePage.TimelineItemSpacer = pageflow.react.createPageComponent(TimelineItemSpacer);
94
+ }());
@@ -0,0 +1,4 @@
1
+ //= require_self
2
+ //= require_tree ./components
3
+
4
+ pageflow.timelinePage = pageflow.timelinePage || {};
@@ -0,0 +1,4 @@
1
+ pageflow.timelinePage.PageLink = pageflow.PageLink.extend({
2
+ defaults: {
3
+ }
4
+ });
@@ -0,0 +1,66 @@
1
+ //= require_tree ./editor/models
2
+ //= require_self
3
+
4
+ pageflow.editor.pageTypes.register('timeline_page', {
5
+ configurationEditorView: pageflow.ConfigurationEditorView.extend({
6
+ configure: function() {
7
+ this.tab('general', function() {
8
+ this.group('general');
9
+ });
10
+
11
+ this.tab('files', function() {
12
+ this.input('background_image_id', pageflow.FileInputView, {
13
+ collection: 'image_files'
14
+ });
15
+ this.input('thumbnail_image_id', pageflow.FileInputView, {
16
+ collection: 'image_files',
17
+ positioning: false
18
+ });
19
+ });
20
+
21
+ this.tab('links', function() {
22
+ this.input('timeline_layout', pageflow.SelectInputView, {
23
+ values: ['center', 'left', 'right', 'margin']
24
+ });
25
+ this.view(pageflow.PageLinksView, {
26
+ model: this.model.page
27
+ });
28
+ });
29
+
30
+ this.tab('options', function() {
31
+ this.group('options');
32
+ });
33
+ }
34
+ }),
35
+
36
+ pageLinks: function(configuration) {
37
+ configuration._timelinePageLinks = configuration._timelinePageLinks ||
38
+ new pageflow.OrderedPageLinksCollection(null, {
39
+ model: pageflow.timelinePage.PageLink,
40
+ configuration: configuration
41
+ });
42
+
43
+ return configuration._timelinePageLinks;
44
+ },
45
+
46
+ pageLinkConfigurationEditorView: pageflow.ConfigurationEditorView.extend({
47
+ configure: function() {
48
+ this.tab('general', function() {
49
+ this.group('page_link');
50
+
51
+ this.input('thumbnail_image_id', pageflow.FileInputView, {
52
+ collection: 'image_files',
53
+ fileSelectionHandler: 'pageLink'
54
+ });
55
+ this.input('timeline_item_position', pageflow.SelectInputView, {
56
+ values: ['left', 'right']
57
+ });
58
+ this.input('timeline_item_size', pageflow.SelectInputView, {
59
+ values: ['small', 'medium', 'large']
60
+ });
61
+ this.input('tagline', pageflow.TextInputView);
62
+ this.input('title', pageflow.TextInputView);
63
+ });
64
+ }
65
+ })
66
+ });
@@ -0,0 +1,2 @@
1
+ pageflow.pageType.register('timeline_page',
2
+ pageflow.react.createPageType(pageflow.timelinePage.Page));
@@ -0,0 +1,9 @@
1
+ //= require react
2
+ //= require pageflow/react
3
+
4
+ //= require_self
5
+
6
+ //= require ./timeline_page/components
7
+ //= require ./timeline_page/page_type
8
+
9
+ pageflow.timelinePage = pageflow.timelinePage || {};
@@ -0,0 +1,55 @@
1
+ @include pageflow-page-type-pictograms("timeline_page");
2
+
3
+ $timeline-item-padding: 2px;
4
+
5
+ $timeline-main-color: $main-color !default;
6
+
7
+ $timeline-item-background-color: #1a171c !default;
8
+
9
+ $timeline-item-text-color: #fff !default;
10
+
11
+ $timeline-item-typography: () !default;
12
+
13
+ $timeline-item-tagline-color: $timeline-main-color !default;
14
+
15
+ $timeline-item-tagline-typography: () !default;
16
+
17
+ $timeline-item-hover-scale: 1.02 !default;
18
+
19
+ .timeline {
20
+ @mixin ensure-anti-alias-for-webkit-during-transition {
21
+ -webkit-backface-visibility: hidden;
22
+ }
23
+
24
+ .timeline_item a {
25
+ background-color: $timeline-item-background-color;
26
+ color: $timeline-item-text-color;
27
+ padding: $timeline-item-background-color;
28
+ @include transition(transform 0.3s);
29
+ @include ensure-anti-alias-for-webkit-during-transition;
30
+
31
+ &:hover {
32
+ @include transform(scale($timeline-item-hover-scale));
33
+
34
+ @include phone {
35
+ @include transform(scale(1));
36
+ }
37
+ }
38
+ }
39
+
40
+ .timeline_item-caption {
41
+ @include typography(
42
+ $timeline-item-typography,
43
+ (
44
+ font-size: 15px,
45
+ font-weight: bold,
46
+ line-height: 21px
47
+ )
48
+ );
49
+ }
50
+
51
+ .timeline_item-tagline {
52
+ color: $timeline-item-tagline-color;
53
+ @include typography($timeline-item-tagline-typography, ());
54
+ }
55
+ }
@@ -0,0 +1,8 @@
1
+ .timeline {
2
+ @include clearfix;
3
+
4
+ width: 100%;
5
+ max-width: 1000px;
6
+ padding: 0;
7
+ pointer-events: all;
8
+ }
@@ -0,0 +1,146 @@
1
+ .timeline_item {
2
+ $item-width-small: 60%;
3
+ $item-width-medium: 80%;
4
+ $item-width-large: 100%;
5
+
6
+ $thumbnail-ratio: 16 / 9;
7
+
8
+ $menu-margin: 5px;
9
+
10
+ list-style: none;
11
+
12
+ .timeline_item-wrapper,
13
+ .timeline_item_spacer {
14
+ width: 49%;
15
+ float: left;
16
+ clear: left;
17
+ position: relative;
18
+ }
19
+
20
+ .timeline_item-wrapper {
21
+ margin-bottom: 1.5%;
22
+ }
23
+
24
+ &.position_right {
25
+ .timeline_item-wrapper,
26
+ .timeline_item_spacer {
27
+ float: right;
28
+ clear: right;
29
+ }
30
+ }
31
+
32
+ .timeline_item_editor_menu {
33
+ position: absolute;
34
+ top: 0;
35
+ visibility: hidden;
36
+ opacity: 0;
37
+ @include transition(opacity 0.2s ease 0.5s,
38
+ visibility 0.2s ease 0.5s);
39
+ }
40
+
41
+ &:hover .timeline_item_editor_menu {
42
+ visibility: visible;
43
+ opacity: 1;
44
+ @include transition(opacity 0.2s ease,
45
+ visibility 0.2s ease);
46
+ }
47
+
48
+ &.position_left {
49
+ .timeline_item_editor_menu {
50
+ margin-right: $menu-margin;
51
+ }
52
+
53
+ &.small .timeline_item_editor_menu {
54
+ right: $item-width-small;
55
+ }
56
+
57
+ &.medium .timeline_item_editor_menu {
58
+ right: $item-width-medium;
59
+ }
60
+
61
+ &.large .timeline_item_editor_menu,
62
+ &.alignment_left .timeline_item_editor_menu {
63
+ right: $item-width-large;
64
+ }
65
+ }
66
+
67
+ &.position_right {
68
+ .timeline_item_editor_menu {
69
+ margin-left: $menu-margin;
70
+ }
71
+
72
+ &.small .timeline_item_editor_menu {
73
+ left: $item-width-small;
74
+ }
75
+
76
+ &.medium .timeline_item_editor_menu {
77
+ left: $item-width-medium;
78
+ }
79
+
80
+ &.large .timeline_item_editor_menu,
81
+ &.alignment_right .timeline_item_editor_menu {
82
+ left: $item-width-large;
83
+ }
84
+ }
85
+
86
+ a {
87
+ width: $item-width-medium;
88
+ display: block;
89
+ float: right;
90
+ text-decoration: none;
91
+ font-size: 12px;
92
+ font-weight: bold;
93
+ }
94
+
95
+ &.small {
96
+ a {
97
+ width: $item-width-small;
98
+ }
99
+ }
100
+
101
+ &.large {
102
+ a {
103
+ width: $item-width-large;
104
+ }
105
+ }
106
+
107
+ &.alignment_left {
108
+ a {
109
+ float: left;
110
+ }
111
+ }
112
+
113
+ .timeline_item-caption {
114
+ padding: 7px 10px;
115
+ }
116
+
117
+ .timeline_item-tagline {
118
+ display: block;
119
+ }
120
+
121
+ .timeline_item-thumbnail {
122
+ padding-top: floor(percentage(1 / $thumbnail-ratio));
123
+ background-size: 100% auto;
124
+ }
125
+
126
+ @include phone {
127
+ .timeline_item_editor_menu {
128
+ display: none;
129
+ }
130
+
131
+ .timeline_item-wrapper, &.position_right .timeline_item-wrapper {
132
+ float: none !important;
133
+ width: 100% !important;
134
+ margin-bottom: 15px;
135
+ }
136
+
137
+ .timeline_item_spacer {
138
+ display: none;
139
+ }
140
+
141
+ a, &.alignment_left a {
142
+ float: none !important;
143
+ width: $item-width-large !important;
144
+ }
145
+ }
146
+ }
@@ -0,0 +1,47 @@
1
+ .timeline_item_editor_menu {
2
+ width: 40px;
3
+ z-index: 1;
4
+
5
+ background-color: rgba(0, 0, 0, 0.7);
6
+ border-radius: 3px;
7
+ border: solid 1px #444;
8
+
9
+ .timeline_item_editor_menu-handle,
10
+ .timeline_item_editor_menu-button {
11
+ @include background-icon-center($color: #ddd);
12
+ height: 40px;
13
+
14
+ &:hover {
15
+ @include background-icon-color(#fff);
16
+ }
17
+ }
18
+
19
+ .timeline_item_editor_menu-handle {
20
+ @include fa-arrows-v-icon;
21
+ cursor: move;
22
+ }
23
+
24
+ .timeline_item_editor_menu-button {
25
+ @include background-icon-center($color: #ddd);
26
+ }
27
+
28
+ .timeline_item_editor_menu-edit {
29
+ @include pencil-icon;
30
+ }
31
+
32
+ .timeline_item_editor_menu-toggle_position {
33
+ @include fa-long-arrow-right-icon;
34
+
35
+ .timeline_item.position_right & {
36
+ @include fa-long-arrow-left-icon;
37
+ }
38
+ }
39
+
40
+ .timeline_item_editor_menu-toggle_size {
41
+ @include resize-full-icon;
42
+
43
+ .timeline_item.large & {
44
+ @include resize-small-icon;
45
+ }
46
+ }
47
+ }
@@ -0,0 +1,5 @@
1
+ .timeline_item_spacer {
2
+ &.is_dragging {
3
+ background-color: rgba(255, 255, 255, 0.3);
4
+ }
5
+ }
@@ -0,0 +1,6 @@
1
+ @include pageflow-page-type(timeline_page);
2
+
3
+ @import "timeline_page/timeline";
4
+ @import "timeline_page/timeline_item";
5
+ @import "timeline_page/timeline_item_spacer";
6
+ @import "timeline_page/timeline_item_editor_menu";
@@ -0,0 +1,55 @@
1
+ de:
2
+ pageflow:
3
+ timeline_page:
4
+ help_entries:
5
+ page_type:
6
+ menu_item: Collage
7
+ text: ! '# Collage
8
+
9
+
10
+ Stelle eine Liste von Links mit dem Aussehen einer Collage zusammen. Dieser Seitentyp ist am besten geeignet, um chronologisch geordnete Inhalte aufzubereiten.
11
+
12
+
13
+ Jeder Eintrag verweist auf eine andere Seite des Beitrags, auf der der Leser vertiefende Informationen finden kann.
14
+
15
+
16
+ Typische Anwendungsbeispiele: Liste historischer Ereignisse, Interview Reihe, Darstellung eines mehrschrittigen Prozesses.'
17
+ page_attributes:
18
+ timeline_layout:
19
+ inline_help: Wähle hier die Ausrichtung der Verweis-Bilder für die gesamte Seite.
20
+ label: Layout
21
+ values:
22
+ center: Mittig ausgerichtet
23
+ left: Links ausgerichtet
24
+ margin: Außen ausgerichtet
25
+ right: Rechts ausgerichtet
26
+ page_link_attributes:
27
+ tagline:
28
+ label: Tagline
29
+ thumbnail_image_id:
30
+ inline_help: Bild, das in der Collage angezeigt werden soll, manuell festlegen. Ansonsten wird das Thumbnail der Zielseite verwendet.
31
+ label: Benutzerdefiniertes Thumbnail
32
+ timeline_item_position:
33
+ inline_help: Eintrag in der Collage auf der rechten oder linken Seite zeigen.
34
+ label: Position
35
+ values:
36
+ left: Links
37
+ right: Rechts
38
+ timeline_item_size:
39
+ inline_help: Einträge in der Collage können in verschiedenen Größen gezeigt werden, um das Erscheinungsbild der Seite aufzulockern.
40
+ label: Größe
41
+ values:
42
+ large: Groß
43
+ medium: Medium
44
+ small: Klein
45
+ title:
46
+ inline_help: Leer lassen, um den Titel der Zielseite zu verwenden.
47
+ label: Titel
48
+ page_type_category_name: Verweise
49
+ page_type_description: Verweise auf andere Seiten in Form einer Collage
50
+ page_type_feature_name: Collage Seitentyp
51
+ page_type_name: Collage
52
+ ui:
53
+ configuration_editor:
54
+ tabs:
55
+ appearance: Erscheinungsbild
@@ -0,0 +1,55 @@
1
+ en:
2
+ pageflow:
3
+ timeline_page:
4
+ help_entries:
5
+ page_type:
6
+ menu_item: Collage
7
+ text: ! '# Collage
8
+
9
+
10
+ Build a Collage like list of links to other pages. This page type works best to visualize chronological content.
11
+
12
+
13
+ Each item links to a page inside the Pageflow allowing the user to further explore details of a topic.
14
+
15
+
16
+ Examples of application: List of historical events, series of interviews, depicting a multi step processes.'
17
+ page_attributes:
18
+ timeline_layout:
19
+ inline_help: Choose the alignment of images for the collage page.
20
+ label: Layout
21
+ values:
22
+ center: Centered
23
+ left: Left aligned
24
+ margin: Aligned at margins
25
+ right: Right aligned
26
+ page_link_attributes:
27
+ tagline:
28
+ label: Tagline
29
+ thumbnail_image_id:
30
+ inline_help: Manually define image to display in collage. Page thumbnail is used by default.
31
+ label: Custom Thumbnail
32
+ timeline_item_position:
33
+ inline_help: Alignment of collage item.
34
+ label: Position
35
+ values:
36
+ left: Left
37
+ right: Right
38
+ timeline_item_size:
39
+ inline_help: Collage items can be displayed in different sizes.
40
+ label: Size
41
+ values:
42
+ large: Large
43
+ medium: Medium
44
+ small: Small
45
+ title:
46
+ inline_help: Leave blank to use title of target page.
47
+ label: Title
48
+ page_type_category_name: Links
49
+ page_type_description: Links ordered as a timeline.
50
+ page_type_feature_name: Collage Page Type
51
+ page_type_name: Collage
52
+ ui:
53
+ configuration_editor:
54
+ tabs:
55
+ appearance: Appearance
@@ -0,0 +1,14 @@
1
+ module Pageflow
2
+ module TimelinePage
3
+ class Engine < Rails::Engine
4
+ isolate_namespace Pageflow::TimelinePage
5
+
6
+ config.autoload_paths << File.join(config.root, 'lib')
7
+ config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
8
+
9
+ initializer "pageflow-timline-page.add_watchable_files", group: :all do |app|
10
+ app.config.watchable_files.concat Dir["#{config.root}/app/assets/javascripts/**/*.jsx*"]
11
+ end
12
+ end
13
+ end
14
+ end
@@ -0,0 +1,9 @@
1
+ module Pageflow
2
+ module TimelinePage
3
+ class Plugin < Pageflow::Plugin
4
+ def configure(config)
5
+ config.features.register(PageTypeFeature.new(TimelinePage.page_type))
6
+ end
7
+ end
8
+ end
9
+ end
@@ -0,0 +1,5 @@
1
+ module Pageflow
2
+ module TimelinePage
3
+ VERSION = '0.1.0'.freeze
4
+ end
5
+ end
@@ -0,0 +1,13 @@
1
+ require 'pageflow/timeline_page/engine'
2
+
3
+ module Pageflow
4
+ module TimelinePage
5
+ def self.plugin
6
+ TimelinePage::Plugin.new
7
+ end
8
+
9
+ def self.page_type
10
+ Pageflow::React.create_page_type('timeline_page', 'pageflow.timelinePage.Page')
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,26 @@
1
+ lib = File.expand_path('../lib', __FILE__)
2
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
3
+ require 'pageflow/timeline_page/version'
4
+
5
+ Gem::Specification.new do |spec|
6
+ spec.name = 'pageflow-timeline-page'
7
+ spec.version = Pageflow::TimelinePage::VERSION
8
+ spec.authors = ['Codevise Solutions']
9
+ spec.email = ['info@codevise.de']
10
+ spec.summary = 'Pageflow page type for links ordered as timeline.'
11
+ spec.homepage = 'https://github.com/codevise/pageflow-timeline-page'
12
+ spec.license = 'MIT'
13
+
14
+ spec.files = `git ls-files`.split($/)
15
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
16
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
17
+ spec.require_paths = ['lib']
18
+
19
+ spec.add_dependency 'pageflow', '~> 0.10'
20
+
21
+ # Using translations from rails locales in javascript code.
22
+ spec.add_dependency 'i18n-js'
23
+
24
+ # Semantic versioning rake tasks
25
+ spec.add_development_dependency 'semmy', '~> 0.2'
26
+ end
metadata ADDED
@@ -0,0 +1,121 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: pageflow-timeline-page
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Codevise Solutions
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2016-06-09 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: pageflow
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '0.10'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '0.10'
27
+ - !ruby/object:Gem::Dependency
28
+ name: i18n-js
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ">="
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: semmy
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - "~>"
46
+ - !ruby/object:Gem::Version
47
+ version: '0.2'
48
+ type: :development
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - "~>"
53
+ - !ruby/object:Gem::Version
54
+ version: '0.2'
55
+ description:
56
+ email:
57
+ - info@codevise.de
58
+ executables: []
59
+ extensions: []
60
+ extra_rdoc_files: []
61
+ files:
62
+ - ".gitignore"
63
+ - CHANGELOG.md
64
+ - Gemfile
65
+ - README.md
66
+ - Rakefile
67
+ - app/assets/images/pageflow/ov-timeline_page.png
68
+ - app/assets/images/pageflow/timeline_page/themes/default/pictograms/sprite.png
69
+ - app/assets/images/pageflow/timeline_page/themes/default/pictograms/wide.png
70
+ - app/assets/images/pageflow/timeline_page_pictogram.png
71
+ - app/assets/images/pageflow/timeline_page_pictogram_small.png
72
+ - app/assets/images/pageflow/timeline_page_sprite.png
73
+ - app/assets/javascripts/pageflow/timeline_page.js
74
+ - app/assets/javascripts/pageflow/timeline_page/components.js
75
+ - app/assets/javascripts/pageflow/timeline_page/components/page.jsx
76
+ - app/assets/javascripts/pageflow/timeline_page/components/timeline.jsx
77
+ - app/assets/javascripts/pageflow/timeline_page/components/timeline_item.jsx
78
+ - app/assets/javascripts/pageflow/timeline_page/components/timeline_item_editor_menu.jsx
79
+ - app/assets/javascripts/pageflow/timeline_page/components/timeline_item_spacer.jsx
80
+ - app/assets/javascripts/pageflow/timeline_page/editor.js
81
+ - app/assets/javascripts/pageflow/timeline_page/editor/models/page_link.js
82
+ - app/assets/javascripts/pageflow/timeline_page/editor/views/edit_page_link_view.js
83
+ - app/assets/javascripts/pageflow/timeline_page/page_type.js
84
+ - app/assets/stylesheets/pageflow/timeline_page.scss
85
+ - app/assets/stylesheets/pageflow/timeline_page/themes/default.scss
86
+ - app/assets/stylesheets/pageflow/timeline_page/timeline.scss
87
+ - app/assets/stylesheets/pageflow/timeline_page/timeline_item.scss
88
+ - app/assets/stylesheets/pageflow/timeline_page/timeline_item_editor_menu.scss
89
+ - app/assets/stylesheets/pageflow/timeline_page/timeline_item_spacer.scss
90
+ - config/locales/de.yml
91
+ - config/locales/en.yml
92
+ - lib/pageflow-timeline-page.rb
93
+ - lib/pageflow/timeline_page/engine.rb
94
+ - lib/pageflow/timeline_page/plugin.rb
95
+ - lib/pageflow/timeline_page/version.rb
96
+ - pageflow-timeline-page.gemspec
97
+ homepage: https://github.com/codevise/pageflow-timeline-page
98
+ licenses:
99
+ - MIT
100
+ metadata: {}
101
+ post_install_message:
102
+ rdoc_options: []
103
+ require_paths:
104
+ - lib
105
+ required_ruby_version: !ruby/object:Gem::Requirement
106
+ requirements:
107
+ - - ">="
108
+ - !ruby/object:Gem::Version
109
+ version: '0'
110
+ required_rubygems_version: !ruby/object:Gem::Requirement
111
+ requirements:
112
+ - - ">="
113
+ - !ruby/object:Gem::Version
114
+ version: '0'
115
+ requirements: []
116
+ rubyforge_project:
117
+ rubygems_version: 2.2.5
118
+ signing_key:
119
+ specification_version: 4
120
+ summary: Pageflow page type for links ordered as timeline.
121
+ test_files: []