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.
- checksums.yaml +7 -0
- data/.gitignore +23 -0
- data/CHANGELOG.md +7 -0
- data/Gemfile +10 -0
- data/README.md +56 -0
- data/Rakefile +10 -0
- data/app/assets/images/pageflow/ov-timeline_page.png +0 -0
- data/app/assets/images/pageflow/timeline_page/themes/default/pictograms/sprite.png +0 -0
- data/app/assets/images/pageflow/timeline_page/themes/default/pictograms/wide.png +0 -0
- data/app/assets/images/pageflow/timeline_page_pictogram.png +0 -0
- data/app/assets/images/pageflow/timeline_page_pictogram_small.png +0 -0
- data/app/assets/images/pageflow/timeline_page_sprite.png +0 -0
- data/app/assets/javascripts/pageflow/timeline_page/components/page.jsx +28 -0
- data/app/assets/javascripts/pageflow/timeline_page/components/timeline.jsx +27 -0
- data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item.jsx +73 -0
- data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item_editor_menu.jsx +96 -0
- data/app/assets/javascripts/pageflow/timeline_page/components/timeline_item_spacer.jsx +94 -0
- data/app/assets/javascripts/pageflow/timeline_page/components.js +4 -0
- data/app/assets/javascripts/pageflow/timeline_page/editor/models/page_link.js +4 -0
- data/app/assets/javascripts/pageflow/timeline_page/editor/views/edit_page_link_view.js +0 -0
- data/app/assets/javascripts/pageflow/timeline_page/editor.js +66 -0
- data/app/assets/javascripts/pageflow/timeline_page/page_type.js +2 -0
- data/app/assets/javascripts/pageflow/timeline_page.js +9 -0
- data/app/assets/stylesheets/pageflow/timeline_page/themes/default.scss +55 -0
- data/app/assets/stylesheets/pageflow/timeline_page/timeline.scss +8 -0
- data/app/assets/stylesheets/pageflow/timeline_page/timeline_item.scss +146 -0
- data/app/assets/stylesheets/pageflow/timeline_page/timeline_item_editor_menu.scss +47 -0
- data/app/assets/stylesheets/pageflow/timeline_page/timeline_item_spacer.scss +5 -0
- data/app/assets/stylesheets/pageflow/timeline_page.scss +6 -0
- data/config/locales/de.yml +55 -0
- data/config/locales/en.yml +55 -0
- data/lib/pageflow/timeline_page/engine.rb +14 -0
- data/lib/pageflow/timeline_page/plugin.rb +9 -0
- data/lib/pageflow/timeline_page/version.rb +5 -0
- data/lib/pageflow-timeline-page.rb +13 -0
- data/pageflow-timeline-page.gemspec +26 -0
- 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
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
|
+
[](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
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -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
|
+
}());
|
File without changes
|
@@ -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,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,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,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,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: []
|