mirror of
https://github.com/mindoc-org/mindoc.git
synced 2026-02-27 17:03:57 +08:00
*
This commit is contained in:
189
static/element-ui/lib/utils/resize-event.js
Normal file
189
static/element-ui/lib/utils/resize-event.js
Normal file
@@ -0,0 +1,189 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
/* Modified from https://github.com/sdecima/javascript-detect-element-resize
|
||||
* version: 0.5.3
|
||||
*
|
||||
* 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.
|
||||
*
|
||||
*/
|
||||
var isServer = typeof window === 'undefined';
|
||||
|
||||
/* istanbul ignore next */
|
||||
var requestFrame = function () {
|
||||
if (isServer) return;
|
||||
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (fn) {
|
||||
return window.setTimeout(fn, 20);
|
||||
};
|
||||
return function (fn) {
|
||||
return raf(fn);
|
||||
};
|
||||
}();
|
||||
|
||||
/* istanbul ignore next */
|
||||
var cancelFrame = function () {
|
||||
if (isServer) return;
|
||||
var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;
|
||||
return function (id) {
|
||||
return cancel(id);
|
||||
};
|
||||
}();
|
||||
|
||||
/* istanbul ignore next */
|
||||
var resetTrigger = function resetTrigger(element) {
|
||||
var trigger = element.__resizeTrigger__;
|
||||
var expand = trigger.firstElementChild;
|
||||
var contract = trigger.lastElementChild;
|
||||
var 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;
|
||||
};
|
||||
|
||||
/* istanbul ignore next */
|
||||
var checkTriggers = function checkTriggers(element) {
|
||||
return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
|
||||
};
|
||||
|
||||
/* istanbul ignore next */
|
||||
var scrollListener = function scrollListener(event) {
|
||||
var _this = this;
|
||||
|
||||
resetTrigger(this);
|
||||
if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
|
||||
this.__resizeRAF__ = requestFrame(function () {
|
||||
if (checkTriggers(_this)) {
|
||||
_this.__resizeLast__.width = _this.offsetWidth;
|
||||
_this.__resizeLast__.height = _this.offsetHeight;
|
||||
_this.__resizeListeners__.forEach(function (fn) {
|
||||
fn.call(_this, event);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* Detect CSS Animations support to detect element display/re-attach */
|
||||
var attachEvent = isServer ? {} : document.attachEvent;
|
||||
var DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
|
||||
var START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
|
||||
var RESIZE_ANIMATION_NAME = 'resizeanim';
|
||||
var animation = false;
|
||||
var keyFramePrefix = '';
|
||||
var animationStartEvent = 'animationstart';
|
||||
|
||||
/* istanbul ignore next */
|
||||
if (!attachEvent && !isServer) {
|
||||
var testElement = document.createElement('fakeelement');
|
||||
if (testElement.style.animationName !== undefined) {
|
||||
animation = true;
|
||||
}
|
||||
|
||||
if (animation === false) {
|
||||
var prefix = '';
|
||||
for (var i = 0; i < DOM_PREFIXES.length; i++) {
|
||||
if (testElement.style[DOM_PREFIXES[i] + 'AnimationName'] !== undefined) {
|
||||
prefix = DOM_PREFIXES[i];
|
||||
keyFramePrefix = '-' + prefix.toLowerCase() + '-';
|
||||
animationStartEvent = START_EVENTS[i];
|
||||
animation = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var stylesCreated = false;
|
||||
/* istanbul ignore next */
|
||||
var createStyles = function createStyles() {
|
||||
if (!stylesCreated && !isServer) {
|
||||
var animationKeyframes = '@' + keyFramePrefix + 'keyframes ' + RESIZE_ANIMATION_NAME + ' { from { opacity: 0; } to { opacity: 0; } } ';
|
||||
var animationStyle = keyFramePrefix + 'animation: 1ms ' + RESIZE_ANIMATION_NAME + ';';
|
||||
|
||||
// opacity: 0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
|
||||
var css = animationKeyframes + '\n .resize-triggers { ' + animationStyle + ' visibility: hidden; opacity: 0; }\n .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; }\n .resize-triggers > div { background: #eee; overflow: auto; }\n .contract-trigger:before { width: 200%; height: 200%; }';
|
||||
|
||||
var head = document.head || document.getElementsByTagName('head')[0];
|
||||
var 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;
|
||||
}
|
||||
};
|
||||
|
||||
/* istanbul ignore next */
|
||||
var addResizeListener = exports.addResizeListener = function addResizeListener(element, fn) {
|
||||
if (isServer) return;
|
||||
if (attachEvent) {
|
||||
element.attachEvent('onresize', fn);
|
||||
} else {
|
||||
if (!element.__resizeTrigger__) {
|
||||
if (getComputedStyle(element).position === 'static') {
|
||||
element.style.position = 'relative';
|
||||
}
|
||||
createStyles();
|
||||
element.__resizeLast__ = {};
|
||||
element.__resizeListeners__ = [];
|
||||
|
||||
var resizeTrigger = element.__resizeTrigger__ = document.createElement('div');
|
||||
resizeTrigger.className = 'resize-triggers';
|
||||
resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
|
||||
element.appendChild(resizeTrigger);
|
||||
|
||||
resetTrigger(element);
|
||||
element.addEventListener('scroll', scrollListener, true);
|
||||
|
||||
/* Listen for a css animation to detect element display/re-attach */
|
||||
if (animationStartEvent) {
|
||||
resizeTrigger.addEventListener(animationStartEvent, function (event) {
|
||||
if (event.animationName === RESIZE_ANIMATION_NAME) {
|
||||
resetTrigger(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
element.__resizeListeners__.push(fn);
|
||||
}
|
||||
};
|
||||
|
||||
/* istanbul ignore next */
|
||||
var removeResizeListener = exports.removeResizeListener = function removeResizeListener(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.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user