@sedoo/unidoo 0.0.58 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sedoo/unidoo",
-    "version": "0.0.58",
+    "version": "0.0.62",
     "private": false,
     "scripts": {
         "build": "vue-cli-service build --target lib --name unidoo src/plugin.js",

package/src/components/unidoo-heatmap/Heatmap.js

@@ -8,6 +8,8 @@ export default class CalendarHeatmap {
       this.max = Math.ceil((Math.max(...values.map(day => day.count)) / 5) * 4)
     }
     this.values = values.map(v => { return { date: this._valuesDateFormat(v.date), count: v.count } })
+    this.times = this._getTimes(year)
+    this.times.sort()
   }
 
   get activities () {
@@ -44,6 +46,13 @@ export default class CalendarHeatmap {
     return new Date(year, month + 1, 0).getDate()
   }
 
+  daysInYear(year) {
+    const start = new Date(year, 0, 0)
+    const end = new Date(year, 11, 31)
+    const diff = end - start
+    return Math.floor(diff / (1000 * 60 * 60 * 24))
+  }
+
   getColorIndex (value) {
     if (value == null || value === undefined) {
       return 0
@@ -72,10 +81,95 @@ export default class CalendarHeatmap {
     }
   }
 
+  getNextAvailableDate(date, countGreaterThanZero) {
+    if (date) {
+      date.setHours(0, 0, 0)
+      if (this.times && this.times.length) {
+        let index = this.times.indexOf(this._encodeDate(date, null))
+        if (index < 0) index = this.times.indexOf(this._encodeDate(date, 1))
+        if (index < 0) index = this.times.indexOf(this._encodeDate(date, 0))
+        if (index >= 0) {
+          const maxIndex = this.times.length - 1
+          let n = index + 1
+          if (countGreaterThanZero) {
+            while (n < maxIndex) {
+              const curr = this.times[n]
+              if (curr.endsWith('i')) return this._decodeDate(curr)
+              n++
+            }
+          } else {
+            while (n < maxIndex) {
+              const curr = this.times[n]
+              if (!curr.endsWith('n')) return this._decodeDate(curr)
+              n++
+            }
+          }
+        } 
+      }
+    }
+    return null
+  }
+
+  getPreviousAvailableDate(date, countGreaterThanZero) {
+    if (date) { 
+      date.setHours(0, 0, 0)
+      if (this.times && this.times.length) {
+        let index = this.times.indexOf(this._encodeDate(date, null))
+        if (index < 0) index = this.times.indexOf(this._encodeDate(date, 1))
+        if (index < 0) index = this.times.indexOf(this._encodeDate(date, 0))
+        if (index > 0) {
+          let n = index - 1
+          if (countGreaterThanZero) {
+            while (n > 0) {
+              const curr = this.times[n]
+              if (curr.endsWith('i')) return this._decodeDate(curr)
+              n--
+            }
+          } else {
+            while (n > 0) {
+              const curr = this.times[n]
+              if (!curr.endsWith('n')) return this._decodeDate(curr)
+              n--
+            }
+          }
+        }
+      }
+    }
+    return null
+  }
+
+  _getTimes (year) {
+    const date = new Date(year, 0, 1)
+    return Array.from({ length: this.daysInYear(year) }, 
+      () => {
+        const dDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+        dDate.setHours(0, 0, 0)
+        const dayValues = this.activities[this._keyDayParser(dDate)]
+        date.setDate(date.getDate() + 1)
+        return this._encodeDate(dDate, (dayValues) ? dayValues.count : null)
+      }
+    )
+  }
+  
   _valuesDateFormat (d) {
     if (!d) return ''
-    const date = (d instanceof Date) ? d : (new Date(d));
-    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+    const date = this._parseDate(d)
+    return `${date.getFullYear()}-${this._paddNumber(date.getMonth() + 1)}-${this._paddNumber(date.getDate())}`
+  }
+
+  _paddNumber (n) {
+    return ('' + n).padStart(2, '0')
+  }
+
+  _encodeDate (d, count) {
+    const date = this._parseDate(d)
+    return this._valuesDateFormat(date) + ((Number.isFinite(count)) ? ((count > 0) ? 'i' : 'o') : 'n')
+  }
+
+  _decodeDate (d) {
+    if (!d) return null
+    const sdate = d.slice(0, -1)
+    return new Date(sdate)
   }
 
   _parseDate (entry) {

package/src/components/unidoo-heatmap/UnidooHeatmap.vue

@@ -93,14 +93,16 @@ export default {
   watch: {
     dateValue (val) {
       this.focusDate(val)
+      this.updateDateSwitcher(val)
     },
-    year (val) {
-      if (val !== this.year) {
+    year (val, old) {
+      if (val !== old) {
         const rects = document.querySelectorAll('[heatmap-calendar] [month] .monthday')
         rects.forEach(element => {
           element.classList.remove('day-focus')
         });
         this.focusDate(this.dateValue)
+        this.updateDateSwitcher(null)
       }
     }
   },
@@ -130,14 +132,23 @@ export default {
   },
   beforeMount () {
     Plugin.EventBus.$on("unidoo-heatmap-set-date", params => {
-      if(this.heatmapKey && params.key === this.heatmapKey){
-        if(params.date){
+      if(this.heatmapKey) {
+        if (params.key === this.heatmapKey && params.date){
           this.setDate(params.date)
-        }
+        } 
       } else if(params.date) {
         this.setDate(params.date)
       }
     })
+    Plugin.EventBus.$on("unidoo-heatmap-get-date", params => {
+      if(this.heatmapKey) {
+        if (params.key === this.heatmapKey){
+          this.updateDateSwitcher(this.dateValue)
+        } 
+      } else { 
+        this.updateDateSwitcher(this.dateValue)
+      }
+    })
   },
   methods: {
     computeClass (day) {
@@ -185,8 +196,29 @@ export default {
     setDate (d) {
       if (!d) return
       const day = this.heatmap.getDayFromDate(d);
-      this.handleClick(null, day); 
-    
+      this.handleClick(null, day);
+    },
+    updateDateSwitcher (d) {
+      this.$unidooDateSwitcher.update({
+        hasPrevious: this.hasPreviousDate(d), 
+        hasNext : this.hasNextDate(d), 
+        previousAvailable : this.heatmap.getPreviousAvailableDate(d),
+        nextAvailable : this.heatmap.getNextAvailableDate(d) 
+      }, this.heatmapKey);
+    },
+    hasPreviousDate (d) {
+      if(!d || !this.compairDateWithYear(d)) return false
+      const syear = (this.year instanceof Date) ? this.year.getFullYear() : this.year;
+      const firstDay = new Date(syear, 0, 1);
+      if(d <= firstDay) return false;
+      return true; 
+    },
+    hasNextDate (d) {
+      if(!d || !this.compairDateWithYear(d)) return false
+      const today = new Date();
+      today.setHours(0,0,0,0);
+      if(d >= today) return false;
+      return true;
     },
     focusDate (d) {
       if (!d) return
@@ -254,6 +286,15 @@ export default {
       return first.getFullYear() === second.getFullYear() &&
         first.getMonth() === second.getMonth() &&
         first.getDate() === second.getDate()
+    },
+    compairDateWithYear (d) { 
+      if(this.year && d){
+        const sd = '' + ((d instanceof Date) ? d.getFullYear() : d);
+        const syear = '' + ((this.year instanceof Date) ? this.year.getFullYear() : this.year);
+        return syear === sd;
+      } else {
+        return false
+      }
     }
   }
 }

package/src/components/unidoo-heatmap/date-switcher.vue

@@ -1,46 +1,119 @@
 <template>
   <div date-switch>
-    <v-btn icon x-small  style="margin-right: 5px;" @click="switchDate(-1)">
+    <v-btn icon x-small :disabled="!previousAvailable" style="margin-right: 4px;" @click="goToPreviousAvailable(1)">
       <v-icon>mdi-skip-previous</v-icon>
     </v-btn>
+    <v-btn icon x-small :disabled="!hasPrevious" style="margin-right: 8px;" @click="switchDate(-1)">
+      <v-icon>mdi-rewind</v-icon>
+    </v-btn>
     <v-icon>mdi-calendar-month</v-icon>
-    <v-btn icon x-small  style="margin-left: 5px;" @click="switchDate(1)">
+    <v-btn icon x-small :disabled="!hasNext" style="margin-left: 8px;" @click="switchDate(1)">
+      <v-icon>mdi-fast-forward</v-icon>
+    </v-btn>
+    <v-btn icon x-small :disabled="!nextAvailable" style="margin-left: 4px;" @click="goToNextAvailable(1)">
       <v-icon>mdi-skip-next</v-icon>
     </v-btn>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'date-switcher',
+import Plugin from '../../plugin.js'
 
+export default {
   props: {
     date : {
       type : [String, Date],
       default: null
+    },
+    heatmapKey: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      hasNext: false,
+      hasPrevious: false,
+      nextAvailable: {
+        type: Date,
+        default: null
+      }, 
+      previousAvailable: {
+        type: Date,
+        default: null
+      },
     }
   },
-
   computed:{
     cleanedDate(){
-      if(this.date){
-        if(typeof this.date === 'date'){
-          return date;
-        } else if(typeof this.date === 'string'){
-          return new Date(this.date);
-        }
-      } 
-      return null;
+      return this.cleanDate(this.date);
     }
   },
+  beforeMount () {
+    Plugin.EventBus.$on("unidoo-dateswitcher-update", params => {
+      if(this.heatmapKey) {
+        if (params.key === this.heatmapKey && params.data){
+          this.updateNearDates(params.data);
+        } 
+      } else if(params.data) {
+        this.updateNearDates(params.data);
+      } else {
+        this.reset();
+      }
+    })
+  },
+
+  mounted () {
+    this.$unidooHeatmap.getDate(this.heatmapKey);
+  },
 
   methods: {
+    reset(){
+      this.hasNext = false
+      this.hasPrevious = false
+      this.nextAvailable = null
+      this.previousAvailable = null
+    },
+    goToNextAvailable() {
+      if(this.hasNext) {
+        this.$unidooHeatmap.setDate(this.cleanDate(this.nextAvailable), this.heatmapKey);
+      }
+    },
+
+    goToPreviousAvailable() {
+      if(this.hasPrevious) {
+        this.$unidooHeatmap.setDate(this.cleanDate(this.previousAvailable), this.heatmapKey);
+      }
+    },
+
     switchDate(n){
       if(this.cleanedDate && n){
-        let newDate = new Date(this.cleanedDate);
-        newDate.setDate(this.cleanedDate.getDate() + n);
-        this.$unidooHeatmap.setDate(newDate);
+        if((n > 0 && this.hasNext) || (n < 0 && this.hasPrevious)){
+          let newDate = new Date(this.cleanedDate);
+          newDate.setDate(this.cleanedDate.getDate() + n);
+          this.$unidooHeatmap.setDate(newDate, this.heatmapKey);
+        }
       }
+    },
+
+    updateNearDates(data){
+      if(data){
+        this.hasNext = data.hasNext
+        this.hasPrevious = data.hasPrevious
+        this.nextAvailable = data.nextAvailable
+        this.previousAvailable = data.previousAvailable
+      }
+    },
+
+    cleanDate(date){
+      if(date){
+        if(date instanceof Date){
+          return date;
+        } else if(typeof date === 'string'){
+          return new Date(date);
+        }
+      } 
+      return null;
     }
   }
 }
@@ -51,6 +124,7 @@ export default {
     display: flex;
     align-items: center;
     padding: 1px;
+    width: fit-content;
     background: rgb(245,245,245);
     border-radius: 5px;
   }

package/src/components/unidoo-player/unidoo-player-layout/UnidooPlayerLayout.vue

@@ -14,11 +14,11 @@
           <v-row viewer-part :style="{ order: ((playerBarTop) ? 2 : 4) }">
           
             <v-list-item player-layout-slider-part >
-              <v-col>
+              <div style="display: flex; flex-direction: column; width: 100%">
                 <div custom-top-left >
                   <slot name="customField"></slot>
                 </div>
-                <div style="display: flex; justify-content: center; margin-top: 25px;">
+                <div style="display: flex; justify-content: center; margin-top: 10px;">
                   <slot name="frameTitle">
 
                   </slot>
@@ -80,7 +80,7 @@
                 </v-slider>
 
                 <iframe ref="sizeHandlerIframe" src="about:blank" style="width:100%; height:0; border:0;"></iframe>
-              </v-col>
+              </div>
             </v-list-item>
             
           </v-row>
@@ -466,6 +466,7 @@ export default {
   [player-layout] [body] [sub-body] {
     display: grid;
     background: white;
+    align-items: center;
   }
 
   [player-layout] [mask] {
@@ -484,6 +485,7 @@ export default {
   [viewer-part] {
     margin-top: 0;
     margin-bottom: 0;
+    height: 100%;
   }
 
   [player-layout-slider-part] {
@@ -513,12 +515,13 @@ export default {
 
   [reload-button] {
     position: absolute;
-    top: 0;
+    top: -5px;
     right: 15px;
   }
 
   [player-layout].zoomed [body] {
     position: fixed;
+    display: block;
     z-index: 99999;
     top: 6vh;
     left: 4vw;
@@ -526,7 +529,6 @@ export default {
     overflow: auto;
     margin-top: -5px;
     margin-bottom: 5px;
-    padding-top: 5px;
     padding-left : 15px; 
     padding-right : 15px;
     height: auto;

package/src/plugin.js

@@ -154,6 +154,16 @@ function install(Vue) {
         setDate(date, key) {
             plugin.EventBus.$emit("unidoo-heatmap-set-date", { date: date, key: key })
         },
+
+        getDate(key) {
+            plugin.EventBus.$emit("unidoo-heatmap-get-date", { key: key })
+        }
+    }
+
+    Vue.prototype.$unidooDateSwitcher = {
+        update(data, key) {
+            plugin.EventBus.$emit("unidoo-dateswitcher-update", { data: data, key: key })
+        },
     }
 }