@websy/websy-designs 1.2.1 → 1.2.3

package/dist/websy-designs-es6.debug.js

@@ -864,6 +864,12 @@ class WebsyDropdown {
       closeAfterSelection: true
     }
     this.options = Object.assign({}, DEFAULTS, options)    
+    if (this.options.items.length > 0) {
+      this.options.items = this.options.items.map((d, i) => {
+        d.index = i
+        return d
+      }) 
+    }
     this.tooltipTimeoutFn = null
     this._originalData = []
     this.selectedItems = this.options.selectedItems || []
@@ -926,7 +932,12 @@ class WebsyDropdown {
     this.selectedItems = d || []    
   }
   set data (d) {
-    this.options.items = d || []    
+    this.options.items = (d || []).map((d, i) => {
+      if (typeof d.index === 'undefined') {
+        d.index = i        
+      }
+      return d
+    })       
     const el = document.getElementById(`${this.elementId}_items`)
     if (el.childElementCount === 0) {
       this.render()
@@ -1031,6 +1042,10 @@ class WebsyDropdown {
         if (this.options.onCancelSearch) {            
           this.options.onCancelSearch(event.target.value)
         }
+        else {
+          this.data = this._originalData
+          this._originalData = []
+        }
       }
     }
   }
@@ -1133,12 +1148,12 @@ class WebsyDropdown {
     //     </div>
     //   </div>
     // `
-    // el.innerHTML = html
+    // el.innerHTML = html    
     this.renderItems()
   }
   renderItems () {
     let html = this.options.items.map((r, i) => `
-      <li data-index='${i}' class='websy-dropdown-item ${(r.classes || []).join(' ')} ${this.selectedItems.indexOf(i) !== -1 ? 'active' : ''}'>${r.label}</li>
+      <li data-index='${r.index}' class='websy-dropdown-item ${(r.classes || []).join(' ')} ${this.selectedItems.indexOf(r.index) !== -1 ? 'active' : ''}'>${r.label}</li>
     `).join('')
     const el = document.getElementById(`${this.elementId}_items`)
     if (el) {
@@ -1159,7 +1174,8 @@ class WebsyDropdown {
     const itemEls = el.querySelectorAll(`.websy-dropdown-item`)
     for (let i = 0; i < itemEls.length; i++) {
       itemEls[i].classList.remove('active')
-      if (this.selectedItems.indexOf(i) !== -1) {
+      let index = itemEls[i].getAttribute('data-index')
+      if (this.selectedItems.indexOf(+index) !== -1) {
         itemEls[i].classList.add('active')
       }
     }
@@ -1213,21 +1229,23 @@ class WebsyDropdown {
   }
   updateSelected (index) {
     if (typeof index !== 'undefined' && index !== null) {
-      let pos = this.selectedItems.indexOf(index)
-      if (pos !== -1) {
-        this.selectedItems.splice(pos, 1)
-      }
+      let pos = this.selectedItems.indexOf(index)      
       if (this.options.multiSelect === false) {
         this.selectedItems = [index]
       }
       else {
-        this.selectedItems.push(index)
+        if (pos !== -1) {
+          this.selectedItems.splice(pos, 1)
+        }
+        else {
+          this.selectedItems.push(index)
+        }
       } 
     }    
     const item = this.options.items[index]
     this.updateHeader(item)
     if (item && this.options.onItemSelected) {
-      this.options.onItemSelected(item, this.selectedItems, this.options.items)
+      this.options.onItemSelected(item, this.selectedItems, this.options.items, this.options)
     }
     if (this.options.closeAfterSelection === true) {
       this.close() 
@@ -1684,11 +1702,11 @@ class WebsyNavigationMenu {
 						 data-id='${currentBlock}'
              data-menu-id='${this.elementId}_${currentBlock}_list'
 						 data-popout-id='${level > 1 ? block : currentBlock}'
-						 data-text='${items[i].text}'
+						 data-text='${items[i].isLink !== true ? items[i].text : ''}'
 						 style='padding-left: ${level * this.options.childIndentation}px'
 						 ${(items[i].attributes && items[i].attributes.join(' ')) || ''}
         >
-      `
+      `      
       if (this.options.orientation === 'horizontal') {
         html += items[i].text
       }
@@ -1709,6 +1727,9 @@ class WebsyNavigationMenu {
         html += `
           &nbsp;
         `
+      }
+      if (items[i].isLink === true && items[i].href) {
+        html += `<a href='${items[i].href}'>${items[i].text}</a>`
       }  
       html += `    
 				</div>
@@ -4154,8 +4175,23 @@ class WebsyTable2 {
     const tableEl = document.getElementById(`${this.elementId}_table`)
     tableEl.style.tableLayout = 'auto'
     tableEl.style.width = 'auto'
+    const headEl = document.getElementById(`${this.elementId}_head`)
     const bodyEl = document.getElementById(`${this.elementId}_body`)
-    bodyEl.innerHTML = '<tr>' + values.map(c => `
+    headEl.innerHTML = '<tr style="visibility: hidden;">' + values.map((c, i) => `
+      <th>
+        <div class ="tableHeader">
+          <div class="leftSection">
+            <div
+              class="tableHeaderField"              
+            >
+              ${c.value || 'nbsp;'}
+            </div>
+          </div>          
+          ${c.searchable === true ? this.buildSearchIcon(i) : ''}
+        </div>
+      </th>
+    `).join('') + '</tr>'
+    bodyEl.innerHTML = '<tr style="visibility: hidden;">' + values.map(c => `
       <td                 
         style='height: ${this.options.cellSize}px; line-height: ${this.options.cellSize}px; padding: 10px 5px;'
       >${c.value || '&nbsp;'}</td>

package/dist/websy-designs-es6.js

@@ -1026,6 +1026,14 @@ var WebsyDropdown = /*#__PURE__*/function () {
       closeAfterSelection: true
     };
     this.options = _extends({}, DEFAULTS, options);
+
+    if (this.options.items.length > 0) {
+      this.options.items = this.options.items.map(function (d, i) {
+        d.index = i;
+        return d;
+      });
+    }
+
     this.tooltipTimeoutFn = null;
     this._originalData = [];
     this.selectedItems = this.options.selectedItems || [];
@@ -1168,6 +1176,9 @@ var WebsyDropdown = /*#__PURE__*/function () {
         } else {
           if (this.options.onCancelSearch) {
             this.options.onCancelSearch(event.target.value);
+          } else {
+            this.data = this._originalData;
+            this._originalData = [];
           }
         }
       }
@@ -1293,7 +1304,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
       //     </div>
       //   </div>
       // `
-      // el.innerHTML = html
+      // el.innerHTML = html    
 
 
       this.renderItems();
@@ -1304,7 +1315,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
       var _this7 = this;
 
       var html = this.options.items.map(function (r, i) {
-        return "\n      <li data-index='".concat(i, "' class='websy-dropdown-item ").concat((r.classes || []).join(' '), " ").concat(_this7.selectedItems.indexOf(i) !== -1 ? 'active' : '', "'>").concat(r.label, "</li>\n    ");
+        return "\n      <li data-index='".concat(r.index, "' class='websy-dropdown-item ").concat((r.classes || []).join(' '), " ").concat(_this7.selectedItems.indexOf(r.index) !== -1 ? 'active' : '', "'>").concat(r.label, "</li>\n    ");
       }).join('');
       var el = document.getElementById("".concat(this.elementId, "_items"));
 
@@ -1334,8 +1345,9 @@ var WebsyDropdown = /*#__PURE__*/function () {
 
       for (var i = 0; i < itemEls.length; i++) {
         itemEls[i].classList.remove('active');
+        var index = itemEls[i].getAttribute('data-index');
 
-        if (this.selectedItems.indexOf(i) !== -1) {
+        if (this.selectedItems.indexOf(+index) !== -1) {
           itemEls[i].classList.add('active');
         }
       }
@@ -1399,14 +1411,14 @@ var WebsyDropdown = /*#__PURE__*/function () {
       if (typeof index !== 'undefined' && index !== null) {
         var pos = this.selectedItems.indexOf(index);
 
-        if (pos !== -1) {
-          this.selectedItems.splice(pos, 1);
-        }
-
         if (this.options.multiSelect === false) {
           this.selectedItems = [index];
         } else {
-          this.selectedItems.push(index);
+          if (pos !== -1) {
+            this.selectedItems.splice(pos, 1);
+          } else {
+            this.selectedItems.push(index);
+          }
         }
       }
 
@@ -1414,7 +1426,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
       this.updateHeader(item);
 
       if (item && this.options.onItemSelected) {
-        this.options.onItemSelected(item, this.selectedItems, this.options.items);
+        this.options.onItemSelected(item, this.selectedItems, this.options.items, this.options);
       }
 
       if (this.options.closeAfterSelection === true) {
@@ -1429,7 +1441,13 @@ var WebsyDropdown = /*#__PURE__*/function () {
   }, {
     key: "data",
     set: function set(d) {
-      this.options.items = d || [];
+      this.options.items = (d || []).map(function (d, i) {
+        if (typeof d.index === 'undefined') {
+          d.index = i;
+        }
+
+        return d;
+      });
       var el = document.getElementById("".concat(this.elementId, "_items"));
 
       if (el.childElementCount === 0) {
@@ -1944,7 +1962,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           items[i].classes = items[i].classes.join(' ');
         }
 
-        html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header ").concat(items[i].classes || '', " ").concat(selected, " ").concat(active, "' \n\t\t\t\t\t\t id='").concat(blockId, "' \n\t\t\t\t\t\t data-id='").concat(currentBlock, "'\n             data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n\t\t\t\t\t\t data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n\t\t\t\t\t\t data-text='").concat(items[i].text, "'\n\t\t\t\t\t\t style='padding-left: ").concat(level * this.options.childIndentation, "px'\n\t\t\t\t\t\t ").concat(items[i].attributes && items[i].attributes.join(' ') || '', "\n        >\n      ");
+        html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header ").concat(items[i].classes || '', " ").concat(selected, " ").concat(active, "' \n\t\t\t\t\t\t id='").concat(blockId, "' \n\t\t\t\t\t\t data-id='").concat(currentBlock, "'\n             data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n\t\t\t\t\t\t data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n\t\t\t\t\t\t data-text='").concat(items[i].isLink !== true ? items[i].text : '', "'\n\t\t\t\t\t\t style='padding-left: ").concat(level * this.options.childIndentation, "px'\n\t\t\t\t\t\t ").concat(items[i].attributes && items[i].attributes.join(' ') || '', "\n        >\n      ");
 
         if (this.options.orientation === 'horizontal') {
           html += items[i].text;
@@ -1964,6 +1982,10 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           html += "\n          &nbsp;\n        ";
         }
 
+        if (items[i].isLink === true && items[i].href) {
+          html += "<a href='".concat(items[i].href, "'>").concat(items[i].text, "</a>");
+        }
+
         html += "    \n\t\t\t\t</div>\n\t\t  ";
 
         if (items[i].items) {
@@ -4755,8 +4777,12 @@ var WebsyTable2 = /*#__PURE__*/function () {
       var tableEl = document.getElementById("".concat(this.elementId, "_table"));
       tableEl.style.tableLayout = 'auto';
       tableEl.style.width = 'auto';
+      var headEl = document.getElementById("".concat(this.elementId, "_head"));
       var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
-      bodyEl.innerHTML = '<tr>' + values.map(function (c) {
+      headEl.innerHTML = '<tr style="visibility: hidden;">' + values.map(function (c, i) {
+        return "\n      <th>\n        <div class =\"tableHeader\">\n          <div class=\"leftSection\">\n            <div\n              class=\"tableHeaderField\"              \n            >\n              ".concat(c.value || 'nbsp;', "\n            </div>\n          </div>          \n          ").concat(c.searchable === true ? _this31.buildSearchIcon(i) : '', "\n        </div>\n      </th>\n    ");
+      }).join('') + '</tr>';
+      bodyEl.innerHTML = '<tr style="visibility: hidden;">' + values.map(function (c) {
         return "\n      <td                 \n        style='height: ".concat(_this31.options.cellSize, "px; line-height: ").concat(_this31.options.cellSize, "px; padding: 10px 5px;'\n      >").concat(c.value || '&nbsp;', "</td>\n    ");
       }).join('') + '</tr>'; // get height of the first data cell