merge

src/view/cmp/cardSlider/CardSlider.jsx

@@ -37,9 +37,44 @@ const CardSlider = D.declare( 'view.cmp.CardSlider', (cfg) => {
 
 
   tmpStore.sub('width', Store.debounce(function(w) {
-    //console.log(w)
+    let firstItem = Math.round(dom.scrollLeft/(cardWidth+padding));
+    console.log(firstItem);
     update();
+    dom.scrollLeft = firstItem*(cardWidth+padding);
   }, 30));
+  let waitTimeout = false;
+  let tuning = false;
+  let tuneScrollPosition = function() {
+    waitTimeout = false;
+    tuning = true;
+    let fromLeft = dom.scrollLeft;
+    let firstItem = Math.round(fromLeft/(cardWidth+padding));
+    let toLeft = Math.round(firstItem*(cardWidth+padding));
+    let deltaMove = (toLeft - fromLeft)/Math.ceil(200/(1000/60));
+    let tune = function() {
+      if(Math.abs(dom.scrollLeft-toLeft) < Math.abs(deltaMove)){
+        dom.scrollLeft = toLeft;
+        tuning = false;
+      }else{
+        dom.scrollLeft += deltaMove;
+        requestAnimationFrame( tune );
+      }
+    };
+    if(Math.abs(deltaMove)>0){
+      requestAnimationFrame( tune );
+    }else{
+      tuning = false;
+    }
+
+  };
+  let waitUntilDoNotTouchScroll=function() {
+    if(tuning)
+      return;
+
+    if(waitTimeout)
+      clearTimeout(waitTimeout);
+    waitTimeout = setTimeout(tuneScrollPosition,200);
+  };
 
 
   let dom = <div class='cmp-CardSlider'>
@@ -105,7 +140,8 @@ const CardSlider = D.declare( 'view.cmp.CardSlider', (cfg) => {
   };
 
   dom.addEventListener('scroll', Store.debounce(function() {
-    requestAnimationFrame(updateVisibleDom)
+    requestAnimationFrame(updateVisibleDom);
+    waitUntilDoNotTouchScroll();
   }, 1000/60));
   cfg.items(function(i) {
     items = i;