refactor: update demo example

orestbida · Sep 8, 2024 · aec04cd · aec04cd
1 parent 95ec4cc
commit aec04cd
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 61 deletions.
diff --git a/demo/app.js b/demo/app.js
@@ -1,8 +1,7 @@
-const im = iframemanager();
-const MAPS_API_KEY = ''
-
-im.run({
+var im = iframemanager();
+const MAPS_API_KEY = '';
 
+var config = {
     onChange: ({changedServices, eventSource}) => {
         console.log(changedServices, eventSource)
     },
@@ -22,7 +21,7 @@ im.run({
 
             languages : {
                 en : {
-                    notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
+                    notice: 'This content is available <a href="https://www.youtube-nocookie.com/embed/{data-id}">here</a>. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
                     loadBtn: 'Load once',
                     loadAllBtn: "Don't ask again"
                 }
@@ -270,15 +269,9 @@ im.run({
         }
 
     }
-});
-
-
-const acceptAll = document.getElementById('accept-all');
-const rejectAll = document.getElementById('reject-all');
-
-acceptAll.addEventListener('click', () => im.acceptService('all'));
-rejectAll.addEventListener('click', () => im.rejectService('all'));
+};
 
+im.run(config);
 
 /**
  * Dynamically load script (append to head)

diff --git a/demo/assets/demo.css b/demo/assets/demo.css
@@ -0,0 +1,66 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    max-width: 910px;
+    margin: 0 auto;
+    padding: 1em;
+    line-height: 1.2;
+    font-family: 'BasierSquare', sans-serif!important;
+}
+
+@font-face {
+    font-family: 'BasierSquare';
+    src: local('BasierSquare'),
+    url('./fonts/basier-square-regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: U+000-5FF;
+}
+
+@font-face {
+    font-family: 'BasierSquare';
+    src: local('BasierSquare'),
+    url('./fonts/basier-square-semibold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+    unicode-range: U+000-5FF;
+    font-display: swap;
+}
+
+:root {
+    --im-font-family: 'BasierSquare', sans-serif!important;
+}
+
+.styled-btn {
+    font: inherit;
+    font-weight: 600;
+    font-size: .9rem;
+    padding: .65rem 1rem;
+    border-radius: .4rem;
+    background-color: rgb(238, 238, 238);
+    border: 1px solid rgb(218, 218, 218);
+    color: #000000;
+    cursor: pointer;
+    transition: background-color .15s ease, border-color .15s ease;
+}
+
+.styled-btn:hover {
+    background-color: rgb(218, 218, 218);
+}
+
+.styled-btn:focus,
+.styled-btn:active {
+    border-color: rgb(180, 180, 180);
+}
+
+.styled-btn:disabled {
+    cursor: not-allowed;
+    transition: none!important;
+    background-color: rgb(238, 238, 238)!important;
+    border: 1px solid rgb(228, 228, 228)!important;
+    color: rgb(158, 158, 158)!important;
+}
diff --git a/demo/assets/demo.js b/demo/assets/demo.js
@@ -0,0 +1,23 @@
+/** @type {HTMLButtonElement} */ const acceptAllBtn = document.getElementById('accept-all-btn');
+/** @type {HTMLButtonElement} */ const rejectAllBtn = document.getElementById('reject-all-btn');
+/** @type {HTMLButtonElement} */ const resetBtn     = document.getElementById('reset-btn');
+/** @type {HTMLButtonElement} */ const runBtn       = document.getElementById('run-btn');
+
+acceptAllBtn.addEventListener('click', () => im.acceptService('all'));
+rejectAllBtn.addEventListener('click', () => im.rejectService('all'));
+
+resetBtn.addEventListener('click', () => {
+    runBtn.disabled = false;
+    resetBtn.disabled = true;
+    acceptAllBtn.disabled = true;
+    rejectAllBtn.disabled = true;
+    im.reset();
+})
+
+runBtn.addEventListener('click', () => {
+    runBtn.disabled = true;
+    resetBtn.disabled = false;
+    acceptAllBtn.disabled = false;
+    rejectAllBtn.disabled = false;
+    im.run(config);
+})
diff --git a/demo/assets/fonts.css b/demo/assets/fonts.css
diff --git a/demo/index.html b/demo/index.html
@@ -1,29 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <title>Test youtube videos cookie blocker</title>
+        <title>IframeManager Demo Page</title>
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <meta name="description" content="A page's description, usually one or two sentences."/>
+        <script src="assets/demo.js" defer></script>
+        <link rel="stylesheet" href="assets/demo.css">
 
         <link rel="stylesheet" href="../src/iframemanager.css">
-        <link rel="stylesheet" href="./assets/fonts.css">
         <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" media="print" onload="this.media='all'">
 
         <style>
-
-            * {
-                padding: 0;
-                margin: 0;
-            }
-
-            body{
-                max-width: 910px;
-                margin: 0 auto;
-                padding: 1em;
-                font-family: sans-serif;
-                line-height: 1.2;
-            }
-
             /* Customize twitter service colors */
             div[data-service="youtube"]{
                 --im-btn-bg: rgba(255, 45, 45, 0.85);
@@ -95,18 +82,23 @@
                 border-radius: 28px;
             }
         </style>
-
     </head>
  <body>
     <div id="app">
-        <h1>This is a test page</h1>
+        <h1>Demo page</h1>
         <br>
-        <p>Demo with youtube & dailymotion config.</p>
+        <p>Demo with various services.</p>
         <br>
         <br>
 
-        <button id="accept-all">Accept all</button>
-        <button id="reject-all">Reject all</button>
+        <div>
+            <button class="styled-btn" id="accept-all-btn">Accept all</button>
+            <button class="styled-btn" id="reject-all-btn">Reject all</button>
+
+            <button class="styled-btn" id="reset-btn">Reset</button>
+            <button class="styled-btn" id="run-btn" disabled>Run</button>
+        </div>
+        <br>
 
         <br>
         <br>