pageflow-timeline-page 0.1.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 994702dcbaaf89d67d961e7979925807849c40f8
-  data.tar.gz: 7da5bfb08e81052571929656bd2a4e6e1b56b4db
+  metadata.gz: 2848f2a0f987663b262d60a8fc663c82a903fd38
+  data.tar.gz: 12377cf7fd34b7ec25842ec1c64cc5d40fcf8f47
 SHA512:
-  metadata.gz: 73daa8bc375381fb3cb1551b0367c0c78628906322171d069c8ae9750ad9169df01b5bf2fad04a2ca377564fac7b362a3b605c7cf253721e3bc5ac025ec97ca7
-  data.tar.gz: 9bf524ca7c9418a2f68f2d504e1a47982a69efb4441416f248450c9de2a56587920433ca28189eccf5b3b934aef38b172dbe788953d78f0721dbae445a44f97a
+  metadata.gz: 512ee499dd9f374f1a34e6e2d64ce58f2d4bc32dd5759190d2d46ee0b3fe4a4db132af8c7878b12a9f6ac68ad7ba4c2e076b80bf95a67fc85973ee7894986a5e
+  data.tar.gz: d84deb9445349946b5283e1b38c6a5bb47fd185272df4496d3da3cf97c483137e2dac2eac885313c4ae04f26e6b2795b860522201972cecf1fc7b929385c1a38

data/CHANGELOG.md

@@ -1,7 +1,18 @@
 # CHANGELOG
 
-### Version 0.1.0
+### Version 1.0.0
 
-2016-06-09
+2017-08-11
 
-- Initial release.
+[Compare changes](https://github.com/codevise/pageflow-timeline-page/compare/0-1-stable...v1.0.0)
+
+- Rewrite dragging/measuring logic
+  ([#8](https://github.com/codevise/pageflow-timeline-page/pull/8))
+- Require pageflow 12
+  ([#7](https://github.com/codevise/pageflow-timeline-page/pull/7))
+- Allow to use background video
+  ([#5](https://github.com/codevise/pageflow-timeline-page/pull/5))
+
+See
+[0-1-stable branch](https://github.com/codevise/pageflow-timeline-page/blob/0-1-stable/CHANGELOG.md)
+for previous changes.

data/Gemfile

@@ -2,9 +2,3 @@ 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

@@ -29,10 +29,10 @@ Include javascripts and stylesheets:
     # app/assets/javascripts/pageflow/editor.js
     //= require pageflow/timeline_page/editor
 
-    # app/assets/stylesheets/pageflow/application.css.scss
+    # app/assets/stylesheets/pageflow/application.scss
     @import "pageflow/timeline_page";
 
-    # app/assets/stylesheets/pageflow/themes/default.css.scss
+    # app/assets/stylesheets/pageflow/themes/default.scss
     @import "pageflow/timeline_page/themes/default";
 
 Execute `bundle install` and restart the application server.

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

@@ -1,17 +1,18 @@
 (function() {
+  const {registerPageType, connectInPage, combine} = pageflow.react;
+  const {pageAttributes} = pageflow.react.selectors;
+
   class Page extends React.Component {
     render() {
       var {PageWrapper,
-           PageBackground, PageBackgroundImage, PageShadow,
+           MediaPageBackground,
            PageContent, PageHeader, PageText} = pageflow.react.components;
+
       var {Timeline} = pageflow.timelinePage;
 
       return (
         <PageWrapper>
-          <PageBackground>
-            <PageBackgroundImage page={this.props.page} />
-            <PageShadow page={this.props.page} />
-          </PageBackground>
+          <MediaPageBackground page={this.props.page} />
 
           <PageContent>
             <PageHeader page={this.props.page} />
@@ -24,5 +25,13 @@
     }
   };
 
-  pageflow.timelinePage.Page = pageflow.react.createPage(Page);
+  registerPageType('timeline_page', {
+    component: connectInPage(combine({
+      page: pageAttributes()
+    }))(Page),
+
+    reduxModules: [
+      pageflow.react.mediaPageBackgroundReduxModule
+    ]
+  });
 }());

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

@@ -1,5 +1,5 @@
 (function() {
-  class Timeline extends React.Component {
+  pageflow.timelinePage.Timeline = class extends React.Component {
     render() {
       return (
         <ul className="timeline">
@@ -22,6 +22,4 @@
       return this.props.pageLinks || [];
     }
   };
-
-  pageflow.timelinePage.Timeline = pageflow.react.createContainer(Timeline);
 }());

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

@@ -1,12 +1,12 @@
-
 (function() {
-  var resolve = pageflow.react.resolve;
+  const {connect, combine} = pageflow.react;
+  const {pageAttributes, prop} = pageflow.react.selectors;
 
   class TimelineItem extends React.Component {
     render() {
       var {PageLink, LazyLoadedPageThumbnail} = pageflow.react.components;
       var {TimelineItemSpacer} = pageflow.timelinePage;
-      var targetPage = this.props.pageLink.targetPage;
+      var targetPage = this.props.targetPage;
 
       return (
         <li className={this.className()}>
@@ -57,17 +57,11 @@
 
     caption() {
       return this.props.pageLink.title ||
-             (this.props.pageLink.targetPage && this.props.pageLink.targetPage.title);
+             (this.props.targetPage && this.props.targetPage.title);
     }
   };
 
-  pageflow.timelinePage.TimelineItem = pageflow.react.createContainer(TimelineItem, {
-    fragments: {
-      pageLink: {
-        targetPage: resolve('page', {
-          property: 'targetPageId'
-        })
-      }
-    }
-  });
+  pageflow.timelinePage.TimelineItem = connect(combine({
+    targetPage: pageAttributes({id: prop('pageLink.targetPageId')})
+  }))(TimelineItem);
 }());

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

@@ -1,23 +1,26 @@
 (function() {
-  var mutate = pageflow.react.mutate;
+  const {connectInPage, combine} = pageflow.react;
+  const {editorOnly} = pageflow.react.components;
+  const {updatePageLink} = pageflow.react.actions;
 
   class TimelineItemEditorMenu extends React.Component {
     constructor(props) {
       super(props);
-      this.state = {};
+      this.state = {
+        top: 0
+      };
     }
 
     render() {
       var {Draggable} = pageflow.react.components;
 
-      var start = {x: 0, y: this.props.top || 0};
+      var position = {x: 0, y: this.state.top};
       var bounds = {left: 0, right: 0, top: 0, bottom: 1000};
 
       return (
-        <Draggable start={start}
+        <Draggable position={position}
                    grid={[5, 5]}
                    bounds={bounds}
-                   moveOnStartChange={this.state.topChanged}
                    handle=".timeline_item_editor_menu-handle"
                    onStart={this._handleDragStart.bind(this)}
                    onDrag={this._handleDrag.bind(this)}
@@ -41,21 +44,24 @@
     }
 
     componentWillReceiveProps(nextProps) {
-      this.setState({
-        topChanged: (nextProps.top !== this.props.top)
-      });
+      if (nextProps.top !== this.props.top) {
+        this.setState({
+          top: nextProps.top
+        });
+      }
     }
 
     _handleDragStart() {
       this.context.pageScroller.disable();
     }
 
-    _handleDrag(event, ui) {
-      this.props.onDrag(ui.position.top);
+    _handleDrag(event, dragEvent) {
+      this.setState({top: dragEvent.y});
+      this.props.onDrag(dragEvent.y);
     }
 
-    _handleDragStop(event, ui) {
-      this.props.onDragStop(ui.position.top);
+    _handleDragStop(event, dragEvent) {
+      this.props.onDragStop(dragEvent.y);
       this.context.pageScroller.enable();
     }
 
@@ -68,20 +74,18 @@
       var currentSizeIndex = sizes.indexOf(this.props.pageLink.timelineItemSize);
       var newSize = sizes[(currentSizeIndex + 1) % sizes.length];
 
-      mutate('updatePageLink', {
-        id: this.props.pageLink.id,
-        attributes: {
-          timeline_item_size: newSize
-        }
+      this.props.updatePageLink({
+        linkId: this.props.pageLink.id,
+        name: 'timelineItemSize',
+        value: newSize
       });
     }
 
     _handleTogglePositionClick() {
-      mutate('updatePageLink', {
-        id: this.props.pageLink.id,
-        attributes: {
-          timeline_item_position: this.props.pageLink.timelineItemPosition === 'right' ? 'left' : 'right'
-        }
+      this.props.updatePageLink({
+        linkId: this.props.pageLink.id,
+        name: 'timelineItemPosition',
+        value: this.props.pageLink.timelineItemPosition === 'right' ? 'left' : 'right'
       });
     }
   };
@@ -90,7 +94,7 @@
     pageScroller: React.PropTypes.object
   }
 
-  pageflow.timelinePage.TimelineItemEditorMenu = pageflow.react.createContainer(TimelineItemEditorMenu, {
-    editorOnly: true
-  });
+  pageflow.timelinePage.TimelineItemEditorMenu = editorOnly(connectInPage(null, {
+    updatePageLink
+  })(TimelineItemEditorMenu));
 }());

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

@@ -1,5 +1,6 @@
 (function() {
-  var mutate = pageflow.react.mutate;
+  const {connectInPage} = pageflow.react;
+  const {updatePageLink} = pageflow.react.actions;
 
   class TimelineItemSpacer extends React.Component {
     constructor(props) {
@@ -8,27 +9,24 @@
     }
 
     render() {
-      var {TimelineItemEditorMenu} = pageflow.timelinePage;
+      const {TimelineItemEditorMenu} = pageflow.timelinePage;
+      const {Measure} = pageflow.react.components;
 
       return (
-        <div className={this._className()}>
-          <div className="timeline_item_spacer-inner" style={this._style()} />
-          <TimelineItemEditorMenu pageLink={this.props.pageLink}
-                                  top={this._menuTop()}
-                                  onDrag={this._handleDrag.bind(this)}
-                                  onDragStop={this._handleDragStop.bind(this)}/>
-        </div>
+        <Measure whitelist={['width']}>
+          { ({width}) =>
+            <div className={this._className()}>
+              <div className="timeline_item_spacer-inner" style={this._style()} />
+              <TimelineItemEditorMenu pageLink={this.props.pageLink}
+                                      top={this._menuTop(width)}
+                                      onDrag={this._handleDrag.bind(this)}
+                                      onDragStop={top => this._handleDragStop(top, width)}/>
+            </div>
+          }
+        </Measure>
       );
     }
 
-    pageDidActivate() {
-      this._measure();
-    }
-
-    pageDidResize() {
-      this._measure();
-    }
-
     _className() {
       return [
         'timeline_item_spacer',
@@ -49,12 +47,8 @@
       }
     }
 
-    _menuTop() {
-      if (this.state.width) {
-        return this.state.width * (this.props.pageLink.top || 0) / 100;
-      }
-
-      return 0;
+    _menuTop(width) {
+      return width * (this.props.pageLink.top || 0) / 100;
     }
 
     _isDragging() {
@@ -68,27 +62,20 @@
       });
     }
 
-    _handleDragStop(top) {
+    _handleDragStop(top, width) {
       this.setState({
         dragging: false
       });
 
-      var width = ReactDOM.findDOMNode(this).offsetWidth;
-
-      mutate('updatePageLink', {
-        id: this.props.pageLink.id,
-        attributes: {
-          top: top / width * 100
-        }
-      });
-    }
-
-    _measure() {
-      this.setState({
-        width: ReactDOM.findDOMNode(this).offsetWidth
+      this.props.updatePageLink({
+        linkId: this.props.pageLink.id,
+        name: 'top',
+        value: top / width * 100
       });
     }
   }
 
-  pageflow.timelinePage.TimelineItemSpacer = pageflow.react.createPageComponent(TimelineItemSpacer);
+  pageflow.timelinePage.TimelineItemSpacer = connectInPage(null, {
+    updatePageLink
+  })(TimelineItemSpacer);
 }());

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

@@ -9,9 +9,7 @@ pageflow.editor.pageTypes.register('timeline_page', {
       });
 
       this.tab('files', function() {
-        this.input('background_image_id', pageflow.FileInputView, {
-          collection: 'image_files'
-        });
+        this.group('background');
         this.input('thumbnail_image_id', pageflow.FileInputView, {
           collection: 'image_files',
           positioning: false

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

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

data/config/locales/de.yml

@@ -4,16 +4,16 @@ de:
       help_entries:
         page_type:
           menu_item: Collage
-          text: ! '# Collage
-
+          text: |-
+            # Collage
 
             Stelle eine Liste von Links mit dem Aussehen einer Collage zusammen. Dieser Seitentyp ist am besten geeignet, um chronologisch geordnete Inhalte aufzubereiten.
 
-
             Jeder Eintrag verweist auf eine andere Seite des Beitrags, auf der der Leser vertiefende Informationen finden kann.
 
+            Für den Hintergrund kann ein Bild oder Video verwendet werden.
 
-            Typische Anwendungsbeispiele: Liste historischer Ereignisse, Interview Reihe, Darstellung eines mehrschrittigen Prozesses.'
+            Typische Anwendungsbeispiele: Liste historischer Ereignisse, Interview Reihe, Darstellung eines mehrschrittigen Prozesses.
       page_attributes:
         timeline_layout:
           inline_help: Wähle hier die Ausrichtung der Verweis-Bilder für die gesamte Seite.

data/config/locales/en.yml

@@ -4,16 +4,16 @@ en:
       help_entries:
         page_type:
           menu_item: Collage
-          text: ! '# Collage
-
+          text: |-
+            # Collage
 
             Build a Collage like list of links to other pages. This page type works best to visualize chronological content.
 
-
             Each item links to a page inside the Pageflow allowing the user to further explore details of a topic.
 
+            You can use an image or video for the background.
 
-            Examples of application: List of historical events, series of interviews, depicting a multi step processes.'
+            Examples of application: List of historical events, series of interviews, depicting a multi step processes.
       page_attributes:
         timeline_layout:
           inline_help: Choose the alignment of images for the collage page.

data/lib/pageflow/timeline_page/version.rb

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

data/lib/pageflow-timeline-page.rb

@@ -7,7 +7,7 @@ module Pageflow
     end
 
     def self.page_type
-      Pageflow::React.create_page_type('timeline_page', 'pageflow.timelinePage.Page')
+      Pageflow::React.create_page_type('timeline_page')
     end
   end
 end

data/pageflow-timeline-page.gemspec

@@ -12,15 +12,16 @@ Gem::Specification.new do |spec|
   spec.license       = 'MIT'
 
   spec.files         = `git ls-files`.split($/)
-  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ['lib']
 
-  spec.add_dependency 'pageflow', '~> 0.10'
+  spec.required_ruby_version = '~> 2.1'
 
-  # Using translations from rails locales in javascript code.
-  spec.add_dependency 'i18n-js'
+  spec.add_dependency 'pageflow', ['>= 12.0.0.rc6', '< 13']
+
+  spec.add_development_dependency 'bundler', '~> 1.0'
+  spec.add_development_dependency 'rake', '~> 12.0'
 
   # Semantic versioning rake tasks
-  spec.add_development_dependency 'semmy', '~> 0.2'
+  spec.add_development_dependency 'semmy', '~> 1.0'
 end

metadata

@@ -1,57 +1,77 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-timeline-page
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Codevise Solutions
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-09 00:00:00.000000000 Z
+date: 2017-08-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 12.0.0.rc6
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '0.10'
+        version: '13'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 12.0.0.rc6
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '13'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.10'
+        version: '1.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
 - !ruby/object:Gem::Dependency
-  name: i18n-js
+  name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
-  type: :runtime
+        version: '12.0'
+  type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '12.0'
 - !ruby/object:Gem::Dependency
   name: semmy
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.2'
+        version: '1.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.2'
+        version: '1.0'
 description: 
 email:
 - info@codevise.de
@@ -80,7 +100,6 @@ files:
 - app/assets/javascripts/pageflow/timeline_page/editor.js
 - app/assets/javascripts/pageflow/timeline_page/editor/models/page_link.js
 - app/assets/javascripts/pageflow/timeline_page/editor/views/edit_page_link_view.js
-- app/assets/javascripts/pageflow/timeline_page/page_type.js
 - app/assets/stylesheets/pageflow/timeline_page.scss
 - app/assets/stylesheets/pageflow/timeline_page/themes/default.scss
 - app/assets/stylesheets/pageflow/timeline_page/timeline.scss
@@ -104,9 +123,9 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - "~>"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: '2.1'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
@@ -114,7 +133,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.5
+rubygems_version: 2.6.8
 signing_key: 
 specification_version: 4
 summary: Pageflow page type for links ordered as timeline.

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

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