pageflow-text-page 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ !binary "U0hBMQ==":
3
+ metadata.gz: !binary |-
4
+ NGQyZjMxYjM5ZWYyMDY5YWUxNDJlODJmMWE4Mzk0NzJkYTZmNjRmMQ==
5
+ data.tar.gz: !binary |-
6
+ NjNiMjYxNDkwOWQ0MjZlY2Y2Njg5MTIyOTUwMzBlOTlmNDE4NzI5ZQ==
7
+ SHA512:
8
+ metadata.gz: !binary |-
9
+ ZmY1ZDMxMGRjZGVlYTkxNjI4NjFhNDFmNGMxNjBkZjkwZGJmNTk2MGJkYjc5
10
+ Mjg5OTA4NmYyY2ZkODU5YTA5NzkyNjdmYjE1NjA4NWI5M2VhYTMyOTRkMjdh
11
+ ZGQ1NWNlMTA1YmY5MDY3NGI3NDRjYTdhODNkZTk3OTBjNWRmZWM=
12
+ data.tar.gz: !binary |-
13
+ OWRmMWNiNTk4MzMxODlkNGViN2IyMmZkZjgwNmRiOTBmNzhjYTFkYjA3YjU2
14
+ MWNjMjRlYTI4Mjg5MzlmMjE5NzAyM2VmMTQ2MTRiNGU4Njc3N2Y3OWM0MzQw
15
+ MGY5ZWQyYmIyZDY4Yjc1YTc1NDEzNWUwYmQyZDU2Y2M0NmRiY2Q=
data/.gitignore ADDED
@@ -0,0 +1,22 @@
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
data/.jshintignore ADDED
@@ -0,0 +1 @@
1
+ vendor/assets/javascripts/**
data/.jshintrc ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "browser": true,
3
+ "undef": true,
4
+ "immed": true,
5
+ "trailing": true,
6
+ "globals": {
7
+ "jQuery": true,
8
+ "$": true,
9
+ "Backbone": true,
10
+ "Cocktail": true,
11
+ "_": true,
12
+ "vjs": true,
13
+ "Audio5js": true,
14
+ "I18n": true,
15
+
16
+ "pageflow": true,
17
+ "editor": true,
18
+
19
+ "confirm": true,
20
+ "alert": true
21
+ }
22
+ }
data/CHANGELOG.md ADDED
@@ -0,0 +1,7 @@
1
+ # CHANGELOG
2
+
3
+ ### Version 0.1.0
4
+
5
+ 2015-02-03
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,44 @@
1
+ # Pageflow Text Page
2
+
3
+ [![Gem Version](https://badge.fury.io/rb/pageflow-text-page.svg)](http://badge.fury.io/rb/pageflow-text-page)
4
+
5
+ Page type to display large texts on a page.
6
+
7
+ ## Installation
8
+
9
+ Add this line to your application's `Gemfile`:
10
+
11
+ gem 'pageflow-text-page'
12
+
13
+ Register the page type inside the configure block in `config/initializers/pageflow.rb`
14
+
15
+ Pageflow.configure do |config|
16
+ config.register_page_type(Pageflow::TextPage.page_type)
17
+ end
18
+
19
+ Include javascripts and stylesheets:
20
+
21
+ # app/assets/javascripts/pageflow/application.js
22
+ //= require pageflow/text_page
23
+
24
+ # app/assets/javascripts/pageflow/editor.js
25
+ //= require pageflow/text_page/editor
26
+
27
+ # app/assets/stylesheets/pageflow/application.css.scss
28
+ @import "pageflow/text_page";
29
+
30
+ Execute `bundle install` Restart the application server.
31
+
32
+ ## Troubleshooting
33
+
34
+ If you run into problems while installing the page type, please also refer to the
35
+ [Troubleshooting](https://github.com/codevise/pageflow/wiki/Troubleshooting) wiki
36
+ page in the [Pageflow repository](https://github.com/codevise/pageflow). If that
37
+ doesn't help, consider
38
+ [filing an issue](https://github.com/codevise/pageflow-text-page/issues).
39
+
40
+ ## Contributing Locales
41
+
42
+ Edit the translations directly on the
43
+ [pageflow-text-page](http://www.localeapp.com/projects/public?search=tf/pageflow-text-page)
44
+ locale project.
data/Rakefile ADDED
@@ -0,0 +1,7 @@
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
@@ -0,0 +1,66 @@
1
+ pageflow.textPage.ContentImageEmbeddedView = Backbone.Marionette.View.extend({
2
+ modelEvents: {
3
+ 'change': 'update'
4
+ },
5
+
6
+ render: function() {
7
+ this.img = this.$el.find('img');
8
+ this.text = this.$el.find('.inline-image-text');
9
+
10
+ this.update();
11
+ return this;
12
+ },
13
+
14
+ update: function() {
15
+
16
+ var image = this.model.getImageFileUrl(this.options.imagePropertyName);
17
+ var description = this.model.get(this.options.descriptionPropertyName);
18
+
19
+ this.$el.toggleClass('no_image_assigned', !image);
20
+
21
+ if (this.img) {
22
+ if(!this.img || this.img.length === 0) {
23
+ this.img = $('<img/>');
24
+ this.$el.prepend(this.img);
25
+ }
26
+ if(this.text) {
27
+ this.text.remove();
28
+ this.text = null;
29
+ }
30
+
31
+ this.img.attr('src', image);
32
+ this.img.attr('title', description);
33
+ }
34
+ else {
35
+ if (description && !this.defaultImage) {
36
+ this.defaultImage = $('<div/>').addClass('default-image');
37
+ this.$el.prepend(this.defaultImage);
38
+ }
39
+ else if(this.defaultImage) {
40
+ this.defaultImage.remove();
41
+ this.defaultImage = null;
42
+ }
43
+
44
+ if (this.img) {
45
+ this.img.remove();
46
+ this.img = null;
47
+ }
48
+ }
49
+
50
+ if (description) {
51
+ if(!this.text) {
52
+ this.text = $('<div/>')
53
+ .addClass('inline_image_text')
54
+ .append($('<span/>'));
55
+ this.$el.append(this.text);
56
+ }
57
+
58
+ this.text.find('span').html(description);
59
+ }
60
+ else if (this.text) {
61
+ this.text.remove();
62
+ this.text = null;
63
+ }
64
+
65
+ }
66
+ });
@@ -0,0 +1,56 @@
1
+ //= require_self
2
+ //= require ./editor/content_image_embedded_view
3
+
4
+ pageflow.textPage = pageflow.textPage || {};
5
+
6
+ pageflow.ConfigurationEditorView.register('text_page', {
7
+ configure: function () {
8
+ this.tab('header', function () {
9
+ this.input('text_coverage', pageflow.SelectInputView, {values: pageflow.textPage.textCoverageOptions});
10
+ this.input('title', pageflow.TextInputView, {required: true});
11
+ this.input('hide_title', pageflow.CheckBoxInputView);
12
+ this.input('tagline', pageflow.TextInputView);
13
+ this.input('subtitle', pageflow.TextInputView);
14
+ this.input('text_position', pageflow.SelectInputView, {values: pageflow.textPage.titlePositions});
15
+ this.input('background_image_id', pageflow.FileInputView, {
16
+ collection: pageflow.imageFiles,
17
+ fileSelectionHandlerOptions: {
18
+ returnToTab: 'header'
19
+ }
20
+ });
21
+ this.input('gradient_opacity', pageflow.SliderInputView);
22
+ this.input('invert', pageflow.CheckBoxInputView);
23
+ });
24
+
25
+ this.tab('content', function () {
26
+ this.input('text_title', pageflow.TextInputView);
27
+ this.input('text', pageflow.TextAreaInputView);
28
+ this.input('invert_text', pageflow.CheckBoxInputView);
29
+
30
+ this.input('text_image_id', pageflow.FileInputView, {
31
+ collection: pageflow.imageFiles,
32
+ positioning: false,
33
+ fileSelectionHandlerOptions: {
34
+ returnToTab: 'content'
35
+ },
36
+ });
37
+ this.input('image_description', pageflow.TextInputView);
38
+ this.input('sticky_inline_image', pageflow.CheckBoxInputView);
39
+ this.input('prevent_fullscreen', pageflow.CheckBoxInputView);
40
+ this.input('inline_text_position', pageflow.SelectInputView, {values: pageflow.textPage.inlineTextPositions});
41
+ });
42
+
43
+ this.tab('options', function () {
44
+ this.input('topasset_parallax', pageflow.CheckBoxInputView);
45
+ this.input('topasset_dim', pageflow.CheckBoxInputView);
46
+ this.input('thumbnail_image_id', pageflow.FileInputView, {
47
+ collection: pageflow.imageFiles,
48
+ imagePositioning: false,
49
+ fileSelectionHandlerOptions: {
50
+ returnToTab: 'options'
51
+ }
52
+ });
53
+ this.group('options');
54
+ });
55
+ }
56
+ });
@@ -0,0 +1,266 @@
1
+ pageflow.pageType.register('text_page', _.extend({
2
+
3
+ prepareNextPageTimeout: 0,
4
+
5
+ enhance: function(pageElement, configuration) {
6
+ this.content = pageElement.find('.scroller');
7
+ this.scrollingDiv = pageElement.find('.scroller > div');
8
+ this.pageSpacerElement = pageElement.find('.page_spacer');
9
+ this.contentArea = pageElement.find('.contentText');
10
+ this.backgroundArea = pageElement.find('.background');
11
+ this.inlineImage = pageElement.find('.inline_image');
12
+ this.inlineImageInitialOffset = pageElement.find('.contentText h3').position().top + pageElement.find('.contentText h3').outerHeight();
13
+ this.fullScreenLayer = pageElement.find('.image_fullscreen_view');
14
+
15
+ if(configuration.text_position == "left" || configuration.text_position == "right") {
16
+ this.titleArea = pageElement.find('.backgroundArea .fixed_header_area');
17
+ }
18
+ else {
19
+ this.titleArea = pageElement.find('.contentInnerWrapper .page_header');
20
+ }
21
+
22
+ this.resizePageSpacer(pageElement, configuration);
23
+
24
+ pageElement.data('invertIndicator', !configuration.invert_text);
25
+ this.updateScrollEventListeners(pageElement, configuration);
26
+
27
+ if(!pageflow.features.has('mobile platform')) {
28
+ $(this.inlineImage).on('click', function(e) {
29
+ if(!configuration.prevent_fullscreen){
30
+ $('body').toggleClass('bigScreen');
31
+ e.preventDefault();
32
+ }
33
+ });
34
+ $(this.fullScreenLayer).on('click', function() {
35
+ $('body').toggleClass('bigScreen');
36
+
37
+ });
38
+ }
39
+ },
40
+
41
+ updateScrollEventListeners: function(pageElement, configuration) {
42
+ var pageType = this;
43
+ pageType.storedConfiguration = configuration;
44
+
45
+ if (!pageType.scrollEventHandlerAdded) {
46
+ pageType.scrollEventHandlerAdded = true;
47
+
48
+ pageType.content.scroller('onScroll', function() {
49
+ pageType.applyBackgroundEffects(pageElement, pageType.storedConfiguration);
50
+ pageType.applyInlineImageEffects(pageElement, pageType.storedConfiguration);
51
+ });
52
+
53
+ pageType.content.scroller('onScrollEnd', function() {
54
+ pageType.applyBackgroundEffects(pageElement, pageType.storedConfiguration);
55
+ });
56
+ }
57
+ },
58
+
59
+ applyBackgroundEffects: function(pageElement, configuration) {
60
+ var y = this.content.scroller('positionY'),
61
+ earlyDimOffset = pageElement.height() / 20,
62
+ titleOffset = configuration.text_position == "left" || configuration.text_position == "right" ? 0 : this.titleArea.height(),
63
+ dimHeight = this.pageSpacerElement.height() - titleOffset - earlyDimOffset,
64
+ dimHeightTitle = this.pageSpacerElement.height() - earlyDimOffset,
65
+ spacerPageRatio = dimHeight / pageElement.height();
66
+
67
+ pageElement.find('.backgroundArea .fixed_header_area').css('opacity', (0.6 * dimHeightTitle + y)/(dimHeightTitle * 0.6)); // Abblenden des Titels, immer*/
68
+
69
+ if(configuration.topasset_dim) {
70
+ pageElement.find('.backgroundArea .background').css('opacity', 1 - (-y / dimHeight)); // Abblenden */
71
+ }
72
+ else {
73
+ pageElement.find('.backgroundArea .background').css('opacity', 1);
74
+ }
75
+
76
+ var parallaxPosition = y * 0.2;
77
+
78
+ if(configuration.topasset_parallax) {
79
+ pageElement.find('.backgroundArea .background').css({"-webkit-transform":"translateY(" + parallaxPosition + "px)", "-moz-transform":"translateY(" + parallaxPosition + "px)", "-ms-transform":"translateY(" + parallaxPosition + "px)", "-o-transform":"translateY(" + parallaxPosition + "px)", "transform":"translateY(" + parallaxPosition + "px)"}); // Parallax
80
+ }
81
+ else {
82
+ pageElement.find('.backgroundArea .background').css({'-webkit-transform': 'translateY(0)','-o-transform': 'translateY(0)','-ms-transform': 'translateY(0)', '-moz-transform': 'translateY(0)', 'transform': 'translateY(0)'}); // Parallax
83
+ }
84
+ },
85
+
86
+ applyInlineImageEffects: function(pageElement, configuration) {
87
+ if(pageElement.width() >= 700) {
88
+ if(configuration.sticky_inline_image) {
89
+ var y = this.content.scroller('positionY'),
90
+ calcMarginTop = this.inlineImage.outerHeight() < pageElement.height() ? (pageElement.height() - this.inlineImage.outerHeight()) / 2 : (pageElement.height() - this.inlineImage.outerHeight()),
91
+ limitToReach = calcMarginTop - this.inlineImageInitialTop;
92
+
93
+ if(y <= limitToReach) {
94
+ this.inlineImage.css('top', ((-y - this.inlineImageInitialTop + this.inlineImageInitialOffset + calcMarginTop)) + 'px');
95
+ }
96
+ else {
97
+ this.inlineImage.css('top', (this.inlineImageInitialOffset) + 'px');
98
+ }
99
+ }
100
+ else {
101
+ if(configuration.inline_text_position == "center") {
102
+ this.inlineImage.css('top', '0px');
103
+ }
104
+ else {
105
+ this.inlineImage.css('top', (this.inlineImageInitialOffset) + 'px');
106
+ }
107
+ }
108
+ }
109
+ else {
110
+ this.inlineImage.css('top', '0px');
111
+ }
112
+ },
113
+
114
+ resizePageSpacer: function(pageElement, configuration) {
115
+ if(pageElement.find('.content_and_background').hasClass('no_background_image')) {
116
+ this.pageSpacerElement.css('height', this.titleArea.outerHeight() + 'px');
117
+ }
118
+ else {
119
+ if (configuration.text_coverage == 'banner') {
120
+ var bannerHeight = this.titleArea.outerHeight() > pageElement.height() / 3 ? this.titleArea.outerHeight() : pageElement.height() / 3;
121
+ this.pageSpacerElement.css('height', bannerHeight + 'px');
122
+ }
123
+ else if (configuration.text_coverage == 'title_only') {
124
+ this.pageSpacerElement.css('height', pageElement.height() + 'px');
125
+ }
126
+ else {
127
+ if (pageElement.height() - 200 > 200) {
128
+ this.pageSpacerElement.css('height', pageElement.height() - 200 + 'px');
129
+ }
130
+ }
131
+ }
132
+
133
+ this.backgroundArea.css('height', this.pageSpacerElement.height() + 'px');
134
+
135
+ this.contentArea.css('min-height', pageElement.height() + 'px'); //min-heights for white area/ text area for short text?
136
+ this.content.scroller('refresh');
137
+ },
138
+
139
+ resize: function(pageElement, configuration) {
140
+ var y = this.content.scroller('positionY');
141
+
142
+ this.resizePageSpacer(pageElement, configuration);
143
+ this.inlineImageInitialOffset = pageElement.find('.contentText h3').position().top;
144
+ this.inlineImage.css('top', this.inlineImageInitialOffset + 'px');
145
+ this.inlineImageInitialTop = this.inlineImage.offset().top - this.scrollingDiv.offset().top;
146
+ this.applyInlineImageEffects(pageElement, configuration);
147
+ this.applyBackgroundEffects(pageElement, configuration);
148
+ },
149
+
150
+ prepare: function(pageElement, configuration) {
151
+ },
152
+
153
+ preload: function(pageElement, configuration) {
154
+ return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
155
+ },
156
+
157
+ activating: function(pageElement, configuration) {
158
+ var y = this.content.scroller('positionY');
159
+
160
+ this.resizePageSpacer(pageElement, configuration);
161
+ this.inlineImageInitialOffset = pageElement.find('.contentText h3').position().top + pageElement.find('.contentText h3').outerHeight();
162
+ this.inlineImage.css('top', this.inlineImageInitialOffset + 'px');
163
+ this.inlineImageInitialTop = this.inlineImage.offset().top - this.scrollingDiv.offset().top;
164
+
165
+ this.applyBackgroundEffects(pageElement, configuration);
166
+
167
+ this.applyInlineImageEffects(pageElement, configuration);
168
+ },
169
+
170
+ activated: function(pageElement, configuration) {
171
+ },
172
+
173
+ deactivating: function(pageElement, configuration) {
174
+ $('body').removeClass('bigScreen');
175
+ },
176
+
177
+ deactivated: function(pageElement, configuration) {},
178
+
179
+ update: function(pageElement, configuration) {
180
+ var y = this.content.scroller('positionY');
181
+
182
+ pageElement.attr('data-template', 'text_page');
183
+ pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
184
+ pageElement.find('h2 .title').text(configuration.get('title') || '');
185
+ pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
186
+ pageElement.find('.contentText .text_title').text(configuration.get('text_title') || '');
187
+ pageElement.find('.contentText p').html(configuration.get('text') || '');
188
+
189
+ pageElement.find('.content_and_background').toggleClass('no_background_image', !configuration.getImageFile('background_image_id'));
190
+
191
+ pageElement.find('.content_and_background').toggleClass('sticky_inline_image', configuration.get('sticky_inline_image'));
192
+
193
+ if(configuration.get('text_position') == "left" || configuration.get('text_position') == "right") {
194
+ this.titleArea = pageElement.find('.backgroundArea .fixed_header_area');
195
+ }
196
+ else {
197
+ this.titleArea = pageElement.find('.contentInnerWrapper .page_header');
198
+ }
199
+
200
+ this.updateCommonPageCssClasses(pageElement, configuration);
201
+
202
+ _.forEach(pageflow.textPage.titlePositions, function(position) {
203
+ pageElement.toggleClass('text_position_' + position, configuration.get('text_position') === position);
204
+ });
205
+
206
+ _.forEach(pageflow.textPage.inlineTextPositions, function(position) {
207
+ pageElement.find('.content').toggleClass('inline_text_position_' + position, configuration.get('inline_text_position') === position);
208
+ });
209
+
210
+ if(!configuration.get('inline_text_position')) {
211
+ pageElement.find('.content').addClass('inline_text_position_left');
212
+ }
213
+
214
+ if(!configuration.get('prevent_fullscreen') && configuration.get('text_image_id')) {
215
+ this.inlineImage.attr('href', configuration.getImageFileUrl('text_image_id'));
216
+ }
217
+ else {
218
+ this.inlineImage.attr('href', '#');
219
+ }
220
+ this.inlineImage.toggleClass('allow_fullscreen', !configuration.get('prevent_fullscreen'));
221
+
222
+ _.forEach(pageflow.textPage.textCoverageOptions, function(option) {
223
+ pageElement.toggleClass(option, configuration.get('text_coverage') === option);
224
+ });
225
+
226
+ pageElement.find('.content_and_background').toggleClass('invert_text', !!configuration.get('invert_text'));
227
+ pageElement.data('invertIndicator', !configuration.get('invert_text'));
228
+
229
+ pageElement.find('.shadow, .header_background_layer').css({
230
+ opacity: configuration.get('gradient_opacity') / 100
231
+ });
232
+
233
+
234
+ this.resizePageSpacer(pageElement, configuration.attributes);
235
+
236
+ this.inlineImageInitialOffset = pageElement.find('.contentText h3').position().top + pageElement.find('.contentText h3').outerHeight();
237
+ this.inlineImage.css('top', this.inlineImageInitialOffset + 'px');
238
+ this.inlineImageInitialTop = this.inlineImage.offset().top - this.scrollingDiv.offset().top;
239
+ this.applyInlineImageEffects(pageElement, configuration.attributes);
240
+ this.applyBackgroundEffects(pageElement, configuration.attributes);
241
+ this.updateScrollEventListeners(pageElement, configuration.attributes);
242
+ },
243
+
244
+ embeddedEditorViews: function() {
245
+ return {
246
+ '.background_image': {
247
+ view: pageflow.BackgroundImageEmbeddedView,
248
+ options: {propertyName: 'background_image_id'}
249
+ },
250
+ '.inline_image': {
251
+ view: pageflow.textPage.ContentImageEmbeddedView,
252
+ options: {
253
+ imagePropertyName: 'text_image_id',
254
+ descriptionPropertyName: 'image_description'
255
+ }
256
+ },
257
+ '.image_fullscreen_inner_wrapper': {
258
+ view: pageflow.textPage.ContentImageEmbeddedView,
259
+ options: {
260
+ imagePropertyName: 'text_image_id',
261
+ descriptionPropertyName: 'image_description'
262
+ }
263
+ }
264
+ };
265
+ }
266
+ }, pageflow.commonPageCssClasses));
@@ -0,0 +1,8 @@
1
+ //= require_self
2
+ //= require ./text_page/page_type
3
+
4
+ pageflow.textPage = pageflow.textPage || {};
5
+
6
+ pageflow.textPage.titlePositions = ['left', 'center', 'right'];
7
+ pageflow.textPage.inlineTextPositions = ['left', 'center', 'right'];
8
+ pageflow.textPage.textCoverageOptions = ['extend_into', 'banner', 'title_only'];