@websy/websy-designs 1.4.15 → 1.4.17

package/dist/websy-designs.debug.js

@@ -198,7 +198,7 @@ class ButtonGroup {
         }
         this.options.activeItem = index
         if (this.options.onActivate) {
-          this.options.onActivate(this.options.items[index], index)
+          this.options.onActivate(this.options.items[index], index, event)
         }
         const el = document.getElementById(this.elementId)
         let buttons = Array.from(el.querySelectorAll('.websy-button-group-item'))
@@ -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')
+          }
         }        
       })         
     }    
@@ -2776,6 +2797,12 @@ class WebsyNavigationMenu {
         event.target.classList.toggle('menu-open')
         this.toggleMenu(item.id)
       }
+      else {
+        const el = document.getElementById(this.elementId)
+        const allEls = el.querySelectorAll('.websy-menu-header')
+        Array.from(allEls).forEach(e => e.classList.remove('active'))
+        event.target.classList.add('active')
+      }      
     }    
     if (event.target.classList.contains('websy-menu-mask')) {
       this.toggleMobileMenu()
@@ -2859,6 +2886,23 @@ class WebsyNavigationMenu {
         html += `</div>`
       }
       el.innerHTML = html
+      // open the menu if an item is set as 'active'
+      const activeEl = el.querySelector('.websy-menu-header.active')
+      if (activeEl) {
+        let parent = activeEl.parentElement
+        while (parent) {
+          if (parent.tagName === 'UL') {
+            parent.classList.remove('websy-menu-collapsed')
+            parent = parent.parentElement
+          }
+          else if (parent.tagName === 'LI') {
+            parent = parent.parentElement
+          }
+          else {
+            parent = null
+          }
+        }
+      }
       if (this.options.enableSearch === true) {
         this.search = new WebsyDesigns.Search(`${this.elementId}_search`, Object.assign({}, {
           onSearch: this.handleSearch.bind(this),
@@ -2887,7 +2931,7 @@ class WebsyNavigationMenu {
       }
       html += `
 			<li class='websy-${this.options.orientation}-list-item ${items[i].alwaysOpen === true ? 'always-open' : ''}'>
-				<div class='websy-menu-header ${items[i].classes || ''} ${selected} ${active}' 
+				<div class='websy-menu-header websy-menu-level-${level} ${items[i].classes || ''} ${selected} ${active}' 
           id='${blockId}' 
           data-id='${currentBlock}'
           data-path='${items[i].path}'
@@ -8602,7 +8646,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)
 }