Merge pull request #2 from DamandeepS/tooltip

Tooltip
DamandeepS · May 16, 2018 · f9bb7a1 · f9bb7a1
2 parents c74f984 + 44c6e96
commit f9bb7a1
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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<limit;i++ ) {
-        // console.log(a, "asd") //, parseInt(a['availableSlotId'].split('slot_')[1]), i, a['aUnits'] - i
         document.querySelector('#slot_' + i).availableUnits = limit - i;
       }
     }
@@ -341,7 +334,6 @@ class TimeslotPicker extends PolymerElement {
   }
 
   _startTimeChanged(newVal, oldVal) {
-    console.log(newVal)
     if(newVal && !this.chosenEndTime) {
       const end = this._convert24to12Hours(this._addMinutes(this._convert12to24Hours(newVal),30))
       this.chosenEndTime =  end;
@@ -355,8 +347,23 @@ class TimeslotPicker extends PolymerElement {
       this.rangeContainerOffset+=1;
       this.rangeContainerOffset-=1;
     });
+
+    this.addEventListener('close', e=> {
+      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
@@ -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);
   }