renames
This commit is contained in:
193
seasonals.js
193
seasonals.js
@ -1,92 +1,119 @@
|
||||
// seasonals.js
|
||||
class SeasonalThemes {
|
||||
constructor() {
|
||||
this.currentTheme = this.determineCurrentTheme();
|
||||
this.loadTheme();
|
||||
}
|
||||
// theme-configs.js
|
||||
|
||||
determineCurrentTheme() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth();
|
||||
const automateThemeSelection = false; // Set to false to disable automatic theme selection based on the current month
|
||||
const defaultTheme = 'snowflakes'; // The theme to use if automatic theme selection is disabled
|
||||
|
||||
// theme logic
|
||||
if (month === 11 || month === 0 || month === 1) return 'winter'; // december, january, february
|
||||
if (month >= 2 && month <= 4) return 'spring';
|
||||
if (month >= 5 && month <= 7) return 'summer';
|
||||
if (month >= 8 && month <= 10) return 'autumn';
|
||||
// theme configurations
|
||||
const themeConfigs = {
|
||||
snowflakes: {
|
||||
css: 'snowflakes.css',
|
||||
js: 'snowflakes.js',
|
||||
containerClass: 'snowflakes'
|
||||
},
|
||||
snowfall: {
|
||||
js: 'snowfall.js',
|
||||
containerClass: 'snowfall'
|
||||
},
|
||||
snowstorm: {
|
||||
css: 'snowstorm.css',
|
||||
js: 'snowstorm.js',
|
||||
containerClass: 'snowstorm'
|
||||
},
|
||||
fireworks: {
|
||||
css: 'fireworks.css',
|
||||
js: 'fireworks.js',
|
||||
containerClass: 'fireworks'
|
||||
},
|
||||
halloween: {
|
||||
css: 'halloween.css',
|
||||
js: 'halloween.js',
|
||||
containerClass: 'halloween'
|
||||
},
|
||||
summer: {
|
||||
css: 'summer.css',
|
||||
js: 'summer.js',
|
||||
containerClass: 'summer'
|
||||
},
|
||||
autumn: {
|
||||
css: 'autumn.css',
|
||||
js: 'autumn.js',
|
||||
containerClass: 'autumn'
|
||||
},
|
||||
spring: {
|
||||
css: 'spring.css',
|
||||
js: 'spring.js',
|
||||
containerClass: 'spring'
|
||||
},
|
||||
};
|
||||
|
||||
return ''; // Fallback (nothing)
|
||||
}
|
||||
// determine current theme based on the current month
|
||||
function determineCurrentTheme() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth();
|
||||
const day = date.getDate();
|
||||
|
||||
loadTheme() {
|
||||
const themeConfigs = {
|
||||
snowflakes: {
|
||||
css: 'snowflakes.css',
|
||||
js: 'snowflakes.js',
|
||||
containerClass: 'snowflakes'
|
||||
},
|
||||
snowfall: {
|
||||
js: 'snowfall.js',
|
||||
containerClass: 'snowfall'
|
||||
},
|
||||
snowstorm: {
|
||||
css: 'snowstorm.css',
|
||||
js: 'snowstorm.js',
|
||||
containerClass: 'snowstorm'
|
||||
},
|
||||
fireworks: {
|
||||
css: 'fireworks.css',
|
||||
js: 'fireworks.js',
|
||||
containerClass: 'fireworks'
|
||||
},
|
||||
haloween: {
|
||||
css: 'haloween.css',
|
||||
js: 'haloween.js',
|
||||
containerClass: 'haloween'
|
||||
},
|
||||
summer: {
|
||||
css: 'summer.css',
|
||||
js: 'summer.js',
|
||||
containerClass: 'summer'
|
||||
},
|
||||
autumn: {
|
||||
css: 'autumn.css',
|
||||
js: 'autumn.js',
|
||||
containerClass: 'autumn'
|
||||
},
|
||||
spring: {
|
||||
css: 'spring.css',
|
||||
js: 'spring.js',
|
||||
containerClass: 'spring'
|
||||
},
|
||||
};
|
||||
if (month === 11 || month === 0 || month === 1) return 'snowfall'; // december, january, february
|
||||
if (month === 9 && day === 31) return 'halloween'; // halloween
|
||||
if (month === 0 && day === 1) return 'fireworks'; //new year
|
||||
if (month >= 2 && month <= 4) return 'spring';
|
||||
if (month >= 5 && month <= 7) return 'summer';
|
||||
if (month >= 8 && month <= 10) return 'autumn';
|
||||
|
||||
const theme = themeConfigs[this.currentTheme];
|
||||
|
||||
// load css dynamically
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = theme.css;
|
||||
document.head.appendChild(link);
|
||||
|
||||
// load js dynamically
|
||||
const script = document.createElement('script');
|
||||
script.src = theme.js;
|
||||
document.body.appendChild(script);
|
||||
|
||||
// add container class with dynamic theme class
|
||||
// const container = document.createElement('div');
|
||||
// container.className = `seasonals ${theme.containerClass}`;
|
||||
// document.body.appendChild(container);
|
||||
|
||||
// reclassify existing container
|
||||
const container = document.querySelector('.seasonals-container');
|
||||
container.className = `${theme.containerClass}`;
|
||||
// container.className = theme.containerClass;
|
||||
}
|
||||
return ''; // Fallback (nothing)
|
||||
}
|
||||
|
||||
// Initialisierung beim Laden der Seite
|
||||
// load theme csss
|
||||
function loadThemeCSS(cssPath) {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = cssPath;
|
||||
document.head.appendChild(link);
|
||||
console.log(`CSS file "${cssPath}" loaded.`);
|
||||
}
|
||||
|
||||
// load theme js
|
||||
function loadThemeJS(jsPath) {
|
||||
const script = document.createElement('script');
|
||||
script.src = jsPath;
|
||||
document.body.appendChild(script);
|
||||
console.log(`JS file "${jsPath}" loaded.`);
|
||||
}
|
||||
|
||||
// update theme container class name
|
||||
function updateThemeContainer(containerClass) {
|
||||
const container = document.querySelector('.seasonal-container');
|
||||
if (!container) {
|
||||
console.error('No element with the class "seasonal-container" found.');
|
||||
return;
|
||||
}
|
||||
container.className = containerClass;
|
||||
}
|
||||
|
||||
// initialize theme
|
||||
function initializeTheme() {
|
||||
if (!automateThemeSelection) {
|
||||
const currentTheme = defaultTheme;
|
||||
} else {
|
||||
const currentTheme = determineCurrentTheme();
|
||||
}
|
||||
|
||||
const theme = themeConfigs[currentTheme];
|
||||
|
||||
if (!theme) {
|
||||
console.error(`Theme "${currentTheme}" not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (theme.css) loadThemeCSS(theme.css);
|
||||
if (theme.js) loadThemeJS(theme.js);
|
||||
|
||||
updateThemeContainer(theme.containerClass);
|
||||
|
||||
console.log(`Theme "${currentTheme}" loaded.`);
|
||||
}
|
||||
|
||||
|
||||
//document.addEventListener('DOMContentLoaded', initializeTheme);
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new SeasonalThemes();
|
||||
initializeTheme();
|
||||
});
|
||||
119
seasonalsAIO.js
119
seasonalsAIO.js
@ -1,119 +0,0 @@
|
||||
// theme-configs.js
|
||||
|
||||
const automateThemeSelection = false; // Set to false to disable automatic theme selection based on the current month
|
||||
const defaultTheme = 'snowfall'; // The theme to use if automatic theme selection is disabled
|
||||
|
||||
// theme configurations
|
||||
const themeConfigs = {
|
||||
snowflakes: {
|
||||
css: 'snowflakes.css',
|
||||
js: 'snowflakes.js',
|
||||
containerClass: 'snowflakes'
|
||||
},
|
||||
snowfall: {
|
||||
js: 'snowfall.js',
|
||||
containerClass: 'snowfall'
|
||||
},
|
||||
snowstorm: {
|
||||
css: 'snowstorm.css',
|
||||
js: 'snowstorm.js',
|
||||
containerClass: 'snowstorm'
|
||||
},
|
||||
fireworks: {
|
||||
css: 'fireworks.css',
|
||||
js: 'fireworks.js',
|
||||
containerClass: 'fireworks'
|
||||
},
|
||||
halloween: {
|
||||
css: 'halloween.css',
|
||||
js: 'halloween.js',
|
||||
containerClass: 'halloween'
|
||||
},
|
||||
summer: {
|
||||
css: 'summer.css',
|
||||
js: 'summer.js',
|
||||
containerClass: 'summer'
|
||||
},
|
||||
autumn: {
|
||||
css: 'autumn.css',
|
||||
js: 'autumn.js',
|
||||
containerClass: 'autumn'
|
||||
},
|
||||
spring: {
|
||||
css: 'spring.css',
|
||||
js: 'spring.js',
|
||||
containerClass: 'spring'
|
||||
},
|
||||
};
|
||||
|
||||
// determine current theme based on the current month
|
||||
function determineCurrentTheme() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth();
|
||||
const day = date.getDate();
|
||||
|
||||
if (month === 11 || month === 0 || month === 1) return 'snowfall'; // december, january, february
|
||||
if (month === 9 && day === 31) return 'halloween'; // halloween
|
||||
if (month === 0 && day === 1) return 'fireworks'; //new year
|
||||
if (month >= 2 && month <= 4) return 'spring';
|
||||
if (month >= 5 && month <= 7) return 'summer';
|
||||
if (month >= 8 && month <= 10) return 'autumn';
|
||||
|
||||
return ''; // Fallback (nothing)
|
||||
}
|
||||
|
||||
// load theme csss
|
||||
function loadThemeCSS(cssPath) {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = cssPath;
|
||||
document.head.appendChild(link);
|
||||
console.log(`CSS file "${cssPath}" loaded.`);
|
||||
}
|
||||
|
||||
// load theme js
|
||||
function loadThemeJS(jsPath) {
|
||||
const script = document.createElement('script');
|
||||
script.src = jsPath;
|
||||
document.body.appendChild(script);
|
||||
console.log(`JS file "${jsPath}" loaded.`);
|
||||
}
|
||||
|
||||
// update theme container class name
|
||||
function updateThemeContainer(containerClass) {
|
||||
const container = document.querySelector('.seasonal-container');
|
||||
if (!container) {
|
||||
console.error('No element with the class "seasonal-container" found.');
|
||||
return;
|
||||
}
|
||||
container.className = containerClass;
|
||||
}
|
||||
|
||||
// initialize theme
|
||||
function initializeTheme() {
|
||||
if (!automateThemeSelection) {
|
||||
const currentTheme = defaultTheme;
|
||||
} else {
|
||||
const currentTheme = determineCurrentTheme();
|
||||
}
|
||||
|
||||
const theme = themeConfigs[currentTheme];
|
||||
|
||||
if (!theme) {
|
||||
console.error(`Theme "${currentTheme}" not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (theme.css) loadThemeCSS(theme.css);
|
||||
if (theme.js) loadThemeJS(theme.js);
|
||||
|
||||
updateThemeContainer(theme.containerClass);
|
||||
|
||||
console.log(`Theme "${currentTheme}" loaded.`);
|
||||
}
|
||||
|
||||
|
||||
//document.addEventListener('DOMContentLoaded', initializeTheme);
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initializeTheme();
|
||||
});
|
||||
92
seasonalsWithClass.js
Normal file
92
seasonalsWithClass.js
Normal file
@ -0,0 +1,92 @@
|
||||
// seasonals.js
|
||||
class SeasonalThemes {
|
||||
constructor() {
|
||||
this.currentTheme = this.determineCurrentTheme();
|
||||
this.loadTheme();
|
||||
}
|
||||
|
||||
determineCurrentTheme() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth();
|
||||
|
||||
// theme logic
|
||||
if (month === 11 || month === 0 || month === 1) return 'winter'; // december, january, february
|
||||
if (month >= 2 && month <= 4) return 'spring';
|
||||
if (month >= 5 && month <= 7) return 'summer';
|
||||
if (month >= 8 && month <= 10) return 'autumn';
|
||||
|
||||
return ''; // Fallback (nothing)
|
||||
}
|
||||
|
||||
loadTheme() {
|
||||
const themeConfigs = {
|
||||
snowflakes: {
|
||||
css: 'snowflakes.css',
|
||||
js: 'snowflakes.js',
|
||||
containerClass: 'snowflakes'
|
||||
},
|
||||
snowfall: {
|
||||
js: 'snowfall.js',
|
||||
containerClass: 'snowfall'
|
||||
},
|
||||
snowstorm: {
|
||||
css: 'snowstorm.css',
|
||||
js: 'snowstorm.js',
|
||||
containerClass: 'snowstorm'
|
||||
},
|
||||
fireworks: {
|
||||
css: 'fireworks.css',
|
||||
js: 'fireworks.js',
|
||||
containerClass: 'fireworks'
|
||||
},
|
||||
haloween: {
|
||||
css: 'haloween.css',
|
||||
js: 'haloween.js',
|
||||
containerClass: 'haloween'
|
||||
},
|
||||
summer: {
|
||||
css: 'summer.css',
|
||||
js: 'summer.js',
|
||||
containerClass: 'summer'
|
||||
},
|
||||
autumn: {
|
||||
css: 'autumn.css',
|
||||
js: 'autumn.js',
|
||||
containerClass: 'autumn'
|
||||
},
|
||||
spring: {
|
||||
css: 'spring.css',
|
||||
js: 'spring.js',
|
||||
containerClass: 'spring'
|
||||
},
|
||||
};
|
||||
|
||||
const theme = themeConfigs[this.currentTheme];
|
||||
|
||||
// load css dynamically
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = theme.css;
|
||||
document.head.appendChild(link);
|
||||
|
||||
// load js dynamically
|
||||
const script = document.createElement('script');
|
||||
script.src = theme.js;
|
||||
document.body.appendChild(script);
|
||||
|
||||
// add container class with dynamic theme class
|
||||
// const container = document.createElement('div');
|
||||
// container.className = `seasonals ${theme.containerClass}`;
|
||||
// document.body.appendChild(container);
|
||||
|
||||
// reclassify existing container
|
||||
const container = document.querySelector('.seasonals-container');
|
||||
container.className = `${theme.containerClass}`;
|
||||
// container.className = theme.containerClass;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialisierung beim Laden der Seite
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new SeasonalThemes();
|
||||
});
|
||||
Reference in New Issue
Block a user