decision_tree_library
Version:
Decision tree library.
2 lines (1 loc) • 8.25 kB
JavaScript
class DecisionTree{"use strict";constructor(t){this._validation(t);const e=this._loadSteps(t);if(!Array.isArray(e))throw new Error("Please follow proper HTML structure.");this.config={id:t,first_step:e[0],steps:e},this.storage=this._loadStorage(t),this.activate(),document.querySelectorAll("#"+t+" .step .step__answer").forEach((function(t){t.hasAttribute("href")&&t.addEventListener("click",(()=>{this.trackAnswer(t.attributes.href.value.replace("#",""),!!t.hasAttribute("data-answer-path")&&t.attributes["data-answer-path"].value)}))}),this)}_loadSteps(t){const e=[];return document.querySelector("#"+t).querySelectorAll(".step").forEach((function(t,i){e.push(t.id)})),e.length<1&&console.warn("Decision tree should have at least one step."),e}_validateHistory(t){const e=t[this.config.id].history??"",i=this.config.steps?this.config.steps:this._loadSteps(this.config.id);if(e.length>0&&i.length>0){!1===e.every((function(t){return-1!==i.indexOf(t)}))&&(t[this.config.id].history=[this.config.first_step],t[this.config.id].active=this.config.first_step,this.storage=t,this._saveStorage())}return t}_loadStorage(t){let e=JSON.parse(localStorage.getItem(t))||{};return void 0!==e[this.config.id]?(e=this._validateHistory(e),e[this.config.id]):{first_step:this.config.first_step,active:this.config.first_step,history:[this.config.first_step]}}_saveStorage(){let t=JSON.parse(localStorage.getItem(this.config.id))||{};t[this.config.id]=this.storage,this.storage.active&&this.storage.history||(t={}),localStorage.setItem(this.config.id,JSON.stringify(t))}_validation(t){document.querySelector("#"+t).querySelectorAll(".step").forEach((function(e,i){e.hasAttribute("id")||console.warn("One of your steps in decision tree with ID "+t+" does not have ID element filled.")})),document.querySelector("#"+t).querySelectorAll(".step__answer").forEach((function(e,i){e.hasAttribute("href")||console.warn("One of your answers in decision tree id "+t+" does not have href filled."),e.hasAttribute("data-answer-path")||console.warn("One of your answers in decision tree id "+t+" does not have data-answer-path filled.")}))}_showSummary(){this._cleanHTML();const t=document.querySelector("#"+this.config.id+" #"+this.storage.active).hasAttribute("data-show-summary");if(this.storage.active){var e=document.querySelector("#"+this.config.id+" #"+this.storage.active+" .step__answer");null!=e&&(e=e.innerHTML.replace(/<\!--.*?-->/g,"").trim().length)}if(0===e||null==e||t){this.show("#"+this.config.id+" .decision-tree__summary");let t="";if(this.storage.history){this.storage.history.slice().forEach((e=>{document.querySelector("#"+this.config.id+" #"+e+" .step__info")&&(t+=document.querySelector("#"+this.config.id+" #"+e+" .step__info").innerHTML)}));const e=document.querySelector("#"+this.config.id+" .decision-tree__summary");if(e&&e.nodeType)if(null!==e.querySelector(".decision-tree__summary_infos"))e.querySelector(".decision-tree__summary_infos").innerHTML=t;else{const i=document.createElement("div");i.classList.add("decision-tree__summary_infos"),i.innerHTML=t,e.appendChild(i),this.filter()}else console.warn("Your decision tree with ID "+this.config.id+" does not have element with class decision-tree__summary.")}else this.hide("#"+this.config.id+" .decision-tree__summary")}}_cleanHTML(){document.querySelectorAll("#"+this.config.id+" .decision-tree__summary_infos *").forEach((function(t){t.remove()})),document.querySelectorAll("#"+this.config.id+" .decision-tree__summary").forEach((t=>{t.removeAttribute("style")}))}activate(){try{if(this.trackGA(this.storage.active+"/"),document.querySelectorAll("#"+this.config.id+".step").forEach((t=>{this.hide(t)})),this.toggleFooter(),!document.querySelector("#"+this.config.id+" .decision-tree__summary")){const t=document.createElement("div");t.classList.add("decision-tree__summary"),document.querySelector("#"+this.config.id+" .decision-tree__footer").prepend(t)}this.show("#"+this.config.id+" #"+this.storage.active),this._showSummary(),this.filter(),document.querySelector("#"+this.config.id+" .decision-tree__footer .step__button--back").onclick=()=>{this.trackBackButton()},document.querySelector("#"+this.config.id+" .decision-tree__footer .step__button--restart").onclick=()=>{this.trackRestartButton()},document.querySelector("#"+this.config.id).classList.add("dt-initialized"),this._saveStorage()}catch(t){this.hide("#"+this.config.id),console.warn("Cannot activate decision tree with ID "+this.config.id+". Incorrect HTML structure.")}}hide(t){try{if("string"==typeof t&&(t=document.querySelector(t)),t&&t.nodeType)return t.style.display="none",!0}catch(t){console.warn("Please check decision tree with ID "+this.config.id+". Incorrect HTML structure.")}return!1}show(t){try{if("string"==typeof t&&(t=document.querySelector(t)),t&&t.nodeType)return t.style.display="block",!0}catch(t){console.warn("Please check decision tree "+this.config.id+". Incorrect HTML structure.")}return!1}filter(){document.querySelectorAll("#"+this.config.id+" .decision-tree__summary li").forEach((t=>{let e=!0;if(t.hasAttribute("data-pass-filter")){const i=t.attributes["data-pass-filter"].value.split(",");e=i.every((t=>this.is_in_history(t.trim())))}if(t.hasAttribute("data-stop-filter")){t.attributes["data-stop-filter"].value.split(",").forEach((t=>{const i=this.is_in_history(t.trim());!0===e&&!0===i&&(e=!1)}))}!1===e?this.hide(t):this.show(t)}))}is_in_history(t){return t.split(" ").every((t=>this.storage.history.includes(t)))}toggleFooter(){if(!document.querySelector("#"+this.config.id+" .decision-tree__footer")){const t=document.createElement("div");t.classList.add("decision-tree__footer"),t.innerHTML="<button class='step__button step__button--back'>Back</button>\n<button class='step__button step__button--restart'>Restart</button>",document.querySelector("#"+this.config.id).appendChild(t)}this.storage.history&&this.storage.history.length>1?this.show("#"+this.config.id+" .decision-tree__footer"):this.hide("#"+this.config.id+" .decision-tree__footer")}trackAnswer(t,e){e&&this.trackGA(this.storage.active+"/"+e),this.hide("#"+this.config.id+" #"+this.storage.active),this.show("#"+this.config.id+" #"+t),this.trackGA(t+"/"),this.storage.active=t,this.storage.history.push(this.storage.active),this._saveStorage(this.config.id),this.trackAttribute(t),this._showSummary(),this.toggleFooter()}trackBackButton(){if(this.storage.history.length<=1)return;this.hide("#"+this.config.id+" #"+this.storage.active);const t=this.storage.history[this.storage.history.length-2];this.show("#"+this.config.id+" #"+t),this.trackGA(t+"/back"),this.hide("#"+this.config.id+" #"+this.storage.active+" .step__info"),this._cleanHTML(),this.storage.active=t,this.storage.history.pop(),this._saveStorage(),this.trackAttribute(this.storage.active),this.toggleFooter()}trackRestartButton(){this.hide("#"+this.config.id+" #"+this.storage.active),this.trackGA(this.storage.active+"/restart"),this.storage.active=this.config.first_step,this.show("#"+this.config.id+" #"+this.storage.active),this.trackGA(this.storage.active),this.storage.history=[this.config.first_step],this._saveStorage(),this.trackAttribute(this.storage.active),this.toggleFooter(),this._cleanHTML()}trackAttribute(t){const e=document.querySelector("#"+this.config.id+" #"+t);null!=e&&e.hasAttribute("data-cookie")&&this.cookie(e.attributes["data-cookie"].value)}trackGA(t){"function"==typeof gtag&&"undefined"!==drupalSettings.google_analytics?gtag("config",drupalSettings.google_analytics.account,{page_path:window.location.href+this.config.id+"/"+t}):"function"==typeof ga&&null!==ga.getAll()[0].get("clientId")&&null!==ga.getAll()[0].get("trackingId")&&(ga("create",ga.getAll()[0].get("trackingId"),{clientId:ga.getAll()[0].get("clientId")}),ga("send","pageview",window.location.href+this.config.id+"/"+t))}cookie(t,e,i){let s;if(i){const t=new Date;t.setTime(t.getTime()+24*i*60*60*1e3),s=" expires="+t.toGMTString()}else s="";document.cookie=encodeURIComponent(t)+"="+encodeURIComponent(e)+s+" path=/ SameSite=None Secure"}}document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll(".decision-tree").forEach((function(t){t.hasAttribute("id")?new DecisionTree(t.id):console.warn("Decision tree does not have ID.")}))}),!1);