ultimate-jekyll-manager 0.0.221 → 0.0.223

package/dist/assets/js/libs/form-manager.js

@@ -95,6 +95,9 @@ export class FormManager {
     // Handle page restored from bfcache (e.g., back button after OAuth redirect)
     window.addEventListener('pageshow', (e) => this._handlePageShow(e));
 
+    // Initialize file drop zones
+    this._initFileDropZones();
+
     // Auto-transition to initialState when DOM is ready
     if (this.config.autoReady) {
       domReady().then(() => this._setInitialState());
@@ -281,6 +284,12 @@ export class FormManager {
     if (this._fieldErrors[e.target.name]) {
       this._clearFieldError(e.target.name);
     }
+
+    // Clear file drop error when the file input inside a drop zone changes
+    const $zone = e.target.closest('[data-file-drop]');
+    if ($zone) {
+      $zone.classList.remove('file-drop-error');
+    }
   }
 
   /**
@@ -537,6 +546,11 @@ export class FormManager {
       this._clearFieldError(fieldName);
     }
     this._fieldErrors = {};
+
+    // Clear file drop error states
+    this.$form.querySelectorAll('[data-file-drop].file-drop-error').forEach(($zone) => {
+      $zone.classList.remove('file-drop-error');
+    });
   }
 
   /**
@@ -964,6 +978,269 @@ export class FormManager {
     return allowedGroups.includes(fieldGroup.toLowerCase());
   }
 
+  /**
+   * Initialize file drop zones within the form
+   * Scans for [data-file-drop] containers and attaches drag-and-drop behavior
+   */
+  _initFileDropZones() {
+    const $zones = this.$form.querySelectorAll('[data-file-drop]');
+
+    /* @dev-only:start */
+    {
+      console.log('[Form-manager] _initFileDropZones found', $zones.length, 'zones');
+    }
+    /* @dev-only:end */
+
+    $zones.forEach(($zone) => {
+      this._setupFileDropZone($zone);
+    });
+  }
+
+  /**
+   * Set up a single file drop zone
+   * @param {HTMLElement} $zone - The container with data-file-drop attribute
+   */
+  _setupFileDropZone($zone) {
+    const $input = $zone.querySelector('input[type="file"]');
+    if (!$input) {
+      return;
+    }
+
+    const mode = ($zone.getAttribute('data-file-drop') || '').toLowerCase();
+    const isPageMode = mode === 'page';
+
+    /* @dev-only:start */
+    {
+      console.log('[Form-manager] Setting up file drop zone', {
+        mode: isPageMode ? 'page' : 'local',
+        input: $input.name || $input.id,
+      });
+    }
+    /* @dev-only:end */
+
+    // Track drag enter/leave depth for reliable active state
+    let dragDepth = 0;
+
+    // Determine the drop target (zone or entire page)
+    const $dropTarget = isPageMode ? document.body : $zone;
+
+    // Helper: check if event landed on a different local drop zone (page mode only)
+    // If so, let that zone handle it instead
+    const isOverOtherZone = (e) => {
+      if (!isPageMode) {
+        return false;
+      }
+
+      const $closest = e.target.closest('[data-file-drop]');
+      return $closest && $closest !== $zone;
+    };
+
+    // Prevent default on dragover to allow drop
+    $dropTarget.addEventListener('dragover', (e) => {
+      if (isOverOtherZone(e)) {
+        return;
+      }
+
+      e.preventDefault();
+    });
+
+    // Track drag enter for active state
+    $dropTarget.addEventListener('dragenter', (e) => {
+      if (isOverOtherZone(e)) {
+        return;
+      }
+
+      e.preventDefault();
+      dragDepth++;
+
+      if (dragDepth === 1) {
+        $zone.classList.add('file-drop-active');
+      }
+    });
+
+    // Track drag leave for active state
+    $dropTarget.addEventListener('dragleave', (e) => {
+      if (isOverOtherZone(e)) {
+        return;
+      }
+
+      e.preventDefault();
+      dragDepth--;
+
+      if (dragDepth === 0) {
+        $zone.classList.remove('file-drop-active');
+      }
+    });
+
+    // Handle drop
+    $dropTarget.addEventListener('drop', (e) => {
+      if (isOverOtherZone(e)) {
+        return;
+      }
+
+      e.preventDefault();
+      dragDepth = 0;
+      $zone.classList.remove('file-drop-active');
+
+      this._handleFileDrop(e, $input, $zone);
+    });
+
+    // Click-to-browse: click anywhere on the zone opens the file picker
+    $zone.addEventListener('click', (e) => {
+      // Skip if clicking the input itself (avoid double-open)
+      if (e.target === $input) {
+        return;
+      }
+
+      $input.click();
+    });
+
+    // Update file name display when file is selected via browse dialog
+    $input.addEventListener('change', () => {
+      this._updateFileDropName($input, $zone);
+    });
+  }
+
+  /**
+   * Handle a file drop event
+   * @param {DragEvent} e - The drop event
+   * @param {HTMLInputElement} $input - The file input to assign files to
+   * @param {HTMLElement} $zone - The drop zone container
+   */
+  _handleFileDrop(e, $input, $zone) {
+    const files = e.dataTransfer?.files;
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    // Assign files to the input using DataTransfer
+    const dt = new DataTransfer();
+    const acceptAttr = $input.getAttribute('accept');
+    const isMultiple = $input.hasAttribute('multiple');
+
+    for (const file of files) {
+      // Filter by accept attribute if present
+      if (acceptAttr && !this._fileMatchesAccept(file, acceptAttr)) {
+        continue;
+      }
+
+      dt.items.add(file);
+
+      // Only take the first file if input is not multiple
+      if (!isMultiple) {
+        break;
+      }
+    }
+
+    // Show error if no valid files after filtering
+    if (dt.files.length === 0) {
+      $zone.classList.add('file-drop-error');
+      this.showError(`File type not accepted. Accepted: ${acceptAttr}`);
+      return;
+    }
+
+    $input.files = dt.files;
+
+    // Dispatch change event so existing handlers pick it up
+    $input.dispatchEvent(new Event('change', { bubbles: true }));
+
+    // Update file name display
+    this._updateFileDropName($input, $zone);
+
+    /* @dev-only:start */
+    {
+      console.log('[Form-manager] File dropped', {
+        files: Array.from(dt.files).map((f) => f.name),
+        input: $input.name || $input.id,
+      });
+    }
+    /* @dev-only:end */
+  }
+
+  /**
+   * Update the file name display element in a drop zone
+   * @param {HTMLInputElement} $input - The file input
+   * @param {HTMLElement} $zone - The drop zone container
+   */
+  _updateFileDropName($input, $zone) {
+    const $name = $zone.querySelector('[data-file-drop-name]');
+    if (!$name) {
+      return;
+    }
+
+    const files = $input.files;
+    if (!files || files.length === 0) {
+      $name.textContent = 'No file selected';
+      $zone.classList.remove('file-drop-has-file');
+      return;
+    }
+
+    if (files.length === 1) {
+      $name.textContent = files[0].name;
+    } else {
+      $name.textContent = `${files.length} files selected`;
+    }
+
+    $zone.classList.add('file-drop-has-file');
+    $zone.classList.remove('file-drop-error');
+  }
+
+  /**
+   * Check if a file matches an accept attribute value
+   * @param {File} file - The file to check
+   * @param {string} accept - The accept attribute value (e.g., "image/*,.pdf")
+   * @returns {boolean}
+   */
+  _fileMatchesAccept(file, accept) {
+    const types = accept.split(',').map((t) => t.trim().toLowerCase());
+    const fileName = file.name.toLowerCase();
+    const fileType = (file.type || '').toLowerCase();
+
+    // Common extension-to-MIME-category map for when browser doesn't provide file.type
+    const extToCategory = {
+      '.jpg': 'image/', '.jpeg': 'image/', '.png': 'image/', '.gif': 'image/',
+      '.webp': 'image/', '.svg': 'image/', '.bmp': 'image/', '.ico': 'image/',
+      '.pdf': 'application/pdf',
+    };
+
+    for (const type of types) {
+      // Extension match (e.g., ".pdf")
+      if (type.startsWith('.')) {
+        if (fileName.endsWith(type)) {
+          return true;
+        }
+        continue;
+      }
+
+      // Wildcard MIME match (e.g., "image/*")
+      if (type.endsWith('/*')) {
+        const prefix = type.slice(0, -2) + '/';
+
+        // Check actual MIME type
+        if (fileType && fileType.startsWith(prefix)) {
+          return true;
+        }
+
+        // Fallback: check extension when browser doesn't provide MIME type
+        if (!fileType) {
+          const ext = '.' + fileName.split('.').pop();
+          const guessedCategory = extToCategory[ext] || '';
+          if (guessedCategory.startsWith(prefix)) {
+            return true;
+          }
+        }
+        continue;
+      }
+
+      // Exact MIME match (e.g., "application/pdf")
+      if (fileType === type) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   /**
    * Set form data from a nested object (supports dot notation field names)
    */

package/dist/assets/js/pages/test/libraries/form-manager/index.js

@@ -22,6 +22,7 @@ export default (Manager) => {
     initTestFormContact();
     initTestFormManual();
     initTestFormGroups();
+    initTestFormFileDrop();
 
     // Resolve after initialization
     return resolve();
@@ -195,6 +196,8 @@ function initTestFormManual() {
 }
 
 // Test 5: Input Groups
+// Test 6: File Drop (defined below initTestFormGroups)
+
 function initTestFormGroups() {
   const formManager = new FormManager('#test-form-groups');
   const $status = document.getElementById('groups-status');
@@ -245,3 +248,23 @@ function initTestFormGroups() {
     formManager.showSuccess('getData() returned ' + Object.keys(data).length + ' top-level keys');
   });
 }
+
+// Test 6: File Drop
+function initTestFormFileDrop() {
+  const formManager = new FormManager('#test-form-file-drop');
+  const $status = document.getElementById('file-drop-status');
+
+  formManager.on('statechange', ({ state }) => {
+    $status.textContent = `Status: ${state}`;
+  });
+
+  formManager.on('change', ({ name, value }) => {
+    console.log('[Test 6] Change:', name, '=', value);
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    console.log('[Test 6] Submitting:', data);
+    await simulateApi(500);
+    formManager.showSuccess('File(s) submitted!');
+  });
+}

package/dist/assets/themes/classy/css/components/_forms.scss

@@ -124,3 +124,27 @@
     box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
   }
 }
+
+// ============================================
+// File Drop Zones
+// ============================================
+[data-file-drop] {
+  cursor: pointer;
+  border: 2px dashed var(--bs-border-color) !important;
+  border-radius: $classy-radius-lg;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+
+  &.file-drop-active {
+    border-color: $primary !important;
+    background-color: rgba($primary, 0.05);
+  }
+
+  &.file-drop-has-file {
+    border-color: $success !important;
+    border-style: solid !important;
+  }
+
+  &.file-drop-error {
+    border-color: $danger !important;
+  }
+}

package/dist/assets/themes/classy/css/layout/_navigation.scss

@@ -82,6 +82,7 @@
   font-weight: 700;
   font-size: 1.25rem;
   letter-spacing: -0.02em;
+  margin-right: 0;
 
   // Logo with text
   .brand-logo {
@@ -121,6 +122,11 @@
 // Navigation Links
 // ============================================
 .navbar-nav {
+  // Add top spacing on mobile so first item doesn't touch the toggler bar
+  @media (max-width: 991.98px) {
+    margin-top: 0.5rem;
+  }
+
   .nav-link {
     font-weight: 500;
     font-size: 0.95rem;

package/dist/defaults/dist/_includes/themes/classy/frontend/sections/nav.html

@@ -88,12 +88,12 @@
                   <li>
                     {% iftruthy child.href %}
                       <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
-                        {{ child_content }}
+                        {{ child_content | strip }}
                       </a>
                     {% endiftruthy %}
                     {% iffalsy child.href %}
                       <button class="{{ child_class }}" type="button" {{ child_attributes }}>
-                        {{ child_content }}
+                        {{ child_content | strip }}
                       </button>
                     {% endiffalsy %}
                   </li>
@@ -143,12 +143,12 @@
                     <li>
                       {% iftruthy child.href %}
                         <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
-                          {{ child_content }}
+                          {{ child_content | strip }}
                         </a>
                       {% endiftruthy %}
                       {% iffalsy child.href %}
                         <button class="{{ child_class }}" type="button" {{ child_attributes }}>
-                          {{ child_content }}
+                          {{ child_content | strip }}
                         </button>
                       {% endiffalsy %}
                     </li>
@@ -171,12 +171,12 @@
             <li class="nav-item">
               {% iftruthy link.href %}
                 <a class="{{ link_class }}" href="{{ link.href }}" {{ link_attributes }}>
-                  {{ link_content }}
+                  {{ link_content | strip }}
                 </a>
               {% endiftruthy %}
               {% iffalsy link.href %}
                 <button class="{{ link_class }}" type="button" {{ link_attributes }}>
-                  {{ link_content }}
+                  {{ link_content | strip }}
                 </button>
               {% endiffalsy %}
             </li>
@@ -185,13 +185,13 @@
       </ul>
 
       <!-- Right-aligned Actions (desktop only) -->
-      <div class="d-none d-lg-inline-flex align-items-center">
+      <div class="d-none d-lg-inline-flex align-items-center gap-3">
         {% for action in data.actions %}
           {% if action.dropdown %}
             {% if action.type == 'account' %}
               <!-- Account dropdown with profile picture (desktop) -->
               {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
-              <div class="dropdown ms-lg-3 animation-slide-up d-inline-flex" data-wm-bind="@show auth.user" hidden>
+              <div class="dropdown animation-slide-up d-inline-flex" data-wm-bind="@show auth.user" hidden>
                 <button class="p-0 border-0 bg-transparent" type="button" data-bs-toggle="dropdown" {{ action_attributes }} aria-expanded="false">
                   <span class="d-flex align-items-center">
                     <span class="position-relative d-inline-flex">
@@ -244,12 +244,12 @@
                       <li>
                         {% iftruthy child.href %}
                           <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
-                            {{ child_content }}
+                            {{ child_content | strip }}
                           </a>
                         {% endiftruthy %}
                         {% iffalsy child.href %}
                           <button class="{{ child_class }}" type="button" {{ child_attributes }}>
-                            {{ child_content }}
+                            {{ child_content | strip }}
                           </button>
                         {% endiffalsy %}
                       </li>
@@ -261,7 +261,7 @@
               <!-- Regular button dropdown -->
               {% capture action_class %}btn dropdown-toggle {% if action.class %}{{ action.class }}{% endif %}{% endcapture %}
               {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
-              <div class="dropdown ms-lg-3">
+              <div class="dropdown">
                 <button class="{{ action_class }}" type="button" data-bs-toggle="dropdown" {{ action_attributes }}>
                   <span class="d-inline-flex align-items-center">
                     {% if action.icon %}
@@ -290,12 +290,12 @@
                       <li>
                         {% iftruthy child.href %}
                           <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
-                            {{ child_content }}
+                            {{ child_content | strip }}
                           </a>
                         {% endiftruthy %}
                         {% iffalsy child.href %}
                           <button class="{{ child_class }}" type="button" {{ child_attributes }}>
-                            {{ child_content }}
+                            {{ child_content | strip }}
                           </button>
                         {% endiffalsy %}
                       </li>
@@ -305,7 +305,7 @@
               </div>
             {% endif %}
           {% else %}
-            {% capture action_class %}btn ms-lg-3 {% if action.class %}{{ action.class }}{% endif %}{% endcapture %}
+            {% capture action_class %}btn {% if action.class %}{{ action.class }}{% endif %}{% endcapture %}
             {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
             {% capture action_content %}
               <span class="d-inline-flex align-items-center">
@@ -317,12 +317,12 @@
             {% endcapture %}
             {% iftruthy action.href %}
               <a class="{{ action_class }}" href="{{ action.href }}" role="button" {{ action_attributes }}>
-                {{ action_content }}
+                {{ action_content | strip }}
               </a>
             {% endiftruthy %}
             {% iffalsy action.href %}
               <button class="{{ action_class }}" type="button" {{ action_attributes }}>
-                {{ action_content }}
+                {{ action_content | strip }}
               </button>
             {% endiffalsy %}
           {% endif %}
@@ -366,12 +366,12 @@
                       <li>
                         {% iftruthy child.href %}
                           <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
-                            {{ child_content }}
+                            {{ child_content | strip }}
                           </a>
                         {% endiftruthy %}
                         {% iffalsy child.href %}
                           <button class="{{ child_class }}" type="button" {{ child_attributes }}>
-                            {{ child_content }}
+                            {{ child_content | strip }}
                           </button>
                         {% endiffalsy %}
                       </li>
@@ -392,12 +392,12 @@
               {% endcapture %}
               {% iftruthy action.href %}
                 <a class="{{ action_class }}" href="{{ action.href }}" role="button" {{ action_attributes }}>
-                  {{ action_content }}
+                  {{ action_content | strip }}
                 </a>
               {% endiftruthy %}
               {% iffalsy action.href %}
                 <button class="{{ action_class }}" type="button" {{ action_attributes }}>
-                  {{ action_content }}
+                  {{ action_content | strip }}
                 </button>
               {% endiffalsy %}
             {% endif %}

package/dist/defaults/dist/pages/test/libraries/ads.html

@@ -13,7 +13,8 @@ meta:
   index: false
 ---
 
-<div class="container py-5">
+<section>
+<div class="container">
   <div class="row">
     <div class="col-lg-8 mx-auto">
       <h1 class="h2 mb-4">AdSense Test Page</h1>
@@ -69,3 +70,4 @@ meta:
     </div>
   </div>
 </div>
+</section>

package/dist/defaults/dist/pages/test/libraries/appearance.html

@@ -14,7 +14,8 @@ meta:
 
 ---
 
-<div class="container py-5">
+<section>
+<div class="container">
   <h1 class="mb-4">Appearance Test Page</h1>
   <p class="text-muted mb-5">Testing the appearance switching system with detailed debugging information.</p>
 
@@ -269,3 +270,4 @@ meta:
 
   </div>
 </div>
+</section>

package/dist/defaults/dist/pages/test/libraries/bootstrap.html

@@ -13,7 +13,8 @@ meta:
   index: false
 ---
 
-<div class="container py-5">
+<section>
+<div class="container">
   <h1 class="display-1 mb-5">Bootstrap Components Test Page</h1>
 
   <!-- Core CSS Utilities -->
@@ -1522,3 +1523,4 @@ meta:
   </section>
 
 </div>
+</section>

package/dist/defaults/dist/pages/test/libraries/error.html

@@ -13,7 +13,8 @@ meta:
   index: false
 ---
 
-<div class="container py-5">
+<section>
+<div class="container">
   <div class="row">
     <div class="col-lg-8 mx-auto">
       <h1 class="h2 mb-4">Error Test Page</h1>
@@ -30,3 +31,4 @@ meta:
     </div>
   </div>
 </div>
+</section>

package/dist/defaults/dist/pages/test/libraries/form-manager.html

@@ -13,11 +13,12 @@ meta:
   index: false
 ---
 
-<div class="container py-5">
-  <h1 class="mb-4">FormManager Test Page</h1>
-  <p class="text-muted mb-5">Testing different configurations of the FormManager library.</p>
+<section>
+  <div class="container">
+    <h1 class="mb-4">FormManager Test Page</h1>
+    <p class="text-muted mb-5">Testing different configurations of the FormManager library.</p>
 
-  <div class="row g-4">
+    <div class="row g-4">
 
     <!-- Test 1: Full Test (success/fail, nested, change events) -->
     <div class="col-lg-8">
@@ -264,5 +265,42 @@ meta:
       </div>
     </div>
 
+    <!-- Test 6: File Drop -->
+    <div class="col-lg-4">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">Test 6: File Drop</h5>
+          <small class="text-muted">data-file-drop (local) and data-file-drop="page"</small>
+        </div>
+        <div class="card-body">
+          <form id="test-form-file-drop">
+            <h6 class="text-muted mb-2">Local mode <span class="badge bg-secondary">default</span></h6>
+            <div class="p-4 text-center mb-3" data-file-drop>
+              <p class="mb-2">Drag & drop or click to browse</p>
+              <input type="file" class="form-control mx-auto" style="max-width: 300px;" name="localFile">
+              <p data-file-drop-name class="small mt-2 mb-0 text-muted">No file selected</p>
+            </div>
+            <h6 class="text-muted mb-2">Local mode + accept <span class="badge bg-warning text-dark">accept=".pdf"</span></h6>
+            <div class="p-4 text-center mb-3" data-file-drop>
+              <p class="mb-2">Drag & drop or click to browse (PDF only)</p>
+              <input type="file" class="form-control mx-auto" style="max-width: 300px;" name="pdfFile" accept=".pdf">
+              <p data-file-drop-name class="small mt-2 mb-0 text-muted">No file selected</p>
+            </div>
+            <h6 class="text-muted mb-2">Page mode <span class="badge bg-info">data-file-drop="page"</span></h6>
+            <div class="p-4 text-center mb-3" data-file-drop="page">
+              <p class="mb-2">Drop anywhere on the page</p>
+              <input type="file" class="form-control mx-auto" style="max-width: 300px;" name="pageFile">
+              <p data-file-drop-name class="small mt-2 mb-0 text-muted">No file selected</p>
+            </div>
+            <button type="submit" class="btn btn-primary" disabled>Submit</button>
+          </form>
+          <div class="mt-2">
+            <small class="text-muted" id="file-drop-status">Status: ready</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    </div>
   </div>
-</div>
+</section>

package/dist/defaults/dist/pages/test/libraries/lazy-loading.html

@@ -13,7 +13,8 @@ meta:
   index: false
 ---
 
-<div class="container py-5">
+<section>
+<div class="container">
   <div class="row">
     <div class="col-lg-8 mx-auto">
       <h1 class="h2 mb-4">Lazy Loading Test Page</h1>
@@ -384,6 +385,7 @@ meta:
     </div>
   </div>
 </div>
+</section>
 
 <!-- Script for dynamic content test -->
 <script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "0.0.221",
+  "version": "0.0.223",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {