// LoadingState.js - Manages loading overlay and animations
|
class LoadingState {
|
constructor(container, options = {}) {
|
this.container = container;
|
this.options = {
|
loadingMessages: {},
|
contentTypes: [],
|
taxonomies: [],
|
cycleInterval: 2000, // Time between loading message changes
|
...options
|
};
|
|
this.messageElement = this.container.querySelector('.loading-message');
|
this.dotsElement = this.container.querySelector('.loading-dots');
|
this.active = false;
|
this.quipInterval = null;
|
this.currentIndex = 0;
|
|
// Initialize quips based on content types and taxonomies
|
this.quips = this.initializeQuips();
|
}
|
|
/**
|
* Initialize quips for loading messages
|
*/
|
initializeQuips() {
|
// Default quips for different content types
|
const defaultQuips = {
|
artist: [
|
"Seeking ink masters",
|
"Finding your next artist",
|
"Gathering the talent",
|
"Meeting the makers",
|
"Summoning art wizards",
|
"Finding ink slingers",
|
"Priming the inkernet",
|
"Loading talent pool",
|
"Herding needle ninjas",
|
"Rallying rad artists"
|
],
|
tattoo: [
|
"Converting ink to pixels",
|
"Curating fresh ink",
|
"Making tattoos internet-famous",
|
"Processing perfection",
|
"Finding forever art",
|
"Making masterpieces mobile",
|
"Finding fresh flash",
|
],
|
shop: [
|
"Mapping the scene",
|
"Finding your next spot",
|
"Checking shop vibes",
|
"Scanning studio space",
|
"Locating ink havens",
|
"Loading local legends",
|
"Finding fresh digs",
|
],
|
artwork: [
|
"Gathering masterpieces",
|
"Curating creativity",
|
"Finding fine art",
|
"Collecting canvas magic",
|
"Processing paintings",
|
"Loading creative chaos",
|
],
|
piercing: [
|
"Finding fresh mods",
|
"Piercing through the data",
|
"Seeking sparkly things",
|
"Processing piercings",
|
"Curating cool mods",
|
"Seeking shiny stuffs",
|
"Loading mod magic",
|
"Processing pretty pieces",
|
"Scanning sparkly stuff"
|
],
|
style: [
|
"Sorting styles",
|
"Categorizing cool",
|
"Finding your vibe",
|
"Processing aesthetics",
|
"Matching moods",
|
"Style scanning",
|
"Finding your flavour"
|
],
|
theme: [
|
"Theming things up",
|
"Categorizing content",
|
"Sorting subjects",
|
"Finding your flavor",
|
"Organizing ideas",
|
],
|
city: [
|
"Looking around corners",
|
"Checking the map",
|
"Checking it twice",
|
"Pushing past obstacles"
|
],
|
type: [
|
"Searching for artists",
|
]
|
};
|
|
// Map pstyle, artstyle, etc. to their base types for quips
|
const typeMapping = {
|
'pstyle': 'style',
|
'artstyle': 'style',
|
'arttheme': 'theme',
|
'artmedium': 'style',
|
'artform': 'style',
|
'placement': 'style',
|
'colour': 'style'
|
};
|
|
// Gather all quips based on content types and taxonomies
|
const allQuips = [];
|
|
// Add content type quips
|
this.options.contentTypes.forEach(type => {
|
if (defaultQuips[type]) {
|
defaultQuips[type].forEach(quip => {
|
allQuips.push({
|
icon: type,
|
quip: quip
|
});
|
});
|
}
|
});
|
|
// Add taxonomy quips
|
this.options.taxonomies.forEach(taxonomy => {
|
const baseType = typeMapping[taxonomy] || taxonomy;
|
if (defaultQuips[baseType]) {
|
defaultQuips[baseType].forEach(quip => {
|
allQuips.push({
|
icon: taxonomy,
|
quip: quip
|
});
|
});
|
}
|
});
|
|
// Shuffle the quips array
|
return this.shuffleArray(allQuips);
|
}
|
|
/**
|
* Show the loading overlay
|
*/
|
show() {
|
this.container.classList.add('active');
|
this.active = true;
|
this.startQuipCycle();
|
document.body.classList.add('loading');
|
}
|
|
/**
|
* Hide the loading overlay
|
*/
|
hide() {
|
this.container.classList.remove('active');
|
this.active = false;
|
this.stopQuipCycle();
|
document.body.classList.remove('loading');
|
}
|
|
/**
|
* Start cycling through loading messages
|
*/
|
startQuipCycle() {
|
if (this.quipInterval) {
|
clearInterval(this.quipInterval);
|
}
|
|
if (!this.quips.length) return;
|
|
// Set initial message
|
this.updateMessage(this.quips[0]);
|
this.container.classList.remove('changing');
|
|
this.quipInterval = setInterval(() => {
|
this.container.classList.add('changing');
|
|
setTimeout(() => {
|
this.currentIndex = (this.currentIndex + 1) % this.quips.length;
|
this.updateMessage(this.quips[this.currentIndex]);
|
|
setTimeout(() => {
|
this.container.classList.remove('changing');
|
}, 50);
|
}, 350);
|
}, this.options.cycleInterval);
|
}
|
|
/**
|
* Stop cycling through loading messages
|
*/
|
stopQuipCycle() {
|
if (this.quipInterval) {
|
clearInterval(this.quipInterval);
|
this.quipInterval = null;
|
}
|
}
|
|
/**
|
* Update the loading message
|
*/
|
updateMessage(quipData) {
|
if (!this.messageElement) return;
|
|
const icon = window.feedSettings?.icons?.[quipData.icon] || '';
|
this.messageElement.innerHTML = `${icon}<p>${quipData.quip}</p>`;
|
}
|
|
/**
|
* Set a custom loading message
|
*/
|
setMessage(message, icon = null) {
|
if (!this.messageElement) return;
|
|
this.stopQuipCycle();
|
|
const iconHtml = icon ? window.feedSettings?.icons?.[icon] || '' : '';
|
this.messageElement.innerHTML = `${iconHtml}<p>${message}</p>`;
|
}
|
|
/**
|
* Shuffle an array (Fisher-Yates algorithm)
|
*/
|
shuffleArray(array) {
|
const newArray = [...array];
|
for (let i = newArray.length - 1; i > 0; i--) {
|
const j = Math.floor(Math.random() * (i + 1));
|
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
|
}
|
return newArray;
|
}
|
}
|
|
export default LoadingState;
|
