/* ADN core scheduler (stage 1 of the speed-up). Every ADN block below used to re-check the page on its own timer (23 timers, every 50-600 ms: ~70 page scans a second, even when nothing changes). Now each block registers its check with ADN.on(fn) and the core runs all checks together, only when something can have changed: - the page changed (one MutationObserver; changes our own checks make are ignored, so they can't trigger themselves), - a click, key, input, resize, back/forward or router navigation, - two follow-up passes 0.45 s and 1.1 s after each of those, for things that settle a moment later (hydration, Baserow saving, toasts), - a 1.5 s heartbeat as a safety net. Runs are batched into one animation frame and at most every 100 ms. ADN.on(fn) also accepts (fn, ms) so blocks keep their old signature; the ms value is ignored. */ (()=>{if(window.ADN)return; const tasks=[];let pending=false,last=0,running=false,mo=null,routed=false,t1=0,t2=0; const run=()=>{pending=false;last=performance.now();running=true; for(const t of tasks){try{t.fn();}catch(e){if(!t.warned){t.warned=true;console.warn('ADN task failed',e);}}} running=false;if(mo)mo.takeRecords();}; const schedule=()=>{if(pending)return;pending=true;const wait=Math.max(0,100-(performance.now()-last)); setTimeout(()=>requestAnimationFrame(run),wait);}; const trigger=()=>{schedule();clearTimeout(t1);clearTimeout(t2);t1=setTimeout(schedule,450);t2=setTimeout(schedule,1100);}; const ATTRS=['class','href','aria-current','aria-expanded','aria-selected','disabled','value','checked','open','hidden','data-adn-detail-active']; const observe=()=>{if(mo)return;mo=new MutationObserver(recs=>{if(running)return; for(const r of recs){const t=r.target; /* Lenis and our own html/body flags change on scroll: not a page change */ if(r.type==='attributes'&&(t===document.documentElement||t===document.body))continue; trigger();return;}}); mo.observe(document.documentElement,{subtree:true,childList:true,characterData:true,attributes:true,attributeFilter:ATTRS});}; const hookRouter=()=>{if(routed)return;const a=document.querySelector('#__nuxt');const p=a&&a.__vue_app__&&a.__vue_app__.config.globalProperties; if(p&&p.$router){routed=true;p.$router.afterEach(()=>trigger());}}; ['click','keyup','input','change','resize','popstate','pageshow','visibilitychange'].forEach(ev=> (ev==='resize'||ev==='popstate'||ev==='pageshow'?window:document).addEventListener(ev,trigger,{capture:true,passive:true})); window.setInterval(()=>{hookRouter();schedule();},1500); window.ADN={on:(fn)=>{tasks.push({fn});observe();hookRouter();trigger();return tasks.length;},kick:trigger}; })(); (()=>{if(window.__adnJobMenuSync)return;window.__adnJobMenuSync=true;ADN.on(()=>{const current=new URL(location.href);const selected=(current.searchParams.get("job_type")||"").trim();document.querySelectorAll(".menu-element__wrapper a[href]").forEach(link=>{const target=new URL(link.href);if(target.origin!==current.origin||!target.searchParams.has("job_type"))return;const type=(target.searchParams.get("job_type")||"").trim();const active=target.pathname===current.pathname&&type===selected;const value=String(active);if(link.getAttribute("data-adn-job-active")!==value)link.setAttribute("data-adn-job-active",value);if(active){if(link.getAttribute("aria-current")!=="true")link.setAttribute("aria-current","true");}else if(link.hasAttribute("aria-current"))link.removeAttribute("aria-current");});},200 );})(); /* Status badge: read the database color from its hidden Markdown code token. */ ( () => { if (window.__adnJobStatusColorSync) return ; window.__adnJobStatusColorSync = true ; const colors = { "light-blue":"#f0f4fc","light-green":"#ecfcf1","light-cyan":"#cff5fa","light-yellow":"#fffbf0","light-orange":"#fffbf0","light-red":"#fff2f0","light-brown":"#f5e6dc","light-purple":"#f9f1fd","light-pink":"#f7e1f2","light-gray":"#f5f5f5" , "blue":"#dae4fd","green":"#d0f6dc","cyan":"#a0ebf5","yellow":"#ffe9b4","orange":"#fff4da","red":"#ffdeda","brown":"#f5ceb0","purple":"#dfb9f7","pink":"#f7b2e7","gray":"#d7d8d9" , "dark-blue":"#acc8f8","dark-green":"#a0eeba","dark-cyan":"#70e0ef","dark-yellow":"#ffdd8f","dark-orange":"#ffe9b4","dark-red":"#ffbdb4","dark-brown":"#f5c098","dark-purple":"#cf96f2","dark-pink":"#f285d9","dark-gray":"#b5b5b7" , "darker-blue":"#689ef1","darker-green":"#41dd75","darker-cyan":"#41d6ea","darker-yellow":"#ffd269","darker-orange":"#ffd269","darker-red":"#ff7b69","darker-brown":"#f5a96e","darker-purple":"#bf73ee","darker-pink":"#ff6dde","darker-gray":"#b5b5b7" }; const sync = () => { document.querySelectorAll(".job-status-badge").forEach(badge => { const color = (badge.querySelector("code")?.textContent || "").trim (); const background = colors[color] || colors["light-gray" ]; if (badge.style.getPropertyValue("--job-status-background" ) !== background) { badge. style. setProperty("--job-status-background" , background); } }); }; const start = () => { sync (); new MutationObserver(sync).observe(document.body, {childList:true, characterData:true, subtree:true }); }; if (document.body) start (); else document.addEventListener("DOMContentLoaded", start, {once:true }); })(); /* Job Detail tabs: active underline only; scoped separately from the header. */ ( ()=>{if(window.__adnDetailTabsSync)return;window.__adnDetailTabsSync=true;const sync=()=>{const selected=(new URL(location.href).searchParams.get("tab")||"Details").toLowerCase();document.querySelectorAll(".job-detail-tabs a[href]").forEach(link=>{const tab=new URL(link.href,location.href).searchParams.get("tab");if(!tab)return;const active=tab.toLowerCase()===selected;const value=String(active);if(link.getAttribute("data-adn-detail-active")!==value)link.setAttribute("data-adn-detail-active",value);if(active){if(link.getAttribute("aria-current")!=="true")link.setAttribute("aria-current","true");}else if(link.hasAttribute("aria-current"))link.removeAttribute("aria-current");});};sync();ADN.on(sync,250 );})(); /* Model table: row click follows its native View link; Edit remains independent. */ ( ()=>{if(window.__adnModelRowsSync)return;window.__adnModelRowsSync=true;const rowSelector=".job-model-table tr, .job-model-table [role=\"row\"]";const viewLink=row=>row.querySelector("a[href*=\"view_model=\"]");const sync=()=>{const current=new URL(location.href);const selected=current.searchParams.get("edit_model")?null:current.searchParams.get("view_model");document.querySelectorAll(rowSelector).forEach(row=>{const link=viewLink(row);if(!link)return;if(!row.hasAttribute("data-adn-model-row"))row.setAttribute("data-adn-model-row","");const id=new URL(link.href,location.href).searchParams.get("view_model");const active=!!selected&&selected===id;const value=String(active);if(row.getAttribute("data-adn-model-selected")!==value)row.setAttribute("data-adn-model-selected",value);if(active){if(link.getAttribute("aria-current")!=="true")link.setAttribute("aria-current","true");}else if(link.hasAttribute("aria-current"))link.removeAttribute("aria-current");});};document.addEventListener("click",event=>{if(event.defaultPrevented||event.button!==0||event.metaKey||event.ctrlKey||event.shiftKey||event.altKey)return;const target=event.target instanceof Element?event.target:event.target.parentElement;if(!target||target.closest("a,button,input,select,textarea,label,summary,[role=\"button\"],[contenteditable=\"true\"]"))return;if(window.getSelection()?.toString().trim())return;const row=target.closest(rowSelector);if(!row)return;const link=viewLink(row);if(link)link.click();});sync();ADN.on(sync,250 );})(); /* Job listing: follow the native subject link when its row is clicked. */ ( ()=>{if(window.__adnJobRowsSync)return;window.__adnJobRowsSync=true;const rows=".job-listing-table:not(:is(.adn-toinv-table, .adn-inv-table, .adn-quo-table)) tr, .job-listing-table:not(:is(.adn-toinv-table, .adn-inv-table, .adn-quo-table)) [role=\"row\"]";const linkFor=row=>Array.from(row.querySelectorAll("a[href]")).find(link=>{const url=new URL(link.href,location.href);return url.origin===location.origin&&/\/job-detail\/[^/]+\/?$/.test(url.pathname);});const sync=()=>document.querySelectorAll(rows).forEach(row=>{if(linkFor(row)&&!row.hasAttribute("data-adn-job-row"))row.setAttribute("data-adn-job-row","");});document.addEventListener("click",event=>{if(event.defaultPrevented||event.button!==0||event.metaKey||event.ctrlKey||event.shiftKey||event.altKey)return;const target=event.target instanceof Element?event.target:event.target.parentElement;if(!target||target.closest("a,button,input,select,textarea,label,summary,[role=\"button\"],[contenteditable=\"true\"]"))return;if(window.getSelection()?.toString().trim())return;const row=target.closest(rows);if(!row)return;const link=linkFor(row);if(link)link.click();});sync();ADN.on(sync,250 );})(); /* Edit Model overlay: existing Baserow form and save actions remain native. */ ( ()=> { if(window.__adnEditModelModal)return;window.__adnEditModelModal=true ; let panel=null,backdrop=null,returnFocus=null,previousOverflow="" ; const visible=el=>el&&el.getClientRects().length&&getComputedStyle(el).visibility!=="hidden" ; const modelsLink=()=>Array.from(document.querySelectorAll('a[href]')).find(a=>{const u=new URL(a.href,location.href);return u.pathname===location.pathname&&u.searchParams.get("tab")==="Models"&&!u.searchParams.get("edit_model")&&!u.searchParams.get("view_model" );}); const close=()=>{const save=panel?.querySelector('button[type="submit"]');if(save?.disabled)return;const link=modelsLink();if(link)link.click ();}; const cleanup=()=>{if(!panel)return;panel.removeAttribute("data-adn-modal-open");panel.removeAttribute("role");panel.removeAttribute("aria-modal");panel.removeAttribute("aria-label");panel.querySelectorAll('[data-adn-modal-control]').forEach(el=>el.remove());backdrop?.remove();backdrop=null;panel=null;document.body.style.overflow=previousOverflow;const old=returnFocus;returnFocus=null;if(old?.isConnected)old.focus({preventScroll:true });}; const sync=()=>{const url=new URL(location.href);const candidate=document.querySelector('.job-edit-model-modal');const wanted=!!url.searchParams.get("edit_model")&&url.searchParams.get("tab")==="Models"&&visible(candidate);if(!wanted||panel&&panel!==candidate){cleanup();}if(!wanted||panel)return;panel=candidate;returnFocus=document.activeElement;previousOverflow=document.body.style.overflow;document.body.style.overflow="hidden";backdrop=document.createElement("div");backdrop.className="adn-model-backdrop";backdrop.setAttribute("aria-hidden","true");document.body.appendChild(backdrop);panel.setAttribute("data-adn-modal-open","");panel.setAttribute("role","dialog");panel.setAttribute("aria-modal","true");panel.setAttribute("aria-label","Edit Model");const x=document.createElement("button");x.type="button";x.className="adn-model-close";x.textContent="×";x.setAttribute("aria-label","Close Edit Model");x.setAttribute("data-adn-modal-control","");x.addEventListener("click",close);panel.appendChild(x);const cancel=document.createElement("button");cancel.type="button";cancel.className="adn-model-cancel";cancel.textContent="Cancel";cancel.setAttribute("data-adn-modal-control","");cancel.addEventListener("click",close);panel.appendChild(cancel);x.focus({preventScroll:true });}; document.addEventListener("keydown",event=>{if(!panel)return;if(event.key==="Escape"){event.preventDefault();close();return;}if(event.key!=="Tab")return;const items=Array.from(panel.querySelectorAll('a[href],button,input,select,textarea,[tabindex="0"]')).filter(el=>visible(el)&&!el.disabled);const first=items[0],last=items.at(-1);if(event.shiftKey&&document.activeElement===first){event.preventDefault();last?.focus();}else if(!event.shiftKey&&document.activeElement===last){event.preventDefault();first?.focus ();}}); sync();ADN.on(sync,150 ); })(); /* Create New Model popup: use the existing native creation and Cancel actions. */ ( ()=> { if(window.__adnCreateModelModal)return;window.__adnCreateModelModal=true ; let panel=null,backdrop=null,returnFocus=null,previousOverflow="" ; const visible=el=>el&&el.getClientRects().length&&getComputedStyle(el).visibility!=="hidden" ; const close=()=>{if(!panel)return;const save=Array.from(panel.querySelectorAll('button')).find(b=>b.textContent.trim()==="Create Model");if(save?.disabled)return;const wrapper=panel.querySelector('.job-create-model-cancel');const native=wrapper?.matches('button,a')?wrapper:wrapper?.querySelector('button,a');native?.click ();}; const controls=()=>{if(!panel.querySelector('[data-adn-create-control="close"]')){const x=document.createElement("button");x.type="button";x.className="adn-model-close";x.textContent="×";x.setAttribute("aria-label","Close Create New Model");x.setAttribute("data-adn-create-control","close");x.addEventListener("click",close);panel.appendChild(x);}if(!panel.querySelector('[data-adn-create-control="cancel"]')){const cancel=document.createElement("button");cancel.type="button";cancel.className="adn-model-cancel";cancel.textContent="Cancel";cancel.setAttribute("data-adn-create-control","cancel");cancel.addEventListener("click",close);panel.appendChild (cancel);}}; const cleanup=()=>{if(!panel)return;panel.removeAttribute("data-adn-create-open");panel.removeAttribute("role");panel.removeAttribute("aria-modal");panel.removeAttribute("aria-label");panel.querySelectorAll('[data-adn-create-control]').forEach(el=>el.remove());backdrop?.remove();backdrop=null;panel=null;document.body.style.overflow=previousOverflow;const old=returnFocus;returnFocus=null;if(old?.isConnected)old.focus({preventScroll:true });}; const sync=()=>{const url=new URL(location.href);const candidate=document.querySelector('.job-create-model-modal');const wanted=url.searchParams.get("show_new")==="1"&&visible(candidate);if(!wanted||panel&&panel!==candidate)cleanup();if(!wanted)return;if(panel){controls();return;}panel=candidate;returnFocus=document.activeElement;previousOverflow=document.body.style.overflow;document.body.style.overflow="hidden";backdrop=document.createElement("div");backdrop.className="adn-model-backdrop";backdrop.setAttribute("aria-hidden","true");document.body.appendChild(backdrop);panel.setAttribute("data-adn-create-open","");panel.setAttribute("role","dialog");panel.setAttribute("aria-modal","true");panel.setAttribute("aria-label","Create New Model");controls();panel.scrollTop=0;panel.querySelector('[data-adn-create-control="close"]').focus({preventScroll:true });}; document.addEventListener("keydown",event=>{if(!panel)return;if(event.key==="Escape"){event.preventDefault();close();return;}if(event.key!=="Tab")return;const items=Array.from(panel.querySelectorAll('a[href],button,input,select,textarea,[tabindex="0"]')).filter(el=>visible(el)&&!el.disabled);const first=items[0],last=items.at(-1);if(event.shiftKey&&document.activeElement===first){event.preventDefault();last?.focus();}else if(!event.shiftKey&&document.activeElement===last){event.preventDefault();first?.focus ();}}); sync();ADN.on(sync,150 ); })(); /* ADN fixed header: preserve native category and Add Job actions. */ ( ()=> { if(window.__adnHeaderNavigation)return;window.__adnHeaderNavigation=true ; const sync =()=>{ const header=document.querySelector('.page__fixed-stack--top');if(!header)return ; const nativeLinks=Array.from(header.querySelectorAll('.menu-element__wrapper a[href]')).filter(a=>new URL(a.href,location.href).searchParams.has('job_type' )); if(!nativeLinks.length)return ; const menu=nativeLinks[0].closest('.menu-element__wrapper' ); const add=Array.from(header.querySelectorAll('button')).find(b=>b.textContent.trim().toLowerCase()==='add job');if(add&&!add.classList.contains('adn-header-add'))add.classList.add('adn-header-add' ); if(menu.querySelector('.adn-header-nav'))return ; const original=nativeLinks[0].closest('.menu-element__container');if(!original)return ; const nav=document.createElement('nav');nav.className='adn-header-nav';nav.setAttribute('aria-label','Main navigation' ); const overview=document.createElement('a');overview.className='adn-header-link';overview.textContent='Overview' ; const base=new URL(nativeLinks[0].href,location.href);base.search='';base.hash='';/* page addresses: app base (the /builder/23/preview prefix in preview, nothing on adn.my) + the page path; Overview = /main */ base.pathname=(location.pathname.match(/^\/builder\/\d+\/preview/)||[''])[0]+'/main';overview.href=base.href ; nav. appendChild (overview); /* Main Listing: plain link to the listing page on the ALL tab (job-type tabs live on that page). */ const all=nativeLinks.find(l=>!(new URL(l.href,location.href).searchParams.get('job_type')||'').trim())||nativeLinks[0]; const listing=document.createElement('a');listing.className='adn-header-link';listing.textContent='Main Listing';listing.href=all.href; listing.addEventListener('click',e=>{if(e.button===0&&!e.metaKey&&!e.ctrlKey&&!e.shiftKey&&!e.altKey){e.preventDefault();all.click();}}); nav.appendChild(listing); /* Invoices: same base path as Overview; opens with the app router (no reload) */ const invoices=document.createElement('a');invoices.className='adn-header-link adn-header-fin';invoices.textContent='Finance'; const ib=new URL(nativeLinks[0].href,location.href);ib.search='';ib.hash='';ib.pathname=(location.pathname.match(/^\/builder\/\d+\/preview/)||[''])[0]+'/invoices';invoices.href=ib.href; invoices.addEventListener('click',e=>{if(e.button===0&&!e.metaKey&&!e.ctrlKey&&!e.shiftKey&&!e.altKey){const root=document.querySelector('#__nuxt');const r=root&&root.__vue_app__&&root.__vue_app__.config.globalProperties.$router;if(r){e.preventDefault();r.push(new URL(invoices.href).pathname).catch(()=>{});}}}); nav.appendChild(invoices);original.classList.add('adn-header-original');menu.appendChild (nav); }; let pending=false;const schedule=()=>{if(pending)return;pending=true;requestAnimationFrame(()=>{pending=false;sync();});}; const start=()=>{schedule();const observer=new MutationObserver(schedule);observer.observe(document.body,{childList:true,subtree:true});}; if(document.body)start();else document.addEventListener('DOMContentLoaded',start,{once:true}); })(); /* End ADN fixed header navigation. */ /* Add Job: blank placeholder on empty inputs so CSS :placeholder-shown can drive the floating labels. */ (()=>{if(window.__adnFloatLabels)return;window.__adnFloatLabels=true;const sel='.page__content:has(.adn-job-art) .ab-input:not([placeholder]), .page__content:has(.adn-job-art) .ab-input[placeholder=""]';const sync=()=>document.querySelectorAll(sel).forEach(i=>i.setAttribute('placeholder',' '));const start=()=>{sync();new MutationObserver(sync).observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:['placeholder']});};if(document.body)start();else document.addEventListener('DOMContentLoaded',start,{once:true});})(); /* End Add Job floating labels. */ /* Header: mark the current page (Heron-style square indicator, styled in CSS 4g). */ (()=>{if(window.__adnHeaderActive)return;window.__adnHeaderActive=true;const sync=()=>{const links=document.querySelectorAll('.adn-header-nav .adn-header-link');if(!links.length)return;links.forEach(a=>{const p=new URL(a.href,location.href).pathname;const listing=a.textContent.trim().toLowerCase()==='main listing';const base=p.replace(/[^/]*$/,'');const on=listing?(location.pathname===p||location.pathname.startsWith(base+'job-detail/')):location.pathname===p;if(on){if(a.getAttribute('aria-current')!=='page')a.setAttribute('aria-current','page');}else if(a.hasAttribute('aria-current'))a.removeAttribute('aria-current');});};sync();ADN.on(sync,300);})(); /* End header current page. */ /* ADN page transition (Heron-style blueprint lines), header buttons only. The header stays on screen; only the page area below it transitions. Leave: a canvas covers the page area and the frame lines slide in to a crosshair. Navigation starts as soon as the page is covered; if the new page is still loading when the lines meet, a "+" turns slowly at the crossing. Enter: the lines slide back out to the frame and the new page shows only behind them, inside the window they open; ahead of the lines the canvas still covers it. */ (()=>{if(window.__adnPT)return;window.__adnPT=true; const inEditor=()=>/\/builder\/\d+\/page\//.test(location.pathname); const reduce=()=>window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches; const css=`#adn-pt{position:fixed;inset:0;z-index:2147483000;pointer-events:none;visibility:hidden} #adn-pt.on{visibility:visible;pointer-events:auto;cursor:progress} #adn-pt .pt-bg{position:absolute;inset:0;background:var(--adn-canvas,#f7f7f1);opacity:0} #adn-pt .pt-h,#adn-pt .pt-v{position:absolute;background:var(--adn-border,#b8b8b0);opacity:0} #adn-pt .pt-h{left:0;right:0;height:1px} #adn-pt .pt-v{top:0;bottom:0;width:1px} #adn-pt .pt-plus{position:absolute;width:11px;height:11px;margin:-5px 0 0 -5px;opacity:0} #adn-pt .pt-plus::before,#adn-pt .pt-plus::after{content:"";position:absolute;background:var(--adn-ink,#262626)} #adn-pt .pt-plus::before{left:5px;top:0;width:1px;height:11px} #adn-pt .pt-plus::after{left:0;top:5px;width:11px;height:1px} body.adn-pt-hold .page__content > *{visibility:hidden!important} @keyframes adnPtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}`; let root,bg,H=[],V=[],P=[],busy=false; const build=()=>{if(root&&document.body.contains(root))return; if(!document.getElementById('adn-pt-style')){const s=document.createElement('style');s.id='adn-pt-style';s.textContent=css;document.head.appendChild(s);} root=document.createElement('div');root.id='adn-pt';root.setAttribute('aria-hidden','true'); bg=document.createElement('div');bg.className='pt-bg';root.appendChild(bg); H=[0,1].map(()=>{const d=document.createElement('div');d.className='pt-h';root.appendChild(d);return d;}); V=[0,1].map(()=>{const d=document.createElement('div');d.className='pt-v';root.appendChild(d);return d;}); P=[0,1,2,3].map(()=>{const d=document.createElement('div');d.className='pt-plus';root.appendChild(d);return d;}); document.body.appendChild(root);}; /* Frame geometry: header bottom, page left/right edges, viewport bottom */ const frame=()=>{const W=innerWidth,Hh=innerHeight;const nav=document.querySelector('.adn-header-nav'); const top=nav?Math.round(nav.getBoundingClientRect().bottom):66;const pc=document.querySelector('.page__content'); const r=pc?pc.getBoundingClientRect():null;const left=r&&r.width>0?Math.round(r.left):7;const right=r&&r.width>0?Math.round(r.right)-1:W-8; return {top,bottom:Hh-1,left,right,W,Hh};}; const anim=(el,kf,ms,ease,delay)=>el.animate(kf,{duration:ms,easing:ease||'cubic-bezier(.65,0,.35,1)',delay:delay||0,fill:'forwards'}).finished.catch(()=>{}); const EASE='cubic-bezier(.65,0,.35,1)'; /* Slide in, hold, slide out. IN: the four frame lines slide in from the page edges and meet in a crosshair in the middle: fast start, long soft arrival, so most of the loading time is spent in a glide rather than a stop. HOLD: only if the new page is still loading when they meet: a "+" fades in at the crossing and turns slowly, so the screen never looks frozen. OUT: the moment the page is ready the lines slide back out to the frame (the same curve played in reverse) while the elements bring themselves in. IN_MS / OUT_MS: length of each slide (ms); HOLD_MAX: longest wait, counted from the click, before the lines open anyway */ const IN_MS=650,OUT_MS=650,HOLD_MAX=2700; /* ENTER_AT: how far through the slide-out (0 to 1) the elements start to come in; until then they stay hidden while the empty frame shows */ const ENTER_AT=.5; const IN_EASE='cubic-bezier(.5,0,.15,1)',OUT_EASE='cubic-bezier(.85,0,.5,1)'; let C=null,Q=[]; /* The page area only: the canvas and the vertical lines start just below the header's bottom border (f.top + 1), so that border stays visible */ const cover=f=>{bg.style.top=(f.top+1)+'px';V.forEach(v=>{v.style.top=(f.top+1)+'px';});}; /* Window: four canvas panels (top, bottom, left, right) whose inner edges ride on the four lines with the same timing and curve, so the page shows only inside the rectangle the lines open, never ahead of them */ const panels=()=>{if(Q.length&&Q.every(q=>root.contains(q)))return Q; Q=[0,1,2,3].map(()=>{const d=document.createElement('div');d.className='pt-pan'; d.style.cssText='position:absolute;background:var(--adn-canvas,#f7f7f1);opacity:0;pointer-events:none';root.insertBefore(d,bg.nextSibling);return d;}); return Q;}; const openWindow=f=>{const q=panels(),cx=Math.round((f.left+f.right)/2),cy=Math.round((f.top+f.bottom)/2); q[0].style.cssText+=';left:0;right:0;top:'+(f.top+1)+'px'; q[1].style.cssText+=';left:0;right:0;bottom:0'; q[2].style.cssText+=';left:0;bottom:0;top:'+(f.top+1)+'px'; q[3].style.cssText+=';right:0;bottom:0;top:'+(f.top+1)+'px'; const k=(p,a,z)=>[{[p]:a+'px',opacity:1},{[p]:z+'px',opacity:1,offset:.85},{[p]:z+'px',opacity:1}]; return Promise.all([ anim(q[0],k('height',cy-f.top-1,0),OUT_MS,OUT_EASE), anim(q[1],k('top',cy,f.bottom),OUT_MS,OUT_EASE), anim(q[2],k('width',cx,f.left),OUT_MS,OUT_EASE), anim(q[3],k('left',cx,f.right),OUT_MS,OUT_EASE)]);}; const centre=()=>{if(!C||!root.contains(C)){C=document.createElement('div');C.className='pt-plus pt-c';root.appendChild(C);}return C;}; const slideIn=f=>{const cx=Math.round((f.left+f.right)/2),cy=Math.round((f.top+f.bottom)/2); return Promise.all([ anim(H[0],[{top:f.top+'px',opacity:1},{top:cy+'px',opacity:1}],IN_MS,IN_EASE), anim(H[1],[{top:f.bottom+'px',opacity:1},{top:cy+'px',opacity:1}],IN_MS,IN_EASE), anim(V[0],[{left:f.left+'px',opacity:1},{left:cx+'px',opacity:1}],IN_MS,IN_EASE), anim(V[1],[{left:f.right+'px',opacity:1},{left:cx+'px',opacity:1}],IN_MS,IN_EASE)]);}; const hold=f=>{const c=centre();c.style.left=Math.round((f.left+f.right)/2)+'px';c.style.top=Math.round((f.top+f.bottom)/2)+'px'; c.animate([{opacity:0},{opacity:1}],{duration:200,fill:'forwards'}); c.animate([{transform:'scale(1.6) rotate(0deg)'},{transform:'scale(1.6) rotate(90deg)'}],{duration:900,easing:EASE,iterations:Infinity});}; const slideOut=f=>{const cx=Math.round((f.left+f.right)/2),cy=Math.round((f.top+f.bottom)/2); if(C&&root.contains(C)&&C.getAnimations().length){const c=C,t=getComputedStyle(c).transform;c.getAnimations().forEach(a=>a.cancel()); anim(c,[{opacity:1,transform:t},{opacity:0,transform:t}],160,'ease-out').then(()=>c.getAnimations().forEach(a=>a.cancel()));} return Promise.all([ anim(H[0],[{top:cy+'px',opacity:1},{top:f.top+'px',opacity:1,offset:.85},{top:f.top+'px',opacity:0}],OUT_MS,OUT_EASE), anim(H[1],[{top:cy+'px',opacity:1},{top:f.bottom+'px',opacity:1,offset:.85},{top:f.bottom+'px',opacity:0}],OUT_MS,OUT_EASE), anim(V[0],[{left:cx+'px',opacity:1},{left:f.left+'px',opacity:1,offset:.85},{left:f.left+'px',opacity:0}],OUT_MS,OUT_EASE), anim(V[1],[{left:cx+'px',opacity:1},{left:f.right+'px',opacity:1,offset:.85},{left:f.right+'px',opacity:0}],OUT_MS,OUT_EASE)]);}; /* Leave: canvas covers the page while the lines slide in */ const leave=(onCovered)=>{const f=frame();cover(f);root.classList.add('on'); return Promise.all([anim(bg,[{opacity:0},{opacity:1}],120,'ease-out').then(()=>onCovered&&onCovered()),slideIn(f)]);}; /* After the lines meet: hold (with the turning "+") only while the page is still loading, then let the reveal start */ const settle=(lin,ready,t0)=>{let ok=false;ready.then(()=>{ok=true;}); const cap=new Promise(r=>setTimeout(r,Math.max(0,HOLD_MAX-(Date.now()-t0)))); return lin.then(()=>{if(!ok)hold(frame());return Promise.race([ready,cap]);});}; /* Enter (Heron-style): the page frame (borders, grid lines) stays still while each element inside it slides up and fades in on its own, top-to-bottom then left-to-right. Headings rise from behind their own bottom edge, images fade in from a slight zoom, table rows come in one by one. Elements that Baserow adds a moment later (data still loading) get the same entrance. ST_GAP: delay between elements (ms), ST_MAX: cap on the total stagger, ST_MS: length of each element's move, ST_RISE: how far they rise (px) */ const ST_GAP=45,ST_MAX=650,ST_MS=700,ST_RISE=24,ST_EASE='cubic-bezier(.16,1,.3,1)'; const inView=r=>r.bottom>0&&r.top0&&r.height>0; const leaves=()=>{const pc=document.querySelector('.page__content');if(!pc)return [];const out=[]; pc.querySelectorAll('.element__wrapper').forEach(w=>{if(w.querySelector('.element__wrapper'))return; const rows=w.querySelectorAll('tbody tr'); if(rows.length){w.querySelectorAll('thead tr, tbody tr').forEach(r=>out.push({el:r,k:'rise'}));return;} const inner=w.querySelector(':scope > .element__inner-wrapper')||w; const img=w.querySelector('img');const k=w.querySelector('h1,h2,h3,h4,h5,h6')?'mask':img?'img':'rise'; out.push({el:k==='img'?img:inner,w,k});}); return out;}; const playIn=(items,base)=>{const list=items.map(it=>Object.assign(it,{r:it.el.getBoundingClientRect()})).filter(it=>inView(it.r)); list.sort((a,b)=>Math.round(a.r.top/8)-Math.round(b.r.top/8)||a.r.left-b.r.left); list.forEach((it,i)=>{const delay=(base||0)+Math.min(i*ST_GAP,ST_MAX);let kf; if(it.k==='mask'){kf=[{transform:'translateY(105%)'},{transform:'none'}];it.w.style.clipPath='inset(0 -100vw)';} else if(it.k==='img')kf=[{opacity:0,transform:'scale(1.06)'},{opacity:1,transform:'none'}]; else kf=[{opacity:0,transform:'translateY('+ST_RISE+'px)'},{opacity:1,transform:'none'}]; const a=it.el.animate(kf,{duration:ST_MS,delay,easing:ST_EASE,fill:'backwards'}); if(it.k==='mask')a.finished.catch(()=>{}).then(()=>{it.w.style.clipPath='';});});}; const enterFx=(base)=>{const seen=new WeakSet(); const run=b0=>{const it=leaves().filter(x=>!seen.has(x.el));it.forEach(x=>seen.add(x.el));playIn(it,b0);}; run(base);const pc=document.querySelector('.page__content');if(!pc)return;let t=0; const mo=new MutationObserver(()=>{clearTimeout(t);t=setTimeout(run,30);});mo.observe(pc,{childList:true,subtree:true}); setTimeout(()=>{mo.disconnect();clearTimeout(t);},1200+(base||0));}; /* Enter: the canvas drops away at once and the lines slide back out to the new page's frame while its elements bring themselves in; the corner marks blink as the lines arrive */ const reveal=async()=>{const f2=frame(); document.body.classList.remove('adn-pt-enter');void document.body.offsetWidth;document.body.classList.add('adn-pt-enter'); cover(f2);const win=openWindow(f2);anim(bg,[{opacity:0},{opacity:0}],1); /* the one-by-one entrance (enterFx) is off for page changes: the opening window uncovers the page instead. To bring it back, add: if(!reduce())enterFx(Math.round(OUT_MS*ENTER_AT)); */ const corners=[[f2.left,f2.top],[f2.right,f2.top],[f2.left,f2.bottom],[f2.right,f2.bottom]]; P.forEach((p,i)=>{p.style.left=corners[i][0]+'px';p.style.top=corners[i][1]+'px';}); await Promise.all([slideOut(f2),win,...P.map(p=>anim(p,[{opacity:0},{opacity:1,offset:.35},{opacity:0}],280,'linear',Math.round(OUT_MS*.75)))]); root.classList.remove('on'); [bg,...H,...V,...P,...Q,...(C?[C]:[])].forEach(el=>el.getAnimations().forEach(a=>a.cancel())); setTimeout(()=>document.body.classList.remove('adn-pt-enter'),500);}; const enter=reveal; /* Ready = route changed, the old page's elements are gone, the new page has content, and 60ms has passed for it to paint (cap 2.5s). Data may still be loading: the reveal does not wait for it, to keep the change short */ const waitForPage=(from,oldNode,onSwap)=>new Promise(res=>{const t0=Date.now();let changedAt=0,last=Date.now(),sw=false,swAt=0; const fromPath=from?new URL(from).pathname:''; const mo=new MutationObserver(()=>{last=Date.now();});mo.observe(document.body,{childList:true,subtree:true,characterData:true}); const done=v=>{mo.disconnect();res(v);}; const tick=()=>{const now=Date.now();if(!changedAt&&location.href!==from)changedAt=now; if(changedAt){const pc=document.querySelector('.page__content'); const swapped=!oldNode||!document.body.contains(oldNode)||location.pathname===fromPath; if(swapped&&!sw){sw=true;swAt=now;onSwap&&onSwap();} const loading=document.querySelector('.page__content .loading, .page__content .loading-spinner, .page__content .skeleton, .page__content .ab-loading'); if(swapped&&pc&&pc.children.length&&now-swAt>60)return done(true); if(now-changedAt>2500){if(!sw){sw=true;onSwap&&onSwap();}return done(true);}} if(now-t0>5000){if(!sw){sw=true;onSwap&&onSwap();}return done(false);} setTimeout(tick,40);};tick();}); /* Header buttons + the Overview hero's VIEW JOBS button */ const targets='.adn-header-nav .adn-header-link, .adn-header-add, .adn-overview-hero-action button'; const samePage=el=>{ if(el.tagName==='A'&&el.href){const u=new URL(el.href,location.href);return u.pathname===location.pathname&&u.search===location.search;}return false;}; let pass=false; /* Full reload fallback: a transition that ended in a page load finishes here */ /* ...and on a browser refresh (F5 / reload button) the page opens with the same reveal: canvas + crosshair first, then the lines open out */ (()=>{let f=null;try{f=sessionStorage.getItem('adnPTenter');sessionStorage.removeItem('adnPTenter');}catch(x){} let reload=false;try{const nv=performance.getEntriesByType('navigation')[0];reload=!!nv&&nv.type==='reload';}catch(x){} if((!f&&!reload)||inEditor()||reduce())return; const go=()=>{if(!document.body){return setTimeout(go,30);}build();const fr=frame(),cx=fr.W/2,cy=fr.Hh/2;root.classList.add('on'); const set=(el,kf)=>anim(el,[kf,kf],1);cover(fr);set(bg,{opacity:1}); /* the lines slide in, hold while the page loads, then open out */ const lin=slideIn(fr);const tR=Date.now(); busy=true;settle(lin,waitForPage('',null),tR).then(()=>enter()).finally(()=>{busy=false;});};go();})(); document.addEventListener('click',async e=>{if(pass)return;const el=e.target.closest&&e.target.closest(targets);if(!el)return; if(busy||inEditor()||reduce()||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return; if(samePage(el))return; e.preventDefault();e.stopImmediatePropagation();busy=true;build(); const from=location.href; const safety=setTimeout(()=>{document.body.classList.remove('adn-pt-hold');root.classList.remove('on');[bg,...H,...V,...P].forEach(x=>x.getAnimations().forEach(a=>a.cancel()));busy=false;},6000); try{const oldNode=document.querySelector('.page__content > *'); const go=()=>{const router=(document.querySelector('#__nuxt')||{}).__vue_app__?.config?.globalProperties?.$router; const plain=el.tagName==='A'&&el.href&&!/main listing/i.test(el.textContent); try{sessionStorage.setItem('adnPTenter','1');}catch(x){} document.body.classList.add('adn-pt-hold'); if(plain&&router){const u=new URL(el.href,location.href);router.push(u.pathname+u.search).catch(()=>{location.href=u.href;});} else{pass=true;el.click();pass=false;}}; const left=leave(go); /* The animation has a fixed length: it does not wait for Baserow. Until the new page swaps in, page content stays hidden (adn-pt-hold) so the old page never flashes; the new content fades in the moment it arrives. */ const onSwap=()=>{try{sessionStorage.removeItem('adnPTenter');}catch(x){} const b=document.body;b.classList.remove('adn-pt-hold');b.classList.remove('adn-pt-enter');void b.offsetWidth;b.classList.add('adn-pt-enter'); setTimeout(()=>b.classList.remove('adn-pt-enter'),500);}; const tClick=Date.now(); const ready=new Promise(r=>setTimeout(()=>waitForPage(from,oldNode,onSwap).then(r),120)); /* lines meet, hold only while the page is still loading, then open out */ await settle(left,ready,tClick);await reveal(); }catch(err){root&&root.classList.remove('on');} finally{pass=false;clearTimeout(safety);busy=false;} },true); })(); /* ADN Add Job: after "Add client" succeeds, the client panel slides back out to the left (the reverse of how it came in) and the Client field flashes green with the new client already selected (new_client page parameter). A styled snapshot of the panel is taken on submit, because Baserow removes the real panel as soon as the page parameters change. */ (()=>{if(window.__adnAddClientFx)return;window.__adnAddClientFx=true; const reduce=()=>window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches; const css=`/* hide the client dropdown while it is re-selected programmatically */ .adn-client-syncing .ab-dropdown__items{opacity:0!important;pointer-events:none!important} .adn-client-flash{animation:adnClientFlash 2.6s cubic-bezier(.2,.7,.2,1) both} @keyframes adnClientFlash{0%{background-color:color-mix(in srgb,var(--adn-accent,#a8c28e) 55%,transparent);box-shadow:inset 0 -3px 0 var(--adn-accent,#a8c28e)} 60%{background-color:color-mix(in srgb,var(--adn-accent,#a8c28e) 22%,transparent);box-shadow:inset 0 -3px 0 var(--adn-accent,#a8c28e)} 100%{background-color:transparent;box-shadow:inset 0 -3px 0 rgba(168,194,142,0)}}`; const addStyle=()=>{if(document.getElementById('adn-addclient-style'))return;const s=document.createElement('style');s.id='adn-addclient-style';s.textContent=css;document.head.appendChild(s);}; /* Deep clone with every computed style inlined (pseudo-elements become spans) */ const pseudo=(src,which)=>{const cs=getComputedStyle(src,which);const c=cs.content;if(!c||c==='none'||c==='normal')return null; const sp=document.createElement('span');let t='';for(const p of cs)t+=p+':'+cs.getPropertyValue(p)+';';sp.style.cssText=t; sp.textContent=c.replace(/^["']|["']$/g,'');return sp;}; const snap=el=>{const c=el.cloneNode(true);const a=[el,...el.querySelectorAll('*')],b=[c,...c.querySelectorAll('*')]; a.forEach((s,i)=>{const t=b[i];if(!t||!t.style)return;const cs=getComputedStyle(s);let txt='';for(const p of cs)txt+=p+':'+cs.getPropertyValue(p)+';';t.style.cssText=txt; if(s.tagName==='INPUT'||s.tagName==='TEXTAREA')t.value=s.value; const bf=pseudo(s,'::before'),af=pseudo(s,'::after');if(bf)t.insertBefore(bf,t.firstChild);if(af)t.appendChild(af);}); c.removeAttribute('id');c.querySelectorAll('[id]').forEach(n=>n.removeAttribute('id'));return c;}; let pending=null; document.addEventListener('click',e=>{const btn=e.target.closest&&e.target.closest('.adn-job-art .form-container-element__submit-button button');if(!btn||reduce())return; const panel=btn.closest('.adn-job-art');if(!panel)return;const cell=panel.closest('.element__wrapper')||panel; const nameInput=panel.querySelector('input:not([type=hidden])'); try{pending={ghost:snap(cell),rect:cell.getBoundingClientRect(),name:(nameInput&&nameInput.value||'').trim(),from:location.href,t:Date.now()};}catch(x){pending=null;}},true); const play=p=>{addStyle();const r=p.rect; const clip=document.createElement('div');clip.setAttribute('aria-hidden','true'); clip.style.cssText=`position:fixed;left:${r.left}px;top:${r.top}px;width:${r.width}px;height:${r.height}px;overflow:hidden;z-index:60;pointer-events:none;`; const g=p.ghost;g.style.position='absolute';g.style.inset='0';g.style.margin='0';g.style.width='100%';g.style.height='100%'; clip.appendChild(g);document.body.appendChild(clip); g.animate([{transform:'translateX(0)',opacity:1},{transform:'translateX(-100%)',opacity:0}],{duration:460,easing:'cubic-bezier(.65,0,.35,1)',fill:'forwards'}) .finished.catch(()=>{}).then(()=>clip.remove()); const sleep=ms=>new Promise(r=>setTimeout(r,ms)); /* Baserow sets the new client's id from new_client but does not refresh the dropdown's label, so it is re-selected through the dropdown itself */ const sync=async w=>{if(!p.name)return;try{ const st=document.querySelector('#__nuxt').__vue_app__.config.globalProperties.$store; const app=(st.state.application.items||[]).find(a=>(a.pages||[]).some(pg=>pg.formData&&pg.formData[271])); const page=app&&app.pages.find(pg=>pg.formData&&pg.formData[271]); const label=w.querySelector('.ab-dropdown__selected');if(!label)return; if(label.textContent.trim()===p.name)return; w.classList.add('adn-client-syncing'); if(page)st.dispatch('formData/setFormData',{page,uniqueElementId:271,payload:{...page.formData[271],value:null}}); await sleep(60);label.click();await sleep(250); const si=w.querySelector('.select__search-input');if(si){si.value=p.name;si.dispatchEvent(new Event('input',{bubbles:true}));} if(si){si.dispatchEvent(new KeyboardEvent('keyup',{bubbles:true,key:'a'}));} /* look for the new client; scroll the list so long lists load more pages */ let it=null;for(let i=0;i<50&&!it;i++){await sleep(100);it=[...w.querySelectorAll('.ab-dropdownitem__item')].find(x=>{const t=x.querySelector('[title]');return t&&t.title.trim()===p.name;}); if(!it&&i%3===2){const ul=w.querySelector('.select__items');if(ul){ul.scrollTop=ul.scrollHeight;ul.dispatchEvent(new Event('scroll'));}}} if(it)it.querySelector('a').click();else document.dispatchEvent(new KeyboardEvent('keydown',{key:'Escape',bubbles:true})); }catch(x){}finally{await sleep(150);w.classList.remove('adn-client-syncing');}}; setTimeout(async()=>{const form=[...document.querySelectorAll('.element:has(> .form-container-element__submit-button)')].find(f=>f.querySelector('input[placeholder="Enter email subject"]')); const w=form&&form.querySelector(':scope > div:first-child > .element__wrapper:nth-child(3)');if(!w)return; await sync(w); w.classList.remove('adn-client-flash');void w.offsetWidth;w.classList.add('adn-client-flash');setTimeout(()=>w.classList.remove('adn-client-flash'),2700);},200);}; ADN.on(()=>{if(!pending)return;if(Date.now()-pending.t>8000){pending=null;return;} const q=new URLSearchParams(location.search);const added=q.get('new_client')&&!q.get('add_client'); if(added&&location.href!==pending.from&&!document.querySelector('.adn-job-art .form-container-element__submit-button')){const p=pending;pending=null;play(p);}},50); })(); /* ADN header hover (Heron-style), Overview / Main Listing / Add Job, plus Save changes, Create job, Add client, both Add model buttons, Add file and the Overview VIEW JOBS button. On hover a grid of square pixels fills the cell from left to right, each pixel stepping light grey -> dark, then the cell turns solid. The label rolls up: the dark text slides out and a light copy slides in (a text-shadow copy, so the link text itself is unchanged). On leave the pixels clear left to right and the label rolls back down. */ (()=>{if(window.__adnPx)return;window.__adnPx=true; /* Each target: fill colour and the label colour once filled */ const CFG=[ ['.adn-header-nav .adn-header-link','--adn-ink','--adn-canvas'], ['.adn-fin-menu button','--adn-ink','--adn-canvas'], ['.page__fixed-stack--top .adn-header-add','--adn-accent','--adn-ink'], ['.adn-job-details > .form-container-element__submit-button button','--adn-accent','--adn-ink'], ['.page__content:has(.adn-job-art) .form-container-element__submit-button button','--adn-accent','--adn-ink'], ['.job-add-model-action :is(button, a)','--adn-ink','--adn-canvas'], ['.adn-am-form > .form-container-element__submit-button button','--adn-ink','--adn-canvas'], ['.adn-attach-add a','--adn-accent','--adn-ink'], ['.adn-overview-hero-action button','--adn-ink','--adn-canvas'], ['.adn-login-form .auth-form__footer button','--adn-ink','--adn-canvas']]; const SEL=CFG.map(x=>x[0]).join(', '); const reduce=()=>window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches; const css=`[data-adn-px]{position:relative !important;isolation:isolate} [data-adn-px] > canvas.adn-px-cv{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none} [data-adn-px] .adn-roll{position:relative;z-index:1;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.4;height:1.4em} [data-adn-px] .adn-roll-txt{display:inline-block;text-shadow:0 1.4em 0 var(--adn-px-text-on);transition:transform .32s cubic-bezier(.625,.05,0,1)} [data-adn-px][data-px-hover] .adn-roll-txt{transform:translateY(-1.4em)} :is(a,button)[data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px]:is(:hover,:focus-visible){background:var(--adn-px-base) !important;color:var(--adn-px-text) !important} :is(a,button)[data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-px-on]{background:var(--adn-px-fill) !important;color:var(--adn-px-text-on) !important} /* no colour fades on animated buttons: the pixels do the transition, and a CSS background fade would flash the old colour once the pixels clear */ :is(a,button)[data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px][data-adn-px]{transition:none !important} .adn-attach-add a[data-adn-px]{text-transform:uppercase !important} /* Overview VIEW JOBS: keep the arrow cell above the pixels, no colour fade */ .adn-overview-hero-action button[data-adn-px]{transition:none !important} .adn-overview-hero-action button[data-adn-px]::after{position:relative;z-index:1;transition:transform .2s ease,border-color .2s ease} .adn-overview-hero-action button[data-adn-px][data-px-on]::after{border-left-color:rgba(247,247,241,.35)} /* while Baserow shows its saving spinner, hide the label */ :is(a,button)[data-adn-px].loading-spinner .adn-roll{visibility:hidden} @media (prefers-reduced-motion: reduce){[data-adn-px] .adn-roll-txt{transition:none}}`; const addStyle=()=>{if(document.getElementById('adn-px-style'))return;const s=document.createElement('style');s.id='adn-px-style';s.textContent=css;document.head.appendChild(s);}; const rgb=c=>{c=String(c).trim();if(c[0]==='#'){let h=c.slice(1);if(h.length===3)h=h.split('').map(x=>x+x).join('');return [0,2,4].map(i=>parseInt(h.slice(i,i+2),16));} const m=c.match(/[\d.]+/g)||[0,0,0];return [+m[0],+m[1],+m[2]];}; const varColor=(el,name,fb)=>{const v=getComputedStyle(el).getPropertyValue(name).trim();return v||fb;}; /* Wrap the first text node in .adn-roll > .adn-roll-txt (textContent stays the same) */ const wrap=el=>{const w=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,{acceptNode:n=>n.nodeValue.trim()?1:3});const t=w.nextNode();if(!t||t.parentElement.closest('.adn-roll'))return; const roll=document.createElement('span');roll.className='adn-roll';const txt=document.createElement('span');txt.className='adn-roll-txt'; t.parentNode.insertBefore(roll,t);txt.appendChild(t);roll.appendChild(txt);}; const root=()=>document.documentElement; /* Remember the resting colours (re-read while not hovered, so state-based colours such as a muted Create job label stay correct) */ const rest=el=>{if(el.matches(':hover')||el.hasAttribute('data-px-on')||el.__adnPx&&el.__adnPx.busy)return; const cs=getComputedStyle(el);let base=cs.backgroundColor;if(!base||base==='rgba(0, 0, 0, 0)'||base==='transparent')base=varColor(root(),'--adn-canvas','#f7f7f1'); el.style.setProperty('--adn-px-base',base);el.style.setProperty('--adn-px-text',cs.color);if(el.__adnPx)el.__adnPx.base=rgb(base);}; /* Baserow may re-render a button's children or reset its class list (e.g. while saving), so state lives in data attributes and the canvas and label wrap are re-attached when missing */ const setup=el=>{if(el.dataset.adnPx&&el.__adnPx){if(!el.contains(el.__adnPx.cv))el.insertBefore(el.__adnPx.cv,el.firstChild);wrap(el);rest(el);return;}el.dataset.adnPx='1';addStyle(); const cfg=CFG.find(x=>el.matches(x[0]))||CFG[0]; const fill=varColor(root(),cfg[1],'#262626'),on=varColor(root(),cfg[2],'#f7f7f1'); el.style.setProperty('--adn-px-fill',fill);el.style.setProperty('--adn-px-text-on',on); el.classList.add('adn-px');wrap(el); const cv=document.createElement('canvas');cv.className='adn-px-cv';cv.setAttribute('aria-hidden','true');el.insertBefore(cv,el.firstChild); el.__adnPx={cv,L:null,raf:0,base:[247,247,241],fill:rgb(fill),busy:false};rest(el); el.addEventListener('mouseenter',()=>go(el,1));el.addEventListener('mouseleave',()=>go(el,0)); el.addEventListener('focus',()=>go(el,1));el.addEventListener('blur',()=>go(el,0));}; /* Pixel animation: per-pixel delay = column position + jitter; each pixel steps through 4 shades between the cell colour and the fill colour */ const SPREAD=110,JITTER=50,STEP=80; const go=(el,target)=>{const st=el.__adnPx;if(!st)return; el.toggleAttribute('data-px-hover',!!target); if(reduce()){el.toggleAttribute('data-px-on',!!target);return;} cancelAnimationFrame(st.raf);st.busy=true; const r=el.getBoundingClientRect(),W=Math.max(1,r.width),H=Math.max(1,r.height),dpr=window.devicePixelRatio||1; const rows=Math.max(3,Math.round(H/15)),size=H/rows,cols=Math.ceil(W/size),N=rows*cols; const cv=st.cv;if(cv.width!==Math.round(W*dpr)||cv.height!==Math.round(H*dpr)){cv.width=Math.round(W*dpr);cv.height=Math.round(H*dpr);} const ctx=cv.getContext('2d');ctx.setTransform(dpr,0,0,dpr,0,0); if(!st.L||st.L.length!==N){const was=el.hasAttribute('data-px-on')?1:0;st.L=new Float32Array(N).fill(was);} const from=Float32Array.from(st.L),delay=new Float32Array(N); for(let i=0;i`rgb(${Math.round(st.base[0]+(st.fill[0]-st.base[0])*q)},${Math.round(st.base[1]+(st.fill[1]-st.base[1])*q)},${Math.round(st.base[2]+(st.fill[2]-st.base[2])*q)})`; const frame=now=>{const t=now-t0;ctx.clearRect(0,0,W,H); for(let i=0;idocument.querySelectorAll(SEL).forEach(setup); scan();ADN.on(scan,600); })(); /* ADN Job Detail tabs (Heron-style): on tab click the charcoal block slides from the old tab to the new one (desktop tab bar). The tab content itself switches without any animation. */ (()=>{if(window.__adnTabFx)return;window.__adnTabFx=true; const reduce=()=>window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches; const EASE='cubic-bezier(.65,0,.35,1)',SLIDE=420,WIPE=560,SHIFT=64; const css=`.job-detail-tabs[data-adn-sliding] .menu-element__container{position:relative} /* the block sits on top in difference mode: #d1d1cb turns the canvas into charcoal and dark text light */ .adn-tab-block{position:absolute;top:0;bottom:0;left:0;z-index:2;pointer-events:none;background:#d1d1cb;mix-blend-mode:difference} .job-detail-tabs.job-detail-tabs[data-adn-sliding] a[href][href]:is(*, :hover){background:transparent !important;color:var(--adn-text,#343430) !important} .job-detail-tabs.job-detail-tabs[data-adn-sliding] a[href][href]:is(*, :hover)::before{color:var(--adn-muted,#74746d) !important} .job-detail-tabs[data-adn-settle] a[href],.job-detail-tabs[data-adn-settle] a[href]::before{transition:none !important} .adn-tab-wipe{position:fixed;z-index:40;pointer-events:none;overflow:hidden;background:var(--adn-canvas,#f7f7f1)} .adn-tab-wipe::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--adn-accent,#a8c28e)} .adn-tab-wipe[data-dir="right"]::after{left:0} .adn-tab-wipe[data-dir="left"]::after{right:0}`; const addStyle=()=>{if(document.getElementById('adn-tabfx-style'))return;const s=document.createElement('style');s.id='adn-tabfx-style';s.textContent=css;document.head.appendChild(s);}; const tabOf=u=>{try{return new URL(u,location.href).searchParams.get('tab')||'Details';}catch(x){return '';}}; /* Everything below the tab bar: following siblings of the tab bar's wrapper, then the following root-level bands of the page */ const below=menu=>{const out=[];let w=menu.closest('.element__wrapper'); while(w&&!w.parentElement.classList.contains('page__content')){let s=w.nextElementSibling;while(s){if(s.classList.contains('element__wrapper'))out.push(s);s=s.nextElementSibling;}w=w.parentElement.closest('.element__wrapper');} if(w){let s=w.nextElementSibling;while(s){if(s.classList.contains('element__wrapper'))out.push(s);s=s.nextElementSibling;}} return out;}; let busy=false; document.addEventListener('click',e=>{const a=e.target.closest&&e.target.closest('.job-detail-tabs a[href], .adn-jd-strip a[href]');if(!a||busy||reduce())return; if(e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return; const strip=a.closest('.adn-jd-strip');const menu=strip||a.closest('.job-detail-tabs'); const links=[...menu.querySelectorAll('a[href]')]; const from=strip?strip.querySelector('a[aria-current="page"]'):menu.querySelector('a[data-adn-detail-active="true"]'); const target=tabOf(a.href);if(!from||from===a||target===tabOf(location.href))return; /* direction: towards a tab further right = right, otherwise left */ const dir=links.indexOf(a)>links.indexOf(from)?'right':'left'; addStyle();busy=true; /* 1. slide the charcoal block (desktop tab bar only) */ let block=null,slide=Promise.resolve(); if(!strip){const cont=menu.querySelector('.menu-element__container')||menu; const cr=cont.getBoundingClientRect(),fr=from.getBoundingClientRect(),tr=a.getBoundingClientRect(); block=document.createElement('div');block.className='adn-tab-block';menu.setAttribute('data-adn-sliding','');cont.appendChild(block); slide=block.animate([{transform:`translateX(${fr.left-cr.left+cont.scrollLeft}px)`,width:fr.width+'px'},{transform:`translateX(${tr.left-cr.left+cont.scrollLeft}px)`,width:tr.width+'px'}],{duration:SLIDE,easing:EASE,fill:'forwards'}).finished.catch(()=>{});} /* 2. cover the content area at once, reveal sideways once the new tab has rendered */ const pc=document.querySelector('.page__content');const pr=pc?pc.getBoundingClientRect():{left:0,right:innerWidth}; const nav=document.querySelector('.page__fixed-stack--top');const hb=nav?nav.getBoundingClientRect().bottom:0; const top=Math.max(menu.getBoundingClientRect().bottom,hb,0),H=Math.max(0,innerHeight-top),W=Math.max(0,pr.right-pr.left); const wipe=document.createElement('div');wipe.className='adn-tab-wipe';wipe.dataset.dir=dir;wipe.setAttribute('aria-hidden','true'); /* moving right: the cover is pinned to the right and its left edge travels right; moving left: the reverse */ wipe.style.cssText=`top:${top}px;height:${H}px;width:${W}px;`+(dir==='right'?`right:${innerWidth-pr.right}px;`:`left:${pr.left}px;`); /* no content animation (too busy for a screen used all day): the new tab simply appears */ const t0=Date.now(); const wait=()=>new Promise(res=>{const tick=()=>{if(tabOf(location.href)===target||Date.now()-t0>900)return requestAnimationFrame(()=>requestAnimationFrame(res));setTimeout(tick,16);};tick();}); /* hand over to the real active style in one frame with its colour fade switched off (a fade here showed as a flicker); re-enable after paint */ const done=()=>{if(!strip){menu.setAttribute('data-adn-settle','');void menu.offsetWidth;menu.removeAttribute('data-adn-sliding');} if(block)block.remove();wipe.remove();busy=false; if(!strip)requestAnimationFrame(()=>requestAnimationFrame(()=>menu.removeAttribute('data-adn-settle')));}; const safety=setTimeout(done,3000); Promise.all([wait(),slide]).then(()=>{clearTimeout(safety);done();}); },true); })(); /* ADN Job Listing tabs (All / IOR / EOR ...): the charcoal block slides from the current tab to the clicked one, like the Job Detail tabs (no content wipe here). */ (()=>{if(window.__adnListTabFx)return;window.__adnListTabFx=true; const reduce=()=>window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches; const EASE='cubic-bezier(.65,0,.35,1)',SLIDE=420; const css=`.adn-jobs-tabs[data-adn-sliding] .menu-element__container{position:relative} .adn-jobs-tabs .adn-tab-block{position:absolute;top:0;bottom:auto;left:0;z-index:2;pointer-events:none;background:#d1d1cb;mix-blend-mode:difference} .adn-jobs-tabs.adn-jobs-tabs[data-adn-sliding] a[href][href]:is(*, :hover){background:transparent !important;color:var(--adn-text,#343430) !important} .adn-jobs-tabs[data-adn-settle] a[href]{transition:none !important}`; const addStyle=()=>{if(document.getElementById('adn-listtabfx-style'))return;const s=document.createElement('style');s.id='adn-listtabfx-style';s.textContent=css;document.head.appendChild(s);}; const typeOf=u=>{try{return (new URL(u,location.href).searchParams.get('job_type')||'').trim();}catch(x){return null;}}; let busy=false; document.addEventListener('click',e=>{const a=e.target.closest&&e.target.closest('.adn-jobs-tabs a[href]');if(!a||busy||reduce())return; if(e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return; const menu=a.closest('.adn-jobs-tabs');const from=menu.querySelector('a[data-adn-job-active="true"]'); if(!from||from===a||typeOf(a.href)===typeOf(location.href))return; addStyle();busy=true;const cont=menu.querySelector('.menu-element__container')||menu; const cr=cont.getBoundingClientRect(),fr=from.getBoundingClientRect(),tr=a.getBoundingClientRect(); const block=document.createElement('div');block.className='adn-tab-block';block.setAttribute('aria-hidden','true'); menu.setAttribute('data-adn-sliding','');cont.appendChild(block); const x0=fr.left-cr.left+cont.scrollLeft,x1=tr.left-cr.left+cont.scrollLeft,y0=fr.top-cr.top,y1=tr.top-cr.top; const slide=block.animate([{transform:`translate(${x0}px,${y0}px)`,width:fr.width+'px',height:fr.height+'px'},{transform:`translate(${x1}px,${y1}px)`,width:tr.width+'px',height:tr.height+'px'}],{duration:SLIDE,easing:EASE,fill:'forwards'}).finished.catch(()=>{}); /* wait until the clicked tab is marked active, then hand over in one frame */ const ready=()=>new Promise(res=>{const t0=Date.now();const tick=()=>{if(a.getAttribute('data-adn-job-active')==='true'||Date.now()-t0>1200)return res();setTimeout(tick,30);};tick();}); const done=()=>{menu.setAttribute('data-adn-settle','');void menu.offsetWidth;menu.removeAttribute('data-adn-sliding');block.remove();busy=false; requestAnimationFrame(()=>requestAnimationFrame(()=>menu.removeAttribute('data-adn-settle')));}; const safety=setTimeout(done,2500); Promise.all([slide,ready()]).then(()=>{clearTimeout(safety);done();}); },true); })(); /* ADN Overview smooth scroll (Heron-style, Lenis 1.1.5): on the Overview page and the Job Listing page (trial), the mouse wheel glides the page to its new position and eases to a stop (lerp .1, the same feel as Heron) instead of jumping. Touch scrolling stays native. Anything that scrolls on its own (e.g. the Today's incoming jobs list when it is long, dropdown lists, popups) keeps normal scrolling. Leaving the page stops it at once so the next page scrolls normally. If the library cannot load (network blocks unpkg) the page keeps normal scrolling. Off in the editor and for "reduce motion" users. LERP: lower = floatier. */ (()=>{if(window.__adnSmooth)return;window.__adnSmooth=true; const SRC='https://unpkg.com/lenis@1.1.5/dist/lenis.min.js',LERP=.1; const inEditor=()=>/\/builder\/\d+\/page\//.test(location.pathname); const reduce=()=>window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches; /* pages that get smooth scrolling: Overview and the Job Listing (Main listing) */ const onOverview=()=>!!document.querySelector('.adn-overview-hero, .job-listing-table'); let lib=null,loading=false,failed=false,lenis=null,raf=0; const load=()=>{if(lib||loading||failed)return;if(window.Lenis){lib=window.Lenis;return;}loading=true; const s=document.createElement('script');s.src=SRC;s.async=true; s.onload=()=>{loading=false;lib=window.Lenis||null;if(!lib)failed=true;}; s.onerror=()=>{loading=false;failed=true;};document.head.appendChild(s);}; if(!document.getElementById('adn-smooth-style')){const st=document.createElement('style');st.id='adn-smooth-style'; st.textContent='html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto !important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}';document.head.appendChild(st);} /* let inner scroll areas scroll natively: any element under the pointer that can scroll itself */ const scrollsItself=n=>{for(let e=n;e&&e!==document.body&&e!==document.documentElement;e=e.parentElement){ if(e.nodeType!==1)continue;if(e.hasAttribute('data-lenis-prevent'))return true;const cs=getComputedStyle(e); if(/(auto|scroll)/.test(cs.overflowY)&&e.scrollHeight>e.clientHeight+1)return true; if(e.closest('.modal__box, .ab-dropdown__items, .context'))return true;}return false;}; const start=()=>{try{lenis=new lib({lerp:LERP,smoothWheel:true,syncTouch:false,prevent:scrollsItself});}catch(e){lenis=null;failed=true;return;} const loop=t=>{if(!lenis)return;lenis.raf(t);raf=requestAnimationFrame(loop);};raf=requestAnimationFrame(loop);}; const stop=()=>{if(!lenis)return;cancelAnimationFrame(raf);try{lenis.destroy();}catch(e){}lenis=null;}; /* stop the glide the moment the route changes, so the next page is not scrolled by it */ let hooked=false;const hook=()=>{if(hooked)return;const a=document.querySelector('#__nuxt');const r=a&&a.__vue_app__&&a.__vue_app__.config.globalProperties.$router; if(r&&r.beforeEach){r.beforeEach(()=>{stop();});hooked=true;}}; const sync=()=>{hook();const want=!inEditor()&&!reduce()&&onOverview(); if(!want){stop();return;}if(failed)return;if(!lib){load();return;}if(!lenis)start();}; window.__adnSmoothState=()=>({loaded:!!lib,failed,active:!!lenis}); sync();ADN.on(sync,400); })(); /* ADN Job listing row status: copies each row's status (the tag in the Status column) onto the row as data-adn-status, e.g. "completed", so CSS section 21 can fade finished jobs. Follows paging, filters and tabs. */ (()=>{if(window.__adnRowStatus)return;window.__adnRowStatus=true; const sync=()=>{document.querySelectorAll('.job-listing-table tbody tr').forEach(tr=>{const t=tr.querySelector('td:nth-child(7) .ab-tag'); const v=t?t.textContent.trim().toLowerCase().replace(/\s+/g,'-'):'';if(tr.getAttribute('data-adn-status')!==v){if(v)tr.setAttribute('data-adn-status',v);else tr.removeAttribute('data-adn-status');}});}; sync();ADN.on(sync,400); })(); /* ADN Overview incoming jobs chart: line chart of jobs received per day over the last 30 days (Malaysia time), in the band .adn-overview-chart. Reads the hidden repeat .adn-chart-data (one "Received Day" YYYY-MM-DD per job, from data source "Jobs Last 30 Days"); days with no jobs are 0. Weekends are lightly shaded, today is the green square, labels weekly. Hover (or tap) a day for its date and count. Redraws on resize and when the data changes. CSS section 23. */ (()=>{if(window.__adnChart)return;window.__adnChart=true; const NS='http://www.w3.org/2000/svg',DAYS=30,H=230,PL=28,PR=8,PT=10,PB=26; const MON=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],WD=['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; /* today's date in Malaysia time, as a UTC-midnight Date so day maths is exact */ const myToday=()=>{const p=new Intl.DateTimeFormat('en-CA',{timeZone:'Asia/Kuala_Lumpur',year:'numeric',month:'2-digit',day:'2-digit'}).format(new Date());return new Date(p+'T00:00:00Z');}; const key=d=>d.toISOString().slice(0,10); const fmt=d=>d.getUTCDate()+' '+MON[d.getUTCMonth()]; const hydrated=(()=>{let at=0;return()=>{const a=document.querySelector('#__nuxt');const n=a&&a.__vue_app__&&a.__vue_app__.config.globalProperties.$nuxt; if(!n||n.isHydrating){at=0;return false;}if(!at)at=Date.now();return Date.now()-at>250;};})(); const read=band=>{const t=myToday(),days=[];for(let i=DAYS-1;i>=0;i--){const d=new Date(t);d.setUTCDate(t.getUTCDate()-i);days.push({d,k:key(d),n:0});} const idx=Object.fromEntries(days.map((x,i)=>[x.k,i])); band.querySelectorAll('.adn-chart-data .adn-chart-date').forEach(e=>{const v=e.textContent.trim().slice(0,10);if(v in idx)days[idx[v]].n++;});return days;}; const el=(n,a)=>{const e=document.createElementNS(NS,n);for(const k in a)e.setAttribute(k,a[k]);return e;}; const draw=(box,days)=>{const W=Math.max(280,box.clientWidth-parseFloat(getComputedStyle(box).paddingLeft)-parseFloat(getComputedStyle(box).paddingRight)); const max=Math.max(4,...days.map(x=>x.n));const step=max<=6?2:max<=12?3:max<=20?5:10;const top=Math.ceil(max/step)*step; const cw=(W-PL-PR)/(DAYS-1),x=i=>PL+i*cw,y=v=>PT+(H-PT-PB)*(1-v/top); const svg=el('svg',{viewBox:'0 0 '+W+' '+H,role:'img','aria-label':'Jobs received per day, last 30 days'}); /* weekend shading */ days.forEach((p,i)=>{const w=p.d.getUTCDay();if(w===0||w===6)svg.appendChild(el('rect',{class:'wkend',x:Math.max(PL,x(i)-cw/2),y:PT,width:Math.min(cw,W-PR-Math.max(PL,x(i)-cw/2)),height:H-PT-PB}));}); /* horizontal grid + y labels */ const g=el('g',{class:'grid'});for(let v=0;v<=top;v+=step){g.appendChild(el('line',{class:v===0?'base':'',x1:PL,x2:W-PR,y1:y(v),y2:y(v)}));const t=el('text',{x:PL-8,y:y(v)+4,'text-anchor':'end'});t.textContent=v;svg.appendChild(t);} svg.insertBefore(g,svg.firstChild); /* x labels: weekly, counted back from today */ days.forEach((p,i)=>{if((DAYS-1-i)%7)return;const t=el('text',{x:x(i),y:H-6,'text-anchor':i===DAYS-1?'end':'middle'});t.textContent=i===DAYS-1?'Today':fmt(p.d);svg.appendChild(t);}); /* area + line */ const pts=days.map((p,i)=>x(i).toFixed(1)+','+y(p.n).toFixed(1)); svg.appendChild(el('path',{class:'area',d:'M'+x(0)+','+y(0)+'L'+pts.join('L')+'L'+x(DAYS-1)+','+y(0)+'Z'})); const line=el('polyline',{class:'line',points:pts.join(' ')});svg.appendChild(line); svg.appendChild(el('rect',{class:'today',x:x(DAYS-1)-4,y:y(days[DAYS-1].n)-4,width:8,height:8})); /* hover: guide, point, tooltip */ const guide=el('line',{class:'guide',x1:0,x2:0,y1:PT,y2:H-PB,visibility:'hidden'}),pt=el('rect',{class:'pt',width:7,height:7,visibility:'hidden'});svg.appendChild(guide);svg.appendChild(pt); const tip=box.querySelector('.adn-chart-tip')||box.appendChild(Object.assign(document.createElement('div'),{className:'adn-chart-tip'})); const show=i=>{const p=days[i];guide.setAttribute('x1',x(i));guide.setAttribute('x2',x(i));guide.setAttribute('visibility','visible'); pt.setAttribute('x',x(i)-3.5);pt.setAttribute('y',y(p.n)-3.5);pt.setAttribute('visibility','visible'); tip.innerHTML='';tip.append(WD[p.d.getUTCDay()]+' '+fmt(p.d)+' '+p.d.getUTCFullYear());const b=document.createElement('b');b.textContent=p.n+(p.n===1?' job':' jobs');tip.appendChild(b); const off=parseFloat(getComputedStyle(box).paddingLeft);const left=Math.min(Math.max(off+x(i),off+70),box.clientWidth-70);tip.style.left=left+'px';tip.classList.add('on');}; const hide=()=>{guide.setAttribute('visibility','hidden');pt.setAttribute('visibility','hidden');tip.classList.remove('on');}; days.forEach((p,i)=>{const r=el('rect',{class:'hit',x:Math.max(0,x(i)-cw/2),y:0,width:cw,height:H});r.addEventListener('pointerenter',()=>show(i));r.addEventListener('pointerdown',()=>show(i));svg.appendChild(r);}); svg.addEventListener('pointerleave',hide); const old=box.querySelector('svg');if(old)old.replaceWith(svg);else box.insertBefore(svg,box.firstChild); /* draw the line in once, only when the chart has scrolled into view: until then the line waits hidden; it starts once nearly the whole chart is on screen */ if(!box.dataset.played&&!(window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches)&&line.getTotalLength&&window.IntersectionObserver){ const L=line.getTotalLength();line.style.strokeDasharray=L;line.style.strokeDashoffset=L;box.__line=line; /* the grey shading and today's square wait hidden too, then fade in with the line */ const ar=svg.querySelector('.area'),td=svg.querySelector('.today');[ar,td].forEach(e=>{if(e)e.style.opacity='0';});box.__fade=[ar,td]; if(!box.__io){box.__io=new IntersectionObserver(es=>{if(!es.some(e=>e.isIntersecting))return;box.__io.disconnect();box.dataset.played='1'; const ln=box.__line;if(!ln)return;ln.getBoundingClientRect();ln.style.transition='stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) .15s';ln.style.strokeDashoffset='0'; const [ar,td]=box.__fade||[];if(ar){ar.style.transition='opacity 1.1s ease .35s';ar.style.opacity='1';}if(td){td.style.transition='opacity .3s ease 1.3s';td.style.opacity='1';}},{threshold:.9});box.__io.observe(box);}} }; let sig='',w=0; const sync=()=>{if(!hydrated())return;const band=document.querySelector('.adn-overview-chart');if(!band){sig='';return;} let box=band.querySelector(':scope > .adn-chart');if(!box){box=document.createElement('div');box.className='adn-chart';band.appendChild(box);sig='';} const days=read(band);const s=days.map(p=>p.n).join(',')+'|'+days[0].k;const cw=box.clientWidth; if(s===sig&&cw===w)return;sig=s;w=cw;draw(box,days);}; sync();ADN.on(sync,400); })(); /* ADN Job listing mobile tabs: on phones (700px and under) Baserow folds the job type tabs into a ☰ menu. This adds a strip with the same tabs (names and job_type values read from the tab menu element itself, so editing the menu in the builder updates the strip) that swipes sideways, marks and scrolls the active tab into view, and switches tabs without a reload. CSS section 25b hides the ☰ menu while the strip is there. */ (()=>{if(window.__adnJobStrip)return;window.__adnJobStrip=true; /* the Invoices page has its own tab menu (.adn-inv-tabs) and uses ?view= instead of ?job_type= */ const onInv=()=>!!document.querySelector('.adn-inv-tabs');const P=()=>onInv()?'view':'job_type';const CLS=()=>onInv()?'adn-inv-tabs':'adn-jobs-tabs'; const narrow=()=>window.matchMedia&&matchMedia('(max-width: 700px)').matches; const app=()=>{const a=document.querySelector('#__nuxt');return a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;}; const hydrated=(()=>{let at=0;return()=>{const g=app();const n=g&&g.$nuxt;if(!n||n.isHydrating){at=0;return false;}if(!at)at=Date.now();return Date.now()-at>250;};})(); /* the tab menu's items from the builder store: [{name, value}] */ const items=()=>{const g=app();const s=g&&g.$store;if(!s)return null;try{ const b=s.getters['application/getSelected']||null;const apps=b?[b]:(s.getters['application/getAll']||[]); for(const ap of apps){for(const p of (ap.pages||[])){const els=s.getters['element/getElementsOrdered'](p)||[];const m=els.find(e=>String(e.css_classes||'').split(/\s+/).includes(CLS())); if(m&&m.menu_items)return m.menu_items.filter(i=>!i.parent_menu_item).map(i=>{const q=(i.query_parameters||[]).find(x=>x.name===P());let v=q&&q.value&&q.value.formula||'';v=v.replace(/^'(.*)'$/,'$1');return {name:i.name,value:v};});}} }catch(e){}return null;}; const current=()=>{const v=new URLSearchParams(location.search).get(P());return v==null?(P()==='view'?'to_invoice':' '):v;}; const go=v=>{const g=app();const r=g&&g.$router;const q=Object.assign({},r?r.currentRoute.value.query:{},{[P()]:v}); if(r)r.push({path:location.pathname,query:q}).catch(()=>{});else location.search='?'+P()+'='+encodeURIComponent(v);}; let sig=''; const sync=()=>{const tabs=document.querySelector('.adn-jobs-tabs');const wrap=tabs&&tabs.closest('.element__wrapper'); let strip=wrap&&wrap.querySelector('.adn-jobs-strip'); if(!wrap||!narrow()||!hydrated()){if(strip)strip.remove();sig='';return;} const list=items();if(!list||!list.length)return; const cur=current().trim();const k=JSON.stringify(list)+'|'+cur; if(!strip){strip=document.createElement('nav');strip.className='adn-jobs-strip';strip.setAttribute('aria-label','Job type');wrap.appendChild(strip);sig='';} if(k===sig)return;sig=k;strip.innerHTML=''; let active=null;list.forEach(it=>{const a=document.createElement('a');a.textContent=it.name; const qs=new URLSearchParams(location.search);qs.set('job_type',it.value);a.href=location.pathname+'?'+qs.toString(); const on=it.value.trim()===cur;if(on){a.setAttribute('aria-current','page');active=a;} a.addEventListener('click',e=>{e.preventDefault();go(it.value);});strip.appendChild(a);}); if(active){const l=active.offsetLeft-(strip.clientWidth-active.offsetWidth)/2;strip.scrollLeft=Math.max(0,l);}}; sync();ADN.on(sync,400);addEventListener('resize',()=>{sig='';sync();}); })(); /* ADN Mobile header menu (Heron-style): on phones (700px and under) the header's middle cell becomes a MENU button; it opens a dropdown under it with Overview, Main Listing and Add Job. Overview / Main Listing go to the same pages as the desktop links; Add Job presses the header's own Add Job button, so its builder action is kept. The current page is marked ■. Closes on tap outside, Esc, choosing an item or a page change. CSS section 26. */ (()=>{if(window.__adnMMenu)return;window.__adnMMenu=true; const narrow=()=>window.matchMedia&&matchMedia('(max-width: 700px)').matches; const g=()=>{const a=document.querySelector('#__nuxt');return a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;}; const hydrated=(()=>{let at=0;return()=>{const x=g();const n=x&&x.$nuxt;if(!n||n.isHydrating){at=0;return false;}if(!at)at=Date.now();return Date.now()-at>250;};})(); /* "/builder/23/preview" in the editor preview, "" on the published site */ const prefix=()=>{const m=location.pathname.match(/^\/builder\/\d+\/preview/);return m?m[0]:'';}; const rel=()=>location.pathname.slice(prefix().length)||'/'; const go=(path,query)=>{const r=g()&&g().$router;const to={path:prefix()+path,query:query||{}}; if(r)r.push(to).catch(()=>{});else location.href=to.path+(query?'?'+new URLSearchParams(query):'');}; let btn=null,panel=null; const close=()=>{if(!panel)return;panel.classList.remove('on');btn.setAttribute('aria-expanded','false');}; const toggle=()=>{const on=!panel.classList.contains('on');panel.classList.toggle('on',on);btn.setAttribute('aria-expanded',String(on));if(on)mark();}; const mark=()=>{if(!panel)return;const p=rel();panel.querySelectorAll('a[data-k]').forEach(a=>{const on=(a.dataset.k==='overview'&&/^\/main\/?$/.test(p))||(a.dataset.k==='listing'&&p==='/Home')||(p==='/invoices'&&((a.dataset.k==='invoices'&&new URLSearchParams(location.search).get('doc')!=='quotation')||(a.dataset.k==='quotation'&&new URLSearchParams(location.search).get('doc')==='quotation'))); if(on)a.setAttribute('aria-current','page');else a.removeAttribute('aria-current');});}; const item=(label,k,fn,cls)=>{const a=document.createElement('a');a.textContent=label;a.dataset.k=k;a.href='#';if(cls)a.className=cls; a.addEventListener('click',e=>{e.preventDefault();close();fn();});return a;}; const build=cell=>{btn=document.createElement('button');btn.type='button';btn.className='adn-mmenu';btn.setAttribute('aria-expanded','false');btn.setAttribute('aria-haspopup','true'); btn.innerHTML='Menu';btn.addEventListener('click',e=>{e.stopPropagation();toggle();}); panel=document.createElement('nav');panel.className='adn-mmenu-panel';panel.setAttribute('aria-label','Main navigation'); const ov=item('Overview','overview',()=>go('/main'));ov.href=prefix()+'/main'; const ls=item('Main Listing','listing',()=>go('/Home',{job_type:' '}));ls.href=prefix()+'/Home?job_type=%20'; /* Finance: a row that opens its own sub-list (Heron-style): the row fills charcoal, the corner mark flips from bottom-right to top-right and Quotation / Invoice slide open under it (CSS 44f) */ const fl=document.createElement('button');fl.type='button';fl.className='adn-mm-sub-btn';fl.setAttribute('aria-expanded','false'); fl.innerHTML='Finance'; const iq=item('Quotation','quotation',()=>go('/invoices',{doc:'quotation'}));iq.href=prefix()+'/invoices?doc=quotation'; const iv=item('Invoice','invoices',()=>go('/invoices'));iv.href=prefix()+'/invoices'; const fs=document.createElement('div');fs.className='adn-mm-sub';const fsi=document.createElement('div');fsi.className='adn-mm-sub-inner';fsi.append(iq,iv);fs.append(fsi); fl.addEventListener('click',e=>{e.preventDefault();const on=fl.getAttribute('aria-expanded')!=='true';fl.setAttribute('aria-expanded',String(on));fs.classList.toggle('on',on);}); const ad=item('Add Job','add',()=>{const b=document.querySelector('.page__fixed-stack--top .adn-header-add')||[...document.querySelectorAll('.page__fixed-stack--top button')].find(x=>x.textContent.trim().toLowerCase()==='add job');if(b)b.click();},'cta'); panel.append(ov,ls,fl,fs,ad);cell.append(btn,panel);mark();}; document.addEventListener('click',e=>{if(panel&&panel.classList.contains('on')&&!panel.contains(e.target)&&e.target!==btn)close();}); document.addEventListener('keydown',e=>{if(e.key==='Escape')close();}); let hooked=false; const sync=()=>{if(!hooked){const r=g()&&g().$router;if(r&&r.afterEach){r.afterEach(()=>{close();setTimeout(mark,50);});hooked=true;}} const col=document.querySelector('.page__fixed-stack--top .column-element');const cell=col&&col.querySelectorAll(':scope > .column-element__column')[1]; const have=col&&col.querySelector('.adn-mmenu'); if(!cell||!narrow()||!hydrated()){if(have){close();have.remove();panel&&panel.remove();btn=panel=null;}return;} if(!have)build(cell);}; sync();ADN.on(sync,400); })(); /* ADN Add Job new client panel (phones, 700px and under): adds the CLOSE — cell to the New Client panel (add_client=1). Close or Esc slides the panel down and returns to the job form (add_client removed from the address; the job form keeps what was typed). The phone's back button also works, since opening the panel was its own step. CSS section 28. */ (()=>{if(window.__adnNcPanel)return;window.__adnNcPanel=true; const narrow=()=>window.matchMedia&&matchMedia('(max-width: 700px)').matches; const g=()=>{const a=document.querySelector('#__nuxt');return a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;}; const panel=()=>document.querySelector('.page__content .adn-job-art .element:has(> .form-container-element__submit-button)'); let busy=false; const close=()=>{const p=panel();if(!p||busy)return;busy=true;const col=p.closest('.column-element__column'); const done=()=>{const r=g()&&g().$router;const cur=r&&r.currentRoute.value; if(r&&cur){const q=Object.assign({},cur.query);delete q.add_client;r.replace({path:cur.path,query:q}).catch(()=>{}).finally(()=>{busy=false;col&&col.classList.remove('adn-nc-closing');});} else{const u=new URL(location.href);u.searchParams.delete('add_client');location.replace(u.href);}}; const still=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches; if(col&&!still){col.classList.add('adn-nc-closing');setTimeout(done,220);}else done();}; document.addEventListener('keydown',e=>{if(e.key==='Escape'&&narrow()&&panel())close();}); let seen=null; const sync=()=>{const p=panel(); if(!p||!narrow()){const b=document.querySelector('.adn-nc-close');if(b)b.remove();seen=null;return;} if(!p.querySelector(':scope > .adn-nc-close')){const b=document.createElement('button');b.type='button';b.className='adn-nc-close';b.textContent='Close';b.setAttribute('aria-label','Close new client'); b.addEventListener('click',e=>{e.preventDefault();close();});p.appendChild(b);} /* start at the top of the panel each time it opens */ if(seen!==p){seen=p;const col=p.closest('.column-element__column');if(col)col.scrollTop=0;}}; sync();ADN.on(sync,300); })(); /* ADN Job detail mobile (phones, 700px and under), CSS section 29: 1. Progress: removed (the status shows as a chip in the facts row). 2. Tabs: Baserow folds the five tabs into a ☰ menu on phones, so this adds a swipe strip [01] Details … [05] Invoice (names read from the tab menu in the builder), marks the current tab and keeps it in view. */ (()=>{if(window.__adnJdMobile)return;window.__adnJdMobile=true; const narrow=()=>window.matchMedia&&matchMedia('(max-width: 700px)').matches; const g=()=>{const a=document.querySelector('#__nuxt');return a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;}; /* 2. tabs strip */ const items=()=>{const s=g()&&g().$store;if(!s)return null;try{const apps=s.getters['application/getAll']||[]; for(const ap of apps)for(const p of (ap.pages||[])){const els=s.getters['element/getElementsOrdered'](p)||[];const m=els.find(e=>String(e.css_classes||'').split(/\s+/).includes('job-detail-tabs')); if(m&&m.menu_items)return m.menu_items.filter(i=>!i.parent_menu_item).map(i=>{const qs={};(i.query_parameters||[]).forEach(q=>{let v=(q.value&&q.value.formula)||'';v=v.replace(/^'(.*)'$/,'$1');qs[q.name]=v;});return {name:i.name,qs};});}}catch(e){}return null;}; let sig=''; const tabs=()=>{const menu=document.querySelector('.job-detail-tabs');const wrap=menu&&menu.closest('.element__wrapper'); let strip=wrap&&wrap.querySelector('.adn-jd-strip'); if(!wrap||!narrow()){if(strip)strip.remove();sig='';return;} const list=items();if(!list||!list.length)return; const cur=new URLSearchParams(location.search).get('tab')||list[0].qs.tab||''; const k=JSON.stringify(list)+'|'+cur+'|'+location.pathname; if(!strip){strip=document.createElement('nav');strip.className='adn-jd-strip';strip.setAttribute('aria-label','Job sections');wrap.appendChild(strip);sig='';} if(k===sig)return;sig=k;strip.innerHTML='';let active=null; list.forEach((it,i)=>{const a=document.createElement('a');const b=document.createElement('b');b.textContent='['+String(i+1).padStart(2,'0')+']';a.append(b,it.name); const q=new URLSearchParams(it.qs);a.href=location.pathname+'?'+q.toString(); if((it.qs.tab||'')===cur){a.setAttribute('aria-current','page');active=a;} a.addEventListener('click',e=>{e.preventDefault();const r=g()&&g().$router;if(r)r.push({path:location.pathname,query:it.qs}).catch(()=>{});else location.href=a.href;}); strip.appendChild(a);}); if(active){const l=active.offsetLeft-(strip.clientWidth-active.offsetWidth)/2;strip.scrollLeft=Math.max(0,l);}}; const sync=()=>{tabs();}; sync();ADN.on(sync,400);addEventListener('resize',()=>{sig='';sync();}); })(); /* ADN Invoices tabs (To invoice / Unpaid / Paid / All): marks the tab for the current ?view= the same way as the job-type tabs (data-adn-job-active, CSS 6c); no view = To invoice. */ (()=>{if(window.__adnInvTabs)return;window.__adnInvTabs=true; const sync=()=>{const cur=new URL(location.href);const v=(cur.searchParams.get('view')||'to_invoice').trim(); document.querySelectorAll('.adn-inv-tabs a[href]').forEach(a=>{const t=new URL(a.href,location.href);if(!t.searchParams.has('view'))return; const on=t.pathname===cur.pathname&&t.searchParams.get('view')===v;const val=String(on); if(a.getAttribute('data-adn-job-active')!==val)a.setAttribute('data-adn-job-active',val); if(on){if(a.getAttribute('aria-current')!=='true')a.setAttribute('aria-current','true');}else if(a.hasAttribute('aria-current'))a.removeAttribute('aria-current');});}; sync();ADN.on(sync,300); })(); /* ADN Login page (CSS section 34 + 46): 1. Already logged in: the login page forwards to where the user was going. Baserow sends a logged-out visit of a protected page to the login page with ?next= (e.g. a RECORD INVOICE link from an email). We follow next (only paths inside this app: "/..." but never "//..." or a full address); without next we go to Overview, as before. 2. Logging in by hand: next is remembered for this tab (sessionStorage, 1 minute); Baserow's after-login step opens Overview and we forward from there to the remembered page. 3. "Opening..." state: when the browser holds a saved login (the user_source_token cookie), the form is replaced by OPENING... while the login is restored, so nobody is asked to type anything; after 3.5 s without success the form comes back (expired login). 4. Wrong email or password: Baserow shows its error box (restyled in CSS 34e); typing in either field hides it again (data-adn-err-hide on the form), and the next Log in shows it again if it fails again. */ (()=>{if(window.__adnLogin)return;window.__adnLogin=true; const g=()=>{const a=document.querySelector('#__nuxt');return a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;}; const prefix=()=>{const m=location.pathname.match(/^\/builder\/\d+\/preview/);return m?m[0]:'';}; const rel=()=>location.pathname.slice(prefix().length)||'/'; const KEY='adn-next'; const safe=v=>{let s=String(v||'');for(let i=0;i<3&&/%[0-9a-f]{2}/i.test(s);i++){try{s=decodeURIComponent(s);}catch(e){return null;}} s=s.trim();if(!s.startsWith('/')||s.startsWith('//')||s.startsWith('/\\'))return null; const p=s.replace(/^\/builder\/\d+\/preview/,'');if(p==='/'||p.startsWith('/?'))return null;return p;}; const readNext=()=>safe(new URLSearchParams(location.search).get('next')); const remember=n=>{try{sessionStorage.setItem(KEY,JSON.stringify({n,t:Date.now()}));}catch(e){}}; const peek=()=>{try{const x=JSON.parse(sessionStorage.getItem(KEY)||'null');if(x&&Date.now()-x.t<60000)return safe(x.n);sessionStorage.removeItem(KEY);}catch(e){}return null;}; const forget=()=>{try{sessionStorage.removeItem(KEY);}catch(e){}}; /* loop guard: if we sent the user to next and the app bounced them straight back here (their role may not open that page, e.g. Finance pages), don't send them again: go to Overview and say so */ const TRY='adn-next-try'; const tried=n=>{try{const x=JSON.parse(sessionStorage.getItem(TRY)||'null');return !!(x&&x.n===n&&Date.now()-x.t<10000);}catch(e){return false;}}; const markTry=n=>{try{sessionStorage.setItem(TRY,JSON.stringify({n,t:Date.now()}));}catch(e){}}; const hasSaved=()=>/(?:^|;\s*)user_source_token=[^;]+/.test(document.cookie); const go=to=>{const p=g();if(p&&p.$router)p.$router.replace(to).catch(()=>{});else location.replace(to);}; let sent=false,since=0; const opening=on=>{const r=document.documentElement;if(on!==r.hasAttribute('data-adn-opening'))r.toggleAttribute('data-adn-opening',on);}; const sync=()=>{const form=document.querySelector('.adn-login-form form'); if(!form){sent=false;since=0;opening(false); /* after a login: arrived at the page that was asked for -> done; landed on Overview instead (Baserow's after-login step) -> forward to it */ const n=peek();if(n){const here=rel()+location.search;if(here===n)forget();else if(rel()==='/main')go(prefix()+n);} return;} const n=readNext();if(n)remember(n);else forget();/* a plain visit drops an old remembered next */ if(!since)since=Date.now(); opening(!sent&&hasSaved()&&Date.now()-since<3500); const p=g();const s=p&&p.$store; if(s&&!sent){try{const app=s.getters['userSourceUser/getCurrentApplication']; if(app&&s.getters['userSourceUser/isAuthenticated'](app)){sent=true; if(n&&tried(n)){forget();go(prefix()+'/main'); try{s.dispatch('builderToast/warning',{title:'No access',message:'Your account cannot open that page. Ask an Admin if you need it.'});}catch(e){}} else{if(n)markTry(n);go(prefix()+(n||'/main'));}}}catch(e){}} if(!form.__adnBound){form.__adnBound=true; /* phone keyboards: the email field opens the email keyboard (with @), no auto-capital or autocorrect; password managers recognise both fields */ const fi=form.querySelectorAll('input');const em=[...fi].find(i=>i.type!=='password');const pw=[...fi].find(i=>i.type==='password'); if(em){em.setAttribute('inputmode','email');em.setAttribute('autocapitalize','off');em.setAttribute('autocorrect','off');em.spellcheck=false;em.setAttribute('autocomplete','username');em.setAttribute('enterkeyhint','next');} if(pw){pw.setAttribute('autocomplete','current-password');pw.setAttribute('enterkeyhint','go');} form.addEventListener('input',()=>form.setAttribute('data-adn-err-hide','true')); form.addEventListener('submit',()=>form.removeAttribute('data-adn-err-hide'),true);} }; sync();ADN.on(sync);setTimeout(()=>ADN.kick(),3600); })(); /* ADN Invoice amounts: Amount, Received and Balance on the Invoices page (.adn-inv-table columns 5-7) shown with thousands separators and two decimals, e.g. 1234.5 -> 1,234.50. Display only; the data is unchanged. */ (()=>{if(window.__adnInvAmounts)return;window.__adnInvAmounts=true; const fmt=new Intl.NumberFormat('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); const sync=()=>{document.querySelectorAll('.adn-inv-table tbody td:is(:nth-child(5),:nth-child(6),:nth-child(7)) .ab-text, .adn-quo-table tbody td:nth-child(5) .ab-text').forEach(el=>{ const t=el.textContent.trim();if(!/^-?\d+(\.\d+)?$/.test(t))return;const v=fmt.format(Number(t));if(t!==v)el.textContent=v;});}; sync();ADN.on(sync,400); })(); /* ADN Job Detail progress: Heron-style status track (CSS section 39). An open line with four square markers (no boxes, so it never reads as a second tab bar). The 9 statuses are grouped into 4 points that always run in order: 1 New 2 Reviewing 3 in progress: Processing, Proceed shipment (team working) Awaiting datasheet, Awaiting payment approval, Waiting client (on hold) 4 Completed The current point shows the job's real status as a chip in the status's own colour from the database (copied from the status badge); point 3 reads "In progress" until the job gets there. Cancelled sits outside the flow: the track greys out and a Cancelled chip sits above it. Reads the status badge (.adn-fact--status), so it follows a saved status change; the green line draws in from the left when the status changes. */ (()=>{if(window.__adnSteps)return;window.__adnSteps=true; const POINTS=['New','Reviewing','In progress','Completed']; /* status -> [point index, kind]; kind: new | work | hold | done | cancel */ const MAP={ 'new':[0,'new'], 'reviewing':[1,'work'], 'processing':[2,'work'], 'proceed shipment':[2,'work'], 'awaiting datasheet':[2,'hold'], 'awaiting payment approval':[2,'hold'], 'waiting client':[2,'hold'], 'completed':[3,'done'], 'cancelled':[-1,'cancel']}; const norm=s=>String(s||'').trim().toLowerCase().replace(/\s+/g,' '); const slug=s=>norm(s).replace(/ /g,'-'); const read=()=>{const b=document.querySelector('.adn-fact--status');const p=b&&b.querySelector('p');if(!p)return null; let t='';p.childNodes.forEach(n=>{if(n.nodeType===3)t+=n.nodeValue;});t=t.trim();return t?t:null;}; const build=()=>{const d=document.createElement('div');d.className='adn-stage';d.setAttribute('role','group');d.setAttribute('aria-label','Job progress'); d.innerHTML='

'; return d;}; /* wait until Vue has finished hydrating the server-rendered page, plus a moment, before adding anything: a node added during hydration gets taken over by Vue and scrambles the layout */ let hydratedAt=0;const hydrated=()=>{const a=document.querySelector('#__nuxt');const n=a&&a.__vue_app__&&a.__vue_app__.config.globalProperties.$nuxt; if(!n||n.isHydrating){hydratedAt=0;return false;}if(!hydratedAt)hydratedAt=Date.now();return Date.now()-hydratedAt>250;}; let last=''; const render=(box,status,animate)=>{const m=MAP[norm(status)]||[-1,'unknown'];const cur=m[0],kind=m[1]; box.dataset.kind=kind; /* head row: only used when cancelled */ const hc=box.querySelector('.adn-stage-head .adn-st-chip');hc.textContent=kind==='cancel'?status:'';hc.dataset.st=slug(status); if(animate)box.classList.remove('is-in'); [...box.querySelectorAll('li')].forEach((li,i)=>{const past=cur>=0&&i=0&&i===cur; li.classList.toggle('past',past);li.classList.toggle('cur',isCur); const nm=li.querySelector('.adn-stage-nm');nm.textContent=isCur?status:POINTS[i]; nm.classList.toggle('adn-st-chip',isCur);if(isCur)nm.dataset.st=slug(status);else delete nm.dataset.st; if(isCur)li.setAttribute('aria-current','step');else li.removeAttribute('aria-current');}); /* draw the green line from the left, one segment after another */ if(animate)requestAnimationFrame(()=>requestAnimationFrame(()=>box.classList.add('is-in')));else box.classList.add('is-in');}; const colour=box=>{const b=document.querySelector('.adn-fact--status');const c=b&&b.style.getPropertyValue('--job-status-background'); if(c&&box.style.getPropertyValue('--st-bg')!==c)box.style.setProperty('--st-bg',c);}; const sync=()=>{if(!hydrated())return;const tabs=document.querySelector('.job-detail-tabs');const st=tabs&&read();if(!tabs||!st){last='';return;} const tw=tabs.closest('.element__wrapper');if(!tw||!tw.parentElement)return; let box=tw.parentElement.querySelector(':scope > .adn-stage');let fresh=false; if(!box){box=build();tw.parentElement.insertBefore(box,tw);fresh=true;} else if(box.nextElementSibling!==tw){tw.parentElement.insertBefore(box,tw);} const k=st+'|'+location.pathname;colour(box);if(fresh||k!==last){render(box,st,fresh||norm(st)!==norm(last.split('|')[0]));last=k;}}; sync();ADN.on(sync,400); })(); /* ADN Feedback (CSS section 40): 1. Saving state: pressing a form's submit button (Save Changes, Add Job, Add model, Save invoice, Upload...) shows SAVING... on it and blocks a second press until Baserow has finished running the button's actions (followed through the store's builderWorkflowAction/setDispatching). If nothing starts within a moment (e.g. a required field is empty) the button is released straight away; 20s is the safety limit. The Log in button works the same way (LOGGING IN...), following the store's userSourceUser/authenticate: it is released when a wrong email/password comes back, or goes away with the page on success. 2. Empty lists: a short message for the view (CSS 40c). 3. A job opened without ?tab= gets ?tab=Details, so the Details tab's content shows instead of an empty area. */ (()=>{if(window.__adnFeedback)return;window.__adnFeedback=true; const vp=()=>{const a=document.querySelector('#__nuxt');return a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;}; let running=0,started=0,busy=null,t0=0,sub=false; const release=()=>{if(!busy)return;busy.removeAttribute('data-adn-busy');busy.removeAttribute('aria-busy'); const s=busy.querySelector(':scope > .adn-busy');if(s)s.remove();busy=null;}; const hook=()=>{if(sub)return;const p=vp();const st=p&&p.$store;if(!st)return;sub=true; const done=()=>{if(busy&&started&&running===0)setTimeout(()=>{if(running===0)release();},150);}; const AUTH='userSourceUser/authenticate'; st.subscribeAction({ before:(a)=>{if(a.type===AUTH){running++;started++;}}, /* a successful log in keeps LOGGING IN... until the page moves on */ after:(a)=>{if(a.type===AUTH){running=Math.max(0,running-1);return;} if(a.type!=='builderWorkflowAction/setDispatching')return; if(a.payload&&a.payload.isDispatching){running++;started++;}else{running=Math.max(0,running-1);}done();}, error:(a)=>{if(a.type===AUTH){running=Math.max(0,running-1);done();}}});}; const LOGIN='.adn-login-form .auth-form__footer button'; const mark=b=>{hook();release();busy=b;started=0;t0=Date.now();const label=b.matches(LOGIN)?'Logging in…':'Saving…'; setTimeout(()=>{if(busy!==b)return;b.setAttribute('data-adn-busy','true');b.setAttribute('aria-busy','true'); if(!b.querySelector(':scope > .adn-busy')){const s=document.createElement('span');s.className='adn-busy';s.textContent=label;b.appendChild(s);}},0);}; document.addEventListener('click',e=>{const b=e.target.closest&&e.target.closest('button');if(!b)return; if(b.hasAttribute('data-adn-busy')){e.preventDefault();e.stopImmediatePropagation();return;} if(b.closest('.form-container-element__submit-button')||b.matches(LOGIN))mark(b); },true); /* Enter in the login fields submits the form without a click */ document.addEventListener('submit',e=>{const f=e.target;if(!f.closest||!f.closest('.adn-login-form'))return; const b=f.querySelector('.auth-form__footer button');if(!b)return; if(b.hasAttribute('data-adn-busy')){e.preventDefault();e.stopImmediatePropagation();return;} if(busy!==b)mark(b);},true); const emptyMsg=()=>{const path=location.pathname.replace(/^\/builder\/\d+\/preview/,'');const q=new URLSearchParams(location.search); document.querySelectorAll('.ab-table__empty-state').forEach(el=>{const tbl=el.closest('.element');const srch=tbl&&tbl.querySelector('.header__search input, input[type="search"]'); const term=srch&&srch.value.trim();let m; if(term)m='Nothing matches "'+term+'"'; else if(el.closest('.adn-toinv-table'))m='All completed jobs have an invoice'; else if(el.closest('.adn-inv-table')){const v=q.get('view');m=v==='unpaid'?'No unpaid invoices':v==='paid'?'No paid invoices yet':'No invoices yet';} else if(el.closest('.job-listing-table')){const t=(q.get('job_type')||'').trim();m=t?'No '+t+' jobs yet':'No jobs yet';} else if(/^\/job-detail\//i.test(path))m='Nothing added yet'; if(m&&el.getAttribute('data-adn-msg')!==m)el.setAttribute('data-adn-msg',m);});}; const tab=()=>{const path=location.pathname.replace(/^\/builder\/\d+\/preview/,'');if(!/^\/job-detail\/[^/]+\/?$/i.test(path))return; const q=new URLSearchParams(location.search);if(q.get('tab'))return;const p=vp();if(!p||!p.$router)return; const r=p.$router.currentRoute.value||p.$router.currentRoute;if(!r||!r.path)return; p.$router.replace({path:r.path,query:Object.assign({},r.query||{},{tab:'Details'})}).catch(()=>{});}; const tick=()=>{hook();if(busy&&(!document.contains(busy)||Date.now()-t0>20000||(!started&&Date.now()-t0>700)))release();emptyMsg();tab();}; tick();ADN.on(tick,300); })(); /* ADN Company switcher (CSS section 41): the header name switches between ADN International Sdn Bhd and ADN Trading and Services. - The choice lives in the page address (?company=trading; no parameter = ADN International) and is remembered on this device (localStorage "adn-company"), so moving between Overview, Main Listing, Invoices and Add Job keeps it: a router guard adds ?company=trading where it's missing. The data sources filter on it (Jobs/Invoices "Company Key"). - On a job's page the name shows that job's company (read from the Company fact) and switching goes to the other company's Main Listing. - The name is a button only as wide as the name (CSS 41); the dropdown opens like the phone MENU. - Waits for Vue hydration before touching the header. */ (()=>{if(window.__adnCompany)return;window.__adnCompany=true; const NAMES={intl:'ADN International Sdn Bhd',trading:'ADN Trading and Services'}; const KEY='adn-company'; const vp=()=>{const a=document.querySelector('#__nuxt');return a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;}; const prefix=()=>{const m=location.pathname.match(/^\/builder\/\d+\/preview/);return m?m[0]:'';}; const rel=p=>String(p||'').replace(/^\/builder\/\d+\/preview/,'')||'/'; const LISTS=/^\/(main|home|invoices|add-job)\/?$/i; const norm=v=>v==='trading'?'trading':'intl'; const getStored=()=>{try{return norm(localStorage.getItem(KEY));}catch(e){return 'intl';}}; const setStored=v=>{try{localStorage.setItem(KEY,norm(v));}catch(e){}}; const urlCo=()=>new URLSearchParams(location.search).get('company'); /* the job's own company on its page (Company fact, CSS 41 / 17) */ const jobCo=()=>{const f=document.querySelector('.adn-fact--company p, .adn-fact--company');if(!f)return null; return /trading/i.test(f.textContent)?'trading':(/international/i.test(f.textContent)?'intl':null);}; const current=()=>{const path=rel(location.pathname);if(/^\/job-detail\//i.test(path)){const j=jobCo();if(j)return j;} const u=urlCo();return u?norm(u):getStored();}; /* router guard: carry ?company=trading to the list pages */ let guarded=false; const guard=()=>{if(guarded)return;const p=vp();if(!p||!p.$router)return;guarded=true; p.$router.beforeEach(to=>{if(!LISTS.test(rel(to.path)))return; if(to.query&&to.query.company){setStored(to.query.company);return;} if(getStored()==='trading')return {path:to.path,query:Object.assign({},to.query,{company:'trading'}),hash:to.hash,replace:true};});}; /* first load straight onto a list page (no router navigation yet): an address with ?company= wins once; otherwise the remembered choice is added */ let first=true; const fixUrl=()=>{const p=vp();if(!p||!p.$router)return;const path=rel(location.pathname); const u=urlCo();if(first){first=false;if(u&&LISTS.test(path))setStored(u);} if(!LISTS.test(path)||u)return; if(getStored()==='trading'){const r=p.$router.currentRoute.value||p.$router.currentRoute; p.$router.replace({path:r.path,query:Object.assign({},r.query,{company:'trading'})}).catch(()=>{});}}; const go=co=>{const p=vp();if(!p||!p.$router)return;setStored(co);const path=rel(location.pathname); const r=p.$router.currentRoute.value||p.$router.currentRoute; if(LISTS.test(path)){const q=Object.assign({},r.query);if(co==='trading')q.company='trading';else delete q.company; p.$router.replace({path:r.path,query:q}).catch(()=>{});} else{const q={job_type:' '};if(co==='trading')q.company='trading';p.$router.push({path:prefix()+'/Home',query:q}).catch(()=>{});}}; let hydratedAt=0;const hydrated=()=>{const p=vp();const n=p&&p.$nuxt;if(!n||n.isHydrating){hydratedAt=0;return false;} if(!hydratedAt)hydratedAt=Date.now();return Date.now()-hydratedAt>250;}; const close=col=>{if(!col)return;col.removeAttribute('data-adn-co-open');const b=col.querySelector(':scope > .adn-co-switch');if(b)b.setAttribute('aria-expanded','false');}; const build=col=>{const b=document.createElement('button');b.type='button';b.className='adn-co-switch'; b.setAttribute('aria-haspopup','menu');b.setAttribute('aria-expanded','false'); b.innerHTML=''; const m=document.createElement('ul');m.className='adn-co-menu';m.setAttribute('role','menu'); m.innerHTML=Object.keys(NAMES).map(k=>'

').join(''); /* Log out (CSS 47): the last row signs the user out of the app and opens the login page */ m.insertAdjacentHTML('beforeend','

'); m.addEventListener('click',async e=>{const lo=e.target.closest('button.adn-co-logout');if(!lo)return;e.preventDefault();e.stopPropagation(); lo.disabled=true;lo.textContent='Logging out\u2026';const p=vp();const s=p&&p.$store; try{await s.dispatch('userSourceUser/logoff',{application:s.getters['userSourceUser/getCurrentApplication']});}catch(err){} try{sessionStorage.removeItem('adn-next');sessionStorage.removeItem('adn-next-try');}catch(err){} location.replace(prefix()+'/');}); b.addEventListener('click',e=>{e.preventDefault();e.stopPropagation();const open=!col.hasAttribute('data-adn-co-open'); if(open){col.setAttribute('data-adn-co-open','');b.setAttribute('aria-expanded','true');}else close(col);}); m.addEventListener('click',e=>{const it=e.target.closest('button[data-co]');if(!it)return;e.preventDefault();e.stopPropagation(); close(col);const co=it.getAttribute('data-co');if(co!==current()||!LISTS.test(rel(location.pathname)))go(co);}); col.appendChild(b);col.appendChild(m);}; document.addEventListener('click',e=>{const col=document.querySelector('[data-adn-co-open]');if(col&&!col.contains(e.target))close(col);}); document.addEventListener('keydown',e=>{if(e.key==='Escape')close(document.querySelector('[data-adn-co-open]'));}); const sync=()=>{guard();if(!hydrated())return;fixUrl(); const col=document.querySelector('.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:first-child');if(!col)return; if(!col.querySelector(':scope > .adn-co-switch'))build(col); const co=current();if(col.getAttribute('data-adn-co')!==co)col.setAttribute('data-adn-co',co); const root=document.documentElement;if(root.getAttribute('data-adn-co')!==co)root.setAttribute('data-adn-co',co); const sw=col.querySelector(':scope > .adn-co-switch');const nm=sw&&sw.querySelector('.adn-co-name'); if(nm&&nm.textContent!==NAMES[co])nm.textContent=NAMES[co]; const label='Company: '+NAMES[co]+'. Switch company';if(sw&&sw.getAttribute('aria-label')!==label)sw.setAttribute('aria-label',label); col.querySelectorAll('.adn-co-menu button[data-co]').forEach(x=>{const on=x.getAttribute('data-co')===co;if((x.getAttribute('aria-current')==='true')!==on)x.setAttribute('aria-current',on?'true':'false');});}; sync();ADN.on(sync,300); })(); /* ADN Company colours (CSS section 43): the pixel hover effect keeps each button's fill as a fixed colour, so when the company changes, fills and resting backgrounds that use the other company's accent are swapped (green #a8c28e <-> orange #f2a65e). */ (()=>{if(window.__adnCoColours)return;window.__adnCoColours=true; const GREEN=[168,194,142],ORANGE=[242,166,94]; const same=(a,b)=>a&&b&&a.length>=3&&Math.abs(a[0]-b[0])<3&&Math.abs(a[1]-b[1])<3&&Math.abs(a[2]-b[2])<3; const css=c=>'rgb('+c[0]+', '+c[1]+', '+c[2]+')'; const sync=()=>{const tr=document.documentElement.getAttribute('data-adn-co')==='trading';const want=tr?ORANGE:GREEN,other=tr?GREEN:ORANGE; document.querySelectorAll('[data-adn-px]').forEach(el=>{const st=el.__adnPx;if(!st)return; if(same(st.fill,other)){st.fill=want.slice();el.style.setProperty('--adn-px-fill',css(want));} if(same(st.base,other)){st.base=want.slice();el.style.setProperty('--adn-px-base',css(want));}});}; sync();ADN.on(sync,400); })(); /* ADN Finance menu (CSS section 44): 1. Desktop header: hovering (or focusing) FINANCE opens a dropdown with Quotation | Invoice, like the company switcher; the current one is marked. Clicking FINANCE itself opens the last one used (Invoice by default, remembered in localStorage "adn-fin-doc"). 2. Finance page: the amount column headers show the selected company's currency, (USD) for ADN International, (MYR) for ADN Trading. */ (()=>{if(window.__adnFinMenu)return;window.__adnFinMenu=true; const KEY='adn-fin-doc'; const vp=()=>{const a=document.querySelector('#__nuxt');return a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;}; const prefix=()=>{const m=location.pathname.match(/^\/builder\/\d+\/preview/);return m?m[0]:'';}; const rel=()=>location.pathname.slice(prefix().length)||'/'; const onFin=()=>/^\/invoices\/?$/i.test(rel()); const doc=()=>new URLSearchParams(location.search).get('doc')==='quotation'?'quotation':'invoice'; const getDoc=()=>{try{return localStorage.getItem(KEY)==='quotation'?'quotation':'invoice';}catch(e){return 'invoice';}}; const setDoc=d=>{try{localStorage.setItem(KEY,d);}catch(e){}}; const go=d=>{setDoc(d);const p=vp();const q=d==='quotation'?{doc:'quotation'}:{}; if(p&&p.$router)p.$router.push({path:prefix()+'/invoices',query:q}).catch(()=>{});else location.href=prefix()+'/invoices'+(d==='quotation'?'?doc=quotation':'');}; let menu=null,link=null,timer=0; const open=()=>{clearTimeout(timer);if(!menu||!link)return;menu.style.left=link.offsetLeft+'px';menu.classList.add('on');link.setAttribute('aria-expanded','true');}; const close=(now)=>{clearTimeout(timer);const f=()=>{if(menu)menu.classList.remove('on');if(link)link.setAttribute('aria-expanded','false');};if(now)f();else timer=setTimeout(f,160);}; const build=(l)=>{link=l;l.setAttribute('aria-haspopup','menu');l.setAttribute('aria-expanded','false'); menu=document.createElement('ul');menu.className='adn-fin-menu';menu.setAttribute('role','menu'); menu.innerHTML='

'; l.parentElement.appendChild(menu); [l,menu].forEach(x=>{x.addEventListener('mouseenter',open);x.addEventListener('mouseleave',()=>close());}); l.addEventListener('focus',open);menu.addEventListener('focusout',e=>{if(!menu.contains(e.relatedTarget)&&e.relatedTarget!==l)close(true);}); l.addEventListener('click',e=>{if(e.button===0&&!e.metaKey&&!e.ctrlKey&&!e.shiftKey&&!e.altKey){e.preventDefault();e.stopImmediatePropagation();close(true);go(getDoc());}},true); menu.addEventListener('click',e=>{const b=e.target.closest('button[data-doc]');if(!b)return;e.preventDefault();close(true);go(b.dataset.doc);});}; document.addEventListener('keydown',e=>{if(e.key==='Escape')close(true);}); const sync=()=>{ const l=document.querySelector('.adn-header-nav .adn-header-fin'); if(l&&(l!==link||!menu||!menu.isConnected))build(l); if(menu){const cur=onFin()?doc():'';menu.querySelectorAll('button[data-doc]').forEach(b=>{const on=b.dataset.doc===cur;if((b.getAttribute('aria-current')==='true')!==on)b.setAttribute('aria-current',on?'true':'false');});} if(!onFin())return; if(getDoc()!==doc())setDoc(doc()); const cur=document.documentElement.getAttribute('data-adn-co')==='trading'?'MYR':'USD'; document.querySelectorAll(':is(.adn-inv-table, .adn-quo-table) th').forEach(th=>{const w=document.createTreeWalker(th,NodeFilter.SHOW_TEXT);let n;while((n=w.nextNode())){if(/$(USD|MYR)$/.test(n.nodeValue)){const v=n.nodeValue.replace(/$(USD|MYR)$/,'('+cur+')');if(v!==n.nodeValue)n.nodeValue=v;}}});}; ADN.on(sync); })(); /* ADN Finance by role (CSS section 50): FINANCE (header link, its dropdown and the phone MENU Finance row) shows only to Admin and Finance users. Others get data-adn-nofin on . The Finance pages are already limited to those roles; this only hides the way in. */ (()=>{if(window.__adnFinRole)return;window.__adnFinRole=true; const sync=()=>{const a=document.querySelector('#__nuxt');const p=a&&a.__vue_app__&&a.__vue_app__.config.globalProperties;const s=p&&p.$store;let hide=false; try{const app=s.getters['userSourceUser/getCurrentApplication']; if(app&&s.getters['userSourceUser/isAuthenticated'](app)){const u=s.getters['userSourceUser/getUser'](app);hide=!['Admin','Finance'].includes(u&&u.role);}}catch(e){} const r=document.documentElement;if(hide!==r.hasAttribute('data-adn-nofin'))r.toggleAttribute('data-adn-nofin',hide);}; sync();ADN.on(sync); })();

Sign in