Change rel to data-weight & Zepto.js version

README.md

@@ -4,10 +4,10 @@ jquery.tagcloud.js
 Usage
 -----
     <div id="whatever">
-      <a href="/path" rel="7">peace</a>
-      <a href="/path" rel="3">unity</a>
-      <a href="/path" rel="10">love</a>
-      <a href="/path" rel="5">having fun</a>
+      <a href="/path" data-weight="7" rel="tag">peace</a>
+      <a href="/path" data-weight="3" rel="tag">unity</a>
+      <a href="/path" data-weight="10" rel="tag">love</a>
+      <a href="/path" data-weight="5" rel="tag">having fun</a>
     </div>
 
 and then:

jquery.tagcloud.js

@@ -58,7 +58,7 @@
 
     var opts = $.extend({}, $.fn.tagcloud.defaults, options);
     var tagWeights = this.map(function(){
-      return $(this).attr("rel");
+      return $(this).attr("data-weight");
     });
     tagWeights = jQuery.makeArray(tagWeights).sort(compareWeights);
     var lowest = tagWeights[0];
@@ -75,7 +75,7 @@
       colorIncr = colorIncrement (opts.color, range);
     }
     return this.each(function() {
-      var weighting = $(this).attr("rel") - lowest;
+      var weighting = $(this).attr("data-weight") - lowest;
       if (opts.size) {
         $(this).css({"font-size": opts.size.start + (weighting * fontIncr) + opts.size.unit});
       }

zepto.tagcloud.js

@@ -0,0 +1,92 @@
+/*!
+ * jQuery.tagcloud.js
+ * A Simple Tag Cloud Plugin for jQuery & Zepto
+ *
+ * https://github.com/addywaddy/jquery.tagcloud.js
+ * created by Adam Groves
+ */
+(function($) {
+
+  /*global Zepto*/
+  "use strict";
+
+  var compareWeights = function(a, b)
+  {
+    return a - b;
+  };
+
+  // Converts hex to an RGB array
+  var toRGB = function(code) {
+    if (code.length === 4) {
+      code = code.replace(/(\w)(\w)(\w)/gi, "\$1\$1\$2\$2\$3\$3");
+    }
+    var hex = /(\w{2})(\w{2})(\w{2})/.exec(code);
+    return [parseInt(hex[1], 16), parseInt(hex[2], 16), parseInt(hex[3], 16)];
+  };
+
+  // Converts an RGB array to hex
+  var toHex = function(ary) {
+    return "#" + Zepto.map(ary, function(i) {
+      var hex =  i.toString(16);
+      hex = (hex.length === 1) ? "0" + hex : hex;
+      return hex;
+    }).join("");
+  };
+
+  var colorIncrement = function(color, range) {
+    return Zepto.map(toRGB(color.end), function(n, i) {
+      return (n - toRGB(color.start)[i])/range;
+    });
+  };
+
+  var tagColor = function(color, increment, weighting) {
+    var rgb = Zepto.map(toRGB(color.start), function(n, i) {
+      var ref = Math.round(n + (increment[i] * weighting));
+      if (ref > 255) {
+        ref = 255;
+      } else {
+        if (ref < 0) {
+          ref = 0;
+        }
+      }
+      return ref;
+    });
+    return toHex(rgb);
+  };
+
+  $.fn.tagcloud = function(options) {
+
+    var opts = $.extend({}, $.fn.tagcloud.defaults, options);
+    var tagWeights = this.map(function(){
+      return $(this).attr("data-weight");
+    });
+    tagWeights = Array.prototype.slice.call(tagWeights, 0).sort(compareWeights);
+    var lowest = tagWeights[0];
+    var highest = tagWeights.pop();
+    var range = highest - lowest;
+    if(range === 0) {range = 1;}
+    // Sizes
+    var fontIncr, colorIncr;
+    if (opts.size) {
+      fontIncr = (opts.size.end - opts.size.start)/range;
+    }
+    // Colors
+    if (opts.color) {
+      colorIncr = colorIncrement (opts.color, range);
+    }
+    return this.each(function() {
+      var weighting = $(this).attr("data-weight") - lowest;
+      if (opts.size) {
+        $(this).css({"font-size": opts.size.start + (weighting * fontIncr) + opts.size.unit});
+      }
+      if (opts.color) {
+        $(this).css({"color": tagColor(opts.color, colorIncr, weighting)});
+      }
+    });
+  };
+
+  $.fn.tagcloud.defaults = {
+    size: {start: 14, end: 18, unit: "pt"}
+  };
+
+})(Zepto);