scrollytelling-pageflow-navigation 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 9ce32d8476a75ae7289d82cbf647ce825f7dde32
+  data.tar.gz: df9645600b07c59239fd179cb2d284b5b718ab0e
+SHA512:
+  metadata.gz: 850cb41bcd6a732844a8c14aac62d90469313f55f483dd35dd44e34458760fffb703264d1451cf9827faa09964b0c888b8bbaad558fc5c7b397c2ec283835d2a
+  data.tar.gz: d6a168ca1664a573fa751c825dc1b36e3095fb04dc3ab4914d1350d352970fca8f372ee3190b324e9d98c6c70fe48b1829bb6f9dc8da6e0a33d832ce231d9c2b

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at joost@spacebabies.nl. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in scrollytelling-pageflow-navigation.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Joost Baaij
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,53 @@
+# Scrollytelling::Pageflow::Navigation
+
+This Pageflow plugin replaces the built-in Pageflow navigation with the Scrollytelling version.
+
+The Scrollytelling navigation uses dots to show progress instead of thumbnails. This plugin does not replace the mobile Pageflow navigation; only the desktop navigation.
+
+## Examples
+
+For examples see the various stories on [our homepage](https://www.scrollytelling.io/).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'scrollytelling-pageflow-navigation'
+```
+
+Bundle the plugin with your application by typing this on the command line:
+
+    $ bundle
+
+## Usage
+
+You will need to register the plugin in the Pageflow initializer and then add it to your asset pipeline.
+
+```
+# config/initializers/pageflow.rb
+config.plugin(Scrollytelling::Pageflow::Navigation::Plugin.new)
+
+# app/assets/javascripts/pageflow/application.js
+//= require scrollytelling/pageflow/navigation
+
+# app/assets/stylesheets/pageflow/application.css.scss
+@import "scrollytelling/pageflow/navigation";
+```
+
+After all that, restart your application server.
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/scrollytelling/scrollytelling-pageflow-navigation. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/assets/javascripts/scrollytelling/pageflow/navigation.js

@@ -0,0 +1,2 @@
+//= require ./navigation/invert
+//= require ./navigation/counter

data/app/assets/javascripts/scrollytelling/pageflow/navigation/counter.js

@@ -0,0 +1,38 @@
+pageflow.Counter = {
+  navigation: function() {
+    return $('#scrollytelling-pageflow-navigation')
+  },
+
+  setActive: function(page) {
+    this.navigation().find('a').removeClass('active');
+    this.navigation().find('a[href="#'+page.id+'"]').addClass('active');
+  },
+
+  updateActive: function(page) {
+    this.setActive(page.element[0]);
+  },
+
+  init: function() {
+    // Init active dot
+    this.setActive(pageflow.atmo.slideshow.currentPage()[0]);
+
+    // Listen to page changes
+    pageflow.events.on('page:change', this.updateActive.bind(this));
+
+    // Set click handler
+    $('a', this.navigation()).on('click', this.onClick);
+  },
+
+  onClick(event) {
+    event.preventDefault();
+
+    var page_id = $(this).attr('data-page-id');
+
+    pageflow.atmo.slideshow.goToById(page_id);
+  }
+
+}
+
+pageflow.ready.then(function() {
+  pageflow.Counter.init();
+});

data/app/assets/javascripts/scrollytelling/pageflow/navigation/invert.js

@@ -0,0 +1,27 @@
+// Set class .page-invert on body if the active page has the class .invert
+pageflow.Invert = {
+
+  container: $('body'),
+
+  changeInvert: function(page) {
+    this.setInvert(page.element[0]);
+  },
+
+  setInvert: function(page_element) {
+    $(page_element).hasClass('invert') ? this.container.addClass('page-invert') : this.container.removeClass('page-invert');
+  },
+
+  init: function() {
+
+    // Set inverted class on first load
+    this.setInvert(pageflow.atmo.slideshow.currentPage()[0]);
+
+    // Listen to page changes
+    pageflow.events.on('page:change', this.changeInvert.bind(this));
+
+  }
+}
+
+pageflow.ready.then(function() {
+  pageflow.Invert.init();
+});

data/app/assets/stylesheets/scrollytelling/pageflow/navigation.scss

@@ -0,0 +1,135 @@
+@media screen and (max-width: 768px) {
+  #scrollytelling-pageflow-navigation {
+    display: none;
+  }
+}
+
+#scrollytelling-pageflow-navigation {
+  right: 2.3%;
+  position: fixed;
+  z-index: 100;
+  top: 50%;
+  opacity: 1;
+  transform: translateY(-50%);
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    display: block;
+    width: 14px;
+    height: 13px;
+    margin: 7px;
+    position: relative;
+  }
+
+  li:hover {
+    a span {
+      width: 10px;
+      height: 10px;
+      margin: -5px 0 0 -5px;
+    }
+
+    .scrollytelling-pageflow-navigation-tooltip {
+      transition: opacity 0.2s ease-in;
+      width: auto;
+      opacity: 1;
+      display: block;
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+
+  a {
+    display: block;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    text-decoration: none;
+
+    span {
+      border-radius: 50%;
+      position: absolute;
+      z-index: 1;
+      height: 4px;
+      width: 4px;
+      border: 0;
+      background: white;
+      left: 50%;
+      top: 50%;
+      margin: -2px 0 0 -2px;
+      transition: all 0.1s ease-in-out;
+    }
+
+    &.active span {
+      height: 12px;
+      width: 12px;
+      margin: -6px 0 0 -6px;
+      border-radius: 100%;
+    }
+  }
+
+  .scrollytelling-pageflow-navigation-tooltip {
+    $bg-color: #000;
+
+    right: 20px;
+    position: absolute;
+    top: -7px;
+    color: white;
+    font-size: 14px;
+    white-space: nowrap;
+    max-width: 220px;
+    opacity: 0;
+    width: 0;
+    cursor: pointer;
+    line-height: 1;
+    display: none;
+
+    background-color: $bg-color;
+    padding: 6px;
+    padding-right: 20px;
+    border-radius: 3px;
+
+    &:after {
+      left: 100%;
+      top: 50%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+      border-color: rgba(255, 255, 255, 0);
+      border-left-color: $bg-color;
+      border-width: 5px;
+      margin-top: -5px;
+    }
+
+  }
+
+  .page-invert & {
+    a span {
+      background: black;
+    }
+
+    .scrollytelling-pageflow-navigation-tooltip {
+
+      $bg-color: #fff;
+
+      color: black;
+      background-color: $bg-color;
+
+      &:after {
+        border-left-color: $bg-color;
+      }
+
+    }
+  }
+}

data/app/views/scrollytelling/pageflow/navigation/_widget.html.erb

@@ -0,0 +1,7 @@
+<nav id="scrollytelling-pageflow-navigation">
+  <ul>
+    <% entry.pages.displayed_in_navigation.each do |page| %>
+      <li><a href="#<%= page.perma_id %>" data-page-id="<%= page.id %>"><span></span></a><div class="scrollytelling-pageflow-navigation-tooltip"><%= page.configuration["title"] %></div></li>
+    <% end %>
+  </ul>
+</nav>

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "scrollytelling/pageflow/navigation"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/scrollytelling/pageflow/navigation.rb

@@ -0,0 +1,14 @@
+require "scrollytelling/pageflow/navigation/version"
+require "scrollytelling/pageflow/navigation/plugin"
+require "scrollytelling/pageflow/navigation/widget_type"
+require "scrollytelling/pageflow/navigation/engine"
+
+module Scrollytelling
+  module Pageflow
+    module Navigation
+      def self.widget_type
+        WidgetType.new
+      end
+    end
+  end
+end

data/lib/scrollytelling/pageflow/navigation/engine.rb

@@ -0,0 +1,11 @@
+require 'rails/engine'
+
+module Scrollytelling
+  module Pageflow
+    module Navigation
+      class Engine < ::Rails::Engine
+        isolate_namespace Scrollytelling::Pageflow::Navigation
+      end
+    end
+  end
+end

data/lib/scrollytelling/pageflow/navigation/plugin.rb

@@ -0,0 +1,13 @@
+require 'pageflow/plugin'
+
+module Scrollytelling
+  module Pageflow
+    module Navigation
+      class Plugin < ::Pageflow::Plugin
+        def configure(config)
+          config.widget_types.register(Scrollytelling::Pageflow::Navigation.widget_type, default: true)
+        end
+      end
+    end
+  end
+end

data/lib/scrollytelling/pageflow/navigation/version.rb

@@ -0,0 +1,7 @@
+module Scrollytelling
+  module Pageflow
+    module Navigation
+      VERSION = "0.1.0"
+    end
+  end
+end

data/lib/scrollytelling/pageflow/navigation/widget_type.rb

@@ -0,0 +1,21 @@
+require 'pageflow/widget_type'
+
+module Scrollytelling
+  module Pageflow
+    module Navigation
+      class WidgetType < ::Pageflow::WidgetType
+        def name
+          'scrollytelling-pageflow-navigation'
+        end
+
+        def roles
+          ['navigation']
+        end
+
+        def render(template, entry)
+          template.render('scrollytelling/pageflow/navigation/widget.html.erb', entry: entry)
+        end
+      end
+    end
+  end
+end

data/scrollytelling-pageflow-navigation.gemspec

@@ -0,0 +1,27 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'scrollytelling/pageflow/navigation/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "scrollytelling-pageflow-navigation"
+  spec.version       = Scrollytelling::Pageflow::Navigation::VERSION
+  spec.authors       = ["Joost Baaij"]
+  spec.email         = ["joost@spacebabies.nl"]
+
+  spec.summary       = "Replace Pageflow navigation with Scrollytelling navigation"
+  spec.homepage      = "https://github.com/scrollytelling/scrollytelling-pageflow-navigation"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_runtime_dependency 'pageflow', '>= 0.7'
+  spec.add_runtime_dependency 'rails', '>= 3.0'
+
+  spec.add_development_dependency "bundler", "~> 1.11"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec", "~> 3.0"
+end

metadata

@@ -0,0 +1,135 @@
+--- !ruby/object:Gem::Specification
+name: scrollytelling-pageflow-navigation
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Joost Baaij
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-06-22 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: pageflow
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.7'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0.7'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: 
+email:
+- joost@spacebabies.nl
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/scrollytelling/pageflow/navigation.js
+- app/assets/javascripts/scrollytelling/pageflow/navigation/counter.js
+- app/assets/javascripts/scrollytelling/pageflow/navigation/invert.js
+- app/assets/stylesheets/scrollytelling/pageflow/navigation.scss
+- app/views/scrollytelling/pageflow/navigation/_widget.html.erb
+- bin/console
+- bin/setup
+- lib/scrollytelling/pageflow/navigation.rb
+- lib/scrollytelling/pageflow/navigation/engine.rb
+- lib/scrollytelling/pageflow/navigation/plugin.rb
+- lib/scrollytelling/pageflow/navigation/version.rb
+- lib/scrollytelling/pageflow/navigation/widget_type.rb
+- scrollytelling-pageflow-navigation.gemspec
+homepage: https://github.com/scrollytelling/scrollytelling-pageflow-navigation
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.8
+signing_key: 
+specification_version: 4
+summary: Replace Pageflow navigation with Scrollytelling navigation
+test_files: []
+has_rdoc: