#5 implement POC for theming api

2020-03-05 12:35:15 +03:00
parent be6aa8314b
commit 6aeb72c3d9
6 changed files with 75 additions and 69 deletions
@@ -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 {
@@ -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 = `
-    <iframe
-      src="${HOST}/web/iframe.html?${query}"
-      width="100%"
-      frameborder="0"
-      allowtransparency="true"
-      scrolling="no"
-      tabindex="0"
-      title="Remark42"
-      style="width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
-      horizontalscrolling="no"
-      verticalscrolling="no"
-    ></iframe>
-  `;
-
-  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 = `
-      <iframe
-        src="${HOST}/web/iframe.html?${queryUserInfo}"
-        width="100%"
-        height="100%"
-        frameborder="0"
-        allowtransparency="true"
-        scrolling="no"
-        tabindex="0"
-        title="Remark42"
-        verticalscrolling="no"
-        horizontalscrolling="no"
-      />`;
-      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');
      }
@@ -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) {}
+        }
+      })();
    </script>
    <link rel="stylesheet" href="remark.css" />
    <style>
@@ -47,7 +69,9 @@
      }

      .preloader {
+        /* stylelint-disable-next-line */
        color: #fff;
+        color: var(--color6, #fff);
        position: relative;
        transform: translate3d(0, -10px, 0);
        animation-delay: -0.16s;
@@ -71,7 +95,9 @@

      .preloader_view_iframe {
        margin: 0 auto;
+        /* stylelint-disable-next-line */
        color: #888;
+        color: var(--color13, #888);
      }

      :focus:not(.focus-visible):not(.button) {
@@ -126,6 +126,9 @@
        host: window.location.origin,
        url: 'https://remark42.com/demo/',
        components: ['embed', 'counter'],
+        // __colors__: {
+        //   "--color0": "red",
+        // },
        theme: theme,
        // locale: "ru"
      };
@@ -4602,16 +4602,6 @@
        "object-visit": "^1.0.0"
      }
    },
-    "color": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
-      "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^1.9.1",
-        "color-string": "^1.5.2"
-      }
-    },
    "color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4627,16 +4617,6 @@
      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
      "dev": true
    },
-    "color-string": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
-      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
-      "dev": true,
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
    "colorette": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.1.0.tgz",
@@ -14841,23 +14821,6 @@
      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
      "dev": true
    },
-    "simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.3.1"
-      },
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
-        }
-      }
-    },
    "sisteransi": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.3.tgz",
@@ -47,7 +47,6 @@
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
-    "color": "^3.1.2",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.2.0",
    "document-register-element": "^1.14.3",