capibara 1.1.21 → 1.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "capibara",
-  "version": "1.1.21",
+  "version": "1.1.25",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

package/src/lib/capibara.js

@@ -169,6 +169,7 @@ export class Capibara{
     this.$inputsNavRight   = inputs;
     this.$capibara = $capibara;
     this.$elements = {
+      $headerTop,
       $detailDay,
       $contextMenu,
       $floatBoxContainer,
@@ -188,10 +189,7 @@ export class Capibara{
 
     this.containerElement.innerHTML = "";
     this.containerElement.appendChild($capibara);
-
-    if(config.timeline.tabs){
-      this.selectTab(initialTab, false);
-    }
+    this.selectTab(initialTab);
 
     return $capibara;
   }
@@ -254,18 +252,21 @@ export class Capibara{
    */
   selectTab(tab, redraw = true){
 
-    let $tab = this.$capibara.querySelector('.tab[input-key="'+tab.id+'"]');
+    //let $tab = this.$capibara.querySelector('.tab[input-key="'+tab.id+'"]');
 
-    if($tab){
+    if(tab){
       this.tabSelected = tab;
+      /*
       this.$capibara.querySelector(".tabs-select").value = tab.id;
       this.$capibara.querySelectorAll(".tab").forEach(t => {t.classList.remove("active")});
       $tab.classList.add("active");
+      */
 
       this.cleanMultiInput();
 
       if(redraw){
         this.redraw({
+          headerTop:true,
           cornerLeft: true,
           navLeft: true,
           navRight: true,
@@ -288,6 +289,19 @@ export class Capibara{
     }
   }
 
+  selectLegend(evt){
+    let legend = evt.detail.legend;
+    if(legend){
+      legend.active = !legend.active;
+    }
+
+    this.redraw({
+      headerTop: true,
+      floatBox: true,
+      detailDay: true
+    });
+  }
+
   /**
    * muestra alternadamente los sidebar initial y extended
    */
@@ -655,12 +669,12 @@ export class Capibara{
   rightClickOnTable(evt){
     if(this.config.timeline.contextMenu){
       this.hideDetailDay();
-      this.showContextMenu(evt);
+      this.showContextMenuOnTable(evt);
       evt.preventDefault();
     }
   };
 
-  showContextMenu(evt){
+  showContextMenuOnTable(evt){
 
     let date  = utils.getDayByEvent(this.config, evt, this.$elements.$table);
     let item  = utils.getItemByEvent(this.config, evt, this.$elements.$table);
@@ -670,14 +684,17 @@ export class Capibara{
       return;
     }
 
-    let position = utils.eventToPosition(this.config, evt, this.$elements.$table);
+    //let position = utils.eventToPosition(this.config, evt, this.$elements.$table);
     let { elem:$elem, isVisible } = tableElements.createContextMenu({
+      tabSelected: this.tabSelected,
+      $capibaraElem : this.$capibara,
       config: this.config,
       evt,
-      position,
+      //position,
       date,
       item,
-      selected: this.selected
+      selected: this.selected,
+      name: "onTable"
     });
 
     if($elem){
@@ -796,9 +813,7 @@ export class Capibara{
       this.selected.splice(index, 1);
     }
 
-    this.selected.forEach((s, index) => {
-      s.index = index+1;
-    })
+    this.setIndexToSelected();
 
     if(redraw){
       this.redrawSelection()
@@ -812,9 +827,7 @@ export class Capibara{
 
 
   select(date, item, pos, redraw = true){
-    let index = utils.indexSelectedDay(this.selected, {date, item});
-
-    if(index < 0){
+    if(!this.isSelected(date, item)){
 
       this.selected.push({
         index: 0,
@@ -858,9 +871,7 @@ export class Capibara{
       }
     })
 
-    this.selected.forEach((s, index) => {
-      s.index = index+1;
-    })
+    this.setIndexToSelected();
 
     if(redraw){
       this.redrawSelection()
@@ -868,7 +879,40 @@ export class Capibara{
   };
 
 
+  setIndexToSelected(){
+    this.selected.forEach((s, index) => {
+      s.index = index+1;
+    })
+  };
+
+
+  isSelectedAllDate(date){
+    let isAllSelected = true;
+    this.config.data.forEach(parent => {
+      parent.children.forEach(item => {
+        if(!this.isSelected(date, item)){
+          isAllSelected = false;
+        }
+      });
+    });
+    return isAllSelected;
+  };
 
+  selectByDate(date){
+    this.config.data.forEach(parent => {
+      parent.children.forEach(item => {
+        this.selectByItemDate(date, item, false);
+      });
+    });
+  };
+
+  deselectByDate(date){
+    this.config.data.forEach(parent => {
+      parent.children.forEach(item => {
+        this.deselectByItemDate(date, item, false);
+      });
+    });
+  };
 
   selectByItemDate(date, item, redraw = true){
     if(!this.isSelected(date, item)){
@@ -909,7 +953,9 @@ export class Capibara{
   };
 
   hideContextMenu(){
-    this.$elements.$contextMenu.classList.add("cm-hide");
+    if(this.$elements.$contextMenu){
+      this.$elements.$contextMenu.classList.add("cm-hide");
+    }
     this.isVisibleContextMenu = false;
   };
 
@@ -933,13 +979,13 @@ export class Capibara{
     let yPositionClass = "has-top-arrow";
     let xPositionClass = "";
 
-    //condicion para primeras 2 filas
-    if(position.topClient <= itemHeight *2 ){
+    //condicion para primeras 3 filas
+    if(position.topClient <= itemHeight *3 ){
       yPositionClass = "has-ceil-arrow";
     }else if( position.yPercent > 20 &&
-      position.yPercent <= 50){ //entre 20 y 50 %
+      position.yPercent <= 70){ //entre 20 y 50 %
       yPositionClass = "has-middle-arrow";
-    }else if(position.yPercent > 50){
+    }else if(position.yPercent > 70){
       yPositionClass = "has-bottom-arrow";
     }
 
@@ -987,15 +1033,47 @@ export class Capibara{
 
   clickDateHeader(evt){
     let date = evt.detail.date;
-    this.selected = [];
-    this.config.data.forEach(parent => {
-      parent.children.forEach(item => {
-        this.selectByItemDate(date, item, false);
-      });
-    });
+    this.toggleSelectByDate(date);
     this.redrawSelection();
   }
 
+  toggleSelectByDate(date){
+    if(this.isSelectedAllDate(date)){
+      this.deselectByDate(date);
+    }else{
+      this.selectByDate(date);
+    }
+    this.selected = this.selected.sort((s, n) => {
+      return (new Date(s.date)) - (new Date(n.date));
+    });
+    this.setIndexToSelected();
+  }
+
+
+  contextMenuDateHeader(evt){
+    let left = evt.detail.clientX;
+    let top = evt.detail.clientY - this.$capibara.getBoundingClientRect().top;
+    let date = evt.detail.date;
+
+    let { elem:$elem, isVisible } = tableElements.createContextMenu({
+      tabSelected: this.tabSelected,
+      $capibaraElem: this.$capibara,
+      config: this.config,
+      selected: this.selected,
+      date,
+      left,
+      top,
+      name: "onDateHeader"
+    });
+
+    if($elem){
+      this.isVisibleContextMenu = isVisible;
+      this.$elements.$contextMenu.replaceWith($elem);
+      this.$elements.$contextMenu = $elem;
+    }
+
+  }
+
   /**
    * Captura evento window resize
    * para verificar si es mobile o no
@@ -1063,6 +1141,7 @@ export class Capibara{
     this.$capibara.addEventListener("clickNavLeftTreeIcon" , this.clickNavLeftTreeIcon.bind(this));
     this.$capibara.addEventListener("mouseOverFloatBox"    , this.mouseOverFloatBox.bind(this));
     this.$capibara.addEventListener("selectTabHeader"      , e => { this.selectTab(e.detail.tab); });
+    this.$capibara.addEventListener("selectLegendHeader"   , this.selectLegend.bind(this));
 
     this.$elements.$floatBoxContainer.addEventListener("mousemove", this.mouseMoveOnFlexBoxContainer.bind(this));
     this.$elements.$floatBoxContainer.addEventListener("mouseleave", this.mouseLeaveOnFloatBoxContainer.bind(this));
@@ -1074,6 +1153,7 @@ export class Capibara{
     this.$elements.$container.addEventListener("scroll", this.hideContextMenu.bind(this));
 
     this.$elements.$container.addEventListener("clickDate", this.clickDateHeader.bind(this));
+    this.$elements.$container.addEventListener("contextMenuDate", this.contextMenuDateHeader.bind(this));
 
     window.addEventListener('resize',this.onWindowResize.bind(this));
 
@@ -1120,6 +1200,10 @@ export class Capibara{
       }
     }
 
+    if(options.headerTop){
+      this.$elements.$headerTop = tableElements.redrawHeaderTop(this.config, this.tabSelected, this.$elements.$headerTop);
+    }
+
     if(options.detailDay){
       this.hideDetailDay();
       this.lastDataDay = null;

package/src/scss/abstracts/_colors.scss

@@ -55,4 +55,4 @@ $darkBlueColors:(
   "lighten-3" : rgb(72, 87, 118),
   "lighten-4" : rgb(80, 96, 131),
   "lighten-5" : rgb(88, 106, 143)
-);
+);

package/src/scss/components/_floatbox.scss

@@ -122,25 +122,30 @@
         }
 
         &.shape-bar{
-          height: calc(var(--item-height) / 4);
-          line-height: calc(var(--item-height) / 4 + 1);
+          height: calc(var(--item-height) / 4 - 1.5px);
+          width: calc(var(--day-width) - 6px);
+          line-height: 0;
           color: transparent;
           border-radius: 1px;
-          border: 1px solid white;
-          margin: 0px 0px -1px 0px;
+          border: 1px solid rgba(0, 0, 0, 0.4);
+          margin: 0px 3px;
+          &:first-child{
+            margin-top: 3px;
+          }
         }
 
         &.shape-bar-outlined{
-          height: calc(var(--item-height) / 4);
+          height: calc(var(--item-height) / 4 - 1.5px);
+          width: calc(var(--day-width) - 6px);
           line-height: 0px;
           color: transparent;
           border-radius: 1px;
-          border: 1px solid white;
-          margin: 0px 0px -1px 0px;
-          border-width: 2px;
-          border-color: grey;
-          border-style: solid;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+          margin: 0px 3px;
           backdrop-filter: blur(2px);
+          &:first-child{
+            margin-top: 3px;
+          }
         }
 
       }

package/src/scss/layout/_contextMenu.scss

@@ -26,16 +26,36 @@
       visibility: visible;
       opacity: 1;
       padding: 0.4em 0px;
+      vertical-align:middle;
 
-      &--item {
+      &_item {
         padding: 0.5em 1em;
+        flex: 0 0 auto;
+
+        display:flex;
+        flex-direction: row;
+        align-items: center;;
+
         &:hover {
           background: rgba(20, 20, 20, 0.2);
         }
         &.is-disabled {
           opacity: 0.5;
         }
+
+        &_icon{
+          display: inline-block;
+          flex: 0 0 auto;
+          padding-right: 0.5em;
+          svg{
+            width: 16px;
+            height: 16px;
+          }
+        }
+
       }
+
+
     }
   }
 
@@ -45,9 +65,12 @@
     &#{$nameTheme}{
       .cap-context-menu-container{
         .cap-context-menu{
-          color: mapGet($theme, detailDay, color);
+          color: mapGet($theme, color);
           border-color: mapGet($theme, detailDay, border);
           background: mapGet($theme, detailDay, background);
+          svg path{
+            fill: mapGet($theme, color);
+          }
         }
       }
     }

package/src/scss/layout/_detail_day.scss

@@ -309,7 +309,7 @@
   @each $nameTheme , $theme in $themes {
     &#{$nameTheme}{
       .detail-day{
-        color: mapGet($theme, detailDay, color);
+        color: mapGet($theme, color);
         border-color: mapGet($theme, detailDay, border);
         background: mapGet($theme, detailDay, background);
         &:after{

package/src/scss/layout/_headerTop.scss

@@ -13,7 +13,10 @@
 
     .tabs-container {
       display: flex;
-      padding: 0px 16px;
+
+      &:not(:empty){
+        padding: 0px 16px;
+      }
 
       .tab {
         cursor: pointer;
@@ -32,6 +35,43 @@
         }
       }
     }
+
+    .legends-container {
+
+      &:not(:empty){
+        padding:  0.5em 1em ;
+      }
+
+      .legend {
+        display: flex;
+        flex-direction: row;
+        margin-right: 1em;
+        cursor: pointer;
+        padding: 0 0.5em;
+        &:not(.active) {
+          opacity: 0.5;
+        }
+        .icon-legend {
+          width: 0.825em;
+          height: 0.825em;
+          margin: 2px 0.5em 2px 0;
+          background: grey;
+          box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
+          display: inline-block;
+          border-radius: 1px;
+          border: 1px solid rgba(0, 0, 0, 0.4);
+          &.circle {
+            border-radius: 50%;
+          }
+        }
+        &:hover {
+          span {
+            text-decoration: underline;
+          }
+
+        }
+      }
+    }
   }
 
 

package/src/scss/layout/_selectContainer.scss

@@ -13,23 +13,24 @@
       position: absolute;
       background: rgba(189,189,189,0.4);
       box-shadow: inset 0px 0px 5px rgba(189,189,189,0.8);
-      &[selected-index]{
+      &[cap-badge]{
         &::after{
-          content:attr(selected-index);
+          content:attr(cap-badge);
           display: block;
           position:absolute;
-          left:-2px;
-          top: -2px;
-          background: red;
+          right:-3px;
+          top: -3px;
+          background: rgb(21,101,192);
           font-size: 0.75em;
           color: white;
-          width: 1.3em;
-          height:1.3em;
+          width: 1.5em;
+          height:1.5em;
           border-radius:50%;
-          border: 1px solid blue;
           z-index: 2;
           text-align: center;
           font-weight:bold;
+          padding: 2px;
+          box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
         }
       }
     }

package/src/scss/layout/_table.scss

@@ -6,6 +6,7 @@
       top: var(--header-height) ;
       width: calc(100% - var(--nav-width ) - var(--initial-nav-width ) - var(--ex-nav-width ) - var(--btn-nav-width));
       max-height: calc(100% - var(--header-height));
+      height: calc(100% - var(--header-height));
       margin-top: -1px;
 
       .day-mouse-over{

package/src/scss/themes/_color_themes.scss

@@ -210,8 +210,8 @@
         }
 
         span.data.shape-bar-outlined.#{$colorName}{
-          border-color: transparentize($color, 0.1);
-          background: transparentize($color, 0.9);
+          //border-color: darken(transparentize($color, 0.1), 15%);
+          background: transparentize($color, 0.5);
         }
 
 
@@ -219,7 +219,7 @@
           background: $color;
           &.outlined{
             border: 1px solid $color;
-             box-shadow: inset 0px 0px 0px 1px transparentize($color, 0.3);
+            box-shadow: inset 0px 0px 0px 1px transparentize($color, 0.3);
           }
         }
       }

package/src/scss/themes/_themes.scss

@@ -11,7 +11,7 @@ $themes:(
 
     floatBox:(
       shapeBar:(
-        border: white,
+        border: rgba(0, 0, 0, 0.3),
       )
     ),
 
@@ -164,7 +164,7 @@ $themes:(
 
     floatBox:(
       shapeBar:(
-        border: mapGet($darkBlueColors, base),
+        border: rgba(0, 0, 0, 0.6),
       )
     ),