bookingsync-calendar-widget - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

package.json

 {
   "name": "bookingsync-calendar-widget",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "BookingSync Calendar Widget",
@@ -5,0 +5,0 @@ "main": "dist/bookingsync-calendar-widget.js",

README.md

@@ -1,5 +0,27 @@
-# Calendar Widget
-[![CircleCI](https://circleci.com/gh/BookingSync/calendar-widget.svg?style=svg&circle-token=8c6343e12779072713c394d9be543728012efc92)](https://circleci.com/gh/BookingSync/calendar-widget)
+# Calendar Widget [![CircleCI](https://circleci.com/gh/BookingSync/calendar-widget.svg?style=svg&circle-token=8c6343e12779072713c394d9be543728012efc92)](https://circleci.com/gh/BookingSync/calendar-widget)
 
-## Setup
+## TL;DR
+### Development
+* `yarn`
+* `yarn start`
+
+### Usage
+* load `dist/bookingsync-calendar-widget.js` script
+* add `<div data-bookingsync-calendar-widget></div>` tag to the place you would like to put the widget. 
+
+* Or as global.
+```javascript
+const calendar = new BookingSyncCalendar({ el: document.querySelector('.my-widget') });
+````
+
+* Or as module 
+```javascript
+import Calendar from 'bookingsync-calendar-widget';
+
+const calendar = new Calendar({ el: document.querySelector('.my-widget') });
+````
+
+@see `index.html` for more examples.
+
+### Setup
 * [Webpack](webpack.github.io) based.
@@ -20,5 +42,5 @@ * ES6 as a source.
 ## Scripts
-* `npm start` - starts development server with live-reload and hot module replacement
-* `npm run build` - produces production version under the `dist` folder
-* `npm run test` - runs tests.
+* `yarn start` - starts development server with live-reload and hot module replacement
+* `yarn run build` - produces production version under the `dist` folder
+* `yarn run test` - runs tests.
 
@@ -28,4 +50,79 @@ ## Config
 | ---        | ---             | ---      | ---         |
+| `el` | HTMLElement to act as a container (only this one is MANDATORY) | HTMLElement | null
 | `apiHost` | API host name | String | `http://localhost:3000` for development, `https://www.bookingsync.com` for production |
 | `apiNamespace` | API namespase | String | `/api/v2/public` |
 | `apiMapsRoute` | route for maps | String | `/maps.json?rental_id={params}` - `{params}` is replaced with `rentalId` |
+| `rentalURL` | URL route for maps | Function | |
+| `rentalId` | parameter to pass in API request for availability maps | String or Number | null
+| `minStay` | Minimum selectable range | Number | 1
+| `monthStart` | Calendar starts months, the left up most, 0 - 11 range | Number | Current month 
+| `yearStart` | Calendar start year, YYYY format (2016) | Number | Current year
+| `displayMonths` | How many months to render | Number | 2
+| `selectable` | Allow to select range | Boolean | false
+| `showRates` | Show rates from availability map | Boolean | false
+| `showMinStay` | Show minimum stay per single day (not recommended to use together with `showRates` | Boolean | false
+| `isReverseSelectable` | User selects end date first | Boolean | false
+| `isBackDisabled` | Disable back button for past months | Boolean | true
+| `isDropDown` | Act like drop down, good idea to specify `elStartAt` and `elEndAt` | Boolean | false
+| `elStartAt` | Input field to show start selected, open drop-down on focus| HTMLElement | null
+| `elEndAt` | Input field to show esd selected, open drop-down on focus | HTMLElement | null
+| `elReset` | Any element on click resets calendar selections and input values | HTMLElement | null
+| `formatDate` | Overwrite locale defined date format | String | 'dd/mm/yyyy'
+| `currDate` | Current date Date object | Date | `new Date()`
+
+## Callbacks
+
+* `onSelectStart(ISO String, Date)`
+* `onSelectEnd(ISO String, Date)`
+
+see `index.html` for more examples.
+All options can be passed as `data-` attributes to HTMLElement calendar placeholders, with dasherized way.
+e.g.
+
+```html
+<div 
+  data-bookingsync-calendar-widget
+  data-selectable="true"
+  data-format-date="dd.mm.yyyy">
+</div>
+```
+
+## Events
+Calendar implements event Emitter, receiver can subscribe/unsubscribe to events and subscribe one-time.
+
+```javascript
+var cal = new BookingSyncCalendarWidget({
+  el:         document.querySelector('.calendar-wrapper'),
+});
+
+cal.on('selection-end', function(a, b) {
+  console.log('selection-end', a, b)
+});
+cal.on('selection-start', function(a, b) {
+  console.log('selection-start', a, b)
+});
+
+cal.once('selection-end', function(a, b) {
+    console.log('selection-end', a, b)
+ });
+ 
+cal.off('selection-end', function(a, b) {
+    console.log('selection-end', a, b)
+ }); 
+```
+
+| __Event__ | __Description__ | __Params__ |
+| ---       | ---             | ---        |
+| `init`      | Finished initializing, data is NOT loaded |  |
+| `maps-loaded` | Availability, rates and minimum stay maps are loaded and added to calendar | {Object} raw response from the server |  
+| `maps-error` | Error when loading maps |  |
+| `loading-show` | Loading indicator shows |  |
+| `loading-hide` | Loading indicator hides |  |
+| `selection-start` | User selected start date | {String} {Date}, ISO format '2016-01-01', Date |
+| `selection-end` | User selected end date | {String} {Date}, ISO format '2016-01-01', Date |
+| `selection-reset` | Selection reset | {Array}, {Array}, selection start, selection end ([yyyy, m, dd]) |
+| `selection-completed` | User selects end date when start date was already selected | {Array}, {Array}, selection start, selection end ([yyyy, m, dd]) |
+| `drop-open` | Calendar-drop open |  | 
+| `drop-close` | Calendar-drop close |  | 
+
+

src/calendar.js

@@ -203,7 +203,7 @@ /* global VERSION, Node, NODE_ENV, CSS_PREFIX, document, require */
       this.loaderEl = this.el.appendChild(elementFromString(tpls.loading));
-      this.emit('loading-starts');
+      this.emit('loading-show');
     } else {
       destroyElement(this.loaderEl);
       this.loaderEl = null;
-      this.emit('loading-ended');
+      this.emit('loading-hide');
     }
@@ -408,3 +408,3 @@ }
 
-    this.emit('clear-selection', this.selectionStart, this.selectionEnd);
+    this.emit('selection-reset', this.selectionStart, this.selectionEnd);
     if (isFunction(this.opts.onClearSelection)) {
@@ -627,2 +627,3 @@ this.opts.onClearSelection(this.selectionStart, this.selectionEnd);
       if (isArray(rental.data) && rental.data[0].attributes) {
+        this.emit('maps-loaded', rental);
         this.addMaps(rental.data[0].attributes);
@@ -637,2 +638,3 @@ this.mapsLoaded = true;
       this.toggleLoading();
+      this.emit('maps-error');
       console.error('Server error happened');
@@ -676,2 +678,3 @@ };
       if (!calDrop.isOpened()) {
+        this.emit('drop-open');
         calDrop.open();
@@ -734,2 +737,3 @@ if (!this.mapsLoaded) {
     } else {
+      this.emit('drop-close');
       this.switchInputFocus('any');
@@ -736,0 +740,0 @@ this.calDrop.close();

tests/acceptance/bookingsync-calendar.spec.js

@@ -20,3 +20,2 @@ /* global describe, module, it, before, after, document, xit, beforeEach, afterEach */
 
-
 const div1 = stubElement('div', {
@@ -41,8 +40,12 @@ 'data-bookingsync-calendar-widget': true,
   it('renders 2 widgets on the page', () => {
-    expect(document.querySelectorAll(`.${calendar}`).length).to.be.equal(2);
+    document.addEventListener('DOMContentLoaded', () => {
+      expect(document.querySelectorAll(`.${calendar}`).length).to.be.equal(2);
+    });
   });
 
   it('renders 4 (2 * 2) months', () => {
-    expect(document.querySelectorAll(`.${mCell}`).length).to.be.equal(4);
+    document.addEventListener('DOMContentLoaded', () => {
+      expect(document.querySelectorAll(`.${mCell}`).length).to.be.equal(4);
+    });
   });
 });

tests/acceptance/calendar.spec.js

@@ -18,3 +18,3 @@ /* global describe, module, it, before, after, document, xit */
 
-describe.only('sense checks', () => {
+describe('sense checks', () => {
   let widget;
@@ -21,0 +21,0 @@ let rootElement;

No alert changes

Improved metrics

Total package byte prevSize

351264

1.38%

Lines of code

1682

0.6%

Number of lines in readme file

127

323.33%

No dependency changes