diff --git a/examples/wix/capture-eye-element.js b/examples/wix/capture-eye-element.js index 6fc9e11..d3957cd 100644 --- a/examples/wix/capture-eye-element.js +++ b/examples/wix/capture-eye-element.js @@ -2,7 +2,12 @@ class CaptureEyeElement extends HTMLElement { connectedCallback() { const nid = this.getAttribute('nid'); const thumbnail = this.getAttribute('thumbnail'); - this.innerHTML = ``; + const captureEye = document.createElement('capture-eye'); + captureEye.setAttribute('nid', nid); + const mediaViewer = document.createElement('media-viewer'); + mediaViewer.setAttribute('src', thumbnail); + captureEye.appendChild(mediaViewer); + this.appendChild(captureEye); } } customElements.define('capture-eye-element', CaptureEyeElement); diff --git a/examples/wix/capture-eye-sytle-element.js b/examples/wix/capture-eye-sytle-element.js index 5a62681..2b4087b 100644 --- a/examples/wix/capture-eye-sytle-element.js +++ b/examples/wix/capture-eye-sytle-element.js @@ -20,17 +20,55 @@ function updateElement(elem) { 'en-US', options ); - elem.innerHTML = `
Image -
-

註冊時間

-

${captureUpdatedDate}

-

創建者

-

${creator}

-

簡介

-

${headline}

-

影像 Nid

-

${nid}

-
`; + + // Clear existing content safely + while (elem.firstChild) { + elem.removeChild(elem.firstChild); + } + + // Build DOM safely without innerHTML to prevent XSS + const captureEye = document.createElement('capture-eye'); + captureEye.setAttribute('nid', _nid); + + const container = document.createElement('div'); + container.className = 'container'; + + const img = document.createElement('img'); + img.setAttribute('src', thumbnail); + img.setAttribute('alt', 'Image'); + img.className = 'image'; + + const textContainer = document.createElement('div'); + textContainer.className = 'text-container'; + + const createParagraph = (className, text) => { + const p = document.createElement('p'); + p.className = className; + p.textContent = text; + return p; + }; + + textContainer.appendChild(createParagraph('title', '註冊時間')); + textContainer.appendChild(createParagraph('description', captureUpdatedDate)); + textContainer.appendChild(createParagraph('title', '創建者')); + textContainer.appendChild(createParagraph('description', creator)); + textContainer.appendChild(createParagraph('title', '簡介')); + textContainer.appendChild(createParagraph('description', headline)); + textContainer.appendChild(createParagraph('title', '影像 Nid')); + + const nidP = createParagraph('nid', nid); + nidP.addEventListener('click', () => { + window.open( + `https://asset.captureapp.xyz/${encodeURIComponent(_nid)}`, + '_blank' + ); + }); + textContainer.appendChild(nidP); + + container.appendChild(img); + container.appendChild(textContainer); + captureEye.appendChild(container); + elem.appendChild(captureEye); } class CaptureEyeStyleElement extends HTMLElement {