Merge pull request #39 from trustpilot/fix-the-ui-toggling

Fix the ui toggling

examples/basic/index.html

@@ -8,7 +8,7 @@
       font-family: Helvetica Neue, serif;
     }
 
-    div {
+    #test-button {
       background-color: #0000FF;
       width: 200px;
       padding: 30px;
@@ -26,25 +26,24 @@ <h1>Skift: A/B test basic example</h1>
 <p>This is an A/B split test</p>
 <p>Below there's a div. It will be blue originally, and orange if you're in the A/B test.</p>
 
-<div id="test-button">This is the original div</div>
+<button id="test-button">This is the original div</button>
 <button onclick="skift.reset();">Reset</button>
 
 <script type="text/javascript">
-    skift
-    .create('name-of-a-test')
-    .setCondition(() => {
-        return true;
-    })
-    .addVariation({
-        name: 'control', // No setup required.
-    })
-    .addVariation({
-        name: 'name-of-a-variation',
-        setup() {
-            document.getElementById('test-button').style.backgroundColor = '#ffcc00';
-        }
-    })
-    .setup();
+  skift.config({
+    uiCondition: () => true
+  });
+
+  skift.create('name-of-a-test').setCondition(() => {
+    return true;
+  }).addVariation({
+    name: 'control' // No setup required.
+  }).addVariation({
+    name: 'name-of-a-variation',
+    setup() {
+      document.getElementById('test-button').style.backgroundColor = '#ffcc00';
+    }
+  }).setup();
 </script>
 </body>
 </html>

src/index.ts

@@ -28,10 +28,8 @@ const ui = uiFactory(
 
 $(() => {
     if (shouldShowUI()) {
-        return;
+        ui.show();
     }
-
-    setTimeout(() => ui.show(), 1000);
 });
 
 export {

src/main.ts

@@ -138,7 +138,7 @@ export function reset(): void {
 
 export function shouldShowUI() {
     return (
-        !_config.globalCondition(userAgentInfo) ||
-        !_config.uiCondition(userAgentInfo)
+        _config.globalCondition(userAgentInfo) === true &&
+        _config.uiCondition(userAgentInfo) === true
     );
 }