Skip to content

Commit 7ebfe8f

Browse files
author
Marc J. Schmidt
committed
Updated lib versions to newest master branch
1 parent e633604 commit 7ebfe8f

File tree

2 files changed

+102
-99
lines changed

2 files changed

+102
-99
lines changed

‎javascripts/ElementQueries.js

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
3+
* directory of this distribution and at
4+
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
5+
*/
16
;
27
(function() {
38
/**
@@ -21,7 +26,7 @@
2126

2227
/**
2328
*
24-
* @copyright https://github.com/Mr0grog/element-query
29+
* @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE
2530
*
2631
* @param element
2732
* @param value
@@ -65,15 +70,16 @@
6570
*/
6671
function SetupInformation(element) {
6772
this.element = element;
68-
this.options = [];
69-
var i, j, option, width = 0, height = 0, value, actualValue, attrValues, attrValue, attrName;
73+
this.options = {};
74+
var key, option, width = 0, height = 0, value, actualValue, attrValues, attrValue, attrName;
7075

7176
/**
72-
* @param option {mode: 'min|max', property: 'width|height', value: '123px'}
77+
* @param {Object} option {mode: 'min|max', property: 'width|height', value: '123px'}
7378
*/
7479
this.addOption = function(option) {
75-
this.options.push(option);
76-
}
80+
var idx = [option.mode, option.property, option.value].join(',');
81+
this.options[idx] = option;
82+
};
7783

7884
var attributes = ['min-width', 'min-height', 'max-width', 'max-height'];
7985

@@ -87,8 +93,12 @@
8793

8894
attrValues = {};
8995

90-
for (i = 0, j = this.options.length; i < j; i++) {
91-
option = this.options[i];
96+
for (key in this.options) {
97+
if (!this.options.hasOwnProperty(key)){
98+
continue;
99+
}
100+
option = this.options[key];
101+
92102
value = convertToPx(this.element, option.value);
93103

94104
actualValue = option.property == 'width' ? width : height;
@@ -143,9 +153,10 @@
143153
* @param {String} value
144154
*/
145155
function queueQuery(selector, mode, property, value) {
146-
var query = document.querySelectorAll;
147-
if ('undefined' !== typeof $$) query = $$;
148-
if ('undefined' !== typeof jQuery) query = jQuery;
156+
var query;
157+
if (document.querySelectorAll) query = document.querySelectorAll.bind(document);
158+
if (!query && 'undefined' !== typeof $$) query = $$;
159+
if (!query && 'undefined' !== typeof jQuery) query = jQuery;
149160

150161
if (!query) {
151162
throw 'No document.querySelectorAll, jQuery or Mootools\'s $$ found.';
@@ -193,7 +204,9 @@
193204
for (var i = 0, j = rules.length; i < j; i++) {
194205
if (1 === rules[i].type) {
195206
selector = rules[i].selectorText || rules[i].cssText;
196-
if (-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('max-width')) {
207+
if (-1 !== selector.indexOf('min-height') || -1 !== selector.indexOf('max-height')) {
208+
extractQuery(selector);
209+
}else if(-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('max-width')) {
197210
extractQuery(selector);
198211
}
199212
} else if (4 === rules[i].type) {
@@ -210,11 +223,18 @@
210223
for (var i = 0, j = document.styleSheets.length; i < j; i++) {
211224
readRules(document.styleSheets[i].cssText || document.styleSheets[i].cssRules || document.styleSheets[i].rules);
212225
}
213-
}
214-
}
226+
};
227+
228+
this.update = function() {
229+
this.init();
230+
};
231+
};
215232

216233
function init() {
217-
new ElementQueries().init();
234+
ElementQueries.instance = new ElementQueries().init();
235+
ElementQueries.update = function() {
236+
ElementQueries.instance.update();
237+
}
218238
}
219239

220240
if (window.addEventListener) {

‎javascripts/ResizeSensor.js

Lines changed: 67 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
;(function() {
1+
/**
2+
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
3+
* directory of this distribution and at
4+
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
5+
*/
6+
;
7+
(function() {
28

39
/**
410
* Class for dimension change detection.
@@ -9,28 +15,6 @@
915
* @constructor
1016
*/
1117
this.ResizeSensor = function(element, callback) {
12-
/**
13-
* Adds a listener to the over/under-flow event.
14-
*
15-
* @param {HTMLElement} element
16-
* @param {Function} callback
17-
*/
18-
function addResizeListener(element, callback) {
19-
if (window.OverflowEvent) {
20-
//webkit
21-
element.addEventListener('overflowchanged', function(e) {
22-
callback.call(this, e);
23-
});
24-
} else {
25-
element.addEventListener('overflow', function(e) {
26-
callback.call(this, e);
27-
});
28-
element.addEventListener('underflow', function(e) {
29-
callback.call(this, e);
30-
});
31-
}
32-
}
33-
3418
/**
3519
*
3620
* @constructor
@@ -78,71 +62,70 @@
7862
return;
7963
}
8064

81-
if ('onresize' in element && 11 > document.documentMode) {
82-
//internet explorer up to 10
83-
if (element.attachEvent) {
84-
element.attachEvent('onresize', function() {
85-
element.resizedAttached.call();
86-
});
87-
} else if (element.addEventListener) {
88-
element.addEventListener('resize', function(){
89-
element.resizedAttached.call();
90-
});
91-
}
92-
} else {
93-
var myResized = function() {
94-
if (setupSensor()) {
95-
element.resizedAttached.call();
96-
}
97-
};
98-
element.resizeSensor = document.createElement('div');
99-
element.resizeSensor.className = 'resize-sensor';
100-
var style =
101-
'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1;';
102-
element.resizeSensor.style.cssText = style;
103-
element.resizeSensor.innerHTML =
104-
'<div class="resize-sensor-overflow" style="' + style + '">' +
105-
'<div></div>' +
106-
'</div>' +
107-
'<div class="resize-sensor-underflow" style="' + style + '">' +
108-
'<div></div>' +
109-
'</div>';
110-
element.appendChild(element.resizeSensor);
111-
112-
if ('absolute' !== getComputedStyle(element, 'position')) {
113-
element.style.position = 'relative';
65+
element.resizeSensor = document.createElement('div');
66+
element.resizeSensor.className = 'resize-sensor';
67+
var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;';
68+
var styleChild = 'position: absolute; left: 0; top: 0;';
69+
70+
element.resizeSensor.style.cssText = style;
71+
element.resizeSensor.innerHTML =
72+
'<div class="resize-sensor-expand" style="' + style + '">' +
73+
'<div style="' + styleChild + '"></div>' +
74+
'</div>' +
75+
'<div class="resize-sensor-shrink" style="' + style + '">' +
76+
'<div style="' + styleChild + ' width: 200%; height: 200%"></div>' +
77+
'</div>';
78+
element.appendChild(element.resizeSensor);
79+
80+
if ('absolute' !== getComputedStyle(element, 'position')) {
81+
element.style.position = 'relative';
82+
}
83+
84+
var expand = element.resizeSensor.childNodes[0];
85+
var expandChild = expand.childNodes[0];
86+
var shrink = element.resizeSensor.childNodes[1];
87+
var shrinkChild = shrink.childNodes[0];
88+
89+
var lastWidth, lastHeight;
90+
91+
var reset = function() {
92+
expandChild.style.width = expand.offsetWidth + 10 + 'px';
93+
expandChild.style.height = expand.offsetHeight + 10 + 'px';
94+
expand.scrollLeft = expand.scrollWidth;
95+
expand.scrollTop = expand.scrollHeight;
96+
shrink.scrollLeft = shrink.scrollWidth;
97+
shrink.scrollTop = shrink.scrollHeight;
98+
lastWidth = element.offsetWidth;
99+
lastHeight = element.offsetHeight;
100+
};
101+
102+
reset();
103+
104+
var changed = function() {
105+
element.resizedAttached.call();
106+
};
107+
108+
var addEvent = function(el, name, cb) {
109+
if (el.attachEvent) {
110+
el.attachEvent('on' + name, cb);
111+
} else {
112+
el.addEventListener(name, cb);
114113
}
114+
};
115115

116-
var x = 0,
117-
y = 0,
118-
firstStyle = element.resizeSensor.firstElementChild.firstChild.style,
119-
lastStyle = element.resizeSensor.lastElementChild.firstChild.style;
120-
121-
function setupSensor() {
122-
var change = false,
123-
width = element.resizeSensor.offsetWidth,
124-
height = element.resizeSensor.offsetHeight;
125-
126-
if (x != width) {
127-
firstStyle.width = (width - 1) + 'px';
128-
lastStyle.width = (width + 1) + 'px';
129-
change = true;
130-
x = width;
131-
}
132-
if (y != height) {
133-
firstStyle.height = (height - 1) + 'px';
134-
lastStyle.height = (height + 1) + 'px';
135-
change = true;
136-
y = height;
137-
}
138-
return change;
116+
addEvent(expand, 'scroll', function() {
117+
if (element.offsetWidth > lastWidth || element.offsetHeight > lastHeight) {
118+
changed();
139119
}
120+
reset();
121+
});
140122

141-
setupSensor();
142-
addResizeListener(element.resizeSensor, myResized);
143-
addResizeListener(element.resizeSensor.firstElementChild, myResized);
144-
addResizeListener(element.resizeSensor.lastElementChild, myResized);
145-
}
123+
addEvent(shrink, 'scroll',function() {
124+
if (element.offsetWidth < lastWidth || element.offsetHeight < lastHeight) {
125+
changed();
126+
}
127+
reset();
128+
});
146129
}
147130

148131
if ('array' === typeof element

0 commit comments

Comments
 (0)