158 lines
4.8 KiB
JavaScript
158 lines
4.8 KiB
JavaScript
var SingleEmitter = require('./SingleEmitter');
|
|
var h = require('./h');
|
|
var $event = require('./$event');
|
|
var $css = require('./$css');
|
|
var contain = require('./contain');
|
|
var extend = require('./extend');
|
|
var root = require('./root');
|
|
if (root.ResizeObserver && !false) {
|
|
exports = SingleEmitter.extend({
|
|
initialize: function ResizeSensor(el) {
|
|
var _this = this;
|
|
if (el._resizeSensor) {
|
|
return el._resizeSensor;
|
|
}
|
|
this.callSuper(SingleEmitter, 'initialize');
|
|
var resizeObserver = new root.ResizeObserver(function() {
|
|
return _this.emit();
|
|
});
|
|
resizeObserver.observe(el);
|
|
el._resizeSensor = this;
|
|
this._resizeObserver = resizeObserver;
|
|
this._el = el;
|
|
},
|
|
destroy: function() {
|
|
var el = this._el;
|
|
if (!el._resizeSensor) {
|
|
return;
|
|
}
|
|
this.rmAllListeners();
|
|
delete el._resizeSensor;
|
|
this._resizeObserver.unobserve(el);
|
|
}
|
|
});
|
|
} else {
|
|
exports = SingleEmitter.extend({
|
|
initialize: function ResizeSensor(el) {
|
|
if (el._resizeSensor) {
|
|
return el._resizeSensor;
|
|
}
|
|
this.callSuper(SingleEmitter, 'initialize');
|
|
this._el = el;
|
|
el._resizeSensor = this;
|
|
if (
|
|
!contain(
|
|
['absolute', 'relative', 'fixed', 'sticky'],
|
|
$css(el, 'position')
|
|
)
|
|
) {
|
|
$css(el, 'position', 'relative');
|
|
}
|
|
this._appendResizeSensor();
|
|
this._bindEvent();
|
|
},
|
|
destroy: function() {
|
|
var el = this._el;
|
|
if (!el._resizeSensor) {
|
|
return;
|
|
}
|
|
this.rmAllListeners();
|
|
delete el._resizeSensor;
|
|
el.removeChild(this._resizeSensorEl);
|
|
},
|
|
_appendResizeSensor: function() {
|
|
var el = this._el;
|
|
var style = {
|
|
pointerEvents: 'none',
|
|
position: 'absolute',
|
|
left: '0px',
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
overflow: 'hidden',
|
|
zIndex: '-1',
|
|
visibility: 'hidden',
|
|
maxWidth: '100%'
|
|
};
|
|
var styleChild = {
|
|
position: 'absolute',
|
|
left: '0px',
|
|
top: '0px',
|
|
transition: '0s'
|
|
};
|
|
var expandChildEl = h('div', {
|
|
style: styleChild
|
|
});
|
|
var expandEl = h(
|
|
'div.resize-sensor-expand',
|
|
{
|
|
style: style
|
|
},
|
|
expandChildEl
|
|
);
|
|
var shrinkEl = h(
|
|
'div.resize-sensor-shrink',
|
|
{
|
|
style: style
|
|
},
|
|
h('div', {
|
|
style: extend(
|
|
{
|
|
width: '200%',
|
|
height: '200%'
|
|
},
|
|
styleChild
|
|
)
|
|
})
|
|
);
|
|
var resizeSensorEl = h(
|
|
'div.resize-sensor',
|
|
{
|
|
dir: 'ltr',
|
|
style: style
|
|
},
|
|
expandEl,
|
|
shrinkEl
|
|
);
|
|
this._expandEl = expandEl;
|
|
this._expandChildEl = expandChildEl;
|
|
this._shrinkEl = shrinkEl;
|
|
this._resizeSensorEl = resizeSensorEl;
|
|
el.appendChild(resizeSensorEl);
|
|
this._resetExpandShrink();
|
|
},
|
|
_bindEvent: function() {
|
|
var _this2 = this;
|
|
$event.on(this._expandEl, 'scroll', function() {
|
|
return _this2._onScroll();
|
|
});
|
|
$event.on(this._shrinkEl, 'scroll', function() {
|
|
return _this2._onScroll();
|
|
});
|
|
},
|
|
_onScroll: function() {
|
|
this.emit();
|
|
this._resetExpandShrink();
|
|
},
|
|
_resetExpandShrink: function() {
|
|
var el = this._el;
|
|
var width = el.offsetWidth;
|
|
var height = el.offsetHeight;
|
|
$css(this._expandChildEl, {
|
|
width: width + 10,
|
|
height: height + 10
|
|
});
|
|
extend(this._expandEl, {
|
|
scrollLeft: width + 10,
|
|
scrollTop: height + 10
|
|
});
|
|
extend(this._shrinkEl, {
|
|
scrollLeft: width + 10,
|
|
scrollTop: height + 10
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
module.exports = exports;
|