增加Capsule, Noticebar, Popup；修正Dialog在非最外层情况下引入的样式问题；更新readme。 (#32)

* style: badge上标大小改变更加灵活

* style: panel-title的行高跟随字号

* style: 绝对定位的元素width或height为auto，left，right，top，bottom不为auto时，auto的margin将计算为0，同初始值

* style: 修复作为组件使用时dialog的定位问题

* style: 修正示例

* style: add

* style: capsule

* style: modify readme

* style: add noticebar

* style: modify readme

* style: noticebar优化

* style: add popup

* style: remove

* style: 左右反了...

* style: 通告栏支持同一页面多个

* style: 独立管理不同noticebar的动画数据

README.md

@@ -10,7 +10,7 @@
 ## 概述
 [ZanUI-WeApp]是有赞移动 Web UI 规范 `ZanUI` 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。
 
-包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计 17 类组件或元素。
+包含 badge、btn、capsule、card、cell、color、dialog、form、helper、icon、label、loadmore、noticebar、panel、popup、quantity、steps、switch、tab、toast、toptip 共计 21 类组件或元素。
 
 更多背景介绍，可以移步到 [我们专门写的的介绍文章](http://tech.youzan.com/zanui-weapp/)。
 

app.json

@@ -3,21 +3,24 @@
     "example/dashboard/index",
     "example/btn/index",
     "example/badge/index",
+    "example/capsule/index",
+    "example/card/index",
     "example/cell/index",
+    "example/dialog/index",
+    "example/form/index",
+    "example/helper/index",
+    "example/icon/index",
     "example/label/index",
     "example/loadmore/index",
+    "example/noticebar/index",
     "example/panel/index",
-    "example/tab/index",
+    "example/popup/index",
     "example/quantity/index",
-    "example/toptips/index",
-    "example/helper/index",
-    "example/form/index",
     "example/steps/index",
     "example/switch/index",
-    "example/card/index",
-    "example/toast/index",
-    "example/icon/index",
-    "example/dialog/index"
+    "example/tab/index",
+    "example/toptips/index",
+    "example/toast/index"
   ],
   "window":{
     "navigationBarBackgroundColor": "#FAFAFA",

dist/capsule/index.wxml

@@ -0,0 +1,6 @@
+<template name="capsule">
+  <view class="zan-capsule">
+    <view class="zan-capsule__left">{{ leftText }}</view>
+    <view class="zan-capsule__right">{{ rightText }}</view>
+  </view>
+</template>

dist/capsule/index.wxss

@@ -0,0 +1,28 @@
+.zan-capsule {
+  display: inline-block;
+  font-size: 12px;
+  vertical-align: middle;
+  line-height: 16px;
+  transform: scale(0.83);
+}
+.zan-capsule__left,
+.zan-capsule__right {
+  display: inline-block;
+  line-height: 16px;
+  height: 16px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+.zan-capsule__left {
+  padding: 0 2px;
+  color: #fff;
+  background: #F24544;
+  border-radius: 2px 0 0 2px;
+  border: 1rpx solid #F24544;
+}
+.zan-capsule__right {
+  padding: 0 5px;
+  color: #F24544;
+  border-radius: 0 2px 2px 0;
+  border: 1rpx solid #F24544;
+}

dist/dialog/index.wxss

@@ -10,6 +10,7 @@
 }
 .zan-dialog__container {
   position: fixed;
+  left: 0;
   bottom: 0;
   width: 750rpx;
   background: white;

dist/index.js

@@ -1,6 +1,7 @@
-exports.Tab = require('./tab/index');
-exports.Quantity = require('./quantity/index');
-exports.TopTips = require('./toptips/index');
-exports.Toast = require('./toast/index');
-exports.Switch = require('./switch/index');
 exports.CheckLabel = require('./form/check_label');
+exports.NoticeBar = require('./noticebar/index');
+exports.Quantity = require('./quantity/index');
+exports.Switch = require('./switch/index');
+exports.Tab = require('./tab/index');
+exports.Toast = require('./toast/index');
+exports.TopTips = require('./toptips/index');

dist/index.wxss

@@ -1,19 +1,22 @@
-@import "loadmore/index.wxss";
-@import "color/index.wxss";
-@import "helper/index.wxss";
-@import "panel/index.wxss";
-@import "btn/index.wxss";
-@import "cell/index.wxss";
-@import "card/index.wxss";
 @import "badge/index.wxss";
+@import "btn/index.wxss";
+@import "capsule/index.wxss";
+@import "card/index.wxss";
+@import "cell/index.wxss";
+@import "color/index.wxss";
 @import "dialog/index.wxss";
 @import "form/index.wxss";
 @import "form/check_label.wxss";
-@import "tab/index.wxss";
+@import "helper/index.wxss";
+@import "icon/index.wxss";
 @import "label/index.wxss";
+@import "loadmore/index.wxss";
+@import "noticebar/index.wxss";
+@import "panel/index.wxss";
+@import "popup/index.wxss";
 @import "quantity/index.wxss";
 @import "steps/index.wxss";
+@import "switch/index.wxss";
+@import "tab/index.wxss";
 @import "toast/index.wxss";
 @import "toptips/index.wxss";
-@import "icon/index.wxss";
-@import "switch/index.wxss";

dist/noticebar/index.js

@@ -0,0 +1,55 @@
+var ZanNoticeBar = {
+  initZanNoticeBarScroll: function (componentId) {
+    this.zanNoticeBarNode = this.zanNoticeBarNode || {};
+    this.zanNoticeBarNode[`${componentId}`] = {
+      width: undefined,
+      wrapWidth: undefined,
+      animation: null,
+      resetAnimation: null
+    };
+    var currentComponent = this.zanNoticeBarNode[`${componentId}`];
+    var _this = this;
+    wx.createSelectorQuery().select(`#${componentId}__content`).boundingClientRect(function (rect) {
+      if (rect.width) {
+        currentComponent.width = rect.width;
+        wx.createSelectorQuery().select(`#${componentId}__content-wrap`).boundingClientRect(function (rect) {
+          currentComponent.wrapWidth = rect.width;
+          if (currentComponent.wrapWidth < currentComponent.width) {
+            var mstime = currentComponent.width / 40 * 1000;
+            currentComponent.animation = wx.createAnimation({
+              duration: mstime,
+              timingFunction: 'linear'
+            });
+            currentComponent.resetAnimation = wx.createAnimation({
+              duration: 0,
+              timingFunction: 'linear'
+            });
+            _this.scrollZanNoticeBar(componentId, mstime);
+          }
+        }).exec();
+      } else {
+        console.warn('页面缺少 noticebar 元素');
+      }
+    }).exec();
+  },
+  scrollZanNoticeBar: function (componentId, mstime) {
+    var currentComponent = this.zanNoticeBarNode[`${componentId}`];
+    var resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step();
+    this.setData({
+      [`${componentId}.animationData`]: resetAnimationData.export()
+    });
+    var aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step();
+    var _this = this;
+    setTimeout(function () {
+      _this.setData({
+        [`${componentId}.animationData`]: aninationData.export()
+      });
+    }, 100);
+
+    setTimeout(function () {
+      _this.scrollZanNoticeBar(componentId, mstime);
+    }, mstime);
+  }
+};
+
+module.exports = ZanNoticeBar;

dist/noticebar/index.wxml

@@ -0,0 +1,16 @@
+<template name="zan-noticebar">
+  <view class="zan-noticebar">
+    <view
+      id="{{ componentId }}__content-wrap"
+      style="height: 18px; overflow: hidden; position: relative;"
+    >
+      <view
+        animation="{{ animationData }}"
+        id="{{ componentId }}__content"
+        style="position: absolute; white-space: nowrap;"
+      >
+        {{ text }}
+      </view>
+    </view>
+  </view>
+</template>

dist/noticebar/index.wxss

@@ -0,0 +1,7 @@
+.zan-noticebar {
+  color: #f60;
+  padding: 9px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  background-color: #fff7cc;
+}

dist/popup/index.wxss

@@ -0,0 +1,31 @@
+.zan-popup {
+  position: fixed;
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  transition: .2s ease-out;
+}
+
+.zan-popup--top {
+  width: 100%;
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+
+.zan-popup--right {
+  transform: translate3d(50%, -50%, 0);
+}
+
+.zan-popup--left {
+  transform: translate3d(-150%, -50%, 0);
+}
+
+.zan-popup--show {
+  transform: translate3d(-50%, -50%, 0);
+}

example/badge/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
   },

example/btn/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
   },

example/capsule/index.js

@@ -0,0 +1,2 @@
+Page({
+})

example/capsule/index.wxml

@@ -0,0 +1,13 @@
+<import src="/dist/capsule/index.wxml" />
+
+<view class="container">
+
+  <view class="doc-title">CAPSULE</view>
+
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <template is="capsule" data="{{ leftText: '1折', rightText: '限购一份'}}" />
+    </view>
+  </view>
+
+</view>

example/card/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
   },

example/dashboard/index.js

@@ -7,6 +7,9 @@ Page({
       }, {
         name: 'Button 按钮',
         path: '/example/btn/index'
+      }, {
+        name: 'Capsule 胶囊',
+        path: '/example/capsule/index'
       }, {
         name: 'Card 卡片',
         path: '/example/card/index'
@@ -31,9 +34,15 @@ Page({
       }, {
         name: 'Loadmore 加载',
         path: '/example/loadmore/index'
+      }, {
+        name: 'Noticebar 通告栏',
+        path: '/example/noticebar/index'
       }, {
         name: 'Panel 面板',
         path: '/example/panel/index'
+      }, {
+        name: 'Popup 弹出层',
+        path: '/example/popup/index'
       }, {
         name: 'Quantity 计数器',
         path: '/example/quantity/index'

example/dialog/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
     showDialog: false

example/helper/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
   },

example/label/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
   },

example/label/index.wxml

@@ -4,7 +4,7 @@
 
   <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">
-      <view class="zan-label">蓝色</view>
+      <view class="zan-label">灰色</view>
       <view class="zan-label zan-label--primary">红色</view>
       <view class="zan-label zan-label--disabled">黑色</view>
     </view>

example/loadmore/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
   },

example/noticebar/index.js

@@ -0,0 +1,23 @@
+var Zan = require('../../dist/index');
+
+Page(Object.assign({}, Zan.NoticeBar, {
+  data: {
+    movable: {
+      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
+    },
+    static1: {
+      text: '足协杯战线连续第2年上演广州德比战'
+    },
+    static2: {
+      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
+    }
+  },
+  onShow() {
+    // 滚动通告栏需要initScroll
+    this.initZanNoticeBarScroll('movable');
+    // initScroll的通告栏如果宽度足够显示内容将保持静止
+    this.initZanNoticeBarScroll('static1');
+    // 不进行initScroll的通告栏也将保持静止
+    // this.initZanNoticeBarScroll('static2');
+  }
+}))

example/noticebar/index.wxml

@@ -0,0 +1,30 @@
+<import src="/dist/noticebar/index.wxml" />
+<view class="container">
+
+  <view class="doc-title">NOTICEBAR</view>
+
+  <view class="zan-panel-title">滚动通告栏</view>
+  <view class="zan-panel">
+    <template
+      is="zan-noticebar"
+      data="{{ ...movable, componentId: 'movable'  }}"
+    ></template>
+  </view>
+
+  <view class="zan-panel-title">静止通告栏1</view>
+  <view class="zan-panel">
+    <template
+      is="zan-noticebar"
+      data="{{ ...static1, componentId: 'static1'  }}"
+    ></template>
+  </view>
+
+  <view class="zan-panel-title">静止通告栏2</view>
+  <view class="zan-panel">
+    <template
+      is="zan-noticebar"
+      data="{{ ...static2, componentId: 'static2'  }}"
+    ></template>
+  </view>
+
+</view>

example/panel/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
   },

example/popup/index.js

@@ -0,0 +1,16 @@
+Page({
+  data: {
+    showLeftPopup: false,
+    showRightPopup: false
+  },
+  toggleLeftPopup() {
+    this.setData({
+      showLeftPopup: !this.data.showLeftPopup
+    });
+  },
+  toggleRightPopup() {
+    this.setData({
+      showRightPopup: !this.data.showRightPopup
+    });
+  }
+})

example/popup/index.wxml

@@ -0,0 +1,30 @@
+<view class="container">
+
+  <view class="doc-title">POPUP</view>
+
+  <view class="zan-btns" style="margin-top: 30vh;">
+    <button class="zan-btn" bindtap="toggleLeftPopup">
+      从左边弹出popup
+    </button>
+    <button class="zan-btn" bindtap="toggleRightPopup">
+      从右边弹出popup
+    </button>
+  </view>
+
+  <view class="zan-popup zan-popup--left {{ showLeftPopup ? 'zan-popup--show' : ''}}">
+    <view style="padding: 15px;">
+      <button class="zan-btn" bindtap="toggleLeftPopup">
+        关闭 popup
+      </button>
+    </view>
+  </view>
+
+  <view class="zan-popup zan-popup--right {{ showRightPopup ? 'zan-popup--show' : ''}}">
+    <view style="padding: 15px;">
+      <button class="zan-btn" bindtap="toggleRightPopup">
+        关闭 popup
+      </button>
+    </view>
+  </view>
+
+</view>

example/steps/index.js

@@ -1,5 +1,3 @@
-// var app = getApp();
-
 Page({
   data: {
     steps: [