capibara 1.1.20 → 1.1.21

package/package.json

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

package/src/lib/capibara.js

@@ -795,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()
     }
@@ -811,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 => {
@@ -847,6 +858,10 @@ export class Capibara{
       }
     })
 
+    this.selected.forEach((s, index) => {
+      s.index = index+1;
+    })
+
     if(redraw){
       this.redrawSelection()
     }
@@ -970,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
@@ -1019,7 +1045,6 @@ export class Capibara{
   }
 
 
-
   /**
    * Agrega eventos a los elementos del dom de la planilla
    * usando el objecto $capibara
@@ -1048,6 +1073,8 @@ export class Capibara{
 
     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));
 
   }

package/src/scss/components/_floatbox.scss

@@ -108,7 +108,6 @@
         box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.2);
         border-radius: 3px;
         color: white;
-        backdrop-filter: blur(2px);
 
         &:not(.shape-outlined){
           border: 1px solid rgba(255, 255, 255, 0.2);
@@ -119,6 +118,7 @@
           border-width: 2px;
           border-color: grey;
           border-style: solid;
+          backdrop-filter: blur(2px);
         }
 
         &.shape-bar{
@@ -130,6 +130,33 @@
           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/layout/_contextMenu.scss

@@ -1,39 +1,58 @@
-.cap-context-menu-container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-  &.cm-hide {
-    .cap-context-menu {
-      visibility: hidden;
-      opacity: 0;
+.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;
 
-  .cap-context-menu {
-    position: absolute;
-    min-width: 150px;
-    z-index: 2;
-    border-radius: 3px;
-    background: rgb(255,255,255);
-    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(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;
+      &--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/_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/_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/themes/_color_themes.scss

@@ -209,6 +209,11 @@
           background: $color;
         }
 
+        span.data.shape-bar-outlined.#{$colorName}{
+          border-color: transparentize($color, 0.1);
+          background: transparentize($color, 0.9);
+        }
+
 
         .dot.#{$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/tableElements.js

@@ -631,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>`;
       });
@@ -642,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;
   },
 
@@ -2118,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);
@@ -2706,9 +2726,16 @@ export default {
     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.enabler){
-        isEnabled = option.enabler({item, date, selected});
+      if(option.enableIf){
+        isEnabled = option.enableIf({item, date, selected});
       }
 
       let optionClassName = "";