alibaba · Jinjiang · Apr 21, 2016 · Apr 21, 2016 · Apr 21, 2016
diff --git a/src/h5-render/package.json b/src/h5-render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "weex-html5",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "weex html5 renderer",
   "contributors": [
     {
@@ -21,7 +21,7 @@
     "fixedsticky": "^0.1.0",
     "httpurl": "^0.1.1",
     "kountdown": "^0.1.1",
-    "lazyimg": "^0.1.0",
+    "lazyimg": "^0.1.1",
     "modals": "^0.1.1",
     "scroll-to": "0.0.2",
     "scrolljs": "^0.1.0",

diff --git a/src/h5-render/src/appearWatcher.js b/src/h5-render/src/appearWatcher.js
@@ -2,25 +2,31 @@
 
 var utils = require('./utils')
 
-var watchComponents = []
+var componentsInScroller = []
+var componentsOutOfScroller = []
 var listened = false
 var direction = 'up'
 var scrollY = 0
 
 var AppearWatcher = {
   watchIfNeeded: function (component) {
     if (needWatch(component)) {
-      watchComponents.push(component)
+      if (component.isInScrollable()) {
+        componentsInScroller.push(component)
+      } else {
+        componentsOutOfScroller.push(component)
+      }
       if (!listened) {
         listened = true
+        // var handler = throttle(onScroll, 25)
         var handler = throttle(onScroll, 100)
         window.addEventListener('scroll', handler, false)
       }
     }
   }
 }
 
-function needWatch (component) {
+function needWatch(component) {
   var events = component.data.event
   if (events
       && (events.indexOf('appear') != -1
@@ -30,17 +36,44 @@ function needWatch (component) {
   return false
 }
 
-function onScroll (e) {
+function onScroll(e) {
+  // If the scroll event is dispatched from a scrollable component
+  // implemented through scrollerjs, then the appear/disappear events
+  // should be treated specially by handleScrollerScroll.
+  if (e.originalType === 'scrolling') {
+    handleScrollerScroll()
+  } else {
+    handleWindowScroll()
+  }
+}
+
+function handleScrollerScroll() {
+  var cmps = componentsInScroller
+  var len = cmps.length
+  for (var i = 0; i < len; i++) {
+    var component = cmps[i]
+    var appear = isComponentInScrollerAppear(component)
+    if (appear && !component._appear) {
+      component._appear = true
+      fireEvent(component, 'appear')
+    } else if (!appear && component._appear) {
+      component._appear = false
+      fireEvent(component, 'disappear')
+    }
+  }
+}
+
+function handleWindowScroll() {
   var y = window.scrollY
   direction = y >= scrollY ? 'up'
10000
; : 'down'
   scrollY = y
 
-  var len = watchComponents.length
+  var len = componentsOutOfScroller.length
   if (len === 0) {
     return
   }
   for (var i = 0; i < len; i++) {
-    var component = watchComponents[i]
+    var component = componentsOutOfScroller[i]
     var appear = isComponentInWindow(component)
     if (appear && !component._appear) {
       component._appear = true
@@ -52,13 +85,32 @@ function onScroll (e) {
   }
 }
 
-function isComponentInWindow (component) {
+function isComponentInScrollerAppear(component) {
+  var parentScroller = component._parentScroller
+  var cmpRect = component.node.getBoundingClientRect()
+  if (!isComponentInWindow(component)) {
+    return false
+  }
+  while (parentScroller) {
+    var parentRect = parentScroller.node.getBoundingClientRect()
+    if (!(cmpRect.right > parentRect.left
+        && cmpRect.left < parentRect.right
+        && cmpRect.bottom > parentRect.top
+        && cmpRect.top < parentRect.bottom)) {
+      return false
+    }
+    parentScroller = parentScroller._parentScroller
+  }
+  return true
+}
+
+function isComponentInWindow(component) {
   var rect = component.node.getBoundingClientRect()
   return rect.right > 0 && rect.left < window.innerWidth &&
          rect.bottom > 0 && rect.top < window.innerHeight
 }
 
-function fireEvent (component, type) {
+function fireEvent(component, type) {
   var evt = document.createEvent('HTMLEvents')
   var data = { direction: direction }
   evt.initEvent(type, false, false)
@@ -67,7 +119,7 @@ function fireEvent (component, type) {
   component.node.dispatchEvent(evt)
 }
 
-function throttle (func, wait) {
+function throttle(func, wait) {
   var context, args, result
   var timeout = null
   var previous = 0

diff --git a/src/h5-render/src/componentManager.js b/src/h5-render/src/componentManager.js
@@ -11,6 +11,7 @@ var RENDERING_INDENT = 800
 
 var _instanceMap = {}
 var typeMap = {}
+var scrollableTypes = ['scroller', 'list']
 
 function ComponentManager(instance) {
   this.instanceId = instance.instanceId
@@ -31,6 +32,10 @@ ComponentManager.registerComponent = function (type, definition) {
   typeMap[type] = definition
 }
 
+ComponentManager.getScrollableTypes = function () {
+  return scrollableTypes
+}
+
 ComponentManager.prototype = {
 
   // Fire a event 'renderbegin'/'renderend' on body element.

diff --git a/src/h5-render/src/components/component.js b/src/h5-render/src/components/component.js
@@ -32,6 +32,46 @@ Component.prototype = {
     return ComponentManager.getInstance(this.data.instanceId)
   },
 
+  getParent: function () {
+    return this.getComponentManager().componentMap[this.parentRef]
+  },
+
+  isScrollable: function () {
+    var t = this.data.type
+    return ComponentManager.getScrollableTypes().indexOf(t) !== -1
+  },
+
+  isInScrollable: function () {
+    if (typeof this._isInScrollable === 'boolean') {
+      return this._isInScrollable
+    }
+    var parent = this.getParent()
+    if (parent
+        && (typeof parent._isInScrollable !== 'boolean')
+        && !parent.isScrollable()) {
+      if (parent.data.type === 'root') {
+        this._isInScrollable = false
+        return false
+      }
+      this._isInScrollable = parent.isInScrollable()
+      this._parentScroller = parent._parentScroller
+      return this._isInScrollable
+    }
+    if (typeof parent._isInScrollable === 'boolean') {
+      this._isInScrollable = parent._isInScrollable
+      this._parentScroller = parent._parentScroller
+      return this._isInScrollable
+    }
+    if (parent.isScrollable()) {
+      this._isInScrollable = true
+      this._parentScroller = parent
+      return true
+    }
+    if (!parent) {
+      console && console.error('isInScrollable - parent not exist.')
+    }
+  },
+
   createChildren: function () {
     var children = this.data.children
     var parentRef = this.data.ref
@@ -43,7 +83,6 @@ Component.prototype = {
         children[i].instanceId = this.data.instanceId
         children[i].scale = this.data.scale
         var child = componentManager.createElement(children[i])
-        child.parentRef = this.data.ref
         fragment.appendChild(child.node)
         child.parentRef = parentRef
         if (!isFlex
@@ -63,7 +102,6 @@ Component.prototype = {
     var componentManager = this.getComponentManager()
     var child = componentManager.createElement(data)
     this.node.appendChild(child.node)
-
     // update this.data.children
     if (!children || !children.length) {
       this.data.children = [data]
@@ -94,6 +132,7 @@ Component.prototype = {
       }
     }
 
+
     if (isAppend) {
       this.node.appendChild(child.node)
       children.push(child.data)
@@ -188,6 +227,9 @@ Component.prototype = {
     !data && (data = {})
     event.data = utils.extend({}, data)
     utils.extend(event, data)
+    if (type === 'appear') {
+      console.log('appear', data)
+    }
     this.node.dispatchEvent(event)
   },
 

diff --git a/src/h5-render/src/components/list.js b/src/h5-render/src/components/list.js
@@ -38,7 +38,12 @@ List.prototype.bindEvents = function (evts) {
   Component.prototype.bindEvents.call(this, evts)
   // to enable lazyload for Images.
   this.scroller.addEventListener('scrolling', function (e) {
-    this.dispatchEvent('scroll', null, {
+    var so = e.scrollObj
+    this.dispatchEvent('scroll', {
+      originalType: 'scrolling',
+      scrollTop: so.getScrollTop(),
+      scrollLeft: so.getScrollLeft()
+    }, {
       bubbles: true
     })
   }.bind(this))

diff --git a/src/h5-render/src/components/root.js b/src/h5-render/src/components/root.js
@@ -5,7 +5,7 @@ var Component = require('./component')
 
 // If nodeType is in this WHITE_LIST, just ignore it and
 // replace it with a div element.
-var WHITE_LIST = ['scroller']
+var WHITE_LIST = []
 
 function RootComponent(data, nodeType) {
   var id = data.rootId + '-root'

diff --git a/src/h5-render/src/components/scroller.js b/src/h5-render/src/components/scroller.js
@@ -17,6 +17,7 @@ require('scrolljs')
 //  - contentrefresh
 
 var Component = require('./component')
+var utils = require('../utils')
 
 // attrs:
 //  - scroll-direciton: none|vertical|horizontal (default is vertical)
@@ -57,7 +58,12 @@ Scroller.prototype.bindEvents = function (evts) {
   Component.prototype.bindEvents.call(this, evts)
   // to enable lazyload for Images
   this.scroller.addEventListener('scrolling', function (e) {
-    this.dispatchEvent('scroll', null, {
+    var so = e.scrollObj
+    this.dispatchEvent('scroll', {
+      originalType: 'scrolling',
+      scrollTop: so.getScrollTop(),
+      scrollLeft: so.getScrollLeft()
+    }, {
       bubbles: true
     })
   }.bind(this))

diff --git a/src/h5-render/src/components/switch.js b/src/h5-render/src/components/switch.js
@@ -174,30 +174,30 @@ Switch.prototype.getClickHandler = function () {
 Switch.prototype.style
     = utils.extend(Object.create(Atomic.prototype.style), {
 
-  width: function (val) {
-    if (!this.options.scalable) {
-      return
-    }
-    val = parseFloat(val)
-    if (val !== val || val < 0) { // NaN
-      val = this.options.width
-    }
-    this.width = val * this.data.scale
-    this.setSize()
-  },
-
-  height: function (val) {
-    if (!this.options.scalable) {
-      return
-    }
-    val = parseFloat(val)
-    if (val !== val || val < 0) { // NaN
-      val = this.options.height
-    }
-    this.height = val * this.data.scale
-    this.setSize()
-  }
-
-})
+      width: function (val) {
+        if (!this.options.scalable) {
+          return
+        }
+        val = parseFloat(val)
+        if (val !== val || val < 0) { // NaN
+          val = this.options.width
+        }
+        this.width = val * this.data.scale
+        this.setSize()
+      },
+
+      height: function (val) {
+        if (!this.options.scalable) {
+          return
+        }
+        val = parseFloat(val)
+        if (val !== val || val < 0) { // NaN
+          val = this.options.height
+        }
+        this.height = val * this.data.scale
+        this.setSize()
+      }
+
+    })
 
 module.exports = Switch
diff --git a/src/h5-render/src/lazyLoad.js b/src/h5-render/src/lazyLoad.js
@@ -27,10 +27,11 @@ var LazyLoad = {
   // is no way that any image element can miss it. See source
   // code in componentMangager.js.
   startIfNeeded: function (component) {
+    var that = this
     if (component.data.type === 'image') {
       if (!lazyloadTimer) {
         lazyloadTimer = setTimeout(function () {
-          lib.img.fire()
+          that.fire()
           clearTimeout(lazyloadTimer)
           lazyloadTimer = null
         }, 16)
@@ -40,6 +41,7 @@ var LazyLoad = {
 
   loadIfNeeded: function (elementScope) {
     var notPreProcessed = elementScope.querySelectorAll('[img-src]')
+    var that = this
     // image elements which have attribute 'i-lazy-src' were elements
     // that had been preprocessed by lib-img-core, but not loaded yet, and
     // must be loaded when 'appear' events were fired. It turns out the
@@ -48,7 +50,7 @@ var LazyLoad = {
     // fired manually.
     var preProcessed = elementScope.querySelectorAll('[i-lazy-src]')
     if (notPreProcessed.length > 0 || preProcessed.length > 0) {
-      lib.img.fire()
+      that.fire()
     }
   },