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 for as low as
$365
/mo
Powered By
`;
/**
* 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