Merge pull request #56 from KainosSoftwareLtd/feature/IMTA-12974-show-calendar-plainly-automatically

Auto scroll to show calendar in full when opened

Author: ms-ek

README.md

@@ -171,6 +171,19 @@ datePicker(selector, {
 });
 ```
 
+### autoScroll
+
+Type: boolean
+
+Can be set to `true` to let the window scroll automatically to show the calendar in full when opened. False by default.
+
+Using it in your code:
+```javascript
+datePicker(selector, {
+  autoScroll: true,
+});
+```
+
 ## Callbacks
 
 The datepicker currently supports the following optional callbacks

package.json

@@ -6,7 +6,7 @@
     "dist",
     "src/scss/datepicker.scss"
   ],
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "GOV.UK datepicker",
   "scripts": {
     "build": "webpack --config ./bin/webpack.dev.js",

src/__tests__/datepicker.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import $ from 'jquery';
 import { DateTime } from 'luxon';
 
@@ -52,6 +53,7 @@ describe('Date picker', () => {
 
   afterEach(() => {
     document.body.innerHTML = '';
+    window.innerHeight = 768;
   });
 
   describe('Initialisation', () => {
@@ -1085,4 +1087,43 @@ describe('Date picker', () => {
       expect(expectedDate.getFullYear()).toEqual(today.getFullYear());
     });
   });
+
+  describe('Auto scroll', () => {
+    it('should not attempt to scroll calendar into view if autoScroll is set to false and calendar is not in view', () => {
+      testScrollsCalendarIntoView(false, false, 0);
+    });
+
+    it('should not scroll calendar into view if autoScroll is set to true but calendar is already in view', () => {
+      testScrollsCalendarIntoView(true, true, 0);
+    });
+
+    it('should scroll calendar into view if autoScroll is set to true and calendar is not in view', () => {
+      testScrollsCalendarIntoView(true, false, 1);
+    });
+
+    const testScrollsCalendarIntoView = (isAutoScrollOn, isInView, expectedScrolls) => {
+      datePicker(document.querySelector('.date-picker'), {
+        autoScroll: isAutoScrollOn,
+      });
+
+      const revealButton = document.querySelector('.date-picker__reveal');
+      const calendar = document.querySelector('.date-picker__dialog');
+      calendar.scrollIntoView = jest.fn();
+      positionCalendarInViewport(calendar, isInView);
+
+      $(revealButton).trigger('click');
+
+      expect(calendar.scrollIntoView.mock.calls.length).toBe(expectedScrolls);
+    };
+
+    const positionCalendarInViewport = (calendar, isInView) => {
+      calendar.getBoundingClientRect = () => ({
+        bottom: 100,
+        top: 100,
+        left: 100,
+        right: 100,
+      });
+      window.innerHeight = (isInView === true) ? 110 : 90;
+    };
+  });
 });

src/demo.js

@@ -29,6 +29,7 @@ datePicker(document.querySelector('.date-picker-welsh'), {
 
 datePicker(document.querySelector('.date-picker-style-two'), {
   theme: 'digital-scotland',
+  autoScroll: true,
 });
 
 datePicker(document.querySelector('.date-picker-icon'), {

src/js/datepicker.js

@@ -542,9 +542,28 @@ function datePicker(datePickerElement, options = {}, callbacks = {}) {
       setFocusDay(getDateFromInputs());
       showCalender();
       renderDOM();
+      scrollCalendarIntoView();
       preventDefault = true;
     }
 
+    function scrollCalendarIntoView() {
+      if (options.autoScroll === true) {
+        const calendar = elements.dialog;
+        if (!elementInViewport(calendar)) {
+          calendar.scrollIntoView(false);
+        }
+      }
+    }
+
+    function elementInViewport(element) {
+      const bounding = element.getBoundingClientRect();
+
+      return bounding.top >= 0
+        && bounding.left >= 0
+        && bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+        && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+    }
+
     switch (event.type) {
       case 'keydown':
         switch (event.keyCode) {