added new jquery resize library for UI

2026-05-13 05:08:35 -05:00 · 2015-05-27 12:28:21 -04:00
parent 9df18fcea3
commit daeaf90e6e
20 changed files with 2446 additions and 2 deletions
@@ -0,0 +1,33 @@
+{
+  "name": "javascript-detect-element-resize",
+  "version": "0.5.3",
+  "main": "detect-element-resize.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sdecima/javascript-detect-element-resize.git"
+  },
+  "homepage": "https://github.com/sdecima/javascript-detect-element-resize",
+  "authors": [
+    "Sebastián Décima (https://github.com/sdecima/)"
+  ],
+  "description": "A Cross-Browser, Event-based, Element Resize Detection",
+  "keywords": [
+    "resize",
+    "events",
+    "javascript",
+    "ecmascript"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*"
+  ],
+  "_release": "0.5.3",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.5.3",
+    "commit": "1b79a1a0d3624e075c5ffb1e4c8dd8b9f42ff1f4"
+  },
+  "_source": "git://github.com/sdecima/javascript-detect-element-resize.git",
+  "_target": "~0.5.3",
+  "_originalSource": "javascript-detect-element-resize"
+}
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Sebastián Décima
+
+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.
@@ -0,0 +1,157 @@
+javascript-detect-element-resize
+================================
+
+A Cross-Browser, Event-based, Element Resize Detection.
+
+In short, this implementation does NOT use an internal timer to detect size changes (as most implementations I found do).
+It uses `scroll` events on most browsers, and the [`onresize` event][5] on IE10 and below.
+
+The method used not only detects javascript generated resize changes but also changes made from CSS pseudo classes e.g. :hover, CSS animations, etc.
+
+About the libraries
+===================
+I was searching for a library that allowed me to detect when an DOM element changes size, and all solutions I found had two problems:
+
+ 1. only available as jQuery libraries (so no standalone Javascript)
+ 2. all had terrible performance (because all of them use timers to intermittently poll the size of the elements to detect a change).
+
+Then I came across this [great post][1] on [Back Alley Coder][3] about using ~~[overflow and underflow events][2]~~ [`scroll` events][2] to do event-based element resize detection; and it works great without consuming resources at all (just like any other browser originated event).
+
+The libraries on this repository are just a ready-to-use implementation of the above, one pure javascript and the other a jQuery plugin version (just for convenience).
+
+Libraries
+=========
+
+Pure Javascript library usage
+-----------------------------
+
+```html
+<script type="text/javascript" src="detect-element-resize.js"></script>
+<script type="text/javascript">
+  var resizeElement = document.getElementById('resizeElement'),
+      resizeCallback = function() {
+          /* do something */
+      };
+  addResizeListener(resizeElement, resizeCallback);
+  removeResizeListener(resizeElement, resizeCallback);
+</script>
+```
+
+jQuery plugin library usage
+---------------------------
+```html
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="jquery.resize.js"></script>
+<script type="text/javascript">
+  var myFunc = function() {
+    /* do something */
+  };
+  
+  $('#resizeElement').resize(myFunc);
+  $('#resizeElement').removeResize(myFunc);
+</script>
+```
+
+Compatibility
+-------------
+Works great on:
+
+ - Chrome
+ - Firefox
+ - IE 11 and below (tested on 11, 10, 9, 8 and 7)
+
+Known Issues:
+
+ - On IE 10 and below: If you detach the element and re-attach it, you will need to add the resize listener again.
+
+Doesn't work on:
+
+ - ???
+
+Please [let me know](https://github.com/sdecima/javascript-detect-element-resize/issues) if you test these libraries on any other browser, of if you run into issues with any of the above browsers.
+
+TODO
+====
+
+ - Fix detach/re-attach issue on IE 10 and below (IE 9 and below doesn't support CSS animations so we can use those as in the rest of the browsers).
+ - Create minified version of the libraries.
+ - Add support for standard jQuery bind method on 'resize' event.
+
+Release Notes
+=============
+v0.5.3
+------
+
+ - Fix for when the element is inside a display:none, and for when it is detached and reattached (changed @thomassuckow and @jerjou fixes to properly use CSS animations)
+ - Adding /tests/ with some general QUnit tests to help test on multiple browsers
+
+v0.5.2
+------
+
+ - Adding a bower.json file (thanks @adamjcook)
+ - Fix style being appended to head multiple times (thanks @thomassuckow and @progman32)
+ - Work around a chrome bug that would show scrollbars in some cases (thanks @thomassuckow)
+
+v0.5.1
+------
+
+ - Fix for resize event on IE
+
+v0.5
+----
+
+ - It is now fully compatible with IE11.
+ - Rework of the libraries using the new scroll-event-based code of [Back Alley Coder][1]. For the pure javascript version I pretty much used the original code from [Back Alley Coder][1] and only had to add code to dynamically insert the styling for the resize-triggers.
+
+v0.4.1
+----
+
+ - Fix for jQuery 'resize' method overlapping.
+
+v0.4
+----
+
+ - Adds better cross-browser support, it now uses MutationObservers only on IE11.
+
+v0.3
+----
+
+ - Adds support for MutationObservers.
+ - Adds support for IE 11.
+ - Wrapped the pure javascript version of the library (to hide non-public methods).
+
+v0.2
+----
+
+ - Adds support for IE 8 and below.
+
+v0.1
+----
+
+ - Implementation based on the [works][1] of [Back Alley Coder][3].
+ - Adds jQuery plugin version.
+
+
+References
+==========
+
+Similar libraries (but they use timers)
+---------------------------------------
+[jQuery-mutate](http://www.jqui.net/jquery-projects/jquery-mutate-official/)
+
+[jQuery-resize-plugin](http://benalman.com/projects/jquery-resize-plugin/)
+
+
+Don't get me wrong, these are great libraries and work as advertised, it's just that they are not easy on browser resources.
+
+External links
+--------------
+[Back Alley Coder: Cross-Browser, Event-based, Element Resize Detection][1]  
+[Back Alley Coder: Overflow and Underflow Events][2]
+
+[1]: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
+[2]: http://www.backalleycoder.com/2013/03/14/oft-overlooked-overflow-and-underflow-events/
+[3]: http://www.backalleycoder.com/
+[4]: http://www.w3.org/TR/dom/#mutation-observers
+[5]: http://msdn.microsoft.com/en-us/library/ie/ms536959
+
@@ -0,0 +1,24 @@
+{
+    "name": "javascript-detect-element-resize",
+    "version": "0.5.3",
+    "main": "detect-element-resize.js",
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:sdecima/javascript-detect-element-resize.git"
+    },
+    "homepage": "https://github.com/sdecima/javascript-detect-element-resize",
+    "authors": [
+        "Sebastián Décima (https://github.com/sdecima/)"
+    ],
+    "description": "A Cross-Browser, Event-based, Element Resize Detection",
+    "keywords": [
+        "resize",
+        "events",
+        "javascript",
+        "ecmascript"
+    ],
+    "license": "MIT",
+    "ignore": [
+        "**/.*"
+    ]
+}
@@ -0,0 +1,147 @@
+/**
+* Detect Element Resize
+*
+* https://github.com/sdecima/javascript-detect-element-resize
+* Sebastian Decima
+*
+* version: 0.5.3
+**/
+
+(function () {
+	var attachEvent = document.attachEvent,
+		stylesCreated = false;
+	
+	if (!attachEvent) {
+		var requestFrame = (function(){
+			var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
+								function(fn){ return window.setTimeout(fn, 20); };
+			return function(fn){ return raf(fn); };
+		})();
+		
+		var cancelFrame = (function(){
+			var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
+								   window.clearTimeout;
+		  return function(id){ return cancel(id); };
+		})();
+
+		function resetTriggers(element){
+			var triggers = element.__resizeTriggers__,
+				expand = triggers.firstElementChild,
+				contract = triggers.lastElementChild,
+				expandChild = expand.firstElementChild;
+			contract.scrollLeft = contract.scrollWidth;
+			contract.scrollTop = contract.scrollHeight;
+			expandChild.style.width = expand.offsetWidth + 1 + 'px';
+			expandChild.style.height = expand.offsetHeight + 1 + 'px';
+			expand.scrollLeft = expand.scrollWidth;
+			expand.scrollTop = expand.scrollHeight;
+		};
+
+		function checkTriggers(element){
+			return element.offsetWidth != element.__resizeLast__.width ||
+						 element.offsetHeight != element.__resizeLast__.height;
+		}
+		
+		function scrollListener(e){
+			var element = this;
+			resetTriggers(this);
+			if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
+			this.__resizeRAF__ = requestFrame(function(){
+				if (checkTriggers(element)) {
+					element.__resizeLast__.width = element.offsetWidth;
+					element.__resizeLast__.height = element.offsetHeight;
+					element.__resizeListeners__.forEach(function(fn){
+						fn.call(element, e);
+					});
+				}
+			});
+		};
+		
+		/* Detect CSS Animations support to detect element display/re-attach */
+		var animation = false,
+			animationstring = 'animation',
+			keyframeprefix = '',
+			animationstartevent = 'animationstart',
+			domPrefixes = 'Webkit Moz O ms'.split(' '),
+			startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
+			pfx  = '';
+		{
+			var elm = document.createElement('fakeelement');
+			if( elm.style.animationName !== undefined ) { animation = true; }    
+			
+			if( animation === false ) {
+				for( var i = 0; i < domPrefixes.length; i++ ) {
+					if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+						pfx = domPrefixes[ i ];
+						animationstring = pfx + 'Animation';
+						keyframeprefix = '-' + pfx.toLowerCase() + '-';
+						animationstartevent = startEvents[ i ];
+						animation = true;
+						break;
+					}
+				}
+			}
+		}
+		
+		var animationName = 'resizeanim';
+		var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
+		var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+	}
+	
+	function createStyles() {
+		if (!stylesCreated) {
+			//opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+			var css = (animationKeyframes ? animationKeyframes : '') +
+					'.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' +
+					'.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+				head = document.head || document.getElementsByTagName('head')[0],
+				style = document.createElement('style');
+			
+			style.type = 'text/css';
+			if (style.styleSheet) {
+				style.styleSheet.cssText = css;
+			} else {
+				style.appendChild(document.createTextNode(css));
+			}
+
+			head.appendChild(style);
+			stylesCreated = true;
+		}
+	}
+	
+	window.addResizeListener = function(element, fn){
+		if (attachEvent) element.attachEvent('onresize', fn);
+		else {
+			if (!element.__resizeTriggers__) {
+				if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
+				createStyles();
+				element.__resizeLast__ = {};
+				element.__resizeListeners__ = [];
+				(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
+				element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
+																						'<div class="contract-trigger"></div>';
+				element.appendChild(element.__resizeTriggers__);
+				resetTriggers(element);
+				element.addEventListener('scroll', scrollListener, true);
+				
+				/* Listen for a css animation to detect element display/re-attach */
+				animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
+					if(e.animationName == animationName)
+						resetTriggers(element);
+				});
+			}
+			element.__resizeListeners__.push(fn);
+		}
+	};
+	
+	window.removeResizeListener = function(element, fn){
+		if (attachEvent) element.detachEvent('onresize', fn);
+		else {
+			element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+			if (!element.__resizeListeners__.length) {
+					element.removeEventListener('scroll', scrollListener);
+					element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+			}
+		}
+	}
+})();
@@ -0,0 +1,164 @@
+/**
+* Detect Element Resize Plugin for jQuery
+*
+* https://github.com/sdecima/javascript-detect-element-resize
+* Sebastian Decima
+*
+* version: 0.5.3
+**/
+
+(function ( $ ) {
+	var attachEvent = document.attachEvent,
+		stylesCreated = false;
+	
+	var jQuery_resize = $.fn.resize;
+	
+	$.fn.resize = function(callback) {
+		return this.each(function() {
+			if(this == window)
+				jQuery_resize.call(jQuery(this), callback);
+			else
+				addResizeListener(this, callback);
+		});
+	}
+
+	$.fn.removeResize = function(callback) {
+		return this.each(function() {
+			removeResizeListener(this, callback);
+		});
+	}
+	
+	if (!attachEvent) {
+		var requestFrame = (function(){
+			var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
+								function(fn){ return window.setTimeout(fn, 20); };
+			return function(fn){ return raf(fn); };
+		})();
+		
+		var cancelFrame = (function(){
+			var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
+								   window.clearTimeout;
+		  return function(id){ return cancel(id); };
+		})();
+
+		function resetTriggers(element){
+			var triggers = element.__resizeTriggers__,
+				expand = triggers.firstElementChild,
+				contract = triggers.lastElementChild,
+				expandChild = expand.firstElementChild;
+			contract.scrollLeft = contract.scrollWidth;
+			contract.scrollTop = contract.scrollHeight;
+			expandChild.style.width = expand.offsetWidth + 1 + 'px';
+			expandChild.style.height = expand.offsetHeight + 1 + 'px';
+			expand.scrollLeft = expand.scrollWidth;
+			expand.scrollTop = expand.scrollHeight;
+		};
+
+		function checkTriggers(element){
+			return element.offsetWidth != element.__resizeLast__.width ||
+						 element.offsetHeight != element.__resizeLast__.height;
+		}
+		
+		function scrollListener(e){
+			var element = this;
+			resetTriggers(this);
+			if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
+			this.__resizeRAF__ = requestFrame(function(){
+				if (checkTriggers(element)) {
+					element.__resizeLast__.width = element.offsetWidth;
+					element.__resizeLast__.height = element.offsetHeight;
+					element.__resizeListeners__.forEach(function(fn){
+						fn.call(element, e);
+					});
+				}
+			});
+		};
+		
+		/* Detect CSS Animations support to detect element display/re-attach */
+		var animation = false,
+			animationstring = 'animation',
+			keyframeprefix = '',
+			animationstartevent = 'animationstart',
+			domPrefixes = 'Webkit Moz O ms'.split(' '),
+			startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
+			pfx  = '';
+		{
+			var elm = document.createElement('fakeelement');
+			if( elm.style.animationName !== undefined ) { animation = true; }    
+			
+			if( animation === false ) {
+				for( var i = 0; i < domPrefixes.length; i++ ) {
+					if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+						pfx = domPrefixes[ i ];
+						animationstring = pfx + 'Animation';
+						keyframeprefix = '-' + pfx.toLowerCase() + '-';
+						animationstartevent = startEvents[ i ];
+						animation = true;
+						break;
+					}
+				}
+			}
+		}
+		
+		var animationName = 'resizeanim';
+		var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
+		var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+	}
+	
+	function createStyles() {
+		if (!stylesCreated) {
+			//opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+			var css = (animationKeyframes ? animationKeyframes : '') +
+					'.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' +
+					'.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+				head = document.head || document.getElementsByTagName('head')[0],
+				style = document.createElement('style');
+			
+			style.type = 'text/css';
+			if (style.styleSheet) {
+				style.styleSheet.cssText = css;
+			} else {
+				style.appendChild(document.createTextNode(css));
+			}
+
+			head.appendChild(style);
+			stylesCreated = true;
+		}
+	}
+	
+	window.addResizeListener = function(element, fn){
+		if (attachEvent) element.attachEvent('onresize', fn);
+		else {
+			if (!element.__resizeTriggers__) {
+				if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
+				createStyles();
+				element.__resizeLast__ = {};
+				element.__resizeListeners__ = [];
+				(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
+				element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
+																						'<div class="contract-trigger"></div>';
+				element.appendChild(element.__resizeTriggers__);
+				resetTriggers(element);
+				element.addEventListener('scroll', scrollListener, true);
+				
+				/* Listen for a css animation to detect element display/re-attach */
+				animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
+					if(e.animationName == animationName)
+						resetTriggers(element);
+				});
+			}
+			element.__resizeListeners__.push(fn);
+		}
+	};
+	
+	window.removeResizeListener = function(element, fn){
+		if (attachEvent) element.detachEvent('onresize', fn);
+		else {
+			element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+			if (!element.__resizeListeners__.length) {
+					element.removeEventListener('scroll', scrollListener);
+					element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+			}
+		}
+	}
+}( jQuery ));
@@ -0,0 +1,29 @@
+{
+  "name": "javascript-detect-element-resize",
+  "version": "0.5.3",
+  "description": "A Cross-Browser, Event-based, Element Resize Detection",
+  "main": "detect-element-resize.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sdecima/javascript-detect-element-resize"
+  },
+  "keywords": [
+    "resize",
+    "events"
+  ],
+  "author": "Sebastián Décima (https://github.com/sdecima/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sdecima/javascript-detect-element-resize/issues"
+  },
+  "homepage": "https://github.com/sdecima/javascript-detect-element-resize",
+  "devDependencies": {
+    "browserify": "^6.3.3"
+  }
+}
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>javascript-detect-element-resize Tests</title>
+  <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
+  <link rel="stylesheet" href="tests.css">
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+  <script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+  <script src="../detect-element-resize.js"></script>
+  <script src="tests-javascript.js"></script>
+</body>
+</html>
@@ -0,0 +1,90 @@
+var container, element, content;
+
+QUnit.module('main', {
+  setup: function() {
+    var fixture = '<div id="test-playground"><div id="container"><div id="resizable-element"><div id="content"></div></div></div></div>';
+    $("#qunit-fixture").append(fixture);
+    
+    container = document.getElementById('container');
+    element = document.getElementById('resizable-element');
+    content = document.getElementById('content');
+
+    $('#container').hide();
+    addResizeListener(element, detectCallback);
+    $('#container').show();
+    shouldDetect = true;
+    detected = false;
+  },
+  teardown: function() {
+    $('#styleTest').remove();
+    try {
+      removeResizeListener(element, detectCallback);
+    } catch(e) {}
+  }
+});
+
+var newWidth = 0, newHeight = 0, shouldDetect = true, detected = false;
+var detectCallback = function() {
+  detected = true;
+};
+
+var validateEvent = function(assert) {
+  setTimeout(function() {
+    if(shouldDetect) {
+      assert.ok(shouldDetect === true && detected === true, 'resize event fired OK');
+    }
+    assert.ok($(content).width() == newWidth, 'Resize OK');
+    
+    QUnit.start();
+  }, 2000);
+};
+
+QUnit.asyncTest( "JS addResizeListener css resize test", function( assert ) {
+  expect( 2 );
+
+  newWidth = 100;
+
+  var myCss = '<style id="styleTest">#content {width: ' + newWidth + 'px;}</style>';
+  $('head').append(myCss);
+
+  validateEvent(assert);
+});
+
+QUnit.asyncTest( "JS addResizeListener script resize test", function( assert ) {
+  expect( 2 );
+
+  newWidth = 30;
+
+  $(content).width(newWidth);
+
+  validateEvent(assert);
+});
+
+QUnit.asyncTest( "JS addResizeListener script reattach element test", function( assert ) {
+  expect( 2 );
+  
+  var elem = $(content).detach();
+  
+  setTimeout(function() {
+    $(container).append("div").append(elem);
+    //elem.appendTo(container);
+    newWidth = 68;
+    $(content).width(newWidth);
+  }, 500);
+
+  validateEvent(assert);
+});
+
+QUnit.asyncTest( "JS removeResizeListener test", function( assert ) {
+  expect( 1 );
+  
+  newWidth = 0;
+  shouldDetect = false;
+
+  removeResizeListener(element, detectCallback);
+  
+  $(content).width(newWidth);
+  $(content).height(0);
+  
+  validateEvent(assert);
+});
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>javascript-detect-element-resize Tests</title>
+  <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
+  <link rel="stylesheet" href="tests.css">
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+  <script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+  <script src="../jquery.resize.js"></script>
+  <script src="tests-jquery.js"></script>
+</body>
+</html>
@@ -0,0 +1,90 @@
+var container, element, content;
+
+QUnit.module('main', {
+  setup: function() {
+    var fixture = '<div id="test-playground"><div id="container"><div id="resizable-element"><div id="content"></div></div></div></div>';
+    $("#qunit-fixture").append(fixture);
+    
+    container = document.getElementById('container');
+    element = document.getElementById('resizable-element');
+    content = document.getElementById('content');
+
+    $('#container').hide();
+    $(element).resize(detectCallback);
+    $('#container').show();
+    shouldDetect = true;
+    detected = false;
+  },
+  teardown: function() {
+    $('#styleTest').remove();
+    try {
+      $(element).removeResize(detectCallback);
+    } catch(e) {}
+  }
+});
+
+var newWidth = 0, newHeight = 0, shouldDetect = true, detected = false;
+var detectCallback = function() {
+  detected = true;
+};
+
+var validateEvent = function(assert) {
+  setTimeout(function() {
+    if(shouldDetect) {
+      assert.ok(shouldDetect === true && detected === true, 'resize event fired OK');
+    }
+    assert.ok($(content).width() == newWidth, 'Resize OK');
+    
+    QUnit.start();
+  }, 2000);
+};
+
+QUnit.asyncTest( "JS addResizeListener css resize test", function( assert ) {
+  expect( 2 );
+
+  newWidth = 100;
+
+  var myCss = '<style id="styleTest">#content {width: ' + newWidth + 'px;}</style>';
+  $('head').append(myCss);
+
+  validateEvent(assert);
+});
+
+QUnit.asyncTest( "JS addResizeListener script resize test", function( assert ) {
+  expect( 2 );
+
+  newWidth = 30;
+
+  $(content).width(newWidth);
+
+  validateEvent(assert);
+});
+
+QUnit.asyncTest( "JS addResizeListener script reattach element test", function( assert ) {
+  expect( 2 );
+  
+  var elem = $(content).detach();
+  
+  setTimeout(function() {
+    $(container).append("div").append(elem);
+    //elem.appendTo(container);
+    newWidth = 68;
+    $(content).width(newWidth);
+  }, 500);
+
+  validateEvent(assert);
+});
+
+QUnit.asyncTest( "JS removeResizeListener test", function( assert ) {
+  expect( 1 );
+  
+  newWidth = 0;
+  shouldDetect = false;
+  
+  $(element).removeResize(detectCallback);
+  
+  $(content).width(newWidth);
+  $(content).height(0);
+  
+  validateEvent(assert);
+});
@@ -0,0 +1,14 @@
+#container {
+	/*display: none;*/
+}
+
+#resizable-element {
+	/*display: inline-block;*/
+	float: left;
+}
+
+#content {
+	color: red;
+	width: 20px;
+	height: 15px;
+}
@@ -0,0 +1,35 @@
+{
+  "name": "underscore",
+  "version": "1.8.3",
+  "main": "underscore.js",
+  "keywords": [
+    "util",
+    "functional",
+    "server",
+    "client",
+    "browser"
+  ],
+  "ignore": [
+    "docs",
+    "test",
+    "*.yml",
+    "CNAME",
+    "index.html",
+    "favicon.ico",
+    "CONTRIBUTING.md",
+    ".*",
+    "component.json",
+    "package.json",
+    "karma.*"
+  ],
+  "homepage": "https://github.com/jashkenas/underscore",
+  "_release": "1.8.3",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.8.3",
+    "commit": "e4743ab712b8ab42ad4ccb48b155034d02394e4d"
+  },
+  "_source": "git://github.com/jashkenas/underscore.git",
+  "_target": "*",
+  "_originalSource": "underscore"
+}
@@ -0,0 +1,23 @@
+Copyright (c) 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative
+Reporters & Editors
+
+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.
@@ -0,0 +1,22 @@
+                       __
+                      /\ \                                                         __
+     __  __    ___    \_\ \     __   _ __   ____    ___    ___   _ __    __       /\_\    ____
+    /\ \/\ \ /' _ `\  /'_  \  /'__`\/\  __\/ ,__\  / ___\ / __`\/\  __\/'__`\     \/\ \  /',__\
+    \ \ \_\ \/\ \/\ \/\ \ \ \/\  __/\ \ \//\__, `\/\ \__//\ \ \ \ \ \//\  __/  __  \ \ \/\__, `\
+     \ \____/\ \_\ \_\ \___,_\ \____\\ \_\\/\____/\ \____\ \____/\ \_\\ \____\/\_\ _\ \ \/\____/
+      \/___/  \/_/\/_/\/__,_ /\/____/ \/_/ \/___/  \/____/\/___/  \/_/ \/____/\/_//\ \_\ \/___/
+                                                                                  \ \____/
+                                                                                   \/___/
+
+Underscore.js is a utility-belt library for JavaScript that provides
+support for the usual functional suspects (each, map, reduce, filter...)
+without extending any core JavaScript objects.
+
+For Docs, License, Tests, and pre-packed downloads, see:
+http://underscorejs.org
+
+Underscore is an open-sourced component of DocumentCloud:
+https://github.com/documentcloud
+
+Many thanks to our contributors:
+https://github.com/jashkenas/underscore/contributors
@@ -0,0 +1,7 @@
+{
+  "name": "underscore",
+  "version": "1.8.3",
+  "main": "underscore.js",
+  "keywords": ["util", "functional", "server", "client", "browser"],
+  "ignore" : ["docs", "test", "*.yml", "CNAME", "index.html", "favicon.ico", "CONTRIBUTING.md", ".*", "component.json", "package.json", "karma.*"]
+}
@@ -135,11 +135,11 @@
            <div class="form-group StandardOutDetails-closedToggle">
                <a class="col-sm-12 StandardOutDetails-closedToggleLink"
                    ng-show="isClosed" href="javascript:;"
-                    ng-click="toggleClosedStatus()"> more details <i class="fa fa-angle-down"></i>
+                    ng-click="toggleClosedStatus()"> more <i class="fa fa-angle-down"></i>
                </a>
                <a class="col-sm-12 StandardOutDetails-closedToggleLink"
                    ng-show="!isClosed" href="javascript:;"
-                    ng-click="toggleClosedStatus()"> less details <i class="fa fa-angle-up"></i>
+                    ng-click="toggleClosedStatus()"> less <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </div>