Merge pull request #52 from trustpilot/remove-shadow-root

Remove shadow root
trustpilot · Jul 2, 2018 · 74341f7 · 74341f7
2 parents 3e18f8a + db9b425
commit 74341f7
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 80 deletions.
diff --git a/dist/skift.js b/dist/skift.js
diff --git a/dist/skift.min.js b/dist/skift.min.js
diff --git a/dist/skift.source.map b/dist/skift.source.map
diff --git a/src/main.css → src/ui.css b/src/main.css → src/ui.css
@@ -1,9 +1,4 @@
-* {
-  box-sizing: border-box;
-  font-family: Helvetica Neue, serif;
-}
-
-.ui-container {
+.skift .container {
   position: fixed;
   bottom: 15px;
   right: 15px;
@@ -17,18 +12,18 @@
   transition: all .5s ease-out;
   opacity: 1;
 }
-.ui-container.hideme {
+.skift  .container.hideme {
   bottom: -350px;
   opacity: 0;
 }
-.test-list {
+.skift .test-list {
   overflow-y: scroll;
   height: 250px;
 }
-.test {
+.skift .test {
   padding: 10px;
 }
-.header {
+.skift .header {
   position: relative;
   top: 0;
   left: 0;
@@ -39,25 +34,25 @@
   font-size: 16px;
   font-weight: bold;
 }
-.data-label {
+.skift .data-label {
   display: inline-block;
   margin-bottom: 2px;
   margin-right: 5px;
   color: #292929;
 }
-.data-label:after {
+.skift .data-label:after {
   content: ":";
 }
-.data-value {
+.skift .data-value {
   color: #000;
   font-weight: bold;
   text-transform: capitalize;
 }
-.variant {
+.skift .variant {
   text-transform: uppercase;
   color: #66ff33;
 }
-.close {
+.skift .close {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -71,7 +66,7 @@
   border-radius: 5px;
   cursor: pointer;
 }
-.reset {
+.skift .reset {
   display: block;
   margin: 10px auto;
   padding: 5px 10px;

diff --git a/src/ui.ts b/src/ui.ts
@@ -32,50 +32,53 @@ export const uiFactory = (
             };
 
             const variationHtml = test.variations.map(variant => {
-                return `<a href="${test.getVariationUrl(
-                    variant.name
-                )}" title="Segment: ${getVariationPercentage(
-                    variant as InternalVariation
-                )}">${variant.name}</a>`;
+                return `
+                    <a
+                        href="${test.getVariationUrl(variant.name)}"
+                        title="Segment: ${getVariationPercentage(variant as InternalVariation)}"
+                    >
+                        ${variant.name}
+                    </a>
+                `;
             });
 
             return `
-            <div class="test">
-              <div class="header">
-                Viewing: <span class="abtest-variant">${variation}</span>
-              </div>${Object.keys(data)
-                  .map(
-                      key =>
-                          `<div><span class="data-label">${key}</span><span class="data-value">${data[
-                              key
-                          ]}</span></div>`
-                  )
-                  .join('')}
-            ${variationHtml.join('&nbsp;&bull;&nbsp;')}</div>`;
+                <div class="test">
+                    <div class="header">
+                        Viewing: <span class="abtest-variant">${variation}</span>
+                    </div>
+                    ${Object.keys(data).map(key => `
+                        <div>
+                            <span class="data-label">${key}</span>
+                            <span class="data-value">${data[key]}</span>
+                        </div>
+                    `).join('')}
+                    ${variationHtml.join('&nbsp;&bull;&nbsp;')}
+                </div>
+            `;
         } else {
             const canRun = await test.shouldRun(getUserAgentInfo());
-            return `<div class="test">
+            return `
+                <div class="test">
                     <div class="header">
-                      Viewing: <span class="abtest-variant">Not initialized</span>
+                        Viewing: <span class="abtest-variant">Not initialized</span>
                     </div>
                     <div>Test <span class="data-value">${test.name}</span> is not initialized</div>
-                    <div><span class="data-label">Can run</span><span class="data-value">${canRun}</span></div>
-                </div>`;
+                    <div>
+                        <span class="data-label">Can run</span>
+                        <span class="data-value">${canRun}</span>
+                    </div>
+                </div>
+            `;
         }
     }
 
     function showSplitTestUi() {
-        if (!document.head.attachShadow) {
-            console.warn(
-                `Skift: Sorry, we don't support the UI in the browsers without Shadow DOM for now`
-            );
-            return;
-        }
+        const skift = document.createElement('div');
+        skift.className = 'skift';
 
-        const containerElement = document.createElement('div');
-        const shadowRoot = containerElement.attachShadow({ mode: 'open' });
         const style = document.createElement('style');
-        style.innerHTML = require('./main.css');
+        style.innerHTML = require('./ui.css');
 
         const testListEl = document.createElement('div');
         testListEl.className = 'test-list';
@@ -87,14 +90,14 @@ export const uiFactory = (
             testListEl.innerHTML = (await Promise.all(list.map(renderTest))).join('');
         });
 
-        const previousContainer = shadowRoot.querySelector('.ui-container');
+        const previousContainer = document.querySelector('.skift .container');
 
         if (previousContainer) {
             container = previousContainer;
         } else {
             container = document.createElement('div');
             container.appendChild(testListEl);
-            container.className = 'ui-container';
+            container.className = 'container';
         }
         const button = document.createElement('button');
 
@@ -114,22 +117,22 @@ export const uiFactory = (
         });
         container.appendChild(close);
 
-        shadowRoot.appendChild(style);
-        shadowRoot.appendChild(container);
-        document.body.appendChild(containerElement);
+        skift.appendChild(style);
+        skift.appendChild(container);
+        document.body.appendChild(skift);
         isInitialized = true;
     }
 
     function show() {
         if (isInitialized) {
-            container.className = 'ui-container';
+            container.className = 'container';
         } else {
             showSplitTestUi();
         }
     }
 
     function hide() {
-        container.className = 'ui-container hideme';
+        container.className = 'container hideme';
     }
 
     return {

diff --git a/tests/api.spec.ts b/tests/api.spec.ts
@@ -47,10 +47,8 @@ describe('Top-level api', () => {
 
         skift.ui.show();
 
-        const div = <HTMLElement>document.querySelector('div');
-        const root = <ShadowRoot>div.shadowRoot;
-
-        expect(root.querySelector('.skift-ui-container')).toBeDefined();
+        const skiftUI = document.querySelector('.skift .container');
+        expect(skiftUI).toBeTruthy();
     });
 
     describe('when setting a condition', () => {