Skip to content
This repository was archived by the owner on Apr 1, 2021. It is now read-only.

Commit 3ae1af3

Browse files
FlorentDFlorentD
authored
Merge pull request #35 from canalplus/bug_with_strategies_on_enter
switch strategy view point (exit to enter) which fix issue strategy
2 parents bc63285 + f97e518 commit 3ae1af3

File tree

11 files changed

+72
-82
lines changed

11 files changed

+72
-82
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ renderWithId('mosaic-1-1');
7373
* `selector` (string / *optional*) DOM selector which define each element (default `li`)
7474
* `focusedElementId` (string / *optional*) id to define the element focused (first element by default)
7575
* `context` (object / *optional*) context object passed within every callback
76-
* `exitStrategy` (string / *optional*) define strape strategy : `memory` / `none` (default `none`)
76+
* `enterStrategy` (string / *optional*) define strape strategy on enter : `memory` / `none` (default `none`)
7777
* `accuracy` (number / *optional*) give tolerance for elements calculation, useful when your elements are not well aligned (default `O`)
7878
* `onRight` (function / *optional*) callback for right events `function(nextElement, {context})`
7979
* `onLeft` (function / *optional*) callback for left events `function(nextElement, {context})`
@@ -92,7 +92,7 @@ renderWithId('mosaic-1-1');
9292
* `wrapper` (string / *optional*) DOM selector which define parent element (default `ul`)
9393
* `wChildren` (string / *optional*) DOM selector which define children elements (default `li`)
9494
* `strategy` (string / *optional*) define strape strategy : `progressive` / `cut` / `bounds` (default `progressive`)
95-
* `exitStrategy` (string / *optional*) define strape strategy : `start` / `mirror` / `memory` / `none` (default `none`)
95+
* `enterStrategy` (string / *optional*) define strape strategy on enter: `start` / `mirror` / `memory` / `none` (default `none`)
9696
* `circular` (boolean / *optional*) define if strape has no boundaries (default `false`)
9797
* `gap` (number / *optional*) reduce or increase elements margin (default `0`)
9898
* `lastGap` (number / *optional*) reduce or increase last element margin (default `0`)

‎dev/dev.jsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,19 @@ keysInit({store: store});
2222
const PureMosaic = ({binder1, binder2}) => {
2323
const selectedId1 = binder1.selectedId;
2424
const active1 = binder1.active;
25-
const binder1Style = {
26-
marginLeft: -binder1.marginLeft,
27-
};
2825
const selectedId2 = binder2.selectedId;
2926
const active2 = binder2.active;
3027
const binder2Style = {
3128
marginLeft: -binder2.marginLeft,
3229
};
3330
return (
3431
<div className="container">
35-
<StrapeBinder id="binder1" onDownExit="binder2" exitStrategy="start" active={true}
32+
<Binder id="binder1" onDownExit="binder2" active={true}>
33+
<li id="b1" className={active1 && selectedId1 === 'b1' ? 'selected' : ''}>BOUTON 1</li>
34+
<li id="b2" className={active1 && selectedId1 === 'b2' ? 'selected' : ''}>BOUTON 2</li>
35+
</Binder>
36+
<StrapeBinder id="binder2" onUpExit="binder1" enterStrategy="start" strategy="bounds"
3637
wrapper=".wrapper">
37-
<div className="wrapper">
38-
<ul style={binder1Style}>
39-
<li id="b1" className={active1 && selectedId1 === 'b1' ? 'selected' : ''}>BOUTON 1</li>
40-
<li id="b2" className={active1 && selectedId1 === 'b2' ? 'selected' : ''}>BOUTON 2</li>
41-
<li id="b3" className={active1 && selectedId1 === 'b3' ? 'selected' : ''}>BOUTON 3</li>
42-
<li id="b4" className={active1 && selectedId1 === 'b4' ? 'selected' : ''}>BOUTON 4</li>
43-
<li id="b5" className={active1 && selectedId1 === 'b5' ? 'selected' : ''}>BOUTON 5</li>
44-
<li id="b6" className={active1 && selectedId1 === 'b6' ? 'selected' : ''}>BOUTON 6</li>
45-
</ul>
46-
</div>
47-
</StrapeBinder>
48-
<StrapeBinder id="binder2" onUpExit="binder1" exitStrategy="start" wrapper=".wrapper">
4938
<div className="wrapper">
5039
<ul style={binder2Style}>
5140
<li id="b7" className={active2 && selectedId2 === 'b7' ? 'selected' : ''}>BOUTON 7</li>

‎examples/multistrape/strape.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const PureStrape = ({selectedId, marginLeft, binderId, active, onDownExit, onUpE
3434
active={active}
3535
wrapper="#wrapper"
3636
strategy="progressive"
37-
exitStrategy="memory"
37+
enterStrategy="memory"
3838
gap={13}
3939
lastGap={13}
4040
onDownExit={onDownExit}

‎src/Binder.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {C_UP, C_DOWN, C_LEFT, C_RIGHT, BINDER_TYPE} from './constants';
77
import {isBlocked, block} from './clock';
88
import {isActive} from './isActive';
99
import {nextFocusedElement} from './nextFocusedElement';
10-
import {execCb, exitTo} from './funcHandler';
10+
import {execCb, enterTo} from './funcHandler';
1111
import {calculateNewState} from './calculateNewState';
1212
import {addListener, removeListener, globalStore} from './listener';
1313
import {addKeyBinderToStore, updateSelectedId, _updateBinderState} from './redux/actions';
@@ -20,7 +20,7 @@ class Binder extends Component {
2020
id: PropTypes.string.isRequired,
2121
selector: PropTypes.string,
2222
focusedElementId: PropTypes.string,
23-
exitStrategy: PropTypes.string,
23+
enterStrategy: PropTypes.string,
2424
context: PropTypes.object,
2525
active: PropTypes.bool,
2626
accuracy: PropTypes.number,
@@ -54,7 +54,7 @@ class Binder extends Component {
5454
selector: 'li',
5555
accuracy: 0,
5656
active: false,
57-
exitStrategy: 'none',
57+
enterStrategy: 'none',
5858
};
5959
}
6060

@@ -107,7 +107,7 @@ class Binder extends Component {
107107
updateSelectedId(this.props.id, this.nextEl.id, this.nextEl.marginLeft);
108108
execCb(cb, this.nextEl, this, this.props);
109109
} else {
110-
exitTo(this.props.exitStrategy, exitCb);
110+
enterTo(exitCb);
111111
}
112112
}
113113

@@ -127,7 +127,7 @@ class Binder extends Component {
127127
_updateBinderState(this.props.id, {
128128
id: this.props.id,
129129
type: BINDER_TYPE,
130-
exitStrategy: this.props.exitStrategy,
130+
enterStrategy: this.props.enterStrategy,
131131
elements: this.elements,
132132
selectedId: this.nextEl.id,
133133
});

‎src/StrapeBinder.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import {C_LEFT, C_RIGHT, STRAPE_TYPE} from './constants';
66
import {refresh, calculateBounds} from './engines/strape';
77
import {isBlocked, block} from './clock';
88
import {isActive} from './isActive';
9-
import {execCb, exitTo} from './funcHandler';
9+
import {execCb, enterTo} from './funcHandler';
1010
import {nextFocusedElement} from './nextFocusedElement';
1111
import {calculateNewState} from './calculateNewState';
1212
import {addListener, removeListener, globalStore} from './listener';
1313
import {
1414
addKeyBinderToStore,
1515
updateSelectedId,
1616
_updateBinderState,
17-
exit,
17+
enter,
1818
} from './redux/actions';
1919
import {hasDiff} from './hasDiff';
2020

@@ -58,7 +58,7 @@ class StrapeBinder extends Component {
5858
static get defaultProps() {
5959
return {
6060
strategy: 'progressive',
61-
exitStrategy: 'none',
61+
enterStrategy: 'none',
6262
gap: 0,
6363
lastGap: 0,
6464
accuracy: 0,
@@ -103,11 +103,11 @@ class StrapeBinder extends Component {
103103
break;
104104
case UP:
105105
this.prevDir = null;
106-
exit(this.props.exitStrategy, this.props.onUpExit, this.nextEl.id);
106+
enter(this.props.onUpExit, this.nextEl.id);
107107
break;
108108
case DOWN:
109109
this.prevDir = null;
110-
exit(this.props.exitStrategy, this.props.onDownExit, this.nextEl.id);
110+
enter(this.props.onDownExit, this.nextEl.id);
111111
break;
112112
case BACK:
113113
this.prevDir = null;
@@ -133,7 +133,7 @@ class StrapeBinder extends Component {
133133
updateSelectedId(this.props.id, this.nextEl.id, this.marginLeft);
134134
execCb(cb, this.nextEl, this, this.props);
135135
} else {
136-
exitTo(this.props.exitStrategy, exitCb);
136+
enterTo(exitCb);
137137
}
138138
}
139139

@@ -162,7 +162,7 @@ class StrapeBinder extends Component {
162162
id: this.props.id,
163163
elements: this.elements,
164164
type: STRAPE_TYPE,
165-
exitStrategy: this.props.exitStrategy,
165+
enterStrategy: this.props.enterStrategy,
166166
selectedId: this.nextEl.id,
167167
marginLeft: this.nextEl.marginLeft,
168168
wChildren: this.props.wChildren,

‎src/funcHandler.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {exit} from './redux/actions';
1+
import {enter} from './redux/actions';
22

33
export function execCb(func, nextEl, _this, props) {
44
if (!func) return;
@@ -9,10 +9,10 @@ export function execCb(func, nextEl, _this, props) {
99
}
1010
}
1111

12-
export function exitTo(strategy, callback, nextId) {
12+
export function enterTo(callback, nextId) {
1313
if (callback) {
1414
if (typeof callback === 'string') {
15-
exit(strategy, callback, nextId);
15+
enter(callback, nextId);
1616
} else {
1717
callback();
1818
}

‎src/redux/actions.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ export function _activeKeyBinder(binderId, id, memory = false) {
2929
if (globalStore.dispatch) {
3030
const newState = clone(globalStore.getState()[NAME]);
3131
for (const key of Object.keys(newState)) {
32-
if (newState[key].active) {
33-
newState[key].active = false;
34-
if (!memory) {
35-
newState[key].selectedId = newState[key].elements && newState[key].elements[0].id;
36-
}
37-
}
32+
newState[key].active = false;
3833
}
3934
if (Object.keys(newState).some(key => key === binderId)) {
4035
newState[binderId].active = true;
41-
newState[binderId].selectedId = id || newState[binderId].selectedId;
36+
if (!memory) {
37+
newState[binderId].selectedId =
38+
newState[binderId].elements && newState[binderId].elements[0].id;
39+
} else {
40+
newState[binderId].selectedId = id || newState[binderId].selectedId;
41+
}
4242
globalStore.dispatch({
4343
type: ACTIVE_KEYBINDER,
4444
state: newState,
@@ -73,7 +73,7 @@ export function _updateBinderState(binderId, binderState) {
7373
}
7474
}
7575

76-
export function exitStrape(strategy, callback, nextElId, children, dom) {
76+
export function enterStrape(strategy, callback, nextElId, children, dom) {
7777
switch (strategy) {
7878
case EXIT_STRATEGY_MIRROR:
7979
const leftElement = document.getElementById(nextElId);
@@ -93,7 +93,7 @@ export function exitStrape(strategy, callback, nextElId, children, dom) {
9393
}
9494
}
9595

96-
export function exitBinder(strategy, callback) {
96+
export function enterBinder(strategy, callback) {
9797
switch (strategy) {
9898
case EXIT_STRATEGY_MEMORY:
9999
_activeKeyBinder(callback, null, true);
@@ -104,16 +104,17 @@ export function exitBinder(strategy, callback) {
104104
}
105105
}
106106

107-
export function exit(strategy, callback, nextElId) {
107+
export function enter(callback, nextElId) {
108108
if (callback) {
109109
if (typeof callback === 'string') {
110110
const nextBinderState = globalStore.getState()[NAME][callback] || {};
111+
const strategy = nextBinderState.enterStrategy;
111112
if (nextBinderState.type === BINDER_TYPE) {
112-
exitBinder(strategy, callback);
113+
enterBinder(strategy, callback);
113114
} else {
114115
const dom = document.getElementById(callback) || document;
115116
const children = [].slice.call(dom.querySelectorAll(nextBinderState.wChildren));
116-
exitStrape(strategy, callback, nextElId, children, dom);
117+
enterStrape(strategy, callback, nextElId, children, dom);
117118
}
118119
} else {
119120
callback();

‎test/Binder.spec.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -113,18 +113,18 @@ describe('Binder.jsx', () => {
113113
};
114114
const dir = 'left';
115115
const cb = () => null;
116-
const exitCb = () => null;
116+
const enterCb = () => null;
117117
this.mock(mosaic)
118118
.expects('calculateNewState')
119119
.once()
120120
.withArgs(dir);
121121
const updateSelectedIdSpy = this.spy(actions, 'updateSelectedId');
122122
const execCbSpy = this.spy(funcHandler, 'execCb');
123-
const exitCbSpy = this.spy(funcHandler, 'exitTo');
124-
mosaic.performAction(dir, cb, exitCb);
123+
const enterCbSpy = this.spy(funcHandler, 'enterTo');
124+
mosaic.performAction(dir, cb, enterCb);
125125
updateSelectedIdSpy.should.have.been.calledOnce;
126126
execCbSpy.should.have.been.calledOnce;
127-
exitCbSpy.should.have.been.callCount(0);
127+
enterCbSpy.should.have.been.callCount(0);
128128
}));
129129

130130
it('should call exitCb when it has not moved on performAction', sinon.test(function() {
@@ -139,18 +139,18 @@ describe('Binder.jsx', () => {
139139
};
140140
const dir = 'left';
141141
const cb = () => null;
142-
const exitCb = () => null;
142+
const enterCb = () => null;
143143
this.mock(mosaic)
144144
.expects('calculateNewState')
145145
.once()
146146
.withArgs(dir);
147147
const updateSelectedIdSpy = this.spy(actions, 'updateSelectedId');
148148
const execCbSpy = this.spy(funcHandler, 'execCb');
149-
const exitCbSpy = this.spy(funcHandler, 'exitTo');
150-
mosaic.performAction(dir, cb, exitCb);
149+
const enterCbSpy = this.spy(funcHandler, 'enterTo');
150+
mosaic.performAction(dir, cb, enterCb);
151151
updateSelectedIdSpy.should.have.been.callCount(0);
152152
execCbSpy.should.have.been.callCount(0);
153-
exitCbSpy.should.have.been.calledOnce;
153+
enterCbSpy.should.have.been.calledOnce;
154154
}));
155155

156156
it('should calculateNewState set new props to component', sinon.test(function() {

‎test/StrapeBinder.spec.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -169,21 +169,21 @@ describe('StrapeBinder.jsx', () => {
169169
};
170170
const dir = 'left';
171171
const cb = () => null;
172-
const exitCb = () => null;
172+
const enterCb = () => null;
173173
this.mock(strape)
174174
.expects('calculateNewState')
175175
.once()
176176
.withArgs(dir);
177177
const updateSelectedIdSpy = this.spy(actions, 'updateSelectedId');
178178
const execCbSpy = this.spy(funcHandler, 'execCb');
179-
const exitCbSpy = this.spy(funcHandler, 'exitTo');
180-
strape.performAction(dir, cb, exitCb);
179+
const enterCbSpy = this.spy(funcHandler, 'enterTo');
180+
strape.performAction(dir, cb, enterCb);
181181
updateSelectedIdSpy.should.have.been.calledOnce;
182182
execCbSpy.should.have.been.calledOnce;
183-
exitCbSpy.should.have.been.callCount(0);
183+
enterCbSpy.should.have.been.callCount(0);
184184
}));
185185

186-
it('should call exitCb when it has not moved on performAction', sinon.test(function() {
186+
it('should call enterCb when it has not moved on performAction', sinon.test(function() {
187187
const strape = new StrapeBinder();
188188
strape.hasMoved = false;
189189
strape.nextEl = {
@@ -195,18 +195,18 @@ describe('StrapeBinder.jsx', () => {
195195
};
196196
const dir = 'left';
197197
const cb = () => null;
198-
const exitCb = () => null;
198+
const enterCb = () => null;
199199
this.mock(strape)
200200
.expects('calculateNewState')
201201
.once()
202202
.withArgs(dir);
203203
const updateSelectedIdSpy = this.spy(actions, 'updateSelectedId');
204204
const execCbSpy = this.spy(funcHandler, 'execCb');
205-
const exitCbSpy = this.spy(funcHandler, 'exitTo');
206-
strape.performAction(dir, cb, exitCb);
205+
const enterCbSpy = this.spy(funcHandler, 'enterTo');
206+
strape.performAction(dir, cb, enterCb);
207207
updateSelectedIdSpy.should.have.been.callCount(0);
208208
execCbSpy.should.have.been.callCount(0);
209-
exitCbSpy.should.have.been.calledOnce;
209+
enterCbSpy.should.have.been.calledOnce;
210210
}));
211211

212212
it('should calculateNewState set new props to component', sinon.test(function() {
@@ -256,17 +256,17 @@ describe('StrapeBinder.jsx', () => {
256256
strape.keysHandler(30);
257257
}));
258258

259-
it('should call exit and init prevDir on UP key', sinon.test(function() {
259+
it('should call enter and init prevDir on UP key', sinon.test(function() {
260260
this.mock(actions)
261-
.expects('exit')
261+
.expects('enter')
262262
.once()
263-
.withArgs('bounds', 'myup', 'nextEl2');
263+
.withArgs('myup', 'nextEl2');
264264
this.stub(active, 'isActive').returns(true);
265265
this.stub(clock, 'isBlocked').returns(false);
266266
const strape = new StrapeBinder();
267267
strape.props = {
268268
id: 1,
269-
exitStrategy: 'bounds',
269+
enterStrategy: 'bounds',
270270
onUpExit: 'myup',
271271
};
272272
strape.nextEl = {id: 'nextEl2'};
@@ -275,17 +275,17 @@ describe('StrapeBinder.jsx', () => {
275275
expect(strape.prevDir).to.be.null;
276276
}));
277277

278-
it('should call exit and init prevDir on DOWN key', sinon.test(function() {
278+
it('should call enter and init prevDir on DOWN key', sinon.test(function() {
279279
this.mock(actions)
280-
.expects('exit')
280+
.expects('enter')
281281
.once()
282-
.withArgs('bounds', 'mydown', 'nextEl2');
282+
.withArgs('mydown', 'nextEl2');
283283
this.stub(active, 'isActive').returns(true);
284284
this.stub(clock, 'isBlocked').returns(false);
285285
const strape = new StrapeBinder();
286286
strape.props = {
287287
id: 1,
288-
exitStrategy: 'bounds',
288+
enterStrategy: 'bounds',
289289
onDownExit: 'mydown',
290290
};
291291
strape.nextEl = {id: 'nextEl2'};

0 commit comments

Comments
 (0)