From 9e1528401de295a717837ea6b6f29deccc3ef01b Mon Sep 17 00:00:00 2001
From: lzcmaro <lzcmaro@163.com>
Date: Mon, 22 May 2017 02:29:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Espinner=E7=BB=84=E4=BB=B6;?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9Einfinite-scroll=E7=BB=84=E4=BB=B6;=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                |   4 +-
 build/bin/build-entry.js                    |   3 +
 examples/navs.json                          |   5 +
 examples/page-content.vue                   |   1 +
 examples/pages/indicator.vue                |   6 -
 examples/pages/infinite-scroll.vue          |  77 +++++++++++
 examples/pages/spinner.vue                  |  32 +++++
 examples/pages/toast.vue                    |   6 -
 src/components/action-sheet.vue             |   7 +-
 src/components/alert.vue                    |   7 +-
 src/components/button.vue                   |   9 +-
 src/components/confirm.vue                  |  12 +-
 src/components/icon.vue                     |   7 +-
 src/components/indicator.vue                |   7 +-
 src/components/infinite-scroll/directive.js | 138 ++++++++++++++++++++
 src/components/infinite-scroll/index.js     |   8 ++
 src/components/modal.vue                    |   2 +-
 src/components/spinner.vue                  |  28 ++++
 src/components/tabs.vue                     |   1 -
 src/index.js                                |   8 +-
 src/less/icons.less                         |   2 +-
 src/less/indicator.less                     |   4 -
 src/less/spinner.less                       |   3 +
 src/less/vue-mui.less                       |   1 +
 24 files changed, 320 insertions(+), 58 deletions(-)
 create mode 100644 examples/pages/spinner.vue
 create mode 100644 src/components/infinite-scroll/directive.js
 create mode 100644 src/components/infinite-scroll/index.js
 create mode 100644 src/components/spinner.vue
 create mode 100644 src/less/spinner.less

diff --git a/.eslintrc.js b/.eslintrc.js
index db068a8..68360ac 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,6 +21,8 @@ module.exports = {
     // function括号前面的空格是否必需
     'space-before-function-paren': 0,
     // 行末分号是否必需
-    'semi': 0
+    'semi': 0,
+    // 允许尾随空格
+    'no-trailing-spaces': 0
   }
 }
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index ff28414..f1af662 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -14,6 +14,7 @@ const install = function(Vue) {
   if (install.installed) return
 
 {{install}}
+  Vue.use(InfiniteScroll);
 }
 
 // auto install
@@ -65,6 +66,8 @@ componentNames.forEach(name => {
   }));
 
   if ([
+    // directives
+    'InfiniteScroll'
   ].indexOf(componentName) === -1) {
     installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
       name: componentName,
diff --git a/examples/navs.json b/examples/navs.json
index 7374618..47df5c3 100644
--- a/examples/navs.json
+++ b/examples/navs.json
@@ -96,6 +96,11 @@
         "path": "/icon",
         "name": "Icons",
         "icon": "icons"
+      },
+      {
+        "path": "/spinner",
+        "name": "Spinner",
+        "icon": "Spinner"
       }
     ]
   },
diff --git a/examples/page-content.vue b/examples/page-content.vue
index 1882518..581ba93 100644
--- a/examples/page-content.vue
+++ b/examples/page-content.vue
@@ -13,6 +13,7 @@ export default {
 <style lang="less">
   @import "../src/less/variables.less";
   .page-content {
+    position: relative;
     padding: @content-spacing;
   }
 
diff --git a/examples/pages/indicator.vue b/examples/pages/indicator.vue
index e35288e..bf5fc75 100644
--- a/examples/pages/indicator.vue
+++ b/examples/pages/indicator.vue
@@ -48,12 +48,6 @@ export default {
 
 <style lang="less" scoped>
   .page-content {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0 !important;
-
     .btn {
       margin-top: 15px;
     }
diff --git a/examples/pages/infinite-scroll.vue b/examples/pages/infinite-scroll.vue
index 654ba98..64327a3 100644
--- a/examples/pages/infinite-scroll.vue
+++ b/examples/pages/infinite-scroll.vue
@@ -1,10 +1,87 @@
 <template>
   <div>
     <vui-header fixed>Infinite Scroll</vui-header>
+    <div class="infinite-scroll-wrapper">
+      <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="busy" infinite-scroll-distance="20">
+        <vui-list>
+          <vui-list-item v-for="item in pager.list">{{item}}</vui-list-item>
+        </vui-list>
+        <div class="spinner-wrapper">
+          <vui-spinner v-if="pager.hasNext" type="spinner2"></vui-spinner>
+          {{pager.hasNext ? 'Loading...' : '没有更多了...'}}
+        </div>
+      </div>    
+    </div>
   </div>
 </template>
 
+<style lang="less" scoped>
+  .infinite-scroll-wrapper {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 44px;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .spinner-wrapper {
+    height: 44px;
+    line-height: 44px;
+    background-color: #fff;
+    color: #999;
+    text-align: center;
+    .spinner {
+      margin-right: 5px;
+      vertical-align: -4px;
+    }
+  }
+</style>
+
 <script>
 export default {
+  data: function() {
+    return {
+      pager: {
+        list: [],
+        loading: false,
+        page: 1,
+        pageSize: 20,
+        totalPage: 5,
+        hasNext: true
+      }
+    }
+  },
+  computed: {
+    busy() {
+      return this.pager.loading || !this.pager.hasNext
+    }
+  },
+  mounted() {
+    let pager = this.pager
+    for (let i = 1; i <= pager.pageSize; i++) {
+      pager.list.push(i);
+    }
+  },
+  methods: {
+    loadMore: function() {
+      console.log('loadMore')
+      let pager = this.pager
+
+      // 把loading设为ture，以屏蔽infinite-scroll绑定的事件
+      // 避免在加载数据时，上下滚动屏幕而使得loadMore再次触发
+      pager.loading = true
+
+      setTimeout(() => {
+        let last = pager.list[pager.list.length - 1];
+        for (let i = 1; i <= pager.pageSize; i++) {
+          pager.list.push(last + i);
+        }
+        pager.page += 1
+        pager.loading = false
+        pager.hasNext = pager.page < pager.totalPage
+      }, 1000);
+    }
+  }
 }
 </script>
diff --git a/examples/pages/spinner.vue b/examples/pages/spinner.vue
new file mode 100644
index 0000000..276631e
--- /dev/null
+++ b/examples/pages/spinner.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <vui-header fixed>Spinner</vui-header>
+    <page-content>
+      <vui-list>
+        <vui-list-item>
+          spinner<vui-spinner type="spinner" slot="after"></vui-spinner>
+        </vui-list-item>
+        <vui-list-item>
+          spinner1<vui-spinner type="spinner1" slot="after"></vui-spinner>
+        </vui-list-item>
+        <vui-list-item>
+          spinner2<vui-spinner type="spinner2" slot="after"></vui-spinner>
+        </vui-list-item>
+        <vui-list-item>
+          spinner3<vui-spinner type="spinner3" slot="after"></vui-spinner>
+        </vui-list-item>
+      </vui-list>
+    </page-content>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .page-content {
+    padding: 0;
+  }
+</style>
+
+<script>
+export default {
+}
+</script>
diff --git a/examples/pages/toast.vue b/examples/pages/toast.vue
index 725e6e8..8e6977c 100644
--- a/examples/pages/toast.vue
+++ b/examples/pages/toast.vue
@@ -39,12 +39,6 @@ export default {
 
 <style lang="less" scoped>
   .page-content {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0 !important;
-
     .btn {
       margin-top: 15px;
     }
diff --git a/src/components/action-sheet.vue b/src/components/action-sheet.vue
index af3aec2..13377fb 100644
--- a/src/components/action-sheet.vue
+++ b/src/components/action-sheet.vue
@@ -2,7 +2,7 @@
   <vui-modal type="actionsheet" transition="slide-up" :show="show">
     <slot></slot>
     <template slot="footer" v-if="cancelButton">
-      <vui-action-sheet-button @click="handleCancel">{{cancelButtonText}}</vui-action-sheet-button>
+      <vui-action-sheet-button @click="$emit('cancel', $event)">{{cancelButtonText}}</vui-action-sheet-button>
     </template>
   </vui-modal>
 </template>
@@ -31,11 +31,6 @@ export default {
       type: String,
       default: '取消'
     }
-  },
-  methods: {
-    handleCancel($evt) {
-      this.$emit('cancel', $evt)
-    }
   }
 }
 </script>
diff --git a/src/components/alert.vue b/src/components/alert.vue
index 51b7842..31b4fde 100644
--- a/src/components/alert.vue
+++ b/src/components/alert.vue
@@ -5,7 +5,7 @@
     </template>
     <slot></slot>
     <template slot="footer">
-      <vui-button size="large" @click="handleClick">{{buttonText}}</vui-button>
+      <vui-button size="large" @click="$emit('ok', $event)">{{buttonText}}</vui-button>
     </template>
   </vui-modal>
 </template>
@@ -34,11 +34,6 @@ export default {
       type: String,
       default: '确定'
     }
-  },
-  methods: {
-    handleClick($evt) {
-      this.$emit('ok', $evt)
-    }
   }
 }
 </script>
diff --git a/src/components/button.vue b/src/components/button.vue
index e739811..a34aea0 100644
--- a/src/components/button.vue
+++ b/src/components/button.vue
@@ -1,10 +1,9 @@
 <template>
   <button 
-    class="btn" 
     :class="btnClasses"
     :type="nativeType"
     :disabled="disabled"
-    @click="handleClick">
+    @click="$emit('click', $event)">
     <slot></slot>
   </button>
 </template>
@@ -42,6 +41,7 @@ export default {
   computed: {
     btnClasses() {
       const classes = {
+        'btn': true,
         [`btn-${this.type}`]: true,
         [`btn-${this.size}`]: true,
         'btn-plain': this.plain,
@@ -49,11 +49,6 @@ export default {
       }
       return classes
     }
-  },
-  methods: {
-    handleClick(evt) {
-      this.$emit('click', evt)
-    }
   }
 }
 </script>
diff --git a/src/components/confirm.vue b/src/components/confirm.vue
index c706ed7..248f521 100644
--- a/src/components/confirm.vue
+++ b/src/components/confirm.vue
@@ -2,8 +2,8 @@
   <vui-modal type="confirm" :show="show">
     <slot></slot>
     <template slot="footer">
-      <vui-button class="btn-cancel" size="large" @click="onCancel">{{cancelButtonText}}</vui-button>
-      <vui-button class="btn-ok" size="large" @click="onConfirm">{{confirmButtonText}}</vui-button>
+      <vui-button class="btn-cancel" size="large" @click="$emit('cancel', $event)">{{cancelButtonText}}</vui-button>
+      <vui-button class="btn-ok" size="large" @click="$emit('ok', $event)">{{confirmButtonText}}</vui-button>
     </template>
   </vui-modal>
 </template>
@@ -32,14 +32,6 @@ export default {
       type: String,
       default: '取消'
     }
-  },
-  methods: {
-    onConfirm($evt) {
-      this.$emit('ok', $evt)
-    },
-    onCancel($evt) {
-      this.$emit('cancel', $evt)
-    }
   }
 }
 </script>
diff --git a/src/components/icon.vue b/src/components/icon.vue
index b276824..f9c7087 100644
--- a/src/components/icon.vue
+++ b/src/components/icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <i class="icon" :class="'icon-' + type" @click="handleClick"></i>
+  <i :class="'icon icon-' + type" @click="$emit('click', $event)"></i>
 </template>
 
 <script>
@@ -10,11 +10,6 @@ export default {
       type: String,
       required: true
     }
-  },
-  methods: {
-    handleClick($evt) {
-      this.$emit('click', $evt)
-    }
   }
 }
 </script>
diff --git a/src/components/indicator.vue b/src/components/indicator.vue
index c34d4bd..b5633d1 100644
--- a/src/components/indicator.vue
+++ b/src/components/indicator.vue
@@ -2,7 +2,8 @@
   <div class="indicator" :class="{[`indicator-${type}`]: true}" >
     <vui-overlay v-show="show" :transparent="true"></vui-overlay>
     <vui-toast :show="show" @toggle-visible="toggleVisible">
-      <vui-icon :type="type === 'loading' ? 'spinner' : type" slot="icon"></vui-icon>
+      <vui-spinner v-if="type==='loading'" type="spinner" slot="icon"></vui-spinner>
+      <vui-icon v-else :type="type" slot="icon"></vui-icon>
       <slot></slot>
     </vui-toast>
   </div>    
@@ -12,13 +13,15 @@
 import VuiOverlay from './overlay'
 import VuiToast from './toast'
 import VuiIcon from './icon'
+import VuiSpinner from './spinner'
 
 export default {
   name: 'vui-indicator',
   components: {
     VuiOverlay,
     VuiToast,
-    VuiIcon
+    VuiIcon,
+    VuiSpinner
   },
   props: {
     show: {
diff --git a/src/components/infinite-scroll/directive.js b/src/components/infinite-scroll/directive.js
new file mode 100644
index 0000000..8833a06
--- /dev/null
+++ b/src/components/infinite-scroll/directive.js
@@ -0,0 +1,138 @@
+const noop = () => {}
+const ctx = '@@InfiniteScroll'
+const ATTR_DISTANCE = 'infinite-scroll-distance'
+const ATTR_DISABLED = 'infinite-scroll-disabled'
+
+const getScrollTop = function(element) {
+  if (element === window) {
+    return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop)
+  }
+
+  return element.scrollTop
+}
+
+const getVisibleHeight = function(element) {
+  if (element === window) {
+    return document.documentElement.clientHeight
+  }
+
+  return element.clientHeight
+}
+
+const getScrollEventTarget = function(element) {
+  const getComputedStyle = document.defaultView.getComputedStyle
+  let 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) {
+    let overflowY = getComputedStyle(currentNode).overflowY
+    if (overflowY === 'scroll' || overflowY === 'auto') {
+      return currentNode
+    }
+    currentNode = currentNode.parentNode
+  }
+  return window
+}
+
+const scrollHandler = function() {
+  const eventTarget = this.scrollEventTarget
+  const clientHeight = getVisibleHeight(eventTarget)
+  const scrollHeight = eventTarget.scrollHeight
+  const scrollTop = getScrollTop(eventTarget)
+
+  if (this.disabled) return;
+
+  if (scrollHeight - scrollTop <= clientHeight + this.distance) {
+    this.expression()
+  }
+}
+
+// a minimum time that should elapse between each call to the
+// handler. N.b. the first call the handler will be run
+// immediately, and the final call will always result in the
+// handler being called after the `wait` period elapses.
+// A slimmed down version of underscore's implementation.
+function throttle(func, wait) {
+  let timeout = null;
+  let previous = 0;
+
+  wait = wait || 200;
+
+  function later() {
+    previous = new Date().getTime();
+    clearInterval(timeout);
+    timeout = null;
+    return func.call();
+  }
+
+  function throttled() {
+    const now = new Date().getTime();
+    const remaining = wait - (now - previous);
+    if (remaining <= 0) {
+      clearInterval(timeout);
+      timeout = null;
+      previous = now;
+      func.call();
+    } else if (!timeout) {
+      timeout = setInterval(later, remaining, 1);
+    }
+  }
+
+  return throttled;
+}
+
+const hasScrollContent = function(element) {
+  const clientHeight = getVisibleHeight(element)
+  const scrollHeight = element.scrollHeight
+
+  return scrollHeight > clientHeight
+}
+
+const attachScrollListener = function() {
+  if (hasScrollContent(this.scrollEventTarget)) {
+    this.scrollListener = throttle(scrollHandler.bind(this))
+    this.scrollEventTarget.addEventListener('scroll', this.scrollListener)
+  }  
+}
+
+const detachScrollListener = function() {
+  this.scrollEventTarget.removeEventListener('scroll', this.scrollListener)
+}
+
+export default {
+  bind(el, binding, vnode) {
+    const distance = Number(vnode.data.attrs[ATTR_DISTANCE]) || 0
+    const disabled = Boolean(vnode.data.attrs[ATTR_DISABLED])
+    
+    el[ctx] = {
+      el,
+      vm: vnode.context,
+      expression: binding.value || noop,
+      distance,
+      disabled
+    }
+
+    vnode.context.$on('hook:mounted', () => {
+      const eventTarget = getScrollEventTarget(el)      
+
+      // 在$nextTick()中添加scroll事件，这时候可以取到el的实际scrollHeight值
+      vnode.context.$nextTick(() => {
+        el[ctx].scrollEventTarget = eventTarget
+        attachScrollListener.call(el[ctx])
+      })     
+    })
+  },
+  update(el, binding, vnode, oldVnode) {
+    const disabled = vnode.data.attrs[ATTR_DISABLED]
+
+    // 指令中的update钩子是被绑定元素所在的模板更新时调用，而不论绑定值是否有变化
+    // 这里判断绑定的值是否有更新，避免多余的操作
+    if (disabled === oldVnode.data.attrs[ATTR_DISABLED]) return;
+
+    el[ctx].disabled = disabled
+    detachScrollListener.call(el[ctx])
+    disabled === false && attachScrollListener.call(el[ctx])
+  },
+  unbind(el) {
+    detachScrollListener.call(el[ctx])
+  }
+}
diff --git a/src/components/infinite-scroll/index.js b/src/components/infinite-scroll/index.js
new file mode 100644
index 0000000..6b0e692
--- /dev/null
+++ b/src/components/infinite-scroll/index.js
@@ -0,0 +1,8 @@
+import InfiniteScroll from './directive'
+
+const install = function(Vue) {
+  Vue.directive('InfiniteScroll', InfiniteScroll)
+}
+
+InfiniteScroll.install = install
+export default InfiniteScroll
diff --git a/src/components/modal.vue b/src/components/modal.vue
index 86f86a5..350d606 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -1,7 +1,7 @@
 <template>
   <vui-base-modal :show="show" :transition="transition">
     <template slot="header" v-if="title || closeButton">
-      <a href="javascript:;" class="btn-close" @click.prevent="$emit('close')" v-if="closeButton">{{closeButtonText}}</a>
+      <a href="javascript:;" class="btn-close" @click.prevent="$emit('close', $event)" v-if="closeButton">{{closeButtonText}}</a>
       {{title}}
     </template>
     <slot></slot>
diff --git a/src/components/spinner.vue b/src/components/spinner.vue
new file mode 100644
index 0000000..f312a6c
--- /dev/null
+++ b/src/components/spinner.vue
@@ -0,0 +1,28 @@
+<template>
+  <vui-icon class="spinner" :type="type"></vui-icon>
+</template>
+
+<script>
+import VuiIcon from './icon'
+
+export default {
+  name: 'vui-spinner',
+  components: {
+    VuiIcon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'spinner',
+      validator(value) {
+        return [
+          'spinner',
+          'spinner1',
+          'spinner2',
+          'spinner3'
+        ].indexOf(value) > -1
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/tabs.vue b/src/components/tabs.vue
index 3608e6a..59dc5b1 100644
--- a/src/components/tabs.vue
+++ b/src/components/tabs.vue
@@ -44,7 +44,6 @@ export default {
     this.updateTabContent()
   },
   render(h) {
-    console.log('tabs.render', this.$el)
     const props = {
       class: {
         'nav': true,
diff --git a/src/index.js b/src/index.js
index b4616a3..e936d2c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,12 +11,14 @@ import Dialog from './components/dialog'
 import Header from './components/header'
 import Icon from './components/icon'
 import Indicator from './components/indicator'
+import InfiniteScroll from './components/infinite-scroll'
 import Input from './components/input'
 import Link from './components/link'
 import ListItem from './components/list-item'
 import List from './components/list'
 import Modal from './components/modal'
 import Overlay from './components/overlay'
+import Spinner from './components/spinner'
 import Switch from './components/switch'
 import TabContent from './components/tab-content'
 import TabItem from './components/tab-item'
@@ -44,12 +46,14 @@ const install = function(Vue) {
   Vue.component(List.name, List)
   Vue.component(Modal.name, Modal)
   Vue.component(Overlay.name, Overlay)
+  Vue.component(Spinner.name, Spinner)
   Vue.component(Switch.name, Switch)
   Vue.component(TabContent.name, TabContent)
   Vue.component(TabItem.name, TabItem)
   Vue.component(Tabbar.name, Tabbar)
   Vue.component(Tabs.name, Tabs)
   Vue.component(Toast.name, Toast)
+  Vue.use(InfiniteScroll);
 }
 
 // auto install
@@ -60,7 +64,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 module.exports = {
   $,
   install,
-  version: '1.0.0-beta2',
+  version: '1.0.0-beta3',
   ActionSheetButton,
   ActionSheet,
   Alert,
@@ -72,12 +76,14 @@ module.exports = {
   Header,
   Icon,
   Indicator,
+  InfiniteScroll,
   Input,
   Link,
   ListItem,
   List,
   Modal,
   Overlay,
+  Spinner,
   Switch,
   TabContent,
   TabItem,
diff --git a/src/less/icons.less b/src/less/icons.less
index 275204b..1de13d8 100644
--- a/src/less/icons.less
+++ b/src/less/icons.less
@@ -10,7 +10,7 @@
 .icon {
   display: inline-block;
   font-family: "iconfont" !important;
-  font-size: 16px;
+  font-size: 24px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/less/indicator.less b/src/less/indicator.less
index bc653a0..415c6ea 100644
--- a/src/less/indicator.less
+++ b/src/less/indicator.less
@@ -9,10 +9,6 @@
   .toast-icon-wrap {
     .icon {
       font-size: 48px;
-
-      &.icon-spinner {
-        .animation(spin 1.2s infinite linear);
-      }
     }
   }
 
diff --git a/src/less/spinner.less b/src/less/spinner.less
new file mode 100644
index 0000000..9c97759
--- /dev/null
+++ b/src/less/spinner.less
@@ -0,0 +1,3 @@
+.spinner {
+  .animation(spin 1.5s infinite linear);
+}
\ No newline at end of file
diff --git a/src/less/vue-mui.less b/src/less/vue-mui.less
index 2b53bb2..891c004 100644
--- a/src/less/vue-mui.less
+++ b/src/less/vue-mui.less
@@ -16,6 +16,7 @@
 @import "list.less";
 @import "button.less";
 @import "link.less";
+@import "spinner.less";
 @import "toast.less";
 @import "indicator.less";
 @import "nav.less";