Permalink
Browse files

adding css animations and updating to v0.5.3

  • Loading branch information...
sdecima committed Oct 29, 2014
1 parent 9cd3d4f commit 3d9563692e169eb54f7c4fb96f4866aebc17cb4e
Showing with 322 additions and 7 deletions.
  1. +11 −0 README.md
  2. +1 −1 bower.json
  3. +41 −3 detect-element-resize.js
  4. +41 −3 jquery.resize.js
  5. +17 −0 tests/tests-javascript.html
  6. +90 −0 tests/tests-javascript.js
  7. +17 −0 tests/tests-jquery.html
  8. +90 −0 tests/tests-jquery.js
  9. +14 −0 tests/tests.css
View
@@ -60,6 +60,10 @@ Works great on:
- 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:
- ???
@@ -69,11 +73,18 @@ Please [let me know](https://github.com/sdecima/javascript-detect-element-resize
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
------
View
@@ -1,6 +1,6 @@
{
"name": "javascript-detect-element-resize",
"version": "0.5.2",
"version": "0.5.3",
"main": "detect-element-resize.js",
"repository": {
"type": "git",
View
@@ -4,7 +4,7 @@
* https://github.com/sdecima/javascript-detect-element-resize
* Sebastian Decima
*
* version: 0.5.2
* version: 0.5.3
**/
(function () {
@@ -56,12 +56,44 @@
}
});
};
/* 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 = '.resize-triggers { 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%; }',
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');
@@ -87,10 +119,16 @@
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>';
'<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);
}
View
@@ -4,7 +4,7 @@
* https://github.com/sdecima/javascript-detect-element-resize
* Sebastian Decima
*
* version: 0.5.2
* version: 0.5.3
**/
(function ( $ ) {
@@ -73,12 +73,44 @@
}
});
};
/* 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 = '.resize-triggers { 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%; }',
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');
@@ -104,10 +136,16 @@
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>';
'<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);
}
@@ -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>
View
@@ -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);
});
View
@@ -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>
Oops, something went wrong.

0 comments on commit 3d95636

Please sign in to comment.