bookingsync-calendar-widget 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bookingsync-calendar-widget",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "BookingSync Calendar Widget",
   "main": "dist/bookingsync-calendar-widget.js",
   "module": "src/bookingsync-calendar-widget.js",
@@ -15,51 +15,48 @@
     "start": "webpack serve --open --config webpack.dev.js",
     "test": "karma start karma.config.js --colors",
     "test-ci": "karma start karma.config.js --single-run true",
-    "lint:js": "eslint ./*.js src --fix",
+    "lint:js": "eslint ./*.js src",
     "mock-server": "node nodemon-start.js",
     "preversion": "npm run lint:js && npm run test-ci",
     "version": "npm run build && npm run dev && git add -A dist",
     "postversion": "git push && git push --tags && rm -rf build/temp"
   },
   "dependencies": {
-    "npm-check-updates": "^11.8.5",
     "popper.js": "^1.16.1",
     "strtime": "^1.1.2",
     "widget-utils": "0.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-env": "^7.16.4",
     "assert": "^2.0.0",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "chai": "^4.3.4",
-    "css-loader": "^6.2.0",
-    "eslint": "^7.32.0",
-    "eslint-loader": "4.0.2",
-    "eslint-plugin-import": "^2.24.2",
-    "json-server": "0.16.3",
-    "karma": "^6.3.4",
+    "css-loader": "^6.5.1",
+    "eslint": "^8.4.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "json-server": "0.17.0",
+    "karma": "^6.3.9",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-mocha": "^2.0.1",
     "karma-webpack": "5.0.0",
-    "mocha": "9.1.1",
-    "node-sass": "^6.0.1",
-    "nodemon": "^2.0.12",
-    "sass-loader": "^12.1.0",
-    "sinon": "^11.1.2",
-    "style-loader": "^3.2.1",
+    "mocha": "9.1.3",
+    "node-sass": "^7.0.0",
+    "nodemon": "^2.0.15",
+    "sass-loader": "^12.3.0",
+    "sinon": "^12.0.1",
+    "style-loader": "^3.3.1",
     "tether": "2.0.0",
-    "timezone-mock": "1.2.1",
+    "timezone-mock": "1.2.2",
     "util": "^0.12.4",
-    "webpack": "^5.52.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "4.2.0",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "4.6.0",
     "webpack-merge": "^5.8.0",
-    "yargs": "17.1.1"
+    "yargs": "17.3.0"
   },
   "repository": {
     "type": "git",

package/src/calendar.js

@@ -15,7 +15,7 @@ import locales from './locales';
 import { strftime } from 'strtime';
 
 import {
-  dateToIso, isLater, isCurrent, validationOfCell, tFormatter, dateToArray
+  dateToIso, isLater, isCurrent, validationOfCell, tFormatter, dateToArray, monthDiff
 } from './utils';
 
 import styles from './styles/calendar.scss';
@@ -56,7 +56,7 @@ export default class Calendar extends Emitter {
 
       this.opts.lang        = (this.opts.lang && this.opts.lang in locales) ? this.opts.lang : 'en-US';
       this.locale           = locales[this.opts.lang];
-      this.format           = this.opts.formatDate || this.locale.formatDate || '%D';
+      this.format           = this.opts.formatDate || this.locale.formatDate || '%m/%d/%Y';
       this.opts.startOfWeek = this.opts.startOfWeek || this.locale.startOfWeek;
 
       let { currentDate } = this.opts;
@@ -105,18 +105,16 @@ export default class Calendar extends Emitter {
     this.addBtnsEvents();
 
     if (this.opts.selectable && this.opts.elStartAt && this.opts.elEndAt) {
-      this.inputsToValues();
-
-      this.opts.elStartAt.addEventListener('input', () => {
+      if (!this.opts.rentalId) {
         this.inputsToValues();
-      });
+      }
 
-      this.opts.elEndAt.addEventListener('input', () => {
-        this.inputsToValues();
-      });
+      this.on('maps-loaded', () => this.inputsToValues());
+      this.opts.elStartAt.addEventListener('input', () => this.inputsToValues());
+      this.opts.elEndAt.addEventListener('input', () => this.inputsToValues());
     }
 
-    if (this.opts.rentalId) {
+    if (this.opts.rentalId && !this.opts.isDropDown) {
       this.loadMaps(this.opts.rentalId);
     }
 
@@ -559,7 +557,7 @@ export default class Calendar extends Emitter {
 
         const tooltipPosition = (this.isReverseSelectable) ? left : right;
 
-        if (tooltipPosition && !this.hasValidRange) {
+        if (tooltipPosition && this.el.contains(cell) && !this.hasValidRange) {
           this.dom.tooltip = this.el.appendChild(elementFromString(templates.tooltip));
           this.dom.tooltip.querySelector('span').innerHTML = invalidRangeMessage;
 
@@ -846,20 +844,21 @@ export default class Calendar extends Emitter {
   }
 
   loadMaps(id) {
+    this.logger('loading maps');
     this.toggleLoading();
 
     const onSuccess = (maps) => {
-      this.toggleLoading();
-
       if (isArray(maps.data) && maps.data[0].attributes) {
         if (this.opts.disableAvailabityMap) {
           maps.data[0].attributes.availability = maps.data[0].attributes.availability.replace(/[0-9]/g, '0');
         }
         this.opts.currency = this.opts.currency || maps.data[0].attributes.currency;
-        this.emit('maps-loaded', maps);
         this.addMaps(maps.data[0].attributes);
         this.mapsLoaded = true;
+        this.toggleLoading();
+        this.emit('maps-loaded', maps);
       } else {
+        this.toggleLoading();
         this.logger('expects json-api data format', 'error');
       }
     };
@@ -997,6 +996,10 @@ export default class Calendar extends Emitter {
   }
 
   inputsToValues() {
+    if (this.opts.elStartAt.value === '' && this.opts.elEndAt.value === '') {
+      return;
+    }
+
     const selectionStart  = dateToArray(this.opts.elStartAt.value, this.format, this.locale);
     const selectionEnd    = dateToArray(this.opts.elEndAt.value, this.format, this.locale);
     const { currentDate } = this.opts;
@@ -1005,10 +1008,20 @@ export default class Calendar extends Emitter {
 
     if (isArray(selectionStart) && isArray(selectionEnd)) {
       if (isLater(currentDate, selectionStart) && isLater(selectionStart, selectionEnd)) {
+        const monthDifference = monthDiff(
+          dateToIso(this.opts.yearStart, this.opts.monthStart, 1),
+          dateToIso(...selectionEnd)
+        );
+
+        const { tree } = this.createTree(this.opts.yearStart, this.opts.monthStart, monthDifference);
+
+        this.cTree.addTree(tree);
         this.selectionStart = selectionStart;
         this.selectionEnd = selectionEnd;
         this.recoverSelections();
         this.completeSelection();
+        this.destroyMonths();
+        this.renderMonths(selectionEnd[0], selectionEnd[1]);
       } else {
         this.logger(`invalid range: "[${selectionStart}]" "[${selectionEnd}]"`, 'warn');
         return false;

package/src/styles/calendar.scss

@@ -45,6 +45,7 @@
     -webkit-transition: $transition;
     -o-transition: $transition;
     transition: $transition;
+    pointer-events: none;
 
     &[x-placement] {
       visibility: visible;

package/src/utils.js

@@ -1,3 +1,4 @@
+/* global console */
 import { strftime, strptime } from 'strtime';
 import { is } from 'widget-utils';
 
@@ -21,12 +22,16 @@ export const dateToArray = (val, format, locale) => {
   try {
     const date = strptime(val, format, locale);
     const a    = strftime(date, '%Y-%m-%d').split('-');
+
     return [
       parseInt(a[0]), // year
       parseInt(a[1] - 1), // month index
       parseInt(a[2]) // day
     ];
   } catch(e) {
+    if (is(e.message)) {
+      console.log(e.message);
+    }
     return false;
   }
 };
@@ -35,6 +40,10 @@ export const isLater = (start, end) => dateToIso(...start, true) < dateToIso(...
 
 export const isCurrent = (start, end) => dateToIso(...start, true) == dateToIso(...end, true);
 
+export const monthDiff = (start, end) => {
+  return end.getMonth() - start.getMonth() + (12 * (end.getFullYear() - start.getFullYear()));
+};
+
 export const validationOfCell = (cell) => {
   if (is(cell.dataset.enabled) || is(cell.dataset.availableIn) || is(cell.dataset.availableOut)) {
     return true;

package/CHANGELOG.md

@@ -1,218 +0,0 @@
-# Change Log
-All notable changes to this project will be documented in this file.
-
-## [2.0.2] - 2021-09-10
-### Fixed
-- issue when data start from a past date that would set current date as unavailable
-
-## [2.0.1] - 2021-09-10
-### Reverted
-- show minStay & maxStay
-### Fixed
-- min/max stay: get the biggest value from the range instead of first cell's
-- issue when yesterday's cell is available and today's not
-- issue on today's cell when the calendar has no rental
-
-## [2.0.0] - 2021-09-01
-### Added
-- cancel selection when clicking on the first selected date
-- select in both direction on mouseover
-- show tooltip if selection is not valid (minstay or booked)
-- invalid selection stays highlighted until you select new dates
-### Updated
-- hover handler moved to JS
-
-## [1.5.0] - 2021-05-28
-### Added
-- css var() for date ranges bg-color & color
-### Updated
-- date ranges style, linar gradients no longer used
-### Fixed
-- css class naming (bookingsyncCalendarWidget => BookingSyncCalendarWidget__calendar)
-
-## [1.4.8] - 2021-05-26
-### Fixed
-- `maxStay` blocking highlight range
-
-## [1.4.7] - 2021-03-04
-### Added
-- `nl-NL` language
-
-## [1.4.6] - 2020-10-30
-### Added
-- `maxStay` option to limit the number of selectable nights
-- Russian and Polish languages
-
-## [1.4.5] - 2020-01-23
-### Fixed
-- inputsToValues method was called too early
-
-## [1.4.4] - 2020-01-03
-### Added
-- inputsToValues method (reads inputs values to set dates selection)
-
-## [1.4.3] - 2019-12-02
-### Fixed
-- GMT +00 issue
-
-## [1.4.2] - 2019-08-24
-### Updated
-- Removed `Open Sans` font
-### Fixed
-- Now fully working on IE11 / Edge
-
-## [1.4.1] - 2019-07-16
-### Updated
-- Moved Reset styles to `widget-utils` module
-
-## [1.4.0] - 2019-07-16
-### Fixed
-- Global variables
-### Updated
-- Namespace `BookingSyncCalendarWidget` to `bookingsyncCalendarWidget`
-
-## [1.3.4] - 2019-07-09
-### Fixed
-- Day-1 Timezone issue
-
-## [1.3.3] - 2019-06-21
-### Added
-- Export `Popper.js`
-### Fixed
-- Input touch event on Android devices
-
-## [1.3.2] - 2019-06-06
-### Fixed
-- `hiddenElFormat` now removes the attribute `name` of the visible input
-
-## [1.3.0] - 2019-03-31
-### Added
-- `resetSelectionOnEscape` Resets selection with Escape key
-- Option `enableAllDays` Force past days/months to be selectable
-### Fixed
-- Past days were not disabled within the current month
-### Updated
-- Webpack Config, dev version under `bookingsync-calendar-widget.dev.js`, production version unminified under `bookingsync-calendar-widget.js`
-- Demo `index.html`
-- README
-
-## [1.2.4] - 2019-01-18
-### Updated
-- `disableAvailabityMap` & `allowShorterMinStaySelection` default values
-- README.md
-
-## [1.2.3] - 2019-01-15
-### Fixed
-- Update single-input value on init
-
-## [1.2.2] - 2019-01-12
-### Added
-- Expose `widget-utils` under `window.BookingSyncWidgetUtils`
-### Fixed
-- CHANGELOG.md
-
-## [1.2.1] - 2019-01-11
-### Added
-- Option `disableAvailabityMap` & `allowShorterMinStaySelection`
-
-## [1.2.0] - 2018-12-27
-### Added
-- Option `singleInputDateFormat`
-- Cancel selection on invalid day click
-- Locales aliases (eg: `en` = `en-US`)
-### Fixed
-- Minor fixes
-
-## [1.1.0] - 2018-12-27
-### Added
-- Single input with date range value
-- Single input example in `index.html`
-- Default classes for inputs
-### Fixed
-- Minor fixes
-
-## [1.0.0] - 2018-10-2
-### Changed
-- `TetherDrop` to `Popper.js`
-- Use lang `en-US` as default instead of browser lang
-### Added
-- Use string date parser (e.g. %Y-%m-%d)
-- Hidden inputs with different date format (optionnal)
-- Use locale with country code
-### Fixed
-- Minor fixes
-
-## [0.3.0] - 2018-09-18
-### Fixed
-- Switch from `Yarn` to `Npm`
-- Migrate to `CircleCI v2`, `WebPack v3` and `Babel v7`
-- Fix `currency` and `API calls`
-- Add `date-range` from inputs
-- Update `eslint` rules
-
-## [0.2.4] - 2017-08-14
-### Fixed
-- handling adding js-script with async attribute
-
-## [0.2.3] - 2017-08-14
-### Fixed
-- minor fixes
-
-## [0.2.2] - 2017-08-14
-### Fixed
-- dist file
-
-## [0.2.1] - 2017-07-10
-### Fixed
-- Chrome Number formatting
-
-## [0.1.1] - 2017-02-23
-### Added
-- Dispatch 'change' event on inputs.
-
-### Changed
-- 'currencyFormatter' moved to 'widget-utils' module.
-### Fixed
-- 'onSelectionCompleted' call back params.
-
-## [0.1.0] - 2017-02-20
-### Added
-- Display currency from maps request.
-- Locale based price and currency format.
-- Currency to locale (as fallback).
-- `onSelectionCompleted` callback.
-- Prices are rounded now.
-- Better Logger.
-- Tests.
-
-### Changed
-- Scripts for mocks.
-- Styles for rates:
-  - smaller font,
-  - month min-width was increased to 27rem to accommodate prices.
-
-## [0.0.17] - 2017-02-14
-### Added
-- New styles for view with rates and min-stay.
-
-### Changed
-- Translations for `rate` and `minStay` to use interpolations with numbers.
-
-## [0.0.16] - 2017-02-03
-### Added
-- `VERSION` property on `BookingSyncCalendar` global.
-- More event loggers.
-- CHANGELOG.md to track changes.
-
-### Changed
-- Minor style changes
-
-### Fixed
-- Maps offset bug
-
-## [0.0.14] - 2017-02-02
-### Added
-- Filled README.md with params, events and examples.
-
-### Fixed
-- Timezone offset in calculating start of the month.