xoxco · eikes · Jan 17, 2012 · Jan 17, 2012 · Jan 23, 2012 · Jan 23, 2012
diff --git a/README.md b/README.md
@@ -2,49 +2,40 @@
 
 Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.
 
-[Get it from Github](https://github.com/xoxco/breakpoints)
+## Instructions
 
-[View Demo](http://xoxco.com/projects/code/breakpoints/)
+Initialize the plugin with an array of widths or an individual width in pixels where breakpoints should be triggered
+and pass a callback that is triggered. It gets information about what breakpoint was left and which was entered:
 
-Created by [XOXCO](http://xoxco.com)
+    breakpoints(600, function(oldPoint, newPoint) {
+      console.log(oldPoint, newPoint);
+    });
+
+    breakpoints([0, 160, 320, 480, 768, 1024], function(oldPoint, newPoint) {
+      console.log(oldPoint, newPoint);
+    });
 
-## Instructions
+Alternatively bind your callbacks at another time:
+
+    var myPoints = breakpoints([0, 160, 320, 480, 768, 1024]);
+
+    myPoints.bind(function (oldPoint, newPoint) {
+      console.log("after", oldPoint, newPoint);
+    });
+
+## Relocate.js
+
+    var elements = document.getElementsByClassName("movethis");
+    relocate(480, document.getElementById("sidebar"), elements);
+
+To use this in IE8 or less you can use this [getElementsByClassName polyfill](https://gist.github.com/2299607)
+
+## Credit
+
+Breakpoints.js was originally created by [XOXCO](http://xoxco.com)
+
+Version 2.0 and 3.0 have been rewritten by [Eike Send](http://eike.se/nd)
 
-	$(window).setBreakpoints({
-	// use only largest available vs use all available
-		distinct: true, 
-	// array of widths in pixels where breakpoints
-	// should be triggered
-		breakpoints: [
-			320,
-			480,
-			768,
-			1024
-		] 
-	});		
-
-	$(window).bind('enterBreakpoint320',function() {
-		...
-	});
-
-	$(window).bind('exitBreakpoint320',function() {
-		...
-	});
-
-	$(window).bind('enterBreakpoint768',function() {
-		...
-	});
-
-	$(window).bind('exitBreakpoint768',function() {
-		...
-	});
-
-
-	$(window).bind('enterBreakpoint1024',function() {
-		...
-	});
-
-	$(window).bind('exitBreakpoint1024',function() {
-		...
-	});
+Version 2.0 removed dependencies on DOM classes and fixed bugs
 
+Version 3.0 removed jQuery dependency and introduced relocate.js
diff --git a/breakpoints.js b/breakpoints.js
@@ -1,90 +1,163 @@
 /*
-	Breakpoints.js
-	version 1.0
-
-	Creates handy events for your responsive design breakpoints
-
-	Copyright 2011 XOXCO, Inc
-	http://xoxco.com/
+ * Breakpoints.js
+ * Version 3.5
+ * 
+ * Creates handy events for your responsive design breakpoints.
+ * Use it like this to bind to certain breakpoint changes:
+ * 
+ * breakpoints([0, 480, 960], function(oldP, newP) { 
+ *   console.log(oldP, newP)
+ * });
+ * 
+ * Version 1.0 written and copyright by XOXCO, Inc
+ * http://xoxco.com/
+ * 
+ * Version 2.0 and 3.0 rewrite and copyright by Eike Send
+ * http://eike.se/nd
+ * 
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ */
 
-	Documentation for this plugin lives here:
-	http://xoxco.com/projects/code/breakpoints
-
-	Licensed under the MIT license:
-	http://www.opensource.org/licenses/mit-license.php
+(function(win){
+  var doc = win.document;
+
+  // This is the function that is exported into the global namespace
+  breakpoints = function(userBreakpoints, callback) {
+    return new Breakpoints(userBreakpoints, callback);
+  }
+
+  Breakpoints = function(userBreakpoints, callback) {
+    this.arr = null; // The array of used breakpoints
+    this.old = null; // Old breakpoint
+    this.cur = null; // Current breakpoint
+    this.hst = [];   // History of breakpoints
+    this.fnc = [];   // List of functions bound to the breakpoints array
+
+    // Create an array if it is not an Array(like) structure
+    if (!(userBreakpoints instanceof Array )) userBreakpoints = [0, userBreakpoints];
+    // just in case, sort the given breakpoints
+    this.arr = userBreakpoints.sort(function(a, b) { return a - b } );
+    var instance = this;
+    // Bind to the resize event, but don't remove other bindings
+    var resizeCallback = function(){
+      instance.check.apply(instance)
+    }
+    if (win.addEventListener) {
+      win.addEventListener("resize", resizeCallback, false);
+    } else {
+      win.attachEvent("onresize", resizeCallback);
+    }
+    if (callback) {
+      instance.bind(callback);
+    }
+    instance.old = instance.arr[0];
+    instance.check();
+
+  }
+
+  // Does the actual work:
+  Breakpoints.prototype.check= function() {
+
+    var instance = this;
+    // Get window width, code stolen from jQuery
+    var docwindowProp = doc.documentElement["clientWidth"];
+    var width = doc.compatMode === "CSS1Compat" && docwindowProp 
+                || doc.body && doc.body["clientWidth"] 
+                || docwindowProp;
+
+    // instance checks if breakpoints have changed and triggers accordingly
+    instance.cur = breakpoints.getCurrentBreakPoint(instance.arr, width);
+    if (instance.old != instance.cur) {
+      var i, inBetweenBreakPoints = [];
+      // Find all the breakpoints that have been crossed and trigger the event as well
+      for (i = 0; i < instance.arr.length; i++) {
+        var el = instance.arr[i]; 
+        if (el >= instance.old && el <= instance.cur || el >= instance.cur && el <= instance.old) {
+          inBetweenBreakPoints.push(el);
+        }
+      }
+      if (instance.cur < instance.old) {
+        inBetweenBreakPoints = inBetweenBreakPoints.reverse();
+      }
+      for (i = 0; i < inBetweenBreakPoints.length; i++) {
+        instance.trigger(inBetweenBreakPoints[i]);
+      }
+      instance.old = instance.cur;
+    }
+  }
+
+  // Utility function to get the value that is the highest in an array below or equal the given value
+  // Defaults to 0
+  // breakpoints.getCurrentBreakPoint([100, 200, 300, 400], 250) -> 200
+  // breakpoints.getCurrentBreakPoint([100, 200, 300, 400], 25)  -> 0
+  breakpoints.getCurrentBreakPoint = function(breakpoints, width) {
+    for (var i = 0; i < breakpoints.length; i++) {
+      if (width >= breakpoints[i] && ( breakpoints.length == i + 1 || width < breakpoints[i+1] )) {
+        return breakpoints[i];
+      }
+    }
+    return 0;
+  };
+
+  // These functions are are used to bind and trigger callbacks of breakpoint events
+  Breakpoints.prototype.bind = function(func) {
+    var instance = this;
+    instance.fnc.push(func);
+    if (instance.hst.length) {
+      for (var i = 1; i < instance.hst.length; i++) {
+        func(instance.hst[i-1], instance.hst[i])
+      }
+    }
+  }
+
+  Breakpoints.prototype.trigger = function(value) {
+    var instance = this;
+    for (var i = 0; i < instance.fnc.length; i++) {
+      if (instance.hst.length > 0 
+          && instance.hst[instance.hst.length-1] != value) {
+        instance.fnc[i](instance.hst[instance.hst.length-1], value)
+      }
+    }
+    if (instance.hst[instance.hst.length-1] != value) {
+      instance.hst.push(value);
+    }
+  }
+})(this);
 
-*/
-(function($) {
+// Move Elements in the DOM when a certain breakpoint is crossed
 
-	var lastSize = 0;
-	var interval = null;
-
-	$.fn.resetBreakpoints = function() {
-		$(window).unbind('resize');
-		if (interval) {
-			clearInterval(interval);
-		}
-		lastSize = 0;
-	};
-
-	$.fn.setBreakpoints = function(settings) {
-		var options = jQuery.extend({
-							distinct: true,
-							breakpoints: new Array(320,480,768,1024)
-				    	},settings);
-
-
-		interval = setInterval(function() {
-
-			var w = $(window).width();
-			var done = false;
-
-			for (var bp in options.breakpoints.sort(function(a,b) { return (b-a) })) {
-
-				// fire onEnter when a browser expands into a new breakpoint
-				// if in distinct mode, remove all other breakpoints first.
-				if (!done && w >= options.breakpoints[bp] && lastSize < options.breakpoints[bp]) {
-					if (options.distinct) {
-						for (var x in options.breakpoints.sort(function(a,b) { return (b-a) })) {
-							if ($('body').hasClass('breakpoint-' + options.breakpoints[x])) {
-								$('body').removeClass('breakpoint-' + options.breakpoints[x]);
-								$(window).trigger('exitBreakpoint' + options.breakpoints[x]);
-							}
-						}
-						done = true;
-					}
-					$('body').addClass('breakpoint-' + options.breakpoints[bp]);
-					$(window).trigger('enterBreakpoint' + options.breakpoints[bp]);
-
-				}				
-
-				// fire onExit when browser contracts out of a larger breakpoint
-				if (w < options.breakpoints[bp] && lastSize >= options.breakpoints[bp]) {
-					$('body').removeClass('breakpoint-' + options.breakpoints[bp]);
-					$(window).trigger('exitBreakpoint' + options.breakpoints[bp]);
-
-				}
-
-				// if in distinct mode, fire onEnter when browser contracts into a smaller breakpoint
-				if (
-					options.distinct && // only one breakpoint at a time
-					w >= options.breakpoints[bp] && // and we are in this one
-					w < options.breakpoints[bp-1] && // and smaller than the bigger one
-					lastSize > w && // and we contracted
-					lastSize >0 &&  // and this is not the first time
-					!$('body').hasClass('breakpoint-' + options.breakpoints[bp]) // and we aren't already in this breakpoint
-					) {					
-					$('body').addClass('breakpoint-' + options.breakpoints[bp]);
-					$(window).trigger('enterBreakpoint' + options.breakpoints[bp]);
-
-				}						
-			}
-
-			// set up for next call
-			if (lastSize != w) {
-				lastSize = w;
-			}
-		},250);
-	};
-
-})(jQuery);
+function relocate(breakPoint, destinationElement, elements) {
+  // ensure that we use an array-like argument, NodeList and HTMLCollection work as well
+  if (elements instanceof Element) elements = [elements];
+  var placeHolders = [],
+      els = [], 
+      parentEl, el, i,
+      l = elements.length;
+  // first, create a non-live copy of the elements
+  for (i = l-1; i >= 0; i--) {
+    els.push(elements[i]);
+  }
+  // then create a Breakpoints object that operates on it:
+  return breakpoints(breakPoint, function(oldPoint, newPoint) {
+    if (oldPoint < newPoint && newPoint == breakPoint) {
+      for (i = 0; i < l; i++) {
+        parentEl = els[i].parentNode;
+        if (placeHolders[i] === undefined) {
+          placeHolders[i] = document.createElement("span");
+          parentEl.insertBefore(placeHolders[i], els[i]);
+        }
+        el = parentEl.removeChild(els[i]);
+        destinationElement.insertBefore(el, destinationElement.firstChild);
+      }
+    }
+    if (oldPoint > newPoint && oldPoint == breakPoint) {
+      for (i = 0; i < l; i++) {
+        parentEl = els[i].parentNode;
+        el = parentEl.removeChild(els[i]);
+        placeHolders[i].parentNode.insertBefore(el, placeHolders[i]);
+      }
+    }
+  });
+}
diff --git a/breakpoints.min.js b/breakpoints.min.js
@@ -0,0 +1,21 @@
+/*
+ * Breakpoints.js
+ * Version 3.5
+ * 
+ * Creates handy events for your responsive design breakpoints.
+ * Use it like this to bind to certain breakpoint changes:
+ * 
+ * breakpoints([0, 480, 960], function(oldP, newP) { 
+ *   console.log(oldP, newP)
+ * });
+ * 
+ * Version 1.0 written and copyright by XOXCO, Inc
+ * http://xoxco.com/
+ * 
+ * Version 2.0 and 3.0 rewrite and copyright by Eike Send
+ * http://eike.se/nd
+ * 
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ */function relocate(a,b,c){c instanceof Element&&(c=[c]);var d=[],e=[],f,g,h,i=c.length;for(h=i-1;h>=0;h--)e.push(c[h]);return breakpoints(a,function(c,j){if(c<j&&j==a)for(h=0;h<i;h++)f=e[h].parentNode,d[h]===undefined&&(d[h]=document.createElement("span"),f.insertBefore(d[h],e[h])),g=f.removeChild(e[h]),b.insertBefore(g,b.firstChild);if(c>j&&c==a)for(h=0;h<i;h++)f=e[h].parentNode,g=f.removeChild(e[h]),d[h].parentNode.insertBefore(g,d[h])})}(function(a){var b=a.document;breakpoints=function(a,b){return new Breakpoints(a,b)},Breakpoints=function(b,c){this.arr=null,this.old=null,this.cur=null,this.hst=[],this.fnc=[],b instanceof Array||(b=[0,b]),this.arr=b.sort(function(a,b){return a-b});var d=this,e=function(){d.check.apply(d)};a.addEventListener?a.addEventListener("resize",e,!1):a.attachEvent("onresize",e),c&&d.bind(c),d.old=d.arr[0],d.check()},Breakpoints.prototype.check=function(){var a=this,c=b.documentElement.clientWidth,d=b.compatMode==="CSS1Compat"&&c||b.body&&b.body.clientWidth||c;a.cur=breakpoints.getCurrentBreakPoint(a.arr,d);if(a.old!=a.cur){var e,f=[];for(e=0;e<a.arr.length;e++){var g=a.arr[e];(g>=a.old&&g<=a.cur||g>=a.cur&&g<=a.old)&&f.push(g)}a.cur<a.old&&(f=f.reverse());for(e=0;e<f.length;e++)a.trigger(f[e]);a.old=a.cur}},breakpoints.getCurrentBreakPoint=function(a,b){for(var c=0;c<a.length;c++)if(b>=a[c]&&(a.length==c+1||b<a[c+1]))return a[c];return 0},Breakpoints.prototype.bind=function(a){var b=this;b.fnc.push(a);if(b.hst.length)for(var c=1;c<b.hst.length;c++)a(b.hst[c-1],b.hst[c])},Breakpoints.prototype.trigger=function(a){var b=this;for(var c=0;c<b.fnc.length;c++)b.hst.length>0&&b.hst[b.hst.length-1]!=a&&b.fnc[c](b.hst[b.hst.length-1],a);b.hst[b.hst.length-1]!=a&&b.hst.push(a)}})(this)