domma-js 0.7.2-alpha → 0.7.5-alpha

package/templates/kickstart/js/app.js

@@ -1,112 +1,111 @@
 /**
  * Domma Kickstart Application
  *
- * This file initializes your Domma project based on domma.config.json.
- * Customize the config file to change navbar, footer, theme, and features.
+ * This file initialises your Domma project based on domma.config.json.
+ * Customise the config file to change navbar, footer, theme, and features.
  */
 
-(async function () {
+$(() => {
   // Load configuration
-  const response = await fetch('./domma.config.json');
-  const config = await response.json();
-
-  // Initialize theme
-  if (config.theme) {
-    Domma.theme.init({
-      theme: config.theme.default || 'charcoal-dark',
-      persist: config.theme.persist !== false,
-      autoDetect: config.theme.autoDetect === true
-    });
-
-    // Add theme selector if enabled
-    if (config.theme.selector) {
-      addThemeSelector();
-    }
-  }
-
-  // Initialize navbar
-  if (config.navbar) {
-    Domma.elements.navbar('#main-navbar', {
-      brand: config.navbar.brand,
-      items: config.navbar.items,
-      variant: config.navbar.variant || 'dark',
-      position: config.navbar.position || 'sticky',
-      collapsible: config.navbar.collapsible !== false
-    });
-  }
-
-  // Initialize footer
-  if (config.footer) {
-    const footer = document.querySelector('.page-footer');
-    if (footer) {
-      const footerContent = document.createElement('div');
-      footerContent.className = 'footer-content';
-
-      const copyright = document.createElement('p');
-      copyright.textContent = config.footer.copyright;
-      footerContent.appendChild(copyright);
-
-      const nav = document.createElement('nav');
-      nav.className = 'footer-nav';
-      config.footer.links.forEach(link => {
-        const a = document.createElement('a');
-        a.href = link.url;
-        a.textContent = link.text;
-        nav.appendChild(a);
+  Domma.http.get('./domma.config.json').then(config => {
+    // Initialise theme
+    if (config.theme) {
+      Domma.theme.init({
+        theme: config.theme.default || 'charcoal-dark',
+        persist: config.theme.persist !== false,
+        autoDetect: config.theme.autoDetect === true
       });
-      footerContent.appendChild(nav);
 
-      footer.appendChild(footerContent);
+      // Add theme selector if enabled
+      if (config.theme.selector) {
+        addThemeSelector();
+      }
     }
-  }
 
-  // Initialize features
-  if (config.features) {
-    // Icon scanning
-    if (config.features.icons) {
-      Domma.icons.scan();
+    // Initialise navbar
+    if (config.navbar) {
+      Domma.elements.navbar('#main-navbar', {
+        brand: config.navbar.brand,
+        items: config.navbar.items,
+        variant: config.navbar.variant || 'dark',
+        position: config.navbar.position || 'sticky',
+        collapsible: config.navbar.collapsible !== false
+      });
     }
 
-    // Back to top button
-    if (config.features.backToTop) {
-      Domma.elements.backToTop({
-        scrollThreshold: 300,
-        position: 'bottom-right'
-      });
+    // Initialise footer
+    if (config.footer) {
+      const $footer = $('.page-footer');
+      if ($footer.length) {
+        const $footerContent = $('<div class="footer-content"></div>');
+
+        const $copyright = $('<p></p>').text(config.footer.copyright);
+        $footerContent.append($copyright);
+
+        const $nav = $('<nav class="footer-nav"></nav>');
+        _.each(config.footer.links, link => {
+          const $link = $('<a></a>')
+            .attr('href', link.url)
+            .text(link.text);
+          $nav.append($link);
+        });
+        $footerContent.append($nav);
+
+        $footer.append($footerContent);
+      }
     }
 
-    // Smooth scroll
-    if (config.features.smoothScroll) {
-      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
+    // Initialise features
+    if (config.features) {
+      // Icon scanning
+      if (config.features.icons) {
+        Domma.icons.scan();
+      }
+
+      // Back to top button
+      if (config.features.backToTop) {
+        Domma.elements.backToTop({
+          scrollThreshold: 300,
+          position: 'bottom-right'
+        });
+      }
+
+      // Smooth scroll
+      if (config.features.smoothScroll) {
+        $('a[href^="#"]').on('click', function (e) {
           e.preventDefault();
-          const target = document.querySelector(this.getAttribute('href'));
-          if (target) {
-            target.scrollIntoView({behavior: 'smooth'});
+          const targetId = $(this).attr('href');
+          const $target = $(targetId);
+
+          if ($target.length) {
+            $target[0].scrollIntoView({behavior: 'smooth'});
           }
         });
-      });
-    }
+      }
 
-    // Code copy buttons
-    if (config.features.codeCopy) {
-      document.querySelectorAll('pre code').forEach(block => {
-        const button = document.createElement('button');
-        button.textContent = 'Copy';
-        button.className = 'btn btn-sm code-copy-btn';
-        button.onclick = () => {
-          navigator.clipboard.writeText(block.textContent);
-          button.textContent = 'Copied!';
-          setTimeout(() => button.textContent = 'Copy', 2000);
-        };
-        block.parentElement.style.position = 'relative';
-        block.parentElement.insertBefore(button, block);
-      });
+      // Code copy buttons
+      if (config.features.codeCopy) {
+        $('pre code').each((codeBlock) => {
+          const $code = $(codeBlock);
+          const $pre = $code.parent();
+
+          const $button = $('<button class="btn btn-sm code-copy-btn">Copy</button>');
+
+          $button.on('click', () => {
+            _.copyToClipboard($code.text());
+            $button.text('Copied!');
+            setTimeout(() => $button.text('Copy'), 2000);
+          });
+
+          $pre.css('position', 'relative');
+          $pre.prepend($button);
+        });
+      }
     }
-  }
 
-  console.log(`✓ Domma initialized with theme: ${config.theme.default}`);
-})();
+    console.log(`✓ Domma initialised with theme: ${config.theme.default}`);
+  });
+});
 
 /**
  * Add floating theme selector
@@ -115,28 +114,25 @@ function addThemeSelector() {
   const themes = Domma.theme.listThemes();
   const currentTheme = Domma.theme.get();
 
-  const selector = document.createElement('div');
-  selector.className = 'theme-selector';
+  const $selector = $('<div class="theme-selector"></div>');
+  const $select = $('<select id="theme-select" class="form-select"></select>');
 
-  const select = document.createElement('select');
-  select.id = 'theme-select';
-  select.className = 'form-select';
+  _.each(themes, theme => {
+    const $option = $('<option></option>')
+      .attr('value', theme)
+      .text(theme);
 
-  themes.forEach(theme => {
-    const option = document.createElement('option');
-    option.value = theme;
-    option.textContent = theme;
     if (theme === currentTheme) {
-      option.selected = true;
+      $option.attr('selected', 'selected');
     }
-    select.appendChild(option);
+
+    $select.append($option);
   });
 
-  selector.appendChild(select);
+  $selector.append($select);
 
   // Add styles
-  const style = document.createElement('style');
-  style.textContent = `
+  const $style = $(`<style>
         .theme-selector {
             position: fixed;
             bottom: 80px;
@@ -150,12 +146,13 @@ function addThemeSelector() {
         .theme-selector select {
             min-width: 150px;
         }
-    `;
-  document.head.appendChild(style);
-  document.body.appendChild(selector);
+    </style>`);
+
+  $('head').append($style);
+  $('body').append($selector);
 
   // Handle theme changes
-  select.addEventListener('change', (e) => {
-    Domma.theme.set(e.target.value);
+  $select.on('change', (e) => {
+    Domma.theme.set($(e.target).val());
   });
 }