@@ -153,13 +160,10 @@ class LoadingManager {
`;
- if (typeof target === 'string') {
- target = document.querySelector(target);
- }
-
- target.style.position = 'relative';
- target.appendChild(loader);
- this.activeLoaders.add(loaderId);
+ const targetElement = typeof target === 'string' ? document.querySelector(target) : target;
+ targetElement.style.position = 'relative';
+ targetElement.appendChild(loader);
+ this.activeLoaders.set(loaderId, { element: loader, target: targetElement });
requestAnimationFrame(() => {
loader.classList.add('loading-overlay--visible');
@@ -169,39 +173,34 @@ class LoadingManager {
}
hide(target, loaderId) {
- if (typeof target === 'string') {
- target = document.querySelector(target);
- }
-
- const loader = target.querySelector(`[data-loader-id="${loaderId}"]`);
+ const targetElement = typeof target === 'string' ? document.querySelector(target) : target;
+ const loader = targetElement.querySelector(`[data-loader-id="${loaderId}"]`);
+
if (loader) {
loader.classList.add('loading-overlay--hiding');
this.activeLoaders.delete(loaderId);
setTimeout(() => {
if (loader.parentNode) {
- target.removeChild(loader);
+ targetElement.removeChild(loader);
}
}, 300);
}
}
hideAll() {
- this.activeLoaders.forEach(id => {
- const loader = document.querySelector(`[data-loader-id="${id}"]`);
- if (loader) {
- this.hide(loader.parentNode, id);
- }
+ this.activeLoaders.forEach(({ element, target }, id) => {
+ this.hide(target, id);
});
}
}
-// Enhanced table manager with advanced features
+// Enhanced table manager with optimized rendering
class TableManager {
constructor(containerId, searchInputId, clearIconId, options = {}) {
- this.container = document.querySelector(`#${containerId}`);
- this.searchInput = document.querySelector(`#${searchInputId}`);
- this.clearIcon = document.querySelector(`#${clearIconId}`);
+ this.container = document.getElementById(containerId);
+ this.searchInput = document.getElementById(searchInputId);
+ this.clearIcon = document.getElementById(clearIconId);
this.options = {
sortable: true,
filterable: true,
@@ -270,7 +269,7 @@ class TableManager {
|
- ${host}
+ ${this._escapeHtml(host)}
|
${providers.map(provider => `
@@ -288,6 +287,17 @@ class TableManager {
`).join('');
}
+ _escapeHtml(text) {
+ const map = {
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": '''
+ };
+ return text.replace(/[&<>"']/g, m => map[m]);
+ }
+
_setupSearchFunctionality() {
const handleSearch = Utils.debounce(() => {
const searchTerm = this.searchInput.value.toLowerCase().trim();
@@ -365,7 +375,7 @@ class TableManager {
}
_handleSort(header) {
- const column = header.getAttribute('data-column');
+ const column = header.dataset.column;
const currentDirection = this.currentSort.column === column ? this.currentSort.direction : 'asc';
const newDirection = currentDirection === 'asc' ? 'desc' : 'asc';
@@ -450,12 +460,12 @@ class TableManager {
}
}
-// Enhanced comparison manager
+// Enhanced comparison manager with optimized rendering
class ComparisonManager {
constructor(containerId, select1Id, select2Id, data) {
- this.container = document.querySelector(`#${containerId}`);
- this.select1 = document.querySelector(`#${select1Id}`);
- this.select2 = document.querySelector(`#${select2Id}`);
+ this.container = document.getElementById(containerId);
+ this.select1 = document.getElementById(select1Id);
+ this.select2 = document.getElementById(select2Id);
this.data = data;
this.isComparing = false;
@@ -514,18 +524,18 @@ class ComparisonManager {
this.container.innerHTML = `