domma-cms 0.2.1 → 0.5.0

package/admin/js/views/navigation.js

@@ -1,218 +1,20 @@
-/**
- * Navigation View
- */
-import {api} from '../api.js';
-
-let _nextId = 1;
-
-const esc = s => String(s || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
-
-function flattenItems(items) {
-    const flat = [];
-    (items || []).forEach(item => {
-        const id = _nextId++;
-        flat.push({ _id: id, text: item.text || '', url: item.url || '', icon: item.icon || '', parentId: null });
-        (item.items || item.children || []).forEach(child => {
-            flat.push({ _id: _nextId++, text: child.text || '', url: child.url || '', icon: child.icon || '', parentId: id });
-        });
-    });
-    return flat;
-}
-
-function nestItems(flat) {
-    return flat
-        .filter(i => i.parentId === null)
-        .map(parent => {
-            const children = flat
-                .filter(i => i.parentId === parent._id)
-                .map(c => ({ text: c.text, url: c.url, ...(c.icon && { icon: c.icon }) }));
-            const obj = { text: parent.text, url: parent.url, ...(parent.icon && { icon: parent.icon }) };
-            if (children.length) obj.items = children;
-            return obj;
-        });
-}
-
-// Returns items sorted so children appear immediately after their parent
-function getOrderedItems(flat) {
-    const result = [];
-    flat.filter(i => i.parentId === null).forEach(parent => {
-        result.push(parent);
-        flat.filter(i => i.parentId === parent._id).forEach(child => result.push(child));
-    });
-    return result;
-}
-
-export const navigationView = {
-    templateUrl: '/admin/js/templates/navigation.html',
-
-    async onMount($container) {
-      let [nav, site] = await Promise.all([
-        api.navigation.get().catch(() => ({brand: {}, items: []})),
-        api.settings.get().catch(() => ({}))
-      ]);
-        let flatItems = flattenItems(nav.items);
-      let footerLinks = (site.footer?.links || []).map(l => ({text: l.text || '', url: l.url || ''}));
-
-        const syncFromDom = () => {
-            $container.find('.nav-item-row').each(function () {
-                const id = parseInt($(this).data('id'), 10);
-                const item = flatItems.find(i => i._id === id);
-                if (!item) return;
-                item.text = $(this).find('.item-text').val();
-                item.url  = $(this).find('.item-url').val();
-                item.icon = $(this).find('.item-icon').val();
-                const parentVal = $(this).find('.item-parent').val();
-                item.parentId = parentVal ? parseInt(parentVal, 10) : null;
-            });
-            // Promote children whose parent is now itself a child
-            const childIds = new Set(flatItems.filter(i => i.parentId !== null).map(i => i._id));
-            flatItems.forEach(i => {
-                if (i.parentId !== null && childIds.has(i.parentId)) i.parentId = null;
-            });
-        };
-
-        const renderItems = () => {
-            const $list = $container.find('#nav-items-list').empty();
-            const topLevel = flatItems.filter(i => i.parentId === null);
-
-            getOrderedItems(flatItems).forEach(item => {
-                const isChild = item.parentId !== null;
-                const parentOptions = `<option value="">— top-level —</option>` +
-                    topLevel
-                        .filter(t => t._id !== item._id)
-                        .map(t => `<option value="${t._id}"${t._id === item.parentId ? ' selected' : ''}>${esc(t.text) || '(untitled)'}</option>`)
-                        .join('');
-
-                $list.append(`
-                    <div class="nav-item-row${isChild ? ' nav-item-row--child' : ''}" data-id="${item._id}">
-                        <span class="nav-col-indent">${isChild ? '↳' : ''}</span>
-                        <input type="text" class="form-input item-text nav-col-main" value="${esc(item.text)}" placeholder="Label">
-                        <input type="text" class="form-input item-url nav-col-main" value="${esc(item.url)}" placeholder="/url">
-                        <input type="text" class="form-input item-icon nav-col-icon" value="${esc(item.icon)}" placeholder="icon">
-                        <select class="form-select item-parent nav-col-parent">${parentOptions}</select>
+import{api as f}from"../api.js";let x=1;const d=t=>String(t||"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;");function b(t){const e=[];return(t||[]).forEach(r=>{const o=x++;e.push({_id:o,text:r.text||"",url:r.url||"",icon:r.icon||"",parentId:null}),(r.items||r.children||[]).forEach(l=>{e.push({_id:x++,text:l.text||"",url:l.url||"",icon:l.icon||"",parentId:o})})}),e}function I(t){return t.filter(e=>e.parentId===null).map(e=>{const r=t.filter(l=>l.parentId===e._id).map(l=>({text:l.text,url:l.url,...l.icon&&{icon:l.icon}})),o={text:e.text,url:e.url,...e.icon&&{icon:e.icon}};return r.length&&(o.items=r),o})}function g(t){const e=[];return t.filter(r=>r.parentId===null).forEach(r=>{e.push(r),t.filter(o=>o.parentId===r._id).forEach(o=>e.push(o))}),e}export const navigationView={templateUrl:"/admin/js/templates/navigation.html",async onMount(t){let[e,r]=await Promise.all([f.navigation.get().catch(()=>({brand:{},items:[]})),f.settings.get().catch(()=>({}))]),o=b(e.items),l=(r.footer?.links||[]).map(s=>({text:s.text||"",url:s.url||""}));const v=()=>{t.find(".nav-item-row").each(function(){const i=parseInt($(this).data("id"),10),n=o.find(a=>a._id===i);if(!n)return;n.text=$(this).find(".item-text").val(),n.url=$(this).find(".item-url").val(),n.icon=$(this).find(".item-icon").val();const c=$(this).find(".item-parent").val();n.parentId=c?parseInt(c,10):null});const s=new Set(o.filter(i=>i.parentId!==null).map(i=>i._id));o.forEach(i=>{i.parentId!==null&&s.has(i.parentId)&&(i.parentId=null)})},p=()=>{const s=t.find("#nav-items-list").empty(),i=o.filter(n=>n.parentId===null);g(o).forEach(n=>{const c=n.parentId!==null,a='<option value="">\u2014 top-level \u2014</option>'+i.filter(u=>u._id!==n._id).map(u=>`<option value="${u._id}"${u._id===n.parentId?" selected":""}>${d(u.text)||"(untitled)"}</option>`).join("");s.append(`
+                    <div class="nav-item-row${c?" nav-item-row--child":""}" data-id="${n._id}">
+                        <span class="nav-col-indent">${c?"\u21B3":""}</span>
+                        <input type="text" class="form-input item-text nav-col-main" value="${d(n.text)}" placeholder="Label">
+                        <input type="text" class="form-input item-url nav-col-main" value="${d(n.url)}" placeholder="/url">
+                        <input type="text" class="form-input item-icon nav-col-icon" value="${d(n.icon)}" placeholder="icon">
+                        <select class="form-select item-parent nav-col-parent">${a}</select>
                         <span class="nav-col-action">
-                            <button class="btn btn-sm btn-danger btn-remove-item" data-id="${item._id}" data-tooltip="Remove"><span data-icon="trash"></span></button>
+                            <button class="btn btn-sm btn-danger btn-remove-item" data-id="${n._id}" data-tooltip="Remove"><span data-icon="trash"></span></button>
                         </span>
                     </div>
-                `);
-            });
-            Domma.icons.scan('#nav-items-list');
-          document.querySelectorAll('#nav-items-list [data-tooltip]').forEach(el => {
-            E.tooltip(el, {content: el.getAttribute('data-tooltip'), position: 'top'});
-          });
-        };
-
-      const renderFooterLinks = () => {
-        const $list = $container.find('#footer-links-list').empty();
-        footerLinks.forEach((link, idx) => {
-          $list.append(`
-                    <div class="nav-item-row" data-footer-idx="${idx}">
-                        <input type="text" class="form-input footer-link-text nav-col-main" value="${esc(link.text)}" placeholder="Label">
-                        <input type="text" class="form-input footer-link-url nav-col-main" value="${esc(link.url)}" placeholder="/url">
+                `)}),Domma.icons.scan("#nav-items-list"),document.querySelectorAll("#nav-items-list [data-tooltip]").forEach(n=>{E.tooltip(n,{content:n.getAttribute("data-tooltip"),position:"top"})})},m=()=>{const s=t.find("#footer-links-list").empty();l.forEach((i,n)=>{s.append(`
+                    <div class="nav-item-row" data-footer-idx="${n}">
+                        <input type="text" class="form-input footer-link-text nav-col-main" value="${d(i.text)}" placeholder="Label">
+                        <input type="text" class="form-input footer-link-url nav-col-main" value="${d(i.url)}" placeholder="/url">
                         <span class="nav-col-action">
-                            <button class="btn btn-sm btn-danger btn-remove-footer" data-idx="${idx}" data-tooltip="Remove"><span data-icon="trash"></span></button>
+                            <button class="btn btn-sm btn-danger btn-remove-footer" data-idx="${n}" data-tooltip="Remove"><span data-icon="trash"></span></button>
                         </span>
                     </div>
-                `);
-        });
-        Domma.icons.scan('#footer-links-list');
-        document.querySelectorAll('#footer-links-list [data-tooltip]').forEach(el => {
-          E.tooltip(el, {content: el.getAttribute('data-tooltip'), position: 'top'});
-        });
-      };
-
-      const syncFooterFromDom = () => {
-        footerLinks = [];
-        $container.find('#footer-links-list .nav-item-row').each(function () {
-          footerLinks.push({
-            text: $(this).find('.footer-link-text').val().trim(),
-            url: $(this).find('.footer-link-url').val().trim()
-          });
-        });
-      };
-
-      $container.find('#add-footer-link').on('click', () => {
-        syncFooterFromDom();
-        footerLinks.push({text: '', url: ''});
-        renderFooterLinks();
-      });
-
-      $container.off('click', '.btn-remove-footer').on('click', '.btn-remove-footer', function () {
-        syncFooterFromDom();
-        const idx = parseInt($(this).data('idx'), 10);
-        footerLinks.splice(idx, 1);
-        renderFooterLinks();
-      });
-
-        $container.find('#field-brand-text').val(nav.brand?.text || '');
-        $container.find('#field-brand-url').val(nav.brand?.url || '/');
-      $container.find('#field-brand-icon').val(nav.brand?.icon || '');
-        $container.find('#field-nav-variant').val(nav.variant || 'dark');
-        renderItems();
-      renderFooterLinks();
-
-        $container.find('#add-nav-item').on('click', () => {
-            syncFromDom();
-            flatItems.push({ _id: _nextId++, text: '', url: '', icon: '', parentId: null });
-            renderItems();
-        });
-
-        $container.off('click', '.btn-remove-item').on('click', '.btn-remove-item', function () {
-            syncFromDom();
-            const id = parseInt($(this).data('id'), 10);
-            flatItems = flatItems.filter(i => i._id !== id && i.parentId !== id);
-            renderItems();
-        });
-
-        // Re-render when a parent changes so other dropdowns update
-        $container.off('change', '.item-parent').on('change', '.item-parent', function () {
-            syncFromDom();
-            renderItems();
-        });
-
-        $container.find('#save-nav-btn').on('click', async () => {
-            syncFromDom();
-          syncFooterFromDom();
-            const nested = nestItems(
-                flatItems.map(i => ({ ...i, text: i.text.trim(), url: i.url.trim(), icon: i.icon.trim() }))
-            ).filter(i => i.text || i.url);
-
-          const brandIcon = $container.find('#field-brand-icon').val().trim();
-          const navData = {
-                brand: {
-                    text: $container.find('#field-brand-text').val().trim(),
-                  url: $container.find('#field-brand-url').val().trim() || '/',
-                  ...(brandIcon && {icon: brandIcon})
-                },
-                items: nested,
-                variant:  $container.find('#field-nav-variant').val(),
-                position: nav.position || 'sticky'
-            };
-
-          const validFooterLinks = footerLinks.filter(l => l.text || l.url);
-
-            try {
-              await api.navigation.save(navData);
-              nav = navData;
-              flatItems = flattenItems(nav.items);
-              renderItems();
-              E.toast('Navigation saved.', {type: 'success'});
-            } catch (e) {
-              console.error('[navigation] save failed:', e);
-              E.toast('Failed to save navigation.', {type: 'error'});
-              return;
-            }
-
-          // Save footer links into site config — best-effort, independent of nav save
-          try {
-            const currentSite = await api.settings.get().catch(() => ({}));
-            await api.settings.save({...currentSite, footer: {...(currentSite.footer || {}), links: validFooterLinks}});
-            footerLinks = validFooterLinks;
-            renderFooterLinks();
-          } catch (e) {
-            console.error('[navigation] footer links save failed:', e);
-            E.toast('Footer links could not be saved.', {type: 'warning'});
-            }
-        });
-    }
-};
+                `)}),Domma.icons.scan("#footer-links-list"),document.querySelectorAll("#footer-links-list [data-tooltip]").forEach(i=>{E.tooltip(i,{content:i.getAttribute("data-tooltip"),position:"top"})})},h=()=>{l=[],t.find("#footer-links-list .nav-item-row").each(function(){l.push({text:$(this).find(".footer-link-text").val().trim(),url:$(this).find(".footer-link-url").val().trim()})})};t.find("#add-footer-link").on("click",()=>{h(),l.push({text:"",url:""}),m()}),t.off("click",".btn-remove-footer").on("click",".btn-remove-footer",function(){h();const s=parseInt($(this).data("idx"),10);l.splice(s,1),m()}),t.find("#field-brand-text").val(e.brand?.text||""),t.find("#field-brand-url").val(e.brand?.url||"/"),t.find("#field-brand-icon").val(e.brand?.icon||""),t.find("#field-nav-variant").val(e.variant||"dark"),p(),m(),t.find("#add-nav-item").on("click",()=>{v(),o.push({_id:x++,text:"",url:"",icon:"",parentId:null}),p()}),t.off("click",".btn-remove-item").on("click",".btn-remove-item",function(){v();const s=parseInt($(this).data("id"),10);o=o.filter(i=>i._id!==s&&i.parentId!==s),p()}),t.off("change",".item-parent").on("change",".item-parent",function(){v(),p()}),t.find("#save-nav-btn").on("click",async()=>{v(),h();const s=I(o.map(a=>({...a,text:a.text.trim(),url:a.url.trim(),icon:a.icon.trim()}))).filter(a=>a.text||a.url),i=t.find("#field-brand-icon").val().trim(),n={brand:{text:t.find("#field-brand-text").val().trim(),url:t.find("#field-brand-url").val().trim()||"/",...i&&{icon:i}},items:s,variant:t.find("#field-nav-variant").val(),position:e.position||"sticky"},c=l.filter(a=>a.text||a.url);try{await f.navigation.save(n),e=n,o=b(e.items),p(),E.toast("Navigation saved.",{type:"success"})}catch(a){console.error("[navigation] save failed:",a),E.toast("Failed to save navigation.",{type:"error"});return}try{const a=await f.settings.get().catch(()=>({}));await f.settings.save({...a,footer:{...a.footer||{},links:c}}),l=c,m()}catch(a){console.error("[navigation] footer links save failed:",a),E.toast("Footer links could not be saved.",{type:"warning"})}})}};