feat: use rollup to build component
This commit is contained in:
陈嘉涵
@@ -1,22 +0,0 @@
|
||||
/**
|
||||
* 根据父组件名找到对应`parent`
|
||||
*/
|
||||
export default {
|
||||
methods: {
|
||||
findParentByComponentName(name) {
|
||||
if (this.parentGroup) return;
|
||||
|
||||
let parent = this.$parent;
|
||||
while (parent) {
|
||||
if (parent.$options.name === name) {
|
||||
this.parentGroup = parent;
|
||||
break;
|
||||
} else {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
}
|
||||
|
||||
return this.parentGroup;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,184 +0,0 @@
|
||||
import merge from 'src/utils/merge';
|
||||
import PopupManager from './popup-manager';
|
||||
import PopupContext from './popup-context';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
/**
|
||||
* popup当前显示状态
|
||||
*/
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 是否显示遮罩层
|
||||
*/
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 点击遮罩层是否关闭popup
|
||||
*/
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zIndex: [String, Number],
|
||||
/**
|
||||
* popup滚动时是否body内容也滚动
|
||||
* 默认为不滚动
|
||||
*/
|
||||
lockOnScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
if (this.opening) return;
|
||||
this.open();
|
||||
} else {
|
||||
if (this.closing) return;
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this._popupId = 'popup-' + PopupContext.plusKeyByOne('idSeed');
|
||||
PopupManager.register(this._popupId, this);
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
opening: false,
|
||||
opened: false,
|
||||
closing: false,
|
||||
bodyOverflow: null,
|
||||
pos: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
recordPosition(e) {
|
||||
this.pos = {
|
||||
x: e.touches[0].clientX,
|
||||
y: e.touches[0].clientY
|
||||
};
|
||||
},
|
||||
watchTouchMove(e) {
|
||||
const pos = this.pos;
|
||||
const dx = e.touches[0].clientX - pos.x;
|
||||
const dy = e.touches[0].clientY - pos.y;
|
||||
const direction = dy > 0 ? '10' : '01';
|
||||
const el = this.$el.querySelector('.scroller') || this.$el;
|
||||
const scrollTop = el.scrollTop;
|
||||
const scrollHeight = el.scrollHeight;
|
||||
const offsetHeight = el.offsetHeight;
|
||||
const isVertical = Math.abs(dx) < Math.abs(dy);
|
||||
|
||||
let status = '11';
|
||||
|
||||
if (scrollTop === 0) {
|
||||
status = offsetHeight >= scrollHeight ? '00' : '01';
|
||||
} else if (scrollTop + offsetHeight >= scrollHeight) {
|
||||
status = '10';
|
||||
}
|
||||
|
||||
if (status !== '11' && isVertical && !(parseInt(status, 2) & parseInt(direction, 2))) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 显示popup
|
||||
*/
|
||||
open() {
|
||||
if (this.$isServer) return;
|
||||
if (this.opened) return;
|
||||
|
||||
this.opening = true;
|
||||
|
||||
this.$emit('input', true);
|
||||
|
||||
const zIndex = this.zIndex;
|
||||
|
||||
// 如果属性中传入了`zIndex`，则覆盖`popupContext`中对应的`zIndex`
|
||||
if (zIndex) {
|
||||
PopupContext.setContext('zIndex', zIndex);
|
||||
}
|
||||
|
||||
// 如果显示遮罩层
|
||||
if (this.overlay) {
|
||||
if (this.closing) {
|
||||
PopupManager.closeModal(this._popupId);
|
||||
this.closing = false;
|
||||
}
|
||||
PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.$el);
|
||||
|
||||
// 如果滚动时需要锁定
|
||||
if (this.lockOnScroll) {
|
||||
// 将原来的`bodyOverflow`存起来
|
||||
if (!this.bodyOverflow) {
|
||||
this.bodyOverflow = document.body.style.overflow;
|
||||
}
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
this.$el.style.zIndex = PopupManager.nextZIndex();
|
||||
this.opened = true;
|
||||
this.opening = false;
|
||||
document.addEventListener('touchstart', this.recordPosition, false);
|
||||
document.addEventListener('touchmove', this.watchTouchMove, false);
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭popup
|
||||
*/
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.$emit('input', false);
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.overlay && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
},
|
||||
|
||||
doAfterClose() {
|
||||
this.closing = false;
|
||||
PopupManager.closeModal(this._popupId);
|
||||
document.removeEventListener('touchstart', this.recordPosition, false);
|
||||
document.removeEventListener('touchmove', this.watchTouchMove, false);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
PopupManager.deregister(this._popupId);
|
||||
PopupManager.closeModal(this._popupId);
|
||||
|
||||
if (this.overlay && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import merge from 'src/utils/merge';
|
||||
import Vue from 'vue';
|
||||
|
||||
let context;
|
||||
const _global = Vue.prototype.$isServer ? global : window;
|
||||
|
||||
if (_global && _global.popupContext) {
|
||||
context = _global.popupContext;
|
||||
}
|
||||
|
||||
const DEFAULT_CONTEXT = {
|
||||
idSeed: 1,
|
||||
zIndex: 2000,
|
||||
hasModal: false,
|
||||
instances: {},
|
||||
modalStack: []
|
||||
};
|
||||
|
||||
context = _global.popupContext = merge({}, DEFAULT_CONTEXT, context);
|
||||
|
||||
const PopupContext = {
|
||||
getContext(key) {
|
||||
return context[key];
|
||||
},
|
||||
|
||||
setContext(key, value) {
|
||||
context[key] = value;
|
||||
},
|
||||
|
||||
plusKeyByOne(key) {
|
||||
const oldVal = +context[key];
|
||||
context[key] = oldVal + 1;
|
||||
|
||||
return oldVal;
|
||||
}
|
||||
};
|
||||
|
||||
export default PopupContext;
|
||||
@@ -1,135 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import { addClass } from 'src/utils/dom';
|
||||
import PopupContext from './popup-context';
|
||||
|
||||
const getModal = function() {
|
||||
if (Vue.prototype.$isServer) return;
|
||||
let modalDom = PopupContext.getContext('modalDom');
|
||||
|
||||
if (modalDom) {
|
||||
PopupContext.setContext('hasModal', true);
|
||||
} else {
|
||||
PopupContext.setContext('hasModal', false);
|
||||
|
||||
modalDom = document.createElement('div');
|
||||
PopupContext.setContext('modalDom', modalDom);
|
||||
|
||||
modalDom.addEventListener('touchmove', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
modalDom.addEventListener('click', function() {
|
||||
PopupManager.handleOverlayClick && PopupManager.handleOverlayClick();
|
||||
});
|
||||
}
|
||||
|
||||
return modalDom;
|
||||
};
|
||||
|
||||
const PopupManager = {
|
||||
nextZIndex() {
|
||||
return PopupContext.plusKeyByOne('zIndex');
|
||||
},
|
||||
|
||||
getInstance(id) {
|
||||
return PopupContext.getContext('instances')[id];
|
||||
},
|
||||
|
||||
register(id, instance) {
|
||||
if (id && instance) {
|
||||
const instances = PopupContext.getContext('instances');
|
||||
instances[id] = instance;
|
||||
}
|
||||
},
|
||||
|
||||
deregister(id) {
|
||||
if (id) {
|
||||
const instances = PopupContext.getContext('instances');
|
||||
instances[id] = null;
|
||||
delete instances[id];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 遮罩层点击回调，`closeOnClickOverlay`为`true`时会关闭当前`popup`
|
||||
*/
|
||||
handleOverlayClick() {
|
||||
const modalStack = PopupContext.getContext('modalStack');
|
||||
const topModal = modalStack[modalStack.length - 1];
|
||||
if (!topModal) return;
|
||||
|
||||
const instance = PopupManager.getInstance(topModal.id);
|
||||
if (instance && instance.closeOnClickOverlay) {
|
||||
instance.close();
|
||||
}
|
||||
},
|
||||
|
||||
openModal(id, zIndex, dom) {
|
||||
if (!id || zIndex === undefined) return;
|
||||
|
||||
const modalStack = PopupContext.getContext('modalStack');
|
||||
|
||||
for (let i = 0, len = modalStack.length; i < len; i++) {
|
||||
const item = modalStack[i];
|
||||
if (item.id === id) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const modalDom = getModal();
|
||||
|
||||
addClass(modalDom, 'van-modal');
|
||||
|
||||
let domParentNode;
|
||||
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
||||
domParentNode = dom.parentNode
|
||||
} else {
|
||||
domParentNode = document.body;
|
||||
}
|
||||
domParentNode.appendChild(modalDom);
|
||||
|
||||
if (zIndex) {
|
||||
modalDom.style.zIndex = zIndex;
|
||||
}
|
||||
modalDom.style.display = '';
|
||||
|
||||
modalStack.push({ id: id, zIndex: zIndex, parentNode: domParentNode });
|
||||
},
|
||||
|
||||
closeModal(id) {
|
||||
const modalStack = PopupContext.getContext('modalStack');
|
||||
const modalDom = getModal();
|
||||
|
||||
if (modalStack.length > 0) {
|
||||
const topItem = modalStack[modalStack.length - 1];
|
||||
if (topItem.id === id) {
|
||||
modalStack.pop();
|
||||
if (modalStack.length > 0) {
|
||||
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
|
||||
modalDom.parentNode.removeChild(modalDom);
|
||||
const currModalParent = modalStack[0].parentNode;
|
||||
currModalParent && currModalParent.appendChild(modalDom);
|
||||
}
|
||||
} else {
|
||||
for (let i = modalStack.length - 1; i >= 0; i--) {
|
||||
if (modalStack[i].id === id) {
|
||||
modalStack.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (modalStack.length === 0) {
|
||||
setTimeout(() => {
|
||||
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
|
||||
|
||||
modalDom.style.display = 'none';
|
||||
this.modalDom = null;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default PopupManager;
|
||||
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* v-clickoutside
|
||||
* @desc 点击元素外面才会触发的事件
|
||||
* @example
|
||||
* ```vue
|
||||
* <div v-clickoutside="handleClose">
|
||||
* ```
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
const isServer = Vue.prototype.$isServer;
|
||||
const clickoutsideContext = '@@clickoutsideContext';
|
||||
|
||||
export default {
|
||||
bind(el, binding, vnode) {
|
||||
const documentHandler = function(e) {
|
||||
if (vnode.context && !el.contains(e.target)) {
|
||||
vnode.context[el[clickoutsideContext].methodName]();
|
||||
}
|
||||
};
|
||||
el[clickoutsideContext] = {
|
||||
documentHandler,
|
||||
methodName: binding.expression,
|
||||
arg: binding.arg || 'click'
|
||||
};
|
||||
!isServer && document.addEventListener(el[clickoutsideContext].arg, documentHandler);
|
||||
},
|
||||
|
||||
update(el, binding) {
|
||||
el[clickoutsideContext].methodName = binding.expression;
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
!isServer && document.removeEventListener(
|
||||
el[clickoutsideContext].arg,
|
||||
el[clickoutsideContext].documentHandler);
|
||||
},
|
||||
|
||||
install(Vue) {
|
||||
Vue.directive('clickoutside', {
|
||||
bind: this.bind,
|
||||
unbind: this.unbind
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -1,101 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
const isServer = Vue.prototype.$isServer;
|
||||
|
||||
const trim = function(string) {
|
||||
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
||||
};
|
||||
|
||||
export function hasClass(el, cls) {
|
||||
if (!el || !cls) return false;
|
||||
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
|
||||
if (el.classList) {
|
||||
return el.classList.contains(cls);
|
||||
} else {
|
||||
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
||||
}
|
||||
};
|
||||
|
||||
export function addClass(el, cls) {
|
||||
if (!el) return;
|
||||
var curClass = el.className;
|
||||
var classes = (cls || '').split(' ');
|
||||
|
||||
for (var i = 0, j = classes.length; i < j; i++) {
|
||||
var clsName = classes[i];
|
||||
if (!clsName) continue;
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.add(clsName);
|
||||
} else {
|
||||
if (!hasClass(el, clsName)) {
|
||||
curClass += ' ' + clsName;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!el.classList) {
|
||||
el.className = curClass;
|
||||
}
|
||||
};
|
||||
|
||||
export function removeClass(el, cls) {
|
||||
if (!el || !cls) return;
|
||||
var classes = cls.split(' ');
|
||||
var curClass = ' ' + el.className + ' ';
|
||||
|
||||
for (var i = 0, j = classes.length; i < j; i++) {
|
||||
var clsName = classes[i];
|
||||
if (!clsName) continue;
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.remove(clsName);
|
||||
} else {
|
||||
if (hasClass(el, clsName)) {
|
||||
curClass = curClass.replace(' ' + clsName + ' ', ' ');
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!el.classList) {
|
||||
el.className = trim(curClass);
|
||||
}
|
||||
};
|
||||
export const once = function(el, event, fn) {
|
||||
var listener = function() {
|
||||
if (fn) {
|
||||
fn.apply(this, arguments);
|
||||
}
|
||||
off(el, event, listener);
|
||||
};
|
||||
on(el, event, listener);
|
||||
};
|
||||
|
||||
export const on = (function() {
|
||||
if (!isServer && document.addEventListener) {
|
||||
return function(element, event, handler) {
|
||||
if (element && event && handler) {
|
||||
element.addEventListener(event, handler, false);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return function(element, event, handler) {
|
||||
if (element && event && handler) {
|
||||
element.attachEvent('on' + event, handler);
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
export const off = (function() {
|
||||
if (!isServer && document.removeEventListener) {
|
||||
return function(element, event, handler) {
|
||||
if (element && event) {
|
||||
element.removeEventListener(event, handler, false);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return function(element, event, handler) {
|
||||
if (element && event) {
|
||||
element.detachEvent('on' + event, handler);
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
@@ -1,15 +0,0 @@
|
||||
export default function(target, ...sources) {
|
||||
for (let i = 0; i < sources.length; i++) {
|
||||
const source = sources[i] || {};
|
||||
for (const prop in source) {
|
||||
if (source.hasOwnProperty(prop)) {
|
||||
const value = source[prop];
|
||||
if (value !== undefined) {
|
||||
target[prop] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
@@ -1,82 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
export default {
|
||||
debounce(func, wait, immediate) {
|
||||
var timeout, args, context, timestamp, result;
|
||||
return function() {
|
||||
context = this;
|
||||
args = arguments;
|
||||
timestamp = new Date();
|
||||
var later = function() {
|
||||
var last = (new Date()) - timestamp;
|
||||
if (last < wait) {
|
||||
timeout = setTimeout(later, wait - last);
|
||||
} else {
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
}
|
||||
};
|
||||
if (!timeout) {
|
||||
timeout = setTimeout(later, wait);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
},
|
||||
|
||||
// 找到最近的触发滚动事件的元素
|
||||
getScrollEventTarget(element) {
|
||||
var currentNode = element;
|
||||
// bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
|
||||
while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
|
||||
var overflowY = this.getComputedStyle(currentNode).overflowY;
|
||||
if (overflowY === 'scroll' || overflowY === 'auto') {
|
||||
return currentNode;
|
||||
}
|
||||
currentNode = currentNode.parentNode;
|
||||
}
|
||||
return window;
|
||||
},
|
||||
|
||||
// 判断元素是否被加入到页面节点内
|
||||
isAttached(element) {
|
||||
var currentNode = element.parentNode;
|
||||
while (currentNode) {
|
||||
if (currentNode.tagName === 'HTML') {
|
||||
return true;
|
||||
}
|
||||
if (currentNode.nodeType === 11) {
|
||||
return false;
|
||||
}
|
||||
currentNode = currentNode.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 获取滚动高度
|
||||
getScrollTop(element) {
|
||||
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
||||
},
|
||||
|
||||
// 设置滚动高度
|
||||
setScrollTop(element, value) {
|
||||
'scrollTop' in element ? element.scrollTop = value : element.scrollTo(element.scrollX, value);
|
||||
},
|
||||
|
||||
// 获取元素距离顶部高度
|
||||
getElementTop(element) {
|
||||
if (element === window) {
|
||||
return this.getScrollTop(window);
|
||||
}
|
||||
return element.getBoundingClientRect().top + this.getScrollTop(window);
|
||||
},
|
||||
|
||||
getVisibleHeight(element) {
|
||||
if (element === window) {
|
||||
return element.innerHeight;
|
||||
}
|
||||
|
||||
return element.getBoundingClientRect().height;
|
||||
},
|
||||
|
||||
getComputedStyle: !Vue.prototype.$isServer && document.defaultView.getComputedStyle.bind(document.defaultView)
|
||||
};
|
||||
@@ -1,100 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
var exportObj = {};
|
||||
|
||||
if (!Vue.prototype.$isServer) {
|
||||
var docStyle = document.documentElement.style;
|
||||
var engine;
|
||||
var translate3d = false;
|
||||
|
||||
if (window.opera && Object.prototype.toString.call(window.opera) === '[object Opera]') {
|
||||
engine = 'presto';
|
||||
} else if ('MozAppearance' in docStyle) {
|
||||
engine = 'gecko';
|
||||
} else if ('WebkitAppearance' in docStyle) {
|
||||
engine = 'webkit';
|
||||
} else if (typeof navigator.cpuClass === 'string') {
|
||||
engine = 'trident';
|
||||
}
|
||||
|
||||
var cssPrefix = { trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-' }[engine];
|
||||
|
||||
var vendorPrefix = { trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O' }[engine];
|
||||
|
||||
var helperElem = document.createElement('div');
|
||||
var perspectiveProperty = vendorPrefix + 'Perspective';
|
||||
var transformProperty = vendorPrefix + 'Transform';
|
||||
var transformStyleName = cssPrefix + 'transform';
|
||||
var transitionProperty = vendorPrefix + 'Transition';
|
||||
var transitionStyleName = cssPrefix + 'transition';
|
||||
var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
|
||||
|
||||
if (helperElem.style[perspectiveProperty] !== undefined) {
|
||||
translate3d = true;
|
||||
}
|
||||
|
||||
var getTranslate = function(element) {
|
||||
var result = { left: 0, top: 0 };
|
||||
if (element === null || element.style === null) return result;
|
||||
|
||||
var transform = element.style[transformProperty];
|
||||
var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/ig.exec(transform);
|
||||
if (matches) {
|
||||
result.left = +matches[1];
|
||||
result.top = +matches[3];
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
var translateElement = function(element, x, y) {
|
||||
if (x === null && y === null) return;
|
||||
|
||||
if (element === null || element === undefined || element.style === null) return;
|
||||
|
||||
if (!element.style[transformProperty] && x === 0 && y === 0) return;
|
||||
|
||||
if (x === null || y === null) {
|
||||
var translate = getTranslate(element);
|
||||
if (x === null) {
|
||||
x = translate.left;
|
||||
}
|
||||
if (y === null) {
|
||||
y = translate.top;
|
||||
}
|
||||
}
|
||||
|
||||
cancelTranslateElement(element);
|
||||
|
||||
if (translate3d) {
|
||||
element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)';
|
||||
} else {
|
||||
element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ')';
|
||||
}
|
||||
};
|
||||
|
||||
var cancelTranslateElement = function(element) {
|
||||
if (element === null || element.style === null) return;
|
||||
|
||||
var transformValue = element.style[transformProperty];
|
||||
|
||||
if (transformValue) {
|
||||
transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
|
||||
element.style[transformProperty] = transformValue;
|
||||
}
|
||||
};
|
||||
|
||||
exportObj = {
|
||||
transformProperty: transformProperty,
|
||||
transformStyleName: transformStyleName,
|
||||
transitionProperty: transitionProperty,
|
||||
transitionStyleName: transitionStyleName,
|
||||
transitionEndProperty: transitionEndProperty,
|
||||
getElementTranslate: getTranslate,
|
||||
translateElement: translateElement,
|
||||
cancelTranslateElement: cancelTranslateElement
|
||||
};
|
||||
};
|
||||
|
||||
export default exportObj;
|
||||
|
||||
Reference in New Issue
Block a user