← back to Rentv Sheet Enrich Refine
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=>({'&':'&','<':'<','>':'>','"':'"'}[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 Refine
·
Live console: click a field in the left rail to open its ful 1bff2a8 →