Merge remote-tracking branch 'upstream/0.13-dev' into 0.13-dev

android/sdk/src/main/java/com/taobao/weex/dom/action/AnimationAction.java

@@ -133,6 +133,9 @@ public void executeRender(RenderActionContext context) {
 
   private void startAnimation(@NonNull WXSDKInstance instance, @Nullable WXComponent component) {
     if (component != null) {
+      if (mAnimationBean != null) {
+        component.setNeedLayoutOnAnimation(mAnimationBean.needLayout);
+      }
       if (component.getHostView() == null) {
         WXAnimationModule.AnimationHolder holder = new WXAnimationModule.AnimationHolder(mAnimationBean, callback);
         component.postAnimation(holder);

android/sdk/src/main/java/com/taobao/weex/ui/animation/DimensionUpdateListener.java

@@ -27,6 +27,9 @@
 import android.view.View;
 import android.view.ViewGroup;
 
+import com.taobao.weex.ui.component.WXComponent;
+import com.taobao.weex.ui.view.IRenderResult;
+
 public class DimensionUpdateListener implements ValueAnimator.AnimatorUpdateListener {
 
   private View view;
@@ -68,6 +71,17 @@ public void onAnimationUpdate(ValueAnimator animation) {
       if (preHeight != layoutParams.height || preWidth != layoutParams.width) {
         view.requestLayout();
       }
+
+      if (view instanceof IRenderResult) {
+        WXComponent component = ((IRenderResult) view).getComponent();
+        if (component != null) {
+          if (preWidth != layoutParams.width || preHeight != layoutParams.height) {
+            //Notify the animated component it native size has changed
+            //The component will decides whether to update domobject
+            component.notifyNativeSizeChanged(layoutParams.width, layoutParams.height);
+          }
+        }
+      }
     }
   }
 

android/sdk/src/main/java/com/taobao/weex/ui/animation/WXAnimationBean.java

@@ -54,6 +54,7 @@ public class WXAnimationBean {
   public long duration;
   public String timingFunction;
   public Style styles;
+  public boolean needLayout;
 
   public static class Style {
 

android/sdk/src/main/java/com/taobao/weex/ui/component/WXComponent.java

@@ -122,6 +122,7 @@ public abstract class  WXComponent<T extends View> implements IWXObject, IWXActi
   private boolean mIsDestroyed = false;
   private boolean mIsDisabled = false;
   private int mType = TYPE_COMMON;
+  private boolean mNeedLayoutOnAnimation = false;
 
   public static final int TYPE_COMMON = 0;
   public static final int TYPE_VIRTUAL = 1;
@@ -1450,4 +1451,40 @@ public void setStickyOffset(int stickyOffset) {
   public boolean isLayerTypeEnabled() {
     return getInstance().isLayerTypeEnabled();
   }
+
+  /**
+   * Sets whether or not to relayout page during animation, default is false
+   */
+  public void setNeedLayoutOnAnimation(boolean need) {
+    this.mNeedLayoutOnAnimation = need;
+  }
+
+  /**
+   * Trigger a updateStyle invoke to relayout current page
+   */
+  public void notifyNativeSizeChanged(int w, int h) {
+    if (!mNeedLayoutOnAnimation) {
+      return;
+    }
+
+    Message message = Message.obtain();
+    WXDomTask task = new WXDomTask();
+    task.instanceId = getInstanceId();
+    if (task.args == null) {
+      task.args = new ArrayList<>();
+    }
+
+    JSONObject style = new JSONObject(2);
+    float webW = WXViewUtils.getWebPxByWidth(w);
+    float webH = WXViewUtils.getWebPxByWidth(h);
+
+    style.put("width", webW);
+    style.put("height", webH);
+
+    task.args.add(getRef());
+    task.args.add(style);
+    message.obj = task;
+    message.what = WXDomHandler.MsgType.WX_DOM_UPDATE_STYLE;
+    WXSDKManager.getInstance().getWXDomManager().sendMessage(message);
+  }
 }

android/sdk/src/main/java/com/taobao/weex/ui/component/list/BasicListComponent.java

@@ -315,7 +315,7 @@ WXComponent findDirectListChild(WXComponent comp) {
       return null;
     }
 
-    if (parent instanceof WXListComponent) {
+    if (parent instanceof BasicListComponent) {
       return comp;
     }
 
@@ -551,7 +551,7 @@ public int getScrollX() {
   }
 
   /**
-   * Append a child component to the end of WXListComponent. This will not refresh the underlying
+   * Append a child component to the end of list. This will not refresh the underlying
    * view immediately. The message of index of the inserted child is given to the adapter, and the
    * adapter will determine when to refresh. The default implementation of adapter will push the
    * message into a message and refresh the view in a period of time.
@@ -661,7 +661,7 @@ protected void addSubView(View child, int index) {
   }
 
   /**
-   * Remove the child from WXListComponent. This method will use {@link
+   * Remove the child from list. This method will use {@link
    * java.util.List#indexOf(Object)} to retrieve the component to be deleted. Like {@link
    * #addChild(WXComponent)}, this method will not refresh the view immediately, the adapter will
    * decide when to refresh.
@@ -743,7 +743,7 @@ public void onViewRecycled(ListBaseViewHolder holder) {
    * Bind the component of the position to the holder. Then flush the view.
    *
    * @param holder   viewHolder, which holds reference to the view
-   * @param position position of component in WXListComponent
+   * @param position position of component in list
    */
   @Override
   public void onBindViewHolder(ListBaseViewHolder holder, int position) {

doc/source/cn/references/bubble.md

@@ -0,0 +1,146 @@
+---
+title: 事件冒泡 
+type: references
+order: 1.3
+version: 2.1
+---
+
+# 事件冒泡 <span class="api-version">v0.13+</span>
+
+Weex 2.0 实现了 W3C 标准的事件冒泡机制。
+
+### 使用
+
+```javascript
+<template>
+  <div class="root" @click="rootClick" bubble="true">
+    <text style="font-size: 40px;">{{rootText}}</text>
+    <div class="outer" @click="parentClick">
+      <div>
+        <text style="font-size: 40px;">{{parentText}}</text>
+      </div>
+      <text class="inner" @click="click">{{innerText}}</text>
+    </div>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+    data: {
+      innerText: 'click me',
+      parentText: '',
+      rootText: ''
+    },
+    methods: {
+      click: function(e) {
+        this.innerText = 'inner bubble'
+      },
+      parentClick: function(e) {
+        this.parentText = 'parent bubble'
+      },
+      rootClick: function(e) {
+        this.rootText = 'root bubble'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .inner {
+    font-size: 40px;
+    text-align: center;
+    background-color: #7a9b1b;
+    padding: 40px;
+  }
+
+  .outer {
+    font-size: 40px;
+    text-align: center;
+    background-color: #9b7a1b;
+    padding: 120px;
+  }
+
+  .root {
+    font-size: 40px;
+    text-align: center;
+    background-color: #7a1b9b;
+    padding: 80px;
+  }
+</style>
+```
+
+[try it](http://dotwe.org/vue/fa2957ce3e9eb47ad9ae1da22d845e95)
+
+运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播，依次触发。
+
+### 注意
+
+需要注意的是: ** 为了兼容之前的版本，Weex 默认不会开启事件冒泡机制。需要在根元素的属性上，添加 `bubble="true"` 来开启冒泡机制。否则，将不会向上传播事件，保持与之前版本的效果相同。 **
+
+### stopPropagation
+
+在事件处理函数中，可以使用 `e.stopPropagation()` 方法，来阻止本次事件向上的传递过程。注意，`e.stopPropagation()` 与 `bubble="true"` 不同，前者只会影响当前元素以及父元素的传播，不会影响子元素的传播；后者是为了版本兼容而增加的开关机制，会全局关闭或者开启冒泡机制，两者可以共同存在使用，如下：
+
+```javascript
+<template>
+  <div class="root" @click="rootClick" bubble="true">
+    <text style="font-size: 40px;">{{rootText}}</text>
+    <div class="outer" @click="parentClick">
+      <div>
+        <text style="font-size: 40px;">{{parentText}}</text>
+      </div>
+      <text class="inner" @click="click">{{innerText}}</text>
+    </div>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+    data: {
+      innerText: 'click me',
+      parentText: '',
+      rootText: ''
+    },
+    methods: {
+      click: function(e) {
+        this.innerText = 'inner bubble'
+      },
+      parentClick: function(e) {
+        this.parentText = 'parent bubble'
+        e.stopPropagation()
+      },
+      rootClick: function(e) {
+        this.rootText = 'root bubble'
+        // e.stopPropagation()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .inner {
+    font-size: 40px;
+    text-align: center;
+    background-color: #7a9b1b;
+    padding: 40px;
+  }
+
+  .outer {
+    font-size: 40px;
+    text-align: center;
+    background-color: #9b7a1b;
+    padding: 120px;
+  }
+
+  .root {
+    font-size: 40px;
+    text-align: center;
+    background-color: #7a1b9b;
+    padding: 80px;
+  }
+</style>
+```
+
+[try it](http://dotwe.org/vue/2cc80e19c9b2430fb780234628065a69)
+
+运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播到父元素被终止，不再继续往根元素传播。

doc/source/cn/references/downgrade.md

@@ -0,0 +1,11 @@
+---
+title: 降级方案 
+type: references
+order: 1.3
+version: 2.1
+---
+
+# 降级方案 
+
+Weex 2.0 降级方案改成模块的形式支持，具体请参考[downgrade](https://www.npmjs.com/package/@weex-project/downgrade)
+

doc/source/cn/references/index.md

@@ -14,4 +14,6 @@ version: 2.1
 - [文本样式](./text-style.html)
 - [颜色名称](./color-names.html)
 - [手势](./gesture.html)
-- [路径](./path.html)
+- [路径](./path.html)
+- [事件冒泡](./bubble.html)
+- [降级方案](./downgrade.html)