Fix: Add page controls between zoom and fullscreen controls (#320)

box · Aug 17, 2017 · 0441920 · 0441920
1 parent fd477c7
commit 0441920
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/lib/PageControls.js b/src/lib/PageControls.js
@@ -37,20 +37,24 @@ class PageControls extends EventEmitter {
         this.controlsEl = controls.controlsEl;
         this.currentPageEl = controls.currentPageEl;
         this.pageNumInputEl = controls.pageNumInputEl;
-
-        this.controls.add(__('previous_page'), previousPage, `bp-previous-page-icon ${PREV_PAGE}`, ICON_DROP_UP);
-        this.controls.add(__('enter_page_num'), this.showPageNumInput.bind(this), PAGE_NUM, pageNumTemplate);
-        this.controls.add(__('next_page'), nextPage, `bp-next-page-icon ${NEXT_PAGE}`, ICON_DROP_DOWN);
+        this.previousPage = previousPage;
+        this.nextPage = nextPage;
     }
 
     /**
-     * Initializes page number selector.
+     * Adds controls and initializes page number selector.
      *
      * @private
      * @param {number} pagesCount - Total number of page
      * @return {void}
      */
     init(pagesCount) {
+        // Add controls
+        this.controls.add(__('previous_page'), this.previousPage, `bp-previous-page-icon ${PREV_PAGE}`, ICON_DROP_UP);
+        this.controls.add(__('enter_page_num'), this.showPageNumInput.bind(this), PAGE_NUM, pageNumTemplate);
+        this.controls.add(__('next_page'), this.nextPage, `bp-next-page-icon ${NEXT_PAGE}`, ICON_DROP_DOWN);
+
+        // Initialize page number selector
         const pageNumEl = this.controlsEl.querySelector(`.${PAGE_NUM}`);
         this.pagesCount = pagesCount;
 

diff --git a/src/lib/__tests__/PageControls-test.js b/src/lib/__tests__/PageControls-test.js
@@ -51,20 +51,23 @@ describe('lib/PageControls', () => {
     describe('constructor()', () => {
         it('should create the correct DOM structure', () => {
             expect(pageControls.controlsEl).to.not.be.undefined;
-            expect(pageControls.controls.buttonRefs.length).equals(3);
         });
     });
 
     describe('init()', () => {
         it('should initialize the page number selector', () => {
             const pagesCount = '5';
+
             pageControls.init(pagesCount);
-            const totalPageEl = pageControls.controlsEl.querySelector(`.${CONTROLS_TOTAL_PAGES}`);
-            const pageNumInputEl = pageControls.controlsEl.querySelector(`.${CONTROLS_PAGE_NUM_INPUT_CLASS}`);
+            expect(pageControls.controls.buttonRefs.length).equals(3);
             expect(pageControls.pagesCount).equals(pagesCount);
+            expect(pageControls.currentPageEl).to.not.be.undefined;
+
+            const totalPageEl = pageControls.controlsEl.querySelector(`.${CONTROLS_TOTAL_PAGES}`);
             expect(totalPageEl).to.have.text(pagesCount);
+
+            const pageNumInputEl = pageControls.controlsEl.querySelector(`.${CONTROLS_PAGE_NUM_INPUT_CLASS}`);
             expect(pageNumInputEl).to.have.attr('max', pagesCount);
-            expect(pageControls.currentPageEl).to.not.be.undefined;
         });
     });
 
@@ -102,6 +105,7 @@ describe('lib/PageControls', () => {
 
     describe('checkPaginationButtons()', () => {
         beforeEach(() => {
+            pageControls.init();
             stubs.pageNumButtonEl = pageControls.controlsEl.querySelector(`.${PAGE_NUM}`);
             stubs.previousPageButtonEl = pageControls.controlsEl.querySelector(`.${PREV_PAGE}`);
             stubs.nextPageButtonEl = pageControls.controlsEl.querySelector(`.${NEXT_PAGE}`);