Skip to content

Commit 3d95636

Browse files
sdecimasdecima
committed
adding css animations and updating to v0.5.3
1 parent 9cd3d4f commit 3d95636

File tree

9 files changed

+322
-7
lines changed

9 files changed

+322
-7
lines changed

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@ Works great on:
6060
- Firefox
6161
- IE 11 and below (tested on 11, 10, 9, 8 and 7)
6262

63+
Known Issues:
64+
65+
- On IE 10 and below: If you detach the element and re-attach it, you will need to add the resize listener again.
66+
6367
Doesn't work on:
6468

6569
- ???
@@ -69,11 +73,18 @@ Please [let me know](https://github.com/sdecima/javascript-detect-element-resize
6973
TODO
7074
====
7175

76+
- 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).
7277
- Create minified version of the libraries.
7378
- Add support for standard jQuery bind method on 'resize' event.
7479

7580
Release Notes
7681
=============
82+
v0.5.3
83+
------
84+
85+
- 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)
86+
- Adding /tests/ with some general QUnit tests to help test on multiple browsers
87+
7788
v0.5.2
7889
------
7990

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "javascript-detect-element-resize",
3-
"version": "0.5.2",
3+
"version": "0.5.3",
44
"main": "detect-element-resize.js",
55
"repository": {
66
"type": "git",

‎detect-element-resize.js‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* https://github.com/sdecima/javascript-detect-element-resize
55
* Sebastian Decima
66
*
7-
* version: 0.5.2
7+
* version: 0.5.3
88
**/
99

1010
(function () {
@@ -56,12 +56,44 @@
5656
}
5757
});
5858
};
59+
60+
/* Detect CSS Animations support to detect element display/re-attach */
61+
var animation = false,
62+
animationstring = 'animation',
63+
keyframeprefix = '',
64+
animationstartevent = 'animationstart',
65+
domPrefixes = 'Webkit Moz O ms'.split(' '),
66+
startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
67+
pfx = '';
68+
{
69+
var elm = document.createElement('fakeelement');
70+
if( elm.style.animationName !== undefined ) { animation = true; }
71+
72+
if( animation === false ) {
73+
for( var i = 0; i < domPrefixes.length; i++ ) {
74+
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
75+
pfx = domPrefixes[ i ];
76+
animationstring = pfx + 'Animation';
77+
keyframeprefix = '-' + pfx.toLowerCase() + '-';
78+
animationstartevent = startEvents[ i ];
79+
animation = true;
80+
break;
81+
}
82+
}
83+
}
84+
}
85+
86+
var animationName = 'resizeanim';
87+
var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
88+
var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
5989
}
6090

6191
function createStyles() {
6292
if (!stylesCreated) {
6393
//opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
64-
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%; }',
94+
var css = (animationKeyframes ? animationKeyframes : '') +
95+
'.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' +
96+
'.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%; }',
6597
head = document.head || document.getElementsByTagName('head')[0],
6698
style = document.createElement('style');
6799

@@ -87,10 +119,16 @@
87119
element.__resizeListeners__ = [];
88120
(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
89121
element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
90-
'<div class="contract-trigger"></div>';
122+
'<div class="contract-trigger"></div>';
91123
element.appendChild(element.__resizeTriggers__);
92124
resetTriggers(element);
93125
element.addEventListener('scroll', scrollListener, true);
126+
127+
/* Listen for a css animation to detect element display/re-attach */
128+
animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
129+
if(e.animationName == animationName)
130+
resetTriggers(element);
131+
});
94132
}
95133
element.__resizeListeners__.push(fn);
96134
}

‎jquery.resize.js‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* https://github.com/sdecima/javascript-detect-element-resize
55
* Sebastian Decima
66
*
7-
* version: 0.5.2
7+
* version: 0.5.3
88
**/
99

1010
(function ( $ ) {
@@ -73,12 +73,44 @@
7373
}
7474
});
7575
};
76+
77+
/* Detect CSS Animations support to detect element display/re-attach */
78+
var animation = false,
79+
animationstring = 'animation',
80+
keyframeprefix = '',
81+
animationstartevent = 'animationstart',
82+
domPrefixes = 'Webkit Moz O ms'.split(' '),
83+
startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
84+
pfx = '';
85+
{
86+
var elm = document.createElement('fakeelement');
87+
if( elm.style.animationName !== undefined ) { animation = true; }
88+
89+
if( animation === false ) {
90+
for( var i = 0; i < domPrefixes.length; i++ ) {
91+
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
92+
pfx = domPrefixes[ i ];
93+
animationstring = pfx + 'Animation';
94+
keyframeprefix = '-' + pfx.toLowerCase() + '-';
95+
animationstartevent = startEvents[ i ];
96+
animation = true;
97+
break;
98+
}
99+
}
100+
}
101+
}
102+
103+
var animationName = 'resizeanim';
104+
var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
105+
var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
76106
}
77107

78108
function createStyles() {
79109
if (!stylesCreated) {
80110
//opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
81-
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%; }',
111+
var css = (animationKeyframes ? animationKeyframes : '') +
112+
'.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' +
113+
'.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%; }',
82114
head = document.head || document.getElementsByTagName('head')[0],
83115
style = document.createElement('style');
84116

@@ -104,10 +136,16 @@
104136
element.__resizeListeners__ = [];
105137
(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
106138
element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
107-
'<div class="contract-trigger"></div>';
139+
'<div class="contract-trigger"></div>';
108140
element.appendChild(element.__resizeTriggers__);
109141
resetTriggers(element);
110142
element.addEventListener('scroll', scrollListener, true);
143+
144+
/* Listen for a css animation to detect element display/re-attach */
145+
animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
146+
if(e.animationName == animationName)
147+
resetTriggers(element);
148+
});
111149
}
112150
element.__resizeListeners__.push(fn);
113151
}

‎tests/tests-javascript.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>javascript-detect-element-resize Tests</title>
6+
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
7+
<link rel="stylesheet" href="tests.css">
8+
</head>
9+
<body>
10+
<div id="qunit"></div>
11+
<div id="qunit-fixture"></div>
12+
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
13+
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
14+
<script src="../detect-element-resize.js"></script>
15+
<script src="tests-javascript.js"></script>
16+
</body>
17+
</html>

‎tests/tests-javascript.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
var container, element, content;
2+
3+
QUnit.module('main', {
4+
setup: function() {
5+
var fixture = '<div id="test-playground"><div id="container"><div id="resizable-element"><div id="content"></div></div></div></div>';
6+
$("#qunit-fixture").append(fixture);
7+
8+
container = document.getElementById('container');
9+
element = document.getElementById('resizable-element');
10+
content = document.getElementById('content');
11+
12+
$('#container').hide();
13+
addResizeListener(element, detectCallback);
14+
$('#container').show();
15+
shouldDetect = true;
16+
detected = false;
17+
},
18+
teardown: function() {
19+
$('#styleTest').remove();
20+
try {
21+
removeResizeListener(element, detectCallback);
22+
} catch(e) {}
23+
}
24+
});
25+
26+
var newWidth = 0, newHeight = 0, shouldDetect = true, detected = false;
27+
var detectCallback = function() {
28+
detected = true;
29+
};
30+
31+
var validateEvent = function(assert) {
32+
setTimeout(function() {
33+
if(shouldDetect) {
34+
assert.ok(shouldDetect === true && detected === true, 'resize event fired OK');
35+
}
36+
assert.ok($(content).width() == newWidth, 'Resize OK');
37+
38+
QUnit.start();
39+
}, 2000);
40+
};
41+
42+
QUnit.asyncTest( "JS addResizeListener css resize test", function( assert ) {
43+
expect( 2 );
44+
45+
newWidth = 100;
46+
47+
var myCss = '<style id="styleTest">#content {width: ' + newWidth + 'px;}</style>';
48+
$('head').append(myCss);
49+
50+
validateEvent(assert);
51+
});
52+
53+
QUnit.asyncTest( "JS addResizeListener script resize test", function( assert ) {
54+
expect( 2 );
55+
56+
newWidth = 30;
57+
58+
$(content).width(newWidth);
59+
60+
validateEvent(assert);
61+
});
62+
63+
QUnit.asyncTest( "JS addResizeListener script reattach element test", function( assert ) {
64+
expect( 2 );
65+
66+
var elem = $(content).detach();
67+
68+
setTimeout(function() {
69+
$(container).append("div").append(elem);
70+
//elem.appendTo(container);
71+
newWidth = 68;
72+
$(content).width(newWidth);
73+
}, 500);
74+
75+
validateEvent(assert);
76+
});
77+
78+
QUnit.asyncTest( "JS removeResizeListener test", function( assert ) {
79+
expect( 1 );
80+
81+
newWidth = 0;
82+
shouldDetect = false;
83+
84+
removeResizeListener(element, detectCallback);
85+
86+
$(content).width(newWidth);
87+
$(content).height(0);
88+
89+
validateEvent(assert);
90+
});

‎tests/tests-jquery.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>javascript-detect-element-resize Tests</title>
6+
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
7+
<link rel="stylesheet" href="tests.css">
8+
</head>
9+
<body>
10+
<div id="qunit"></div>
11+
<div id="qunit-fixture"></div>
12+
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
13+
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
14+
<script src="../jquery.resize.js"></script>
15+
<script src="tests-jquery.js"></script>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)