@websy/websy-designs 1.4.14 → 1.4.16

package/dist/websy-designs.debug.js

@@ -2202,25 +2202,26 @@ class WebsyForm {
   checkRecaptcha () {
     return new Promise((resolve, reject) => {
       if (this.options.useRecaptcha === true) {
-        // if (this.recaptchaValue) {                  
-        grecaptcha.ready(() => {
-          grecaptcha.execute(ENVIRONMENT.RECAPTCHA_KEY, { action: 'submit' }).then(token => {
-            this.apiService.add('google/checkrecaptcha', {grecaptcharesponse: token}).then(response => {
-              if (response.success && response.success === true) {
-                resolve(true)
-              }
-              else {
-                reject(false)              
-              }
-            })
-          }, err => {
-            reject(err)
+        if (this.recaptchaValue) {                  
+        // grecaptcha.ready(() => {
+          // grecaptcha.execute(this.recaptchaValue, { action: 'submit' }).then(token => {
+          this.apiService.add('google/checkrecaptcha', {grecaptcharesponse: this.recaptchaValue}).then(response => {
+            if (response.success && response.success === true) {
+              resolve(true)
+              grecaptcha.reset(`${this.elementId}_recaptcha`, {sitekey: ENVIRONMENT.RECAPTCHA_KEY})
+            }
+            else {
+              resolve(false)              
+            }            
           })
-        })
-        // }
-        // else {
-        //   reject(false)
-        // }
+          // }, err => {
+          //   reject(err)
+          // })
+        // })
+        }
+        else {
+          resolve(false)
+        }
       }
       else {
         resolve(true)
@@ -2290,10 +2291,12 @@ class WebsyForm {
   recaptchaReady () {
     const el = document.getElementById(`${this.elementId}_recaptcha`)
     if (el) {
-      grecaptcha.render(`${this.elementId}_recaptcha`, {
-        sitekey: ENVIRONMENT.RECAPTCHA_KEY,
-        callback: this.validateRecaptcha.bind(this)
-      }) 
+      grecaptcha.ready(() => {
+        grecaptcha.render(`${this.elementId}_recaptcha`, {
+          sitekey: ENVIRONMENT.RECAPTCHA_KEY,
+          callback: this.validateRecaptcha.bind(this)
+        }) 
+      })
     }    
   }
   render (update, data) {
@@ -2348,6 +2351,12 @@ class WebsyForm {
           `
         }        
       })
+      if (this.options.useRecaptcha === true) {
+        html += `
+          --><div id='${this.elementId}_recaptcha' data-sitekey='${ENVIRONMENT.RECAPTCHA_KEY}' class='websy-form-recaptcha'></div>
+          <div id='${this.elementId}_recaptchaError' class='websy-alert websy-alert-error websy-hidden'>Invalid recaptcha response</div><!--
+        ` 
+      } 
       html += `
         --><button class="websy-btn submit ${this.options.submit.classes || ''}">${this.options.submit.text || 'Save'}</button>${this.options.cancel ? '<!--' : ''}
       `
@@ -2360,24 +2369,30 @@ class WebsyForm {
         </form>
         <div id="${this.elementId}_validationFail" class="websy-validation-failure"></div>
       `
-      if (this.options.useRecaptcha === true) {
-        html += `
-          <div id='${this.elementId}_recaptcha'></div>
-        ` 
-      }      
       el.innerHTML = html
       this.processComponents(componentsToProcess, () => {
         if (this.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
-          // this.recaptchaReady()
+          this.recaptchaReady()
         }
       })      
     }
   }
   submitForm () {
     const formEl = document.getElementById(`${this.elementId}Form`)
+    const buttonEl = formEl.querySelector('button.websy-btn.submit')
+    const recaptchErrEl = document.getElementById(`${this.elementId}_recaptchaError`)    
     if (formEl.reportValidity() === true) {  
+      if (buttonEl) {
+        buttonEl.setAttribute('disabled', true)
+      }
       this.checkRecaptcha().then(result => {
-        if (result === true) {
+        if (buttonEl) {
+          buttonEl.removeAttribute('disabled')
+        }
+        if (result === true) {                    
+          if (recaptchErrEl) {
+            recaptchErrEl.classList.add('websy-hidden')
+          }
           const formData = new FormData(formEl)
           const data = {}
           const temp = new FormData(formEl)
@@ -2397,6 +2412,7 @@ class WebsyForm {
                 // this.render()
                 formEl.reset()
               }
+              buttonEl.removeAttribute('disabled')
               this.options.onSuccess.call(this, result)
             }, err => {
               console.log('Error submitting form data:', err)
@@ -2413,7 +2429,12 @@ class WebsyForm {
           }          
         }
         else {
-          console.log('bad recaptcha')
+          if (buttonEl) {
+            buttonEl.removeAttribute('disabled')
+          }          
+          if (recaptchErrEl) {
+            recaptchErrEl.classList.remove('websy-hidden')
+          }
         }        
       })         
     }    
@@ -2786,7 +2807,7 @@ class WebsyNavigationMenu {
     let lowestItems = this.flatItems.filter(d => d.level === this.maxLevel)
     let visibleItems = lowestItems
     let defaultMethod = 'remove'
-    if (searchText.length > 1) {
+    if (searchText && searchText.length > 1) {
       defaultMethod = 'add'
       visibleItems = lowestItems.filter(d => d[this.options.searchProp].toLowerCase().indexOf(searchText.toLowerCase()) !== -1)
     }
@@ -2799,7 +2820,7 @@ class WebsyNavigationMenu {
     for (let l = 0; l < listEls.length; l++) {
       listEls[l].classList.add('websy-menu-collapsed')
     }
-    if (searchText.length > 1) {
+    if (searchText && searchText.length > 1) {
       visibleItems.forEach(d => {      
         // show the item and open the list
         let pathParts = d.path.split('::')
@@ -2853,10 +2874,16 @@ class WebsyNavigationMenu {
       }
       html += this.renderBlock(this.elementId, this.elementId, this.options.items, 'main', 0)
       html += `</div>`
+      if (this.options.secondaryItems) {
+        html += `<div class='websy-menu-secondary' style='height: ${this.options.secondaryHeight || '100%'}; width: ${this.options.secondaryWidth || '100%'}'>`
+        html += this.renderBlock(this.elementId, this.elementId, this.options.secondaryItems, 'main', 0)
+        html += `</div>`
+      }
       el.innerHTML = html
       if (this.options.enableSearch === true) {
         this.search = new WebsyDesigns.Search(`${this.elementId}_search`, Object.assign({}, {
-          onSearch: this.handleSearch.bind(this)
+          onSearch: this.handleSearch.bind(this),
+          onClear: this.handleSearch.bind(this)
         }, this.options.searchOptions))
       }
     }
@@ -2891,7 +2918,7 @@ class WebsyNavigationMenu {
           style='padding-left: ${level * this.options.childIndentation}px'
           ${(items[i].attributes && items[i].attributes.join(' ')) || ''}
         >
-      `      
+      `         
       if (this.options.orientation === 'horizontal') {
         html += items[i].text
       }
@@ -2900,22 +2927,33 @@ class WebsyNavigationMenu {
           <span class='selected-bar'></span>
         `
       }
-      if (this.options.activeSymbol === 'triangle') {
-        html += `
-          <span class='active-square'></span>
-        `
-      }
-      html += `          
-          <span class='${items[i].items && items[i].items.length > 0 ? 'menu-carat' : ''}'></span>
-      `
       if (this.options.orientation === 'vertical') {
         // html += `
         //   &nbsp;
         // `
       }
       if (items[i].isLink === true && items[i].href) {
-        html += `<a href='${items[i].href}'>${items[i].text}</a>`
-      }  
+        html += `<a href='${items[i].href}' target='${items[i].openInNewTab ? 'blank' : '_self'}'>`
+      }        
+      if (items[i].icon) {
+        html += `
+          <div class='websy-menu-item-icon'>${items[i].icon}</div>
+        `
+      }
+      html += `<span>${items[i].text}</span>`
+      if (items[i].isLink === true && items[i].href) {
+        html += `</a>`
+      }
+      if (items[i].items && items[i].items.length > 0) {
+        html += `          
+          <span class='menu-carat'></span>
+        ` 
+      }      
+      if (this.options.activeSymbol === 'triangle') {
+        html += `
+          <span class='active-square'></span>
+        `
+      }      
       html += `    
 				</div>
 		  `
@@ -8585,7 +8623,7 @@ function recaptchaReadyCallBack () {
 // need a way of initializing these based on environment variables
 function useGoogleRecaptcha (key) {
   const rcs = document.createElement('script')
-  rcs.src = `//www.google.com/recaptcha/api.js?render=${key}`
+  rcs.src = `//www.google.com/recaptcha/api.js`
   document.body.appendChild(rcs)
 }