holder_rails 1.7.0 → 1.9.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 15875671a6199f0e92ee28d6fa5aafe84a9a63fe
+  data.tar.gz: d0776426d64fdfefc3e49a10abca5ac1b72a74fa
+SHA512:
+  metadata.gz: 767a5464fb7f1df7375aa5b17bcbe6aed5c2069aef19ac7c78bc5373e4896c3c30c9de0a03c2ed022e94257a9c4f211b6407676fb9661bd91a395a93275b8d65
+  data.tar.gz: 6c3474b927e2987d2a50c0f194e8b9118016c178ddc9e4a1e5a576113c376ae771ce0dc616b231ba8991cccfd47965dde332b5b2915ab530826a46cf2d9476be

data/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2012 Nihad Abbasov / NARKOZ
+Copyright (c) 2012-2013 Nihad Abbasov <mail@narkoz.me>
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

data/README.md

@@ -1,5 +1,8 @@
 # Holder.js for Rails
 
+[![Build Status](https://travis-ci.org/NARKOZ/holder_rails.png)](https://travis-ci.org/NARKOZ/holder_rails)
+[![Gem Version](https://fury-badge.herokuapp.com/rb/holder_rails.png)](http://badge.fury.io/rb/holder_rails)
+
 Provides Holder.js to render image placeholders entirely on the client side.
 
 ## Installation
@@ -45,6 +48,10 @@ holder_tag '500x800', 'Example text', 'gray', :id => 'new', :class => 'special'
 
 For more information, check out [holder readme](https://github.com/imsky/holder#readme).
 
+## Versioning
+
+holder_rails 1.7.0 == Holder.js 1.7
+
 ## License
 
 Released under the BSD 2-clause license. See LICENSE.txt for details.

data/lib/holder_rails/version.rb

@@ -1,3 +1,3 @@
 module HolderRails
-  VERSION = "1.7.0"
+  VERSION = "1.9.0"
 end

data/vendor/assets/javascripts/holder.js

@@ -1,7 +1,7 @@
 /*
 
-Holder - 1.7 - client side image placeholders
-(c) 2012 Ivan Malopinsky / http://imsky.co
+Holder - 1.9 - client side image placeholders
+(c) 2012-2013 Ivan Malopinsky / http://imsky.co
 
 Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0
 Commercial use requires attribution.
@@ -54,6 +54,7 @@ function draw(ctx, dimensions, template, ratio) {
 	var ts = text_size(dimensions.width, dimensions.height, template);
 	var text_height = ts.height;
 	var width = dimensions.width * ratio, height = dimensions.height * ratio;
+	var font = template.font ? template.font : "sans-serif";
 	canvas.width = width;
 	canvas.height = height;
 	ctx.textAlign = "center";
@@ -61,25 +62,24 @@ function draw(ctx, dimensions, template, ratio) {
 	ctx.fillStyle = template.background;
 	ctx.fillRect(0, 0, width, height);
 	ctx.fillStyle = template.foreground;
-	ctx.font = "bold " + text_height + "px sans-serif";
+	ctx.font = "bold " + text_height + "px "+font;
 	var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height);
 	if (ctx.measureText(text).width / width > 1) {
 		text_height = template.size / (ctx.measureText(text).width / width);
 	}
-	ctx.font = "bold " + (text_height * ratio) + "px sans-serif";
+	//Resetting font size if necessary
+	ctx.font = "bold " + (text_height * ratio) + "px "+font;
 	ctx.fillText(text, (width / 2), (height / 2), width);
 	return canvas.toDataURL("image/png");
 }
 
 function render(mode, el, holder, src) {
-
 	var dimensions = holder.dimensions,
 		theme = holder.theme,
-		text = holder.text;
+		text = holder.text ? decodeURIComponent(holder.text) : holder.text;
 	var dimensions_caption = dimensions.width + "x" + dimensions.height;
-	theme = (text ? extend(theme, {
-		text: text
-	}) : theme);
+	theme = (text ? extend(theme, {	text: text }) : theme);
+	theme = (holder.font ? extend(theme, {font: holder.font}) : theme);
 
 	var ratio = 1;
 	if(window.devicePixelRatio && window.devicePixelRatio > 1){
@@ -89,11 +89,15 @@ function render(mode, el, holder, src) {
 	if (mode == "image") {
 		el.setAttribute("data-src", src);
 		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
-		el.style.width = dimensions.width + "px";
-		el.style.height = dimensions.height + "px";
-
+		
+		if(fallback || !holder.auto){
+		    el.style.width = dimensions.width + "px";
+		    el.style.height = dimensions.height + "px";
+		}
+	
 		if (fallback) {
 			el.style.backgroundColor = theme.background;
+			
 		}
 		else{
 			el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
@@ -123,7 +127,10 @@ function fluid(el, holder, src) {
 	fluid.style.width = holder.dimensions.width + (holder.dimensions.width.indexOf("%")>0?"":"px");
 	fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px");
 	fluid.id = el.id;
-
+	
+	el.style.width=0;
+	el.style.height=0;
+	
 	if (theme.text) {
 		fluid.appendChild(document.createTextNode(theme.text))
 	} else {
@@ -132,7 +139,18 @@ function fluid(el, holder, src) {
 		setTimeout(fluid_update, 0);
 	}
 
-	el.parentNode.replaceChild(fluid, el);
+	el.parentNode.insertBefore(fluid, el.nextSibling)
+	
+	if(window.jQuery){
+	    jQuery(function($){
+		$(el).on("load", function(){
+		   el.style.width = fluid.style.width;
+		   el.style.height = fluid.style.height;
+		   $(el).show();
+		   $(fluid).remove();
+		});
+	    })
+	}
 }
 
 function fluid_update() {
@@ -168,6 +186,11 @@ function parse_flags(flags, options) {
 			ret.theme = options.themes[flag];
 		} else if (app.flags.text.match(flag)) {
 			ret.text = app.flags.text.output(flag);
+		} else if(app.flags.font.match(flag)){
+			ret.font = app.flags.font.output(flag);
+		}
+		else if(app.flags.auto.match(flag)){
+			ret.auto = true;
 		}
 	}
 
@@ -192,7 +215,7 @@ var fluid_images = [];
 var settings = {
 	domain: "holder.js",
 	images: "img",
-	elements: ".holderjs",
+	bgnodes: ".holderjs",
 	themes: {
 		"gray": {
 			background: "#eee",
@@ -251,6 +274,15 @@ app.flags = {
 		output: function (val) {
 			return this.regex.exec(val)[1];
 		}
+	},
+	font: {
+	    regex: /font\:(.*)/,
+	    output: function(val){
+		return this.regex.exec(val)[1];
+	    }
+	},
+	auto: {
+	    regex: /^auto$/
 	}
 }
 
@@ -279,29 +311,58 @@ app.add_image = function (src, el) {
 };
 
 app.run = function (o) {
-	var options = extend(settings, o),
-		images_nodes = selector(options.images),
-		elements = selector(options.elements),
-		preempted = true,
-		images = [];
-
-	for (i = 0, l = images_nodes.length; i < l; i++) images.push(images_nodes[i]);
-
-	var holdercss = document.createElement("style");
-	holdercss.type = "text/css";
-	holdercss.styleSheet ? holdercss.styleSheet.cssText = options.stylesheet : holdercss.textContent = options.stylesheet;
-	document.getElementsByTagName("head")[0].appendChild(holdercss);
+	var options = extend(settings, o), images = [];
+	    
+	if(options.images instanceof window.NodeList){
+	    imageNodes = options.images;
+	}
+	else if(options.images instanceof window.Node){
+	    imageNodes = [options.images];
+	}
+	else{
+	    imageNodes = selector(options.images);
+	}
+	
+	if(options.elements instanceof window.NodeList){
+	    bgnodes = options.bgnodes;
+	}
+	else if(options.bgnodes instanceof window.Node){
+	    bgnodes = [options.bgnodes];
+	}
+	else{
+	    bgnodes = selector(options.bgnodes);
+	}
+	
+	preempted = true;
+	   
+	for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
+	
+	var holdercss = document.getElementById("holderjs-style");
+	
+	if(!holdercss){
+	    holdercss = document.createElement("style");
+	    holdercss.setAttribute("id", "holderjs-style");
+	    holdercss.type = "text/css";
+	    document.getElementsByTagName("head")[0].appendChild(holdercss);
+	}
 
+	if(holdercss.styleSheet){
+	    holdercss.styleSheet += options.stylesheet;
+	}
+	else{
+	    holdercss.textContent+= options.stylesheet;
+	}
+	
 	var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
 
-	for (var l = elements.length, i = 0; i < l; i++) {
-		var src = window.getComputedStyle(elements[i], null)
+	for (var l = bgnodes.length, i = 0; i < l; i++) {
+		var src = window.getComputedStyle(bgnodes[i], null)
 			.getPropertyValue("background-image");
 		var flags = src.match(cssregex);
 		if (flags) {
 			var holder = parse_flags(flags[1].split("/"), options);
 			if (holder) {
-				render("background", elements[i], holder, src);
+				render("background", bgnodes[i], holder, src);
 			}
 		}
 	}

metadata

@@ -1,30 +1,27 @@
 --- !ruby/object:Gem::Specification
 name: holder_rails
 version: !ruby/object:Gem::Version
-  version: 1.7.0
-  prerelease: 
+  version: 1.9.0
 platform: ruby
 authors:
 - Nihad Abbasov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-29 00:00:00.000000000 Z
+date: 2013-04-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - '>='
       - !ruby/object:Gem::Version
         version: 3.1.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - '>='
       - !ruby/object:Gem::Version
         version: 3.1.0
 description: Provides Holder.js to render image placeholders entirely on the client
@@ -48,33 +45,26 @@ files:
 - vendor/assets/javascripts/holder.js
 homepage: https://github.com/narkoz/holder_rails
 licenses: []
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
-      segments:
-      - 0
-      hash: -4350495992017316440
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
-      segments:
-      - 0
-      hash: -4350495992017316440
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.24
+rubygems_version: 2.0.3
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: Holder.js for Rails 3.1 asset pipeline
 test_files:
 - test/holder_rails_test.rb