From e97dbf61159a10793f53711f741e9a027e0c87bb Mon Sep 17 00:00:00 2001 From: Pan Date: Mon, 19 Jun 2017 17:59:56 +0800 Subject: [PATCH] use babel-preset-env --- .babelrc | 5 +- package.json | 2 +- src/directive/sticky.js | 160 +++++++++++++++++++--------------------- src/directive/waves.js | 97 +++++++++++------------- 4 files changed, 126 insertions(+), 138 deletions(-) diff --git a/.babelrc b/.babelrc index 41789cac..b4050098 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,8 @@ { - "presets": ["es2015", "stage-2"], + "presets": [ + ["env", { "modules": false }], + "stage-2" + ], "plugins": ["transform-runtime"], "comments": false } diff --git a/package.json b/package.json index 95d478fa..2102b7da 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "babel-eslint": "7.2.3", "babel-loader": "7.0.0", "babel-plugin-transform-runtime": "6.23.0", - "babel-preset-es2015": "6.24.1", + "babel-preset-env": "1.5.2", "babel-preset-stage-2": "6.24.1", "babel-register": "6.24.1", "chalk": "1.1.3", diff --git a/src/directive/sticky.js b/src/directive/sticky.js index 7eb9e0f4..8cdd4c80 100644 --- a/src/directive/sticky.js +++ b/src/directive/sticky.js @@ -1,99 +1,91 @@ -(function() { - const vueSticky = {}; - let listenAction; - vueSticky.install = Vue => { - Vue.directive('sticky', { - inserted(el, binding) { - const params = binding.value || {}, - stickyTop = params.stickyTop || 0, - zIndex = params.zIndex || 1000, - elStyle = el.style; +const vueSticky = {}; +let listenAction; +vueSticky.install = Vue => { + Vue.directive('sticky', { + inserted(el, binding) { + const params = binding.value || {}, + stickyTop = params.stickyTop || 0, + zIndex = params.zIndex || 1000, + elStyle = el.style; - elStyle.position = '-webkit-sticky'; - elStyle.position = 'sticky'; + elStyle.position = '-webkit-sticky'; + elStyle.position = 'sticky'; // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary） // if (~elStyle.position.indexOf('sticky')) { // elStyle.top = `${stickyTop}px`; // elStyle.zIndex = zIndex; // return // } - const elHeight = el.getBoundingClientRect().height; - const elWidth = el.getBoundingClientRect().width; - elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`; + const elHeight = el.getBoundingClientRect().height; + const elWidth = el.getBoundingClientRect().width; + elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`; - const parentElm = el.parentNode || document.documentElement; - const placeholder = document.createElement('div'); + const parentElm = el.parentNode || document.documentElement; + const placeholder = document.createElement('div'); + placeholder.style.display = 'none'; + placeholder.style.width = `${elWidth}px`; + placeholder.style.height = `${elHeight}px`; + parentElm.insertBefore(placeholder, el) + + let active = false; + + const getScroll = (target, top) => { + const prop = top ? 'pageYOffset' : 'pageXOffset'; + const method = top ? 'scrollTop' : 'scrollLeft'; + let ret = target[prop]; + if (typeof ret !== 'number') { + ret = window.document.documentElement[method]; + } + return ret; + }; + + const sticky = () => { + if (active) { + return + } + if (!elStyle.height) { + elStyle.height = `${el.offsetHeight}px` + } + + elStyle.position = 'fixed'; + elStyle.width = `${elWidth}px`; + placeholder.style.display = 'inline-block'; + active = true + }; + + const reset = () => { + if (!active) { + return + } + + elStyle.position = ''; placeholder.style.display = 'none'; - placeholder.style.width = `${elWidth}px`; - placeholder.style.height = `${elHeight}px`; - parentElm.insertBefore(placeholder, el) + active = false; + }; - let active = false; - - const getScroll = (target, top) => { - const prop = top ? 'pageYOffset' : 'pageXOffset'; - const method = top ? 'scrollTop' : 'scrollLeft'; - let ret = target[prop]; - if (typeof ret !== 'number') { - ret = window.document.documentElement[method]; + const check = () => { + const scrollTop = getScroll(window, true); + const offsetTop = el.getBoundingClientRect().top; + if (offsetTop < stickyTop) { + sticky(); + } else { + if (scrollTop < elHeight + stickyTop) { + reset() } - return ret; - }; + } + }; + listenAction = () => { + check() + }; - const sticky = () => { - if (active) { - return - } - if (!elStyle.height) { - elStyle.height = `${el.offsetHeight}px` - } + window.addEventListener('scroll', listenAction) + }, - elStyle.position = 'fixed'; - elStyle.width = `${elWidth}px`; - placeholder.style.display = 'inline-block'; - active = true - }; + unbind() { + window.removeEventListener('scroll', listenAction) + } + }) +}; - const reset = () => { - if (!active) { - return - } - - elStyle.position = ''; - placeholder.style.display = 'none'; - active = false; - }; - - const check = () => { - const scrollTop = getScroll(window, true); - const offsetTop = el.getBoundingClientRect().top; - if (offsetTop < stickyTop) { - sticky(); - } else { - if (scrollTop < elHeight + stickyTop) { - reset() - } - } - }; - listenAction = () => { - check() - }; - - window.addEventListener('scroll', listenAction) - }, - - unbind() { - window.removeEventListener('scroll', listenAction) - } - }) - }; - if (typeof exports == 'object') { - module.exports = vueSticky - } else if (typeof define == 'function' && define.amd) { - define([], () => vueSticky) - } else if (window.Vue) { - window.vueSticky = vueSticky; - Vue.use(vueSticky) - } -}()); +export default vueSticky diff --git a/src/directive/waves.js b/src/directive/waves.js index 0f10bd81..952bfa67 100644 --- a/src/directive/waves.js +++ b/src/directive/waves.js @@ -1,54 +1,47 @@ import './waves.css'; -(function() { - const vueWaves = {}; - vueWaves.install = (Vue, options = {}) => { - Vue.directive('waves', { - bind(el, binding) { - el.addEventListener('click', e => { - const customOpts = Object.assign(options, binding.value); - const opts = Object.assign({ - ele: el, // 波纹作用元素 - type: 'hit', // hit点击位置扩散center中心点扩展 - color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 - }, customOpts), - target = opts.ele; - if (target) { - target.style.position = 'relative'; - target.style.overflow = 'hidden'; - const rect = target.getBoundingClientRect(); - let ripple = target.querySelector('.waves-ripple'); - if (!ripple) { - ripple = document.createElement('span'); - ripple.className = 'waves-ripple'; - ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; - target.appendChild(ripple); - } else { - ripple.className = 'waves-ripple'; - } - switch (opts.type) { - case 'center': - ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'; - ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'; - break; - default: - ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'; - ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'; - } - ripple.style.backgroundColor = opts.color; - ripple.className = 'waves-ripple z-active'; - return false; - } - }, false); - } - }) - }; - if (typeof exports == 'object') { - module.exports = vueWaves - } else if (typeof define == 'function' && define.amd) { - define([], () => vueWaves) - } else if (window.Vue) { - window.vueWaves = vueWaves; - Vue.use(vueWaves) - } -}()); + +const vueWaves = {}; +vueWaves.install = (Vue, options = {}) => { + Vue.directive('waves', { + bind(el, binding) { + el.addEventListener('click', e => { + const customOpts = Object.assign(options, binding.value); + const opts = Object.assign({ + ele: el, // 波纹作用元素 + type: 'hit', // hit点击位置扩散center中心点扩展 + color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 + }, customOpts), + target = opts.ele; + if (target) { + target.style.position = 'relative'; + target.style.overflow = 'hidden'; + const rect = target.getBoundingClientRect(); + let ripple = target.querySelector('.waves-ripple'); + if (!ripple) { + ripple = document.createElement('span'); + ripple.className = 'waves-ripple'; + ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; + target.appendChild(ripple); + } else { + ripple.className = 'waves-ripple'; + } + switch (opts.type) { + case 'center': + ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'; + ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'; + break; + default: + ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'; + ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'; + } + ripple.style.backgroundColor = opts.color; + ripple.className = 'waves-ripple z-active'; + return false; + } + }, false); + } + }) +}; + +export default vueWaves;