1140 lines
No EOL
42 KiB
JavaScript
1140 lines
No EOL
42 KiB
JavaScript
/**
|
|
* Debrid Services Comparison - Improved App JS
|
|
* - Data loading (file hosts, adult hosts, pricing)
|
|
* - Tables, comparison, pricing interactions
|
|
* - Age verification overlay (focus trap + inert)
|
|
* - Back-to-top, nav highlight, animations, offline detection
|
|
* - Performance-minded DOM updates and event delegation
|
|
*/
|
|
|
|
/* ==============================
|
|
Utils
|
|
============================== */
|
|
const Utils = (() => {
|
|
const debounceMap = new WeakMap();
|
|
return {
|
|
debounce(func, wait = 300, immediate = false) {
|
|
if (debounceMap.has(func)) return debounceMap.get(func);
|
|
let timeout;
|
|
const debounced = function (...args) {
|
|
const callNow = immediate && !timeout;
|
|
clearTimeout(timeout);
|
|
if (callNow) func.apply(this, args);
|
|
timeout = setTimeout(() => {
|
|
timeout = null;
|
|
if (!immediate) func.apply(this, args);
|
|
}, wait);
|
|
};
|
|
debounceMap.set(func, debounced);
|
|
return debounced;
|
|
},
|
|
throttle(func, limit = 100) {
|
|
let inThrottle = false;
|
|
return function (...args) {
|
|
if (!inThrottle) {
|
|
func.apply(this, args);
|
|
inThrottle = true;
|
|
requestAnimationFrame(() => {
|
|
setTimeout(() => inThrottle = false, limit);
|
|
});
|
|
}
|
|
};
|
|
},
|
|
animateOnScroll: (() => {
|
|
let observer;
|
|
return (elements, options = {}) => {
|
|
if (!('IntersectionObserver' in window)) return;
|
|
if (!observer) {
|
|
observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add("animate-in");
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: "0px 0px -50px 0px",
|
|
...options
|
|
});
|
|
}
|
|
elements.forEach((element) => observer.observe(element));
|
|
};
|
|
})()
|
|
};
|
|
})();
|
|
|
|
class LoadingManager {
|
|
constructor() {
|
|
this.activeLoaders = new Map();
|
|
this.template = this.createTemplate();
|
|
}
|
|
|
|
createTemplate() {
|
|
const template = document.createElement("template");
|
|
template.innerHTML = `
|
|
<div class="loading-overlay">
|
|
<div class="loading-content">
|
|
<div class="loading-spinner">
|
|
<div class="spinner-ring"></div>
|
|
<div class="spinner-ring"></div>
|
|
<div class="spinner-ring"></div>
|
|
</div>
|
|
<p class="loading-text"></p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
return template;
|
|
}
|
|
|
|
show(target, text = "Loading...") {
|
|
const element = typeof target === "string" ? document.querySelector(target) : target;
|
|
if (!element) return null;
|
|
|
|
const loaderId = `loader-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
|
const loaderElement = this.template.content.cloneNode(true).firstElementChild;
|
|
loaderElement.dataset.loaderId = loaderId;
|
|
loaderElement.querySelector(".loading-text").textContent = text;
|
|
|
|
const computedStyle = getComputedStyle(element);
|
|
if (computedStyle.position === "static") {
|
|
element.style.position = "relative";
|
|
}
|
|
|
|
element.appendChild(loaderElement);
|
|
this.activeLoaders.set(loaderId, loaderElement);
|
|
|
|
requestAnimationFrame(() => loaderElement.classList.add("loading-overlay--visible"));
|
|
return loaderId;
|
|
}
|
|
|
|
hide(target, loaderId) {
|
|
const loaderElement = this.activeLoaders.get(loaderId);
|
|
if (loaderElement) {
|
|
loaderElement.classList.add("loading-overlay--hiding");
|
|
this.activeLoaders.delete(loaderId);
|
|
setTimeout(() => loaderElement.remove(), 250);
|
|
}
|
|
}
|
|
|
|
hideAll() {
|
|
this.activeLoaders.forEach((_, loaderId) => this.hide(null, loaderId));
|
|
}
|
|
}
|
|
|
|
class TableManager {
|
|
constructor(containerId, searchInputId, clearIconId, options = {}) {
|
|
this.elements = {
|
|
container: document.getElementById(containerId),
|
|
searchInput: document.getElementById(searchInputId),
|
|
clearIcon: document.getElementById(clearIconId)
|
|
};
|
|
|
|
this.options = {
|
|
sortable: true,
|
|
filterable: true,
|
|
pagination: false,
|
|
itemsPerPage: 50,
|
|
...options
|
|
};
|
|
|
|
this.state = {
|
|
currentData: {},
|
|
filteredData: {},
|
|
currentSort: { column: null, direction: "asc" },
|
|
currentPage: 1,
|
|
services: [], // Store services array for indexed format
|
|
isIndexedFormat: false // Flag to track data format
|
|
};
|
|
|
|
this.handleSearch = Utils.debounce(this._performSearch.bind(this), 250);
|
|
this.handleSort = this._performSort.bind(this);
|
|
this._init();
|
|
}
|
|
|
|
_init() {
|
|
if (this.elements.searchInput) {
|
|
this.elements.searchInput.addEventListener("input", this.handleSearch);
|
|
this.elements.searchInput.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") this._clearSearch();
|
|
});
|
|
}
|
|
|
|
if (this.elements.clearIcon) {
|
|
this.elements.clearIcon.addEventListener("click", () => this._clearSearch());
|
|
}
|
|
}
|
|
|
|
// New method to transform indexed data to regular format
|
|
_transformIndexedData(indexedData) {
|
|
const { services, supported } = indexedData;
|
|
const transformed = {};
|
|
|
|
for (const [host, supportedIndices] of Object.entries(supported)) {
|
|
transformed[host] = {};
|
|
services.forEach((service, index) => {
|
|
transformed[host][service] = supportedIndices.includes(index) ? "yes" : "no";
|
|
});
|
|
}
|
|
|
|
// Store services for later use
|
|
this.state.services = services;
|
|
this.state.isIndexedFormat = true;
|
|
|
|
return transformed;
|
|
}
|
|
|
|
// Modified method to handle both formats
|
|
generateTable(data = {}) {
|
|
if (!this.elements.container) return;
|
|
|
|
// Handle both old and new indexed formats
|
|
let processedData;
|
|
if (data.services && data.supported) {
|
|
// New indexed format
|
|
processedData = this._transformIndexedData(data);
|
|
} else {
|
|
// Old format
|
|
processedData = data;
|
|
this.state.isIndexedFormat = false;
|
|
// Try to extract services from first entry
|
|
const firstHost = Object.values(processedData)[0];
|
|
this.state.services = firstHost ? Object.keys(firstHost) : [];
|
|
}
|
|
|
|
if (!Object.keys(processedData).length) {
|
|
this.elements.container.innerHTML = '<div class="empty-state"><p>No data available.</p></div>';
|
|
return;
|
|
}
|
|
|
|
this.state.currentData = processedData;
|
|
this.state.filteredData = { ...processedData };
|
|
|
|
const firstHostKey = Object.keys(processedData)[0];
|
|
const columns = firstHostKey ? Object.keys(processedData[firstHostKey]) : [];
|
|
const tableId = this.elements.container.id.replace("-container", "");
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
const wrapper = document.createElement("div");
|
|
wrapper.className = "table-wrapper";
|
|
|
|
const table = document.createElement("table");
|
|
table.id = tableId;
|
|
table.className = "enhanced-table";
|
|
table.setAttribute("aria-label", "Service Comparison Table");
|
|
|
|
const thead = document.createElement("thead");
|
|
thead.innerHTML = this._generateTableHeader(columns);
|
|
table.appendChild(thead);
|
|
|
|
const tbody = document.createElement("tbody");
|
|
tbody.innerHTML = this._generateTableRows(this.state.filteredData, columns);
|
|
table.appendChild(tbody);
|
|
|
|
wrapper.appendChild(table);
|
|
fragment.appendChild(wrapper);
|
|
|
|
this.elements.container.innerHTML = "";
|
|
this.elements.container.appendChild(fragment);
|
|
|
|
this._attachTableEvents();
|
|
}
|
|
|
|
_generateTableHeader(columns) {
|
|
return `
|
|
<tr>
|
|
<th class="sortable" data-column="service" tabindex="0" role="columnheader" aria-sort="none">
|
|
<span>Service Name</span>
|
|
<svg class="sort-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M12 5v14M5 12l7-7 7 7"/>
|
|
</svg>
|
|
</th>
|
|
${columns.map(column => `
|
|
<th class="sortable" data-column="${column}" tabindex="0" role="columnheader" aria-sort="none">
|
|
<span>${column}</span>
|
|
<svg class="sort-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M12 5v14M5 12l7-7 7 7"/>
|
|
</svg>
|
|
</th>
|
|
`).join("")}
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
_generateTableRows(data, columns) {
|
|
const rows = [];
|
|
for (const [host, hostData] of Object.entries(data)) {
|
|
rows.push(`
|
|
<tr data-host="${host.toLowerCase()}" role="row">
|
|
<td class="service-cell" role="gridcell">
|
|
<div class="service-info">
|
|
<span class="service-name">${host}</span>
|
|
</div>
|
|
</td>
|
|
${columns.map(column => {
|
|
const isSupported = hostData[column] === "yes";
|
|
return `
|
|
<td class="status-cell" role="gridcell" data-status="${hostData[column]}">
|
|
<span class="status-indicator ${isSupported ? "supported" : "not-supported"}" aria-label="${isSupported ? "Supported" : "Not supported"}">
|
|
${isSupported ?
|
|
'<svg class="table-check" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline></svg>' :
|
|
'<svg class="table-cross" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>'
|
|
}
|
|
</span>
|
|
</td>
|
|
`;
|
|
}).join("")}
|
|
</tr>
|
|
`);
|
|
}
|
|
return rows.join("");
|
|
}
|
|
|
|
_attachTableEvents() {
|
|
if (!this.options.sortable) return;
|
|
|
|
const thead = this.elements.container.querySelector("thead");
|
|
if (thead) {
|
|
thead.addEventListener("click", this.handleSort);
|
|
thead.addEventListener("keydown", (e) => {
|
|
const sortableHeader = e.target.closest(".sortable");
|
|
if (sortableHeader && (e.key === "Enter" || e.key === " ")) {
|
|
e.preventDefault();
|
|
this.handleSort({ target: sortableHeader });
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
_performSearch() {
|
|
const searchTerm = (this.elements.searchInput?.value || "").toLowerCase().trim();
|
|
|
|
if (searchTerm) {
|
|
this.state.filteredData = Object.fromEntries(
|
|
Object.entries(this.state.currentData).filter(([host]) =>
|
|
host.toLowerCase().includes(searchTerm)
|
|
)
|
|
);
|
|
if (this.elements.clearIcon) {
|
|
this.elements.clearIcon.style.display = "block";
|
|
}
|
|
} else {
|
|
this.state.filteredData = { ...this.state.currentData };
|
|
if (this.elements.clearIcon) {
|
|
this.elements.clearIcon.style.display = "none";
|
|
}
|
|
}
|
|
|
|
this._updateTableContent();
|
|
this._updateSearchResults(searchTerm);
|
|
}
|
|
|
|
_clearSearch() {
|
|
if (this.elements.searchInput) {
|
|
this.elements.searchInput.value = "";
|
|
}
|
|
this.state.filteredData = { ...this.state.currentData };
|
|
if (this.elements.clearIcon) {
|
|
this.elements.clearIcon.style.display = "none";
|
|
}
|
|
this._updateTableContent();
|
|
this._updateSearchResults("");
|
|
}
|
|
|
|
_updateSearchResults(searchTerm) {
|
|
if (!this.elements.container) return;
|
|
|
|
let resultsElement = this.elements.container.querySelector(".search-results");
|
|
|
|
if (searchTerm) {
|
|
const filteredCount = Object.keys(this.state.filteredData).length;
|
|
const totalCount = Object.keys(this.state.currentData).length;
|
|
|
|
if (!resultsElement) {
|
|
resultsElement = document.createElement("div");
|
|
resultsElement.className = "search-results";
|
|
this.elements.container.insertBefore(resultsElement, this.elements.container.firstChild);
|
|
}
|
|
|
|
resultsElement.textContent = `Showing ${filteredCount} of ${totalCount} services`;
|
|
resultsElement.style.display = "block";
|
|
resultsElement.style.textAlign = "center";
|
|
resultsElement.style.padding = "0.5em 0";
|
|
} else if (resultsElement) {
|
|
resultsElement.style.display = "none";
|
|
}
|
|
}
|
|
|
|
_performSort(event) {
|
|
const sortableHeader = event.target.closest(".sortable");
|
|
if (!sortableHeader) return;
|
|
|
|
const column = sortableHeader.dataset.column;
|
|
const { currentSort } = this.state;
|
|
const direction = currentSort.column === column && currentSort.direction === "asc" ? "desc" : "asc";
|
|
|
|
this.state.currentSort = { column, direction };
|
|
|
|
// Update UI
|
|
this.elements.container.querySelectorAll("th.sortable").forEach(header => {
|
|
header.setAttribute("aria-sort", "none");
|
|
header.classList.remove("sorted-asc", "sorted-desc");
|
|
});
|
|
|
|
sortableHeader.setAttribute("aria-sort", direction === "asc" ? "ascending" : "descending");
|
|
sortableHeader.classList.add(`sorted-${direction}`);
|
|
|
|
this._sortData();
|
|
this._updateTableContent();
|
|
}
|
|
|
|
_sortData() {
|
|
const { column, direction } = this.state.currentSort;
|
|
const entries = Object.entries(this.state.filteredData);
|
|
|
|
entries.sort(([hostA, dataA], [hostB, dataB]) => {
|
|
let valueA, valueB;
|
|
|
|
if (column === "service") {
|
|
valueA = hostA.toLowerCase();
|
|
valueB = hostB.toLowerCase();
|
|
} else {
|
|
// Convert "yes"/"no" to numeric values for sorting
|
|
valueA = dataA[column] === "yes" ? 1 : 0;
|
|
valueB = dataB[column] === "yes" ? 1 : 0;
|
|
}
|
|
|
|
let comparison = 0;
|
|
if (valueA > valueB) comparison = 1;
|
|
else if (valueA < valueB) comparison = -1;
|
|
|
|
return direction === "asc" ? comparison : -comparison;
|
|
});
|
|
|
|
this.state.filteredData = Object.fromEntries(entries);
|
|
}
|
|
|
|
_updateTableContent() {
|
|
const tbody = this.elements.container.querySelector("tbody");
|
|
if (!tbody) return;
|
|
|
|
const firstHostKey = Object.keys(this.state.currentData)[0];
|
|
const columns = firstHostKey ? Object.keys(this.state.currentData[firstHostKey]) : [];
|
|
|
|
requestAnimationFrame(() => {
|
|
tbody.innerHTML = this._generateTableRows(this.state.filteredData, columns);
|
|
});
|
|
}
|
|
}
|
|
|
|
/* ==============================
|
|
Comparison Manager
|
|
============================== */
|
|
class ComparisonManager {
|
|
constructor(containerId, select1Id, select2Id, data) {
|
|
this.elements = {
|
|
container: document.getElementById(containerId),
|
|
select1: document.getElementById(select1Id),
|
|
select2: document.getElementById(select2Id)
|
|
};
|
|
|
|
this.data = data;
|
|
this.isComparing = false;
|
|
this.handleCompare = this._generateCompareTable.bind(this);
|
|
this.services = []; // Store services array for indexed format
|
|
|
|
// Check if data is in indexed format
|
|
if (data.services && data.supported) {
|
|
this.services = data.services;
|
|
this.isIndexedFormat = true;
|
|
} else {
|
|
// Extract services from regular format
|
|
const firstHost = Object.values(data)[0];
|
|
this.services = firstHost ? Object.keys(firstHost) : [];
|
|
this.isIndexedFormat = false;
|
|
}
|
|
|
|
this._init();
|
|
}
|
|
|
|
_init() {
|
|
this._populateDropdowns();
|
|
|
|
if (this.elements.select1) {
|
|
this.elements.select1.addEventListener("change", this.handleCompare);
|
|
}
|
|
|
|
if (this.elements.select2) {
|
|
this.elements.select2.addEventListener("change", this.handleCompare);
|
|
}
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (this.isComparing && e.key === "Escape") {
|
|
this._closeComparison();
|
|
}
|
|
});
|
|
}
|
|
|
|
_populateDropdowns() {
|
|
// Use the stored services array
|
|
const optionsHtml = '<option value="">Choose a service...</option>' +
|
|
this.services.map(service =>
|
|
`<option value="${service}">${service}</option>`
|
|
).join("");
|
|
|
|
[this.elements.select1, this.elements.select2].forEach(select => {
|
|
if (select) {
|
|
select.innerHTML = optionsHtml;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Transform indexed data to regular format for comparison
|
|
_getHostData(hostName) {
|
|
if (this.isIndexedFormat) {
|
|
// Convert indexed format to regular format
|
|
const supportedIndices = this.data.supported[hostName] || [];
|
|
const hostData = {};
|
|
this.services.forEach((service, index) => {
|
|
hostData[service] = supportedIndices.includes(index) ? "yes" : "no";
|
|
});
|
|
return hostData;
|
|
} else {
|
|
// Return data as-is for regular format
|
|
return this.data[hostName] || {};
|
|
}
|
|
}
|
|
|
|
_generateCompareTable() {
|
|
const service1 = this.elements.select1?.value;
|
|
const service2 = this.elements.select2?.value;
|
|
|
|
if (!service1 || !service2) {
|
|
this._showEmptyState();
|
|
return;
|
|
}
|
|
|
|
if (service1 === service2) {
|
|
this._showSameProviderWarning();
|
|
return;
|
|
}
|
|
|
|
this.isComparing = true;
|
|
const loaderId = loadingManager.show(this.elements.container, "Generating comparison...");
|
|
|
|
requestAnimationFrame(() => {
|
|
this._renderComparisonTable(service1, service2);
|
|
loadingManager.hide(this.elements.container, loaderId);
|
|
});
|
|
}
|
|
|
|
_renderComparisonTable(service1, service2) {
|
|
const stats = this._calculateComparisonStats(service1, service2);
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
const wrapper = document.createElement("div");
|
|
wrapper.innerHTML = `
|
|
<div class="comparison-header">
|
|
<h3>Comparing ${service1} vs ${service2}</h3>
|
|
<div class="comparison-stats">
|
|
<div class="stat"><span class="stat-label">Shared Support</span><span class="stat-value">${stats.shared}</span></div>
|
|
<div class="stat"><span class="stat-label">${service1} Only</span><span class="stat-value">${stats.service1Only}</span></div>
|
|
<div class="stat"><span class="stat-label">${service2} Only</span><span class="stat-value">${stats.service2Only}</span></div>
|
|
</div>
|
|
<div class="comparison-actions">
|
|
<button id="close-compare" class="btn btn-secondary">
|
|
<span>Close</span>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M18 6L6 18M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison-filters">
|
|
<label class="filter-option">
|
|
<input type="radio" name="comparison-filter" value="all" checked>
|
|
<span>All Services</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="radio" name="comparison-filter" value="both">
|
|
<span>Supported by Both</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="radio" name="comparison-filter" value="different">
|
|
<span>Different Support</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="table-wrapper">
|
|
<table id="compare-table" class="comparison-table" aria-label="Provider Comparison Table">
|
|
<thead>
|
|
<tr>
|
|
<th>Service Name</th>
|
|
<th class="provider-header ${service1.toLowerCase().replace(/\s+/g, '-')}">${service1}</th>
|
|
<th class="provider-header ${service2.toLowerCase().replace(/\s+/g, '-')}">${service2}</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${this._generateComparisonRows(service1, service2)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
|
|
fragment.appendChild(wrapper);
|
|
this.elements.container.innerHTML = "";
|
|
this.elements.container.appendChild(fragment);
|
|
this.elements.container.style.display = "block";
|
|
|
|
this._attachComparisonEvents();
|
|
|
|
requestAnimationFrame(() => {
|
|
this.elements.container.classList.add("comparison-visible");
|
|
});
|
|
}
|
|
|
|
_generateComparisonRows(service1, service2) {
|
|
const rows = [];
|
|
const checkIcon = '<svg class="table-check" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline></svg>';
|
|
const crossIcon = '<svg class="table-cross" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>';
|
|
|
|
// Get all hosts (keys from the original data structure)
|
|
const hosts = this.isIndexedFormat ? Object.keys(this.data.supported) : Object.keys(this.data);
|
|
|
|
for (const host of hosts) {
|
|
const hostData = this._getHostData(host);
|
|
const supported1 = hostData[service1] === "yes";
|
|
const supported2 = hostData[service2] === "yes";
|
|
|
|
let statusClass = "neither-supported";
|
|
let statusText = "Neither";
|
|
|
|
if (supported1 && supported2) {
|
|
statusClass = "both-supported";
|
|
statusText = "Both";
|
|
} else if (supported1) {
|
|
statusClass = "service1-only";
|
|
statusText = `${service1} only`;
|
|
} else if (supported2) {
|
|
statusClass = "service2-only";
|
|
statusText = `${service2} only`;
|
|
}
|
|
|
|
rows.push(`
|
|
<tr class="comparison-row ${statusClass}" data-status="${statusClass}">
|
|
<td class="service-name">${host}</td>
|
|
<td class="support-status ${supported1 ? "supported" : "not-supported"}">
|
|
<span class="status-indicator" aria-label="${supported1 ? "Supported" : "Not supported"}">
|
|
${supported1 ? checkIcon : crossIcon}
|
|
</span>
|
|
</td>
|
|
<td class="support-status ${supported2 ? "supported" : "not-supported"}">
|
|
<span class="status-indicator" aria-label="${supported2 ? "Supported" : "Not supported"}">
|
|
${supported2 ? checkIcon : crossIcon}
|
|
</span>
|
|
</td>
|
|
<td class="status-text"><span class="status-badge ${statusClass}">${statusText}</span></td>
|
|
</tr>
|
|
`);
|
|
}
|
|
|
|
return rows.join("");
|
|
}
|
|
|
|
_calculateComparisonStats(service1, service2) {
|
|
let shared = 0;
|
|
let service1Only = 0;
|
|
let service2Only = 0;
|
|
|
|
// Get all hosts
|
|
const hosts = this.isIndexedFormat ? Object.keys(this.data.supported) : Object.keys(this.data);
|
|
|
|
for (const host of hosts) {
|
|
const hostData = this._getHostData(host);
|
|
const supported1 = hostData[service1] === "yes";
|
|
const supported2 = hostData[service2] === "yes";
|
|
|
|
if (supported1 && supported2) {
|
|
shared++;
|
|
} else if (supported1) {
|
|
service1Only++;
|
|
} else if (supported2) {
|
|
service2Only++;
|
|
}
|
|
}
|
|
|
|
return { shared, service1Only, service2Only };
|
|
}
|
|
|
|
_attachComparisonEvents() {
|
|
const closeBtn = this.elements.container.querySelector("#close-compare");
|
|
if (closeBtn) {
|
|
closeBtn.addEventListener("click", () => this._closeComparison());
|
|
}
|
|
|
|
this.elements.container.addEventListener("change", (e) => {
|
|
if (e.target.name === "comparison-filter") {
|
|
this._filterComparison(e.target.value);
|
|
}
|
|
});
|
|
}
|
|
|
|
_filterComparison(filterValue) {
|
|
const rows = this.elements.container.querySelectorAll(".comparison-row");
|
|
let visibleCount = 0;
|
|
|
|
rows.forEach(row => {
|
|
const status = row.dataset.status;
|
|
const shouldShow =
|
|
filterValue === "all" ||
|
|
(filterValue === "both" && status === "both-supported") ||
|
|
(filterValue === "different" && (status === "service1-only" || status === "service2-only"));
|
|
|
|
row.style.display = shouldShow ? "" : "none";
|
|
if (shouldShow) visibleCount++;
|
|
});
|
|
|
|
let resultsElement = this.elements.container.querySelector(".filter-results");
|
|
if (!resultsElement) {
|
|
resultsElement = document.createElement("div");
|
|
resultsElement.className = "filter-results";
|
|
const tableWrapper = this.elements.container.querySelector(".table-wrapper");
|
|
tableWrapper.parentNode.insertBefore(resultsElement, tableWrapper);
|
|
}
|
|
|
|
resultsElement.textContent = `Showing ${visibleCount} services`;
|
|
}
|
|
|
|
_closeComparison() {
|
|
this.elements.container.classList.add("comparison-hiding");
|
|
setTimeout(() => {
|
|
this.elements.container.style.display = "none";
|
|
this.elements.container.classList.remove("comparison-visible", "comparison-hiding");
|
|
this.isComparing = false;
|
|
this._showEmptyState();
|
|
}, 250);
|
|
}
|
|
|
|
_showEmptyState() {
|
|
this.elements.container.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon" aria-hidden="true">⚖️</div>
|
|
<h3>Ready to Compare</h3>
|
|
<p>Select two services above to see a detailed comparison</p>
|
|
</div>
|
|
`;
|
|
this.elements.container.style.display = "block";
|
|
}
|
|
|
|
_showSameProviderWarning() {
|
|
this.elements.container.innerHTML = `
|
|
<div class="warning-state">
|
|
<div class="warning-icon">⚠️</div>
|
|
<h3>Same Service Selected</h3>
|
|
<p>Please select two different services to compare</p>
|
|
</div>
|
|
`;
|
|
this.elements.container.style.display = "block";
|
|
}
|
|
}
|
|
/* ==============================
|
|
Pricing Manager
|
|
============================== */
|
|
class PricingManager {
|
|
constructor(containerId) {
|
|
this.container = document.getElementById(`${containerId}-table-container`);
|
|
this.currentData = null;
|
|
this._onMouseOver = this._onMouseOver.bind(this);
|
|
this._onMouseOut = this._onMouseOut.bind(this);
|
|
this._onMouseLeaveContainer = this._onMouseLeaveContainer.bind(this);
|
|
}
|
|
|
|
generatePricingTable(data = {}) {
|
|
if (!this.container) return;
|
|
if (!data.plans?.length) {
|
|
this.container.innerHTML = '<div class="error-state"><p>Error: Invalid pricing data structure.</p></div>';
|
|
return;
|
|
}
|
|
|
|
this.currentData = data;
|
|
const services = Object.keys(data.plans[0]).filter(key => key !== 'name');
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'table-wrapper';
|
|
|
|
const table = document.createElement('table');
|
|
table.id = 'pricing-table';
|
|
table.className = 'pricing-table';
|
|
table.setAttribute('aria-label', 'Service Pricing Table');
|
|
|
|
const thead = document.createElement('thead');
|
|
thead.innerHTML = `
|
|
<tr>
|
|
<th>Plans</th>
|
|
${services.map(service => `
|
|
<th class="service-column">
|
|
<div class="service-header">
|
|
<span class="service-name">${service}</span>
|
|
</div>
|
|
</th>
|
|
`).join('')}
|
|
</tr>
|
|
`;
|
|
|
|
const tbody = document.createElement('tbody');
|
|
tbody.innerHTML = data.plans.map((plan, index) => `
|
|
<tr class="pricing-row ${index % 2 === 0 ? 'even' : 'odd'}">
|
|
<td class="plan-name"><strong>${plan.name}</strong></td>
|
|
${services.map(service => {
|
|
const price = plan[service];
|
|
const isNumeric = !isNaN(parseFloat(price));
|
|
return `
|
|
<td class="price-cell ${isNumeric ? 'numeric-price' : 'text-price'}">
|
|
<div class="price-content">
|
|
<span class="price-value">${price}</span>
|
|
${isNumeric ? '<span class="price-period">/month</span>' : ''}
|
|
</div>
|
|
</td>
|
|
`;
|
|
}).join('')}
|
|
</tr>
|
|
`).join('');
|
|
|
|
table.appendChild(thead);
|
|
table.appendChild(tbody);
|
|
wrapper.appendChild(table);
|
|
fragment.appendChild(wrapper);
|
|
|
|
this.container.innerHTML = '';
|
|
this.container.appendChild(fragment);
|
|
|
|
this._setupPricingFeatures();
|
|
}
|
|
|
|
_setupPricingFeatures() {
|
|
// Use mouseover/mouseout for delegation; mouseenter doesn't bubble
|
|
this.container.addEventListener('mouseover', this._onMouseOver);
|
|
this.container.addEventListener('mouseout', this._onMouseOut);
|
|
this.container.addEventListener('mouseleave', this._onMouseLeaveContainer);
|
|
}
|
|
|
|
_onMouseOver(e) {
|
|
const cell = e.target.closest('.price-cell');
|
|
if (!cell || !this.container.contains(cell)) return;
|
|
const index = Array.from(cell.parentNode.children).indexOf(cell);
|
|
if (index >= 0) this._highlightColumn(index + 1); // nth-child is 1-based
|
|
}
|
|
|
|
_onMouseOut(e) {
|
|
const toElement = e.relatedTarget;
|
|
if (!toElement || !this.container.contains(toElement)) {
|
|
this._removeColumnHighlight();
|
|
}
|
|
}
|
|
|
|
_onMouseLeaveContainer() {
|
|
this._removeColumnHighlight();
|
|
}
|
|
|
|
_highlightColumn(columnIndex) {
|
|
const table = this.container.querySelector('table');
|
|
if (!table) return;
|
|
// Plans column is 1; services start at 2; columnIndex is the index within row (including plan col)
|
|
const cells = table.querySelectorAll(`tbody td:nth-child(${columnIndex + 1}), thead th:nth-child(${columnIndex + 1})`);
|
|
this._removeColumnHighlight();
|
|
cells.forEach(cell => cell.classList.add('highlighted'));
|
|
}
|
|
|
|
_removeColumnHighlight() {
|
|
this.container.querySelectorAll('.highlighted').forEach(cell => cell.classList.remove('highlighted'));
|
|
}
|
|
}
|
|
|
|
/* ==============================
|
|
Performance Monitor (light)
|
|
============================== */
|
|
class PerformanceMonitor {
|
|
constructor() { this.marks = new Map(); this.mark('start'); }
|
|
mark(name) { this.marks.set(name, performance.now()); }
|
|
measure(name, startMark = 'start') {
|
|
const start = this.marks.get(startMark) || performance.now();
|
|
const end = performance.now();
|
|
return end - start;
|
|
}
|
|
log(name, startMark = 'start') { console.log(`${name}: ${this.measure(name, startMark).toFixed(2)}ms`); }
|
|
}
|
|
|
|
/* ==============================
|
|
Feature setup
|
|
============================== */
|
|
function setupURLComparison() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const provider1 = params.get('compare');
|
|
const provider2 = params.get('with');
|
|
|
|
if (provider1 && provider2) {
|
|
requestAnimationFrame(() => {
|
|
const select1 = document.getElementById('provider1');
|
|
const select2 = document.getElementById('provider2');
|
|
|
|
if (select1 && select2) {
|
|
select1.value = provider1;
|
|
select2.value = provider2;
|
|
select1.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function setupScrollAnimations() {
|
|
const animatedElements = document.querySelectorAll('.section, .status-card, .referral-card');
|
|
if (animatedElements.length) Utils.animateOnScroll(animatedElements);
|
|
}
|
|
|
|
function setupOfflineDetection() {
|
|
const updateOnlineStatus = () => {
|
|
console.log(navigator.onLine ? 'Connection restored' : 'You are offline. Some features may not work.');
|
|
};
|
|
window.addEventListener('online', updateOnlineStatus);
|
|
window.addEventListener('offline', updateOnlineStatus);
|
|
}
|
|
|
|
function setupBackToTop() {
|
|
const btn = document.getElementById('backToTop');
|
|
if (!btn) return;
|
|
|
|
const onScroll = Utils.throttle(() => {
|
|
if (window.pageYOffset > 300) btn.classList.add('visible');
|
|
else btn.classList.remove('visible');
|
|
}, 150);
|
|
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
|
|
}
|
|
|
|
function setupNavHighlight() {
|
|
const links = Array.from(document.querySelectorAll('.header-nav .nav-link[href^="#"]'));
|
|
if (!('IntersectionObserver' in window) || !links.length) return;
|
|
|
|
const sections = links
|
|
.map(a => document.querySelector(a.getAttribute('href')))
|
|
.filter(Boolean);
|
|
|
|
const map = new Map();
|
|
links.forEach(a => map.set(a.getAttribute('href'), a));
|
|
|
|
const io = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
const id = `#${entry.target.id}`;
|
|
const link = map.get(id);
|
|
if (!link) return;
|
|
if (entry.isIntersecting) {
|
|
links.forEach(l => l.removeAttribute('aria-current'));
|
|
link.setAttribute('aria-current', 'page');
|
|
}
|
|
});
|
|
}, { rootMargin: '-40% 0px -50% 0px', threshold: 0.1 });
|
|
|
|
sections.forEach(sec => io.observe(sec));
|
|
}
|
|
|
|
/* Age verification overlay with focus trap + inert */
|
|
function setupAgeVerification() {
|
|
const overlay = document.getElementById('age-verification-overlay');
|
|
const adultContent = document.getElementById('adult-content');
|
|
const confirmBtn = document.getElementById('confirm-age');
|
|
const denyBtn = document.getElementById('deny-age');
|
|
const pageWrapper = document.querySelector('.page-wrapper');
|
|
const adultSection = document.getElementById('adult-hosts');
|
|
|
|
if (!overlay || !adultSection) return;
|
|
|
|
// Enhance semantics if not present
|
|
const modal = overlay.querySelector('.age-verification-modal');
|
|
const titleEl = overlay.querySelector('.age-verification-content h3');
|
|
|
|
if (modal) {
|
|
modal.setAttribute('role', 'dialog');
|
|
modal.setAttribute('aria-modal', 'true');
|
|
if (titleEl) {
|
|
const titleId = 'age-title';
|
|
titleEl.id = titleId;
|
|
modal.setAttribute('aria-labelledby', titleId);
|
|
}
|
|
}
|
|
|
|
const setInert = (isInert) => {
|
|
if (!pageWrapper) return;
|
|
if ('inert' in pageWrapper) {
|
|
pageWrapper.inert = isInert;
|
|
} else {
|
|
pageWrapper.setAttribute('aria-hidden', String(isInert));
|
|
}
|
|
};
|
|
|
|
const FOCUSABLE = 'a[href], area[href], button, input, select, textarea, details, summary, [tabindex]:not([tabindex="-1"])';
|
|
let removeTrap = null;
|
|
const trapFocus = (container) => {
|
|
const nodes = Array.from(container.querySelectorAll(FOCUSABLE))
|
|
.filter(el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true');
|
|
const first = nodes[0];
|
|
const last = nodes[nodes.length - 1];
|
|
|
|
const onKeydown = (e) => {
|
|
if (e.key === 'Escape') {
|
|
// Allow closing via deny to maintain your original flow
|
|
denyBtn?.click();
|
|
} else if (e.key === 'Tab') {
|
|
if (nodes.length === 0) { e.preventDefault(); return; }
|
|
if (e.shiftKey && document.activeElement === first) {
|
|
e.preventDefault(); last.focus();
|
|
} else if (!e.shiftKey && document.activeElement === last) {
|
|
e.preventDefault(); first.focus();
|
|
}
|
|
}
|
|
};
|
|
container.addEventListener('keydown', onKeydown);
|
|
first?.focus();
|
|
return () => container.removeEventListener('keydown', onKeydown);
|
|
};
|
|
|
|
const openOverlay = () => {
|
|
overlay.style.display = 'flex';
|
|
overlay.setAttribute('aria-hidden', 'false');
|
|
setInert(true);
|
|
removeTrap = trapFocus(modal || overlay);
|
|
};
|
|
|
|
const closeOverlay = () => {
|
|
overlay.style.display = 'none';
|
|
overlay.setAttribute('aria-hidden', 'true');
|
|
setInert(false);
|
|
if (typeof removeTrap === 'function') removeTrap();
|
|
};
|
|
|
|
// State
|
|
const ageConfirmed = localStorage.getItem('age-confirmed') === 'true';
|
|
if (ageConfirmed) {
|
|
overlay.style.display = 'none';
|
|
if (adultContent) adultContent.style.display = 'block';
|
|
}
|
|
|
|
confirmBtn?.addEventListener('click', () => {
|
|
localStorage.setItem('age-confirmed', 'true');
|
|
if (adultContent) adultContent.style.display = 'block';
|
|
closeOverlay();
|
|
});
|
|
|
|
denyBtn?.addEventListener('click', () => {
|
|
document.getElementById('what-are-debrid')?.scrollIntoView({ behavior: 'smooth' });
|
|
closeOverlay();
|
|
});
|
|
|
|
if ('IntersectionObserver' in window) {
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && localStorage.getItem('age-confirmed') !== 'true') {
|
|
openOverlay();
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
observer.observe(adultSection);
|
|
}
|
|
}
|
|
|
|
/* ==============================
|
|
Global singletons
|
|
============================== */
|
|
const loadingManager = new LoadingManager();
|
|
const performanceMonitor = new PerformanceMonitor();
|
|
|
|
/* ==============================
|
|
App bootstrap
|
|
============================== */
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
performanceMonitor.mark('dom-ready');
|
|
performanceMonitor.log('DOM Ready');
|
|
|
|
try {
|
|
const fileHostsTable = new TableManager('file-hosts-table-container', 'host-search-input', 'clear-host-search');
|
|
const adultHostsTable = new TableManager('adult-hosts-table-container', 'adult-host-search-input', 'clear-adult-host-search');
|
|
const pricingManager = new PricingManager('pricing');
|
|
|
|
const loaders = [
|
|
loadingManager.show('#file-hosts-table-container', 'Loading file hosts...'),
|
|
loadingManager.show('#adult-hosts-table-container', 'Loading adult hosts...'),
|
|
loadingManager.show('#pricing-table-container', 'Loading pricing data...')
|
|
];
|
|
|
|
const dataUrls = ['./json/file-hosts-optimized.json', './json/adult-hosts-optimized.json', './json/pricing.json'];
|
|
const fetchPromises = dataUrls.map(url =>
|
|
fetch(url).then(r => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status} for ${url}`)))
|
|
);
|
|
|
|
const results = await Promise.allSettled(fetchPromises);
|
|
|
|
results.forEach((result, index) => {
|
|
const containers = ['#file-hosts-table-container', '#adult-hosts-table-container', '#pricing-table-container'];
|
|
loadingManager.hide(containers[index], loaders[index]);
|
|
|
|
if (result.status === 'fulfilled') {
|
|
switch (index) {
|
|
case 0: {
|
|
fileHostsTable.generateTable(result.value);
|
|
new ComparisonManager('compare-table-container', 'provider1', 'provider2', result.value);
|
|
break;
|
|
}
|
|
case 1: {
|
|
adultHostsTable.generateTable(result.value);
|
|
break;
|
|
}
|
|
case 2: {
|
|
pricingManager.generatePricingTable(result.value);
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
console.error(`Error loading data (${dataUrls[index]}):`, result.reason);
|
|
const el = document.querySelector(containers[index]);
|
|
if (el) el.innerHTML = `<div class="error-state"><p>Failed to load data: <span class="error-dataurl">${dataUrls[index]}</span></p></div>`;
|
|
}
|
|
});
|
|
|
|
// UI features
|
|
setupURLComparison();
|
|
setupScrollAnimations();
|
|
setupOfflineDetection();
|
|
setupBackToTop();
|
|
setupNavHighlight();
|
|
setupAgeVerification();
|
|
|
|
performanceMonitor.mark('fully-loaded');
|
|
performanceMonitor.log('Fully Loaded');
|
|
|
|
} catch (error) {
|
|
console.error('Critical error:', error);
|
|
loadingManager.hideAll();
|
|
}
|
|
});
|
|
|
|
/* ==============================
|
|
Global error handling & SW
|
|
============================== */
|
|
window.addEventListener('error', e => {
|
|
console.error('Global error:', e.error || e.message || e);
|
|
}, { passive: true });
|
|
|
|
window.addEventListener('unhandledrejection', e => {
|
|
console.error('Unhandled promise rejection:', e.reason);
|
|
});
|
|
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/sw.js').catch(err => {
|
|
console.warn('Service worker registration failed:', err);
|
|
});
|
|
});
|
|
} |