[object Object]

← back to Rentv Sheet Enrich

Live console: icons open Website/LinkedIn in a popup window (contenteditable was swallowing clicks); Notes cells expand-on-click

44d268785cf7c0f58447e788572f2cf1b6a674cf · 2026-08-13 15:57:47 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

Diff

commit 44d268785cf7c0f58447e788572f2cf1b6a674cf
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Aug 13 15:57:47 2026 -0700

    Live console: icons open Website/LinkedIn in a popup window (contenteditable was swallowing clicks); Notes cells expand-on-click
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public_live/index.html | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/public_live/index.html b/public_live/index.html
index 7d2796a..17c15f9 100644
--- a/public_live/index.html
+++ b/public_live/index.html
@@ -68,10 +68,12 @@
   .rzguide{position:fixed;top:48px;bottom:0;width:2px;background:var(--accent);z-index:200;pointer-events:none;box-shadow:0 0 6px var(--accent)}
   body.resizing,body.resizing *{cursor:col-resize !important;user-select:none !important}
   table{table-layout:fixed}
-  td{overflow:hidden;text-overflow:ellipsis}
+  td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* collapsed: compact single line */
   tbody td{padding:6px 9px;border-bottom:1px solid var(--line);vertical-align:top;max-width:320px}
   tbody tr:hover{background:#1a212b}
-  td[contenteditable]:focus{outline:none;background:#0d2b3f;box-shadow:inset 0 0 0 2px var(--accent)}
+  /* EXPAND ON CLICK: focus a cell (e.g. Notes) and it wraps + grows to show/edit the whole value */
+  td[contenteditable]:focus{outline:none;background:#0d2b3f;box-shadow:inset 0 0 0 2px var(--accent);
+    white-space:pre-wrap;word-break:break-word;overflow:visible;text-overflow:clip;min-width:260px;max-width:520px;position:relative;z-index:4}
   td.saved{background:var(--green);color:var(--greenink)}
   td.enriched{box-shadow:inset 3px 0 0 #7bc043;background:rgba(123,192,67,.09)}
   td a{color:var(--accent);text-decoration:none} .namecell{font-weight:600}
@@ -391,7 +393,7 @@ const ICON={
   li:'<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5 2.5 2.5 0 0 0 4.98 3.5zM3 9h4v12H3zM9 9h3.8v1.64h.05c.53-1 1.83-2.06 3.77-2.06 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.07 1.4-2.07 2.85V21H9z"/></svg>'};
 function iconLink(url,kind){
   const svg=kind==='li'?ICON.li:ICON.web, label=kind==='li'?'Open LinkedIn profile':'Open website';
-  return `<a class="iconbtn ${kind}" href="${esc(url)}" target="_blank" rel="noopener" title="${label}">${svg}</a>`;
+  return `<a class="iconbtn ${kind}" href="${esc(url)}" target="_blank" rel="noopener" contenteditable="false" title="${label}">${svg}</a>`;
 }
 function cellRender(v){v=String(v==null?'':v);const u=hrefOf(v);
   if(u){ const li=/linkedin\.com/i.test(u);                            // value stays plain text; icon opens the link
@@ -403,13 +405,24 @@ function phoneLinkify(v){
   const re=/(\+?1[-.\s]?)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}/g; let out='',last=0,m;
   while((m=re.exec(v))){ out+=esc(v.slice(last,m.index));
     let d=m[0].replace(/\D/g,''); if(d.length===10)d='1'+d;
-    out+=esc(m[0])+`<a class="callbtn" href="tel:+${esc(d)}" title="Call ${esc(m[0])}">${ICON.phone}</a>`; last=m.index+m[0].length; }
+    out+=esc(m[0])+`<a class="callbtn" href="tel:+${esc(d)}" contenteditable="false" title="Call ${esc(m[0])}">${ICON.phone}</a>`; last=m.index+m[0].length; }
   out+=esc(v.slice(last)); return out||esc(v);
 }
 function esc(s){return String(s==null?'':s).replace(/[&<>"]/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[m]))}
 function contact(r){const nm=g(r,ROLE.name),co=g(r,ROLE.company);return{name:nm,first:(nm.split(/[\s,]+/)[0]||'').trim(),company:co,position:g(r,ROLE.position),email:g(r,ROLE.email)||g(r,ROLE.email2),phone:g(r,ROLE.phone)||g(r,ROLE.cphone),liC:hrefOf(g(r,ROLE.liC)),liCo:hrefOf(g(r,ROLE.liCo)),mvpN:g(r,ROLE.mvpN),mvpP:g(r,ROLE.mvpP),mvpL:hrefOf(g(r,ROLE.mvpL))}}
 function wireGrid(){
   $$('.rowbtn').forEach(b=>b.onclick=e=>{e.stopPropagation();openDraft(+b.dataset.r)});
+  // icons live inside contenteditable cells, so the editor would swallow the click — intercept on the
+  // (per-render) #grid element and open the link in a POPUP WINDOW. tel: links proceed as normal.
+  const gridEl=$('#grid');
+  if(gridEl){
+    gridEl.addEventListener('mousedown',e=>{ if(e.target.closest('a.iconbtn,a.callbtn'))e.stopPropagation(); });
+    gridEl.addEventListener('click',e=>{
+      const a=e.target.closest('a.iconbtn'); if(!a)return;                 // callbtn (tel:) falls through to default
+      e.preventDefault(); e.stopPropagation();
+      window.open(a.getAttribute('href'),'linkpop','popup=yes,noopener,width=1100,height=850,left=140,top=90');
+    });
+  }
   $$('.card').forEach(c=>c.onclick=()=>openDraft(+c.dataset.r));
   // header: click = sort, drag = MOVE column (manual drag, 5px threshold; order persists per tab)
   $$('#grid thead th[data-c]').forEach(th=>th.addEventListener('mousedown',e=>{

← 15117d1 Live console: real SVG phone/website/LinkedIn icons + value-  ·  back to Rentv Sheet Enrich  ·  Live console: click a field in the left rail to open its ful 1bff2a8 →