From 21368be7b6b8331c2a8e40ea243c1fc828e12d69 Mon Sep 17 00:00:00 2001 From: Damandeep Singh Date: Wed, 16 May 2018 20:10:18 +0530 Subject: [PATCH] Added interface methods, updated docuentation --- README.md | 18 +++++++++++++ package.json | 2 +- timeslot-picker.js | 65 +++++++++++++++++++++++++--------------------- timeslot-unit.js | 2 -- 4 files changed, 55 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 2d9ed23..59725f6 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,24 @@ Please note: Property with `notify: true` fires a _property_-changed event when Reflected attributes updates the element with property attribute when the value changes. Example: *PropertyName* updates the attribute as `property-name="value"` +##Event Listener +|Event|Detail Object|Description| +|--|--|--| +|close| |Closes the Choose Slider| +|open|slot|Opens the Choose slider| + +dispatch Event to this element +Example: ```javascript + document.querySelector('timeslot-picker').dispatchEvent(new CustomEvent('open', { + detail: { + slot: 2 + } + }))``` + + + + + [npm][1] diff --git a/package.json b/package.json index 7dc7f34..2195b9c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "timeslot-picker", "description": "A polymer element for choosing timeslots. Timeslots can be variable.", "main": "timeslot-picker.js", - "version": "0.9.6", + "version": "0.9.7", "dependencies": { "@polymer/polymer": "^3.0.0" }, diff --git a/timeslot-picker.js b/timeslot-picker.js index 3abde30..f75b788 100644 --- a/timeslot-picker.js +++ b/timeslot-picker.js @@ -204,7 +204,6 @@ class TimeslotPicker extends PolymerElement { for(let i=0; i<=47; i++) { let time = this._convert24to12Hours(this._addMinutes(startTime,30 * i)); - //console.log(time, bookedSlots); let unit = document.createElement('timeslot-unit'); unit.set('initialTime', time); @@ -217,35 +216,31 @@ class TimeslotPicker extends PolymerElement { aUnits=0; } - // console.log(time, bookedSlots) - if(bookedSlots.indexOf(time)>-1) { - console.log(time, bookedSlots) - const currentBooking = ((o,t) => { - for(const b of o) { - if(b.meetingStartTime == t) - return b; - } - return null; - })(this.bookings,time); - // console.log('BOOKING: ', currentBooking) - if(currentBooking) { - unit.set('units', currentBooking.units||1); - unit.set('bookingId',currentBooking.meetingId); - i+=currentBooking.units-1; + if(bookedSlots.indexOf(time)>-1) { + const currentBooking = ((o,t) => { + for(const b of o) { + if(b.meetingStartTime == t) + return b; } - // console.log(unit); - if(aUnits>0) { - this.availableSlots.push({availableSlotStartTime,availableSlotId,aUnits}) - availableSlotStartTime=null; - } - } else{ - aUnits++; + return null; + })(this.bookings,time); + if(currentBooking) { + unit.set('units', currentBooking.units||1); + unit.set('bookingId',currentBooking.meetingId); + i+=currentBooking.units-1; + } + if(aUnits>0) { + this.availableSlots.push({availableSlotStartTime,availableSlotId,aUnits}) + availableSlotStartTime=null; } + } else{ + aUnits++; + } - unit.addEventListener('timeslot-pick-start', this._addOverlayListener.bind(this)); + unit.addEventListener('timeslot-pick-start', this._addOverlayListener.bind(this)); - if((i==47) && availableSlotStartTime) - this.availableSlots.push({availableSlotStartTime,availableSlotId,aUnits}) + if((i==47) && availableSlotStartTime) + this.availableSlots.push({availableSlotStartTime,availableSlotId,aUnits}) this.appendChild(unit); } @@ -254,9 +249,7 @@ class TimeslotPicker extends PolymerElement { for(let a of this.get('availableSlots')) { const index = parseInt(a['availableSlotId'].split('slot_')[1]), limit=index+a['aUnits']; - // console.log(a, index, index+limit) for(let i = index;i { + this.$.overlaycontainer.innerHTML; + this.set('overlayActive', false); + }) + + this.addEventListener('open', e=> { + let slot; + if(e.detail) + slot = e.detail.slot + if(slot) + this.querySelector('#slot_' + slot).click(); + }) } + + _computeRangeLeftPosition(rangeContainerOffset){ return rangeContainerOffset - this.$.container.scrollLeft; } diff --git a/timeslot-unit.js b/timeslot-unit.js index f1aa34c..b85952d 100644 --- a/timeslot-unit.js +++ b/timeslot-unit.js @@ -126,14 +126,12 @@ class TimeslotUnit extends PolymerElement { _unitsChanged(newVal,oldVal) { const unitWidth = this.unitWidth || parseInt(getComputedStyle(this).getPropertyValue('--timeslot-unit-width')) || 50;//getComputedStyle(this).getPropertyValue('--timeslot-unit-width') is not working for UNTIS in firefox !HACK - console.log("DAMAN", unitWidth, this.unitWidth ) this.style.maxWidth = (unitWidth*newVal) + 'px'; this.style.width = (unitWidth*newVal) + 'px'; this.set('singleLineView', newVal!=1) } _bookingChanged(newVal,oldVal) { - //console.log(newVal,oldVal) if(!newVal) this.set('units', 1); }