@dodlhuat/basix 1.2.0 → 1.2.1

package/js/form-builder.js

@@ -1,107 +1,107 @@
-let dragged_element = null;
-let action = 'copy';
-let row_count = 1;
-
-let formbuilder = {
-    init() {
-        document.querySelectorAll('.draggable').forEach(function (element) {
-            element.removeEventListener("dragstart", dragAction);
-            element.addEventListener("dragstart", dragAction);
-        });
-        initDropzones();
-    },
-    addRow() {
-        document.querySelector('.form-content').innerHTML += buildRowElement();
-    },
-    addColumn() {
-
-    },
-    removeRow() {
-
-    },
-    removeColumn() {
-
-    },
-    load(file_name) {
-        load(file_name).then((data) => {
-            console.log(data);
-        });
-    }
-}
-
-const moveAction = function (event) {
-    dragged_element = event.target;
-    action = 'move';
-}
-const dragAction = function (event) {
-    dragged_element = event.target;
-    action = 'copy';
-}
-const addMoveListeners = function () {
-    document.querySelectorAll('.movable').forEach(function (element) {
-        element.removeEventListener("dragstart", moveAction);
-        element.addEventListener("dragstart", moveAction);
-    });
-}
-
-const load = async function (file_name) {
-    const url = new URL(file_name,
-        document.currentScript && document.currentScript.src || location.href)
-    // fetch and parse template as string
-    let template = await fetch(url)
-    template = await template.text()
-    template = new DOMParser().parseFromString(template, 'text/html')
-        .querySelector('template')
-    if (!template) throw new TypeError('No template element found')
-    return template.innerHTML.trim()
-}
-
-const buildRowElement = function () {
-    const row = document.createElement('div');
-    row_count++;
-    row.setAttribute('data-row-id', String(row_count));
-    row.className = 'row';
-    const col = document.createElement('div');
-    col.className = 'column';
-    const dropzone = document.createElement('div');
-    dropzone.className = 'dropzone';
-    col.innerHTML = dropzone.outerHTML;
-    row.innerHTML = col.outerHTML;
-    return row.outerHTML;
-}
-
-const dropEvent = function (event) {
-    event.preventDefault();
-    let node = dragged_element;
-    if (action === 'copy') {
-        node = dragged_element.cloneNode(true);
-    }
-    node.classList.remove('draggable');
-    node.classList.add('movable');
-    const label = node.querySelector('span.label');
-    if (label) {
-        label.setAttribute('contenteditable', true);
-    }
-    const pElement = node.querySelector('p');
-    if (pElement) {
-        pElement.setAttribute('contenteditable', true);
-    }
-    event.target.appendChild(node);
-    addMoveListeners();
-}
-
-const dragOverEvent = function (event) {
-    event.preventDefault();
-    event.dataTransfer.effectAllowed = action;
-}
-
-const initDropzones = function () {
-    document.querySelectorAll('.dropzone').forEach(function (dropzone) {
-        dropzone.removeEventListener('drop', dropEvent);
-        dropzone.addEventListener('drop', dropEvent);
-        dropzone.removeEventListener('dragover', dragOverEvent);
-        dropzone.addEventListener('dragover', dragOverEvent);
-    });
-}
-
+let dragged_element = null;
+let action = 'copy';
+let row_count = 1;
+
+let formbuilder = {
+    init() {
+        document.querySelectorAll('.draggable').forEach(function (element) {
+            element.removeEventListener("dragstart", dragAction);
+            element.addEventListener("dragstart", dragAction);
+        });
+        initDropzones();
+    },
+    addRow() {
+        document.querySelector('.form-content').innerHTML += buildRowElement();
+    },
+    addColumn() {
+
+    },
+    removeRow() {
+
+    },
+    removeColumn() {
+
+    },
+    load(file_name) {
+        load(file_name).then((data) => {
+            console.log(data);
+        });
+    }
+}
+
+const moveAction = function (event) {
+    dragged_element = event.target;
+    action = 'move';
+}
+const dragAction = function (event) {
+    dragged_element = event.target;
+    action = 'copy';
+}
+const addMoveListeners = function () {
+    document.querySelectorAll('.movable').forEach(function (element) {
+        element.removeEventListener("dragstart", moveAction);
+        element.addEventListener("dragstart", moveAction);
+    });
+}
+
+const load = async function (file_name) {
+    const url = new URL(file_name,
+        document.currentScript && document.currentScript.src || location.href)
+    // fetch and parse template as string
+    let template = await fetch(url)
+    template = await template.text()
+    template = new DOMParser().parseFromString(template, 'text/html')
+        .querySelector('template')
+    if (!template) throw new TypeError('No template element found')
+    return template.innerHTML.trim()
+}
+
+const buildRowElement = function () {
+    const row = document.createElement('div');
+    row_count++;
+    row.setAttribute('data-row-id', String(row_count));
+    row.className = 'row';
+    const col = document.createElement('div');
+    col.className = 'column';
+    const dropzone = document.createElement('div');
+    dropzone.className = 'dropzone';
+    col.innerHTML = dropzone.outerHTML;
+    row.innerHTML = col.outerHTML;
+    return row.outerHTML;
+}
+
+const dropEvent = function (event) {
+    event.preventDefault();
+    let node = dragged_element;
+    if (action === 'copy') {
+        node = dragged_element.cloneNode(true);
+    }
+    node.classList.remove('draggable');
+    node.classList.add('movable');
+    const label = node.querySelector('span.label');
+    if (label) {
+        label.setAttribute('contenteditable', true);
+    }
+    const pElement = node.querySelector('p');
+    if (pElement) {
+        pElement.setAttribute('contenteditable', true);
+    }
+    event.target.appendChild(node);
+    addMoveListeners();
+}
+
+const dragOverEvent = function (event) {
+    event.preventDefault();
+    event.dataTransfer.effectAllowed = action;
+}
+
+const initDropzones = function () {
+    document.querySelectorAll('.dropzone').forEach(function (dropzone) {
+        dropzone.removeEventListener('drop', dropEvent);
+        dropzone.addEventListener('drop', dropEvent);
+        dropzone.removeEventListener('dragover', dragOverEvent);
+        dropzone.addEventListener('dragover', dragOverEvent);
+    });
+}
+
 export {formbuilder}

package/js/gallery.js

@@ -124,9 +124,15 @@ class MasonryGallery {
         }
     }
     renderImages(imageDataList) {
-        imageDataList.forEach((data) => {
+        // Sort columns by current height so we start filling from the shortest.
+        // Then round-robin across them — this avoids the problem where unloaded
+        // images (0 height) cause offsetHeight-based distribution to pile all
+        // new items into a single column.
+        const sorted = [...this.columns].sort((a, b) => a.offsetHeight - b.offsetHeight);
+        imageDataList.forEach((data, index) => {
             const item = this.createCard(data);
-            this.addToShortestColumn(item);
+            const col = sorted[index % sorted.length];
+            col.appendChild(item);
             requestAnimationFrame(() => {
                 const img = item.querySelector("img");
                 if (img) {
@@ -143,12 +149,12 @@ class MasonryGallery {
     createCard(data) {
         const div = document.createElement("div");
         div.className = "masonry-item";
-        div.innerHTML = `
-      <img src="${this.escapeHtml(data.src)}" alt="${this.escapeHtml(data.title)}" loading="lazy">
-      <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${this.escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${this.escapeHtml(data.desc)}</p>
-      </div>
+        div.innerHTML = `
+      <img src="${this.escapeHtml(data.src)}" alt="${this.escapeHtml(data.title)}" loading="lazy">
+      <div class="masonry-item-info">
+        <h3 class="masonry-item-title">${this.escapeHtml(data.title)}</h3>
+        <p class="masonry-item-desc">${this.escapeHtml(data.desc)}</p>
+      </div>
     `;
         return div;
     }