diff --git a/.eslintrc b/.eslintrc index b3caa59e110484e128762039cca9c1c5c0645099..f52b6ba28717d20a3245f10dd011f167f9f1fea9 100644 --- a/.eslintrc +++ b/.eslintrc @@ -26,6 +26,7 @@ "sort-keys": ["error", "asc", { "caseSensitive": false, "natural": false - }] + }], + "no-underscore-dangle": "off", } } diff --git a/__tests__/src/lib/CanvasGroupings.test.js b/__tests__/src/lib/CanvasGroupings.test.js index 1f222d299a75fe337e4315ac703eca70461ba370..8e3a00c0e2e1452bc130ce71330587139993b22f 100644 --- a/__tests__/src/lib/CanvasGroupings.test.js +++ b/__tests__/src/lib/CanvasGroupings.test.js @@ -48,10 +48,21 @@ describe('CanvasGroupings', () => { beforeEach(() => { subject = new CanvasGroupings([0, 1, 2, 3], 'book'); }); - it('selects by index / 2', () => { + it('selects by index', () => { expect(subject.getCanvases(2)).toEqual([1, 2]); }); }); + describe('book with facing pages', () => { + let subject; + beforeEach(() => { + subject = new CanvasGroupings([0, 1, { getViewingHint: () => 'facing-pages', id: 2 }, 3], 'book'); + }); + it('selects by index', () => { + expect(subject.getCanvases(1)).toEqual([1]); + expect(subject.getCanvases(2)[0].id).toEqual(2); + expect(subject.getCanvases(3)).toEqual([3]); + }); + }); describe('gallery', () => { it('selects by index', () => { const subject = new CanvasGroupings([0, 1, 2, 3]); diff --git a/src/lib/CanvasGroupings.js b/src/lib/CanvasGroupings.js index ab348f30740da53a7985fb45b9873373b3713a82..677a8291420e1d6656a7c4df9ef156fa8387ab0c 100644 --- a/src/lib/CanvasGroupings.js +++ b/src/lib/CanvasGroupings.js @@ -7,15 +7,18 @@ export default class CanvasGroupings { constructor(canvases, viewType = 'single') { this.canvases = canvases; this.viewType = viewType; - this._groupings = null; // eslint-disable-line no-underscore-dangle + this._groupings = null; + this._canvasGroupingMap = null; } /** */ getCanvases(index) { switch (this.viewType) { + case 'scroll': + return this.groupings()[0]; case 'book': - return this.groupings()[Math.ceil(index / 2)]; + return this.groupings()[this._canvasGroupingMap[index]]; default: return this.groupings()[index]; } @@ -26,27 +29,55 @@ export default class CanvasGroupings { * of canvases, while book view creates pairs. */ groupings() { - if (this._groupings) { // eslint-disable-line no-underscore-dangle - return this._groupings; // eslint-disable-line no-underscore-dangle + if (this._groupings) { + return this._groupings; } if (this.viewType !== 'book') { return this.canvases.map(canvas => [canvas]); } const groupings = []; + const canvasGroupingMap = []; + let groupIndex = 0; this.canvases.forEach((canvas, i) => { + if (!groupings[groupIndex]) { + groupings[groupIndex] = []; + } + + canvasGroupingMap[i] = groupIndex; + if (i === 0) { - groupings.push([canvas]); + canvasGroupingMap[i] = groupIndex; + groupings[groupIndex].push(canvas); + groupIndex += 1; return; } - // Odd page - if (i % 2 !== 0) { - groupings.push([canvas]); - } else { - // Even page - groupings[Math.ceil(i / 2)].push(canvas); + + const hint = canvas && ( + (canvas.getBehavior && canvas.getBehavior()) + || (canvas.getViewingHint && canvas.getViewingHint()) + ); + + if (hint === 'facing-pages' || hint === 'non-paged') { + if (groupings[groupIndex].length > 0) { + groupIndex += 1; + canvasGroupingMap[i] = groupIndex; + } + + groupings[groupIndex] = [canvas]; + groupIndex += 1; + return; + } + + if (groupings[groupIndex].length < 2) { + groupings[groupIndex].push(canvas); + } + + if (groupings[groupIndex].length === 2) { + groupIndex += 1; } }); - this._groupings = groupings; // eslint-disable-line no-underscore-dangle + this._groupings = groupings; + this._canvasGroupingMap = canvasGroupingMap; return groupings; } }