capibara 1.1.17 → 1.1.21

package/src/scss/themes/_color_themes.scss

@@ -179,6 +179,10 @@
             border: 1px solid $color;
             .left-icon {
               background: $color;
+              &.outlined{
+                border: 1px solid $color;
+                box-shadow: inset 0px 0px 0px 1px transparentize($color, 0.3);
+              }
             }
             .name {
               color: $color;
@@ -191,19 +195,32 @@
 
     .float-box-container {
       .float-box {
-        span.data.#{$colorName}:not(.data-outlined){
+        span.data.#{$colorName}{
           background: transparentize($color, 0.2);
-          color: white;
         }
 
-        span.data.data-outlined.#{$colorName}{
+        span.data.shape-outlined.#{$colorName}{
           border-color: transparentize($color, 0.1);
           background: transparentize($color, 0.9);
           color: $color;
         }
 
+        span.data.shape-bar.#{$colorName}{
+          background: $color;
+        }
+
+        span.data.shape-bar-outlined.#{$colorName}{
+          border-color: transparentize($color, 0.1);
+          background: transparentize($color, 0.9);
+        }
+
+
         .dot.#{$colorName}{
           background: $color;
+          &.outlined{
+            border: 1px solid $color;
+             box-shadow: inset 0px 0px 0px 1px transparentize($color, 0.3);
+          }
         }
       }
     }
@@ -231,6 +248,13 @@
       }
     }
 
+    
+    .input-box{
+      .mini-input-section--icon.#{$colorName} {
+        background: $color;
+      }
+    }
+
   }
 
 

package/src/scss/themes/_themes.scss

@@ -9,6 +9,12 @@ $themes:(
     background : rgba(245,245,245,1),
     color      : rgba(55,71,79,1),
 
+    floatBox:(
+      shapeBar:(
+        border: white,
+      )
+    ),
+
     detailDay:(
       background : white,
       border     : rgba(0, 0, 0, 0.2),
@@ -156,6 +162,12 @@ $themes:(
     background: mapGet($darkBlueColors, darken-2), // rgb(32, 39, 55),
     color: rgb(240,240,240),
 
+    floatBox:(
+      shapeBar:(
+        border: mapGet($darkBlueColors, base),
+      )
+    ),
+
     scroll:(
       background: transparent,
       color: rgba(189,189,189,1),

package/src/util/domUtils.js

@@ -21,6 +21,12 @@ export default {
         })
     }
 
+    if(options.attributes){
+      options.attributes.forEach(attr => {
+        e.setAttribute(attr.name, attr.value);
+      });
+    }
+
     if(options.text){
       e.appendChild(ocument.createTextNode(options.text));
     }

package/src/util/styleUtils.js

@@ -2,30 +2,43 @@ import utils from './utils';
 import _ from "lodash";
 
 export default {
+  cleanStyle(config){
+
+            utils.setCSSVariable(config, "--nav-width", null);
+            utils.setCSSVariable(config, "--nav-item-col-width", null);
+            utils.setCSSVariable(config, "--initial-nav-width", null);
+            utils.setCSSVariable(config, "--ex-nav-width", null);
+            utils.setCSSVariable(config, "--btn-nav-width", null);
+            utils.setCSSVariable(config, "--header-height", null);
+            utils.setCSSVariable(config, "--header-top-height", null);
+            utils.setCSSVariable(config, "--ex-header-height", null);
+            utils.setCSSVariable(config, "--day-width", null);
+            utils.setCSSVariable(config, "--item-height", null);
+  },
 
     setNavStyle(config) {
         if (config.timeline.nav.left.initial.width && !utils.checkIsMobile()) {
-            utils.setCSSVariable("--nav-width", config.timeline.nav.left.initial.width + "px");
+            utils.setCSSVariable(config, "--nav-width", config.timeline.nav.left.initial.width + "px");
         }
         if (config.timeline.nav.left.initial.mobile && utils.checkIsMobile()) {
-            utils.setCSSVariable("--nav-width", config.timeline.nav.left.initial.mobile.width + "px");
+            utils.setCSSVariable(config, "--nav-width", config.timeline.nav.left.initial.mobile.width + "px");
         }
         if (config.timeline.nav.columnWidth) {
-            utils.setCSSVariable("--nav-item-col-width", config.timeline.nav.columnWidth + "px");
+            utils.setCSSVariable(config, "--nav-item-col-width", config.timeline.nav.columnWidth + "px");
         }
     },
-    setNavLeftInitialStyle(config, isShow) {
-        this.setSubNavStyle(config, isShow, "left.initial", "--initial-nav-width");
+    setNavLeftInitialStyle(config, isShow, tab) {
+        this.setSubNavStyle(config, isShow, "left.initial", "--initial-nav-width", tab);
     },
-    setNavLeftExtendedStyle(config, isShow) {
-        this.setSubNavStyle(config, isShow, "left.extend", "--ex-nav-width");
+    setNavLeftExtendedStyle(config, isShow, tab) {
+        this.setSubNavStyle(config, isShow, "left.extend", "--ex-nav-width", tab);
     },
-    setNavLeftButtonsStyle(config, isShow) {
-        this.setSubNavStyle(config, isShow, "left.buttons", "--btn-nav-width");
+    setNavLeftButtonsStyle(config, isShow, tab) {
+        this.setSubNavStyle(config, isShow, "left.buttons", "--btn-nav-width", tab);
     },
 
-    setSubNavStyle(config, isShow, path, cssVarName) {
-        let columnWidth = parseFloat(utils.getCSSVariable("--nav-item-col-width"));
+    setSubNavStyle(config, isShow, path, cssVarName, tab = null) {
+        let columnWidth = parseFloat(utils.getCSSVariable(config, "--nav-item-col-width"));
         let nav = _.get(config, "timeline.nav." + path);
         let width = null;
         if (nav) {
@@ -36,33 +49,34 @@ export default {
                 if (nav.width) {
                     width = nav.width;
                 } else if (nav.vars && columnWidth) {
-                    width = columnWidth * nav.vars.length;
+                  let navVarsFiltered = nav.vars.filter(v => (v.onlyTab == undefined || (v.onlyTab && tab && v.onlyTab == tab.key)));
+                  width = columnWidth * navVarsFiltered.length;
                 }
             } else {
                 width = 0;
             }
 
             if (width !== null) {
-                utils.setCSSVariable(cssVarName, width + "px");
+                utils.setCSSVariable(config, cssVarName, width + "px");
             }
         }
     },
 
     setHeaderStyle(config) {
         if (config.timeline.header.height) {
-            utils.setCSSVariable("--header-height", config.timeline.header.height + "px");
+            utils.setCSSVariable(config, "--header-height", config.timeline.header.height + "px");
         }
 
         if (config.timeline.header.top && config.timeline.header.top.height) {
-            utils.setCSSVariable("--header-top-height", config.timeline.header.top.height + "px");
+            utils.setCSSVariable(config, "--header-top-height", config.timeline.header.top.height + "px");
         }
 
         if (config.timeline.header.extend.enabled === false) {
-            utils.setCSSVariable("--ex-header-height","0px");
+            utils.setCSSVariable(config, "--ex-header-height","0px");
         }
 
         if (config.timeline.header.extend.height) {
-            utils.setCSSVariable("--ex-header-height", config.timeline.header.extend.height + "px");
+            utils.setCSSVariable(config, "--ex-header-height", config.timeline.header.extend.height + "px");
         }
 
     },
@@ -70,16 +84,16 @@ export default {
     setTableStyle(config) {
         if (config.timeline.day.width) {
           if (config.timeline.day.mobile && utils.checkIsMobile()) {
-            utils.setCSSVariable("--day-width", config.timeline.day.mobile.width + "px");
+            utils.setCSSVariable(config, "--day-width", config.timeline.day.mobile.width + "px");
           }else{
-            utils.setCSSVariable("--day-width", config.timeline.day.width + "px");
+            utils.setCSSVariable(config, "--day-width", config.timeline.day.width + "px");
           }
         }
         if (config.timeline.day.height) {
           if (config.timeline.day.mobile && utils.checkIsMobile()) {
-            utils.setCSSVariable("--item-height", config.timeline.day.mobile.height + "px");
+            utils.setCSSVariable(config, "--item-height", config.timeline.day.mobile.height + "px");
           }else{
-            utils.setCSSVariable("--item-height", config.timeline.day.height + "px");
+            utils.setCSSVariable(config, "--item-height", config.timeline.day.height + "px");
           }
         }
 

package/src/util/tableElements.js

@@ -25,10 +25,10 @@ export default {
     if(config.timeline.dark){
       e.classList.add("dark-theme");
     }
-    if(config.timeline.nav.left.extend.enabled){
+    if(config.timeline.nav.left.extend.isShow){
       //e.classList.add("extended");
     }
-    if(config.timeline.header.extend.enabled){
+    if(config.timeline.header.extend.isShow){
       e.classList.add("header-extended");
     }
     return e;
@@ -46,8 +46,8 @@ export default {
    * @return {Object} elemento Dom Background
    */
   createBackground(config, $elem = null){
-    let w     = parseFloat(utils.getCSSVariable("--day-width"));
-    let h     = parseFloat(utils.getCSSVariable("--item-height"));
+    let w     = parseFloat(utils.getCSSVariable(config, "--day-width"));
+    let h     = parseFloat(utils.getCSSVariable(config, "--item-height"));
     let start = new Date(config.timeline.start);
     let end   = new Date(config.timeline.end);
 
@@ -111,7 +111,7 @@ export default {
     if(config.timeline.plots && config.timeline.plots.vertical){
       config.timeline.plots.vertical.forEach(p => {
         let diffDays     = Math.floor(dateUtils.diffDays(config.timeline.start, p.date));
-        let dayWidth = parseFloat(utils.getCSSVariable("--day-width"));
+        let dayWidth = parseFloat(utils.getCSSVariable(config, "--day-width"));
         let left         = diffDays * dayWidth;
         let plot = dom.createElement("div", {
           classNames:["plot-vertical", (p.className || '')],
@@ -129,7 +129,7 @@ export default {
       config.timeline.plots.horizontal.forEach(p => {
         let item        = utils.getItemById(config, p.idNode, p.typeNode);
         let topPosition = utils.getPositionByItem(config, item, "parent");
-        let itemHeight  = parseFloat(utils.getCSSVariable("--item-height"));
+        let itemHeight  = parseFloat(utils.getCSSVariable(config, "--item-height"));
         let plot        = dom.createElement("div", {
           classNames:["plot-horizontal", (p.className || '')],
           style:{'margin-top': (topPosition  * itemHeight)+"px"}}
@@ -152,16 +152,18 @@ export default {
    * @param {Object} config - Configuracion capibara
    * @return {Object} Elemento Dom Corner
    */
-  createCorner(config){
+  createCorner(config, tab = null){
     let $elem = dom.createElement("div", {className: "corner"});
-    return this.redrawCorner($elem, config);
+    return this.redrawCorner($elem, config, tab);
   },
 
-  redrawCorner($elem, config){
+  redrawCorner($elem, config, tab=null){
     let labelsInitialCorner = config.timeline.nav.left.initial.vars
+                              .filter(v => (v.onlyTab == undefined || (v.onlyTab && tab && v.onlyTab == tab.key)))
                               .map(d=>`<span class="item-col">${d.label}</span>`).join("");
 
     let labelsExtendCorner = config.timeline.nav.left.extend.vars
+                              .filter(v => (v.onlyTab == undefined || (v.onlyTab && tab && v.onlyTab == tab.key)))
                               .map(d=>`<span class="item-col">${d.label}</span>`).join("");
 
 
@@ -464,7 +466,7 @@ export default {
       </div>
     `;
     */
-    let $r = dom.createElementFromHTML(str );
+    let $r = dom.createElementFromHTML(str);
 
     $r.querySelector("[toggle-dark]").addEventListener("click", e => {
       $r.dispatchEvent(new CustomEvent("toggleDark", {
@@ -629,7 +631,8 @@ export default {
           let day       = datesTree[keyY][keyM][keyD];
           let isWeekend = day.isWeekend;
           let isToday   = day.isToday;
-          str+=`<div class="dia-calendario ${isToday?'today':''} ${isWeekend?'weekend':''}">${keyD}</div>`;
+          let date = dateUtils.formatDate(day.Date);
+          str += `<div class="dia-calendario ${isToday?'today':''}  ${isWeekend?'weekend':''} ${config.timeline.dateSelectable ?'is-clickeable':''}" date="${date}">${keyD}</div>`;
         });
         str += `</div></div>`;
       });
@@ -640,6 +643,23 @@ export default {
     str             += `</div>`;
     $elem.innerHTML  = "";
     $elem.append(dom.createElementFromHTML(str));
+
+    if(config.timeline.dateSelectable){
+      $elem.querySelectorAll(".dia-calendario[date]").forEach($dia => {
+        $dia.addEventListener("click", evt => {
+
+          $elem.dispatchEvent(new CustomEvent("clickDate", {
+            bubbles    : true,
+            cancelable : false,
+            detail     : {
+              $elem: $dia,
+              date: $dia.getAttribute("date"),
+            }
+          }));
+        });
+      });
+    }
+
     return $elem;
   },
 
@@ -758,9 +778,9 @@ export default {
    * @param {Object} config - Configuracion capibara
    * @return {Object} Elemento Dom Sidebar Izquierdo
    */
-  createNavLeft(config){
+  createNavLeft(config, tab = null){
     let $elem = dom.createElement("nav", {className:"left"});
-    return this.redrawNavLeft($elem, config);
+    return this.redrawNavLeft($elem, config,tab);
   },
 
   /**
@@ -773,7 +793,7 @@ export default {
    * @return {Object} Elemento Dom navLeft
    */
 
-  redrawNavLeft($elem, config){
+  redrawNavLeft($elem, config, tab = null){
 
     let navList        = "";
     let initialNavList = "";
@@ -926,6 +946,9 @@ export default {
         d.children.forEach(c => {
           initialNavList += `<div class="child-initial-nav-item ${d.hidden ? 'hide' :''}" child="${d.id || -1}">`;
           config.timeline.nav.left.initial.vars.forEach(v => {
+
+              if(v.onlyTab && tab && v.onlyTab !== tab.key) return;
+
               let value = c.values[v.varName] ? c.values[v.varName] : '';
               if(v.round && !isNaN(value)){
                 value = utils.round(value, v.round);
@@ -1073,6 +1096,8 @@ export default {
           exNavList += `<div class="child-ex-nav-item ${d.hidden ? 'hide' :''}" child="${d.id || -1}">`;
           config.timeline.nav.left.extend.vars.forEach(v => {
 
+              if(v.onlyTab && tab && v.onlyTab !== tab.key) return;
+
               let value = c.values[v.varName] ? c.values[v.varName] : '';
               if(v.round && !isNaN(value)){
                 value = utils.round(value, v.round);
@@ -1386,7 +1411,8 @@ export default {
             itemId : itemId,
             item   : item,
             type   : typeNode,
-            value  : value
+            value  : value,
+            tabSelected: tab
           }
         }));
       });
@@ -1501,7 +1527,7 @@ export default {
    *                  inputs es un array de elementos Dom de cada input creado
    *                  (no son elementos html de tipo input)
    */
-  createNavRight(config, tab){
+  createNavRight(config, tab = null){
     var $elem = dom.createElement("nav",{className:"right"});
     return this.redrawNavRight(config, $elem, tab);
   },
@@ -1520,12 +1546,12 @@ export default {
    * @param {Object} daySelected.pos - posicion de dia seleccionado
    * @return {Object} Elemento Dom Sidebar Derecho
    */
-  redrawNavRight(config, $elem, tab, dataDay = null, daySelected = null){
+  redrawNavRight(config, $elem, tab = null, dataDay = null, daySelected = null){
     let $navRight      = $elem; //dom.createElement("nav",{className:"right"});
     let $divContainer  = dom.createElement("div",{className:"nav-input-container"});
     let $inputs        = [];
     let checkboxInputs = [];
-    let tabSelected    = tab || null; //econfig.timeline.tabs[0];
+    let tabSelected    = tab;
 
     if(tabSelected && tabSelected.inputs){
       tabSelected.inputs.forEach(i => {
@@ -1698,7 +1724,7 @@ export default {
     }
 
     let diffDays  = Math.floor( dateUtils.diffDays(config.timeline.start, dateUtils.formatDate(new Date()) ));
-    let dayWidth = parseFloat(utils.getCSSVariable("--day-width"));
+    let dayWidth = parseFloat(utils.getCSSVariable(config, "--day-width"));
     let diff      = diffDays * dayWidth;
     diff         += (dayWidth / 2) - 2; // para centrar linea
     Object.assign($elem.style,{'margin-left': diff+"px"});
@@ -1793,8 +1819,8 @@ export default {
                         hideIf = Boolean( utils.getVarByPath(data.values, n.varHide) );
                       }
 
-                      if(n.outlined){
-                        className += "data-outlined";
+                      if(n.shape){
+                        className += "shape-"+n.shape;
                       }
 
                       if(dataFloatBox !== null && showIf && !hideIf){
@@ -2082,7 +2108,7 @@ export default {
   repositionFloatBox(config, $floatBoxContainer){
       $floatBoxContainer.querySelectorAll(".float-box").forEach($f => {
         let itemId = $f.getAttribute("item-id");
-        let itemHeight = parseFloat(utils.getCSSVariable("--item-height"));
+        let itemHeight = parseFloat(utils.getCSSVariable(config, "--item-height"));
         let item,parent;
         ({item, parent} = utils.getItemById(config, itemId, "child", true));
         if(item){
@@ -2110,7 +2136,9 @@ export default {
     $elem.innerHTML = "";
     if(selected){
       selected.forEach(s => {
-        let $s = dom.createElement("div", {className: "selected-day"});
+        let $s = dom.createElement("div", {className: "selected-day", attributes:[
+          {name:"selected-index", value:s.index }
+        ]});
         $s.style.left = s.pos.left + "px";
         $s.style.top = s.pos.top + "px";
         $elem.append($s);
@@ -2133,8 +2161,8 @@ export default {
   getPositionFloatBox(config, data, item){
     let left = dateUtils.diffDays(config.timeline.start, data.date);
     let top  = utils.getPositionByItem(config, item);
-    let dayWidth = parseFloat(utils.getCSSVariable("--day-width"));
-    let itemHeight = parseFloat(utils.getCSSVariable("--item-height"));
+    let dayWidth = parseFloat(utils.getCSSVariable(config, "--day-width"));
+    let itemHeight = parseFloat(utils.getCSSVariable(config, "--item-height"));
     left    *= dayWidth;
     top     *= itemHeight;
     return "top: "+top+".5px; left:"+left+".5px;";
@@ -2585,6 +2613,7 @@ export default {
         let value_found = value ? value.find(val => val.id == i.id) : null;
         let v = value_found || '';
         let tooltip = "";
+        let icon = "";
 
         if(i.tooltip){
         tooltip = `
@@ -2593,6 +2622,12 @@ export default {
                   </div>`;
         }
 
+        if(i.colorIcon){
+          icon= `<div class="mini-input-section--icon ${i.colorIcon}"> </div>`;
+        }
+
+
+
         str += `
             <div class="mini-input-section">
               <label class="truncate">
@@ -2600,6 +2635,7 @@ export default {
                       input-id="${i.id || '' }"
                       input-key="${i.key || i.label}"
                       value="${v.value || ''}">
+                     ${icon }
                       <span class="mini-input-section--name">
                         ${i.label}
                       </span>
@@ -2653,5 +2689,87 @@ export default {
         }));
       }
     });
-  }
+  },
+
+
+  createContextMenu( { config, evt=null, position = null, date=null, item=null, selected = []} ){
+
+    if(config.timeline.contextMenu === undefined) return {elem: null, isVisible: false} ;
+
+    let className = "";
+    let style = "";
+    let left = 0;
+    let top = 0;
+    let isVisible = true;
+
+    if(evt){
+      left = evt.clientX + 5;
+      top = evt.clientY + 5 - evt.currentTarget.offsetTop;
+    }
+
+    if(position){
+      style += `top: ${ top }px; left: ${ left }px`;
+    }else{
+      className += "cm-hide";
+      isVisible = false;
+    }
+
+
+    let strHtml = '';
+
+    strHtml += ` <div class="cap-context-menu-container ${className}">
+                    <div class="cap-context-menu" style="${style}">
+                    </div>
+                 </div>`;
+
+    let $contextMenuContainer = dom.createElementFromHTML(strHtml);
+    let $contextMenu = $contextMenuContainer.querySelector(".cap-context-menu");
+
+    config.timeline.contextMenu.options.forEach(option => {
+
+      if(option.showIf){
+        let show = option.showIf({item, date, selected});
+        if(!show) return;
+      }
+
+
+      let isEnabled = true;
+      if(option.enableIf){
+        isEnabled = option.enableIf({item, date, selected});
+      }
+
+      let optionClassName = "";
+
+      if(!isEnabled){
+        optionClassName += "is-disabled";
+      }
+
+      let optionStrHtml = `
+        <div class="cap-context-menu--item ${optionClassName}">
+          ${option.label}
+        </div>`;
+
+      let $option = dom.createElementFromHTML(optionStrHtml);
+
+      if(isEnabled){
+        $option.addEventListener("click", (evtClick) => option.onClick({
+          config, evt:evtClick, date, item, selected
+        }));
+      }else{
+        $option.addEventListener("click", (evtClick) => {
+          evtClick.preventDefault();
+          evtClick.stopPropagation();
+        });
+      }
+
+      $contextMenu.append($option);
+    });
+
+    return {
+      elem: $contextMenuContainer,
+      isVisible
+    };
+
+  },
+
 }

package/src/util/utils.js

@@ -207,9 +207,9 @@ export default {
     eventToPosition(config, ev, elem) {
        let target     = elem || ev.currentTarget;
        let rect       = elem.getBoundingClientRect();
-       let itemHeight = parseFloat(this.getCSSVariable("--item-height"));
-       let dayWidth   = parseFloat(this.getCSSVariable("--day-width"));
-       let headerHeight = parseFloat(this.getCSSVariable("--header-height"));
+       let itemHeight = parseFloat(this.getCSSVariable(config, "--item-height"));
+       let dayWidth   = parseFloat(this.getCSSVariable(config, "--day-width"));
+       let headerHeight = parseFloat(this.getCSSVariable(config, "--header-height"));
 
        let paddingLeft  = parseInt(target.style.paddingLeft || 0);           //  + parseInt(elem.offsetLeft);
        let paddingTop  = parseInt(target.style.paddingTop || 0);            // + parseInt(elem.offsetTop);
@@ -255,8 +255,8 @@ export default {
        let target       = elem || ev.currentTarget;
        let rect         = elem.getBoundingClientRect();
        let rectParent   = elem.parentElement.getBoundingClientRect();
-       let itemHeight   = parseFloat(this.getCSSVariable("--item-height"));
-       let headerHeight = parseFloat(this.getCSSVariable("--header-height"));
+       let itemHeight   = parseFloat(this.getCSSVariable(config, "--item-height"));
+       let headerHeight = parseFloat(this.getCSSVariable(config, "--header-height"));
 
        let paddingTop  = parseInt(target.style.paddingTop || 0);
        let topPosition = ev.clientY - paddingTop - parseInt(rect.top);
@@ -277,8 +277,8 @@ export default {
 
   getPositionByItemDate(config, item, date){
 
-    let h    = parseFloat(this.getCSSVariable("--item-height"));
-    let w    = parseFloat(this.getCSSVariable("--day-width"));
+    let h    = parseFloat(this.getCSSVariable(config, "--item-height"));
+    let w    = parseFloat(this.getCSSVariable(config, "--day-width"));
     let y    = this.getPositionByItem(config, item);
     let x    = dateUtils.diffDays(config.timeline.start, date);
     let left = x * w;
@@ -432,9 +432,9 @@ export default {
    * @param {Any} value - valor a asignar a variable CSS
    */
 
-  setCSSVariable(varName, value) {
-    let root = document.documentElement;
-    root.style.setProperty(varName,value); 
+  setCSSVariable(config, varName, value) {
+    let containerElement = document.querySelector(config.selector);
+    containerElement.style.setProperty(varName,value); 
   },
 
   /**
@@ -443,9 +443,9 @@ export default {
    * @return {Float} Numero redondeado
    */
 
-  getCSSVariable(varName) {
-    let root = document.documentElement;
-    return getComputedStyle(root).getPropertyValue(varName);
+  getCSSVariable(config, varName) {
+    let containerElement = document.querySelector(config.selector);
+    return getComputedStyle(containerElement).getPropertyValue(varName);
   },