diff --git a/webcomponent/cdxsummary.js b/webcomponent/cdxsummary.js index 7662d1e..289db9f 100644 --- a/webcomponent/cdxsummary.js +++ b/webcomponent/cdxsummary.js @@ -308,6 +308,12 @@ ${this.sampleCapturesList()} margin: var(--cdxsummary-main-margin); padding: var(--cdxsummary-main-padding, 5px); } + #container > *:first-child { + margin-top: 0; + } + #container > *:last-child, .samples ul { + margin-bottom: 0; + } pre, code { font-family: var(--cdxsummary-mono-font-family, monospace); } diff --git a/webcomponent/index.html b/webcomponent/index.html index 0fcc8fd..89d0726 100644 --- a/webcomponent/index.html +++ b/webcomponent/index.html @@ -45,6 +45,23 @@ overflow: auto; white-space: pre-wrap; } + #code-out { + pointer-events: none; + } + #code-out::before { + content: '🗎 COPY'; + float: right; + background: #333; + border: 1px dotted #fff; + border-radius: 3px; + font-size: 1em; + line-height: 1em; + margin-left: -20px; + padding: 2px 2px 0; + cursor: pointer; + opacity: 0.5; + pointer-events: all; + } #summary-container { height: 100vh; overflow: auto; @@ -89,7 +106,7 @@ const s = a => `
  --cdxsummary-${a}${' '.repeat(m+1-a.length)}: `; const d = a => `${lists[a].map(i => ``; const stl = lists["vars"].filter(a => q.has(a)).map(i => ` --cdxsummary-${i}: ${r(i)};`).join('\n'); - const elm = `${stl ? ['', '', ''].join('\n') : ''} q.has(a)).map(i => `${i}="${g(i)}"`).join(' ')}>`; + const elm = `${stl ? ['', '', ''].join('\n') : ''}<${['cdx-summary'].concat(lists["attr"].filter(a => q.has(a)).map(i => `${i}="${g(i)}"`)).join(' ')}>`; const visf = `
<cdx-summary @@ -172,6 +189,11 @@ document.getElementById('form-container').innerHTML = visf; document.getElementById('code-out').innerText = elm; document.getElementById('summary-container').innerHTML = elm; + document.getElementById('code-out').addEventListener('click', e => { + navigator.clipboard.writeText(e.target.innerText); + e.target.style.opacity = 0.2; + setTimeout(() => e.target.style.opacity = 1, 500); + }); }; diff --git a/webcomponent/package.json b/webcomponent/package.json index 7abf305..2559af6 100644 --- a/webcomponent/package.json +++ b/webcomponent/package.json @@ -1,6 +1,6 @@ { "name": "@internetarchive/cdxsummary", - "version": "0.4.0", + "version": "0.4.1", "description": "A Web Component to render CDX Summary JSON files", "main": "cdxsummary.js", "module": "cdxsummary.js",