stimulus-flatpickr - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0-beta1

dist/stimulus-flatpickr.js

@@ -54,3 +54,8 @@ 'use strict';
 
-var arrayOptions = ["disable", "enable"];
+var arrayOptions = [
+  "disable",
+  "enable",
+  "disableDaysOfWeek",
+  "enableDaysOfWeek"
+];
 
@@ -164,18 +169,2 @@ var dateOptions = ["maxDate", "minDate", "maxTime", "minTime", "now"];
 
-  Flatpickr.prototype.change = function change () {};
-
-  Flatpickr.prototype.open = function open () {};
-
-  Flatpickr.prototype.close = function close () {};
-
-  Flatpickr.prototype.monthChange = function monthChange () {};
-
-  Flatpickr.prototype.yearChange = function yearChange () {};
-
-  Flatpickr.prototype.ready = function ready () {};
-
-  Flatpickr.prototype.valueUpdate = function valueUpdate () {};
-
-  Flatpickr.prototype.dayCreate = function dayCreate () {};
-
   Flatpickr.prototype._initializeEvents = function _initializeEvents () {
@@ -185,4 +174,6 @@ var this$1 = this;
     events.forEach(function (event) {
-      var hook = "on" + (capitalize(event));
-      this$1.config[hook] = this$1[event].bind(this$1);
+      if (this$1[event]) {
+        var hook = "on" + (capitalize(event));
+        this$1.config[hook] = this$1[event].bind(this$1);
+      }
     });
@@ -203,4 +194,42 @@ };
     });
+    this._handleDaysOfWeek();
   };
 
+  Flatpickr.prototype._handleDaysOfWeek = function _handleDaysOfWeek () {
+    if (this.config.disableDaysOfWeek) {
+      this.config.disableDaysOfWeek = this._validateDaysOfWeek(
+        this.config.disableDaysOfWeek
+      );
+      this.config.disable = (this.config.disable || []).concat( [this._disable.bind(this)]
+      );
+    }
+
+    if (this.config.enableDaysOfWeek) {
+      this.config.enableDaysOfWeek = this._validateDaysOfWeek(
+        this.config.enableDaysOfWeek
+      );
+      this.config.enable = (this.config.enable || []).concat( [this._enable.bind(this)]
+      );
+    }
+  };
+
+  Flatpickr.prototype._validateDaysOfWeek = function _validateDaysOfWeek (days) {
+    if (Array.isArray(days)) {
+      return days.map(function (day) { return parseInt(day); });
+    } else {
+      console.error("days of week must be a valid array");
+      return [];
+    }
+  };
+
+  Flatpickr.prototype._disable = function _disable (date) {
+    var disabledDays = this.config.disableDaysOfWeek;
+    return disabledDays.includes(date.getDay());
+  };
+
+  Flatpickr.prototype._enable = function _enable (date) {
+    var enabledDays = this.config.enableDaysOfWeek;
+    return enabledDays.includes(date.getDay());
+  };
+
   Flatpickr.prototype._initializeDateFormats = function _initializeDateFormats () {
@@ -207,0 +236,0 @@ var this$1 = this;

dist/stimulus-flatpickr.m.js

@@ -50,3 +50,8 @@ import { Controller } from 'stimulus';
 
-var arrayOptions = ["disable", "enable"];
+var arrayOptions = [
+  "disable",
+  "enable",
+  "disableDaysOfWeek",
+  "enableDaysOfWeek"
+];
 
@@ -160,18 +165,2 @@ var dateOptions = ["maxDate", "minDate", "maxTime", "minTime", "now"];
 
-  Flatpickr.prototype.change = function change () {};
-
-  Flatpickr.prototype.open = function open () {};
-
-  Flatpickr.prototype.close = function close () {};
-
-  Flatpickr.prototype.monthChange = function monthChange () {};
-
-  Flatpickr.prototype.yearChange = function yearChange () {};
-
-  Flatpickr.prototype.ready = function ready () {};
-
-  Flatpickr.prototype.valueUpdate = function valueUpdate () {};
-
-  Flatpickr.prototype.dayCreate = function dayCreate () {};
-
   Flatpickr.prototype._initializeEvents = function _initializeEvents () {
@@ -181,4 +170,6 @@ var this$1 = this;
     events.forEach(function (event) {
-      var hook = "on" + (capitalize(event));
-      this$1.config[hook] = this$1[event].bind(this$1);
+      if (this$1[event]) {
+        var hook = "on" + (capitalize(event));
+        this$1.config[hook] = this$1[event].bind(this$1);
+      }
     });
@@ -199,4 +190,42 @@ };
     });
+    this._handleDaysOfWeek();
   };
 
+  Flatpickr.prototype._handleDaysOfWeek = function _handleDaysOfWeek () {
+    if (this.config.disableDaysOfWeek) {
+      this.config.disableDaysOfWeek = this._validateDaysOfWeek(
+        this.config.disableDaysOfWeek
+      );
+      this.config.disable = (this.config.disable || []).concat( [this._disable.bind(this)]
+      );
+    }
+
+    if (this.config.enableDaysOfWeek) {
+      this.config.enableDaysOfWeek = this._validateDaysOfWeek(
+        this.config.enableDaysOfWeek
+      );
+      this.config.enable = (this.config.enable || []).concat( [this._enable.bind(this)]
+      );
+    }
+  };
+
+  Flatpickr.prototype._validateDaysOfWeek = function _validateDaysOfWeek (days) {
+    if (Array.isArray(days)) {
+      return days.map(function (day) { return parseInt(day); });
+    } else {
+      console.error("days of week must be a valid array");
+      return [];
+    }
+  };
+
+  Flatpickr.prototype._disable = function _disable (date) {
+    var disabledDays = this.config.disableDaysOfWeek;
+    return disabledDays.includes(date.getDay());
+  };
+
+  Flatpickr.prototype._enable = function _enable (date) {
+    var enabledDays = this.config.enableDaysOfWeek;
+    return enabledDays.includes(date.getDay());
+  };
+
   Flatpickr.prototype._initializeDateFormats = function _initializeDateFormats () {
@@ -203,0 +232,0 @@ var this$1 = this;

dist/stimulus-flatpickr.umd.js

@@ -55,3 +55,8 @@ (function (global, factory) {
 
-  var arrayOptions = ["disable", "enable"];
+  var arrayOptions = [
+    "disable",
+    "enable",
+    "disableDaysOfWeek",
+    "enableDaysOfWeek"
+  ];
 
@@ -165,18 +170,2 @@ var dateOptions = ["maxDate", "minDate", "maxTime", "minTime", "now"];
 
-    Flatpickr.prototype.change = function change () {};
-
-    Flatpickr.prototype.open = function open () {};
-
-    Flatpickr.prototype.close = function close () {};
-
-    Flatpickr.prototype.monthChange = function monthChange () {};
-
-    Flatpickr.prototype.yearChange = function yearChange () {};
-
-    Flatpickr.prototype.ready = function ready () {};
-
-    Flatpickr.prototype.valueUpdate = function valueUpdate () {};
-
-    Flatpickr.prototype.dayCreate = function dayCreate () {};
-
     Flatpickr.prototype._initializeEvents = function _initializeEvents () {
@@ -186,4 +175,6 @@ var this$1 = this;
       events.forEach(function (event) {
-        var hook = "on" + (capitalize(event));
-        this$1.config[hook] = this$1[event].bind(this$1);
+        if (this$1[event]) {
+          var hook = "on" + (capitalize(event));
+          this$1.config[hook] = this$1[event].bind(this$1);
+        }
       });
@@ -204,4 +195,42 @@ };
       });
+      this._handleDaysOfWeek();
     };
 
+    Flatpickr.prototype._handleDaysOfWeek = function _handleDaysOfWeek () {
+      if (this.config.disableDaysOfWeek) {
+        this.config.disableDaysOfWeek = this._validateDaysOfWeek(
+          this.config.disableDaysOfWeek
+        );
+        this.config.disable = (this.config.disable || []).concat( [this._disable.bind(this)]
+        );
+      }
+
+      if (this.config.enableDaysOfWeek) {
+        this.config.enableDaysOfWeek = this._validateDaysOfWeek(
+          this.config.enableDaysOfWeek
+        );
+        this.config.enable = (this.config.enable || []).concat( [this._enable.bind(this)]
+        );
+      }
+    };
+
+    Flatpickr.prototype._validateDaysOfWeek = function _validateDaysOfWeek (days) {
+      if (Array.isArray(days)) {
+        return days.map(function (day) { return parseInt(day); });
+      } else {
+        console.error("days of week must be a valid array");
+        return [];
+      }
+    };
+
+    Flatpickr.prototype._disable = function _disable (date) {
+      var disabledDays = this.config.disableDaysOfWeek;
+      return disabledDays.includes(date.getDay());
+    };
+
+    Flatpickr.prototype._enable = function _enable (date) {
+      var enabledDays = this.config.enableDaysOfWeek;
+      return enabledDays.includes(date.getDay());
+    };
+
     Flatpickr.prototype._initializeDateFormats = function _initializeDateFormats () {
@@ -208,0 +237,0 @@ var this$1 = this;

karma.conf.js

@@ -56,3 +56,4 @@ // Karma configuration
         includeStack: true
-      }
+      },
+      clearContext: false
     },
@@ -93,3 +94,3 @@
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ["ChromeHeadless"],
+    browsers: ["Chrome"],
 
@@ -102,4 +103,4 @@ // Continuous Integration mode
     // how many browser should be started simultaneous
-    concurrency: Infinity
+    concurrency: 1
   });
 };

package.json

 {
   "name": "stimulus-flatpickr",
-  "version": "1.0.0",
+  "version": "1.1.0-beta1",
   "description": "A Stimulus Wrapper for Flatpickr library",
@@ -17,3 +17,3 @@ "main": "dist/stimulus-flatpickr.js",
     "test:watch": "yarn test --auto-watch --no-single-run",
-    "test:browser": "yarn test:watch --browsers Chrome",
+    "test:headless": "yarn test --auto-watch --no-single-run --browsers ChromeHeadless",
     "codecov": "codecov"
@@ -20,0 +20,0 @@ },

readme.md

@@ -24,2 +24,3 @@ <h1 align="center">📆 Stimulus-Flatpickr Wrapper</h1>
 - **strftime friendly**: [converts automatically strftime](#date-and-time-formats) formats to flatpickr formating tokens
+- **Disable days of week**: easily disable days of week (ie: all sundays)
 - **Turbolinks**: make all your datepickers compatible with Turbolinks by design
@@ -275,2 +276,39 @@ - **Getters**: all Flatpickr elements are available as [targets](#elements)
 
+### Enable/Disable days of week
+
+With Flatpickr to disable certain days of the week, you need to use the disable js function. Obviously passing a function through data-attributes is not easy 😄.
+
+The wrapper introduce two new configuration options:
+
+- `disableDaysOfWeek`: pass an array of days to disable (all others are enabled)
+- `enableDaysOfWeek`: pass an array of days to enable (all others are disabled)
+
+<table>
+<th>
+Code
+</th>
+<th>
+Result
+</th>
+<tr>
+<td>
+   <pre lang="erb">
+   <%= form_with model: Appointement.new, authenticity_token: true do |f| %>
+     <%= f.text_field :start_time,
+       data: {
+         controller: "flatpickr",
+         flatpickr_disable_days_of_week: [5,6], #disables saturdays and sundays
+         flatpickr_disable: ["2018-09-25", "2018-09-26"] #disables individual dates
+       } %>
+   <% end %>
+   </pre>
+</td>
+<td>
+  <p align="center">
+    <img src="./images/datetime-days-of-week.png" alt="datetime picker result days of week">
+  </p>
+</td>
+</tr>
+</table>
+
 ### Callbacks
@@ -343,2 +381,6 @@
 
+## Internationalization
+
+To handle multiple language to translate your datepicker and convert the date formats, you can have a look at the [example app](https://github.com/adrienpoly/rails_stimulus_flatpickr). `stimulus-flatpickr` makes it straight forward to handle locales.
+
 ## CSS
@@ -345,0 +387,0 @@

spec/flatpickr_controller_events_spec.js

@@ -1,5 +0,5 @@
-import Flatpickr from "../src/stimulus-flatpickr";
+import Flatpickr from "./controllers/flatpickr_hook_controller";
 import "flatpickr/dist/flatpickr.css";
 import {
-  registerApplication,
+  registerController,
   fixtureQuerySelector,
@@ -30,3 +30,3 @@ addFlatpickrOption,
     this.spyChange = this.sandbox.stub(Flatpickr.prototype, "change");
-    controller = await registerApplication("flatpickr", Flatpickr);
+    controller = await registerController("flatpickr", Flatpickr);
   });
@@ -33,0 +33,0 @@

spec/flatpickr_controller_spec.js

@@ -1,5 +0,5 @@
-import Flatpickr from "../src/stimulus-flatpickr";
+import Flatpickr from "./controllers/flatpickr_controller";
 import "flatpickr/dist/flatpickr.css";
 import {
-  registerApplication,
+  registerController,
   fixtureQuerySelector,
@@ -9,3 +9,4 @@ calendarQuerySelector,
   addFlatpickrOption,
-  resetDataAttributes
+  resetDataAttributes,
+  beforeEachSuite
 } from "./helpers";
@@ -19,5 +20,5 @@ import chai, { expect } from "chai";
 describe("Flatpickr Controller tests", function() {
-  before("initialize controller", async function() {
+  beforeEachSuite("initialize controller", async function() {
     fixture.load("index.html");
-    controller = await registerApplication("flatpickr", Flatpickr);
+    controller = await registerController("flatpickr", Flatpickr);
   });
@@ -50,2 +51,3 @@
     it("Flatpickr does not have open class", function() {
+      controller.fp.open();
       const otherInput = fixtureQuerySelector("#other-input");
@@ -59,5 +61,2 @@ otherInput.dispatchEvent(new Event("focus"));
   describe("Flatpickr options with time enabled", function() {
-    after(function() {
-      resetDataAttributes(controller);
-    });
     context("set enableTime false option", function() {
@@ -73,5 +72,2 @@ it("cannot set time", async function() {
     context("set enableTime true option", function() {
-      after(async function() {
-        await resetDataAttributes(controller);
-      });
       it("can set time", async function() {
@@ -112,12 +108,5 @@ await addFlatpickrOption("EnableTime", "true", controller);
   describe("Flatpickr options with time Disabled", function() {
-    before(async function() {
-      await addFlatpickrOption("EnableTime", "false", controller);
-    });
-
-    after(async function() {
-      await resetDataAttributes(controller);
-    });
-
     context("add multiMonth 2 option", function() {
       it("can see two months", async function() {
+        await addFlatpickrOption("EnableTime", "false", controller);
         await addFlatpickrOption("ShowMonths", 2, controller);
@@ -148,5 +137,5 @@ expect(flatpickrCalendar()).to.have.class("multiMonth");
         ).to.have.value("2018-10-15");
-        expect(controller.fp.config.dateFormat).to.equal("Y-m-d");
       });
-      it("base dateFormat remains the same", async function() {
+
+      it("base dateFormat remains the same", function() {
         expect(controller.fp.config.dateFormat).to.equal("Y-m-d");
@@ -165,12 +154,9 @@ });
   describe("Flatpickr dates options", function() {
-    before(async function() {
-      await addFlatpickrOption("DateFormat", "Y-m-d", controller);
-    });
-
     context("set min date", function() {
       it("dates before min date are disabled", async function() {
+        await addFlatpickrOption("DateFormat", "Y-m-d", controller);
+        await addFlatpickrOption("MinDate", "2018-10-03", controller);
         controller.fp.setDate("2018-10-15");
-        await addFlatpickrOption("MinDate", "2018-10-14", controller);
         expect(
-          document.querySelector('span[aria-label="October 6, 2018"]')
+          document.querySelector('span[aria-label="October 2, 2018"]')
         ).to.have.class("disabled");
@@ -181,3 +167,3 @@ });
     context("disable dates", function() {
-      it("disabled dates are disabled", async function() {
+      it("disabled individual dates are disabled", async function() {
         await addFlatpickrOption(
@@ -193,4 +179,104 @@ "Disable",
       });
+
+      it("add disable days of week all sundays are disabled", async function() {
+        await addFlatpickrOption("DisableDaysOfWeek", [6], controller);
+
+        expect(
+          document.querySelector('span[aria-label="October 6, 2018"]')
+        ).to.have.class("disabled");
+        expect(
+          document.querySelector('span[aria-label="October 13, 2018"]')
+        ).to.have.class("disabled");
+        expect(
+          document.querySelector('span[aria-label="October 14, 2018"]')
+        ).to.have.class("disabled");
+      });
+
+      it("enable individual dates are enabled", async function() {
+        await addFlatpickrOption(
+          "Enable",
+          ["2018-10-14", "2018-10-17"],
+          controller
+        );
+
+        expect(
+          document.querySelector('span[aria-label="October 14, 2018"]')
+        ).not.to.have.class("disabled");
+      });
+
+      it("add enable days of week only mondays are enabled", async function() {
+        await addFlatpickrOption("EnableDaysOfWeek", [1], controller);
+        expect(
+          document.querySelector('span[aria-label="October 8, 2018"]')
+        ).not.to.have.class("disabled");
+        expect(
+          document.querySelector('span[aria-label="October 15, 2018"]')
+        ).not.to.have.class("disabled");
+        expect(
+          document.querySelector('span[aria-label="October 14, 2018"]')
+        ).not.to.have.class("disabled");
+      });
     });
   });
+
+  describe("Flatpickr enable days of week only", function() {
+    it("add enable days of week", async function() {
+      await addFlatpickrOption("EnableDaysOfWeek", [1], controller);
+      const enabledDays = controller.daysTarget.querySelectorAll(
+        "span.flatpickr-day:not(.disabled)"
+      );
+      expect(enabledDays.length).to.be.within(4, 6);
+    });
+  });
+
+  describe("Flatpickr disable days of week only", function() {
+    it("add disable days of week", async function() {
+      await addFlatpickrOption("DisableDaysOfWeek", [1], controller);
+
+      const disabledDays = controller.daysTarget.querySelectorAll(
+        "span.flatpickr-day.disabled"
+      );
+      expect(disabledDays.length).to.be.within(4, 6);
+    });
+  });
+
+  describe("Flatpickr disable days test with invalid entries", function() {
+    context("don't provide an array", function() {
+      it("it still work and no days are disabled", async function() {
+        await addFlatpickrOption("DisableDaysOfWeek", 1, controller);
+
+        const disabledDays = controller.daysTarget.querySelectorAll(
+          "span.flatpickr-day.disabled"
+        );
+        expect(controller).to.exist;
+        expect(disabledDays.length).to.equal(0);
+      });
+    });
+
+    context("provide an array of string", function() {
+      it("it is the same as an array of integer", async function() {
+        await addFlatpickrOption("DisableDaysOfWeek", ["1"], controller);
+
+        const disabledDays = controller.daysTarget.querySelectorAll(
+          "span.flatpickr-day.disabled"
+        );
+        expect(controller).to.exist;
+        expect(disabledDays.length).to.be.within(4, 6);
+      });
+    });
+  });
+
+  describe("Flatpickr enable days test with invalid entries", function() {
+    context("don't provide an array", function() {
+      it("it still work and all days are disabled", async function() {
+        await addFlatpickrOption("EnableDaysOfWeek", 1, controller);
+
+        const disabledDays = controller.daysTarget.querySelectorAll(
+          "span.flatpickr-day.disabled"
+        );
+        expect(controller).to.exist;
+        expect(disabledDays.length).to.be.at.least(30);
+      });
+    });
+  });
 });

spec/flatpickr_controller_targets_spec.js

@@ -1,5 +0,5 @@
-import Flatpickr from "../src/stimulus-flatpickr";
+import Flatpickr from "./controllers/flatpickr_controller";
 import "flatpickr/dist/flatpickr.css";
 import {
-  registerApplication,
+  registerController,
   addFlatpickrOption,
@@ -32,4 +32,5 @@ resetDataAttributes
     fixture.load("index.html");
-    controller = await registerApplication("flatpickr", Flatpickr);
+    controller = await registerController("flatpickr", Flatpickr);
     await addFlatpickrOption("DefaultDate", new Date(), controller);
+    await Promise.resolve();
   });
@@ -36,0 +37,0 @@

spec/helpers.js

 import { Application } from "stimulus";
 
-async function registerApplication(element, controllerType) {
+async function registerController(element, controllerType) {
   const stimulusApp = Application.start();
   stimulusApp.register(element, controllerType);
+
   return new Promise(resolve =>
@@ -31,3 +32,3 @@ setTimeout(() => {
 function fixtureQuerySelector(selector) {
-  return fixture.el.querySelector(`${selector}`);
+  return fixture.el.querySelector(selector);
 }
@@ -49,4 +50,4 @@
 
-function beforeEachSuite(fn) {
-  before(function() {
+function beforeEachSuite(title, fn) {
+  before(title, function() {
     const suites = this.test.parent.suites || [];
@@ -62,3 +63,3 @@ suites.forEach(s => {
 export {
-  registerApplication,
+  registerController,
   fixtureQuerySelector,
@@ -65,0 +66,0 @@ calendarQuerySelector,

src/config_options.js

@@ -38,3 +38,8 @@ const booleanOptions = [
 
-const arrayOptions = ["disable", "enable"];
+const arrayOptions = [
+  "disable",
+  "enable",
+  "disableDaysOfWeek",
+  "enableDaysOfWeek"
+];
 
@@ -41,0 +46,0 @@ const dateOptions = ["maxDate", "minDate", "maxTime", "minTime", "now"];

src/stimulus-flatpickr.js

@@ -30,22 +30,8 @@ import { Controller } from "stimulus";
 
-  change() {}
-
-  open() {}
-
-  close() {}
-
-  monthChange() {}
-
-  yearChange() {}
-
-  ready() {}
-
-  valueUpdate() {}
-
-  dayCreate() {}
-
   _initializeEvents() {
     events.forEach(event => {
-      const hook = `on${capitalize(event)}`;
-      this.config[hook] = this[event].bind(this);
+      if (this[event]) {
+        const hook = `on${capitalize(event)}`;
+        this.config[hook] = this[event].bind(this);
+      }
     });
@@ -64,4 +50,46 @@ }
     });
+    this._handleDaysOfWeek();
   }
 
+  _handleDaysOfWeek() {
+    if (this.config.disableDaysOfWeek) {
+      this.config.disableDaysOfWeek = this._validateDaysOfWeek(
+        this.config.disableDaysOfWeek
+      );
+      this.config.disable = [
+        ...(this.config.disable || []),
+        this._disable.bind(this)
+      ];
+    }
+
+    if (this.config.enableDaysOfWeek) {
+      this.config.enableDaysOfWeek = this._validateDaysOfWeek(
+        this.config.enableDaysOfWeek
+      );
+      this.config.enable = [
+        ...(this.config.enable || []),
+        this._enable.bind(this)
+      ];
+    }
+  }
+
+  _validateDaysOfWeek(days) {
+    if (Array.isArray(days)) {
+      return days.map(day => parseInt(day));
+    } else {
+      console.error("days of week must be a valid array");
+      return [];
+    }
+  }
+
+  _disable(date) {
+    const disabledDays = this.config.disableDaysOfWeek;
+    return disabledDays.includes(date.getDay());
+  }
+
+  _enable(date) {
+    const enabledDays = this.config.enableDaysOfWeek;
+    return enabledDays.includes(date.getDay());
+  }
+
   _initializeDateFormats() {
@@ -68,0 +96,0 @@ dateFormats.forEach(dateFormat => {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

420

increased by11.11%

Worsened metrics

Total package byte prevSize

544335

decreased by-11.8%

Number of package files

46

decreased by-26.98%

Lines of code

1962

decreased by-9.12%

Number of low quality alerts

2

increased by100%

No dependency changes