diff --git a/frontend/app/common/config-types.ts b/frontend/app/common/config-types.ts
index 5ee93b5b..37f83280 100644
--- a/frontend/app/common/config-types.ts
+++ b/frontend/app/common/config-types.ts
@@ -17,6 +17,8 @@ export interface CommentsConfig {
page_title?: string;
node?: string;
locale?: string;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ __colors__?: any;
}
export interface LastCommentsConfig {
diff --git a/frontend/app/embed.ts b/frontend/app/embed.ts
index a29007d6..62f596cb 100644
--- a/frontend/app/embed.ts
+++ b/frontend/app/embed.ts
@@ -19,6 +19,38 @@ function removeDomNode(node: HTMLElement | null) {
}
}
+function createFrame({
+ host,
+ query,
+ height,
+ __colors__ = {},
+}: {
+ host: string;
+ query: string;
+ height?: string;
+ __colors__?: any;
+}) {
+ const iframe = document.createElement('iframe');
+ iframe.src = `${host}/web/iframe.html?${query}`;
+ iframe.name = JSON.stringify({ __colors__ });
+ iframe.setAttribute('width', '100%');
+ if (height) {
+ iframe.setAttribute('height', height);
+ }
+ iframe.setAttribute('frameborder', '0');
+ iframe.setAttribute('allowtransparency', 'true');
+ iframe.setAttribute('scrolling', 'no');
+ iframe.setAttribute('tabindex', '0');
+ iframe.setAttribute('title', 'Remark42');
+ iframe.setAttribute('horizontalscrolling', 'no');
+ iframe.setAttribute('verticalscrolling', 'no');
+ iframe.setAttribute(
+ 'style',
+ 'width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;'
+ );
+ return iframe;
+}
+
function init(): void {
const node = document.getElementById(remark_config.node || NODE_ID);
@@ -45,25 +77,14 @@ function init(): void {
(window as any).REMARK42.changeTheme = changeTheme;
const query = Object.keys(remark_config)
- .map((key: any) => `${encodeURIComponent(key)}=${encodeURIComponent((remark_config as any)[key])}`)
+ .filter((key: any) => key !== `__colors__`)
+ .map((key: any) => {
+ return `${encodeURIComponent(key)}=${encodeURIComponent((remark_config as any)[key])}`;
+ })
.join('&');
+ const iframe = createFrame({ host: HOST, query, __colors__: remark_config.__colors__ });
- node.innerHTML = `
-
- `;
-
- const iframe = node.getElementsByTagName('iframe')[0];
+ node.appendChild(iframe);
window.addEventListener('message', receiveMessages);
window.addEventListener('hashchange', postHashToIframe);
@@ -174,20 +195,9 @@ function init(): void {
query +
'&page=user-info&' +
`&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`;
- this.node.innerHTML = `
- `;
- this.iframe = this.node.querySelector('iframe');
+ const iframe = createFrame({ host: HOST, query: queryUserInfo, height: '100%' });
+ this.node.appendChild(iframe);
+ this.iframe = iframe;
this.node.appendChild(this.closeEl);
document.body.appendChild(this.style);
document.body.appendChild(this.back);
@@ -201,6 +211,9 @@ function init(): void {
},
close() {
if (this.node) {
+ if (this.iframe) {
+ this.node.removeChild(this.iframe);
+ }
this.onAnimationClose();
this.node.removeAttribute('data-animation');
}
diff --git a/frontend/iframe.html b/frontend/iframe.html
index fa1ffe6c..82fd6e7f 100644
--- a/frontend/iframe.html
+++ b/frontend/iframe.html
@@ -9,6 +9,28 @@
if (window.location.search === '?selfClose') {
window.close();
}
+ (function() {
+ function isCSSVariablesSupported() {
+ if (typeof window === `undefined`) {
+ return true;
+ }
+
+ return window.CSS && window.CSS.supports && window.CSS.supports(`color`, `var(--fake-var)`);
+ }
+ if (isCSSVariablesSupported()) {
+ var name;
+ try {
+ name = JSON.parse(window.name);
+ if (name.__colors__) {
+ const colors = name.__colors__;
+ for (var color in colors) {
+ var root = document.documentElement;
+ root.style.setProperty(color, colors[color]);
+ }
+ }
+ } catch (e) {}
+ }
+ })();