(()=>{if(window.__adnJobMenuSync)return;window.__adnJobMenuSync=true;setInterval(()=>{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();setInterval(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();setInterval(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 tr, .job-listing-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();setInterval(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();setInterval(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();setInterval(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';invoices.textContent='Invoices'; 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();setInterval(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:rgba(168,194,142,.55);box-shadow:inset 0 -3px 0 var(--adn-accent,#a8c28e)} 60%{background-color:rgba(168,194,142,.22);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);}; setInterval(()=>{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'], ['.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']]; 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();setInterval(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();setInterval(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();setInterval(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();setInterval(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();setInterval(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')||(a.dataset.k==='invoices'&&p==='/invoices'); 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'; const iv=item('Invoices','invoices',()=>go('/invoices'));iv.href=prefix()+'/invoices'; 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,iv,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();setInterval(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();setInterval(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();setInterval(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();setInterval(sync,300); })();

*OCT ST label for Targus APS10C Qty = 1,008 units

Invoice