capibara 1.1.17 → 1.1.21

package/package.json

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

package/src/lib/capibara.js

@@ -4,7 +4,6 @@ import dateUtils     from '../util/dateUtils';
 import tableElements from '../util/tableElements';
 import styleUtils    from '../util/styleUtils';
 
-
 /**
  * Capibara, planilla para despliegue de datos por fecha como GANTT
  * orientado inicialmente a datos diarios de items
@@ -14,7 +13,6 @@ import styleUtils    from '../util/styleUtils';
 export class Capibara{
 
 
-
   /**
    * @constructor
    * Instancia variables de planilla Capibara, con configuracion
@@ -30,18 +28,21 @@ export class Capibara{
 
     if(this.containerElement == null) console.error("Elemento dom segun config.selector, no encontrado");
 
-    this.initialized       = false;
-    this.$capibara         = null;
-    this.$elements         = {};
-    this.tabSelected       = null;
-    this.$inputsNavRight   = [];
-    this.selected          = [];
-    this.config            = config;
-    this.lastDataDay       = null;
-    this.isShowNavExtended = false;
-    this.isShowNavInitial  = true;
-    this.isShowNavButtons  = true;
-    this.isMobile          = false;
+    this.initialized          = false;
+    this.$capibara            = null;
+    this.$elements            = {};
+    this.tabSelected          = null;
+    this.$inputsNavRight      = [];
+    this.selected             = [];
+    this.config               = config;
+    this.lastDataDay          = null;
+    this.isShowNavExtended    = false;
+    this.isShowNavInitial     = true;
+    this.isShowNavButtons     = true;
+    this.isMobile             = false;
+    this.lastMousePosition    = null;
+    this.isVisibleContextMenu = false;
+
   }
 
 
@@ -55,17 +56,17 @@ export class Capibara{
    *  - crea planilla llamando a drawTable
    *  - Agrega eventos a planilla
    *  - mueve scroll al medio de la tabla
-   *
    */
   init(){
 
     this.tabSelected = null;
     this.$capibara   = null;
     this.$elements   = {};
-    this.$inputsNavRight     = [];
+    this.$inputsNavRight = [];
     this.selected    = [];
     this.lastDataDay = null;
     this.isMobile    = utils.checkIsMobile();
+    this.isVisibleContextMenu = false;
 
     this.setAllCSSVariables();
     this.drawTable();
@@ -98,7 +99,7 @@ export class Capibara{
     let initialTab = config.timeline.tabs[0];
 
     let $capibara          = tableElements.createAgTable(config);
-    let $corner            = tableElements.createCorner(config);
+    let $corner            = tableElements.createCorner(config, initialTab);
     let $cornerRight       = tableElements.createCornerRight(config);
     let $headerTop         = tableElements.createHeaderTop(config);
     let $header            = tableElements.createHeader(config);
@@ -113,8 +114,11 @@ export class Capibara{
     let $plotHorizontalContainer   = tableElements.createPlotHorizontalContainer(config);
     let $detailDay         = tableElements.createDetailDay(config,config.data[0].children[0]);
 
+    let { elem:$contextMenu, isVisible }  = tableElements.createContextMenu({config});
+    this.isVisibleContextMenu = isVisible;
+
     let $navRight, inputs;
-    ({element:$navRight, inputs} = tableElements.createNavRight(config, $navRight));
+    ({element:$navRight, inputs} = tableElements.createNavRight(config));
 
     let start = new Date(config.timeline.start);
     let end   = new Date(config.timeline.end);
@@ -129,9 +133,10 @@ export class Capibara{
 
     let $background   = tableElements.createBackground(config);
     let $container    = dom.createElement("div", { className:"container-tl"});
-    let $table        = dom.createElement("div", { className: "table"}, {style:{width:width}});
     let $dayMouseOver = dom.createElement("div", { className: "day-mouse-over"});
 
+    let $table        = dom.createElement("div", { className: "table"}, {style:{width:width}});
+
     $table.appendChild($background);
     $table.appendChild($dayMouseOver);
     $table.appendChild($detailDay);
@@ -158,12 +163,14 @@ export class Capibara{
     $capibara.appendChild($cornerRight);
     $capibara.appendChild($container);
     $capibara.appendChild($navRight);
+    if($contextMenu) $capibara.appendChild($contextMenu);
 
 
     this.$inputsNavRight   = inputs;
     this.$capibara = $capibara;
     this.$elements = {
       $detailDay,
+      $contextMenu,
       $floatBoxContainer,
       $selectContainer,
       $table,
@@ -259,6 +266,8 @@ export class Capibara{
 
       if(redraw){
         this.redraw({
+          cornerLeft: true,
+          navLeft: true,
           navRight: true,
           floatBox:true
         })
@@ -303,7 +312,7 @@ export class Capibara{
    */
   setShowNavInitial(isShowNavInitial){
     this.isShowNavInitial  = isShowNavInitial;
-    styleUtils.setNavLeftInitialStyle(this.config, this.isShowNavInitial);
+    styleUtils.setNavLeftInitialStyle(this.config, this.isShowNavInitial, this.tabSelected);
   }
 
   /**
@@ -311,14 +320,14 @@ export class Capibara{
    */
   setShowNavExtended(isShowNavExtended){
     this.isShowNavExtended = isShowNavExtended;
-    styleUtils.setNavLeftExtendedStyle(this.config, this.isShowNavExtended);
+    styleUtils.setNavLeftExtendedStyle(this.config, this.isShowNavExtended, this.tabSelected);
   }
   /**
    * Muestra/Oculta Sidebar buttons
    */
   setShowNavButtons(isShowNavButtons){
     this.isShowNavButtons = isShowNavButtons;
-    styleUtils.setNavLeftButtonsStyle(this.config, this.isShowNavButtons);
+    styleUtils.setNavLeftButtonsStyle(this.config, this.isShowNavButtons, this.tabSelected);
   }
 
 
@@ -622,12 +631,62 @@ export class Capibara{
    * @param {Object} evt - Evento de mouseleave
    */
   mouseMoveOnTable(evt){
-      let pos = utils.eventToPosition(this.config, evt, this.$elements.$table);
+    if(this.isVisibleContextMenu) return;
+    let pos = utils.eventToPosition(this.config, evt, this.$elements.$table);
+    if(this.lastMousePosition == null || 
+      this.lastMousePosition.left != pos.left ||
+      this.lastMousePosition.top != pos.top
+    ){
       this.$elements.$dayMouseOver.style.transform = "translate("+pos.left+"px ,"+pos.top+"px)";
       evt.preventDefault();
-    };
+      this.lastMousePosition = pos;
+    }
+  };
+
+
+
+  rightClickOnCapibara(evt){
+    if(this.config.timeline.contextMenu){
+      this.hideDetailDay();
+      evt.preventDefault();
+    }
+  };
+
+  rightClickOnTable(evt){
+    if(this.config.timeline.contextMenu){
+      this.hideDetailDay();
+      this.showContextMenu(evt);
+      evt.preventDefault();
+    }
+  };
+
+  showContextMenu(evt){
+
+    let date  = utils.getDayByEvent(this.config, evt, this.$elements.$table);
+    let item  = utils.getItemByEvent(this.config, evt, this.$elements.$table);
+
+    if(this.isVisibleContextMenu) {
+      this.hideContextMenu();
+      return;
+    }
 
+    let position = utils.eventToPosition(this.config, evt, this.$elements.$table);
+    let { elem:$elem, isVisible } = tableElements.createContextMenu({
+      config: this.config,
+      evt,
+      position,
+      date,
+      item,
+      selected: this.selected
+    });
 
+    if($elem){
+      this.isVisibleContextMenu = isVisible;
+      this.$elements.$contextMenu.replaceWith($elem);
+      this.$elements.$contextMenu = $elem;
+    }
+    evt.preventDefault();
+  }
 
   /**
    * Captura el evento click en $table, para seleccionar dias
@@ -736,6 +795,11 @@ export class Capibara{
       let index = utils.indexSelectedDay(this.selected, {date, item});
       this.selected.splice(index, 1);
     }
+
+    this.selected.forEach((s, index) => {
+      s.index = index+1;
+    })
+
     if(redraw){
       this.redrawSelection()
     }
@@ -752,7 +816,13 @@ export class Capibara{
 
     if(index < 0){
 
-      this.selected.push({date, item, pos});
+      this.selected.push({
+        index: 0,
+        date,
+        item,
+        pos,
+      });
+
       let dataDay = null;
       if(item.data){
           dataDay = item.data.find(d => {
@@ -788,6 +858,10 @@ export class Capibara{
       }
     })
 
+    this.selected.forEach((s, index) => {
+      s.index = index+1;
+    })
+
     if(redraw){
       this.redrawSelection()
     }
@@ -834,6 +908,13 @@ export class Capibara{
     this.$elements.$detailDay.classList.add("dd-hide");
   };
 
+  hideContextMenu(){
+    this.$elements.$contextMenu.classList.add("cm-hide");
+    this.isVisibleContextMenu = false;
+  };
+
+
+
 
 
   /**
@@ -843,8 +924,8 @@ export class Capibara{
    * @param {Object} evt - evento de mousemove, para posiciones en pantalla
    */
   refreshDetailDayPosition(position){
-    let dayWidth = parseFloat(utils.getCSSVariable("--day-width"));
-    let itemHeight = parseFloat(utils.getCSSVariable("--item-height"));
+    let dayWidth = parseFloat(utils.getCSSVariable(this.config, "--day-width"));
+    let itemHeight = parseFloat(utils.getCSSVariable(this.config, "--item-height"));
 
     this.$elements.$detailDay.style.top  = position.top + "px";
     this.$elements.$detailDay.style.left = position.left + dayWidth + "px";
@@ -904,6 +985,17 @@ 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.redrawSelection();
+  }
+
   /**
    * Captura evento window resize
    * para verificar si es mobile o no
@@ -953,28 +1045,35 @@ export class Capibara{
   }
 
 
-
   /**
    * Agrega eventos a los elementos del dom de la planilla
    * usando el objecto $capibara
    */
   addEvents(){
-    this.$capibara.addEventListener("toggleDark",            this.toggleDark.bind(this));
-    this.$capibara.addEventListener("toggleHeader",          this.toggleHeader.bind(this));
-    this.$capibara.addEventListener("toggleSidebar",         this.toggleSidebar.bind(this));
-    this.$capibara.addEventListener("toggleSidebarRight",    this.toggleSidebarRight.bind(this));
-    this.$capibara.addEventListener("saveMultiInput",        this.saveInputsNavRight.bind(this));
-    this.$capibara.addEventListener("cancelMultiInput",      this.cancelMultiInput.bind(this));
-    this.$capibara.addEventListener("overNavItem",           this.overNavItem.bind(this));
-    this.$capibara.addEventListener("leaveNavItem",          this.leaveNavItem.bind(this));
-    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("click"                , this.hideContextMenu.bind(this));
+    this.$capibara.addEventListener("contextmenu"          , this.rightClickOnCapibara.bind(this));
+    this.$capibara.addEventListener("toggleDark"           , this.toggleDark.bind(this));
+    this.$capibara.addEventListener("toggleHeader"         , this.toggleHeader.bind(this));
+    this.$capibara.addEventListener("toggleSidebar"        , this.toggleSidebar.bind(this));
+    this.$capibara.addEventListener("toggleSidebarRight"   , this.toggleSidebarRight.bind(this));
+    this.$capibara.addEventListener("saveMultiInput"       , this.saveInputsNavRight.bind(this));
+    this.$capibara.addEventListener("cancelMultiInput"     , this.cancelMultiInput.bind(this));
+    this.$capibara.addEventListener("overNavItem"          , this.overNavItem.bind(this));
+    this.$capibara.addEventListener("leaveNavItem"         , this.leaveNavItem.bind(this));
+    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.$elements.$floatBoxContainer.addEventListener("mousemove", this.mouseMoveOnFlexBoxContainer.bind(this));
     this.$elements.$floatBoxContainer.addEventListener("mouseleave", this.mouseLeaveOnFloatBoxContainer.bind(this));
+
     this.$elements.$table.addEventListener("mousemove", this.mouseMoveOnTable.bind(this) );
     this.$elements.$table.addEventListener("click", this.clickOnTable.bind(this));
+    this.$elements.$table.addEventListener("contextmenu", this.rightClickOnTable.bind(this));
+
+    this.$elements.$container.addEventListener("scroll", this.hideContextMenu.bind(this));
+
+    this.$elements.$container.addEventListener("clickDate", this.clickDateHeader.bind(this));
 
     window.addEventListener('resize',this.onWindowResize.bind(this));
 
@@ -1027,11 +1126,14 @@ export class Capibara{
     }
 
     if(options.navLeft){
-      tableElements.redrawNavLeft(this.$elements.$navLeft, this.config);
+      tableElements.redrawNavLeft(this.$elements.$navLeft, this.config, this.tabSelected);
+      styleUtils.setNavStyle(this.config);
+      styleUtils.setNavLeftInitialStyle(this.config, this.isShowNavInitial, this.tabSelected);
+      styleUtils.setNavLeftExtendedStyle(this.config, this.isShowNavExtended, this.tabSelected);
     }
 
     if(options.cornerLeft){
-      tableElements.redrawCorner(this.$elements.$corner, this.config);
+      tableElements.redrawCorner(this.$elements.$corner, this.config, this.tabSelected);
     }
 
     if(options.navRight){
@@ -1069,13 +1171,13 @@ export class Capibara{
   focusOnFloatBox({pos, evt}){
     if(this.isMobile){
       let containerWidth = this.$elements.$container.clientWidth;
-      let dayWidth = parseFloat(utils.getCSSVariable("--day-width"));
-      let navWidth = parseFloat(utils.getCSSVariable("--nav-width"));
+      let dayWidth = parseFloat(utils.getCSSVariable(this.config, "--day-width"));
+      let navWidth = parseFloat(utils.getCSSVariable(this.config, "--nav-width"));
       let left = pos.left - containerWidth + 1.5 * dayWidth + navWidth;
 
       //let containerHeight = this.$elements.$container.clientHeight;
-      let itemHeight = parseFloat(utils.getCSSVariable("--item-height"));
-      //let headerHeight = parseFloat(utils.getCSSVariable("--header-height"));
+      let itemHeight = parseFloat(utils.getCSSVariable(this.config, "--item-height"));
+      //let headerHeight = parseFloat(utils.getCSSVariable(this.config, "--header-height"));
       let top = pos.top - 0.5 * itemHeight;
 
       let position = utils.eventToPosition(this.config, evt, this.$elements.$table);
@@ -1098,11 +1200,12 @@ export class Capibara{
    */
   setAllCSSVariables(){
     let config = this.config;
+    //styleUtils.cleanStyle(config);
     styleUtils.setHeaderStyle(config);
     styleUtils.setNavStyle(config);
-    styleUtils.setNavLeftInitialStyle(config, this.isShowNavInitial);
-    styleUtils.setNavLeftExtendedStyle(config, this.isShowNavExtended);
-    styleUtils.setNavLeftButtonsStyle(config, this.isShowNavButtons);
+    styleUtils.setNavLeftInitialStyle(config, this.isShowNavInitial, this.tabSelected);
+    styleUtils.setNavLeftExtendedStyle(config, this.isShowNavExtended, this.tabSelected);
+    styleUtils.setNavLeftButtonsStyle(config, this.isShowNavButtons, this.tabSelected);
     styleUtils.setTableStyle(config);
   }
 

package/src/scss/components/_floatbox.scss

@@ -85,10 +85,14 @@
         margin: 1px;
         vertical-align: middle;
         border: 1px solid rgba(255, 255, 255, 0.8);
+        backdrop-filter: blur(2px);
         &.diamond{
           border-radius: 0;
           transform: rotate(45deg) skew(10deg, 10deg);
         }
+        &.outlined{
+          background-color: transparent;
+        }
       }
 
       span.data {
@@ -103,15 +107,55 @@
         font-weight: bold;
         box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.2);
         border-radius: 3px;
+        color: white;
 
-        &:not(.data-outlined){
+        &:not(.shape-outlined){
           border: 1px solid rgba(255, 255, 255, 0.2);
         }
-        &.data-outlined{
+
+        &.shape-outlined{
           background: transparent;
           border-width: 2px;
           border-color: grey;
           border-style: solid;
+          backdrop-filter: blur(2px);
+        }
+
+        &.shape-bar{
+          height: calc(var(--item-height) / 4);
+          line-height: calc(var(--item-height) / 4 + 1);
+          color: transparent;
+          border-radius: 1px;
+          border: 1px solid white;
+          margin: 0px 0px -1px 0px;
+        }
+
+        &.shape-bar-outlined{
+          height: calc(var(--item-height) / 4);
+          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;
+          backdrop-filter: blur(2px);
+        }
+
+      }
+    }
+  }
+
+  @each $nameTheme , $theme in $themes {
+    &#{$nameTheme}{
+      .float-box-container{
+        .float-box{
+          span.data{
+            &.shape-bar{
+              border-color: mapGet($theme,floatBox, shapeBar,border);
+            }
+          }
         }
       }
     }

package/src/scss/components/_input_nav.scss

@@ -103,6 +103,17 @@
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
       }
 
+      &--icon{
+       display: inline-block;
+       width: 0.75em;
+       height: 0.75em;
+       border-radius: 50%;
+       margin: 1em;
+       background: grey;
+       box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
+       margin:0 0.25em 0 0;
+      }
+
       &:hover .mini-input-section--tooltip{
         display: block;
       }

package/src/scss/layout/_contextMenu.scss

@@ -0,0 +1,58 @@
+.capibara {
+  .cap-context-menu-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+
+    &.cm-hide {
+      .cap-context-menu {
+        visibility: hidden;
+        opacity: 0;
+      }
+    }
+
+    .cap-context-menu {
+      position: absolute;
+      min-width: 150px;
+      z-index: 2;
+      border-radius: 3px;
+      border: 1px solid grey;
+      background: rgb(255, 255, 255);
+      box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
+        0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+      font-size: 0.75em;
+      transition: all 0.1s linear;
+      visibility: visible;
+      opacity: 1;
+      padding: 0.4em 0px;
+
+      &--item {
+        padding: 0.5em 1em;
+        &:hover {
+          background: rgba(20, 20, 20, 0.2);
+        }
+        &.is-disabled {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+
+  
+  @each $nameTheme , $theme in $themes {
+    &#{$nameTheme}{
+      .cap-context-menu-container{
+        .cap-context-menu{
+          color: mapGet($theme, detailDay, color);
+          border-color: mapGet($theme, detailDay, border);
+          background: mapGet($theme, detailDay, background);
+        }
+      }
+    }
+  }
+
+
+
+}

package/src/scss/layout/_detail_day.scss

@@ -135,16 +135,19 @@
             flex-direction: row;
 
             .left-icon {
-              width: 6px;
-              height: 6px;
+              width: 8px;
+              height: 8px;
               min-height: unset !important;
-              left: 0;
+              left: 1px;
               top: 10px;
               border-radius: 50%;
               &.diamond{
                 border-radius: 0;
                 transform: rotate(45deg) skew(10deg, 10deg);
               }
+              &.outlined{
+                background: transparent;
+              }
             }
 
             .name {

package/src/scss/layout/_header.scss

@@ -179,6 +179,9 @@
                 //background: var(--header-dia-active-background) ;
                 //color: white;
               }
+              &.is-clickeable{
+                cursor:pointer;
+              }
             }
           }
         }
@@ -236,6 +239,14 @@
                     background: mapGet($theme,header, days, active, background);
                     color: mapGet($theme,header, days, active, color);
                   }
+                  &.is-clickeable{
+                    &:hover{
+                      background: rgba(100, 100, 100, 0.4);
+                    }
+                    &:active{
+                      background: rgba(100, 100, 100, 0.6);
+                    }
+                  }
                 }
               }
             }

package/src/scss/layout/_plotContainer.scss

@@ -11,7 +11,7 @@
     .plot-vertical{
       background: rgba(0, 0, 0, 0.3);
       width: var(--day-width);
-      height: calc(100vh - var(--header-height ) + var(--header-top-height));
+      height: calc(100vh - (var(--header-height ) + var(--header-top-height)));
       position: absolute;
       top: 0px;
       left: 0px;

package/src/scss/layout/_selectContainer.scss

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

package/src/scss/layout/_table.scss

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

package/src/scss/layout/_todayLine.scss

@@ -21,8 +21,8 @@
       top: 0px;
       content: "";
       width: 2px;
-      height: calc(100vh - var(--header-height) + var(--header-top-height));
-      background: rgba(183, 28, 28, 0.6);
+      height: calc(100vh - (var(--header-height) + var(--header-top-height)));
+      background: rgba(183, 28, 28, 0.4);
     }
   }
 

package/src/scss/style.scss

@@ -28,6 +28,7 @@
 @import "layout/table";
 @import "layout/selectContainer";
 @import "layout/detail_day";
+@import "layout/contextMenu";
 
 @import "components/input_nav";
 @import "components/buttons";