capibara 1.1.21 → 1.1.25

package/src/util/tableElements.js

@@ -281,7 +281,7 @@ export default {
         <div class="progress-bar progress-bar-right hide-progress"></div>
       </div>
     `;
-    return dom.createElementFromHTML(str );
+    return dom.createElementFromHTML(str);
   },
 
 
@@ -296,17 +296,24 @@ export default {
    * @param {Object} config - Configuracion capibara
    * @return {Object} Elemento Dom
    */
-  createHeaderTop(config){
+
+  createHeaderTop(config, tabSelected = null){
+    return this.redrawHeaderTop(config, tabSelected, dom.createElement("div"));
+  },
+
+  redrawHeaderTop(config, tabSelected = null, $elem){
     let str = `
       <div class="header-top">`;
 
 
 
+
+
+
     if(config.timeline.tabs){
 
-      str += `
-            <div class="tab-select-container c-d-desktop-none c-d-mobile-flex">
-              <select class="tabs-select" >`;
+      str += ` <div class="tab-select-container c-d-desktop-none c-d-mobile-flex">
+                <select class="tabs-select" >`;
 
       config.timeline.tabs.forEach(tab => {
         if(!tab.isHidden){
@@ -314,19 +321,19 @@ export default {
         }
       });
 
-      str += `
-              </select>
+      str += `</select>
             </div>`;
 
 
-      str += `
-            <div class="tabs-container c-d-desktop-flex c-d-mobile-none">
-            `;
+      str += ` <div class="tabs-container c-d-desktop-flex c-d-mobile-none">`;
 
       config.timeline.tabs.forEach(tab => {
         if(!tab.isHidden){
-          str += `
-                <div class="tab ${tab.disabled ? 'disabled': ''} ${tab.color}" color="${tab.color}" input-key="${tab.id}" ${tab.tooltip?'cap-tooltip="'+tab.tooltip+'"':''} >
+          str += ` <div
+                      class="tab ${tab.disabled ? 'disabled': ''}  ${tab == tabSelected ? 'active': ''}  ${tab.color}"
+                      color="${tab.color}"
+                      input-key="${tab.id}"
+                      ${tab.tooltip?'cap-tooltip="'+tab.tooltip+'"':''} >
                   <span>${tab.label}</span>
                   ${tab.icon || ''}
                 </div>
@@ -334,10 +341,44 @@ export default {
         }
       });
 
-      str += `
-          </div>`;
+      str += `</div>`;
     }
 
+    if(tabSelected){
+
+      if(tabSelected.legends){
+
+        str += `<div class="legends-select-container c-d-desktop-none c-d-mobile-flex">
+                <select class="tabs-select">`;
+
+        tabSelected.legends.forEach(legend => {
+            str +=` <option value="${legend.id}"> ${legend.label} </option>`
+        });
+
+        str += `</select>
+            </div>`;
+
+
+        str += `<div class="legends-container c-d-desktop-flex c-d-mobile-none">`;
+
+        tabSelected.legends.forEach(legend => {
+            str += ` <div
+                      class="legend ${legend.active? 'active': ''}"
+                      input-key="${legend.key}"
+                      ${legend.tooltip ? `cap-tooltip="${legend.tooltip}"`:''} >
+                  <div class="icon-legend ${legend.color && legend.active ? legend.color+"--background":''} ${legend.shape}"></div>
+                  <span>${legend.label}</span>
+                </div>`;
+        });
+
+        str += `</div>`;
+      }
+    }
+
+
+
+
+
 
     str += `
 
@@ -452,7 +493,8 @@ export default {
      }
 
 
-        str += `</div>`;
+        str += ` <div class="button-right-container"></div>
+        </div>`;
           /*
           `
           <button toggle-sidebar-right class="btn-icon btn-icon-raised">
@@ -466,24 +508,50 @@ export default {
       </div>
     `;
     */
+
+
     let $r = dom.createElementFromHTML(str);
+    $elem.replaceWith($r);
 
-    $r.querySelector("[toggle-dark]").addEventListener("click", e => {
-      $r.dispatchEvent(new CustomEvent("toggleDark", {
-        bubbles: true,
-        cancelable: false,
-      }));
-    });
+    if(config.timeline.header.rightButtons){
+      let $buttonContainer = $r.querySelector(".button-right-container");
+      config.timeline.header.rightButtons.forEach(button => {
+        let str = `<button class="btn-icon btn-icon-raised">
+            <span>
+              <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                  <path fill="currentColor" d="${button.icon}" />
+              </svg>
+            </span>
+          </button>`;
+        let $button = dom.createElementFromHTML(str);
+        $button.addEventListener("click", evt => button.onClick({evt}) );
+        $buttonContainer.append($button);
+      });
+    }
 
-    $r.querySelector("[btn-calendar]").addEventListener("click", e => {
-      let x = e.x;
-      let y = e.y;
-      $r.dispatchEvent(new CustomEvent("clickCalendarIcon", {
-        bubbles: true,
-        cancelable: false,
-        detail:{x, y}
-      }));
-    });
+
+    let $toggleDark = $r.querySelector("[toggle-dark]");
+    if($toggleDark){
+      $toggleDark.addEventListener("click", e => {
+        $r.dispatchEvent(new CustomEvent("toggleDark", {
+          bubbles: true,
+          cancelable: false,
+        }));
+      });
+    }
+
+    let $btnCalendar = $r.querySelector("[btn-calendar]")
+    if($btnCalendar){
+      $btnCalendar.addEventListener("click", e => {
+        let x = e.x;
+        let y = e.y;
+        $r.dispatchEvent(new CustomEvent("clickCalendarIcon", {
+          bubbles: true,
+          cancelable: false,
+          detail:{x, y}
+        }));
+      });
+    }
 
     let $btnToggleHeader =  $r.querySelector("[toggle-header]")
     if($btnToggleHeader){
@@ -535,6 +603,29 @@ export default {
     });
 
 
+    $r.querySelectorAll(".legend").forEach($legend => {
+      $legend.addEventListener("click", e => {
+
+          let key = e.currentTarget.getAttribute("input-key");
+
+          if(key){
+            let legendSelected = tabSelected.legends.find(tab => tab.key === key);
+            if(legendSelected){
+              $r.dispatchEvent(new CustomEvent("selectLegendHeader", {
+                bubbles: true,
+                cancelable: false,
+                detail:{
+                  legend: legendSelected,
+                  $legend
+                }
+              }));
+            }
+          }
+
+      });
+    });
+
+
     $r.querySelectorAll(".tab:not(.disabled)").forEach($tab => {
       $tab.addEventListener("click", e => {
 
@@ -556,6 +647,8 @@ export default {
       });
     });
 
+
+
     $r.querySelectorAll(".tabs-select:not(.disabled)").forEach($tab => {
       $tab.addEventListener("change", e => {
 
@@ -646,6 +739,22 @@ export default {
 
     if(config.timeline.dateSelectable){
       $elem.querySelectorAll(".dia-calendario[date]").forEach($dia => {
+
+        $dia.addEventListener("contextmenu", evt => {
+
+          $elem.dispatchEvent(new CustomEvent("contextMenuDate", {
+            bubbles    : true,
+            cancelable : false,
+            detail     : {
+              $elem: $dia,
+              date: $dia.getAttribute("date"),
+              clientX : evt.clientX,
+              clientY: evt.clientY
+            }
+          }));
+        });
+
+
         $dia.addEventListener("click", evt => {
 
           $elem.dispatchEvent(new CustomEvent("clickDate", {
@@ -657,6 +766,7 @@ export default {
             }
           }));
         });
+
       });
     }
 
@@ -1801,6 +1911,11 @@ export default {
                   if(tabSelected.floatBox.nums){
                     tabSelected.floatBox.nums.forEach(n => {
 
+                      if(tabSelected.legends && n.tabKey){
+                        let legend = tabSelected.legends.find(l => l.key == n.tabKey);
+                        if(legend && !legend.active) return;
+                      }
+
                       let dataFloatBox = null;
                       let className = "";
 
@@ -2134,11 +2249,19 @@ export default {
    */
   redrawSelectBoard($elem, selected){
     $elem.innerHTML = "";
+    let hasNumber = true;
+
     if(selected){
+
+      if(selected.length == 1) hasNumber = false;
+
       selected.forEach(s => {
-        let $s = dom.createElement("div", {className: "selected-day", attributes:[
-          {name:"selected-index", value:s.index }
-        ]});
+        let attributes = []
+
+        if(hasNumber){
+          attributes.push({name:"cap-badge", value:s.index });
+        }
+        let $s = dom.createElement("div", {className: "selected-day", attributes });
         $s.style.left = s.pos.left + "px";
         $s.style.top = s.pos.top + "px";
         $elem.append($s);
@@ -2692,30 +2815,49 @@ export default {
   },
 
 
-  createContextMenu( { config, evt=null, position = null, date=null, item=null, selected = []} ){
+  createContextMenu( {
+    config,
+    $capibaraElem = null,
+    evt      = null,
+    date     = null,
+    item     = null,
+    selected = [],
+    tabSelected = null,
+    left     = null,
+    top      = null,
+    name     = ""
+  } ){
 
     if(config.timeline.contextMenu === undefined) return {elem: null, isVisible: false} ;
 
     let className = "";
     let style = "";
-    let left = 0;
-    let top = 0;
+    let strHtml = '';
+    let leftPosition = null;
+    let topPosition = null;
     let isVisible = true;
 
-    if(evt){
-      left = evt.clientX + 5;
-      top = evt.clientY + 5 - evt.currentTarget.offsetTop;
+    if(evt && $capibaraElem ){
+      left = evt.clientX;
+      top = evt.clientY - $capibaraElem.getBoundingClientRect().top;
+    }
+
+    if(left){
+      leftPosition = left;
     }
 
-    if(position){
-      style += `top: ${ top }px; left: ${ left }px`;
+    if(top){
+      topPosition = top;
+    }
+
+    if(leftPosition !== null & topPosition !== null){
+      style += `top: ${ topPosition }px; left: ${ leftPosition }px`;
     }else{
       className += "cm-hide";
       isVisible = false;
     }
 
 
-    let strHtml = '';
 
     strHtml += ` <div class="cap-context-menu-container ${className}">
                     <div class="cap-context-menu" style="${style}">
@@ -2728,32 +2870,45 @@ export default {
     config.timeline.contextMenu.options.forEach(option => {
 
       if(option.showIf){
-        let show = option.showIf({item, date, selected});
+        let show = option.showIf({item, date, selected, name, tabSelected});
         if(!show) return;
       }
 
 
       let isEnabled = true;
       if(option.enableIf){
-        isEnabled = option.enableIf({item, date, selected});
+        isEnabled = option.enableIf({item, date, selected, name, tabSelected});
       }
 
       let optionClassName = "";
+      let strIcon = "";
 
       if(!isEnabled){
         optionClassName += "is-disabled";
       }
 
+      if(option.icon){
+
+        strIcon = `<div class="cap-context-menu_item_icon">
+                      <svg viewBox="0 0 24 24">
+                        <path d="${option.icon}" />
+                      </svg>
+                  </div>`;
+      }
+
       let optionStrHtml = `
-        <div class="cap-context-menu--item ${optionClassName}">
-          ${option.label}
+        <div class="cap-context-menu_item ${optionClassName}">
+          ${strIcon}
+          <span>
+            ${option.label}
+          </span>
         </div>`;
 
       let $option = dom.createElementFromHTML(optionStrHtml);
 
       if(isEnabled){
         $option.addEventListener("click", (evtClick) => option.onClick({
-          config, evt:evtClick, date, item, selected
+          config, evt:evtClick, date, item, selected, tabSelected
         }));
       }else{
         $option.addEventListener("click", (evtClick) => {