ceiba-scores/assets/js/main.js

import fullpage from "node_modules/fullpage.js/dist/fullpage.js"

// import { createApp } from 'node_modules/vue/dist/vue.esm-browser.js'
// import App from './App.vue'
// createApp(App).mount('#app')

new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
  navigationPosition: 'left',
  navigation: true,
  paddingTop: '1rem',
  paddingBottom: '1rem',
  fitToSection: false,
  fitToSectionDelay: 10000,
  scrollingSpeed: 1000,
  slidesNavigation: true
});

if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/js/sw.js').then(function(reg) {
      if(reg.installing) {
        console.log('Service worker installing');
      } else if(reg.waiting) {
        console.log('Service worker installed');
      } else if(reg.active) {
        console.log('Service worker active');
      }

    }).catch(function(error) {
      // registration failed
      console.log('Registration failed with ' + error);
    });
  });
}


async function main () {
  const forms = document.getElementsByClassName('form')
  for (const form of forms) {
    const fieldsName = [...new Set(Array.from(form.querySelectorAll("input")).map(item => item.name))]
    const scoreFields = Array.from(form.querySelectorAll(".score"))
    form.addEventListener('change', function() {
      const fieldsValue = fieldsName.map(fieldName => {
        const field = form.querySelector('input[name="' + fieldName + '"]:checked')
        if (field) return field.value
      }).filter(item => item !== undefined)
      if (fieldsName.length == fieldsValue.length) {
        const score = fieldsValue.reduce((accumulator, curr) => parseInt(accumulator) + parseInt(curr))
        scoreFields.map(item => {
          item.classList.remove('active')
          return item
        }).filter(item => {
          return score >= item.dataset.min && (item.dataset.max == "" || score <= item.dataset.max)
        }).map(item => {
          item.classList.add('active')
          Array.from(item.getElementsByClassName('score_' + form.dataset.id)).map(item => item.innerHTML = score)
        })
      }
      var all = form.querySelectorAll("input")
      const scoreField = document.getElementsByClassName('score_' + form.dataset.id)
      var score = 0
      for (let field of all) {
        if (field.type != "submit" && field.type != "button") {
          if (field.type=="radio" || field.type=="checkbox") {
            if (field.checked) {
              score = score + parseInt(field.value)
            }
          }
        }
      }
      scoreField.innerHTML = score
    });
  }
}

main()