lazysizes_rails 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 798e7771330ba8d4034f67cdf7a754751ee680e3
+  data.tar.gz: a59520c8a45dc565d2be28009768bc8a8c596da5
+SHA512:
+  metadata.gz: 5d789610444cf69dc942fad2765ef765d0d9ab2eaa5c0ab52767505507ec537ba65166366176b4a71749aa93fd4133d8bb93d8ee2c40e46f5666d872ce46881f
+  data.tar.gz: e3a622373bed0a0fc9b7eacabeabf50f781fe7c6dddf515c7ee20f84ed9e7ccb953d1d35e87decb0bbb1cfafd4dffc2d589c4ed44507e69ebd32969258e4ab89

data/.gitignore

@@ -0,0 +1,14 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log

data/Gemfile

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

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Dima Zudochkin
+
+MIT License
+
+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,36 @@
+# LazysizesRails
+
+Simple wrapper for [lazysizes](https://github.com/aFarkas/lazysizes)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'lazysizes_rails'
+```
+
+And then execute:
+
+    $ bundle
+
+    $ gem install lazysizes_rails
+
+## Usage
+
+* put necessary images into /app/assets/images folder
+* and show images with **image_tag** helper
+
+```ruby
+<%= image_tag 'low_quality_src.jpeg', data:
+  { src: image_path('normal_quality_src.jpeg') }, class: 'lazyload' 
+%>
+```
+
+## Contributing
+
+1. Fork it ( https://github.com/vredniy/lazysizes_rails/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/lazysizes_rails.gemspec

@@ -0,0 +1,22 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'lazysizes_rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "lazysizes_rails"
+  spec.version       = LazysizesRails::VERSION
+  spec.authors       = ["Dima Zudochkin"]
+  spec.email         = ["dnd.pliz@gmail.com"]
+  spec.summary       = %q{Lazysizes for Rails application.}
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  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_development_dependency "bundler", "~> 1.7"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/lib/lazysizes_rails/engine.rb

@@ -0,0 +1,4 @@
+module LazysizesRails
+  class Engine < Rails::Engine
+  end
+end

data/lib/lazysizes_rails/version.rb

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

data/lib/lazysizes_rails.rb

@@ -0,0 +1,3 @@
+require 'lazysizes_rails/engine'
+require 'lazysizes_rails/version'
+

data/vendor/assets/javascripts/lazysizes_rails.js

@@ -0,0 +1,483 @@
+(function (factory) {
+	window.lazySizes = factory();
+	if (typeof define === 'function' && define.amd) {
+		define(function() {
+			return window.lazySizes;
+		});
+	}
+}(function () {
+	'use strict';
+
+	if(!Date.now || !window.document.getElementsByClassName){return;}
+
+	var lazyloadElems, autosizesElems, lazySizesConfig, globalSizesTimer,
+		globalSizesIndex, globalLazyTimer, globalLazyIndex, globalInitialTimer,
+		addClass, removeClass, hasClass, isWinloaded;
+	var document = window.document;
+	var isPreloading = 0;
+
+	var regDummyTags = /^(?:span|div)$/i;
+	var regPicture = /^picture$/i;
+	var regScript = /^script$/i;
+	var regImg = /^img$/i;
+	var inViewTreshhold = 10;
+
+	var setImmediate = window.setImmediate || window.setTimeout;
+	var scriptUrls = {};
+	var addRemoveImgEvents = function(dom, fn, add){
+		var action = add ? 'addEventListener' : 'removeEventListener';
+		dom[action]('load', fn, false);
+		dom[action]('abort', fn, false);
+		dom[action]('readystatechange', fn, false);
+		dom[action]('error', fn, false);
+	};
+	var unveilAfterLoad = function(e){
+		addRemoveImgEvents(e.target, unveilAfterLoad);
+		unveilLazy(e.target, true);
+	};
+	var triggerEvent = function(elem, name, details){
+		var event = document.createEvent('Event');
+
+		event.initEvent(name, true, true);
+
+		event.details = details || {};
+
+		elem.dispatchEvent(event);
+		return event;
+	};
+
+	if(document.documentElement.classList){
+		addClass = function(el, cls){
+			el.classList.add(cls);
+		};
+		removeClass = function(el, cls){
+			el.classList.remove(cls);
+		};
+		hasClass = function(el, cls){
+			return el.classList.contains(cls);
+		};
+	} else {
+		addClass = function(ele, cls) {
+			if (!hasClass(ele, cls)){
+				ele.className += " "+cls;
+			}
+		};
+		removeClass = function(ele, cls) {
+			var reg;
+			if (hasClass(ele,cls)) {
+				reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
+				ele.className = ele.className.replace(reg,' ');
+			}
+		};
+		hasClass = function hasClass(ele,cls) {
+			return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
+		};
+	}
+
+	function updatePolyfill(el, full){
+		var imageData;
+		if(window.picturefill){
+			picturefill({reevaluate: true, reparse: true, elements: [el]});
+		} else if(window.respimage && !respimage._.observer){
+			if(full){
+				imageData = el[respimage._.ns];
+				if(imageData){
+					imageData[full.srcset ? 'srcset' : 'src'] = undefined;
+				}
+			}
+			respimage({reparse: true, elements: [el]});
+		} else if(!window.HTMLPictureElement && window.console && document.readyState == 'complete'){
+			console.log('Please use a responsive image polyfill, like respimage or picturefill. https://github.com/aFarkas/respimage');
+		}
+	}
+
+	var eLlen, resetPreloadingTimer, eLvW, elvH, eLtop, eLleft, eLright, eLbottom, eLnegativeTreshhold;
+	var eLnow = Date.now();
+	var resetPreloading = function(e){
+		isPreloading--;
+		clearTimeout(resetPreloadingTimer);
+		if(e && e.target){
+			addRemoveImgEvents(e.target, resetPreloading);
+		}
+		if(!e || isPreloading < 0 || !e.target) {
+			isPreloading = 0;
+		}
+	};
+	var lazyEvalLazy = (function(){
+		var timer, running;
+		var unblock = function(){
+			running = false;
+		};
+		var run = function(){
+			clearTimeout(timer);
+			clearLazyTimer();
+			evalLazyElements();
+			setTimeout(unblock);
+		};
+		return {
+			debounce: function(){
+				clearTimeout(timer);
+				clearTimeout(globalInitialTimer);
+				running = true;
+				timer = setTimeout(run, 66);
+			},
+			throttled: function(){
+				var delay;
+				if(!running){
+					running = true;
+					clearTimeout(timer);
+					delay = Date.now() - eLnow;
+					if(delay > 300){
+						delay = 9;
+					} else {
+						delay = 99;
+					}
+					timer = setTimeout(run, delay);
+				}
+			}
+		};
+	})();
+
+	var evalLazyElements = function (){
+		var rect, autoLoadElem, loadedSomething;
+		eLlen = lazyloadElems.length;
+		eLnow = Date.now();
+		if(eLlen){
+			eLvW = window.innerWidth + inViewTreshhold;
+			elvH = window.innerHeight + inViewTreshhold;
+			eLnegativeTreshhold = inViewTreshhold * -1;
+
+			for(; globalLazyIndex < eLlen; globalLazyIndex++){
+				rect = lazyloadElems[globalLazyIndex].getBoundingClientRect();
+
+				if ((eLbottom = rect.bottom) >= eLnegativeTreshhold &&
+					(eLtop = rect.top) <= elvH &&
+					(eLright = rect.right) >= eLnegativeTreshhold &&
+					(eLleft = rect.left) <= eLvW &&
+					(eLbottom || eLright || eLleft || eLtop)){
+					unveilLazy(lazyloadElems[globalLazyIndex]);
+					loadedSomething = true;
+				} else  {
+					if(globalLazyIndex < eLlen - 1 && Date.now() - eLnow > 9){
+						globalLazyIndex++;
+						autoLoadElem = false;
+						globalLazyTimer = setTimeout(evalLazyElements, 4);
+						break;
+					}
+
+					if(!loadedSomething && isWinloaded && !autoLoadElem &&
+						lazySizesConfig.preloadAfterLoad && isPreloading < 2 &&
+						((eLbottom || eLright || eLleft || eLtop) || lazyloadElems[globalLazyIndex].getAttribute(lazySizesConfig.sizesAttr) != 'auto')){
+						autoLoadElem = lazyloadElems[globalLazyIndex];
+					}
+				}
+			}
+
+			if(autoLoadElem && !loadedSomething){
+				preload(autoLoadElem);
+			}
+		}
+	};
+
+	function preload(elem){
+		isPreloading++;
+		elem = unveilLazy(elem);
+		addRemoveImgEvents(elem, resetPreloading);
+		addRemoveImgEvents(elem, resetPreloading, true);
+		clearTimeout(resetPreloadingTimer);
+		resetPreloadingTimer = setTimeout(resetPreloading, 5000);
+	}
+
+	function addScript(dummyEl){
+		var elem = document.createElement('script');
+
+		var parent = dummyEl.parentNode;
+
+		dummyEl.removeAttribute(lazySizesConfig.srcAttr);
+		parent.insertBefore(elem, dummyEl);
+		setImmediate(function(){
+			removeClass(dummyEl, lazySizesConfig.lazyClass);
+		});
+
+		return elem;
+	}
+
+	function clearLazyTimer(){
+		globalLazyIndex = 0;
+		clearTimeout(globalLazyTimer);
+	}
+
+	function unveilLazy(elem, force){
+		var sources, i, len, sourceSrcset, sizes, src, srcset, parent;
+
+		var event = triggerEvent(elem, 'lazybeforeunveil', {force: !!force});
+
+		if(!event.defaultPrevented){
+			sizes = elem.getAttribute(lazySizesConfig.sizesAttr);
+			src = elem.getAttribute(lazySizesConfig.srcAttr);
+			srcset = elem.getAttribute(lazySizesConfig.srcsetAttr);
+			parent = elem.parentNode;
+
+			if(src || srcset){
+
+				if(regDummyTags.test(elem.nodeName)){
+					elem = addScript(elem);
+				}
+
+				if(regScript.test(elem.nodeName || '')){
+					if(scriptUrls[src]){
+						return;
+					} else {
+						scriptUrls[src] = true;
+					}
+				} else if(regImg.test(elem.nodeName || '')) {
+
+					//LQIP
+					if(!force && !elem.complete && elem.getAttribute('src') && elem.src && !elem.lazyload){
+						addRemoveImgEvents(elem, resetPreloading);
+						addRemoveImgEvents(elem, resetPreloading, true);
+						return;
+					}
+					if(regPicture.test(parent.nodeName || '')){
+						sources = parent.getElementsByTagName('source');
+						for(i = 0, len = sources.length; i < len; i++){
+							sourceSrcset = sources[i].getAttribute(lazySizesConfig.srcsetAttr);
+							if(sourceSrcset){
+								sources[i].setAttribute('srcset', sourceSrcset);
+							}
+						}
+					}
+				}
+
+				if(sizes){
+					if(sizes == 'auto'){
+						updateSizes(elem, true);
+					} else {
+						elem.setAttribute('sizes', sizes);
+					}
+					elem.removeAttribute(lazySizesConfig.sizesAttr);
+					if (!srcset && window.console && elem.getAttribute('srcset')){
+						console.log('using lazysizes with a `srcset` attribute is not good. Use `data-srcset` instead');
+					}
+				}
+
+				if(srcset){
+					elem.setAttribute('srcset', srcset);
+					elem.removeAttribute(lazySizesConfig.srcsetAttr);
+				} else if(src){
+					elem.setAttribute('src', src);
+					elem.removeAttribute(lazySizesConfig.srcAttr);
+				}
+			}
+		}
+
+		setImmediate(function(){
+			removeClass(elem, lazySizesConfig.lazyClass);
+			if(sizes == 'auto'){
+				addClass(elem, lazySizesConfig.autosizesClass);
+			}
+
+			if(srcset || sizes){
+				updatePolyfill(elem, {srcset: srcset, src: src});
+			}
+		});
+		return elem;
+	}
+
+	var lazyEvalSizes = (function(){
+		var timer;
+		var run = function(){
+			clearTimeout(timer);
+			clearSizesTimer();
+			evalSizesElements();
+		};
+		return function(){
+			clearTimeout(timer);
+			clearTimeout(globalSizesTimer);
+			timer = setTimeout(run, 99);
+		};
+	})();
+
+	var evalSizesElements = function(){
+		var checkTime, now, i;
+		var len = autosizesElems.length;
+		if(len){
+
+			now = Date.now();
+			i = globalSizesIndex || 0;
+			checkTime = i + 3;
+
+			clearSizesTimer();
+
+			for(; i < len; i++){
+				updateSizes(autosizesElems[i]);
+
+				if(i > checkTime && i < len - 1 && Date.now() - now > 9){
+					globalSizesIndex = i + 1;
+
+					globalSizesTimer = setTimeout(evalSizesElements, 4);
+					break;
+				}
+			}
+		}
+	};
+
+	function clearSizesTimer(){
+		globalSizesIndex = 0;
+		clearTimeout(globalSizesTimer);
+	}
+
+	function updateSizes(elem, noPolyfill){
+		var parentWidth, elemWidth, width, cbWidth, parent, sources, i, len, event;
+		parent = elem.parentNode;
+
+		if(parent){
+			parentWidth = parent.offsetWidth;
+			elemWidth = elem.offsetWidth;
+			width = (elemWidth > parentWidth) ?
+				elemWidth :
+				parentWidth;
+
+			if(!width && !elem._lazysizesWidth){
+				while(parent && parent != document.body && !width){
+					width =  parent.offsetWidth;
+					parent = parent.parentNode;
+				}
+			}
+
+			event = triggerEvent(elem, 'lazybeforesizes', {width: width, polyfill: !noPolyfill});
+
+			if(!event.defaultPrevented){
+				width = event.details.width;
+
+				if(width && width !== elem._lazysizesWidth && (!lazySizesConfig.onlyLargerSizes || (!elem._lazysizesWidth || elem._lazysizesWidth < width))){
+					elem._lazysizesWidth = width;
+					width += 'px';
+					elem.setAttribute('sizes', width);
+
+					if(regPicture.test(parent.nodeName || '')){
+						sources = parent.getElementsByTagName('source');
+						for(i = 0, len = sources.length; i < len; i++){
+							sources[i].setAttribute('sizes', width);
+						}
+					}
+
+					if(event.details.polyfill){
+						updatePolyfill(elem);
+					}
+				}
+			}
+		}
+	}
+
+	// bind to all possible events ;-) This might look like a performance disaster, but it isn't.
+	// The main check functions are written to run extreme fast without consuming memory.
+	var onload = function(){
+		inViewTreshhold = 400;
+		clearTimeout(globalInitialTimer);
+
+		document.addEventListener('load', lazyEvalLazy.throttled, true);
+		isWinloaded = true;
+	};
+	var onready = function(){
+		var element = document.body || document.documentElement;
+
+		if(lazySizesConfig.mutation){
+			if(window.MutationObserver){
+				new MutationObserver( lazyEvalLazy.throttled ).observe( document.documentElement, {childList: true, subtree: true, attributes: true} );
+			} else {
+				element.addEventListener( "DOMNodeInserted", lazyEvalLazy.throttled, true);
+				document.documentElement.addEventListener( "DOMAttrModified", lazyEvalLazy.throttled, true);
+			}
+		}
+
+		//:hover
+		if(lazySizesConfig.hover){
+			document.addEventListener('mouseover', lazyEvalLazy.throttled, true);
+		}
+		//:focus/active
+		document.addEventListener('focus', lazyEvalLazy.throttled, true);
+		//:target
+		window.addEventListener('hashchange', lazyEvalLazy.throttled, true);
+
+		//:fullscreen
+		if(('onmozfullscreenchange' in element)){
+			window.addEventListener('mozfullscreenchange', lazyEvalLazy.throttled, true);
+		} else if(('onwebkitfullscreenchange' in element)){
+			window.addEventListener('webkitfullscreenchange', lazyEvalLazy.throttled, true);
+		} else {
+			window.addEventListener('fullscreenchange', lazyEvalLazy.throttled, true);
+		}
+
+		if(lazySizesConfig.cssanimation){
+			document.addEventListener('animationstart', lazyEvalLazy.throttled, true);
+			document.addEventListener('transitionstart', lazyEvalLazy.throttled, true);
+		}
+	};
+
+	setTimeout(function(){
+		var prop;
+		var lazySizesDefaults = {
+			mutation: true,
+			hover: true,
+			cssanimation: true,
+			lazyClass: 'lazyload',
+			autosizesClass: 'lazyautosizes',
+			srcAttr: 'data-src',
+			srcsetAttr: 'data-srcset',
+			sizesAttr: 'data-sizes',
+			preloadAfterLoad: false,
+			onlyLargerSizes: true
+		};
+
+		lazySizesConfig = window.lazySizesConfig || {};
+
+		for(prop in lazySizesDefaults){
+			if(!(prop in lazySizesConfig)){
+				lazySizesConfig[prop] = lazySizesDefaults[prop];
+			}
+		}
+
+		lazyloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass);
+		autosizesElems = document.getElementsByClassName(lazySizesConfig.autosizesClass);
+
+		addEventListener('scroll', lazyEvalLazy.throttled, false);
+		(document.body || document.documentElement).addEventListener('scroll', lazyEvalLazy.throttled, true);
+		document.addEventListener('touchmove', lazyEvalLazy.throttled, false);
+
+		addEventListener('resize', lazyEvalLazy.debounce, false);
+		addEventListener('resize', lazyEvalSizes, false);
+
+		if(/^i|^loade|c/.test(document.readyState)){
+			onready();
+		} else {
+			document.addEventListener('DOMContentLoaded', onready, false);
+		}
+
+		if(document.readyState == 'complete'){
+			onload();
+		} else {
+			addEventListener('load', onload, false);
+			document.addEventListener('readystatechange', lazyEvalLazy.throttled, false);
+		}
+
+		lazyEvalLazy.throttled();
+
+		if('lazySizesConfig' in window){
+			window.lazySizesConfig = null;
+		}
+
+	}, document.body ? 9 : 99);
+
+	return {
+		updateAllSizes: lazyEvalSizes,
+		updateAllLazy: lazyEvalLazy.throttled,
+		unveilLazy: function(el){
+			if(hasClass(el, lazySizesConfig.lazyClass)){
+				unveilLazy(el);
+			}
+		},
+		updateSizes: updateSizes,
+		updatePolyfill: updatePolyfill
+	};
+}));

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification
+name: lazysizes_rails
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Dima Zudochkin
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-10-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+- !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'
+description: 
+email:
+- dnd.pliz@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lazysizes_rails.gemspec
+- lib/lazysizes_rails.rb
+- lib/lazysizes_rails/engine.rb
+- lib/lazysizes_rails/version.rb
+- vendor/assets/javascripts/lazysizes_rails.js
+homepage: ''
+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.2.2
+signing_key: 
+specification_version: 4
+summary: Lazysizes for Rails application.
+test_files: []