scrollreveal-rails 0.0.1

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    ZWNiOTY0ZGU4MTBjODA3YmEyYjFiYTRlYTdmMDBkZjc4MzM4YjIwZg==
+  data.tar.gz: !binary |-
+    NGNhYTA4ZGJjMzVjYzI0ZjJlODUxNWFlYzExOGM4MmJiODY0YjJmYw==
+SHA512:
+  metadata.gz: !binary |-
+    MWE2MzhjM2JkOTMzNTllMjkwOTQ2N2U4OTY2NjlkMGRmZTU3NmE1NDY0ZWZk
+    YjNkYzYyNjQ2YjNkMTZkZGY0NzA4YjllMjMyOWE4NTdjMTY0NTc5YmM1Mjkz
+    YWE4MWU0ODViYTY0NWRlODJlNjgxYjU3Mzc0MGE3Yjg4NTMyYzk=
+  data.tar.gz: !binary |-
+    MGRmNTNjMDAwZTVhZGFmMTdiODQ3ZGUzMWY3NTkwZmI2OGM0MjcyYzJiZDhm
+    NzU0NTlkODNhNDAwN2NmNzhkMjFlMTgzYzI4ZTNlNTQ4NGYzOThmMjcyMDQ4
+    ZjAzNTM4Nzg3MTYwNmM5YTFjYTEwNzViMzEzMDQxYzJkMjlhNDk=

data/.gitignore

@@ -0,0 +1,7 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+sauce
+tmp
+.DS_Store

data/.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - 1.9.3
+  - 2.0.0

data/Changelog.md

@@ -0,0 +1,4 @@
+# 0.0.1 / 2013-11-10
+
+Scrollreveal gearing up!
+

data/Gemfile

@@ -0,0 +1,2 @@
+source "http://rubygems.org"
+gemspec

data/Rakefile

@@ -0,0 +1,5 @@
+require 'bundler/gem_tasks'
+
+task :default do
+  puts "Hello scrollreveal-rails!"
+end

data/Readme.md

@@ -0,0 +1,134 @@
+# Scrollreveal-Rails 
+
+A Ruby wrapper to integrate [scrollReveal](https://github.com/julianlloyd/scrollReveal.js) - A small library to create and maintain how elements fade in, triggered when they enter the viewport.
+
+
+See the [demo application](http://fast-waters-6745.herokuapp.com) in action. 
+## Installation
+
+Add the gem to the Gemfile:
+
+    gem "scrollreveal-rails"    
+
+## Usage
+
+Add ScrollReveal to your JS
+Append the following lines to your app/assets/javascripts/application.js file:
+
+	//= require scrollReveal
+
+	$(function() {
+	  window.scrollReveal = new scrollReveal();
+	});
+
+
+Basic Usage
+-----------
+
+In your view `*.html.erb` or `*.html.haml`
+
+	<!-- Reveal using defaults. -->
+	scroll_reveal content: 'Holla!'
+
+**But wait!** It’s more fun if you define your own reveal animation parameters, which you can do using using natural, declarative language:
+
+	<!-- Reveal using custom parameters. -->
+	scroll_reveal content: 'Foo', animation: 'enter left and move 50px over 1.33s'
+	scroll_reveal content: 'Bar', animation: 'enter from the bottom after 1s'
+	scroll_reveal content: 'Baz' animation: 'wait 2.5s and then ease-in-out 100px'
+
+Getting Started
+---------------
+What you enter into the `data-scrollReveal` attribute is parsed for specific words:
+
+- **keywords** that expect to be followed by a **value**.<br><br>
+- **fillers** as natural language sugar. (optional)
+
+#### Keywords and Values
+These specific **keyword** / **value** pairs allow you to describe basic reveal animation behavior.
+***
+**keyword:** `enter` — Controls the vector origin of your reveal animation.<br>
+**value:** `top` | `right` | `bottom` | `left`<br><br>
+*Example:*
+
+	<!-- Reveal your element with a downward motion. -->
+
+	scroll_reveal content: 'Foo', animation: 'enter top'
+
+***
+**keyword:** `move` — The distance your revealing element travels.<br>
+**value:** [ integer ]px.
+
+*Example:*
+
+	scroll_reveal content: 'Foo', animation: 'move 24px'
+
+***
+**keyword:** `over` — The duration of your reveal animation.<br>
+**value:** [ decimal ]s
+
+
+*Example:*
+
+	scroll_reveal content: 'Foo', animation: 'over 1.66s'
+
+***
+**keyword:** `after/wait` — The duration before your reveal begins.<br>
+**value:** [ decimal ]s
+
+
+*Example:*
+
+	<!-- Both are accepted. -->
+
+	scroll_reveal content: 'Mel', animation: 'after 0.33s'
+	scroll_reveal content: 'Mel', animation: 'wait 0.33s'
+
+####Combining Keyword/Value Pairs
+You can easily combine the above pairs to create more dynamic reveal animations.
+
+*Example:*
+
+	scroll_reveal content: 'Foo', animation: 'enter top move 50px'
+	scroll_reveal content: 'Bar', animation: 'enter top move 50px, after 0.3s'
+	scroll_reveal content: 'Baz', animation: 'enter top move 50px, after 0.6s'
+	scroll_reveal content: 'Mel', animation: 'enter top move 50px, after 0.9s'
+
+####Passing Blocks
+You can easily pass a block too.
+
+*Example:*
+
+	scroll_reveal animation: 'enter top move 50px' do 
+	  image_tag 'foo.jpg'
+	end
+	
+
+#### Fillers (optional)
+You can use conjoining filler words for more readable language.
+
+- `from`
+- `the`
+- `and`
+- `then`
+- `but`
+- `with`
+- `,`
+
+*Example*:
+
+	<!-- These 4 lines are equivalent. -->
+
+	scroll_reveal content: 'Foo', animation: 'wait 0.3s, then enter left and move 40px over 2s'
+	scroll_reveal content: 'Bar', animation: 'enter from the left after 0.3s, move 40px, over 2s'
+	scroll_reveal content: 'Baz', animation: 'enter left move 40px over 2s after 0.3s'
+	scroll_reveal content: 'Mel', animation: 'enter left, move 40px, over 2s, wait 0.3s'
+
+
+## Licensing
+
+
+The gem itself is released under the MIT license
+
+:pray:
+	

data/app/assets/javascripts/scrollReveal.js

@@ -0,0 +1,358 @@
+/*
+                       _ _ _____                      _   _
+                      | | |  __ \                    | | (_)
+    ___  ___ _ __ ___ | | | |__) |_____   _____  __ _| |  _ ___
+   / __|/ __| '__/ _ \| | |  _  // _ \ \ / / _ \/ _` | | | / __|
+   \__ \ (__| | | (_) | | | | \ \  __/\ V /  __/ (_| | |_| \__ \
+   |___/\___|_|  \___/|_|_|_|  \_\___| \_/ \___|\__,_|_(_) |___/ v.0.0.2
+                                                        _/ |
+                                                       |__/
+
+    "Declarative on-scroll reveal animations."
+
+/*=============================================================================
+
+    scrollReveal.js was inspired by cbpScroller.js (c) 2014 Codrops.
+
+    Licensed under the MIT license.
+    http://www.opensource.org/licenses/mit-license.php
+
+    scrollReveal.js (c) 2014 Julian Lloyd
+
+=============================================================================*/
+
+window.scrollReveal = (function (window) {
+
+  'use strict';
+
+  function scrollReveal(options) {
+
+      this.docElem = window.document.documentElement;
+      this.options = this.extend(this.defaults, options);
+
+      if (this.options.init == true) this.init();
+  }
+
+  scrollReveal.prototype = {
+
+    defaults: {
+      after:  '0s',
+      enter:  'bottom',
+      move:   '24px',
+      over:   '0.66s',
+      easing: 'ease-in-out',
+
+  //  if 0, the element is considered in the viewport as soon as it enters
+  //  if 1, the element is considered in the viewport when it's fully visible
+      viewportFactor: 0.33,
+
+  // if false, animations occur only once
+  // if true, animations occur each time an element enters the viewport
+      reset: false,
+
+  // if true, scrollReveal.init() is automaticaly called upon instantiation
+      init: true
+    },
+
+    /*=============================================================================*/
+
+    init: function () {
+
+      this.scrolled = false;
+
+      var self = this;
+
+  //  Check DOM for the data-scrollReveal attribute
+  //  and initialize all found elements.
+      this.elems = Array.prototype.slice.call(this.docElem.querySelectorAll('[data-scrollReveal]'));
+      this.elems.forEach(function (el, i) {
+        self.update(el);
+      });
+
+      var scrollHandler = function () {
+        if (!self.scrolled) {
+          self.scrolled = true;
+          setTimeout(function () {
+            self._scrollPage();
+          }, 60);
+        }
+      };
+
+      var resizeHandler = function () {
+
+    //  If we’re still waiting for settimeout, reset the timer.
+        if (self.resizeTimeout) {
+          clearTimeout(self.resizeTimeout);
+        }
+        function delayed() {
+          self._scrollPage();
+          self.resizeTimeout = null;
+        }
+        self.resizeTimeout = setTimeout(delayed, 200);
+      };
+
+      window.addEventListener('scroll', scrollHandler, false);
+      window.addEventListener('resize', resizeHandler, false);
+    },
+
+    /*=============================================================================*/
+
+    _scrollPage: function () {
+        var self = this;
+
+        this.elems.forEach(function (el, i) {
+          self.update(el);
+        });
+        this.scrolled = false;
+    },
+
+    /*=============================================================================*/
+
+    parseLanguage: function (el) {
+
+  //  Splits on a sequence of one or more commas or spaces.
+      var words = el.getAttribute('data-scrollreveal').split(/[, ]+/),
+          parsed = {};
+
+      function filter (words) {
+        var ret = [],
+
+            blacklist = [
+              "from",
+              "the",
+              "and",
+              "then",
+              "but",
+              "with"
+            ];
+
+        words.forEach(function (word, i) {
+          if (blacklist.indexOf(word) > -1) {
+            return;
+          }
+          ret.push(word);
+        });
+
+        return ret;
+      }
+
+      words = filter(words);
+
+      words.forEach(function (word, i) {
+
+        switch (word) {
+          case "enter":
+            parsed.enter = words[i + 1];
+            return;
+
+          case "after":
+            parsed.after = words[i + 1];
+            return;
+
+          case "wait":
+            parsed.after = words[i + 1];
+            return;
+
+          case "move":
+            parsed.move = words[i + 1];
+            return;
+
+          case "ease":
+            parsed.move = words[i + 1];
+            parsed.ease = "ease";
+            return;
+
+          case "ease-in":
+            parsed.move = words[i + 1];
+            parsed.easing = "ease-in";
+            return;
+
+          case "ease-in-out":
+            parsed.move = words[i + 1];
+            parsed.easing = "ease-in-out";
+            return;
+
+          case "ease-out":
+            parsed.move = words[i + 1];
+            parsed.easing = "ease-out";
+            return;
+
+          case "over":
+            parsed.over = words[i + 1];
+            return;
+
+          default:
+            return;
+        }
+      });
+
+      return parsed;
+    },
+
+
+    /*=============================================================================*/
+
+    update: function (el) {
+      var css  = this.genCSS(el);
+
+      if (!el.getAttribute('data-scrollReveal-initialized')) {
+        el.setAttribute('style', css.initial);
+        el.setAttribute('data-scrollReveal-initialized', true);
+      }
+
+      if (!this.isElementInViewport(el, this.options.viewportFactor)) {
+        if (this.options.reset) {
+          el.setAttribute('style', css.initial + css.reset);
+        }
+        return;
+      }
+
+      if (el.getAttribute('data-scrollReveal-complete')) return;
+
+      if (this.isElementInViewport(el, this.options.viewportFactor)) {
+        el.setAttribute('style', css.target + css.transition);
+    //  Without reset enabled, we can safely remove the style tag
+    //  to prevent CSS specificy wars with authored CSS.
+        if (!this.options.reset) {
+          setTimeout(function () {
+            el.removeAttribute('style');
+            el.setAttribute('data-scrollReveal-complete',true);
+          }, css.totalDuration);
+        }
+      return;
+      }
+    },
+
+    /*=============================================================================*/
+
+    genCSS: function (el) {
+      var parsed = this.parseLanguage(el),
+          enter,
+          axis;
+
+      if (parsed.enter) {
+
+        if (parsed.enter == "top" || parsed.enter == "bottom") {
+          enter = parsed.enter;
+          axis = "y";
+        }
+
+        if (parsed.enter == "left" || parsed.enter == "right") {
+          enter = parsed.enter;
+          axis = "x";
+        }
+
+      } else {
+
+        if (this.options.enter == "top" || this.options.enter == "bottom") {
+          enter = this.options.enter
+          axis = "y";
+        }
+
+        if (this.options.enter == "left" || this.options.enter == "right") {
+          enter = this.options.enter
+          axis = "x";
+        }
+      }
+
+  //  After all values are parsed, let’s make sure our our
+  //  pixel distance is negative for top and left entrances.
+  //
+  //  ie. "move 25px from top" starts at 'top: -25px' in CSS.
+
+      if (enter == "top" || enter == "left") {
+        if (!typeof parsed.move == "undefined") {
+          parsed.move = "-" + parsed.move;
+        }
+        else {
+          parsed.move = "-" + this.options.move;
+        }
+      }
+
+      var dist   = parsed.move    || this.options.move,
+          dur    = parsed.over    || this.options.over,
+          delay  = parsed.after   || this.options.after,
+          easing = parsed.easing  || this.options.easing;
+
+      var transition = "-webkit-transition: all " + dur + " " + easing + " " + delay + ";" +
+                          "-moz-transition: all " + dur + " " + easing + " " + delay + ";" +
+                            "-o-transition: all " + dur + " " + easing + " " + delay + ";" +
+                               "transition: all " + dur + " " + easing + " " + delay + ";" +
+                      "-webkit-perspective: 1000;" +
+              "-webkit-backface-visibility: hidden;";
+
+  //  The same as transition, but removing the delay for elements fading out.
+      var reset = "-webkit-transition: all " + dur + " " + easing + " 0s;" +
+                     "-moz-transition: all " + dur + " " + easing + " 0s;" +
+                       "-o-transition: all " + dur + " " + easing + " 0s;" +
+                          "transition: all " + dur + " " + easing + " 0s;" +
+                 "-webkit-perspective: 1000;" +
+         "-webkit-backface-visibility: hidden;";
+
+      var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" +
+                       "-moz-transform: translate" + axis + "(" + dist + ");" +
+                            "transform: translate" + axis + "(" + dist + ");" +
+                              "opacity: 0;";
+
+      var target = "-webkit-transform: translate" + axis + "(0);" +
+                      "-moz-transform: translate" + axis + "(0);" +
+                           "transform: translate" + axis + "(0);" +
+                             "opacity: 1;";
+      return {
+        transition: transition,
+        initial: initial,
+        target: target,
+        reset: reset,
+        totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000)
+      };
+    },
+
+    getViewportH : function () {
+      var client = this.docElem['clientHeight'],
+        inner = window['innerHeight'];
+
+      return (client < inner) ? inner : client;
+    },
+
+    getOffset : function(el) {
+      var offsetTop = 0,
+          offsetLeft = 0;
+
+      do {
+        if (!isNaN(el.offsetTop)) {
+          offsetTop += el.offsetTop;
+        }
+        if (!isNaN(el.offsetLeft)) {
+          offsetLeft += el.offsetLeft;
+        }
+      } while (el = el.offsetParent)
+
+      return {
+        top: offsetTop,
+        left: offsetLeft
+      }
+    },
+
+    isElementInViewport : function(el, h) {
+      var scrolled = window.pageYOffset,
+          viewed = scrolled + this.getViewportH(),
+          elH = el.offsetHeight,
+          elTop = this.getOffset(el).top,
+          elBottom = elTop + elH,
+          h = h || 0;
+
+      return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
+    },
+
+    extend: function (a, b){
+      for (var key in b) {
+        if (b.hasOwnProperty(key)) {
+          a[key] = b[key];
+        }
+      }
+      return a;
+    }
+  }; // end scrollReveal.prototype
+
+  return scrollReveal;
+})(window);

data/lib/scrollreveal-rails.rb

@@ -0,0 +1,5 @@
+require 'scrollreveal/version'
+require 'scrollreveal/rails'
+require 'scrollreveal/helper'
+
+ActionView::Base.send(:include, Scrollreveal::Helper)

data/lib/scrollreveal/helper.rb

@@ -0,0 +1,9 @@
+module Scrollreveal
+  module Helper
+    
+    def scroll_reveal(opts={},&block)
+      content_tag(:div,opts[:content],'data-scrollReveal' => opts[:animation],:class => opts[:class],&block)
+    end
+  end
+end
+

data/lib/scrollreveal/rails.rb

@@ -0,0 +1,9 @@
+module Scrollreveal
+  module Rails
+    class Engine < ::Rails::Engine
+    	initializer "precompile", :group => :all do |app|
+       	  app.config.assets.precompile << Proc.new{|path| path == "scrollReveal.js" }
+        end
+    end
+  end
+end

data/lib/scrollreveal/version.rb

@@ -0,0 +1,3 @@
+module Scrollreveal
+  VERSION = "0.0.1"
+end

data/scrollreveal-rails.gemspec

@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "scrollreveal/version"
+
+Gem::Specification.new do |s|
+  s.name        = "scrollreveal-rails"
+  s.version     = Scrollreveal::VERSION
+  s.authors     = ["Ankit Gupta"," Ekta Verma"]
+  s.date        = '2014-02-23'
+  s.email       = ["ankit.gupta8898@gmail.com","eku4evr@gmail.com"]
+  s.summary     = %q{Ruby Wrapper on top of ScrollReveal.js}
+  s.description = %q{Gem that includes ScrollReveal (A small library to create and maintain how elements fade in,triggered when they enter the viewport.)}
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+
+  s.require_paths = ["lib"]
+  s.licenses    = ['MIT']
+  s.homepage    = 'https://github.com/gemathon-rockets/scrollreveal-rails'
+  s.add_dependency "railties", ">= 3.1"
+  s.add_development_dependency "bundler", "~> 1.0"
+  s.add_development_dependency "rails",   ">= 3.1"
+  s.add_development_dependency 'rake'
+
+end

metadata

@@ -0,0 +1,115 @@
+--- !ruby/object:Gem::Specification
+name: scrollreveal-rails
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Ankit Gupta
+- ! ' Ekta Verma'
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-02-23 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.1'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        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: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.1'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Gem that includes ScrollReveal (A small library to create and maintain
+  how elements fade in,triggered when they enter the viewport.)
+email:
+- ankit.gupta8898@gmail.com
+- eku4evr@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- .travis.yml
+- Changelog.md
+- Gemfile
+- Rakefile
+- Readme.md
+- app/assets/javascripts/scrollReveal.js
+- lib/scrollreveal-rails.rb
+- lib/scrollreveal/helper.rb
+- lib/scrollreveal/rails.rb
+- lib/scrollreveal/version.rb
+- scrollreveal-rails.gemspec
+homepage: https://github.com/gemathon-rockets/scrollreveal-rails
+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.1.10
+signing_key: 
+specification_version: 4
+summary: Ruby Wrapper on top of ScrollReveal.js
+test_files: []