kwipped_approve = kwipped_approve || {}; kwipped_approve.button_definition = {}; //********************************************************************** //* APPROVE button template definition //* IMPORTANT - The actual button code will be dropped in place by blade. //**********************************************************************ß kwipped_approve.button_definition.template = document.createElement('template'); kwipped_approve.button_definition.template.innerHTML = /*html*/`
Finance with
As low as
$365/mo
Commercial Financing | Lenders Compete
`; /** * Standard HTML costomElement registry. This will create our approve button, based on the template created * above this code. */ customElements.define('approve-button', class extends HTMLElement { //Instance variables items = []; core_loaded = false; teaser_waiting_on_core_loading = false; settings = {}; current_properties = null; /** * Called when the custom element is instantiated. It will build custom element content, attach it to a * shadowRoot, attach proper listeners, stc. */ constructor() { super(); // always call super() first in the constructor. // Attach a shadow root to the element. kwipped_approve.button_definition.shadow_root = this.attachShadow({mode: 'open'}); var clone = kwipped_approve.button_definition.template.content.cloneNode(true); kwipped_approve.button_definition.shadow_root.appendChild(clone); var self = this; //Button action. Must dispatch event and listen to event because of scoping. var button = this.shadowRoot.querySelector('[button]'); if(button){ button.addEventListener('click',function(){ button.getRootNode().dispatchEvent(new Event('approve_button_clicked')); document.dispatchEvent(new CustomEvent('approve_button_clicked',{detail:{button_reference:this}})); }); } this.shadowRoot.addEventListener('approve_button_clicked',function(){self.take_action()},false); //Learn more action. Must dispatch event and listen to event because of scoping. var learn_more = this.shadowRoot.querySelector('[learn-more]'); if(learn_more){ learn_more.addEventListener('click',function(){ learn_more.getRootNode().dispatchEvent(new Event('approve_learn_more')); }); } this.shadowRoot.addEventListener('approve_learn_more',function(){self.open_learn_more()},false); this.load_settings(); if(!this.settings.skip_initial_loader) this.show_loader(); var self = this; //When approve_core loads, it will emmit a message on the document announcing it is ready for use. f this //button loaded before the approve_core code was ready to go, it should check if it is in a waiting state //to retrieve a teaser. window.document.addEventListener('approve_core_loaded', function (e) { self.core_loaded = true; if(self.teaser_waiting_on_core_loading){ self.get_teaser(); self.teaser_waiting_on_core_loading = false; } }, false); } /** * List of attributes we are observing. */ static get observedAttributes() { return ['price','model','qty','type','items']; } /** * Listens fo attribute changes, and takes necessary action. See list of attributes we are observing. * At an initial state, the button may have all properties set, but this function will still be called once per property. Fot this reason, * I have conde to make sure we are not making unecessary calls. Namely, I use the current_properties variable to save the last property configuration, * and see if any changes were made. */ attributeChangedCallback(name, oldValue, newValue){ //If we have a list of items, it will override any other button entries. var items_sring = this.getAttribute('items'); var items = null; if(items_sring){ try{ items = JSON.parse(items_sring); } catch{ console.error("APPROVE Button:The items list provided does not follow the required specification. Could not parse items.") this.items = []; return; } if(!items){ console.error("APPROVE Button:The items list provided does not follow the required specification. Items is empty.") this.items = []; return; } for(var i=0; i