File size: 4,538 Bytes
a8e2f82 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
document.addEventListener('DOMContentLoaded', () => {
const items = { ...localStorage };
const isAuthed = items?.token;
const wdgt = {
idBox: 'wdgt',
url_widget: 'https://next-starter.thirdweb-example.com/',
url_style: 'http://localhost:8080/css/widget.css',
init: function (identifier, byClass = false) {
console.log("Begin Widget initialization");
const observer = new MutationObserver((mutations, observer) => {
let elements = [];
if (byClass) {
elements = document.querySelectorAll(`.${identifier}`);
console.log(`Looking for elements by class: .${identifier}`);
} else {
const element = document.getElementById(identifier || this.idBox);
if (element) {
elements.push(element);
}
console.log(`Looking for element by ID: #${identifier || this.idBox}`);
}
console.log(`Found elements:`, elements);
if (elements.length > 0 && elements[0] != null) {
observer.disconnect(); // Stop observing once elements are found
try {
const XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
const xhr = new XHR();
xhr.open('GET', this.url_widget, true);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
elements.forEach(element => {
element.innerHTML = this.responseText;
});
} else {
console.error('Failed to load widget content. Status:', this.status);
}
};
xhr.onerror = function () {
console.error('onerror', this.status);
};
xhr.send();
} catch (error) {
console.error('Error loading widget:', error);
}
}
});
// Start observing the document body for changes
observer.observe(document.body, { childList: true, subtree: true });
// Initial check in case the elements are already present
let elements = [];
if (byClass) {
elements = document.querySelectorAll(`.${identifier}`);
} else {
const element = document.getElementById(identifier || this.idBox);
if (element) {
elements.push(element);
}
}
if (elements.length > 0 && elements[0] != null) {
observer.disconnect(); // Stop observing if elements are found initially
try {
const XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
const xhr = new XHR();
xhr.open('GET', this.url_widget, true);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
elements.forEach(element => {
element.innerHTML = this.responseText;
});
} else {
console.error('Failed to load widget content. Status:', this.status);
}
};
xhr.onerror = function () {
console.error('onerror', this.status);
};
xhr.send();
} catch (error) {
console.error('Error loading widget:', error);
}
}
},
addStyle: function () {
const style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = this.url_style;
document.head.appendChild(style);
}
};
if (isAuthed) {
// alert('You are authed');
} else {
// alert('You are not authed');
// wdgt.init('root', false); // Change 'true' to 'false' if you want to use an ID instead of class
}
});
|