skrollr-rails 0.6.28 → 0.6.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: aa9d428c9c602aa99a62d2a221fa9264bc99b884
-  data.tar.gz: fe2a766c787113a571fed7d4d0815f20205a47d9
+  metadata.gz: 01dec6aac81c7cb82deae635cee8571c4a5d1822
+  data.tar.gz: d9d284c4365d6765ede166f7fa8d9b00c60d91b5
 SHA512:
-  metadata.gz: 495245976b9495a0b327e70fc17d589ded15b13e8d965fb2a3d69697d81e0ac47ba8d1852e1ee16dcc57a81d482c9a77a638e70b5f426f00c3ba6a7ffbff1f42
-  data.tar.gz: 30bd98fe054124cc40fe5e131f87d185b4b63f1a298f9b1cfd4ab26e9dc48630c2c68c3d733e6216cdd004954c01d3b2d16fb5ea185df409e90a020cc9cf4332
+  metadata.gz: 8464aedd7f95d14d911dd3ae14412d6573be021af5e1c847a955bc0ebc1356c924c3d0175af777ee825466a992f93dc44e48e26c0d035540e08f00bbe1ed2e36
+  data.tar.gz: eb03a19748f284e497c64a47e5d7840485742a94a749bbffcd2e27e4f74ff3a41c82d153d60cb9356ae2eac7db5d975f70e99b0d3404e64153aa15e1fdf5bb6b

data/README.md

@@ -30,7 +30,7 @@ The skrollr core file. That's all you need for modern desktop browsers.
 //= require skrollr
 ```
 
-##### Skrollr IE compatibility
+##### [Skrollr IE](https://github.com/Prinzhorn/skrollr-ie) Plugin
 
 For IE < 9, include it after the core using conditional comments. The plugin makes IE understand opacity, rgb() and hsl() (the ones with alpha are mapped to them) and it creates a very simple document.querySelector polyfill which only supports ID selectors (using getElementById). Needed if you want to use data-anchor-target.
 
@@ -39,7 +39,7 @@ For IE < 9, include it after the core using conditional comments. The plugin mak
 //= require skrollr.ie
 ```
 
-##### Skrollr menu plugin
+##### [Skrollr Menu](https://github.com/Prinzhorn/skrollr-menu) Plugin
 
 This plugin makes hashlinks scroll nicely to their target position.
 
@@ -48,6 +48,15 @@ This plugin makes hashlinks scroll nicely to their target position.
 //= require skrollr.menu
 ```
 
+##### [Skrollr Stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets) Plugin
+
+This plugin allows separation of skrollr keyframes and the document by putting them inside your stylesheets.
+
+```javascript
+//= require skrollr
+//= require skrollr.stylesheets
+```
+
 ## Versioning
 
 The version number of the skrollr-rails gem corresponds directly with the skrollr library.

data/lib/skrollr-rails/version.rb

@@ -1,5 +1,5 @@
 module Skrollr
   module Rails
-    VERSION = "0.6.28"
+    VERSION = "0.6.29"
   end
 end

data/vendor/assets/javascripts/skrollr.js

@@ -19,7 +19,7 @@
 		init: function(options) {
 			return _instance || new Skrollr(options);
 		},
-		VERSION: '0.6.28'
+		VERSION: '0.6.29'
 	};
 
 	//Minify optimization.
@@ -50,6 +50,8 @@
 	var DEFAULT_DURATION = 1000;//ms
 	var DEFAULT_MOBILE_DECELERATION = 0.004;//pixel/ms²
 
+	var DEFAULT_SKROLLRBODY = 'skrollr-body';
+
 	var DEFAULT_SMOOTH_SCROLLING_DURATION = 200;//ms
 
 	var ANCHOR_START = 'start';
@@ -277,7 +279,7 @@
 		})());
 
 		if(_isMobile) {
-			_skrollrBody = document.getElementById('skrollr-body');
+			_skrollrBody = document.getElementById(options.skrollrBody || DEFAULT_SKROLLRBODY);
 
 			//Detect 3d transform if there's a skrollr-body (only needed for #skrollr-body).
 			if(_skrollrBody) {

data/vendor/assets/javascripts/skrollr.stylesheets.js

@@ -0,0 +1,258 @@
+/*!
+ * skrollr stylesheets.
+ * Parses stylesheets and searches for skrollr keyframe declarations.
+ * Converts them to data-attributes.
+ * Doesn't expose any globals.
+ */
+(function(window, document, undefined) {
+  'use strict';
+
+  var content;
+  var contents = [];
+
+  //Finds the declaration of an animation block.
+  var rxAnimation = /@-skrollr-keyframes\s+([\w-]+)/g;
+
+  //Finds the block of keyframes inside an animation block.
+  //http://regexpal.com/ saves your ass with stuff like this.
+  var rxKeyframes = /\s*\{\s*((?:[^{]+\{[^}]*\}\s*)+?)\s*\}/g;
+
+  //Gets a single keyframe and the properties inside.
+  var rxSingleKeyframe = /([\w\-]+)\s*\{([^}]+)\}/g;
+
+  //Optional keyframe name prefix to work around SASS (>3.4) issues
+  var keyframeNameOptionalPrefix = 'skrollr-';
+
+  //Finds usages of the animation.
+  var rxAnimationUsage = /-skrollr-animation-name\s*:\s*([\w-]+)/g;
+
+  //Finds usages of attribute setters.
+  var rxAttributeSetter = /-skrollr-(anchor-target|smooth-scrolling|emit-events|menu-offset)\s*:\s*['"]([^'"]+)['"]/g;
+
+  var fetchRemote = function(url) {
+    var xhr = new XMLHttpRequest();
+
+    /*
+     * Yes, these are SYNCHRONOUS requests.
+     * Simply because skrollr stylesheets should run while the page is loaded.
+     * Get over it.
+     */
+    try {
+      xhr.open('GET', url, false);
+      xhr.send(null);
+    } catch (e) {
+      //Fallback to XDomainRequest if available
+      if (window.XDomainRequest) {
+        xhr = new XDomainRequest();
+        xhr.open('GET', url, false);
+        xhr.send(null);
+      }
+    }
+
+    return xhr.responseText;
+  };
+
+  //"main"
+  var kickstart = function(stylesheets) {
+    //Iterate over all stylesheets, embedded and remote.
+    for(var stylesheetIndex = 0; stylesheetIndex < stylesheets.length; stylesheetIndex++) {
+      var sheet = stylesheets[stylesheetIndex];
+
+      if(sheet.tagName === 'LINK') {
+        if(sheet.getAttribute('data-skrollr-stylesheet') === null) {
+          continue;
+        }
+
+        //Test media attribute if matchMedia available.
+        if(window.matchMedia) {
+          var media = sheet.getAttribute('media');
+
+          if(media && !matchMedia(media).matches) {
+            continue;
+          }
+        }
+
+        //Remote stylesheet, fetch it (synchrnonous).
+        content = fetchRemote(sheet.href);
+      } else {
+        //Embedded stylesheet, grab the node content.
+        content = sheet.textContent || sheet.innerText || sheet.innerHTML;
+      }
+
+      if(content) {
+        contents.push(content);
+      }
+    }
+
+    //We take the stylesheets in reverse order.
+    //This is needed to ensure correct order of stylesheets and inline styles.
+    contents.reverse();
+
+    var animations = {};
+    var selectors = [];
+    var attributes = [];
+
+    //Now parse all stylesheets.
+    for(var contentIndex = 0; contentIndex < contents.length; contentIndex++) {
+      content = contents[contentIndex];
+
+      parseAnimationDeclarations(content, animations);
+      parseAnimationUsage(content, selectors);
+      parseAttributeSetters(content, attributes);
+    }
+
+    applyKeyframeAttributes(animations, selectors);
+    applyAttributeSetters(attributes);
+  };
+
+  //Finds animation declarations and puts them into the output map.
+  var parseAnimationDeclarations = function(input, output) {
+    rxAnimation.lastIndex = 0;
+
+    var animation;
+    var rawKeyframes;
+    var keyframe;
+    var curAnimation;
+
+    while((animation = rxAnimation.exec(input)) !== null) {
+      //Grab the keyframes inside this animation.
+      rxKeyframes.lastIndex = rxAnimation.lastIndex;
+      rawKeyframes = rxKeyframes.exec(input);
+
+      //Grab the single keyframes with their CSS properties.
+      rxSingleKeyframe.lastIndex = 0;
+
+      //Save the animation in an object using it's name as key.
+      curAnimation = output[animation[1]] = {};
+
+      while((keyframe = rxSingleKeyframe.exec(rawKeyframes[1])) !== null) {
+        //Put all keyframes inside the animation using the keyframe (like botttom-top, or 100) as key
+        //and the properties as value (just the raw string, newline stripped).
+        curAnimation[keyframe[1]] = keyframe[2].replace(/[\n\r\t]/g, '');
+      }
+    }
+  };
+
+  //Extracts the selector of the given block by walking backwards to the start of the block.
+  var extractSelector = function(input, startIndex) {
+    var begin;
+    var end = startIndex;
+
+    //First find the curly bracket that opens this block.
+    while(end-- && input.charAt(end) !== '{') {}
+
+    //The end is now fixed to the right of the selector.
+    //Now start there to find the begin of the selector.
+    begin = end;
+
+    //Now walk farther backwards until we grabbed the whole selector.
+    //This either ends at beginning of string or at end of next block.
+    while(begin-- && input.charAt(begin - 1) !== '}') {}
+
+    //Return the cleaned selector.
+    return input.substring(begin, end).replace(/[\n\r\t]/g, '');
+  };
+
+  //Finds usage of animations and puts the selectors into the output array.
+  var parseAnimationUsage = function(input, output) {
+    var match;
+    var selector;
+
+    rxAnimationUsage.lastIndex = 0;
+
+    while((match = rxAnimationUsage.exec(input)) !== null) {
+      //Extract the selector of the block we found the animation in.
+      selector = extractSelector(input, rxAnimationUsage.lastIndex);
+
+      //Associate this selector with the animation name.
+      output.push([selector, match[1]]);
+    }
+  };
+
+  //Finds usage of attribute setters and puts the selector and attribute data into the output array.
+  var parseAttributeSetters = function(input, output) {
+    var match;
+    var selector;
+
+    rxAttributeSetter.lastIndex = 0;
+
+    while((match = rxAttributeSetter.exec(input)) !== null) {
+      //Extract the selector of the block we found the animation in.
+      selector = extractSelector(input, rxAttributeSetter.lastIndex);
+
+      //Associate this selector with the attribute name and value.
+      output.push([selector, match[1], match[2]]);
+    }
+  };
+
+  //Applies the keyframes (as data-attributes) to the elements.
+  var applyKeyframeAttributes = function(animations, selectors) {
+    var elements;
+    var keyframes;
+    var keyframeName;
+    var cleanKeyframeName;
+    var elementIndex;
+    var attributeName;
+    var attributeValue;
+    var curElement;
+
+    for(var selectorIndex = 0; selectorIndex < selectors.length; selectorIndex++) {
+      elements = document.querySelectorAll(selectors[selectorIndex][0]);
+
+      if(!elements) {
+        continue;
+      }
+
+      keyframes = animations[selectors[selectorIndex][1]];
+
+      for(keyframeName in keyframes) {
+        if(keyframeName.indexOf(keyframeNameOptionalPrefix) === 0) {
+          cleanKeyframeName = keyframeName.substring(keyframeNameOptionalPrefix.length);
+        } else {
+          cleanKeyframeName = keyframeName;
+        }
+
+        for(elementIndex = 0; elementIndex < elements.length; elementIndex++) {
+          curElement = elements[elementIndex];
+          attributeName = 'data-' + cleanKeyframeName;
+          attributeValue = keyframes[keyframeName];
+
+          //If the element already has this keyframe inline, give the inline one precedence by putting it on the right side.
+          //The inline one may actually be the result of the keyframes from another stylesheet.
+          //Since we reversed the order of the stylesheets, everything comes together correctly here.
+          if(curElement.hasAttribute(attributeName)) {
+            attributeValue += curElement.getAttribute(attributeName);
+          }
+
+          curElement.setAttribute(attributeName, attributeValue);
+        }
+      }
+    }
+  };
+
+  //Applies the keyframes (as data-attributes) to the elements.
+  var applyAttributeSetters = function(selectors) {
+    var curSelector;
+    var elements;
+    var attributeName;
+    var attributeValue;
+    var elementIndex;
+
+    for(var selectorIndex = 0; selectorIndex < selectors.length; selectorIndex++) {
+      curSelector = selectors[selectorIndex];
+      elements = document.querySelectorAll(curSelector[0]);
+      attributeName = 'data-' + curSelector[1];
+      attributeValue = curSelector[2];
+
+      if(!elements) {
+        continue;
+      }
+
+      for(elementIndex = 0; elementIndex < elements.length; elementIndex++) {
+        elements[elementIndex].setAttribute(attributeName, attributeValue);
+      }
+    }
+  };
+
+  kickstart(document.querySelectorAll('link, style'));
+}(window, document));

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: skrollr-rails
 version: !ruby/object:Gem::Version
-  version: 0.6.28
+  version: 0.6.29
 platform: ruby
 authors:
 - Nick Reed
@@ -43,6 +43,7 @@ files:
 - vendor/assets/javascripts/skrollr.ie.js
 - vendor/assets/javascripts/skrollr.js
 - vendor/assets/javascripts/skrollr.menu.js
+- vendor/assets/javascripts/skrollr.stylesheets.js
 homepage: https://github.com/reed/skrollr-rails
 licenses:
 - MIT