umputun#5 implement POC for theming api

Mavrin · Feb 14, 2020 · 5be4f4b · 5be4f4b
1 parent 70dd7a7
commit 5be4f4b
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 77 deletions.
diff --git a/frontend/.lintstagedrc.js b/frontend/.lintstagedrc.js
@@ -10,4 +10,5 @@ module.exports = {
     return [`eslint  ${files} --max-warnings=0 --fix`, `git add ${files}`];
   },
   './**/*.{scss,pcss,css}': ['prettier --write', 'stylelint', 'git add'],
+  './iframe.html': ['prettier --write', 'stylelint', 'git add'],
 };
diff --git a/frontend/app/common/config-types.ts b/frontend/app/common/config-types.ts
@@ -16,6 +16,8 @@ export interface CommentsConfig {
   theme?: Theme;
   page_title?: string;
   node?: 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
@@ -15,6 +15,38 @@ if (document.readyState === 'loading') {
   init();
 }
 
+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;
+}
+
 async function init(): Promise<void> {
   __webpack_public_path__ = HOST + '/web/';
   await loadPolyfills();
@@ -44,25 +76,14 @@ async function init(): Promise<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);
@@ -173,20 +194,9 @@ async function init(): Promise<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);
@@ -200,6 +210,9 @@ async function init(): Promise<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
@@ -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>
@@ -32,40 +54,47 @@
       }
 
       .preloader,
-      .preloader:before,
-      .preloader:after {
+      .preloader::before,
+      .preloader::after {
         border-radius: 50%;
         width: 10px;
         height: 10px;
         text-align: left;
+        animation-name: bouncing;
+        animation-timing-function: ease-in-out;
         animation-fill-mode: both;
-        animation: bouncing 1.8s infinite ease-in-out;
+        animation-duration: 1.8s;
+        animation-iteration-count: infinite;
       }
 
       .preloader {
+        /* stylelint-disable-next-line */
         color: #fff;
+        color: var(--color6, #fff);
         position: relative;
         transform: translate3d(0, -10px, 0);
         animation-delay: -0.16s;
       }
 
-      .preloader:before,
-      .preloader:after {
+      .preloader::before,
+      .preloader::after {
         content: '';
         position: absolute;
         top: 0;
       }
-      .preloader:before {
+      .preloader::before {
         transform: translate3d(-15px, 0, 0);
         animation-delay: -0.32s;
       }
-      .preloader:after {
+      .preloader::after {
         transform: translate3d(15px, 0, 0);
       }
 
       .preloader_view_iframe {
         margin: 0 auto;
+        /* stylelint-disable-next-line */
         color: #888;
+        color: var(--color13, #888);
       }
 
       :focus:not(.focus-visible):not(.button) {

diff --git a/frontend/index.ejs b/frontend/index.ejs
@@ -126,6 +126,9 @@
         host: window.location.origin,
         url: 'https://remark42.com/demo/',
         components: ['embed', 'counter'],
+        // __colors__: {
+        //   "--color0": "red",
+        // },
         theme: theme
       };
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,7 +6,7 @@
     "start": "webpack-dev-server --mode development",
     "check": "tsc -p tsconfig.json --noEmit --skipLibCheck",
     "lint": "eslint --max-warnings=0 --ext=.ts,.tsx,.js,.jsx .",
-    "lint:style": "stylelint \"**/*.scss\" \"**/*.pcss\" \"**/*.css\"",
+    "lint:style": "stylelint \"**/*.scss\" \"**/*.pcss\" \"**/*.css\" \"iframe.html\"",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "prettier": "prettier --write \"./**/*.{js,jsx,ts,tsx,scss}\""
@@ -41,7 +41,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",