Michael Czechowski
d2cbf7d381
New lesson modules covering native HTML5 features: - Details & Summary: disclosure widgets - Progress & Meter: progress bars and gauges - Datalist: autocomplete inputs - Data Attributes: custom data-* attributes - Dialog: native modal dialogs - Forms with Fieldset: grouped form controls - Figure & Figcaption: self-contained content - Tables: structured data with caption, thead, tbody, tfoot - Marquee: classic scrolling text (deprecated but fun) - SVG Basics: drawing circles, rectangles, and lines Each module includes 2-3 progressive lessons with fancy styling (pastel gradients, 100vh layouts, etc).
132 lines
4.1 KiB
JavaScript
132 lines
4.1 KiB
JavaScript
/**
|
|
* Lesson Config (German) - Functions for loading lesson configurations
|
|
*/
|
|
|
|
// Import German lesson configs
|
|
import basicSelectorsConfig from "../../lessons/de/00-basic-selectors.json";
|
|
import advancedSelectorsConfig from "../../lessons/de/01-advanced-selectors.json";
|
|
import tailwindConfig from "../../lessons/de/10-tailwind-basics.json";
|
|
// HTML lessons
|
|
import htmlElementsConfig from "../../lessons/de/20-html-elements.json";
|
|
import htmlFormsBasicConfig from "../../lessons/de/21-html-forms-basic.json";
|
|
import htmlFormsValidationConfig from "../../lessons/de/22-html-forms-validation.json";
|
|
import htmlDetailsSummaryConfig from "../../lessons/de/23-html-details-summary.json";
|
|
import htmlProgressMeterConfig from "../../lessons/de/24-html-progress-meter.json";
|
|
import htmlDatalistConfig from "../../lessons/de/25-html-datalist.json";
|
|
import htmlDataAttributesConfig from "../../lessons/de/26-html-data-attributes.json";
|
|
import htmlDialogConfig from "../../lessons/de/27-html-dialog.json";
|
|
import htmlFormsFieldsetConfig from "../../lessons/de/28-html-forms-fieldset.json";
|
|
import htmlFigureConfig from "../../lessons/de/29-html-figure.json";
|
|
import htmlTablesConfig from "../../lessons/de/30-html-tables.json";
|
|
import htmlMarqueeConfig from "../../lessons/de/31-html-marquee.json";
|
|
import htmlSvgConfig from "../../lessons/de/32-html-svg.json";
|
|
|
|
// Module store
|
|
const moduleStore = [
|
|
htmlElementsConfig,
|
|
htmlFormsBasicConfig,
|
|
htmlFormsValidationConfig,
|
|
htmlDetailsSummaryConfig,
|
|
htmlProgressMeterConfig,
|
|
htmlDatalistConfig,
|
|
htmlDataAttributesConfig,
|
|
htmlDialogConfig,
|
|
htmlFormsFieldsetConfig,
|
|
htmlFigureConfig,
|
|
htmlTablesConfig,
|
|
htmlMarqueeConfig,
|
|
htmlSvgConfig,
|
|
basicSelectorsConfig,
|
|
advancedSelectorsConfig,
|
|
tailwindConfig
|
|
];
|
|
|
|
/**
|
|
* Load all available modules
|
|
* @returns {Promise<Array>} Promise resolving to array of modules
|
|
*/
|
|
export async function loadModules() {
|
|
return moduleStore.map((module) => ({
|
|
...module,
|
|
lessons: module.lessons.map((lesson) => ({
|
|
...lesson,
|
|
mode: module.mode || "css"
|
|
}))
|
|
}));
|
|
}
|
|
|
|
/**
|
|
* Get a module by its ID
|
|
* @param {string} moduleId - The module ID to find
|
|
* @returns {Object|null} The module object or null if not found
|
|
*/
|
|
export function getModuleById(moduleId) {
|
|
return moduleStore.find((module) => module.id === moduleId) || null;
|
|
}
|
|
|
|
/**
|
|
* Load module configs from a URL
|
|
* @param {string} url - URL to load the config from
|
|
* @returns {Promise<Object>} Promise resolving to the module config
|
|
*/
|
|
export async function loadModuleFromUrl(url) {
|
|
try {
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load module: ${response.status} ${response.statusText}`);
|
|
}
|
|
|
|
const moduleConfig = await response.json();
|
|
validateModuleConfig(moduleConfig);
|
|
|
|
return moduleConfig;
|
|
} catch (error) {
|
|
console.error("Error loading module from URL:", error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Validate a module configuration
|
|
* @param {Object} config - The module configuration to validate
|
|
* @throws {Error} If the configuration is invalid
|
|
*/
|
|
function validateModuleConfig(config) {
|
|
// Required fields
|
|
if (!config.id) throw new Error('Module config missing "id"');
|
|
if (!config.title) throw new Error('Module config missing "title"');
|
|
if (!Array.isArray(config.lessons)) throw new Error('Module config missing "lessons" array');
|
|
|
|
// Check each lesson
|
|
config.lessons.forEach((lesson, index) => {
|
|
if (!lesson.title) throw new Error(`Lesson ${index} missing "title"`);
|
|
if (!lesson.previewHTML) throw new Error(`Lesson ${index} missing "previewHTML"`);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Add a custom module to the store
|
|
* @param {Object} moduleConfig - The module configuration to add
|
|
* @returns {boolean} Success status
|
|
*/
|
|
export function addCustomModule(moduleConfig) {
|
|
try {
|
|
validateModuleConfig(moduleConfig);
|
|
|
|
// Check if module with same ID already exists
|
|
const existingIndex = moduleStore.findIndex((m) => m.id === moduleConfig.id);
|
|
if (existingIndex >= 0) {
|
|
// Replace existing module
|
|
moduleStore[existingIndex] = moduleConfig;
|
|
} else {
|
|
// Add new module
|
|
moduleStore.push(moduleConfig);
|
|
}
|
|
|
|
return true;
|
|
} catch (error) {
|
|
console.error("Error adding custom module:", error);
|
|
return false;
|
|
}
|
|
}
|