Merge pull request #34 from canalplus/bug_find_start_id

wrapper is counted when finding start id element

Author: FlorentD

dev/dev.jsx

@@ -5,11 +5,11 @@ import {connect, Provider} from 'react-redux';
 import {Binder, StrapeBinder, keysInit, keysReducer, activeKeyBinder} from '../src';
 
 const logger = store => next => action => {
-  console.group(action.type);
-  console.info('dispatching', action);
+  // console.group(action.type);
+  // console.info('dispatching', action);
   const result = next(action);
-  console.info('next state', store.getState());
-  console.groupEnd(action.type);
+  // console.info('next state', store.getState());
+  // console.groupEnd(action.type);
   return result;
 };
 
@@ -22,32 +22,48 @@ keysInit({store: store});
 const PureMosaic = ({binder1, binder2}) => {
   const selectedId1 = binder1.selectedId;
   const active1 = binder1.active;
+  const binder1Style = {
+    marginLeft: -binder1.marginLeft,
+  };
   const selectedId2 = binder2.selectedId;
   const active2 = binder2.active;
+  const binder2Style = {
+    marginLeft: -binder2.marginLeft,
+  };
   return (
-    <div>
-      <Binder id="binder1" active={true} onDownExit="binder2">
-        <ul>
-          <li id="b1" className={active1 && selectedId1 === 'b1' ? 'selected' : ''}>BOUTON 1</li>
-          <li id="b2" className={active1 && selectedId1 === 'b2' ? 'selected' : ''}>BOUTON 2</li>
-          <li id="b3" className={active1 && selectedId1 === 'b3' ? 'selected' : ''}>BOUTON 3</li>
-        </ul>
-      </Binder>
-      <StrapeBinder id="binder2" onUpExit="binder1" exitStrategy="start">
-        <ul>
-          <li id="b4" className={active2 && selectedId2 === 'b4' ? 'selected' : ''}>BOUTON 4</li>
-          <li id="b5" className={active2 && selectedId2 === 'b5' ? 'selected' : ''}>BOUTON 5</li>
-          <li id="b6" className={active2 && selectedId2 === 'b6' ? 'selected' : ''}>BOUTON 6</li>
-        </ul>
+    <div className="container">
+      <StrapeBinder id="binder1" onDownExit="binder2" exitStrategy="start" active={true}
+                    wrapper=".wrapper">
+        <div className="wrapper">
+          <ul style={binder1Style}>
+            <li id="b1" className={active1 && selectedId1 === 'b1' ? 'selected' : ''}>BOUTON 1</li>
+            <li id="b2" className={active1 && selectedId1 === 'b2' ? 'selected' : ''}>BOUTON 2</li>
+            <li id="b3" className={active1 && selectedId1 === 'b3' ? 'selected' : ''}>BOUTON 3</li>
+            <li id="b4" className={active1 && selectedId1 === 'b4' ? 'selected' : ''}>BOUTON 4</li>
+            <li id="b5" className={active1 && selectedId1 === 'b5' ? 'selected' : ''}>BOUTON 5</li>
+            <li id="b6" className={active1 && selectedId1 === 'b6' ? 'selected' : ''}>BOUTON 6</li>
+          </ul>
+        </div>
+      </StrapeBinder>
+      <StrapeBinder id="binder2" onUpExit="binder1" exitStrategy="start" wrapper=".wrapper">
+        <div className="wrapper">
+          <ul style={binder2Style}>
+            <li id="b7" className={active2 && selectedId2 === 'b7' ? 'selected' : ''}>BOUTON 7</li>
+            <li id="b8" className={active2 && selectedId2 === 'b8' ? 'selected' : ''}>BOUTON 8</li>
+            <li id="b9" className={active2 && selectedId2 === 'b9' ? 'selected' : ''}>BOUTON 9</li>
+            <li id="b10" className={active2 && selectedId2 === 'b10' ? 'selected' : ''}>BOUTON 10
+            </li>
+            <li id="b11" className={active2 && selectedId2 === 'b11' ? 'selected' : ''}>BOUTON 11
+            </li>
+            <li id="b12" className={active2 && selectedId2 === 'b12' ? 'selected' : ''}>BOUTON 12
+            </li>
+          </ul>
+        </div>
       </StrapeBinder>
     </div>
   );
 };
 
-function onEnter(element) {
-  alert('ELEMENT #' + element.id);
-}
-
 const Mosaic = connect(state => {
   return {
     binder1: state['@@keys'].getBinder('binder1'),

dev/index.html

@@ -5,8 +5,19 @@
     <title>flipflop example</title>
     <style>
 
+        .container {
+            width: 1080px;
+            margin: auto;
+        }
+
+        .wrapper {
+            width: 1080px;
+            overflow: hidden;
+        }
+
         ul {
             padding: 0px;
+            width: 40000px;
         }
 
         li {

src/engines/strape.js

@@ -15,12 +15,13 @@ export function findMirrorExitId(leftElement, children) {
   return nextFocusedId[0].id;
 }
 
-export function findStartExitId(children) {
+export function findStartExitId(children, dom) {
+  const leftContainer = dom.getBoundingClientRect().left;
   const nextFocusedId = children
     .map(el => {
       return {
         id: el.id,
-        left: el.getBoundingClientRect().left,
+        left: el.getBoundingClientRect().left - leftContainer,
       };
     })
     .filter(el => el.left > 0)

src/redux/actions.js

@@ -73,15 +73,15 @@ export function _updateBinderState(binderId, binderState) {
   }
 }
 
-export function exitStrape(strategy, callback, nextElId, children) {
+export function exitStrape(strategy, callback, nextElId, children, dom) {
   switch (strategy) {
     case EXIT_STRATEGY_MIRROR:
       const leftElement = document.getElementById(nextElId);
       const mirrorId = findMirrorExitId(leftElement, children);
       _activeKeyBinder(callback, mirrorId, true);
       break;
     case EXIT_STRATEGY_START:
-      const startId = findStartExitId(children);
+      const startId = findStartExitId(children, dom);
       _activeKeyBinder(callback, startId, true);
       break;
     case EXIT_STRATEGY_MEMORY:
@@ -113,7 +113,7 @@ export function exit(strategy, callback, nextElId) {
       } else {
         const dom = document.getElementById(callback) || document;
         const children = [].slice.call(dom.querySelectorAll(nextBinderState.wChildren));
-        exitStrape(strategy, callback, nextElId, children);
+        exitStrape(strategy, callback, nextElId, children, dom);
       }
     } else {
       callback();

test/engines/strape.spec.js

@@ -82,6 +82,35 @@ describe('engine/strape.js', () => {
     });
     describe('findStartExitId', () => {
       it('should return closed element to 0 left', () => {
+        const wrapper = {
+          getBoundingClientRect: () => {
+            return {left: 0};
+          },
+        };
+        const children = [{
+          id: 1,
+          getBoundingClientRect: () => {
+            return {left: -10};
+          },
+        }, {
+          id: 2,
+          getBoundingClientRect: () => {
+            return {left: 2};
+          },
+        }, {
+          id: 3,
+          getBoundingClientRect: () => {
+            return {left: 12};
+          },
+        }];
+        findStartExitId(children, wrapper).should.equal(2);
+      });
+      it('should wrapper left be counted', () => {
+        const wrapper = {
+          getBoundingClientRect: () => {
+            return {left: 10};
+          },
+        };
         const children = [{
           id: 1,
           getBoundingClientRect: () => {
@@ -98,7 +127,7 @@ describe('engine/strape.js', () => {
             return {left: 12};
           },
         }];
-        findStartExitId(children).should.equal(2);
+        findStartExitId(children, wrapper).should.equal(3);
       });
     });
   });