- ${this.generateThemeToggle()}
- ${this.generateInputSection(config)}
- ${this.generateOutputSection(config)}
- ${config.hasVisualization ? this.generateVisualizationSection(config) : ''}
- ${this.generateExplanationSection(config)}
- ${this.generateSourceCodeSection(config)}
-
-
-
- 
-
- SimplifyLearning
-
-
-
-
- SimplifyLearning
- Demo - ${config.name}
-Problem
-${config.problem}
-
-
-
`;
- }
-
- /**
- * Generate input section based on config
- */
- generateInputSection(config) {
- const inputElements = config.inputs.map(input => this.generateInputElement(input)).join('\n ');
-
- return `
-
-
`;
- }
-
- /**
- * Generate individual input element
- */
- generateInputElement(input) {
- const commonStyles = 'padding: 8px; border: 1px solid #ddd; border-radius: 4px;';
-
- switch (input.type) {
- case 'number':
- return `
- Inputs
-
- ${inputElements}
-
- ${config.example ? this.generateExampleBox(config.example) : ''}
-
-
-
-
-
-
-
`;
- case 'text':
- return `
-
-
-
-
`;
- case 'range':
- return `
-
-
-
-
`;
- default:
- return ``;
- }
- }
-
- /**
- * Generate example box if provided
- */
- generateExampleBox(example) {
- return `
-
- Example: ${example}
-
`;
- }
-
- /**
- * Generate output section
- */
- generateOutputSection(config) {
- return `
-
-
`;
- }
-
- /**
- * Generate visualization section if enabled
- */
- generateVisualizationSection(config) {
- return `
- `;
- }
-
- /**
- * Generate source code section
- */
- generateSourceCodeSection(config) {
- return `
-
- `;
- }
-
- /**
- * Generate footer section
- */
- generateFooter() {
- return `
- `;
- }
-
- /**
- * Generate explanation accordion section
- */
- generateExplanationSection(config) {
- const steps = config.explanation.steps ?
- config.explanation.steps.map(step => `Result
- - -
-
`;
- }
-
- /**
- * Generate JavaScript section
- */
- generateScripts(config) {
- return `
-
-
-
- `;
- }
-
- /**
- * Generate main demo function based on config
- */
- generateDemoFunction(config) {
- // This will be algorithm-specific, so we'll generate a basic template
- // and allow configs to override with custom logic
- if (config.customDemoFunction) {
- return config.customDemoFunction;
- }
-
- // Generate basic input gathering and validation
- const inputGathering = config.inputs.map(input =>
- `const ${input.id.replace('-', '_')} = ${input.type === 'number' ? 'parseInt(' : ''}document.getElementById('${input.id}').value${input.type === 'number' ? ')' : ''};`
- ).join('\n ');
-
- return `
- function runDemo() {
- ${inputGathering}
- const resultContainer = document.getElementById('result');
- const errorContainer = document.getElementById('error-message');
-
- // Clear previous error
- errorContainer.innerHTML = '';
- errorContainer.style.display = 'none';
-
- try {
- // Call algorithm function - this needs to be implemented in the JS file
- const result = ${config.algorithmFunction || 'runAlgorithm'}(${config.inputs.map(input => input.id.replace('-', '_')).join(', ')});
- resultContainer.innerHTML = result;
- } catch (error) {
- showError(error.message);
- }
- }`;
- }
-
- /**
- * Generate utility functions
- */
- generateUtilityFunctions(config) {
- return `
- function showError(message) {
- const errorContainer = document.getElementById('error-message');
- errorContainer.innerHTML = \`⚠️ \${message}\`;
- errorContainer.style.display = 'block';
- }
-
- function wrapLongText(text) {
- // Insert spaces every 50 characters to allow wrapping
- return text.replace(/(.{50})/g, '$1 ');
- }`;
- }
-
-
- /**
- * Generate initialization script
- */
- generateInitializationScript(config) {
- return `
- // Initialize demo
- document.addEventListener('DOMContentLoaded', () => {
- ${config.autoRun !== false ? '// Generate initial result\n runDemo();' : ''}
- });
-
- ${config.autoRun !== false ? '// Generate initial result on load\n runDemo();' : ''}`;
- }
-
- /**
- * Generate CSS styles
- */
- generateStyles(config) {
- return `
- `;
- }
-
- /**
- * Generate visualization-specific styles
- */
- generateVisualizationStyles() {
- return `
- /* Visualization styles */
- body.dark-mode #visualization-section {
- background-color: #272729 !important;
- color: #d7dadc;
- }
-
- body.dark-mode #steps-container > div {
- background-color: #343536 !important;
- border-color: #555 !important;
- color: #d7dadc !important;
- }
-
- body.dark-mode #steps-container h4 {
- color: #d7dadc !important;
- }`;
- }
-}
-
-// Export for both Node.js and browser environments
-if (typeof module !== 'undefined' && module.exports) {
- module.exports = AlgorithmTemplateGenerator;
-} else if (typeof window !== 'undefined') {
- window.AlgorithmTemplateGenerator = AlgorithmTemplateGenerator;
-}
diff --git a/algorithms-js/assets/js/components.js b/algorithms-js/assets/js/components.js
index b0092892..2e611737 100644
--- a/algorithms-js/assets/js/components.js
+++ b/algorithms-js/assets/js/components.js
@@ -170,97 +170,98 @@ class AlgorithmList {
}
loadAlgorithms() {
- // This would typically fetch from an API or config file
- // For now, we'll define them manually but in a way that's easy to extend
+ // Use centralized path configuration if available, fallback to hardcoded paths
+ const paths = window.pathConfig || null;
+
this.algorithms = [
{
name: 'Count and Say',
description: 'Generate sequences where each term describes the previous term',
- url: 'demo.html?algo=patterns/count-and-say',
+ url: paths ? paths.algorithms.patterns.COUNT_AND_SAY : 'demo.html?algo=patterns/count-and-say',
category: 'sequences',
subcategory: 'sequences'
},
{
name: 'Binary Search',
description: 'Efficient search algorithm for sorted arrays with O(log n) complexity',
- url: 'demo.html?algo=search/binary-search',
+ url: paths ? paths.algorithms.search.BINARY_SEARCH : 'demo.html?algo=search/binary-search',
category: 'search',
subcategory: 'arrays'
},
{
name: 'Bubble Sort',
description: 'Simple sorting algorithm that repeatedly compares adjacent elements',
- url: 'demo.html?algo=sort/bubble-sort',
+ url: paths ? paths.algorithms.sort.BUBBLE_SORT : 'demo.html?algo=sort/bubble-sort',
category: 'sort',
subcategory: 'comparison'
},
{
name: 'Selection Sort',
description: 'In-place sorting algorithm that finds minimum elements one by one',
- url: 'demo.html?algo=sort/selection-sort',
+ url: paths ? paths.algorithms.sort.SELECTION_SORT : 'demo.html?algo=sort/selection-sort',
category: 'sort',
subcategory: 'comparison'
},
{
name: 'Insertion Sort',
description: 'Adaptive sorting algorithm that builds sorted array incrementally',
- url: 'demo.html?algo=sort/insertion-sort',
+ url: paths ? paths.algorithms.sort.INSERTION_SORT : 'demo.html?algo=sort/insertion-sort',
category: 'sort',
subcategory: 'comparison'
},
{
name: 'Quick Sort',
description: 'Efficient divide-and-conquer algorithm with O(n log n) average performance',
- url: 'demo.html?algo=sort/quick-sort',
+ url: paths ? paths.algorithms.sort.QUICK_SORT : 'demo.html?algo=sort/quick-sort',
category: 'sort',
subcategory: 'divide-and-conquer'
},
{
name: 'Merge Sort',
description: 'Stable divide-and-conquer algorithm with guaranteed O(n log n) time complexity',
- url: 'demo.html?algo=sort/merge-sort',
+ url: paths ? paths.algorithms.sort.MERGE_SORT : 'demo.html?algo=sort/merge-sort',
category: 'sort',
subcategory: 'divide-and-conquer'
},
{
name: 'Heap Sort',
description: 'In-place sorting algorithm using binary heap with O(n log n) guaranteed performance',
- url: 'demo.html?algo=sort/heap-sort',
+ url: paths ? paths.algorithms.sort.HEAP_SORT : 'demo.html?algo=sort/heap-sort',
category: 'sort',
subcategory: 'heap-based'
},
{
name: 'Counting Sort',
description: 'Linear-time integer sorting algorithm for small ranges',
- url: 'demo.html?algo=sort/counting-sort',
+ url: paths ? paths.algorithms.sort.COUNTING_SORT : 'demo.html?algo=sort/counting-sort',
category: 'sort',
subcategory: 'non-comparison'
},
{
name: 'Radix Sort',
description: 'Non-comparison sort that processes digits individually',
- url: 'demo.html?algo=sort/radix-sort',
+ url: paths ? paths.algorithms.sort.RADIX_SORT : 'demo.html?algo=sort/radix-sort',
category: 'sort',
subcategory: 'non-comparison'
},
{
name: 'Bucket Sort',
description: 'Distribution-based sort for uniformly distributed data',
- url: 'demo.html?algo=sort/bucket-sort',
+ url: paths ? paths.algorithms.sort.BUCKET_SORT : 'demo.html?algo=sort/bucket-sort',
category: 'sort',
subcategory: 'distribution'
},
{
name: 'Dutch Flag Sort',
description: 'Three-way partitioning algorithm for 2-3 group segregation',
- url: 'demo.html?algo=sort/dutch-flag-sort',
+ url: paths ? paths.algorithms.sort.DUTCH_FLAG_SORT : 'demo.html?algo=sort/dutch-flag-sort',
category: 'sort',
subcategory: 'partitioning'
},
{
name: 'Wiggle Sort',
description: 'Arranges elements in alternating peak-valley pattern',
- url: 'demo.html?algo=sort/wiggle-sort',
+ url: paths ? paths.algorithms.sort.WIGGLE_SORT : 'demo.html?algo=sort/wiggle-sort',
category: 'sort',
subcategory: 'specialized'
}
diff --git a/algorithms-js/assets/js/dynamic-template.js b/algorithms-js/assets/js/dynamic-template.js
index 22923751..b24b4f2b 100644
--- a/algorithms-js/assets/js/dynamic-template.js
+++ b/algorithms-js/assets/js/dynamic-template.js
@@ -1,189 +1,185 @@
/**
- * Dynamic Algorithm Template System
+ * Modular Dynamic Template System - Module Loader & Backward Compatibility
*
- * This system dynamically generates HTML pages at runtime instead of pre-building them.
- * It provides better flexibility and eliminates the need for generated files.
+ * This file replaces the monolithic dynamic-template.js with a modular architecture.
+ * It loads all the split modules and provides backward compatibility.
+ *
+ * Architecture:
+ * - PathGenerator: URL and path generation utilities
+ * - SourceCodeHandler: GitHub links and source code sections
+ * - TemplateManager: Main orchestrator (replaces DynamicAlgorithmTemplate)
+ * - HtmlSections: Header, footer, hero, problem sections (embedded)
+ * - InputGenerators: Input forms and data toggles (embedded)
+ * - ContentGenerators: Content sections and explanations (embedded)
+ * - ScriptStyleGenerators: Scripts and styles generation (embedded)
+ *
+ * @see https://github.com/sachinlala/SimplifyLearning
*/
-class DynamicAlgorithmTemplate {
- constructor() {
- this.baseConfig = this.getBaseConfig();
- }
+// Embedded modules to reduce HTTP requests while maintaining separation of concerns
- /**
- * Get base configuration that's common across all algorithms
- */
- getBaseConfig() {
- return {
- cssPath: "../../../assets/css/styles.css",
- componentsPath: "../../../assets/js/components.js",
- backPath: "../../../index.html",
- hasVisualization: false
- };
- }
-
- /**
- * Build asset path based on basePath from config
- */
- buildAssetPath(config, relativePath) {
+// ===== PATH GENERATOR MODULE =====
+class PathGenerator {
+ static buildAssetPath(config, relativePath) {
if (config.basePath) {
return `${config.basePath}/${relativePath}`;
}
return relativePath;
}
- /**
- * Merge base config with algorithm-specific config
- */
- mergeConfig(algorithmConfig) {
- return {
- ...this.baseConfig,
- ...algorithmConfig,
- // Auto-generate title from name if not provided
- title: algorithmConfig.title || `${algorithmConfig.name} Demo`,
- // Ensure required paths are properly set
- cssPath: algorithmConfig.cssPath || this.baseConfig.cssPath,
- jsPath: algorithmConfig.jsPath || `${algorithmConfig.name.toLowerCase().replace(/\s+/g, '-')}.js`,
- githubPath: algorithmConfig.githubPath || this.generateGithubPath(algorithmConfig)
- };
- }
-
- /**
- * Auto-generate GitHub path based on algorithm info
- * Prefers *-core.js files for better source code focus
- */
- generateGithubPath(config) {
- // Prefer *-core.js files for better source code focus on algorithm logic
- const algorithmSlug = config.name.toLowerCase().replace(/\s+/g, '-');
+ static generateGithubPath(config) {
+ const algorithmSlug = config.name.toLowerCase().replace(/\\s+/g, '-');
const coreFileName = `${algorithmSlug}-core.js`;
const fileName = config.jsPath || coreFileName;
-
- // Use the first category for the GitHub path
const primaryCategory = Array.isArray(config.category) ? config.category[0] : config.category;
return `https://github.com/sachinlala/SimplifyLearning/blob/master/algorithms-js/src/${primaryCategory}/${algorithmSlug}/${fileName}`;
}
- /**
- * Generate Java source path based on algorithm info
- */
- generateJavaPath(config) {
- // Use the first category for the Java path
+ static generateJavaPath(config) {
const primaryCategory = Array.isArray(config.category) ? config.category[0] : config.category;
- const algorithmName = config.name.toLowerCase().replace(/\s+/g, '');
+ const algorithmName = config.name.toLowerCase().replace(/\\s+/g, '');
return `https://github.com/sachinlala/SimplifyLearning/tree/master/algorithms-java/src/main/java/com/sl/algorithms/${primaryCategory}/${algorithmName}`;
}
- /**
- * Check if algorithm is a sorting algorithm (supports both string and array categories)
- */
- isSortingAlgorithm(category) {
- if (typeof category === 'string') {
- return category === 'sort';
- }
- if (Array.isArray(category)) {
- return category.includes('sort');
- }
- return false;
- }
-
- /**
- * Generate dynamic algorithms home URL based on config and current environment
- */
- generateDynamicAlgorithmsHomeUrl(config) {
- // If basePath is provided in config, use it to determine the home URL
+ static generateDynamicAlgorithmsHomeUrl(config) {
if (config.basePath) {
return config.basePath + '/';
}
-
- // For development/relative paths, go back to algorithms index.html
return '../../../index.html';
}
- /**
- * Generate algorithms home URL for navigation (always points to algorithms home, not site root)
- */
- generateAlgorithmsHomeUrl(config) {
- // Always point to the algorithms index, never to site root
+ static generateAlgorithmsHomeUrl(config) {
if (config.basePath) {
return `${config.basePath}/index.html`;
}
return '../../../index.html';
}
- /**
- * Generate complete HTML page
- */
- generateHTML(algorithmConfig) {
- const config = this.mergeConfig(algorithmConfig);
- this.validateConfig(config);
-
- // Build dynamic paths based on basePath
- const cssPath = config.basePath ? `${config.basePath}/assets/css/styles.css` : config.cssPath;
- const vendorPath = config.basePath ? `${config.basePath}/assets/vendor/prism` : "../../../assets/vendor/prism";
+ static generateFaviconPath(config, size = '') {
+ const basePath = config.basePath || '../../../';
+ const sizeStr = size ? `-${size}` : '';
+ const extension = size ? '.png' : '.ico';
+ return `${basePath}/assets/favicon/favicon${sizeStr}${extension}`;
+ }
+
+ static generateCSSPath(config) {
+ return config.basePath ? `${config.basePath}/assets/css/styles.css` : config.cssPath;
+ }
+
+ static generateVendorPath(config, script = '') {
+ const basePath = config.basePath || '../../../';
+ const scriptPath = script ? `/${script}` : '';
+ return `${basePath}/assets/vendor/prism${scriptPath}`;
+ }
+
+ static generateScriptPaths(config) {
+ const basePath = config.basePath || '../../../';
+ return {
+ unifiedThemeManager: `${basePath}/assets/js/unified-theme-manager.js`,
+ sidebar: `${basePath}/assets/js/sidebar.js`,
+ components: config.componentsPath || `${basePath}/assets/js/components.js`,
+ utils: `${basePath}/assets/js/utils.js`
+ };
+ }
+
+ static isSortingAlgorithm(category) {
+ if (typeof category === 'string') {
+ return category === 'sort';
+ }
+ if (Array.isArray(category)) {
+ return category.includes('sort');
+ }
+ return false;
+ }
+
+ static generateLogoPath(config) {
+ const basePath = config.basePath || '../../../';
+ return `${basePath}/assets/images/sl-logo.svg`;
+ }
+}
+
+// ===== SOURCE CODE HANDLER MODULE =====
+class SourceCodeHandler {
+ static generateSourceCodeSection(config) {
+ const sourceCode = config.sourceCode || {
+ javascript: PathGenerator.generateGithubPath(config),
+ java: PathGenerator.generateJavaPath(config),
+ python: "",
+ go: ""
+ };
- return `
-
-
-
-
-
-
- How it works
- -
-
- ${config.explanation.description}
- ${steps ? `- \n ${steps}\n
- ${this.generateInputSection(config)}
- ${this.generateOutputSection(config)}
- ${config.hasVisualization ? this.generateVisualizationSection(config) : ''}
- ${this.generateSourceCodeSection(config)}
-
-
+
`;
+ }
+}
+
+// ===== TEMPLATE MANAGER (MAIN ORCHESTRATOR) =====
+class TemplateManager {
+ constructor() {
+ this.baseConfig = this.getBaseConfig();
+ }
+
+ getBaseConfig() {
+ return {
+ cssPath: "../../../assets/css/styles.css",
+ componentsPath: "../../../assets/js/components.js",
+ backPath: "../../../index.html",
+ hasVisualization: false
+ };
+ }
+
+ mergeConfig(algorithmConfig) {
+ return {
+ ...this.baseConfig,
+ ...algorithmConfig,
+ title: algorithmConfig.title || `${algorithmConfig.name} Demo`,
+ cssPath: algorithmConfig.cssPath || this.baseConfig.cssPath,
+ jsPath: algorithmConfig.jsPath || `${algorithmConfig.name.toLowerCase().replace(/\\s+/g, '-')}.js`,
+ githubPath: algorithmConfig.githubPath || PathGenerator.generateGithubPath(algorithmConfig)
+ };
}
- /**
- * Validate required configuration properties
- */
validateConfig(config) {
const required = ['name', 'category', 'problem'];
const missing = required.filter(prop => !config[prop]);
@@ -192,31 +188,27 @@ class DynamicAlgorithmTemplate {
throw new Error(`Missing required config properties: ${missing.join(', ')}`);
}
- // Validate category is either string or non-empty array
if (Array.isArray(config.category)) {
if (config.category.length === 0) {
throw new Error('Category array cannot be empty');
}
} else if (typeof config.category !== 'string') {
- throw new Error('Category must be a string or array of strings');
+ throw new Error('Category must be a string or non-empty array');
}
-
- if (!config.inputs || !Array.isArray(config.inputs)) {
- throw new Error('Config must include inputs array');
+ }
+
+ isSortingAlgorithm(category) {
+ if (typeof category === 'string') {
+ return category === 'sort';
}
-
- if (!config.explanation || !config.explanation.description) {
- throw new Error('Config must include explanation with description');
+ if (Array.isArray(category)) {
+ return category.includes('sort');
}
+ return false;
}
- /**
- * Generate header section
- */
+ // Simplified HTML generation methods (embedded for efficiency)
generateHeader(config) {
- // Generate dynamic SL logo link
- const homeUrl = this.generateDynamicAlgorithmsHomeUrl(config);
-
return `
Source Code
+
+ ${languageLinks}
+
+ 
+
-
+
🏠 Home
- ${this.isSortingAlgorithm(config.category) ? `📊 Sorting Algorithms` : ''}
+ ${this.isSortingAlgorithm(config.category) ? `📊 Sorting Algorithms` : ''}