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 = `
-
-
註冊時間
-
${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 {