@vaadin/vaadin-date-picker 4.4.3 → 4.4.4

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-date-picker",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-date-picker",
-  "version": "4.4.3",
+  "version": "4.4.4",
   "main": "vaadin-date-picker.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

package/src/vaadin-date-picker-overlay-content.js

@@ -295,6 +295,18 @@ class DatePickerOverlayContentElement extends
     return this.getAttribute('dir') === 'rtl';
   }
 
+  /**
+   * Whether to scroll to a sub-month position when scrolling to a date.
+   * This is active if the month scroller is not large enough to fit a
+   * full month. In that case we want to scroll to a position between
+   * two months in order to have the focused date in the visible area.
+   * @returns {boolean} whether to use sub-month scrolling
+   * @private
+   */
+  get __useSubMonthScrolling() {
+    return this.$.monthScroller.clientHeight < this.$.monthScroller.itemHeight + this.$.monthScroller.bufferOffset;
+  }
+
   ready() {
     super.ready();
     this.setAttribute('tabindex', 0);
@@ -356,7 +368,9 @@ class DatePickerOverlayContentElement extends
    * Scrolls the list to the given Date.
    */
   scrollToDate(date, animate) {
-    this._scrollToPosition(this._differenceInMonths(date, this._originDate), animate);
+    const offset = this.__useSubMonthScrolling ? this._calculateWeekScrollOffset(date) : 0;
+    this._scrollToPosition(this._differenceInMonths(date, this._originDate) + offset, animate);
+    this.$.monthScroller.forceUpdate();
   }
 
   _focusedDateChanged(focusedDate) {
@@ -377,23 +391,63 @@ class DatePickerOverlayContentElement extends
    * Scrolls the month and year scrollers enough to reveal the given date.
    */
   revealDate(date, animate = true) {
-    if (date) {
-      const diff = this._differenceInMonths(date, this._originDate);
-      const scrolledAboveViewport = this.$.monthScroller.position > diff;
-
-      const visibleArea = Math.max(
-        this.$.monthScroller.itemHeight,
-        this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2
-      );
-      const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
-      const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
-
-      if (scrolledAboveViewport) {
-        this._scrollToPosition(diff, animate);
-      } else if (scrolledBelowViewport) {
-        this._scrollToPosition(diff - visibleItems + 1, animate);
+    if (!date) {
+      return;
+    }
+    const diff = this._differenceInMonths(date, this._originDate);
+    // If scroll area does not fit the full month, then always scroll with an offset to
+    // approximately display the week of the date
+    if (this.__useSubMonthScrolling) {
+      const offset = this._calculateWeekScrollOffset(date);
+      this._scrollToPosition(diff + offset, animate);
+      return;
+    }
+
+    // Otherwise determine if we need to scroll to make the month of the date visible
+    const scrolledAboveViewport = this.$.monthScroller.position > diff;
+
+    const visibleArea = Math.max(
+      this.$.monthScroller.itemHeight,
+      this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2
+    );
+    const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
+    const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
+
+    if (scrolledAboveViewport) {
+      this._scrollToPosition(diff, animate);
+    } else if (scrolledBelowViewport) {
+      this._scrollToPosition(diff - visibleItems + 1, animate);
+    }
+  }
+
+  /**
+   * Calculates an offset to be added to the month scroll position
+   * when using sub-month scrolling, in order ensure that the week
+   * that the date is in is visible even for small scroll areas.
+   * As the month scroller uses a month as minimal scroll unit
+   * (a value of `1` equals one month), we can not exactly identify
+   * the position of a specific week. This is a best effort
+   * implementation based on manual testing.
+   * @param date the date for which to calculate the offset
+   * @returns {number} the offset
+   * @private
+   */
+  _calculateWeekScrollOffset(date) {
+    // Get first day of month
+    const temp = new Date(0, 0);
+    temp.setFullYear(date.getFullYear());
+    temp.setMonth(date.getMonth());
+    temp.setDate(1);
+    // Determine week (=row index) of date within the month
+    let week = 0;
+    while (temp.getDate() < date.getDate()) {
+      temp.setDate(temp.getDate() + 1);
+      if (temp.getDay() === this.i18n.firstDayOfWeek) {
+        week += 1;
       }
     }
+    // Calculate magic number that approximately keeps the week visible
+    return week / 6;
   }
 
   _onOverlayFocus() {

package/src/vaadin-date-picker.js

@@ -147,7 +147,7 @@ class DatePickerElement extends
   }
 
   static get version() {
-    return '4.4.3';
+    return '4.4.4';
   }
 
   static get properties() {

package/src/vaadin-infinite-scroller.js

@@ -143,6 +143,18 @@ class InfiniteScrollerElement extends PolymerElement {
     }
   }
 
+  /**
+   * Force the scroller to update clones after a reset, without
+   * waiting for the debouncer to resolve.
+   */
+  forceUpdate() {
+    if (this._debouncerUpdateClones) {
+      this._buffers[0].updated = this._buffers[1].updated = false;
+      this._updateClones();
+      this._debouncerUpdateClones.cancel();
+    }
+  }
+
   _activated(active) {
     if (active && !this._initialized) {
       this._createPool();

package/theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -36,7 +36,7 @@ const $_documentContainer = html`<dom-module id="lumo-date-picker-overlay-conten
             + var(--lumo-size-m) * 6
             + var(--lumo-space-s)
           );
-        --vaadin-infinite-scroller-buffer-offset: 20%;
+        --vaadin-infinite-scroller-buffer-offset: 10%;
         -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
         mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
         position: relative;