pageflow-text-page 0.1.0

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    NGQyZjMxYjM5ZWYyMDY5YWUxNDJlODJmMWE4Mzk0NzJkYTZmNjRmMQ==
+  data.tar.gz: !binary |-
+    NjNiMjYxNDkwOWQ0MjZlY2Y2Njg5MTIyOTUwMzBlOTlmNDE4NzI5ZQ==
+SHA512:
+  metadata.gz: !binary |-
+    ZmY1ZDMxMGRjZGVlYTkxNjI4NjFhNDFmNGMxNjBkZjkwZGJmNTk2MGJkYjc5
+    Mjg5OTA4NmYyY2ZkODU5YTA5NzkyNjdmYjE1NjA4NWI5M2VhYTMyOTRkMjdh
+    ZGQ1NWNlMTA1YmY5MDY3NGI3NDRjYTdhODNkZTk3OTBjNWRmZWM=
+  data.tar.gz: !binary |-
+    OWRmMWNiNTk4MzMxODlkNGViN2IyMmZkZjgwNmRiOTBmNzhjYTFkYjA3YjU2
+    MWNjMjRlYTI4Mjg5MzlmMjE5NzAyM2VmMTQ2MTRiNGU4Njc3N2Y3OWM0MzQw
+    MGY5ZWQyYmIyZDY4Yjc1YTc1NDEzNWUwYmQyZDU2Y2M0NmRiY2Q=

data/.gitignore

@@ -0,0 +1,22 @@
+*.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

data/.jshintignore

@@ -0,0 +1 @@
+vendor/assets/javascripts/**

data/.jshintrc

@@ -0,0 +1,22 @@
+{
+  "browser": true,
+  "undef": true,
+  "immed": true,
+  "trailing": true,
+  "globals": {
+    "jQuery": true,
+    "$": true,
+    "Backbone": true,
+    "Cocktail": true,
+    "_": true,
+    "vjs": true,
+    "Audio5js": true,
+    "I18n": true,
+
+    "pageflow": true,
+    "editor": true,
+    
+    "confirm": true,
+    "alert": true
+  }
+}

data/CHANGELOG.md

@@ -0,0 +1,7 @@
+# CHANGELOG
+
+### Version 0.1.0
+
+2015-02-03
+
+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,44 @@
+# Pageflow Text Page
+
+[![Gem Version](https://badge.fury.io/rb/pageflow-text-page.svg)](http://badge.fury.io/rb/pageflow-text-page)
+
+Page type to display large texts on a page.
+
+## Installation
+
+Add this line to your application's `Gemfile`:
+
+    gem 'pageflow-text-page'
+
+Register the page type inside the configure block in `config/initializers/pageflow.rb`
+
+    Pageflow.configure do |config|
+      config.register_page_type(Pageflow::TextPage.page_type)
+    end
+
+Include javascripts and stylesheets:
+
+    # app/assets/javascripts/pageflow/application.js
+    //= require pageflow/text_page
+
+    # app/assets/javascripts/pageflow/editor.js
+    //= require pageflow/text_page/editor
+
+    # app/assets/stylesheets/pageflow/application.css.scss
+    @import "pageflow/text_page";
+
+Execute `bundle install` Restart the application server.
+
+## 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-text-page/issues).
+
+## Contributing Locales
+
+Edit the translations directly on the
+[pageflow-text-page](http://www.localeapp.com/projects/public?search=tf/pageflow-text-page)
+locale project.

data/Rakefile

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

data/app/assets/javascript/pageflow/text_page/editor/content_image_embedded_view.js

@@ -0,0 +1,66 @@
+pageflow.textPage.ContentImageEmbeddedView = Backbone.Marionette.View.extend({
+  modelEvents: {
+    'change': 'update'
+  },
+
+  render: function() {
+    this.img = this.$el.find('img');
+    this.text = this.$el.find('.inline-image-text');
+
+    this.update();
+    return this;
+  },
+
+  update: function() {
+
+    var image = this.model.getImageFileUrl(this.options.imagePropertyName);
+    var description = this.model.get(this.options.descriptionPropertyName);
+
+    this.$el.toggleClass('no_image_assigned', !image);
+
+    if (this.img) {
+      if(!this.img || this.img.length === 0) {
+        this.img = $('<img/>');
+        this.$el.prepend(this.img);
+      }
+      if(this.text) {
+        this.text.remove();
+        this.text = null;
+      }
+
+      this.img.attr('src', image);
+      this.img.attr('title', description);
+    }
+    else {
+      if (description && !this.defaultImage) {
+        this.defaultImage = $('<div/>').addClass('default-image');
+        this.$el.prepend(this.defaultImage);
+      }
+      else if(this.defaultImage) {
+        this.defaultImage.remove();
+        this.defaultImage = null;
+      }
+
+      if (this.img) {
+        this.img.remove();
+        this.img = null;
+      }
+    }
+
+    if (description) {
+      if(!this.text) {
+        this.text = $('<div/>')
+          .addClass('inline_image_text')
+          .append($('<span/>'));
+        this.$el.append(this.text);
+      }
+
+      this.text.find('span').html(description);
+    }
+    else if (this.text) {
+      this.text.remove();
+      this.text = null;
+    }
+
+  }
+});

data/app/assets/javascript/pageflow/text_page/editor.js

@@ -0,0 +1,56 @@
+//= require_self
+//= require ./editor/content_image_embedded_view
+
+pageflow.textPage = pageflow.textPage || {};
+
+pageflow.ConfigurationEditorView.register('text_page', {
+  configure: function () {
+    this.tab('header', function () {
+      this.input('text_coverage', pageflow.SelectInputView, {values: pageflow.textPage.textCoverageOptions});
+      this.input('title', pageflow.TextInputView, {required: true});
+      this.input('hide_title', pageflow.CheckBoxInputView);
+      this.input('tagline', pageflow.TextInputView);
+      this.input('subtitle', pageflow.TextInputView);
+      this.input('text_position', pageflow.SelectInputView, {values: pageflow.textPage.titlePositions});
+      this.input('background_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        fileSelectionHandlerOptions: {
+          returnToTab: 'header'
+        }
+      });
+      this.input('gradient_opacity', pageflow.SliderInputView);
+      this.input('invert', pageflow.CheckBoxInputView);
+    });
+
+    this.tab('content', function () {
+      this.input('text_title', pageflow.TextInputView);
+      this.input('text', pageflow.TextAreaInputView);
+      this.input('invert_text', pageflow.CheckBoxInputView);
+
+      this.input('text_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        positioning: false,
+        fileSelectionHandlerOptions: {
+          returnToTab: 'content'
+        },
+      });
+      this.input('image_description', pageflow.TextInputView);
+      this.input('sticky_inline_image', pageflow.CheckBoxInputView);
+      this.input('prevent_fullscreen', pageflow.CheckBoxInputView);
+      this.input('inline_text_position', pageflow.SelectInputView, {values: pageflow.textPage.inlineTextPositions});
+    });
+
+    this.tab('options', function () {
+      this.input('topasset_parallax', pageflow.CheckBoxInputView);
+      this.input('topasset_dim', pageflow.CheckBoxInputView);
+      this.input('thumbnail_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        imagePositioning: false,
+        fileSelectionHandlerOptions: {
+          returnToTab: 'options'
+        }
+      });
+      this.group('options');
+    });
+  }
+});

data/app/assets/javascript/pageflow/text_page/page_type.js

@@ -0,0 +1,266 @@
+pageflow.pageType.register('text_page', _.extend({
+
+  prepareNextPageTimeout: 0,
+
+  enhance: function(pageElement, configuration) {
+    this.content = pageElement.find('.scroller');
+    this.scrollingDiv = pageElement.find('.scroller > div');
+    this.pageSpacerElement = pageElement.find('.page_spacer');
+    this.contentArea = pageElement.find('.contentText');
+    this.backgroundArea = pageElement.find('.background');
+    this.inlineImage = pageElement.find('.inline_image');
+    this.inlineImageInitialOffset = pageElement.find('.contentText h3').position().top + pageElement.find('.contentText h3').outerHeight();
+    this.fullScreenLayer = pageElement.find('.image_fullscreen_view');
+
+    if(configuration.text_position == "left" || configuration.text_position == "right") {
+      this.titleArea = pageElement.find('.backgroundArea .fixed_header_area');
+    }
+    else {
+      this.titleArea = pageElement.find('.contentInnerWrapper .page_header');
+    }
+
+    this.resizePageSpacer(pageElement, configuration);
+
+    pageElement.data('invertIndicator', !configuration.invert_text);
+    this.updateScrollEventListeners(pageElement, configuration);
+
+    if(!pageflow.features.has('mobile platform')) {
+      $(this.inlineImage).on('click', function(e) {
+        if(!configuration.prevent_fullscreen){
+          $('body').toggleClass('bigScreen');
+          e.preventDefault();
+        }
+      });
+      $(this.fullScreenLayer).on('click', function() {
+        $('body').toggleClass('bigScreen');
+
+      });
+    }
+  },
+
+  updateScrollEventListeners: function(pageElement, configuration) {
+    var pageType = this;
+    pageType.storedConfiguration = configuration;
+
+    if (!pageType.scrollEventHandlerAdded) {
+      pageType.scrollEventHandlerAdded = true;
+
+      pageType.content.scroller('onScroll', function() {
+        pageType.applyBackgroundEffects(pageElement, pageType.storedConfiguration);
+        pageType.applyInlineImageEffects(pageElement, pageType.storedConfiguration);
+      });
+
+      pageType.content.scroller('onScrollEnd', function() {
+        pageType.applyBackgroundEffects(pageElement, pageType.storedConfiguration);
+      });
+    }
+  },
+
+  applyBackgroundEffects: function(pageElement, configuration) {
+    var y = this.content.scroller('positionY'),
+      earlyDimOffset = pageElement.height() / 20,
+      titleOffset = configuration.text_position == "left" || configuration.text_position == "right" ? 0 : this.titleArea.height(),
+      dimHeight = this.pageSpacerElement.height() - titleOffset - earlyDimOffset,
+      dimHeightTitle = this.pageSpacerElement.height() - earlyDimOffset,
+      spacerPageRatio = dimHeight / pageElement.height();
+
+    pageElement.find('.backgroundArea .fixed_header_area').css('opacity', (0.6 * dimHeightTitle + y)/(dimHeightTitle * 0.6)); // Abblenden des Titels, immer*/
+
+    if(configuration.topasset_dim) {
+      pageElement.find('.backgroundArea .background').css('opacity', 1 - (-y / dimHeight)); // Abblenden */
+    }
+    else {
+      pageElement.find('.backgroundArea .background').css('opacity', 1);
+    }
+
+    var parallaxPosition = y * 0.2;
+
+    if(configuration.topasset_parallax) {
+      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
+    }
+    else {
+      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
+    }
+  },
+
+  applyInlineImageEffects: function(pageElement, configuration) {
+    if(pageElement.width() >= 700) {
+      if(configuration.sticky_inline_image) {
+        var y = this.content.scroller('positionY'),
+          calcMarginTop = this.inlineImage.outerHeight() < pageElement.height() ? (pageElement.height() - this.inlineImage.outerHeight()) / 2 : (pageElement.height() - this.inlineImage.outerHeight()),
+          limitToReach = calcMarginTop - this.inlineImageInitialTop;
+
+        if(y <= limitToReach) {
+          this.inlineImage.css('top', ((-y - this.inlineImageInitialTop + this.inlineImageInitialOffset + calcMarginTop)) + 'px');
+        }
+        else {
+          this.inlineImage.css('top', (this.inlineImageInitialOffset) + 'px');
+        }
+      }
+      else {
+        if(configuration.inline_text_position == "center") {
+          this.inlineImage.css('top', '0px');
+        }
+        else {
+          this.inlineImage.css('top', (this.inlineImageInitialOffset) + 'px');
+        }
+      }
+    }
+    else {
+      this.inlineImage.css('top', '0px');
+    }
+  },
+
+  resizePageSpacer: function(pageElement, configuration) {
+    if(pageElement.find('.content_and_background').hasClass('no_background_image')) {
+      this.pageSpacerElement.css('height', this.titleArea.outerHeight() + 'px');
+    }
+    else {
+      if (configuration.text_coverage == 'banner') {
+        var bannerHeight = this.titleArea.outerHeight() > pageElement.height() / 3 ? this.titleArea.outerHeight() : pageElement.height() / 3;
+        this.pageSpacerElement.css('height', bannerHeight + 'px');
+      }
+      else if (configuration.text_coverage == 'title_only') {
+        this.pageSpacerElement.css('height', pageElement.height() + 'px');
+      }
+      else {
+        if (pageElement.height() - 200 > 200) {
+          this.pageSpacerElement.css('height', pageElement.height() - 200 + 'px');
+        }
+      }
+    }
+
+    this.backgroundArea.css('height', this.pageSpacerElement.height() + 'px');
+
+    this.contentArea.css('min-height', pageElement.height() + 'px'); //min-heights for white area/ text area for short text?
+    this.content.scroller('refresh');
+  },
+
+  resize: function(pageElement, configuration) {
+    var y = this.content.scroller('positionY');
+
+    this.resizePageSpacer(pageElement, configuration);
+    this.inlineImageInitialOffset = pageElement.find('.contentText h3').position().top;
+    this.inlineImage.css('top', this.inlineImageInitialOffset + 'px');
+    this.inlineImageInitialTop = this.inlineImage.offset().top - this.scrollingDiv.offset().top;
+    this.applyInlineImageEffects(pageElement, configuration);
+    this.applyBackgroundEffects(pageElement, configuration);
+  },
+
+  prepare: function(pageElement, configuration) {
+  },
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  activating: function(pageElement, configuration) {
+    var y = this.content.scroller('positionY');
+
+    this.resizePageSpacer(pageElement, configuration);
+    this.inlineImageInitialOffset = pageElement.find('.contentText h3').position().top + pageElement.find('.contentText h3').outerHeight();
+    this.inlineImage.css('top', this.inlineImageInitialOffset + 'px');
+    this.inlineImageInitialTop = this.inlineImage.offset().top - this.scrollingDiv.offset().top;
+
+    this.applyBackgroundEffects(pageElement, configuration);
+
+    this.applyInlineImageEffects(pageElement, configuration);
+  },
+
+  activated: function(pageElement, configuration) {
+  },
+
+  deactivating: function(pageElement, configuration) {
+    $('body').removeClass('bigScreen');
+  },
+
+  deactivated: function(pageElement, configuration) {},
+
+  update: function(pageElement, configuration) {
+    var y = this.content.scroller('positionY');
+
+    pageElement.attr('data-template', 'text_page');
+    pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
+    pageElement.find('h2 .title').text(configuration.get('title') || '');
+    pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
+    pageElement.find('.contentText .text_title').text(configuration.get('text_title') || '');
+    pageElement.find('.contentText p').html(configuration.get('text') || '');
+
+    pageElement.find('.content_and_background').toggleClass('no_background_image', !configuration.getImageFile('background_image_id'));
+
+    pageElement.find('.content_and_background').toggleClass('sticky_inline_image', configuration.get('sticky_inline_image'));
+
+    if(configuration.get('text_position') == "left" || configuration.get('text_position') == "right") {
+      this.titleArea = pageElement.find('.backgroundArea .fixed_header_area');
+    }
+    else {
+      this.titleArea = pageElement.find('.contentInnerWrapper .page_header');
+    }
+
+    this.updateCommonPageCssClasses(pageElement, configuration);
+
+    _.forEach(pageflow.textPage.titlePositions, function(position) {
+      pageElement.toggleClass('text_position_' + position, configuration.get('text_position') === position);
+    });
+
+    _.forEach(pageflow.textPage.inlineTextPositions, function(position) {
+      pageElement.find('.content').toggleClass('inline_text_position_' + position, configuration.get('inline_text_position') === position);
+    });
+
+    if(!configuration.get('inline_text_position')) {
+      pageElement.find('.content').addClass('inline_text_position_left');
+    }
+
+    if(!configuration.get('prevent_fullscreen') && configuration.get('text_image_id')) {
+      this.inlineImage.attr('href', configuration.getImageFileUrl('text_image_id'));
+    }
+    else {
+      this.inlineImage.attr('href', '#');
+    }
+    this.inlineImage.toggleClass('allow_fullscreen', !configuration.get('prevent_fullscreen'));
+
+    _.forEach(pageflow.textPage.textCoverageOptions, function(option) {
+      pageElement.toggleClass(option, configuration.get('text_coverage') === option);
+    });
+
+    pageElement.find('.content_and_background').toggleClass('invert_text', !!configuration.get('invert_text'));
+    pageElement.data('invertIndicator', !configuration.get('invert_text'));
+
+    pageElement.find('.shadow, .header_background_layer').css({
+      opacity: configuration.get('gradient_opacity') / 100
+    });
+
+
+    this.resizePageSpacer(pageElement, configuration.attributes);
+
+    this.inlineImageInitialOffset = pageElement.find('.contentText h3').position().top + pageElement.find('.contentText h3').outerHeight();
+    this.inlineImage.css('top', this.inlineImageInitialOffset + 'px');
+    this.inlineImageInitialTop = this.inlineImage.offset().top - this.scrollingDiv.offset().top;
+    this.applyInlineImageEffects(pageElement, configuration.attributes);
+    this.applyBackgroundEffects(pageElement, configuration.attributes);
+    this.updateScrollEventListeners(pageElement, configuration.attributes);
+  },
+
+  embeddedEditorViews: function() {
+    return {
+      '.background_image': {
+        view: pageflow.BackgroundImageEmbeddedView,
+        options: {propertyName: 'background_image_id'}
+      },
+      '.inline_image': {
+        view: pageflow.textPage.ContentImageEmbeddedView,
+        options: {
+          imagePropertyName: 'text_image_id',
+          descriptionPropertyName: 'image_description'
+        }
+      },
+      '.image_fullscreen_inner_wrapper': {
+        view: pageflow.textPage.ContentImageEmbeddedView,
+        options: {
+          imagePropertyName: 'text_image_id',
+          descriptionPropertyName: 'image_description'
+        }
+      }
+    };
+  }
+}, pageflow.commonPageCssClasses));

data/app/assets/javascript/pageflow/text_page.js

@@ -0,0 +1,8 @@
+//= require_self
+//= require ./text_page/page_type
+
+pageflow.textPage = pageflow.textPage || {};
+
+pageflow.textPage.titlePositions = ['left', 'center', 'right'];
+pageflow.textPage.inlineTextPositions = ['left', 'center', 'right'];
+pageflow.textPage.textCoverageOptions = ['extend_into', 'banner', 'title_only'];