@progressive-development/pd-calendar 0.2.12 → 0.2.13

package/package.json

@@ -3,7 +3,7 @@
   "description": "progressive development calendar web component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdCalendar.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
@@ -12,6 +13,9 @@ import '@progressive-development/pd-icon/pd-icon.js';
 import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
 
 import './PdCalendarCell.js';
+import { PdYearPopup } from './PdYearPopup.js';
+
+const TOUCH_MIN_MOVE = 70;
 
 const loadLocales = () => 
   ({
@@ -121,6 +125,7 @@ export class PdCalendar extends LitElement {
     return {
       refDate: { type: Object },
       selectableDates: { type: Boolean},
+      withYearPopup: { type: Boolean},
       showSelection: { type: Boolean},
       hideWeekend: { type: Boolean, reflect: true },
       prevMonthConstraint: { type: Number },
@@ -133,7 +138,8 @@ export class PdCalendar extends LitElement {
        numberClass: { type: String },
 
       _currentDate: { type: Object },
-      _viewType: { type: Number }
+      _viewType: { type: Number },
+      _wheelDelta: { type: Number, state: true },      
     };
   }
 
@@ -221,6 +227,7 @@ export class PdCalendar extends LitElement {
       }
 
       .content-title {
+        position: relative;
         font-size: var(--pd-calendar-title-font-size, 1.2em);
         font-weight: bold;
       }
@@ -237,6 +244,16 @@ export class PdCalendar extends LitElement {
         --pd-icon-size: var(--pd-calendar-title-icon-size, 1.2em);
         --pd-icon-bg-col-hover: lightgrey;
       }
+
+      .year-popup-link {
+        
+      }
+
+      .year-popup-link:hover {
+        cursor: pointer;
+        color: var(--pd-default-hover-col);
+      }
+
     `];
   }
 
@@ -250,7 +267,7 @@ export class PdCalendar extends LitElement {
     this.hideWeekend = false;
     this.selectableDates = false;
     this.showSelection = false;
-
+    this._wheelDelta = 0;    
     this._currentMonthNavNr = 0;
   }  
 
@@ -367,15 +384,21 @@ export class PdCalendar extends LitElement {
               ></pd-icon>
             </div>
 
-            <div class="content-title">
-              ${this._monthName} ${this._year}
+            <div id="titleContentId" class="content-title">              
+            ${this._monthName} ${this.withYearPopup ? html`
+              <span class="year-popup-link" @click="${this._openYearPopup}">${this._year}</span>
+              ` : html`${this._year}`}
             </div>
   
           </div>          
                     
         </div>
 
-        <div class="content grid-container ${sizeVar}">
+        <div 
+          @wheel="${this._wheelEvent}"
+          @touchstart="${this._touchStartEvent}"
+          @touchend="${this._touchEndEvent}"
+          class="content grid-container ${sizeVar}">
           ${this._getWeekDays().map(
             shortName => html` <div class="title-week-day">${shortName}</div>`
           )}
@@ -388,6 +411,39 @@ export class PdCalendar extends LitElement {
     `;
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _openYearPopup() {
+    
+    const popup = new PdYearPopup();
+    popup.yearSelection = ["2024", "2025"];
+    this.shadowRoot.getElementById("titleContentId").appendChild(popup);
+
+    popup.addEventListener("abort-year-selection", () => {
+      this.shadowRoot.getElementById("titleContentId").removeChild(popup);
+    });
+
+    popup.addEventListener("change-year-selection", (e) => {
+      const newYear = e.detail.year;      
+      if (newYear) {
+        const newDate = new Date(
+          this._currentDate.getFullYear(),
+          this._currentDate.getMonth(),
+          1
+        );
+        newDate.setFullYear(newYear);
+        this.dispatchEvent(
+          new CustomEvent('change-month', {
+            detail: {
+              newDate,
+            },
+          })
+        );        
+        this._initFromDate(newDate);
+      }
+      this.shadowRoot.getElementById("titleContentId").removeChild(popup);
+    });
+  }
+
   // eslint-disable-next-line class-methods-use-this
   _getWeekDays() {
     return this.hideWeekend ? [
@@ -435,6 +491,47 @@ export class PdCalendar extends LitElement {
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _wheelEvent(e) {    
+
+    this._wheelDelta += e.deltaY;
+
+    if (this._wheelDelta > 360) {      
+      this._wheelDelta = 0;
+      this._nextMonth();
+    }
+
+    if (this._wheelDelta < -360) {      
+      this._wheelDelta = 0;
+      this._previousMonth();
+    }
+
+    e.preventDefault();
+    e.stopPropagation();    
+    
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _touchStartEvent(e) {    
+    this._wheelDelta = e.changedTouches[0].screenX;    
+    e.preventDefault();
+    e.stopPropagation();    
+  }
+
+  _touchEndEvent(e) {    
+    const touchEndX = e.changedTouches[0].screenX;            
+    
+    const result = this._wheelDelta - touchEndX;
+    if (result < (TOUCH_MIN_MOVE * -1)) {
+      this._previousMonth();
+    } else if (result > TOUCH_MIN_MOVE) {
+      this._nextMonth();
+    }
+    
+    e.preventDefault();
+    e.stopPropagation();    
+  }
+
   _initFromDate(date) {
     this._monthName = date.toLocaleString('default', { month: 'long' });
     this._year = date.getFullYear();

package/src/PdYearPopup.js

@@ -0,0 +1,91 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { LitElement, html, css } from 'lit';
+
+export class PdYearPopup extends LitElement {
+  /**
+   * @event select-date - fires when user clicks on a selectable cell.
+   */
+
+  static get properties() {
+    return {      
+      yearSelection: { type: Array },
+      currentYear: { type: String },
+    };
+  }
+
+  static get styles() {
+    return [      
+      css`
+      :host {
+        position: absolute;
+        z-index: 1;
+        top: 25px;
+        right: 0;
+      }
+
+      ul {        
+        list-style: none;
+        max-width: 200px;
+        margin: 0;
+        padding: 0;
+        background: var(--pd-default-light-col, #cdeaf844);              
+        box-shadow: 3px 3px 5px 0 #ccc;
+        border: 1px solid var(--pd-default-col);
+
+        display: flex;
+        flex-direction: column;
+
+      }
+
+      li {
+        text-align: center;        
+        padding: 10px;
+        color: var(--pd-default-dark-col)
+      }
+
+      .current {        
+      }
+
+      .selectable:hover {
+        cursor: pointer;
+      }
+
+    `];
+  }
+
+  constructor() {
+      super();
+      this.yearSelection = [];
+
+  }
+
+  render() {
+    return html`
+      <ul>
+        ${this.yearSelection.map(year => html`
+        <li class="${this.currentYear === year ? 'current' : ''}" data-year="${year}" @click="${this._yearSelection}">${year}</li>
+        `)}        
+      </ul>      
+    `;
+  }
+
+  _yearSelection(event) {    
+    if (event.target.dataset.year) {
+      this.dispatchEvent(new CustomEvent(
+        "change-year-selection", {
+        detail: {
+          year: event.target.dataset.year
+        }
+      }));
+    } else {
+      this._closeSelection();
+    }    
+  } 
+
+  _closeSelection() {        
+    this.dispatchEvent(new CustomEvent("abort-year-selection"));
+  } 
+
+}
+
+window.customElements.define('pd-year-popup', PdYearPopup);

package/src/stories/index.stories.js

@@ -43,7 +43,7 @@ function CalendarSmallTemplate({ refDate, hideWeekend, width, cellHeight, prevMo
         
       }
     </style>
-    <pd-calendar .refDate="${refDate}" selectableDates showSelection ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
+    <pd-calendar withYearPopup .refDate="${refDate}" selectableDates showSelection ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
       nextMonthConstraint="${nextMonthConstraint}" numberClass="center"
       @mouse-enter-date="${(e) => {
         console.log("Mouse Enter Event: ", e);