@websy/websy-designs 1.4.4 → 1.4.6

package/dist/websy-designs.debug.js

@@ -3956,6 +3956,26 @@ class WebsyRouter {
       this.navigate(`${inputPath}?${path}`, 'main', null, noHistory)
     }
   }
+  removeAllUrlParams (reloadView = false, noHistory = true) {
+    // const output = {
+    //   path: '',
+    //   items: {}
+    // }
+    // this.currentParams = output
+    let inputPath = this.currentView
+    if (this.options.urlPrefix) {
+      inputPath = `/${this.options.urlPrefix}/${inputPath}`
+    }    
+    if (reloadView === true) {
+      this.navigate(`${inputPath}`, 'main', null, noHistory)
+    }
+    else {
+      this.currentParams = {
+        path: '',
+        items: {}
+      }
+    }
+  }
   buildUrlPath (params) {
     let path = []
     for (let key in params) {
@@ -3976,6 +3996,9 @@ class WebsyRouter {
         if (!this.groups[g]) {
           this.addGroup(g)
         }
+        if (els[i].classList.contains(this.options.activeClass)) {
+          this.groups[g].activeView = v
+        }
         if (this.groups[g].views.indexOf(v) === -1) {
           this.groups[g].views.push(v)
         }
@@ -4019,9 +4042,9 @@ class WebsyRouter {
         if (this.groups[g].activeView) {
           views.push({view: this.groups[g].activeView, group: g})
         }
-        else {
-          views.push({view: this.groups[g].views[0], group: g})
-        }        
+        // else {
+        //   views.push({view: this.groups[g].views[0], group: g})
+        // }        
       }
     }
     return views
@@ -4194,12 +4217,12 @@ class WebsyRouter {
       <article id='${elementId}_content' class='websy-content-article'></article>
       <div id='${elementId}_loading' class='websy-loading-container'><div class='websy-ripple'><div></div><div></div></div></div>
     `
-    if (options.help && options.help !== '') {
+    if (options && options.help && options.help !== '') {
       html += `
         <Help not yet supported>
       `
     }
-    if (options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
+    if (options && options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
       html += `
           <div class="websy-info ${this.options.tooltip.classes.join(' ') || ''}" data-info="${this.options.tooltip.value}">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-e</title><path d="M256,56C145.72,56,56,145.72,56,256s89.72,200,200,200,200-89.72,200-200S366.28,56,256,56Zm0,82a26,26,0,1,1-26,26A26,26,0,0,1,256,138Zm48,226H216a16,16,0,0,1,0-32h28V244H228a16,16,0,0,1,0-32h32a16,16,0,0,1,16,16V332h28a16,16,0,0,1,0,32Z"/></svg>
@@ -4305,7 +4328,7 @@ class WebsyRouter {
       this.addGroup(group)
     }
     if (toggle === true && this.groups[group].activeView !== '') {
-      newPath = ''
+      newPath = inputPath === this.groups[group].activeView ? '' : inputPath
     }        
     this.previousView = this.currentView    
     this.previousPath = this.currentPath    
@@ -4460,6 +4483,7 @@ class WebsySearch {
     const DEFAULTS = {
       searchIcon: `<svg class='search' width="20" height="20" viewBox="0 0 512 512"><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`,
       clearIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><title>ionicons-v5-l</title><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
+      clearAlwaysOn: false,
       placeholder: 'Search',
       searchTimeout: 500,
       minLength: 2
@@ -4476,7 +4500,7 @@ class WebsySearch {
           <div class='websy-search-input-container'>
             ${this.options.searchIcon}
             <input id='${this.elementId}_search' class='websy-search-input' placeholder='${this.options.placeholder || 'Search'}'>
-            <div class='clear websy-hidden' id='${this.elementId}_clear'>
+            <div class='clear ${this.options.clearAlwaysOn === true ? '' : 'websy-hidden'}' id='${this.elementId}_clear'>
               ${this.options.clearIcon}
             </div>
           </div>
@@ -4512,12 +4536,14 @@ class WebsySearch {
         clearTimeout(this.searchTimeoutFn)
       }
       const clearEl = document.getElementById(`${this.elementId}_clear`)
-      if (event.target.value.length > 0) {
-        clearEl.classList.remove('websy-hidden')
-      }
-      else {
-        clearEl.classList.add('websy-hidden')
-      }
+      if (this.options.clearAlwaysOn === false) {
+        if (event.target.value.length > 0) {
+          clearEl.classList.remove('websy-hidden')
+        }
+        else {
+          clearEl.classList.add('websy-hidden')
+        }
+      }      
       if (event.target.value.length >= this.options.minLength) {
         this.searchTimeoutFn = setTimeout(() => {
           if (this.options.onSearch) {
@@ -4527,8 +4553,8 @@ class WebsySearch {
       }      
       else {
         if (this.options.onSearch && (event.key === 'Delete' || event.key === 'Backspace')) {
-          if (this.options.onClear) {
-            this.options.onClear()
+          if (this.options.onSearch) {
+            this.options.onSearch('')
           }
         }
       }

package/dist/websy-designs.js

@@ -4296,6 +4296,31 @@ var WebsyRouter = /*#__PURE__*/function () {
         this.navigate("".concat(inputPath, "?").concat(path), 'main', null, noHistory);
       }
     }
+  }, {
+    key: "removeAllUrlParams",
+    value: function removeAllUrlParams() {
+      var reloadView = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var noHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      // const output = {
+      //   path: '',
+      //   items: {}
+      // }
+      // this.currentParams = output
+      var inputPath = this.currentView;
+
+      if (this.options.urlPrefix) {
+        inputPath = "/".concat(this.options.urlPrefix, "/").concat(inputPath);
+      }
+
+      if (reloadView === true) {
+        this.navigate("".concat(inputPath), 'main', null, noHistory);
+      } else {
+        this.currentParams = {
+          path: '',
+          items: {}
+        };
+      }
+    }
   }, {
     key: "buildUrlPath",
     value: function buildUrlPath(params) {
@@ -4327,6 +4352,10 @@ var WebsyRouter = /*#__PURE__*/function () {
             this.addGroup(g);
           }
 
+          if (els[i].classList.contains(this.options.activeClass)) {
+            this.groups[g].activeView = v;
+          }
+
           if (this.groups[g].views.indexOf(v) === -1) {
             this.groups[g].views.push(v);
           }
@@ -4386,12 +4415,10 @@ var WebsyRouter = /*#__PURE__*/function () {
               view: this.groups[g].activeView,
               group: g
             });
-          } else {
-            views.push({
-              view: this.groups[g].views[0],
-              group: g
-            });
-          }
+          } // else {
+          //   views.push({view: this.groups[g].views[0], group: g})
+          // }        
+
         }
       }
 
@@ -4600,11 +4627,11 @@ var WebsyRouter = /*#__PURE__*/function () {
 
       var html = "\n      <article id='".concat(elementId, "_content' class='websy-content-article'></article>\n      <div id='").concat(elementId, "_loading' class='websy-loading-container'><div class='websy-ripple'><div></div><div></div></div></div>\n    ");
 
-      if (options.help && options.help !== '') {
+      if (options && options.help && options.help !== '') {
         html += "\n        <Help not yet supported>\n      ";
       }
 
-      if (options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
+      if (options && options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
         html += "\n          <div class=\"websy-info ".concat(this.options.tooltip.classes.join(' ') || '', "\" data-info=\"").concat(this.options.tooltip.value, "\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><title>ionicons-v5-e</title><path d=\"M256,56C145.72,56,56,145.72,56,256s89.72,200,200,200,200-89.72,200-200S366.28,56,256,56Zm0,82a26,26,0,1,1-26,26A26,26,0,0,1,256,138Zm48,226H216a16,16,0,0,1,0-32h28V244H228a16,16,0,0,1,0-32h32a16,16,0,0,1,16,16V332h28a16,16,0,0,1,0,32Z\"/></svg>\n          </div>   \n        ");
       }
 
@@ -4731,7 +4758,7 @@ var WebsyRouter = /*#__PURE__*/function () {
       }
 
       if (toggle === true && this.groups[group].activeView !== '') {
-        newPath = '';
+        newPath = inputPath === this.groups[group].activeView ? '' : inputPath;
       }
 
       this.previousView = this.currentView;
@@ -4930,6 +4957,7 @@ var WebsySearch = /*#__PURE__*/function () {
     var DEFAULTS = {
       searchIcon: "<svg class='search' width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>",
       clearIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><title>ionicons-v5-l</title><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
+      clearAlwaysOn: false,
       placeholder: 'Search',
       searchTimeout: 500,
       minLength: 2
@@ -4943,7 +4971,7 @@ var WebsySearch = /*#__PURE__*/function () {
       el.addEventListener('click', this.handleClick.bind(this));
       el.addEventListener('keyup', this.handleKeyUp.bind(this));
       el.addEventListener('keyup', this.handleKeyDown.bind(this));
-      el.innerHTML = "\n          <div class='websy-search-input-container'>\n            ".concat(this.options.searchIcon, "\n            <input id='").concat(this.elementId, "_search' class='websy-search-input' placeholder='").concat(this.options.placeholder || 'Search', "'>\n            <div class='clear websy-hidden' id='").concat(this.elementId, "_clear'>\n              ").concat(this.options.clearIcon, "\n            </div>\n          </div>\n        ");
+      el.innerHTML = "\n          <div class='websy-search-input-container'>\n            ".concat(this.options.searchIcon, "\n            <input id='").concat(this.elementId, "_search' class='websy-search-input' placeholder='").concat(this.options.placeholder || 'Search', "'>\n            <div class='clear ").concat(this.options.clearAlwaysOn === true ? '' : 'websy-hidden', "' id='").concat(this.elementId, "_clear'>\n              ").concat(this.options.clearIcon, "\n            </div>\n          </div>\n        ");
     } else {
       console.log('No element found with Id', elementId);
     }
@@ -4985,10 +5013,12 @@ var WebsySearch = /*#__PURE__*/function () {
 
         var clearEl = document.getElementById("".concat(this.elementId, "_clear"));
 
-        if (event.target.value.length > 0) {
-          clearEl.classList.remove('websy-hidden');
-        } else {
-          clearEl.classList.add('websy-hidden');
+        if (this.options.clearAlwaysOn === false) {
+          if (event.target.value.length > 0) {
+            clearEl.classList.remove('websy-hidden');
+          } else {
+            clearEl.classList.add('websy-hidden');
+          }
         }
 
         if (event.target.value.length >= this.options.minLength) {
@@ -4999,8 +5029,8 @@ var WebsySearch = /*#__PURE__*/function () {
           }, this.options.searchTimeout);
         } else {
           if (this.options.onSearch && (event.key === 'Delete' || event.key === 'Backspace')) {
-            if (this.options.onClear) {
-              this.options.onClear();
+            if (this.options.onSearch) {
+              this.options.onSearch('');
             }
           }
         }