From aec04cdde716cb4ac177a330d1b98a0b03e47705 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sun, 8 Sep 2024 17:49:39 +0200 Subject: [PATCH] refactor: update demo example --- demo/app.js | 19 ++++--------- demo/assets/demo.css | 66 +++++++++++++++++++++++++++++++++++++++++++ demo/assets/demo.js | 23 +++++++++++++++ demo/assets/fonts.css | 27 ------------------ demo/index.html | 34 +++++++++------------- 5 files changed, 108 insertions(+), 61 deletions(-) create mode 100644 demo/assets/demo.css create mode 100644 demo/assets/demo.js delete mode 100644 demo/assets/fonts.css diff --git a/demo/app.js b/demo/app.js index e16dcad..540d5b0 100644 --- 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 terms and conditions of youtube.com.', + notice: 'This content is available here. By showing the external content you accept the terms and conditions 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 new file mode 100644 index 0000000..2ff6097 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/demo/assets/demo.js b/demo/assets/demo.js new file mode 100644 index 0000000..5427a22 --- /dev/null +++ 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); +}) \ No newline at end of file diff --git a/demo/assets/fonts.css b/demo/assets/fonts.css deleted file mode 100644 index ea6418c..0000000 --- a/demo/assets/fonts.css +++ /dev/null @@ -1,27 +0,0 @@ -@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; -} - -body{ - font-family: 'BasierSquare', sans-serif!important; -} - -:root { - --im-font-family: 'BasierSquare', sans-serif!important; -} \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index a475796..86ce2e9 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,29 +1,16 @@ - Test youtube videos cookie blocker + IframeManager Demo Page + + - -
-

This is a test page

+

Demo page


-

Demo with youtube & dailymotion config.

+

Demo with various services.



- - +
+ + + + + +
+