From 73a86fcbd0d23f33ab0e0a44ba61fe9ad894e5ed Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 8 Dec 2022 13:41:23 +0100 Subject: [PATCH 01/53] Update `.gitignore`: ignore `.vscode` --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index e046332..a7e42e5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /dev_tools -node_modules \ No newline at end of file +node_modules +.vscode \ No newline at end of file From 25aa68e37237aadfdf9350dcba75e8c0b434c51b Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 8 Dec 2022 13:43:26 +0100 Subject: [PATCH 02/53] Fix terser build fails due to incorrect file path --- terser.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/terser.js b/terser.js index 11fe5a8..b8b503f 100644 --- a/terser.js +++ b/terser.js @@ -1,9 +1,9 @@ const { minify } = require("terser"); const { writeFileSync, readFileSync } = require('fs'); -const pkg = require('./package.json'); +const pkgName = 'iframemanager'; -const srcFile = `src/${pkg.name}.js`; -const distFile = `dist/${pkg.name}.js`; +const srcFile = `src/${pkgName}.js`; +const distFile = `dist/${pkgName}.js`; const code = readFileSync(srcFile, { encoding: 'utf8' From f0753e476fdf15f0469dff07cd9dfd3501a9527f Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 8 Dec 2022 13:43:57 +0100 Subject: [PATCH 03/53] Update all dev. dependencies --- package.json | 6 +++--- pnpm-lock.yaml | 39 ++++++++++++++++++++++----------------- 2 files changed, 25 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index bd85b8d..dca442a 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,8 @@ "devDependencies": { "cssnano": "^5.1.14", "postcss": "^8.4.19", - "postcss-cli": "^10.0.0", - "postcss-custom-properties": "^12.1.10", - "terser": "^5.15.1" + "postcss-cli": "^10.1.0", + "postcss-custom-properties": "^12.1.11", + "terser": "^5.16.1" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7e34b63..93ec9d0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,16 +3,16 @@ lockfileVersion: 5.4 specifiers: cssnano: ^5.1.14 postcss: ^8.4.19 - postcss-cli: ^10.0.0 - postcss-custom-properties: ^12.1.10 - terser: ^5.15.1 + postcss-cli: ^10.1.0 + postcss-custom-properties: ^12.1.11 + terser: ^5.16.1 devDependencies: cssnano: 5.1.14_postcss@8.4.19 postcss: 8.4.19 - postcss-cli: 10.0.0_postcss@8.4.19 - postcss-custom-properties: 12.1.10_postcss@8.4.19 - terser: 5.15.1 + postcss-cli: 10.1.0_postcss@8.4.19 + postcss-custom-properties: 12.1.11_postcss@8.4.19 + terser: 5.16.1 packages: @@ -381,9 +381,9 @@ packages: to-regex-range: 5.0.1 dev: true - /fs-extra/10.1.0: - resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} - engines: {node: '>=12'} + /fs-extra/11.1.0: + resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==} + engines: {node: '>=14.14'} dependencies: graceful-fs: 4.2.10 jsonfile: 6.1.0 @@ -557,8 +557,8 @@ packages: postcss-value-parser: 4.2.0 dev: true - /postcss-cli/10.0.0_postcss@8.4.19: - resolution: {integrity: sha512-Wjy/00wBBEgQqnSToznxLWDnATznokFGXsHtF/3G8glRZpz5KYlfHcBW/VMJmWAeF2x49zjgy4izjM3/Wx1dKA==} + /postcss-cli/10.1.0_postcss@8.4.19: + resolution: {integrity: sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==} engines: {node: '>=14'} hasBin: true peerDependencies: @@ -566,7 +566,7 @@ packages: dependencies: chokidar: 3.5.3 dependency-graph: 0.11.0 - fs-extra: 10.1.0 + fs-extra: 11.1.0 get-stdin: 9.0.0 globby: 13.1.2 picocolors: 1.0.0 @@ -575,7 +575,7 @@ packages: postcss-reporter: 7.0.5_postcss@8.4.19 pretty-hrtime: 1.0.3 read-cache: 1.0.0 - slash: 4.0.0 + slash: 5.0.0 yargs: 17.6.2 transitivePeerDependencies: - ts-node @@ -605,8 +605,8 @@ packages: postcss-value-parser: 4.2.0 dev: true - /postcss-custom-properties/12.1.10_postcss@8.4.19: - resolution: {integrity: sha512-U3BHdgrYhCrwTVcByFHs9EOBoqcKq4Lf3kXwbTi4hhq0qWhl/pDWq2THbv/ICX/Fl9KqeHBb8OVrTf2OaYF07A==} + /postcss-custom-properties/12.1.11_postcss@8.4.19: + resolution: {integrity: sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 @@ -955,6 +955,11 @@ packages: engines: {node: '>=12'} dev: true + /slash/5.0.0: + resolution: {integrity: sha512-n6KkmvKS0623igEVj3FF0OZs1gYYJ0o0Hj939yc1fyxl2xt+xYpLnzJB6xBSqOfV9ZFLEWodBBN/heZJahuIJQ==} + engines: {node: '>=14.16'} + dev: true + /source-map-js/1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} @@ -1018,8 +1023,8 @@ packages: stable: 0.1.8 dev: true - /terser/5.15.1: - resolution: {integrity: sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==} + /terser/5.16.1: + resolution: {integrity: sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==} engines: {node: '>=10'} hasBin: true dependencies: From 5d4788dde6932870478ff956ae8bc41ff1f6679d Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 8 Dec 2022 13:46:04 +0100 Subject: [PATCH 04/53] Fix whitespace: use spaces instead of tabs --- src/iframemanager.css | 284 +++++++++++++++++++++--------------------- 1 file changed, 142 insertions(+), 142 deletions(-) diff --git a/src/iframemanager.css b/src/iframemanager.css index f14c909..50601ef 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -8,7 +8,7 @@ div[data-service] :after{ font-variant: normal; font-weight: inherit; font-family: inherit; - line-height: 1.2; + line-height: 1.2; font-size: 1em; margin: 0; padding: 0; @@ -23,17 +23,17 @@ div[data-service] :after{ } div[data-service] .c-ld { - bottom: 2em; + bottom: 2em; right: 2.5em; - opacity: 0; - visibility: hidden; - transform: translateY(10px); - transition: opacity .3s ease, visibility .3s ease, transform .3s ease; + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: opacity .3s ease, visibility .3s ease, transform .3s ease; } div[data-service] .c-ld, div[data-service] .c-ld:after{ - position: absolute; + position: absolute; z-index: 1; border-radius: 100%; width: 20px; @@ -41,33 +41,33 @@ div[data-service] .c-ld:after{ } div[data-service] .c-ld::after{ - content: ''; - border: 4px solid white; + content: ''; + border: 4px solid white; border-top: 4px solid transparent; - animation: spin 1s linear infinite; + animation: spin 1s linear infinite; } div[data-service].c-h-n .c-ld{ - opacity: 1; - visibility: visible; - transform: translateY(0); + opacity: 1; + visibility: visible; + transform: translateY(0); } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } div[data-service]{ - display: inline-block; - max-width: 100%; - min-height: 150px; - min-width: 300px; - font-family: inherit; - position: relative; - font-size: initial; - background-color: #0b1016; - overflow: hidden; + display: inline-block; + max-width: 100%; + min-height: 150px; + min-width: 300px; + font-family: inherit; + position: relative; + font-size: initial; + background-color: #0b1016; + overflow: hidden; } div[data-service] button, @@ -76,33 +76,33 @@ div[data-service] input, div[data-service] h1, div[data-service] h2, div[data-service] h3{ - transition: none; - animation: none; + transition: none; + animation: none; } div[data-service]::before{ - padding-top: 56.25%; - display: block; - content: ""; + padding-top: 56.25%; + display: block; + content: ""; } div[data-autoscale]{ - height: auto; - width: 100%; + height: auto; + width: 100%; } div[data-service] .c-nt{ - color: #fff; - max-width: 100%; - height: 100%; - width: 100%; - transition: opacity .3s ease, visibility .3s ease; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 2; + color: #fff; + max-width: 100%; + height: 100%; + width: 100%; + transition: opacity .3s ease, visibility .3s ease; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 2; } div[data-service] .c-bg{ @@ -111,43 +111,43 @@ div[data-service] .c-bg{ right: 0; bottom: 0; left: 0; - opacity: .5; - z-index: 1; - transition: opacity .3s ease, visibility .3s ease, transform .3s ease; + opacity: .5; + z-index: 1; + transition: opacity .3s ease, visibility .3s ease, transform .3s ease; } div[data-service] .c-bg::before{ - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - transition: opacity .3s ease, visibility .3s ease; - background: rgb(30,56,97); + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + transition: opacity .3s ease, visibility .3s ease; + background: rgb(30,56,97); background: linear-gradient( 14deg, rgb(12 15 23 / 95%) 10%, rgb(0 0 0 / 51%) 100%, rgba(68,77,125,0.1082983535210959) 0%); - background: -moz-linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); - background: -webkit-linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); - background: linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e3861",endColorstr="#cedce9",GradientType=1); + background: -moz-linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); + background: -webkit-linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); + background: linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e3861",endColorstr="#cedce9",GradientType=1); } div[data-service] .c-bg-i{ - background-size: cover; + background-size: cover; background-position: center; - background-repeat: no-repeat; - position: absolute; + background-repeat: no-repeat; + position: absolute; top: 0; left: 0; right: 0; - bottom: 0; - opacity: 0; - transition: opacity .5s ease, transform .5s ease; + bottom: 0; + opacity: 0; + transition: opacity .5s ease, transform .5s ease; } div[data-service] .c-bg-i.loaded{ - opacity: 1; + opacity: 1; } div[data-service] .c-tl{ @@ -155,52 +155,52 @@ div[data-service] .c-tl{ margin-bottom: 10px; font-size: 1.2em; font-weight: bold; - text-align: center; + text-align: center; } div[data-service].c-h-n .c-bg{ - opacity: 1; - transform: scale(1); + opacity: 1; + transform: scale(1); } div[data-service].c-h-n .c-nt{ - opacity: 0; - visibility: hidden; + opacity: 0; + visibility: hidden; } div[data-service] .c-n-c{ - display: table; - height: 100%; - width: 100%; - position: relative; - z-index: 1; - margin: 0; - font-size: .9em; - transition: background-color .3s ease, opacity .3s ease; + display: table; + height: 100%; + width: 100%; + position: relative; + z-index: 1; + margin: 0; + font-size: .9em; + transition: background-color .3s ease, opacity .3s ease; } div[data-service] .c-n-t{ - display: block; - font-size: .95em; - position: relative; - z-index: 1; - line-height: 1.4em; - color: #fff; - max-width: 420px; - margin: 0 auto; - margin-bottom: 20px; + display: block; + font-size: .95em; + position: relative; + z-index: 1; + line-height: 1.4em; + color: #fff; + max-width: 420px; + margin: 0 auto; + margin-bottom: 20px; } div[data-service] .c-n-t, div[data-service] .c-n-a{ - text-align: center; + text-align: center; } div[data-service] .c-t-cn{ - display: table-cell; - vertical-align: middle; - padding: 0 12px; - transition: opacity .3s ease, transform .3s ease, visibility .3s ease; + display: table-cell; + vertical-align: middle; + padding: 0 12px; + transition: opacity .3s ease, transform .3s ease, visibility .3s ease; } div[data-service] .c-n-c .c-la-b, @@ -223,10 +223,10 @@ div[data-service] .c-n-c .c-l-b{ } /* Play icon */ div[data-service] .c-n-c .c-l-b::before{ - content: ''; + content: ''; display: block; position: absolute; - top: 50%; + top: 50%; transform: translateY(-50%); left: 1.1em; z-index: 2; @@ -238,33 +238,33 @@ div[data-service] .c-n-c .c-l-b::before{ div[data-service] .c-n-c .c-la-b{ margin-left: 1em; - padding: 1em; + padding: 1em; background: rgba(225, 239, 255, .8); color: #0d1f34; } div[data-service] .c-n-c .c-la-b:hover{ - background: rgba(225, 239, 255, .95); + background: rgba(225, 239, 255, .95); } div[data-service] .c-n-c .c-l-b:hover{ - background: rgba(9, 80, 161, 0.89); + background: rgba(9, 80, 161, 0.89); } div[data-service] .c-n-c .c-la-b:active{ - transition: none; + transition: none; background: rgba(225, 239, 255, .6); } div[data-service] .c-n-c .c-l-b:active{ - transition: none; + transition: none; box-shadow: 0 0 0 4px rgba(24, 104, 250, .24); } div[data-service].c-h-n .c-t-cn{ - opacity: 0; - visibility: hidden; - transform: translateY(-10px); + opacity: 0; + visibility: hidden; + transform: translateY(-10px); } div[data-service] iframe{ @@ -274,22 +274,22 @@ div[data-service] iframe{ right: 0; bottom: 0; height: 100%; - border: none; - max-width: 100%; - width: 100%; - background: #fff; - display: block; - visibility: hidden; - opacity: 0; - z-index: 2; - transition: opacity .5s ease; + border: none; + max-width: 100%; + width: 100%; + background: #fff; + display: block; + visibility: hidden; + opacity: 0; + z-index: 2; + transition: opacity .5s ease; } div[data-service].c-h-b iframe{ - opacity: 1; - visibility: visible; - transform: scale(1); - transition-delay: .1s; + opacity: 1; + visibility: visible; + transform: scale(1); + transition-delay: .1s; } div[data-service] .c-n-t a { @@ -299,89 +299,89 @@ div[data-service] .c-n-t a { } div[data-service] .c-n-t a:hover{ - border-color: transparent; + border-color: transparent; } div[data-service][data-ratio="1:1"]::before{ - padding-top: 100%; + padding-top: 100%; } div[data-service][data-ratio="2:1"]::before{ - padding-top: 50%; + padding-top: 50%; } div[data-service][data-ratio="3:2"]::before{ - padding-top: 66.666666%; + padding-top: 66.666666%; } div[data-service][data-ratio="5:2"]::before{ - padding-top: 40%; + padding-top: 40%; } div[data-service][data-ratio="4:3"]::before{ - padding-top: 75%; + padding-top: 75%; } div[data-service][data-ratio="16:9"]::before{ - padding-top: 56.25%; + padding-top: 56.25%; } div[data-service][data-ratio="16:10"]::before{ - padding-top: 62.5%; + padding-top: 62.5%; } div[data-service][data-ratio="20:9"]::before{ - padding-top: 45%; + padding-top: 45%; } div[data-service][data-ratio="21:9"]::before{ - padding-top: 42.857142%; + padding-top: 42.857142%; } /** Vertical aspect ratios **/ div[data-service][data-ratio="9:16"]::before{ - padding-top: 177.777777%; + padding-top: 177.777777%; } div[data-service][data-ratio="9:20"]::before{ - padding-top: 222.222222%; + padding-top: 222.222222%; } div[data-customwidget]::before { - display: none; + display: none; } div[data-customwidget].c-h-b{ - background: transparent; + background: transparent; } div[data-customwidget].c-h-b .c-ld{ - opacity: 0; - visibility: hidden; + opacity: 0; + visibility: hidden; } div[data-customwidget] > div{ - margin: 0!important; + margin: 0!important; } div[data-customwidget]{ - vertical-align: top; - min-width: 296px; - transition: background-color .3s ease; - transition-delay: .3s; + vertical-align: top; + min-width: 296px; + transition: background-color .3s ease; + transition-delay: .3s; } /* div[data-service="twitter"] .c-n-c .c-l-b{ - background-color: #1DA1F2; + background-color: #1DA1F2; } div[data-service="twitter"] .c-n-c .c-l-b::before{ - border: none; - height: 15px; - width: 15px; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAATZJREFUOE+lk78rRWEcxj/PJhmUMhhkkMEgGyZSlCR27qRYFItRXWVQJsVm8A8w3GSQUpTcYlCUzXAzKPEnPHp1zunc0znXkW+9y/s+30/P98cr/hkqk2+7E1gA2oG6pIeQZ3v6B2B7T9JmHsz2LHAA9KXeq8AUsCTbE8AVcAGsS3pJg2zXgLkM/Bm4BL7SgKB5B3aBm5RNF5RZlbQdl3AHjGSET8AtsFIAGJVUDw76gS0gwCplmhppuiR9xg7OgZk/JDck9QZ9DJgEdoCxkpCapPk0YBA4jJJ7gIFfQOOSrhNAtAvLwFEJB/uSNmJd0ybaDk5CGWvAcA7sMeyEpEYTwHY3EJqyCCT0DOAUWJX0kb4PYwzzD3tQFCfAsaSzPEFSgu0OYCg6bcAb8CrpvlVfSv3GVoBvLzlh7eQqydQAAAAASUVORK5CYII=') + border: none; + height: 15px; + width: 15px; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAATZJREFUOE+lk78rRWEcxj/PJhmUMhhkkMEgGyZSlCR27qRYFItRXWVQJsVm8A8w3GSQUpTcYlCUzXAzKPEnPHp1zunc0znXkW+9y/s+30/P98cr/hkqk2+7E1gA2oG6pIeQZ3v6B2B7T9JmHsz2LHAA9KXeq8AUsCTbE8AVcAGsS3pJg2zXgLkM/Bm4BL7SgKB5B3aBm5RNF5RZlbQdl3AHjGSET8AtsFIAGJVUDw76gS0gwCplmhppuiR9xg7OgZk/JDck9QZ9DJgEdoCxkpCapPk0YBA4jJJ7gIFfQOOSrhNAtAvLwFEJB/uSNmJd0ybaDk5CGWvAcA7sMeyEpEYTwHY3EJqyCCT0DOAUWJX0kb4PYwzzD3tQFCfAsaSzPEFSgu0OYCg6bcAb8CrpvlVfSv3GVoBvLzlh7eQqydQAAAAASUVORK5CYII=') } .fb_iframe_widget_fluid span{ - width: 100%!important; + width: 100%!important; } */ \ No newline at end of file From 29d867d9e3496159ebe55776499d60df8334b317 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 8 Dec 2022 13:48:53 +0100 Subject: [PATCH 05/53] Minor tweak: use `600` as font weight instead of `bold` --- src/iframemanager.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/iframemanager.css b/src/iframemanager.css index 50601ef..a4a43dc 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -154,7 +154,7 @@ div[data-service] .c-tl{ display: block; margin-bottom: 10px; font-size: 1.2em; - font-weight: bold; + font-weight: 600; text-align: center; } @@ -216,7 +216,7 @@ div[data-service] .c-n-c .c-l-b{ padding-left: 2.8em; color: #ffffff; margin: 0 auto; - font-weight: bold; + font-weight: 600; cursor: pointer; transition: opacity .3s ease, transform .3s cubic-bezier(0.25, 1, 0.5, 1), visibility .3s ease, box-shadow .3s ease, background-color .3s ease; box-shadow: rgba(0, 0, 0, 0.19) 0px 4px 12px; From a65e5dd53721bf49c485418171abc3b678baed53 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Fri, 9 Dec 2022 19:48:12 +0100 Subject: [PATCH 06/53] Rebuild dist files --- dist/iframemanager.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/iframemanager.css b/dist/iframemanager.css index 4bb84c6..851f56e 100644 --- a/dist/iframemanager.css +++ b/dist/iframemanager.css @@ -1 +1 @@ -div[data-service] *,div[data-service] :after,div[data-service] :before{background:none;border:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;float:none;font-family:inherit;font-size:1em;font-style:inherit;font-variant:normal;font-weight:inherit;letter-spacing:unset;line-height:1.2;margin:0;padding:0;text-align:left;text-decoration:none;text-transform:none}div[data-service] .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .c-ld,div[data-service] .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-service]{background-color:#0b1016;display:inline-block;font-family:inherit;font-size:medium;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service] button,div[data-service] h1,div[data-service] h2,div[data-service] h3,div[data-service] input,div[data-service] label{animation:none;transition:none}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-autoscale]{height:auto;width:100%}div[data-service] .c-nt{bottom:0;color:#fff;height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .c-bg{opacity:.5;transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div[data-service] .c-bg,div[data-service] .c-bg:before{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .c-bg:before{background:#1e3861;background:linear-gradient(14deg,rgba(12,15,23,.95) 10%,rgba(0,0,0,.51) 100%,rgba(68,77,125,.108) 0);background:-moz-linear-gradient(14deg,#1e3861 0,rgba(206,220,233,.118) 100%);background:-webkit-linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));content:"";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e3861",endColorstr="#cedce9",GradientType=1);transition:opacity .3s ease,visibility .3s ease}div[data-service] .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .c-bg-i.loaded{opacity:1}div[data-service] .c-tl{display:block;font-size:1.2em;font-weight:700;margin-bottom:10px;text-align:center}div[data-service].c-h-n .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .c-nt{opacity:0;visibility:hidden}div[data-service] .c-n-c{display:table;font-size:.9em;height:100%;margin:0;position:relative;transition:background-color .3s ease,opacity .3s ease;width:100%;z-index:1}div[data-service] .c-n-t{color:#fff;display:block;font-size:.95em;line-height:1.4em;margin:0 auto 20px;max-width:420px;position:relative;z-index:1}div[data-service] .c-n-a,div[data-service] .c-n-t{text-align:center}div[data-service] .c-t-cn{display:table-cell;padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;vertical-align:middle}div[data-service] .c-n-c .c-l-b,div[data-service] .c-n-c .c-la-b{background:rgba(0,102,219,.84);border:none;border-radius:.25em;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;cursor:pointer;display:inline-block;font-size:.85em;font-weight:700;margin:0 auto;padding:1em 1em 1em 2.8em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease;vertical-align:middle}div[data-service] .c-n-c .c-l-b:before{border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-top:7.5px solid transparent;content:"";display:block;height:0;left:1.1em;position:absolute;top:50%;transform:translateY(-50%);z-index:2}div[data-service] .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;margin-left:1em;padding:1em}div[data-service] .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89)}div[data-service] .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);transition:none}div[data-service].c-h-n .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .c-n-t a{border-bottom:1px solid #5fb3fb;color:#5fb3fb;text-decoration:none}div[data-service] .c-n-t a:hover{border-color:transparent}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b{background:transparent}div[data-customwidget].c-h-b .c-ld{opacity:0;visibility:hidden}div[data-customwidget]>div{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top} \ No newline at end of file +div[data-service] *,div[data-service] :after,div[data-service] :before{background:none;border:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;float:none;font-family:inherit;font-size:1em;font-style:inherit;font-variant:normal;font-weight:inherit;letter-spacing:unset;line-height:1.2;margin:0;padding:0;text-align:left;text-decoration:none;text-transform:none}div[data-service] .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .c-ld,div[data-service] .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-service]{background-color:#0b1016;display:inline-block;font-family:inherit;font-size:medium;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service] button,div[data-service] h1,div[data-service] h2,div[data-service] h3,div[data-service] input,div[data-service] label{animation:none;transition:none}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-autoscale]{height:auto;width:100%}div[data-service] .c-nt{bottom:0;color:#fff;height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .c-bg{opacity:.5;transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div[data-service] .c-bg,div[data-service] .c-bg:before{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .c-bg:before{background:#1e3861;background:linear-gradient(14deg,rgba(12,15,23,.95) 10%,rgba(0,0,0,.51) 100%,rgba(68,77,125,.108) 0);background:-moz-linear-gradient(14deg,#1e3861 0,rgba(206,220,233,.118) 100%);background:-webkit-linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));content:"";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e3861",endColorstr="#cedce9",GradientType=1);transition:opacity .3s ease,visibility .3s ease}div[data-service] .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .c-bg-i.loaded{opacity:1}div[data-service] .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .c-nt{opacity:0;visibility:hidden}div[data-service] .c-n-c{display:table;font-size:.9em;height:100%;margin:0;position:relative;transition:background-color .3s ease,opacity .3s ease;width:100%;z-index:1}div[data-service] .c-n-t{color:#fff;display:block;font-size:.95em;line-height:1.4em;margin:0 auto 20px;max-width:420px;position:relative;z-index:1}div[data-service] .c-n-a,div[data-service] .c-n-t{text-align:center}div[data-service] .c-t-cn{display:table-cell;padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;vertical-align:middle}div[data-service] .c-n-c .c-l-b,div[data-service] .c-n-c .c-la-b{background:rgba(0,102,219,.84);border:none;border-radius:.25em;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;cursor:pointer;display:inline-block;font-size:.85em;font-weight:600;margin:0 auto;padding:1em 1em 1em 2.8em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease;vertical-align:middle}div[data-service] .c-n-c .c-l-b:before{border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-top:7.5px solid transparent;content:"";display:block;height:0;left:1.1em;position:absolute;top:50%;transform:translateY(-50%);z-index:2}div[data-service] .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;margin-left:1em;padding:1em}div[data-service] .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89)}div[data-service] .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);transition:none}div[data-service].c-h-n .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .c-n-t a{border-bottom:1px solid #5fb3fb;color:#5fb3fb;text-decoration:none}div[data-service] .c-n-t a:hover{border-color:transparent}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b{background:transparent}div[data-customwidget].c-h-b .c-ld{opacity:0;visibility:hidden}div[data-customwidget]>div{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top} \ No newline at end of file From ded74910b0d42337c4b8b14acd58922a7c490fa6 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Fri, 9 Dec 2022 19:48:43 +0100 Subject: [PATCH 07/53] Update example app.js --- demo/app.js | 57 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 48 insertions(+), 9 deletions(-) diff --git a/demo/app.js b/demo/app.js index bb07753..45f84ae 100644 --- a/demo/app.js +++ b/demo/app.js @@ -4,6 +4,49 @@ // get module var manager = iframemanager(); + /** + * @typedef {object} WaitConfig + * @property {'script' | 'iframe'} type, + * @property {any} obj + * @property {string} [prop] + * @property {string} [selector] + */ + + /** + * Wait until a property on the window object is available + * @param {WaitConfig} opts + * @returns {Promise} + */ + const waitFor = async (opts) => { + const {obj, type, prop, selector} = opts; + + const isIframe = type === 'iframe'; + + const timeout = isIframe + ? 100 + : 10; + + const maxWait = 500; + + const objToCheck = prop + ? obj[prop] + : obj; + + const isDefined = () => typeof (isIframe && obj.querySelector(selector) || objToCheck) !== 'undefined' + + let nIntervals = 0; + + return await new Promise(resolve => { + const interval = setInterval(() => { + const timedOut = !isIframe && ++nIntervals * timeout > maxWait; + if (isDefined() || timedOut) { + clearInterval(interval); + resolve(!timedOut); + } + }, timeout); + }); + }; + manager.run({ currLang: document.documentElement.getAttribute('lang'), // autoLang: true, @@ -77,14 +120,12 @@ } }, twitter : { - onAccept: function(div, callback){ - CookieConsent.loadScript('https://platform.twitter.com/widgets.js').then(() => { - twttr.widgets.createTweet(div.dataset.id, div).then(function(tweet){ - console.log("tweet", tweet); - callback(tweet.firstChild); - }); - }); + onAccept: async (div, setIframe) => { + const twttrLoaded = await CookieConsent.loadScript('https://platform.twitter.com/widgets.js'); + const twttrReady = twttrLoaded && await waitFor({type: 'script', obj: window, prop: 'twttr'}); + const tweet = twttrReady && await twttr.widgets.createTweet(div.dataset.id, div); + tweet && setIframe(tweet.firstChild); }, onReject: function(iframe){ @@ -102,8 +143,6 @@ loadAllBtn: 'Don\'t ask again' } } - - }, "facebook-post" : { From 5b93c39d4be4a73f2fade5903b7b087969c5072d Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Fri, 9 Dec 2022 22:34:39 +0100 Subject: [PATCH 08/53] Minor tweak: improve css reset --- src/iframemanager.css | 86 ++++++++++++++++++++----------------------- 1 file changed, 39 insertions(+), 47 deletions(-) diff --git a/src/iframemanager.css b/src/iframemanager.css index a4a43dc..8a1cd17 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -1,25 +1,45 @@ -div[data-service] *, -div[data-service] :before, -div[data-service] :after{ - -webkit-box-sizing: border-box; +div[data-service], +div[data-service] span, +div[data-service] a, +div[data-service] button, +div[data-service] ::before, +div[data-service] ::after{ + all: unset; box-sizing: border-box; - float: none; - font-style: inherit; - font-variant: normal; - font-weight: inherit; +} + +div[data-service] a, +div[data-service] button, +div[data-service] input{ font-family: inherit; - line-height: 1.2; - font-size: 1em; + font-size: 100%; + line-height: normal; margin: 0; - padding: 0; - text-transform: none; - letter-spacing: unset; - color: inherit; - background: none; - border: none; - box-shadow: none; - text-decoration: none; - text-align: left; + outline: revert; + outline-offset: 2px; + cursor: pointer; + overflow: hidden; + -webkit-appearance: none; + appearance: none; +} + +div[data-service]{ + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 16px; + font-weight: 400; + display: inline-block; + max-width: 100%; + min-height: 150px; + min-width: 300px; + position: relative; + background-color: #0b1016; + overflow: hidden; +} + +div[data-service]::before{ + padding-top: 56.25%; + display: block; + content: ''; } div[data-service] .c-ld { @@ -58,34 +78,6 @@ div[data-service].c-h-n .c-ld{ 100% { transform: rotate(360deg); } } -div[data-service]{ - display: inline-block; - max-width: 100%; - min-height: 150px; - min-width: 300px; - font-family: inherit; - position: relative; - font-size: initial; - background-color: #0b1016; - overflow: hidden; -} - -div[data-service] button, -div[data-service] label, -div[data-service] input, -div[data-service] h1, -div[data-service] h2, -div[data-service] h3{ - transition: none; - animation: none; -} - -div[data-service]::before{ - padding-top: 56.25%; - display: block; - content: ""; -} - div[data-autoscale]{ height: auto; width: 100%; From 04a8a1a52f35c664d3f6d40efda161cc5a4ce7af Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Fri, 9 Dec 2022 23:02:28 +0100 Subject: [PATCH 09/53] Minor tweak: use `flexbox` instead of `table/table-cell` --- src/iframemanager.css | 41 ++++++++++++++++++++--------------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/iframemanager.css b/src/iframemanager.css index 8a1cd17..154b5dd 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -161,14 +161,15 @@ div[data-service].c-h-n .c-nt{ } div[data-service] .c-n-c{ - display: table; + display: flex; + justify-content: center; + align-items: center; height: 100%; - width: 100%; position: relative; z-index: 1; - margin: 0; font-size: .9em; - transition: background-color .3s ease, opacity .3s ease; + transition: background-color .3s ease, + opacity .3s ease; } div[data-service] .c-n-t{ @@ -185,51 +186,49 @@ div[data-service] .c-n-t{ div[data-service] .c-n-t, div[data-service] .c-n-a{ + display: flex; + align-items: center; + justify-content: center; text-align: center; + gap: 12px; } div[data-service] .c-t-cn{ - display: table-cell; - vertical-align: middle; padding: 0 12px; transition: opacity .3s ease, transform .3s ease, visibility .3s ease; } div[data-service] .c-n-c .c-la-b, div[data-service] .c-n-c .c-l-b{ - display: inline-block; + display: flex; + justify-content: space-evenly; + align-items: center; + gap: 8px; position: relative; padding: 1em; - vertical-align: middle; background: rgba(0, 102, 219, 0.84); - border: none; - border-radius: .25em; + border-radius: 4px; font-size: .85em; - padding-left: 2.8em; color: #ffffff; - margin: 0 auto; font-weight: 600; - cursor: pointer; - transition: opacity .3s ease, transform .3s cubic-bezier(0.25, 1, 0.5, 1), visibility .3s ease, box-shadow .3s ease, background-color .3s ease; box-shadow: rgba(0, 0, 0, 0.19) 0px 4px 12px; + transition: opacity .3s ease, + transform .3s cubic-bezier(0.25, 1, 0.5, 1), + visibility .3s ease, + box-shadow .3s ease, + background-color .3s ease; } + /* Play icon */ div[data-service] .c-n-c .c-l-b::before{ content: ''; display: block; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 1.1em; - z-index: 2; - height: 0; border-left: 12px solid white; border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; } div[data-service] .c-n-c .c-la-b{ - margin-left: 1em; padding: 1em; background: rgba(225, 239, 255, .8); color: #0d1f34; From 662a68d83ca43115f1c665db4cd46389d04b3093 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Fri, 9 Dec 2022 23:30:20 +0100 Subject: [PATCH 10/53] Minor tweak: use the more appropriate `div` tag instead of `span` --- src/iframemanager.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/iframemanager.js b/src/iframemanager.js index 94eee6c..5a1e87d 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -476,12 +476,12 @@ var fragment = doc.createDocumentFragment(); var notice = createNode('div'); - var span = createNode('span'); - var innerDiv = createNode('p'); + var span = createNode('div'); + var innerDiv = createNode('div'); var load_button = createNode('button'); var load_all_button = createNode('button'); - var notice_text = createNode('span'); + var notice_text = createNode('div'); var ytVideoBackground = createNode('div'); var loaderBg = createNode('div'); var ytVideoBackgroundInner = createNode('div'); From d58378b1bdbd7707c75bf7a824e05385f34391c8 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Fri, 9 Dec 2022 23:31:11 +0100 Subject: [PATCH 11/53] Add basic css variables --- src/iframemanager.css | 53 +++++++++++++++++++++++++++++-------------- 1 file changed, 36 insertions(+), 17 deletions(-) diff --git a/src/iframemanager.css b/src/iframemanager.css index 154b5dd..3caf3a1 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -1,3 +1,21 @@ +:root { + --im-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + + --im-color: #fff; + --im-bg: #0b1016; + + --im-btn-color: #fff; + --im-btn-hover-color: #fff; + --im-btn-bg: rgba(0, 102, 219, 0.84); + --im-btn-hover-bg: rgba(9, 80, 161, 0.89); + + --im-overlay-bg: linear-gradient( + 14deg, + rgba(30,56,97,1) 0%, + rgba(206,220,233,0.1181022750897234) 100% + ) +} + div[data-service], div[data-service] span, div[data-service] a, @@ -24,7 +42,7 @@ div[data-service] input{ } div[data-service]{ - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-family: var(--im-font-family); font-size: 16px; font-weight: 400; display: inline-block; @@ -32,7 +50,7 @@ div[data-service]{ min-height: 150px; min-width: 300px; position: relative; - background-color: #0b1016; + background-color: var(--im-bg); overflow: hidden; } @@ -48,7 +66,9 @@ div[data-service] .c-ld { opacity: 0; visibility: hidden; transform: translateY(10px); - transition: opacity .3s ease, visibility .3s ease, transform .3s ease; + transition: opacity .3s ease, + visibility .3s ease, + transform .3s ease; } div[data-service] .c-ld, @@ -84,7 +104,7 @@ div[data-autoscale]{ } div[data-service] .c-nt{ - color: #fff; + color: var(--im-color); max-width: 100%; height: 100%; width: 100%; @@ -116,13 +136,10 @@ div[data-service] .c-bg::before{ right: 0; bottom: 0; z-index: 1; - transition: opacity .3s ease, visibility .3s ease; + transition: opacity .3s ease, + visibility .3s ease; background: rgb(30,56,97); - background: linear-gradient( 14deg, rgb(12 15 23 / 95%) 10%, rgb(0 0 0 / 51%) 100%, rgba(68,77,125,0.1082983535210959) 0%); - background: -moz-linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); - background: -webkit-linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); - background: linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.1181022750897234) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e3861",endColorstr="#cedce9",GradientType=1); + background: var(--im-overlay-bg); } div[data-service] .c-bg-i{ @@ -135,7 +152,8 @@ div[data-service] .c-bg-i{ right: 0; bottom: 0; opacity: 0; - transition: opacity .5s ease, transform .5s ease; + transition: opacity .5s ease, + transform .5s ease; } div[data-service] .c-bg-i.loaded{ @@ -178,7 +196,6 @@ div[data-service] .c-n-t{ position: relative; z-index: 1; line-height: 1.4em; - color: #fff; max-width: 420px; margin: 0 auto; margin-bottom: 20px; @@ -195,7 +212,9 @@ div[data-service] .c-n-a{ div[data-service] .c-t-cn{ padding: 0 12px; - transition: opacity .3s ease, transform .3s ease, visibility .3s ease; + transition: opacity .3s ease, + transform .3s ease, + visibility .3s ease; } div[data-service] .c-n-c .c-la-b, @@ -206,10 +225,10 @@ div[data-service] .c-n-c .c-l-b{ gap: 8px; position: relative; padding: 1em; - background: rgba(0, 102, 219, 0.84); + background: var(--im-btn-bg); border-radius: 4px; font-size: .85em; - color: #ffffff; + color: var(--im-btn-color); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.19) 0px 4px 12px; transition: opacity .3s ease, @@ -223,7 +242,7 @@ div[data-service] .c-n-c .c-l-b{ div[data-service] .c-n-c .c-l-b::before{ content: ''; display: block; - border-left: 12px solid white; + border-left: 12px solid var(--im-btn-color); border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; } @@ -239,7 +258,7 @@ div[data-service] .c-n-c .c-la-b:hover{ } div[data-service] .c-n-c .c-l-b:hover{ - background: rgba(9, 80, 161, 0.89); + background: var(--im-btn-hover-bg); } div[data-service] .c-n-c .c-la-b:active{ From 5282f09d1ffadc2149f9ebf69bee7b35d4e68bd4 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Fri, 9 Dec 2022 23:31:56 +0100 Subject: [PATCH 12/53] Rebuild dist files --- dist/iframemanager.css | 2 +- dist/iframemanager.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/iframemanager.css b/dist/iframemanager.css index 851f56e..946e588 100644 --- a/dist/iframemanager.css +++ b/dist/iframemanager.css @@ -1 +1 @@ -div[data-service] *,div[data-service] :after,div[data-service] :before{background:none;border:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;float:none;font-family:inherit;font-size:1em;font-style:inherit;font-variant:normal;font-weight:inherit;letter-spacing:unset;line-height:1.2;margin:0;padding:0;text-align:left;text-decoration:none;text-transform:none}div[data-service] .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .c-ld,div[data-service] .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-service]{background-color:#0b1016;display:inline-block;font-family:inherit;font-size:medium;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service] button,div[data-service] h1,div[data-service] h2,div[data-service] h3,div[data-service] input,div[data-service] label{animation:none;transition:none}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-autoscale]{height:auto;width:100%}div[data-service] .c-nt{bottom:0;color:#fff;height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .c-bg{opacity:.5;transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div[data-service] .c-bg,div[data-service] .c-bg:before{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .c-bg:before{background:#1e3861;background:linear-gradient(14deg,rgba(12,15,23,.95) 10%,rgba(0,0,0,.51) 100%,rgba(68,77,125,.108) 0);background:-moz-linear-gradient(14deg,#1e3861 0,rgba(206,220,233,.118) 100%);background:-webkit-linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));content:"";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e3861",endColorstr="#cedce9",GradientType=1);transition:opacity .3s ease,visibility .3s ease}div[data-service] .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .c-bg-i.loaded{opacity:1}div[data-service] .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .c-nt{opacity:0;visibility:hidden}div[data-service] .c-n-c{display:table;font-size:.9em;height:100%;margin:0;position:relative;transition:background-color .3s ease,opacity .3s ease;width:100%;z-index:1}div[data-service] .c-n-t{color:#fff;display:block;font-size:.95em;line-height:1.4em;margin:0 auto 20px;max-width:420px;position:relative;z-index:1}div[data-service] .c-n-a,div[data-service] .c-n-t{text-align:center}div[data-service] .c-t-cn{display:table-cell;padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;vertical-align:middle}div[data-service] .c-n-c .c-l-b,div[data-service] .c-n-c .c-la-b{background:rgba(0,102,219,.84);border:none;border-radius:.25em;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;cursor:pointer;display:inline-block;font-size:.85em;font-weight:600;margin:0 auto;padding:1em 1em 1em 2.8em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease;vertical-align:middle}div[data-service] .c-n-c .c-l-b:before{border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-top:7.5px solid transparent;content:"";display:block;height:0;left:1.1em;position:absolute;top:50%;transform:translateY(-50%);z-index:2}div[data-service] .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;margin-left:1em;padding:1em}div[data-service] .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89)}div[data-service] .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);transition:none}div[data-service].c-h-n .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .c-n-t a{border-bottom:1px solid #5fb3fb;color:#5fb3fb;text-decoration:none}div[data-service] .c-n-t a:hover{border-color:transparent}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b{background:transparent}div[data-customwidget].c-h-b .c-ld{opacity:0;visibility:hidden}div[data-customwidget]>div{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top} \ No newline at end of file +:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-btn-color:#fff;--im-btn-hover-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] :after,div[data-service] :before,div[data-service] a,div[data-service] button,div[data-service] span{all:unset;box-sizing:border-box}div[data-service] a,div[data-service] button,div[data-service] input{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .c-ld,div[data-service] .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .c-bg{opacity:.5;transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div[data-service] .c-bg,div[data-service] .c-bg:before{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .c-bg:before{background:#1e3861;background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);content:"";transition:opacity .3s ease,visibility .3s ease}div[data-service] .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .c-bg-i.loaded{opacity:1}div[data-service] .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .c-nt{opacity:0;visibility:hidden}div[data-service] .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative;transition:background-color .3s ease,opacity .3s ease;z-index:1}div[data-service] .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto 20px;max-width:420px;position:relative;z-index:1}div[data-service] .c-n-a,div[data-service] .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .c-t-cn{padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}div[data-service] .c-n-c .c-l-b,div[data-service] .c-n-c .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-service] .c-n-c .c-l-b:before{border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;padding:1em}div[data-service] .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);transition:none}div[data-service].c-h-n .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .c-n-t a{border-bottom:1px solid #5fb3fb;color:#5fb3fb;text-decoration:none}div[data-service] .c-n-t a:hover{border-color:transparent}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b{background:transparent}div[data-customwidget].c-h-b .c-ld{opacity:0;visibility:hidden}div[data-customwidget]>div{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top} \ No newline at end of file diff --git a/dist/iframemanager.js b/dist/iframemanager.js index eca45f0..92f92f4 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -!function(){'use strict';var n={},i=[],t=[],r=!1,o='',e=null,c=[],a=document,f=['onload','onerror','src'];function u(n){var i=n.dataset,t={};for(var r in i)0===r.lastIndexOf('iframe')&&(t[r.slice(6).toLowerCase()]=i[r]);return{i:i.id,t:i.title,o:i.thumbnail,u:i.params,v:'thumbnailpreload'in i,l:'autoscale'in i,p:n,m:null,h:!1,_:!1,g:!0,I:t}}function v(i,t){var r=n[i];if('IntersectionObserver'in window){var o=new IntersectionObserver((function(n){n.forEach((function(n){n.isIntersecting&&(s(t,r[n.target.dataset.index]),o.unobserve(n.target))}))}));r.forEach((function(n){o.observe(n.p)}))}else for(var e=0;e0?i.hasOwnProperty(o)?o:h(i)[0]:void 0},T={acceptService:function(n){if(r=!1,'all'===n)for(var i=c.length,t=0;t-1&&o(n,e[n]);function o(n,i){m(i.cookie.name)||function(n){var i=new Date,t=n.path||'/',r=n.expiration||182,o=n.sameSite||'Lax',e=n.domain||location.hostname;i.setTime(i.getTime()+24*r*60*60*1e3);var c=' expires='+i.toUTCString(),f=n.name+'=1;'+c+'; Path='+t+';';f+=' SameSite='+o+';',e.indexOf('.')>-1&&(f+=' Domain='+e+';'),'https:'===location.protocol&&(f+=' Secure;'),a.cookie=f}(i.cookie),k(n,i)}},rejectService:function(i){if('all'===i){r=!0;for(var t=c.length,o=0;o-1&&f(i,e[i]);function f(i,t){var r,o,e;m(t.cookie.name)&&(o=(r=t.cookie).path||'/',e=r.domain||location.hostname,a.cookie=r.name+'=; Path='+o+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(i,t){for(var r,o,e=n[i],c=e.length,a=0;a0?i.hasOwnProperty(o)?o:p(i)[0]:void 0},T={acceptService:function(n){if(r=!1,'all'===n)for(var i=c.length,t=0;t-1&&o(n,e[n]);function o(n,i){h(i.cookie.name)||function(n){var i=new Date,t=n.path||'/',r=n.expiration||182,o=n.sameSite||'Lax',e=n.domain||location.hostname;i.setTime(i.getTime()+24*r*60*60*1e3);var c=' expires='+i.toUTCString(),f=n.name+'=1;'+c+'; Path='+t+';';f+=' SameSite='+o+';',e.indexOf('.')>-1&&(f+=' Domain='+e+';'),'https:'===location.protocol&&(f+=' Secure;'),a.cookie=f}(i.cookie),k(n,i)}},rejectService:function(i){if('all'===i){r=!0;for(var t=c.length,o=0;o-1&&f(i,e[i]);function f(i,t){var r,o,e;h(t.cookie.name)&&(o=(r=t.cookie).path||'/',e=r.domain||location.hostname,a.cookie=r.name+'=; Path='+o+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(i,t){for(var r,o,e=n[i],c=e.length,a=0;a Date: Fri, 9 Dec 2022 23:57:21 +0100 Subject: [PATCH 13/53] Minor tweak: make buttons optional --- dist/iframemanager.js | 2 +- src/iframemanager.js | 106 ++++++++++++++++++++++-------------------- 2 files changed, 56 insertions(+), 52 deletions(-) diff --git a/dist/iframemanager.js b/dist/iframemanager.js index 92f92f4..a7ced3a 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -!function(){'use strict';var n={},i=[],t=[],r=!1,o='',e=null,c=[],a=document,f=['onload','onerror','src'];function u(n){var i=n.dataset,t={};for(var r in i)0===r.lastIndexOf('iframe')&&(t[r.slice(6).toLowerCase()]=i[r]);return{i:i.id,t:i.title,o:i.thumbnail,u:i.params,v:'thumbnailpreload'in i,l:'autoscale'in i,m:n,h:null,p:!1,_:!1,g:!0,I:t}}function v(i,t){var r=n[i];if('IntersectionObserver'in window){var o=new IntersectionObserver((function(n){n.forEach((function(n){n.isIntersecting&&(s(t,r[n.target.dataset.index]),o.unobserve(n.target))}))}));r.forEach((function(n){o.observe(n.m)}))}else for(var e=0;e0?i.hasOwnProperty(o)?o:p(i)[0]:void 0},T={acceptService:function(n){if(r=!1,'all'===n)for(var i=c.length,t=0;t-1&&o(n,e[n]);function o(n,i){h(i.cookie.name)||function(n){var i=new Date,t=n.path||'/',r=n.expiration||182,o=n.sameSite||'Lax',e=n.domain||location.hostname;i.setTime(i.getTime()+24*r*60*60*1e3);var c=' expires='+i.toUTCString(),f=n.name+'=1;'+c+'; Path='+t+';';f+=' SameSite='+o+';',e.indexOf('.')>-1&&(f+=' Domain='+e+';'),'https:'===location.protocol&&(f+=' Secure;'),a.cookie=f}(i.cookie),k(n,i)}},rejectService:function(i){if('all'===i){r=!0;for(var t=c.length,o=0;o-1&&f(i,e[i]);function f(i,t){var r,o,e;h(t.cookie.name)&&(o=(r=t.cookie).path||'/',e=r.domain||location.hostname,a.cookie=r.name+'=; Path='+o+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(i,t){for(var r,o,e=n[i],c=e.length,a=0;a0?i.hasOwnProperty(o)?o:p(i)[0]:void 0},D={acceptService:function(n){if(r=!1,'all'===n)for(var i=c.length,t=0;t-1&&o(n,e[n]);function o(n,i){h(i.cookie.name)||function(n){var i=new Date,t=n.path||'/',r=n.expiration||182,o=n.sameSite||'Lax',e=n.domain||location.hostname;i.setTime(i.getTime()+24*r*60*60*1e3);var c=' expires='+i.toUTCString(),f=n.name+'=1;'+c+'; Path='+t+';';f+=' SameSite='+o+';',e.indexOf('.')>-1&&(f+=' Domain='+e+';'),'https:'===location.protocol&&(f+=' Secure;'),a.cookie=f}(i.cookie),T(n,i)}},rejectService:function(i){if('all'===i){r=!0;for(var t=c.length,o=0;o-1&&f(i,e[i]);function f(i,t){var r,o,e;h(t.cookie.name)&&(o=(r=t.cookie).path||'/',e=r.domain||location.hostname,a.cookie=r.name+'=; Path='+o+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(i,t){for(var r,o,e=n[i],c=e.length,a=0;a Date: Sat, 10 Dec 2022 14:41:10 +0100 Subject: [PATCH 14/53] Update Readme.md: add config. example for `Google Maps` (close #9) --- README.md | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fc40bb0..312ff39 100644 --- a/README.md +++ b/README.md @@ -475,7 +475,88 @@ Both `acceptService` and `rejectService` work the same way: ```

-- More "presets" for other service to come ... +-
How to embed google maps +

+ + -

With API key +

+ + ```javascript + manager.run({ + currLang: 'en', + services : { + googlemaps : { + embedUrl: 'https://www.google.com/maps/embed/v1/place?key=API_KEY&q={data-id}', + iframe: { + allow : 'picture-in-picture; fullscreen;' + }, + cookie: { + name: 'cc_maps' + }, + languages : { + en : { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of Google Maps.', + loadBtn: 'Load map', + loadAllBtn: 'Don\'t ask again' + } + } + } + } + }); + ``` + + Example usage: + ```html +

+ ``` +

+
+ + -
Without API key +

+ + ```javascript + manager.run({ + currLang: 'en', + services : { + googlemaps : { + embedUrl: 'https://www.google.com/maps/embed?pb={data-id}', + iframe: { + allow : 'picture-in-picture; fullscreen;' + }, + cookie: { + name: 'cc_maps' + }, + languages : { + en : { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of Google Maps.', + loadBtn: 'Load map', + loadAllBtn: 'Don\'t ask again' + } + } + } + } + }); + ``` + + Example usage: + ```html +

+ ``` +

+
+

+
+ + ### Available `data-ratio` From 8d81a9a6fedd823406e447a95b8fdefdccc30c69 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 10 Dec 2022 16:48:22 +0100 Subject: [PATCH 15/53] Update demo files --- demo/app.js | 57 +++-------------- demo/index.html | 163 +++++++++++++++++++++++++----------------------- 2 files changed, 95 insertions(+), 125 deletions(-) diff --git a/demo/app.js b/demo/app.js index 45f84ae..0e8f0e0 100644 --- a/demo/app.js +++ b/demo/app.js @@ -22,17 +22,21 @@ const isIframe = type === 'iframe'; - const timeout = isIframe + const timeout = isIframe ? 100 : 10; const maxWait = 500; - const objToCheck = prop - ? obj[prop] + const objToCheck = prop + ? obj[prop] : obj; - - const isDefined = () => typeof (isIframe && obj.querySelector(selector) || objToCheck) !== 'undefined' + + const isDefined = () => typeof + (isIframe + ? obj.querySelector(selector) + : objToCheck + ) !== 'undefined' let nIntervals = 0; @@ -158,7 +162,7 @@ languages : { 'en' : { notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', - loadBtn: 'Load video', + loadBtn: 'Load post', loadAllBtn: 'Don\'t ask again' } } @@ -182,47 +186,6 @@ } }, - facebook : { - embedUrl : "https://www.facebook.com/", - - onAccept: function(div, callback){ - - var fbVideo = document.createElement('div'); - fbVideo.className = "fb-post"; - fbVideo.setAttribute('data-href', this.embedUrl + div.dataset.id); - fbVideo.setAttribute('data-width', 'auto'); - div.appendChild(fbVideo); - - CookieConsent.loadScript('https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0').then(() => { - var c = document.querySelector(`[data-id="${div.dataset.id}"`).lastChild; - FB.XFBML.parse(document.querySelector(`[data-id="${div.dataset.id}"`)); - - manager.observe(fbVideo, function(iframe){ - console.log("wwwaaaa", iframe); - callback(iframe) - }); - - //FB.XFBML.parse(document.querySelector(`[data-id="${div.dataset.id}"`)); - - }); - }, - - onReject: function(iframe){ - iframe.parentNode.parentNode.remove(); - }, - - cookie : { - name : 'cc_facebook' - }, - - languages : { - 'en' : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitter.com.', - loadBtn: 'Load tweet', - loadAllBtn: 'Don\'t ask again' - } - } - } } }); diff --git a/demo/index.html b/demo/index.html index cf7fd35..f4e338f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,59 +1,115 @@ - - Test youtube videos cookie blocker + - - +

This is a test page


-

Demo with youtube & dailymotion config.

+

Demo with youtube & dailymotion config.



+ +
+
+

Youtube


-

Simple example

-
-
-
-
-

Example with autoscale width (fill width of parent container)

-
-
+
+

Youtube embed (autoscale)

+
+
+ data-autoscale> +
+ +
+
+

Youtube embed (autoscale, thumbnail & params)

+
+
+
+
+
+

Daily motion

+
+
-
+
+
+

Google Maps

+
+
+ +
+
+

Twitter tweets

+
Example with autoscale width (fill width of parent container) data-customwidget style="height: 285px;">
-

-
-

Example with custom thumbnail + params (video starts muted at 21s)

-
-
-
-
-
-

Daily motion video

-
-
-
- +

Facebook post


- -
-

-
-

Google Maps

-
-
- -
-
-

Twitch channel embed

-
-
+

Twitch channel embed

+
+


@@ -153,7 +160,7 @@

Twitch channel embed

Ciao

- + \ No newline at end of file From 71178e130a63a041f513ccc76c5d10a974402d6e Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 10 Dec 2022 16:53:01 +0100 Subject: [PATCH 16/53] Minor tweaks, code refactoring --- src/iframemanager.css | 36 ++++++++++++------------------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/src/iframemanager.css b/src/iframemanager.css index 3caf3a1..4d592d7 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -9,15 +9,13 @@ --im-btn-bg: rgba(0, 102, 219, 0.84); --im-btn-hover-bg: rgba(9, 80, 161, 0.89); - --im-overlay-bg: linear-gradient( - 14deg, - rgba(30,56,97,1) 0%, - rgba(206,220,233,0.1181022750897234) 100% - ) + --im-overlay-bg: linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.118) 100%) } div[data-service], +div[data-service] div, div[data-service] span, +div[data-service] iframe, div[data-service] a, div[data-service] button, div[data-service] ::before, @@ -125,7 +123,9 @@ div[data-service] .c-bg{ left: 0; opacity: .5; z-index: 1; - transition: opacity .3s ease, visibility .3s ease, transform .3s ease; + transition: opacity .3s ease, + visibility .3s ease, + transform .3s ease; } div[data-service] .c-bg::before{ @@ -136,10 +136,10 @@ div[data-service] .c-bg::before{ right: 0; bottom: 0; z-index: 1; - transition: opacity .3s ease, - visibility .3s ease; background: rgb(30,56,97); background: var(--im-overlay-bg); + transition: opacity .3s ease, + visibility .3s ease; } div[data-service] .c-bg-i{ @@ -245,6 +245,9 @@ div[data-service] .c-n-c .c-l-b::before{ border-left: 12px solid var(--im-btn-color); border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; + background-position: center; + background-repeat: no-repeat; + background-size: contain; } div[data-service] .c-n-c .c-la-b{ @@ -379,19 +382,4 @@ div[data-customwidget]{ min-width: 296px; transition: background-color .3s ease; transition-delay: .3s; -} - -/* div[data-service="twitter"] .c-n-c .c-l-b{ - background-color: #1DA1F2; -} - -div[data-service="twitter"] .c-n-c .c-l-b::before{ - border: none; - height: 15px; - width: 15px; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAATZJREFUOE+lk78rRWEcxj/PJhmUMhhkkMEgGyZSlCR27qRYFItRXWVQJsVm8A8w3GSQUpTcYlCUzXAzKPEnPHp1zunc0znXkW+9y/s+30/P98cr/hkqk2+7E1gA2oG6pIeQZ3v6B2B7T9JmHsz2LHAA9KXeq8AUsCTbE8AVcAGsS3pJg2zXgLkM/Bm4BL7SgKB5B3aBm5RNF5RZlbQdl3AHjGSET8AtsFIAGJVUDw76gS0gwCplmhppuiR9xg7OgZk/JDck9QZ9DJgEdoCxkpCapPk0YBA4jJJ7gIFfQOOSrhNAtAvLwFEJB/uSNmJd0ybaDk5CGWvAcA7sMeyEpEYTwHY3EJqyCCT0DOAUWJX0kb4PYwzzD3tQFCfAsaSzPEFSgu0OYCg6bcAb8CrpvlVfSv3GVoBvLzlh7eQqydQAAAAASUVORK5CYII=') -} - -.fb_iframe_widget_fluid span{ - width: 100%!important; -} */ \ No newline at end of file +} \ No newline at end of file From 349da442e42ffdc781c85fa92b52d370e1c022f1 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 10 Dec 2022 16:53:44 +0100 Subject: [PATCH 17/53] Improve iframe attributes via `data-iframe` --- src/iframemanager.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/iframemanager.js b/src/iframemanager.js index 3ec26d4..afa07a4 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -97,17 +97,20 @@ */ function getVideoProp(div){ - var dataset = div.dataset; - var attrs = {}; + const dataset = div.dataset; + + const iframeAttrs = {}; + const iframeAttrSelector = 'data-iframe-'; + + const iframeAttrNames = div.getAttributeNames() + .filter(attr => attr.slice(0, 12) === iframeAttrSelector) + .map(attr => attr.slice(12)); /** * Get all "data-iframe-* attributes */ - for(var prop in dataset){ - if(prop.lastIndexOf('iframe') === 0){ - attrs[prop.slice(6).toLowerCase()] = dataset[prop]; - } - } + for(const attrName of iframeAttrNames) + iframeAttrs[attrName] = div.getAttribute(iframeAttrSelector + attrName); return { _id: dataset.id, @@ -121,7 +124,7 @@ _hasIframe: false, _hasNotice: false, _showNotice : true, - _iframeAttributes: attrs + _iframeAttributes: iframeAttrs }; }; From 0bfb5ec84db30ce3cf6f7f85ae78184110ab9977 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 10 Dec 2022 16:54:01 +0100 Subject: [PATCH 18/53] Rebuild dist files --- dist/iframemanager.css | 2 +- dist/iframemanager.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/iframemanager.css b/dist/iframemanager.css index 946e588..a6b9799 100644 --- a/dist/iframemanager.css +++ b/dist/iframemanager.css @@ -1 +1 @@ -:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-btn-color:#fff;--im-btn-hover-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] :after,div[data-service] :before,div[data-service] a,div[data-service] button,div[data-service] span{all:unset;box-sizing:border-box}div[data-service] a,div[data-service] button,div[data-service] input{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .c-ld,div[data-service] .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .c-bg{opacity:.5;transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div[data-service] .c-bg,div[data-service] .c-bg:before{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .c-bg:before{background:#1e3861;background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);content:"";transition:opacity .3s ease,visibility .3s ease}div[data-service] .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .c-bg-i.loaded{opacity:1}div[data-service] .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .c-nt{opacity:0;visibility:hidden}div[data-service] .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative;transition:background-color .3s ease,opacity .3s ease;z-index:1}div[data-service] .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto 20px;max-width:420px;position:relative;z-index:1}div[data-service] .c-n-a,div[data-service] .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .c-t-cn{padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}div[data-service] .c-n-c .c-l-b,div[data-service] .c-n-c .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-service] .c-n-c .c-l-b:before{border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;padding:1em}div[data-service] .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);transition:none}div[data-service].c-h-n .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .c-n-t a{border-bottom:1px solid #5fb3fb;color:#5fb3fb;text-decoration:none}div[data-service] .c-n-t a:hover{border-color:transparent}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b{background:transparent}div[data-customwidget].c-h-b .c-ld{opacity:0;visibility:hidden}div[data-customwidget]>div{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top} \ No newline at end of file +:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-btn-color:#fff;--im-btn-hover-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] :after,div[data-service] :before,div[data-service] a,div[data-service] button,div[data-service] div,div[data-service] iframe,div[data-service] span{all:unset;box-sizing:border-box}div[data-service] a,div[data-service] button,div[data-service] input{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .c-ld,div[data-service] .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .c-bg{opacity:.5;transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div[data-service] .c-bg,div[data-service] .c-bg:before{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .c-bg:before{background:#1e3861;background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);content:"";transition:opacity .3s ease,visibility .3s ease}div[data-service] .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .c-bg-i.loaded{opacity:1}div[data-service] .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .c-nt{opacity:0;visibility:hidden}div[data-service] .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative;transition:background-color .3s ease,opacity .3s ease;z-index:1}div[data-service] .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto 20px;max-width:420px;position:relative;z-index:1}div[data-service] .c-n-a,div[data-service] .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .c-t-cn{padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}div[data-service] .c-n-c .c-l-b,div[data-service] .c-n-c .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-service] .c-n-c .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;padding:1em}div[data-service] .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);transition:none}div[data-service].c-h-n .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .c-n-t a{border-bottom:1px solid #5fb3fb;color:#5fb3fb;text-decoration:none}div[data-service] .c-n-t a:hover{border-color:transparent}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b{background:transparent}div[data-customwidget].c-h-b .c-ld{opacity:0;visibility:hidden}div[data-customwidget]>div{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top} \ No newline at end of file diff --git a/dist/iframemanager.js b/dist/iframemanager.js index a7ced3a..9963f18 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -!function(){'use strict';var n={},i=[],t=[],r=!1,o='',e=null,c=[],a=document,f=['onload','onerror','src'];function u(n){var i=n.dataset,t={};for(var r in i)0===r.lastIndexOf('iframe')&&(t[r.slice(6).toLowerCase()]=i[r]);return{i:i.id,t:i.title,o:i.thumbnail,u:i.params,v:'thumbnailpreload'in i,l:'autoscale'in i,m:n,h:null,p:!1,_:!1,g:!0,I:t}}function v(i,t){var r=n[i];if('IntersectionObserver'in window){var o=new IntersectionObserver((function(n){n.forEach((function(n){n.isIntersecting&&(s(t,r[n.target.dataset.index]),o.unobserve(n.target))}))}));r.forEach((function(n){o.observe(n.m)}))}else for(var e=0;e0?i.hasOwnProperty(o)?o:p(i)[0]:void 0},D={acceptService:function(n){if(r=!1,'all'===n)for(var i=c.length,t=0;t-1&&o(n,e[n]);function o(n,i){h(i.cookie.name)||function(n){var i=new Date,t=n.path||'/',r=n.expiration||182,o=n.sameSite||'Lax',e=n.domain||location.hostname;i.setTime(i.getTime()+24*r*60*60*1e3);var c=' expires='+i.toUTCString(),f=n.name+'=1;'+c+'; Path='+t+';';f+=' SameSite='+o+';',e.indexOf('.')>-1&&(f+=' Domain='+e+';'),'https:'===location.protocol&&(f+=' Secure;'),a.cookie=f}(i.cookie),T(n,i)}},rejectService:function(i){if('all'===i){r=!0;for(var t=c.length,o=0;o-1&&f(i,e[i]);function f(i,t){var r,o,e;h(t.cookie.name)&&(o=(r=t.cookie).path||'/',e=r.domain||location.hostname,a.cookie=r.name+'=; Path='+o+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(i,t){for(var r,o,e=n[i],c=e.length,a=0;an.slice(0,12)===r)).map((n=>n.slice(12)));for(const t of o)i[t]=n.getAttribute(r+t);return{t:t.id,i:t.title,o:t.thumbnail,u:t.params,v:'thumbnailpreload'in t,l:'autoscale'in t,m:n,h:null,p:!1,_:!1,g:!0,I:i}}function v(t,i){var r=n[t];if('IntersectionObserver'in window){var o=new IntersectionObserver((function(n){n.forEach((function(n){n.isIntersecting&&(s(i,r[n.target.dataset.index]),o.unobserve(n.target))}))}));r.forEach((function(n){o.observe(n.m)}))}else for(var e=0;e0?t.hasOwnProperty(o)?o:p(t)[0]:void 0},D={acceptService:function(n){if(r=!1,'all'===n)for(var t=c.length,i=0;i-1&&o(n,e[n]);function o(n,t){h(t.cookie.name)||function(n){var t=new Date,i=n.path||'/',r=n.expiration||182,o=n.sameSite||'Lax',e=n.domain||location.hostname;t.setTime(t.getTime()+24*r*60*60*1e3);var c=' expires='+t.toUTCString(),f=n.name+'=1;'+c+'; Path='+i+';';f+=' SameSite='+o+';',e.indexOf('.')>-1&&(f+=' Domain='+e+';'),'https:'===location.protocol&&(f+=' Secure;'),a.cookie=f}(t.cookie),T(n,t)}},rejectService:function(t){if('all'===t){r=!0;for(var i=c.length,o=0;o-1&&f(t,e[t]);function f(t,i){var r,o,e;h(i.cookie.name)&&(o=(r=i.cookie).path||'/',e=r.domain||location.hostname,a.cookie=r.name+'=; Path='+o+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(t,i){for(var r,o,e=n[t],c=e.length,a=0;a Date: Sun, 11 Dec 2022 02:08:39 +0100 Subject: [PATCH 19/53] Use service's name as default `cookie.name` --- src/iframemanager.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/iframemanager.js b/src/iframemanager.js index afa07a4..1b8189a 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -826,16 +826,23 @@ iframeDivs[serviceName].push(getVideoProp(foundDivs[j])); } - var currService = services[serviceName]; + const currService = services[serviceName]; - // check if cookie for current service is set - var cookie_name = currService.cookie.name; + /** + * Use service's name as cookie name, + * if no cookie.name is specified + */ + const { cookie } = currService; + !cookie && (currService.cookie = {}); + const cookieObj = currService.cookie; + + const cookieName = cookieObj.name || `im_${serviceName}`; + cookieObj.name = cookieName; - // get current service's cookie value - var cookie = getCookie(cookie_name); + const cookieExists = getCookie(cookieName); // if cookie is not set => show notice - if(cookie){ + if(cookieExists){ createAllNotices(serviceName, currService, true); hideAllNotices(serviceName, currService); }else{ From 1bf7699813b7f0b9e3c76b38fa1553507702fd39 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sun, 11 Dec 2022 02:10:37 +0100 Subject: [PATCH 20/53] Update demo example: cleanup & code refactoring --- demo/app.js | 383 +++++++++++++++++++++++------------------------- demo/index.html | 1 - 2 files changed, 180 insertions(+), 204 deletions(-) diff --git a/demo/app.js b/demo/app.js index 0e8f0e0..223f247 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,204 +1,181 @@ - 'use strict'; - - // get module - var manager = iframemanager(); - - /** - * @typedef {object} WaitConfig - * @property {'script' | 'iframe'} type, - * @property {any} obj - * @property {string} [prop] - * @property {string} [selector] - */ - - /** - * Wait until a property on the window object is available - * @param {WaitConfig} opts - * @returns {Promise} - */ - const waitFor = async (opts) => { - const {obj, type, prop, selector} = opts; - - const isIframe = type === 'iframe'; - - const timeout = isIframe - ? 100 - : 10; - - const maxWait = 500; - - const objToCheck = prop - ? obj[prop] - : obj; - - const isDefined = () => typeof - (isIframe - ? obj.querySelector(selector) - : objToCheck - ) !== 'undefined' - - let nIntervals = 0; - - return await new Promise(resolve => { - const interval = setInterval(() => { - const timedOut = !isIframe && ++nIntervals * timeout > maxWait; - if (isDefined() || timedOut) { - clearInterval(interval); - resolve(!timedOut); - } - }, timeout); - }); - }; - - manager.run({ - currLang: document.documentElement.getAttribute('lang'), - // autoLang: true, - services : { - youtube : { - embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}', - - iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', - }, - cookie : { - name : 'cc_youtube' - }, - 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.', - loadBtn: 'Load video', - loadAllBtn: 'Don\'t ask again' - } - } - }, - dailymotion : { - embedUrl: 'https://www.dailymotion.com/embed/video/{data-id}', - - // Use dailymotion api to obtain thumbnail - thumbnailUrl: function(id, setThumbnail){ - - var url = "https://api.dailymotion.com/video/" + id + "?fields=thumbnail_large_url"; - var xhttp = new XMLHttpRequest(); - - xhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - var src = JSON.parse(this.response).thumbnail_large_url; - setThumbnail(src); - } - }; - - xhttp.open("GET", url, true); - xhttp.send(); - }, - iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;' - }, - cookie : { - name : 'cc_dailymotion' - }, - languages : { - 'en' : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of dailymotion.com.', - loadBtn: 'Load video', - loadAllBtn: 'Don\'t ask again' - - } - } - }, - "twitch" : { - embedUrl: 'https://player.twitch.tv/?{data-id}&parent=localhost', - iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', - params: '',// optional - }, - cookie : { - name : 'cc_twitch' - }, - languages : { - 'en' : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', - loadBtn: 'Load stream', - loadAllBtn: 'Don\'t ask again' - } - } - }, - twitter : { - - onAccept: async (div, setIframe) => { - const twttrLoaded = await CookieConsent.loadScript('https://platform.twitter.com/widgets.js'); - const twttrReady = twttrLoaded && await waitFor({type: 'script', obj: window, prop: 'twttr'}); - const tweet = twttrReady && await twttr.widgets.createTweet(div.dataset.id, div); - tweet && setIframe(tweet.firstChild); - }, - - onReject: function(iframe){ - iframe.parentNode.remove(); - }, - - cookie : { - name : 'cc_twitter' - }, - - languages : { - 'en' : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitter.com.', - loadBtn: 'Load tweet', - loadAllBtn: 'Don\'t ask again' - } - } - }, - - "facebook-post" : { - embedUrl : 'https://www.facebook.com/plugins/post.php?{data-id}', - - iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen; web-share;', - params: '',// optional - }, - cookie : { - name : 'cc_facebook_post' - }, - languages : { - 'en' : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', - loadBtn: 'Load post', - loadAllBtn: 'Don\'t ask again' - } - } - }, - - googlemaps: { - - embedUrl: 'https://www.google.com/maps/embed?pb={data-id}', - iframe: { - allow : 'picture-in-picture; fullscreen;' - }, - cookie: { - name: 'cc_maps' - }, - languages: { - 'en' : { - notice: 'Notice message ...', - loadBtn: 'Load map', - loadAllBtn: 'Don\'t ask again' - } - } - }, - - } - }); - - - var accept_all = document.getElementById('accept-all'); - var reject_all = document.getElementById('reject-all'); - - accept_all.addEventListener('click', function(){ - console.log("clicked accept-all"); - manager.acceptService('all'); - }); - - reject_all.addEventListener('click', function(){ - console.log("clicked reject-all"); - manager.rejectService('all'); - }); +const im = iframemanager(); + +/** + * @typedef {object} WaitConfig + * @property {'script' | 'iframe'} type, + * @property {any} obj + * @property {string} [prop] + * @property {string} [selector] + */ + +/** + * Wait until a property on the window object is available + * @param {WaitConfig} opts + * @returns {Promise} + */ +const waitFor = async (opts) => { + const {obj, type, prop, selector} = opts; + + const isIframe = type === 'iframe'; + + const timeout = isIframe + ? 100 + : 10; + + const maxWait = 500; + + const objToCheck = prop + ? obj[prop] + : obj; + + const isDefined = () => typeof + (isIframe + ? obj.querySelector(selector) + : objToCheck + ) !== 'undefined' + + let nIntervals = 0; + + return await new Promise(resolve => { + const interval = setInterval(() => { + const timedOut = !isIframe && ++nIntervals * timeout > maxWait; + if (isDefined() || timedOut) { + clearInterval(interval); + resolve(!timedOut); + } + }, timeout); + }); +}; + +im.run({ + currLang: 'en', + // autoLang: true, + + services : { + + youtube : { + embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}', + + iframe : { + allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', + }, + + 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.', + loadBtn: 'Load video', + loadAllBtn: "Don't ask again" + } + } + }, + + dailymotion : { + embedUrl: 'https://www.dailymotion.com/embed/video/{data-id}', + + // Use dailymotion api to obtain thumbnail + thumbnailUrl: async (id, setThumbnail) => { + const url = `https://api.dailymotion.com/video/${id}?fields=thumbnail_large_url`; + const response = await (await fetch(url)).json(); + const thumbnailUlr = response?.thumbnail_large_url; + thumbnailUlr && setThumbnail(thumbnailUlr); + }, + + iframe : { + allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;' + }, + + languages : { + en : { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of dailymotion.com.', + loadBtn: 'Load video', + loadAllBtn: "Don't ask again" + } + } + }, + + twitch : { + embedUrl: 'https://player.twitch.tv/?{data-id}&parent=localhost', + + iframe : { + allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', + }, + + languages : { + en : { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', + loadBtn: 'Load stream', + loadAllBtn: "Don't ask again" + } + } + }, + + twitter : { + + onAccept: async (div, setIframe) => { + const twttrLoaded = await CookieConsent.loadScript('https://platform.twitter.com/widgets.js'); + const twttrReady = twttrLoaded && await waitFor({type: 'script', obj: window, prop: 'twttr'}); + const tweet = twttrReady && await twttr.widgets.createTweet(div.dataset.id, div); + tweet && setIframe(tweet.firstChild); + }, + + onReject: (iframe) => { + iframe.parentNode.remove(); + }, + + languages : { + en : { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitter.com.', + loadBtn: 'Load tweet', + loadAllBtn: "Don't ask again" + } + } + }, + + 'facebook-post' : { + embedUrl : 'https://www.facebook.com/plugins/post.php?{data-id}', + + iframe : { + allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen; web-share;', + }, + + languages : { + en : { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', + loadBtn: 'Load post', + loadAllBtn: "Don't ask again" + } + } + }, + + googlemaps: { + + embedUrl: 'https://www.google.com/maps/embed?pb={data-id}', + + iframe: { + allow : 'picture-in-picture; fullscreen;' + }, + + languages: { + en : { + notice: 'Notice message ...', + loadBtn: 'Load map', + loadAllBtn: "Don't ask again" + } + } + }, + + } +}); + + +const acceptAll = document.getElementById('accept-all'); +const rejectAll = document.getElementById('reject-all'); + +acceptAll.addEventListener('click', () => { + im.acceptService('all'); +}); + +rejectAll.addEventListener('click', () => { + im.rejectService('all'); +}); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index f4e338f..5bab599 100644 --- a/demo/index.html +++ b/demo/index.html @@ -157,7 +157,6 @@

Twitch channel embed



-

Ciao

From 23bac8b3975a3b4a440f314c531e43bbb7469e6c Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sun, 11 Dec 2022 02:11:33 +0100 Subject: [PATCH 21/53] Rebuild dist files --- dist/iframemanager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/iframemanager.js b/dist/iframemanager.js index 9963f18..7566e43 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -!function(){'use strict';var n={},t=[],i=[],r=!1,o='',e=null,c=[],a=document,f=['onload','onerror','src'];function u(n){const t=n.dataset,i={},r='data-iframe-',o=n.getAttributeNames().filter((n=>n.slice(0,12)===r)).map((n=>n.slice(12)));for(const t of o)i[t]=n.getAttribute(r+t);return{t:t.id,i:t.title,o:t.thumbnail,u:t.params,v:'thumbnailpreload'in t,l:'autoscale'in t,m:n,h:null,p:!1,_:!1,g:!0,I:i}}function v(t,i){var r=n[t];if('IntersectionObserver'in window){var o=new IntersectionObserver((function(n){n.forEach((function(n){n.isIntersecting&&(s(i,r[n.target.dataset.index]),o.unobserve(n.target))}))}));r.forEach((function(n){o.observe(n.m)}))}else for(var e=0;e0?t.hasOwnProperty(o)?o:p(t)[0]:void 0},D={acceptService:function(n){if(r=!1,'all'===n)for(var t=c.length,i=0;i-1&&o(n,e[n]);function o(n,t){h(t.cookie.name)||function(n){var t=new Date,i=n.path||'/',r=n.expiration||182,o=n.sameSite||'Lax',e=n.domain||location.hostname;t.setTime(t.getTime()+24*r*60*60*1e3);var c=' expires='+t.toUTCString(),f=n.name+'=1;'+c+'; Path='+i+';';f+=' SameSite='+o+';',e.indexOf('.')>-1&&(f+=' Domain='+e+';'),'https:'===location.protocol&&(f+=' Secure;'),a.cookie=f}(t.cookie),T(n,t)}},rejectService:function(t){if('all'===t){r=!0;for(var i=c.length,o=0;o-1&&f(t,e[t]);function f(t,i){var r,o,e;h(i.cookie.name)&&(o=(r=i.cookie).path||'/',e=r.domain||location.hostname,a.cookie=r.name+'=; Path='+o+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(t,i){for(var r,o,e=n[t],c=e.length,a=0;an.slice(0,12)===o)).map((n=>n.slice(12)));for(const t of r)i[t]=n.getAttribute(o+t);return{t:t.id,i:t.title,o:t.thumbnail,u:t.params,v:'thumbnailpreload'in t,l:'autoscale'in t,m:n,h:null,p:!1,_:!1,g:!0,k:i}}function v(t,i){var o=n[t];if('IntersectionObserver'in window){var r=new IntersectionObserver((function(n){n.forEach((function(n){n.isIntersecting&&(s(i,o[n.target.dataset.index]),r.unobserve(n.target))}))}));o.forEach((function(n){r.observe(n.m)}))}else for(var e=0;e0?t.hasOwnProperty(r)?r:p(t)[0]:void 0},D={acceptService:function(n){if(o=!1,'all'===n)for(var t=c.length,i=0;i-1&&r(n,e[n]);function r(n,t){h(t.cookie.name)||function(n){var t=new Date,i=n.path||'/',o=n.expiration||182,r=n.sameSite||'Lax',e=n.domain||location.hostname;t.setTime(t.getTime()+24*o*60*60*1e3);var c=' expires='+t.toUTCString(),a=n.name+'=1;'+c+'; Path='+i+';';a+=' SameSite='+r+';',e.indexOf('.')>-1&&(a+=' Domain='+e+';'),'https:'===location.protocol&&(a+=' Secure;'),f.cookie=a}(t.cookie),T(n,t)}},rejectService:function(t){if('all'===t){o=!0;for(var i=c.length,r=0;r-1&&a(t,e[t]);function a(t,i){var o,r,e;h(i.cookie.name)&&(r=(o=i.cookie).path||'/',e=o.domain||location.hostname,f.cookie=o.name+'=; Path='+r+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(t,i){for(var o,r,e=n[t],c=e.length,f=0;f Date: Sun, 11 Dec 2022 15:20:23 +0100 Subject: [PATCH 22/53] Update Readme.md: update config. examples --- README.md | 186 ++++++++++++++++++++++++------------------------------ 1 file changed, 84 insertions(+), 102 deletions(-) diff --git a/README.md b/README.md index 312ff39..e28cd59 100644 --- a/README.md +++ b/README.md @@ -108,9 +108,9 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or }, 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 hosted by a third party. By showing the external content you accept the terms and conditions of youtube.com.', loadBtn: 'Load video', - loadAllBtn: 'Don\'t ask again' + loadAllBtn: "Don't ask again" } } } @@ -149,9 +149,9 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or }, 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 hosted by a third party. By showing the external content you accept the terms and conditions of youtube.com.', loadBtn: 'Load video', - loadAllBtn: 'Don\'t ask again' + loadAllBtn: "Don't ask again" } } } @@ -246,7 +246,7 @@ All available options for the config. object: en : { notice: 'Html notice message', loadBtn: 'Load video', // Load only current iframe - loadAllBtn: 'Don\'t ask again' // Load all iframes configured with this service + set cookie + loadAllBtn: "Don't ask again" // Load all iframes configured with this service + set cookie } } }, @@ -324,74 +324,70 @@ Both `acceptService` and `rejectService` work the same way: 2. create/remove iframes ## Configuration examples --
How to embed youtube videos +-
Youtube

```javascript - // Example with youtube embed manager.run({ currLang: 'en', - services : { - youtube : { + services: { + youtube: { embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}', + thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg', - iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', - }, - cookie : { - name : 'cc_youtube' + + iframe: { + allow: 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', }, - 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.', + + 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.', loadBtn: 'Load video', - loadAllBtn: 'Don\'t ask again' + loadAllBtn: "Don't ask again" } } } } }); ``` + Example: + ```html + +

+ ```

--
How to embed dailymotion videos +-
Dailymotion

```javascript - // Example with dailymotion embed manager.run({ currLang: 'en', - services : { - dailymotion : { + services: { + dailymotion: { embedUrl: 'https://www.dailymotion.com/embed/video/{data-id}', - // Use dailymotion api to obtain thumbnail - thumbnailUrl: function(id, setThumbnail){ - - var url = "https://api.dailymotion.com/video/" + id + "?fields=thumbnail_large_url"; - var xhttp = new XMLHttpRequest(); - - xhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - var src = JSON.parse(this.response).thumbnail_large_url; - setThumbnail(src); - } - }; - - xhttp.open("GET", url, true); - xhttp.send(); - }, - iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', + thumbnailUrl: async (dataId, setThumbnail) => { + // Use dailymotion's API to fetch the thumbnail + const url = `https://api.dailymotion.com/video/${dataId}?fields=thumbnail_large_url`; + const response = await (await fetch(url)).json(); + const thumbnailUlr = response?.thumbnail_large_url; + thumbnailUlr && setThumbnail(thumbnailUlr); }, - cookie : { - name : 'cc_dailymotion' + + iframe: { + allow: 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', }, - languages : { - 'en' : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of dailymotion.com.', + + languages: { + en: { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of dailymotion.com.', loadBtn: 'Load video', - loadAllBtn: 'Don\'t ask again' + loadAllBtn: "Don't ask again" } } } @@ -400,43 +396,32 @@ Both `acceptService` and `rejectService` work the same way: ```

--
How to embed vimeo videos +-
Vimeo

```javascript - // Example with vimeo embed manager.run({ currLang: 'en', - services : { - vimeo : { + services: { + vimeo: { embedUrl: 'https://player.vimeo.com/video/{data-id}', - thumbnailUrl: function(id, setThumbnail){ - - var url = "https://vimeo.com/api/v2/video/" + id + ".json"; - var xhttp = new XMLHttpRequest(); - - xhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - var src = JSON.parse(this.response)[0].thumbnail_large; - setThumbnail(src); - } - }; - - xhttp.open("GET", url, true); - xhttp.send(); - }, - iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', + iframe: { + allow : 'fullscreen; picture-in-picture, allowfullscreen;', }, - cookie : { - name : 'cc_vimeo' + + thumbnailUrl: async (dataId, setThumbnail) => { + const url = `https://vimeo.com/api/v2/video/${dataId}.json`; + const response = await (await fetch(url)).json(); + const thumbnailUrl = response[0]?.thumbnail_large; + thumbnailUrl && setThumbnail(thumbnailUrl); }, - languages : { - 'en' : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of vimeo.com.', + + languages: { + en: { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of vimeo.com.', loadBtn: 'Load video', - loadAllBtn: 'Don\'t ask again' + loadAllBtn: "Don't ask again" } } } @@ -445,7 +430,7 @@ Both `acceptService` and `rejectService` work the same way: ```

--
How to embed twitch videos/streams/chats +-
Twitch

```javascript @@ -453,20 +438,19 @@ Both `acceptService` and `rejectService` work the same way: // IMPORTANT: replace "yourWebsite.com" with your own website manager.run({ currLang: 'en', - services : { - twitch : { + services: { + twitch: { embedUrl: 'https://player.twitch.tv/?{data-id}&parent=localhost&parent=yourWebsite.com', - iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', - }, - cookie : { - name : 'cc_twitch' + + iframe: { + allow: 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', }, - languages : { - 'en' : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', + + languages: { + en: { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', loadBtn: 'Load stream', - loadAllBtn: 'Don\'t ask again' + loadAllBtn: "Don't ask again" } } } @@ -475,7 +459,7 @@ Both `acceptService` and `rejectService` work the same way: ```

--
How to embed google maps +-
Google Maps

-

With API key @@ -484,20 +468,19 @@ Both `acceptService` and `rejectService` work the same way: ```javascript manager.run({ currLang: 'en', - services : { - googlemaps : { + services: { + googlemaps: { embedUrl: 'https://www.google.com/maps/embed/v1/place?key=API_KEY&q={data-id}', + iframe: { - allow : 'picture-in-picture; fullscreen;' + allow: 'picture-in-picture; fullscreen;' }, - cookie: { - name: 'cc_maps' - }, - languages : { - en : { - notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of Google Maps.', + + languages: { + en: { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of Google Maps.', loadBtn: 'Load map', - loadAllBtn: 'Don\'t ask again' + loadAllBtn: "Don't ask again" } } } @@ -505,7 +488,7 @@ Both `acceptService` and `rejectService` work the same way: }); ``` - Example usage: + Example: ```html
terms and conditions of Google Maps.', + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of Google Maps.', loadBtn: 'Load map', - loadAllBtn: 'Don\'t ask again' + loadAllBtn: "Don't ask again" } } } From 2492b5b10d20934415c20c943ad80f4f50435b53 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sun, 11 Dec 2022 15:20:43 +0100 Subject: [PATCH 23/53] Update demo example --- demo/app.js | 39 +++++++++++++++++++++++++++++++-------- demo/index.html | 24 ++++++++++++++++-------- 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/demo/app.js b/demo/app.js index 223f247..291abf7 100644 --- a/demo/app.js +++ b/demo/app.js @@ -63,7 +63,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 hosted by a third party. By showing the external content you accept the terms and conditions of youtube.com.', loadBtn: 'Load video', loadAllBtn: "Don't ask again" } @@ -77,8 +77,8 @@ im.run({ thumbnailUrl: async (id, setThumbnail) => { const url = `https://api.dailymotion.com/video/${id}?fields=thumbnail_large_url`; const response = await (await fetch(url)).json(); - const thumbnailUlr = response?.thumbnail_large_url; - thumbnailUlr && setThumbnail(thumbnailUlr); + const thumbnailUrl = response?.thumbnail_large_url; + thumbnailUrl && setThumbnail(thumbnailUrl); }, iframe : { @@ -87,7 +87,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 dailymotion.com.', + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of dailymotion.com.', loadBtn: 'Load video', loadAllBtn: "Don't ask again" } @@ -103,7 +103,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 twitch.com.', + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', loadBtn: 'Load stream', loadAllBtn: "Don't ask again" } @@ -125,7 +125,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 twitter.com.', + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitter.com.', loadBtn: 'Load tweet', loadAllBtn: "Don't ask again" } @@ -141,7 +141,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 twitch.com.', + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of twitch.com.', loadBtn: 'Load post', loadAllBtn: "Don't ask again" } @@ -158,13 +158,36 @@ im.run({ languages: { en : { - notice: 'Notice message ...', + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of Google Maps.', loadBtn: 'Load map', loadAllBtn: "Don't ask again" } } }, + vimeo: { + embedUrl: 'https://player.vimeo.com/video/{data-id}', + + iframe: { + allow : 'fullscreen; picture-in-picture, allowfullscreen;' + }, + + thumbnailUrl: async (dataId, setThumbnail) => { + const url = `https://vimeo.com/api/v2/video/${dataId}.json`; + const response = await (await fetch(url)).json(); + const thumbnailUrl = response[0]?.thumbnail_large; + thumbnailUrl && setThumbnail(thumbnailUrl); + }, + + languages: { + en : { + notice: 'This content is hosted by a third party. By showing the external content you accept the terms and conditions of vimeo.com.', + loadBtn: 'Load video', + loadAllBtn: "Don't ask again" + } + } + } + } }); diff --git a/demo/index.html b/demo/index.html index 5bab599..5e513e0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -58,13 +58,12 @@

Youtube

+ data-id="5b35haQV7tU">


-

Youtube embed (autoscale)

+

Youtube (autoscale)


Youtube embed (autoscale)

-

Youtube embed (autoscale, thumbnail & params)

+

Youtube (title, autoscale, thumbnail & params)



@@ -113,6 +112,7 @@

Twitter tweets

@@ -146,7 +146,7 @@

Facebook post



-

Twitch channel embed

+

Twitch


Twitch channel embed

+

Vimeo

+
+

- + \ No newline at end of file From 4f06699076038c04c3be1a172b2e781f70d14a35 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Mon, 12 Dec 2022 15:39:52 +0100 Subject: [PATCH 24/53] Code refactoring and minor tweaks Adopt const, let, arrow functions, for of, for in, destructuring and other more modern tools. Check if window exists before adding prop. --- dist/iframemanager.js | 2 +- src/iframemanager.js | 577 +++++++++++++++++++----------------------- 2 files changed, 263 insertions(+), 316 deletions(-) diff --git a/dist/iframemanager.js b/dist/iframemanager.js index 7566e43..b9add12 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -!function(){'use strict';var n={},t=[],i=[],o=!1,r='',e=null,c=[],f=document,a=['onload','onerror','src'];function u(n){const t=n.dataset,i={},o='data-iframe-',r=n.getAttributeNames().filter((n=>n.slice(0,12)===o)).map((n=>n.slice(12)));for(const t of r)i[t]=n.getAttribute(o+t);return{t:t.id,i:t.title,o:t.thumbnail,u:t.params,v:'thumbnailpreload'in t,l:'autoscale'in t,m:n,h:null,p:!1,_:!1,g:!0,k:i}}function v(t,i){var o=n[t];if('IntersectionObserver'in window){var r=new IntersectionObserver((function(n){n.forEach((function(n){n.isIntersecting&&(s(i,o[n.target.dataset.index]),r.unobserve(n.target))}))}));o.forEach((function(n){r.observe(n.m)}))}else for(var e=0;e0?t.hasOwnProperty(r)?r:p(t)[0]:void 0},D={acceptService:function(n){if(o=!1,'all'===n)for(var t=c.length,i=0;i-1&&r(n,e[n]);function r(n,t){h(t.cookie.name)||function(n){var t=new Date,i=n.path||'/',o=n.expiration||182,r=n.sameSite||'Lax',e=n.domain||location.hostname;t.setTime(t.getTime()+24*o*60*60*1e3);var c=' expires='+t.toUTCString(),a=n.name+'=1;'+c+'; Path='+i+';';a+=' SameSite='+r+';',e.indexOf('.')>-1&&(a+=' Domain='+e+';'),'https:'===location.protocol&&(a+=' Secure;'),f.cookie=a}(t.cookie),T(n,t)}},rejectService:function(t){if('all'===t){o=!0;for(var i=c.length,r=0;r-1&&a(t,e[t]);function a(t,i){var o,r,e;h(i.cookie.name)&&(r=(o=i.cookie).path||'/',e=o.domain||location.hostname,f.cookie=o.name+'=; Path='+r+'; Domain='+e+'; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'),function(t,i){for(var o,r,e=n[t],c=e.length,f=0;f{'use strict';let t={},n=[],o=[],e=!1,c='',i={},s=[],r={};const a=['onload','onerror','src'],f=t=>'function'==typeof t,l=t=>'string'==typeof t,d=t=>t&&Object.keys(t)||[],u=t=>{const n=t.dataset,o={},e='data-iframe-',c=t.getAttributeNames().filter((t=>t.slice(0,12)===e)).map((t=>t.slice(12)));for(const n of c)o[n]=t.getAttribute(e+n);return{t:n.id,o:n.title,i:n.thumbnail,l:n.params,u:'thumbnailpreload'in n,h:'autoscale'in n,m:t,p:null,v:!1,$:!1,_:!0,g:o}},b=(n,o)=>{const e=t[n];if('IntersectionObserver'in window){const t=new IntersectionObserver((n=>{n.forEach((n=>{n.isIntersecting&&(h(o,e[n.target.dataset.index]),t.unobserve(n.target))}))}));for(const n of e)t.observe(n.m)}},h=(t,n)=>{const o=t=>{n.p.style.backgroundImage=`url('${t}')`;const o=new Image;o.onload=function(){n.p.classList.add('loaded')},o.src=t};if(l(n.i))n.u&&g(n.i),''!==n.i&&o(n.i);else if(f(t))t(n.t,(t=>{_(t),n.u&&g(t),o(t)}));else if(l(t)){const e=t.replace('{data-id}',n.t);_(e),n.u&&g(e),o(e)}},m=(t,n)=>{if(t.v)return;if(t.v=!0,f(n.onAccept))return void n.onAccept(t.m,(n=>{t.k=n,t.v=!0,t.m.classList.add('c-h-b')}));t.k=k('iframe');const o=t.l||n.iframe&&n.iframe.params;let e=(n.embedUrl||'').replace('{data-id}',t.t);t.o&&(t.k.title=t.o),o&&('ap:'===o.substring(0,3)?e+=o.substring(3):e+='?'+o);const c=n.iframe;t.k.onload=function(){t.m.classList.add('c-h-b'),t.k.onload=void 0,c&&f(c.onload)&&c.onload(t.t,t.k)};for(const n in c)p(t.k,n,c[n]);for(const n in t.g)p(t.k,n,t.g[n]);t.k.src=e,x(t.m,t.k)},p=(t,n,o)=>{a.includes(n)||t.setAttribute(n,o)},v=t=>{t.m.classList.add('c-h-n'),t._=!1},w=t=>{t.m.classList.remove('c-h-n','c-h-b'),t._=!0},$=t=>(t=r.cookie.match(`(^|;)\\s*${t}\\s*=\\s*([^;]+)`))?t.pop():'',_=t=>{const o=t.split('://'),e=o[0];if('http'===e||'https'===e){const t=o[1]&&o[1].split('/')[0];if(t&&t!==location.hostname&&-1===n.indexOf(t)){const o=k('link');o.rel='preconnect',o.href=`${e}://${t}`,x(r.head,o),n.push(t)}}},g=t=>{if(t&&-1===o.indexOf(t)){const n=k('link');n.rel='preload',n.as='image',n.href=t,x(r.head,n),o.push(t)}},k=t=>r.createElement(t),I=()=>k('div'),O=()=>{const t=k('button');return t.type='button',t},S=(t,n)=>t.className=n,x=(t,n)=>t.appendChild(n),D=(n,o,e)=>{const i=t[n],s=o.languages;i.forEach((t=>{if(!t.$){const i=s[c].loadBtn,a=s[c].notice,f=s[c].loadAllBtn,d=r.createDocumentFragment(),u=I(),b=I(),h=I(),p=I(),w=()=>{v(t),m(t,o)};if(i){const t=O();t.textContent=i,S(t,'c-l-b'),t.addEventListener('click',w),x(p,t)}if(f){const t=O();t.textContent=f,S(t,'c-la-b'),t.addEventListener('click',(()=>{w(),E.acceptService(n)})),x(p,t)}const $=I(),_=I(),g=I(),D=I(),y=I();S($,'cc-text'),S(D,'c-bg-i'),t.p=D,S(g,'c-ld'),l(t.i)&&''===t.i||S(_,'c-bg');const P=t.o,T=r.createDocumentFragment();if(P){const t=k('span');S(t,'c-tl'),t.insertAdjacentHTML('beforeend',P),x(T,t)}x($,T),u&&$.insertAdjacentHTML('beforeend',a||''),x(b,$),S(y,'c-t-cn'),S(b,'c-n-t'),S(h,'c-n-c'),S(u,'c-nt'),S(p,'c-n-a'),x(y,b),x(y,p),x(h,y),x(u,h),x(_,D),x(d,u),(o.thumbnailUrl||t.i)&&x(d,_),x(d,g),e&&t.m.classList.add('c-h-n'),x(t.m,d),t.$=!0}}))},y=(n,o)=>{const c=t[n];if('IntersectionObserver'in window){const t=new IntersectionObserver((n=>{if(e)t.disconnect();else for(let e=0;e{const i=n[e].target;setTimeout((()=>{const t=i.dataset.index;m(c[t],o),v(c[t])}),50*e),t.unobserve(i)})(e)}));c.forEach((n=>{n.v||t.observe(n.m)}))}},P=(t,n)=>t in n?t:d(n).length>0?c in n?c:d(n)[0]:void 0,T=(t,n)=>{const{cookie:o}=n;$(o.name)||(t=>{const{hostname:n,protocol:o}=location,e=t.name,c=new Date,i=t.path||'/',s=864e5*(t.expiration||182),a=t.sameSite||'Lax',f=t.domain||n;c.setTime(c.getTime()+s);let l=e+'=1'+(0!==s?`; Expires=${c.toUTCString()}`:'')+`; Path=${i}`+`; SameSite=${a}`;f.indexOf('.')>-1&&(l+=`; Domain=${f}`),'https:'===o&&(l+='; Secure'),r.cookie=l})(o),y(t,n)},j=(n,o)=>{const{cookie:e}=o;$(e.name)&&(t=>{const n=t.name,o=t.path||'/',e=t.domain||location.hostname;r.cookie=`${n}=; Path=${o}; Domain=${e}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(e),((n,o)=>{const e=t[n];for(let t=0;t{var n;e[t].v&&(f(o.onReject)?(o.onReject(e[t].k),e[t].v=!1):((n=e[t]).k.parentNode.removeChild(n.k),n.v=!1)),w(e[t])})(t)})(n,o)},E={acceptService:t=>{if(e=!1,'all'===t)for(const t of s)T(t,i[t]);else s.includes(t)&&T(t,i[t])},rejectService:t=>{if('all'===t){e=!0;for(const t of s)j(t,i[t])}else s.includes(t)&&j(t,i[t])},run:n=>{if(r=document,i=n.services,s=d(i),0===s.length)return;c=n.currLang;const o=i[s[0]].languages;!0===n.autoLang?c=P(navigator.language.slice(0,2).toLowerCase(),o):l(n.currLang)&&(c=P(n.currLang,o));for(const n of s){t[n]=[];const o=r.querySelectorAll(`div[data-service="${n}"]`),e=o.length;if(0===e)continue;for(let c=0;cE)})(); \ No newline at end of file diff --git a/src/iframemanager.js b/src/iframemanager.js index 1b8189a..1c772af 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -3,7 +3,7 @@ * Author Orest Bida * Released under the MIT License */ -(function(){ +(() => { 'use strict'; /** @@ -33,6 +33,7 @@ * @property {string} path * @property {string} domain * @property {string} sameSite + * @property {number} expiration */ /** @@ -47,12 +48,12 @@ * @property {string} embedUrl * @property {IframeProp} [iframe] * @property {CookieStructure} cookie - * @property {Language} languages + * @property {Object.} languages * @property {Function} [onAccept] * @property {Function} [onReject] */ - var + let /** * @type {Object.} @@ -75,30 +76,41 @@ /** * @type {Object.} */ - services = null, + services = {}, /** * @type {string[]} */ serviceNames = [], - doc = document, - /** - * Prevent direct use of the following - * props. in the `iframe` element to avoid - * potential issues + * @type {Document} */ - disallowedProps = ['onload', 'onerror', 'src']; + doc = {}; + + /** + * Prevent direct use of the following + * props. in the `iframe` element to avoid + * potential issues + */ + const disallowedProps = ['onload', 'onerror', 'src']; + + const isFunction = el => typeof el === 'function'; + const isString = el => typeof el === 'string'; + const getBrowserLang = () => navigator.language.slice(0, 2).toLowerCase(); + + /** + * @returns {string[]} + */ + const getKeys = obj => obj && Object.keys(obj) || []; /** * @param {HTMLDivElement} div * @returns {IframeObj} */ - function getVideoProp(div){ + const getVideoProp = (div) => { const dataset = div.dataset; - const iframeAttrs = {}; const iframeAttrSelector = 'data-iframe-'; @@ -133,13 +145,13 @@ * @param {string} serviceName * @param {string} thumbnailUrl */ - function lazyLoadThumnails(serviceName, thumbnailUrl){ + const lazyLoadThumnails = (serviceName, thumbnailUrl) => { - var videos = iframeDivs[serviceName]; + const videos = iframeDivs[serviceName]; if ("IntersectionObserver" in window) { - var thumbnailObserver = new IntersectionObserver(function(entries) { - entries.forEach(function(entry){ + const thumbnailObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { if(entry.isIntersecting){ // true index of the video in the array relative to current service loadThumbnail(thumbnailUrl, videos[entry.target.dataset.index]); @@ -148,13 +160,8 @@ }); }); - videos.forEach(function(video) { + for(const video of videos) { thumbnailObserver.observe(video._div); - }); - }else{ - // Fallback for old browsers - for(var i=0; i { + + const loadBackgroundImage = (src) => { + video._backgroundDiv.style.backgroundImage = `url('${src}')`; + + const img = new Image(); + + img.onload = function() { + video._backgroundDiv.classList.add('loaded'); + }; + + img.src = src; + } // Set custom thumbnail if provided - if(typeof video._thumbnail === 'string'){ + if(isString(video._thumbnail)){ video._thumbnailPreload && preloadThumbnail(video._thumbnail); video._thumbnail !== '' && loadBackgroundImage(video._thumbnail); }else{ - if(typeof url === "function"){ + if(isFunction(url)){ - url(video._id, function(src){ + url(video._id, (src) => { preconnect(src); video._thumbnailPreload && preloadThumbnail(src); loadBackgroundImage(src); }); - }else if(typeof url === 'string'){ - var src = url.replace('{data-id}', video._id); + }else if(isString(url)){ + const src = url.replace('{data-id}', video._id); preconnect(src); video._thumbnailPreload && preloadThumbnail(src); loadBackgroundImage(src); } } - function loadBackgroundImage(src){ - video._backgroundDiv.style.backgroundImage = "url('"+src+"')"; - - var img = new Image(); - img.onload = function(){ - video._backgroundDiv.classList.add('loaded'); - }; - - img.src = src; - } }; /** @@ -206,7 +215,7 @@ * @param {IframeObj} video * @param {Service} service */ - function createIframe(video, service) { + const createIframe = (video, service) => { // Create iframe only if doesn't alredy have one if(video._hasIframe) @@ -214,10 +223,10 @@ video._hasIframe = true; - if(typeof service.onAccept === 'function'){ + if(isFunction(service.onAccept)){ // Let the onAccept method create the iframe - service.onAccept(video._div, function(iframe){ + service.onAccept(video._div, (iframe) => { video._iframe = iframe; video._hasIframe = true; video._div.classList.add('c-h-b'); @@ -227,11 +236,12 @@ } video._iframe = createNode('iframe'); - var iframeParams = video._params || (service.iframe && service.iframe.params); + + const iframeParams = video._params || (service.iframe && service.iframe.params); // Replace data-id with valid resource id - var embedUrl = service.embedUrl || ''; - var src = embedUrl.replace('{data-id}', video._id); + const embedUrl = service.embedUrl || ''; + let src = embedUrl.replace('{data-id}', video._id); video._title && (video._iframe.title = video._title); @@ -244,29 +254,29 @@ } } - var iframeProps = service.iframe; + const iframeProps = service.iframe; // When iframe is loaded => hide background image - video._iframe.onload = function(){ + video._iframe.onload = function() { video._div.classList.add('c-h-b'); video._iframe.onload = undefined; iframeProps - && typeof iframeProps.onload === 'function' + && isFunction(iframeProps.onload) && iframeProps.onload(video._id, video._iframe); }; /** * Add global internal attributes */ - for(var key in iframeProps){ + for(const key in iframeProps){ setAttribute(video._iframe, key, iframeProps[key]) } /** * Add all data-attr-* attributes (iframe specific) */ - for(var attr in video._iframeAttributes){ + for(const attr in video._iframeAttributes){ setAttribute(video._iframe, attr, video._iframeAttributes[attr]) } @@ -280,7 +290,7 @@ * @param {string} attrKey * @param {string} attrValue */ - function setAttribute(el, attrKey, attrValue){ + const setAttribute = (el, attrKey, attrValue) => { if(!disallowedProps.includes(attrKey)) el.setAttribute(attrKey, attrValue); } @@ -289,7 +299,7 @@ * Remove iframe HTMLElement from div * @param {IframeObj} video */ - var removeIframe = function(video){ + const removeIframe = (video) => { video._iframe.parentNode.removeChild(video._iframe); video._hasIframe = false; }; @@ -298,7 +308,7 @@ * Remove necessary classes to hide notice * @param {IframeObj} video */ - function hideNotice(video){ + const hideNotice = (video) => { video._div.classList.add('c-h-n'); video._showNotice = false; }; @@ -307,7 +317,7 @@ * Add necessary classes to show notice * @param {IframeObj} video */ - var showNotice = function(video){ + const showNotice = (video) => { video._div.classList.remove('c-h-n', 'c-h-b'); video._showNotice = true; }; @@ -317,36 +327,41 @@ * @param {string} a cookie name * @returns {string} cookie value */ - var getCookie = function(a) { - return (a = doc.cookie.match("(^|;)\\s*" + a + "\\s*=\\s*([^;]+)")) ? a.pop() : ''; + const getCookie = (a) => { + return (a = doc.cookie.match(`(^|;)\\s*${a}\\s*=\\s*([^;]+)`)) + ? a.pop() + : ''; }; /** * Set cookie based on given object * @param {CookieStructure} cookie */ - var setCookie = function(cookie) { + const setCookie = (cookie) => { - var date = new Date(); - var path = cookie.path || '/'; - var expiration = cookie.expiration || 182; - var sameSite = cookie.sameSite || 'Lax'; - var domain = cookie.domain || location.hostname; + const { hostname, protocol } = location; + const name = cookie.name; + const value = '1'; + const date = new Date(); + const path = cookie.path || '/'; + const expiration = (cookie.expiration || 182) * 86400000; + const sameSite = cookie.sameSite || 'Lax'; + const domain = cookie.domain || hostname; - date.setTime(date.getTime() + (1000 * ( expiration * 24 * 60 * 60))); - var expires = ' expires=' + date.toUTCString(); + date.setTime(date.getTime() + expiration); - var cookieStr = cookie.name + '=1;' + expires + '; Path=' + path + ';'; - cookieStr += ' SameSite=' + sameSite + ';'; + let cookieStr = name + '=' + + value + + (expiration !== 0 ? `; Expires=${date.toUTCString()}` : '') + + `; Path=${path}` + + `; SameSite=${sameSite}`; // assures cookie works with localhost (=> don't specify domain if on localhost) - if(domain.indexOf('.') > -1){ - cookieStr += ' Domain=' + domain + ';'; - } + if(domain.indexOf('.') > -1) + cookieStr += `; Domain=${domain}`; - if(location.protocol === 'https:') { - cookieStr += ' Secure;'; - } + if(protocol === 'https:') + cookieStr += '; Secure'; doc.cookie = cookieStr; }; @@ -355,44 +370,37 @@ * Delete cookie by name & path * @param {CookieStructure} cookie */ - var eraseCookie = function(cookie) { - var path = cookie.path || '/'; - var domain = cookie.domain || location.hostname; - var expires = 'Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; - - doc.cookie = cookie.name +'=; Path='+ path +'; Domain=' + domain + '; ' + expires; - }; + const eraseCookie = (cookie) => { + const name = cookie.name; + const path = cookie.path || '/'; + const domain = cookie.domain || location.hostname; + const expires = 'Thu, 01 Jan 1970 00:00:01 GMT'; - /** - * Get all prop. keys defined inside object - * @param {any} obj - */ - var getKeys = function(obj){ - return obj && Object.keys(obj) || []; + doc.cookie = `${name}=; Path=${path}; Domain=${domain}; Expires=${expires};`; }; /** * Add link rel="preconnect" * @param {string} _url */ - var preconnect = function(_url){ - var url = _url.split('://'); - var protocol = url[0]; + const preconnect = (_url) => { + const url = _url.split('://'); + const protocol = url[0]; // if valid protocol if( protocol === 'http' || protocol === 'https' ){ - var domain = (url[1] && url[1].split('/')[0]) || false; + const domain = url[1] && url[1].split('/')[0]; // if not current domain if(domain && domain !== location.hostname){ if(preconnects.indexOf(domain) === -1){ - var l = createNode('link'); - l.rel = 'preconnect'; - l.href = protocol + '://' + domain; - appendChild(doc.head, l); + const link = createNode('link'); + link.rel = 'preconnect'; + link.href = `${protocol}://${domain}`; + appendChild(doc.head, link); preconnects.push(domain); } } @@ -403,13 +411,13 @@ * Add link rel="preload" * @param {string} url */ - function preloadThumbnail(url){ + const preloadThumbnail = (url) => { if(url && preloads.indexOf(url) === -1){ - var l = createNode('link'); - l.rel = 'preload'; - l.as = 'image'; - l.href = url; - appendChild(doc.head, l); + const link = createNode('link'); + link.rel = 'preload'; + link.as = 'image'; + link.href = url; + appendChild(doc.head, link); preloads.push(url); } } @@ -417,23 +425,18 @@ /** * Create and return HTMLElement based on specified type * @param {string} type - * @returns {HTMLElement} */ - function createNode(type){ - return doc.createElement(type); - } + const createNode = (type) => doc.createElement(type); /** * @returns {HTMLDivElement} */ - function createDiv() { - return createNode('div'); - } + const createDiv = () => createNode('div'); /** * @returns {HTMLButtonElement} */ - function createButton() { + const createButton = () => { const btn = createNode('button'); btn.type = 'button'; return btn; @@ -443,17 +446,13 @@ * @param {HTMLElement} el * @param {string} className */ - function setClassName(el, className){ - el.className = className; - } + const setClassName = (el, className) => el.className = className; /** * @param {HTMLElement} parent * @param {HTMLElement} child */ - function appendChild(parent, child){ - parent.appendChild(child); - } + const appendChild = (parent, child) => parent.appendChild(child); /** * Create all notices relative to the specified service @@ -461,114 +460,108 @@ * @param {Service} service * @param {boolean} hidden */ - var createAllNotices = function(serviceName, service, hidden){ + const createAllNotices = (serviceName, service, hidden) => { // get number of iframes of current service - var _iframes = iframeDivs[serviceName]; - var nIframes = _iframes.length; - var languages = service.languages; + const videos = iframeDivs[serviceName]; + const languages = service.languages; - // for each iframe - for(var i=0; i { - var video = _iframes[i]; - if(!video._hasNotice){ - var loadBtnText = languages[currLang].loadBtn; - var noticeText = languages[currLang].notice; - var loadAllBtnText = languages[currLang].loadAllBtn; + if(!video._hasNotice){ + const loadBtnText = languages[currLang].loadBtn; + const noticeText = languages[currLang].notice; + const loadAllBtnText = languages[currLang].loadAllBtn; - var fragment = doc.createDocumentFragment(); - var notice = createDiv(); - var span = createDiv(); - var innerDiv = createDiv(); + const fragment = doc.createDocumentFragment(); + const notice = createDiv(); + const span = createDiv(); + const innerDiv = createDiv(); + const buttons = createDiv(); - if(loadBtnText){ - var load_button = createButton(); - load_button.textContent = loadBtnText; - setClassName(load_button, 'c-l-b'); + const showVideo = () => { + hideNotice(video); + createIframe(video, service); + }; - load_button.addEventListener('click', showVideo); - } - - if(loadAllBtnText){ - var load_all_button = createButton() - load_all_button.textContent = loadAllBtnText; - setClassName(load_all_button, 'c-la-b'); + if(loadBtnText){ + const load_button = createButton(); + load_button.textContent = loadBtnText; + setClassName(load_button, 'c-l-b'); - load_all_button.addEventListener('click', function(){ - showVideo(); - api.acceptService(serviceName); - }); - } + load_button.addEventListener('click', showVideo); + appendChild(buttons, load_button) + } - var notice_text = createDiv(); - var ytVideoBackground = createDiv(); - var loaderBg = createDiv(); - var ytVideoBackgroundInner = createDiv(); - var notice_text_container = createDiv(); - var buttons = createDiv(); + if(loadAllBtnText){ + const load_all_button = createButton() + load_all_button.textContent = loadAllBtnText; + setClassName(load_all_button, 'c-la-b'); - setClassName(notice_text, 'cc-text'); - setClassName(ytVideoBackgroundInner, 'c-bg-i'); + load_all_button.addEventListener('click', () => { + showVideo(); + api.acceptService(serviceName); + }); - video._backgroundDiv = ytVideoBackgroundInner; - setClassName(loaderBg, 'c-ld'); + appendChild(buttons, load_all_button); + } - if(typeof video._thumbnail !== 'string' || video._thumbnail !== ''){ - setClassName(ytVideoBackground, 'c-bg'); - } + const notice_text = createDiv(); + const ytVideoBackground = createDiv(); + const loaderBg = createDiv(); + const ytVideoBackgroundInner = createDiv(); + const notice_text_container = createDiv(); - var iframeTitle = video._title; - var fragment_2 = doc.createDocumentFragment(); + setClassName(notice_text, 'cc-text'); + setClassName(ytVideoBackgroundInner, 'c-bg-i'); - if(iframeTitle) { - var title_span = createNode('span'); - setClassName(title_span, 'c-tl'); - title_span.insertAdjacentHTML('beforeend', iframeTitle); - appendChild(fragment_2, title_span); - } + video._backgroundDiv = ytVideoBackgroundInner; + setClassName(loaderBg, 'c-ld'); - appendChild(notice_text, fragment_2); - notice && notice_text.insertAdjacentHTML('beforeend', noticeText || ""); - appendChild(span, notice_text); + if(!isString(video._thumbnail) || video._thumbnail !== ''){ + setClassName(ytVideoBackground, 'c-bg'); + } - setClassName(notice_text_container, 'c-t-cn'); - setClassName(span, 'c-n-t'); - setClassName(innerDiv, 'c-n-c'); - setClassName(notice, 'c-nt'); + const iframeTitle = video._title; + const fragment_2 = doc.createDocumentFragment(); - setClassName(buttons, 'c-n-a'); + if(iframeTitle) { + const title_span = createNode('span'); + setClassName(title_span, 'c-tl'); + title_span.insertAdjacentHTML('beforeend', iframeTitle); + appendChild(fragment_2, title_span); + } - loadBtnText && appendChild(buttons, load_button); - loadAllBtnText && appendChild(buttons, load_all_button); + appendChild(notice_text, fragment_2); + notice && notice_text.insertAdjacentHTML('beforeend', noticeText || ""); + appendChild(span, notice_text); - appendChild(notice_text_container, span); - appendChild(notice_text_container, buttons); + setClassName(notice_text_container, 'c-t-cn'); + setClassName(span, 'c-n-t'); + setClassName(innerDiv, 'c-n-c'); + setClassName(notice, 'c-nt'); + setClassName(buttons, 'c-n-a'); - appendChild(innerDiv, notice_text_container); - appendChild(notice, innerDiv); - function showVideo(){ - hideNotice(video); - createIframe(video, service); - } + appendChild(notice_text_container, span); + appendChild(notice_text_container, buttons); + appendChild(innerDiv, notice_text_container); + appendChild(notice, innerDiv); - appendChild(ytVideoBackground, ytVideoBackgroundInner); - appendChild(fragment, notice); - (service.thumbnailUrl || video._thumbnail) && appendChild(fragment, ytVideoBackground); - appendChild(fragment, loaderBg); + appendChild(ytVideoBackground, ytVideoBackgroundInner); + appendChild(fragment, notice); + (service.thumbnailUrl || video._thumbnail) && appendChild(fragment, ytVideoBackground); + appendChild(fragment, loaderBg); - hidden && video._div.classList.add('c-h-n'); + hidden && video._div.classList.add('c-h-n'); - // Avoid reflow with fragment (only 1 appendChild) - appendChild(video._div, fragment); - video._hasNotice = true; - } - })(i); - } + // Avoid reflow with fragment (only 1 appendChild) + appendChild(video._div, fragment); + video._hasNotice = true; + } + }); }; /** @@ -577,42 +570,39 @@ * @param {string} serviceName * @param {Service} service */ - var hideAllNotices = function(serviceName, service){ + const hideAllNotices = (serviceName, service) => { // get number of iframes of current service - var videos = iframeDivs[serviceName]; + const videos = iframeDivs[serviceName]; if ('IntersectionObserver' in window) { - var observer = new IntersectionObserver(function(entries) { + const observer = new IntersectionObserver((entries) => { if(stopObserver){ observer.disconnect(); return; } - for(var i=0; i { + /** + * @type {HTMLDivElement} + */ + const target = entries[i].target; + setTimeout(() => { + const dataIndex = target.dataset.index; + createIframe(videos[dataIndex], service); + hideNotice(videos[dataIndex]); + }, i*50); + observer.unobserve(target); })(i); } } }); - videos.forEach(function(video){ + videos.forEach((video) => { if(!video._hasIframe) observer.observe(video._div); }); - }else{ - for(var i=0; i { // get number of iframes of current service - var videos = iframeDivs[serviceName]; - var nDivs = videos.length; + const videos = iframeDivs[serviceName]; - for(var i=0; i { // if doesn't have iframe => create it if(videos[i]._hasIframe){ - if(typeof service.onReject === 'function'){ + if(isFunction(service.onReject)){ service.onReject(videos[i]._iframe); videos[i]._hasIframe = false; }else{ removeIframe(videos[i]); } } - showNotice(videos[index]); + showNotice(videos[i]); })(i); } }; @@ -651,11 +640,11 @@ * @param {Object} allLanguages * @returns {string} language */ - var getValidatedLanguage = function(lang, allLanguages){ - if(allLanguages.hasOwnProperty(lang)){ + const getValidatedLanguage = (lang, allLanguages) => { + if(lang in allLanguages){ return lang; }else if(getKeys(allLanguages).length > 0){ - if(allLanguages.hasOwnProperty(currLang)){ + if(currLang in allLanguages){ return currLang ; }else{ return getKeys(allLanguages)[0]; @@ -664,38 +653,48 @@ }; /** - * Get current client's browser language - * @returns {string} browser language + * @param {string} serviceName + * @param {Service} service + */ + const acceptHelper = (serviceName, service) => { + const { cookie } = service; + + if(!getCookie(cookie.name)) + setCookie(cookie); + + hideAllNotices(serviceName, service); + }; + + /** + * @param {string} serviceName + * @param {Service} service */ - var getBrowserLang = function(){ - return navigator.language.slice(0, 2).toLowerCase() + const rejectHelper = (serviceName, service) => { + const { cookie } = service; + + if(getCookie(cookie.name)) + eraseCookie(cookie); + + showAllNotices(serviceName, service); }; - var api = { + const api = { /** * 1. Set cookie (if not alredy set) * 2. show iframes (relative to the specified service) * @param {string} serviceName */ - acceptService : function(serviceName){ + acceptService : (serviceName) => { stopObserver = false; if(serviceName === 'all'){ - var length = serviceNames.length; - for(var i=0; i -1){ - acceptHelper(serviceName, services[serviceName]); - } - function acceptHelper(serviceName, service){ - if(!getCookie(service.cookie.name)){ - setCookie(service.cookie); - } - hideAllNotices(serviceName, service); + for(const name of serviceNames) + acceptHelper(name, services[name]); + + }else if(serviceNames.includes(serviceName)){ + acceptHelper(serviceName, services[serviceName]); } }, @@ -703,61 +702,24 @@ * 1. set cookie * 2. hide all notices * 3. how iframes (relative to the specified service) - * @param {string} service_name + * @param {string} serviceName */ - rejectService : function(serviceName){ + rejectService : (serviceName) => { + if(serviceName === 'all'){ stopObserver = true; - var length = serviceNames.length; - for(var i=0; i -1){ - rejectHelper(serviceName, services[serviceName]); - } - } - function rejectHelper(serviceName, service){ - if(getCookie(service.cookie.name)){ - eraseCookie(service.cookie); - } + for(const name of serviceNames) + rejectHelper(name, services[name]); - showAllNotices(serviceName, service); + }else if(serviceNames.includes(serviceName)){ + rejectHelper(serviceName, services[serviceName]); } }, - observe : function(target, callback){ - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if(mutation.type === 'childList'){ - setTimeout(function(){ - callback(target.querySelector('iframe')); - }, 300); - - // later, you can stop observing - observer.disconnect(); - return; - } - }); - }); - - if(target.querySelector('iframe')){ - setTimeout(function(){ - callback(target.querySelector('iframe')); - }, 300); - }else{ - // pass in the target node, as well as the observer options - observer.observe(target, { - attributes: false, - childList: true, - subtree: false - }); - } - }, + run : (_config) => { - run : function(_config) { + doc = document; /** * Object with all services config. */ @@ -768,35 +730,21 @@ */ serviceNames = getKeys(services); - /** - * Number of services - */ - var nServices = serviceNames.length; - - // if there are no services => don't do anything - if(nServices === 0){ + if(serviceNames.length === 0) return; - } // Set curr lang currLang = _config.currLang; - var languages = services[serviceNames[0]].languages; + const languages = services[serviceNames[0]].languages; if(_config.autoLang === true){ currLang = getValidatedLanguage(getBrowserLang(), languages); - }else{ - if(typeof _config.currLang === 'string'){ - currLang = getValidatedLanguage(_config.currLang, languages); - } + }else if(isString(_config.currLang)){ + currLang = getValidatedLanguage(_config.currLang, languages); } // for each service - for(var i=0; i} */ - var foundDivs = doc.querySelectorAll('div[data-service="' + serviceName + '"]'); + const foundDivs = doc.querySelectorAll(`div[data-service="${serviceName}"]`); /** * number of iframes with current service */ - var nDivs = foundDivs.length; + const nDivs = foundDivs.length; // if no iframes found => go to next service if(nDivs === 0){ @@ -821,7 +769,7 @@ } // add each iframe to array of iframes of the current service - for(var j=0; j api; + } })(); \ No newline at end of file From 4dcd11115d1d9cab30a8c95390df7595653cd538 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Tue, 3 Jan 2023 14:57:58 +0100 Subject: [PATCH 25/53] Update dev. dependencies --- package.json | 2 +- pnpm-lock.yaml | 236 ++++++++++++++++++++++++------------------------- 2 files changed, 119 insertions(+), 119 deletions(-) diff --git a/package.json b/package.json index dca442a..473acb5 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "homepage": "https://github.com/orestbida/iframemanager#readme", "devDependencies": { "cssnano": "^5.1.14", - "postcss": "^8.4.19", + "postcss": "^8.4.20", "postcss-cli": "^10.1.0", "postcss-custom-properties": "^12.1.11", "terser": "^5.16.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 93ec9d0..6668c87 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,16 +2,16 @@ lockfileVersion: 5.4 specifiers: cssnano: ^5.1.14 - postcss: ^8.4.19 + postcss: ^8.4.20 postcss-cli: ^10.1.0 postcss-custom-properties: ^12.1.11 terser: ^5.16.1 devDependencies: - cssnano: 5.1.14_postcss@8.4.19 - postcss: 8.4.19 - postcss-cli: 10.1.0_postcss@8.4.19 - postcss-custom-properties: 12.1.11_postcss@8.4.19 + cssnano: 5.1.14_postcss@8.4.20 + postcss: 8.4.20 + postcss-cli: 10.1.0_postcss@8.4.20 + postcss-custom-properties: 12.1.11_postcss@8.4.20 terser: 5.16.1 packages: @@ -197,13 +197,13 @@ packages: engines: {node: '>= 10'} dev: true - /css-declaration-sorter/6.3.1_postcss@8.4.19: + /css-declaration-sorter/6.3.1_postcss@8.4.20: resolution: {integrity: sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==} engines: {node: ^10 || ^12 || >=14} peerDependencies: postcss: ^8.0.9 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 dev: true /css-select/4.3.0: @@ -235,62 +235,62 @@ packages: hasBin: true dev: true - /cssnano-preset-default/5.2.13_postcss@8.4.19: + /cssnano-preset-default/5.2.13_postcss@8.4.20: resolution: {integrity: sha512-PX7sQ4Pb+UtOWuz8A1d+Rbi+WimBIxJTRyBdgGp1J75VU0r/HFQeLnMYgHiCAp6AR4rqrc7Y4R+1Rjk3KJz6DQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - css-declaration-sorter: 6.3.1_postcss@8.4.19 - cssnano-utils: 3.1.0_postcss@8.4.19 - postcss: 8.4.19 - postcss-calc: 8.2.4_postcss@8.4.19 - postcss-colormin: 5.3.0_postcss@8.4.19 - postcss-convert-values: 5.1.3_postcss@8.4.19 - postcss-discard-comments: 5.1.2_postcss@8.4.19 - postcss-discard-duplicates: 5.1.0_postcss@8.4.19 - postcss-discard-empty: 5.1.1_postcss@8.4.19 - postcss-discard-overridden: 5.1.0_postcss@8.4.19 - postcss-merge-longhand: 5.1.7_postcss@8.4.19 - postcss-merge-rules: 5.1.3_postcss@8.4.19 - postcss-minify-font-values: 5.1.0_postcss@8.4.19 - postcss-minify-gradients: 5.1.1_postcss@8.4.19 - postcss-minify-params: 5.1.4_postcss@8.4.19 - postcss-minify-selectors: 5.2.1_postcss@8.4.19 - postcss-normalize-charset: 5.1.0_postcss@8.4.19 - postcss-normalize-display-values: 5.1.0_postcss@8.4.19 - postcss-normalize-positions: 5.1.1_postcss@8.4.19 - postcss-normalize-repeat-style: 5.1.1_postcss@8.4.19 - postcss-normalize-string: 5.1.0_postcss@8.4.19 - postcss-normalize-timing-functions: 5.1.0_postcss@8.4.19 - postcss-normalize-unicode: 5.1.1_postcss@8.4.19 - postcss-normalize-url: 5.1.0_postcss@8.4.19 - postcss-normalize-whitespace: 5.1.1_postcss@8.4.19 - postcss-ordered-values: 5.1.3_postcss@8.4.19 - postcss-reduce-initial: 5.1.1_postcss@8.4.19 - postcss-reduce-transforms: 5.1.0_postcss@8.4.19 - postcss-svgo: 5.1.0_postcss@8.4.19 - postcss-unique-selectors: 5.1.1_postcss@8.4.19 - dev: true - - /cssnano-utils/3.1.0_postcss@8.4.19: + css-declaration-sorter: 6.3.1_postcss@8.4.20 + cssnano-utils: 3.1.0_postcss@8.4.20 + postcss: 8.4.20 + postcss-calc: 8.2.4_postcss@8.4.20 + postcss-colormin: 5.3.0_postcss@8.4.20 + postcss-convert-values: 5.1.3_postcss@8.4.20 + postcss-discard-comments: 5.1.2_postcss@8.4.20 + postcss-discard-duplicates: 5.1.0_postcss@8.4.20 + postcss-discard-empty: 5.1.1_postcss@8.4.20 + postcss-discard-overridden: 5.1.0_postcss@8.4.20 + postcss-merge-longhand: 5.1.7_postcss@8.4.20 + postcss-merge-rules: 5.1.3_postcss@8.4.20 + postcss-minify-font-values: 5.1.0_postcss@8.4.20 + postcss-minify-gradients: 5.1.1_postcss@8.4.20 + postcss-minify-params: 5.1.4_postcss@8.4.20 + postcss-minify-selectors: 5.2.1_postcss@8.4.20 + postcss-normalize-charset: 5.1.0_postcss@8.4.20 + postcss-normalize-display-values: 5.1.0_postcss@8.4.20 + postcss-normalize-positions: 5.1.1_postcss@8.4.20 + postcss-normalize-repeat-style: 5.1.1_postcss@8.4.20 + postcss-normalize-string: 5.1.0_postcss@8.4.20 + postcss-normalize-timing-functions: 5.1.0_postcss@8.4.20 + postcss-normalize-unicode: 5.1.1_postcss@8.4.20 + postcss-normalize-url: 5.1.0_postcss@8.4.20 + postcss-normalize-whitespace: 5.1.1_postcss@8.4.20 + postcss-ordered-values: 5.1.3_postcss@8.4.20 + postcss-reduce-initial: 5.1.1_postcss@8.4.20 + postcss-reduce-transforms: 5.1.0_postcss@8.4.20 + postcss-svgo: 5.1.0_postcss@8.4.20 + postcss-unique-selectors: 5.1.1_postcss@8.4.20 + dev: true + + /cssnano-utils/3.1.0_postcss@8.4.20: resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 dev: true - /cssnano/5.1.14_postcss@8.4.19: + /cssnano/5.1.14_postcss@8.4.20: resolution: {integrity: sha512-Oou7ihiTocbKqi0J1bB+TRJIQX5RMR3JghA8hcWSw9mjBLQ5Y3RWqEDoYG3sRNlAbCIXpqMoZGbq5KDR3vdzgw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - cssnano-preset-default: 5.2.13_postcss@8.4.19 + cssnano-preset-default: 5.2.13_postcss@8.4.20 lilconfig: 2.0.6 - postcss: 8.4.19 + postcss: 8.4.20 yaml: 1.10.2 dev: true @@ -547,17 +547,17 @@ packages: engines: {node: '>=0.10.0'} dev: true - /postcss-calc/8.2.4_postcss@8.4.19: + /postcss-calc/8.2.4_postcss@8.4.20: resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} peerDependencies: postcss: ^8.2.2 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-selector-parser: 6.0.10 postcss-value-parser: 4.2.0 dev: true - /postcss-cli/10.1.0_postcss@8.4.19: + /postcss-cli/10.1.0_postcss@8.4.20: resolution: {integrity: sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==} engines: {node: '>=14'} hasBin: true @@ -570,9 +570,9 @@ packages: get-stdin: 9.0.0 globby: 13.1.2 picocolors: 1.0.0 - postcss: 8.4.19 - postcss-load-config: 4.0.1_postcss@8.4.19 - postcss-reporter: 7.0.5_postcss@8.4.19 + postcss: 8.4.20 + postcss-load-config: 4.0.1_postcss@8.4.20 + postcss-reporter: 7.0.5_postcss@8.4.20 pretty-hrtime: 1.0.3 read-cache: 1.0.0 slash: 5.0.0 @@ -581,7 +581,7 @@ packages: - ts-node dev: true - /postcss-colormin/5.3.0_postcss@8.4.19: + /postcss-colormin/5.3.0_postcss@8.4.20: resolution: {integrity: sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -590,68 +590,68 @@ packages: browserslist: 4.21.4 caniuse-api: 3.0.0 colord: 2.9.3 - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-convert-values/5.1.3_postcss@8.4.19: + /postcss-convert-values/5.1.3_postcss@8.4.20: resolution: {integrity: sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-custom-properties/12.1.11_postcss@8.4.19: + /postcss-custom-properties/12.1.11_postcss@8.4.20: resolution: {integrity: sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-discard-comments/5.1.2_postcss@8.4.19: + /postcss-discard-comments/5.1.2_postcss@8.4.20: resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 dev: true - /postcss-discard-duplicates/5.1.0_postcss@8.4.19: + /postcss-discard-duplicates/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 dev: true - /postcss-discard-empty/5.1.1_postcss@8.4.19: + /postcss-discard-empty/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 dev: true - /postcss-discard-overridden/5.1.0_postcss@8.4.19: + /postcss-discard-overridden/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 dev: true - /postcss-load-config/4.0.1_postcss@8.4.19: + /postcss-load-config/4.0.1_postcss@8.4.20: resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} peerDependencies: @@ -664,22 +664,22 @@ packages: optional: true dependencies: lilconfig: 2.0.6 - postcss: 8.4.19 + postcss: 8.4.20 yaml: 2.1.3 dev: true - /postcss-merge-longhand/5.1.7_postcss@8.4.19: + /postcss-merge-longhand/5.1.7_postcss@8.4.20: resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 - stylehacks: 5.1.1_postcss@8.4.19 + stylehacks: 5.1.1_postcss@8.4.20 dev: true - /postcss-merge-rules/5.1.3_postcss@8.4.19: + /postcss-merge-rules/5.1.3_postcss@8.4.20: resolution: {integrity: sha512-LbLd7uFC00vpOuMvyZop8+vvhnfRGpp2S+IMQKeuOZZapPRY4SMq5ErjQeHbHsjCUgJkRNrlU+LmxsKIqPKQlA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -687,158 +687,158 @@ packages: dependencies: browserslist: 4.21.4 caniuse-api: 3.0.0 - cssnano-utils: 3.1.0_postcss@8.4.19 - postcss: 8.4.19 + cssnano-utils: 3.1.0_postcss@8.4.20 + postcss: 8.4.20 postcss-selector-parser: 6.0.10 dev: true - /postcss-minify-font-values/5.1.0_postcss@8.4.19: + /postcss-minify-font-values/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-gradients/5.1.1_postcss@8.4.19: + /postcss-minify-gradients/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: colord: 2.9.3 - cssnano-utils: 3.1.0_postcss@8.4.19 - postcss: 8.4.19 + cssnano-utils: 3.1.0_postcss@8.4.20 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-params/5.1.4_postcss@8.4.19: + /postcss-minify-params/5.1.4_postcss@8.4.20: resolution: {integrity: sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - cssnano-utils: 3.1.0_postcss@8.4.19 - postcss: 8.4.19 + cssnano-utils: 3.1.0_postcss@8.4.20 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-selectors/5.2.1_postcss@8.4.19: + /postcss-minify-selectors/5.2.1_postcss@8.4.20: resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-selector-parser: 6.0.10 dev: true - /postcss-normalize-charset/5.1.0_postcss@8.4.19: + /postcss-normalize-charset/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 dev: true - /postcss-normalize-display-values/5.1.0_postcss@8.4.19: + /postcss-normalize-display-values/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-positions/5.1.1_postcss@8.4.19: + /postcss-normalize-positions/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-repeat-style/5.1.1_postcss@8.4.19: + /postcss-normalize-repeat-style/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-string/5.1.0_postcss@8.4.19: + /postcss-normalize-string/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-timing-functions/5.1.0_postcss@8.4.19: + /postcss-normalize-timing-functions/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-unicode/5.1.1_postcss@8.4.19: + /postcss-normalize-unicode/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-url/5.1.0_postcss@8.4.19: + /postcss-normalize-url/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: normalize-url: 6.1.0 - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-whitespace/5.1.1_postcss@8.4.19: + /postcss-normalize-whitespace/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-ordered-values/5.1.3_postcss@8.4.19: + /postcss-ordered-values/5.1.3_postcss@8.4.20: resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - cssnano-utils: 3.1.0_postcss@8.4.19 - postcss: 8.4.19 + cssnano-utils: 3.1.0_postcss@8.4.20 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-reduce-initial/5.1.1_postcss@8.4.19: + /postcss-reduce-initial/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-//jeDqWcHPuXGZLoolFrUXBDyuEGbr9S2rMo19bkTIjBQ4PqkaO+oI8wua5BOUxpfi97i3PCoInsiFIEBfkm9w==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -846,27 +846,27 @@ packages: dependencies: browserslist: 4.21.4 caniuse-api: 3.0.0 - postcss: 8.4.19 + postcss: 8.4.20 dev: true - /postcss-reduce-transforms/5.1.0_postcss@8.4.19: + /postcss-reduce-transforms/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 dev: true - /postcss-reporter/7.0.5_postcss@8.4.19: + /postcss-reporter/7.0.5_postcss@8.4.20: resolution: {integrity: sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==} engines: {node: '>=10'} peerDependencies: postcss: ^8.1.0 dependencies: picocolors: 1.0.0 - postcss: 8.4.19 + postcss: 8.4.20 thenby: 1.3.4 dev: true @@ -878,24 +878,24 @@ packages: util-deprecate: 1.0.2 dev: true - /postcss-svgo/5.1.0_postcss@8.4.19: + /postcss-svgo/5.1.0_postcss@8.4.20: resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-value-parser: 4.2.0 svgo: 2.8.0 dev: true - /postcss-unique-selectors/5.1.1_postcss@8.4.19: + /postcss-unique-selectors/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.19 + postcss: 8.4.20 postcss-selector-parser: 6.0.10 dev: true @@ -903,8 +903,8 @@ packages: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} dev: true - /postcss/8.4.19: - resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==} + /postcss/8.4.20: + resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.4 @@ -998,14 +998,14 @@ packages: ansi-regex: 5.0.1 dev: true - /stylehacks/5.1.1_postcss@8.4.19: + /stylehacks/5.1.1_postcss@8.4.20: resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.19 + postcss: 8.4.20 postcss-selector-parser: 6.0.10 dev: true From fe085cada490416b651abd55a848db5c5a5ab99f Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Tue, 3 Jan 2023 14:58:42 +0100 Subject: [PATCH 26/53] Feat: added new `onChange` callback --- demo/app.js | 24 +++++++++++++++++- dist/iframemanager.js | 2 +- src/iframemanager.js | 57 +++++++++++++++++++++++++++++++++++++------ 3 files changed, 74 insertions(+), 9 deletions(-) diff --git a/demo/app.js b/demo/app.js index 291abf7..4b00edb 100644 --- a/demo/app.js +++ b/demo/app.js @@ -49,6 +49,28 @@ const waitFor = async (opts) => { }; im.run({ + + /** + * @param {{ + * servicesState: Map + * eventSource: 'click' | 'api' + * }} + */ + onChange: ({servicesState, eventSource}) => { + if(eventSource === 'api') + return; + + const enabledServices = [...servicesState] + .filter(([k, v]) => v === true) + .map(([k, v]) => k); + + console.log("www", enabledServices) + + for(const [key, value] of servicesState){ + console.log(key, value); + } + }, + currLang: 'en', // autoLang: true, @@ -169,7 +191,7 @@ im.run({ embedUrl: 'https://player.vimeo.com/video/{data-id}', iframe: { - allow : 'fullscreen; picture-in-picture, allowfullscreen;' + allow : 'fullscreen; picture-in-picture;' }, thumbnailUrl: async (dataId, setThumbnail) => { diff --git a/dist/iframemanager.js b/dist/iframemanager.js index b9add12..937b229 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -(()=>{'use strict';let t={},n=[],o=[],e=!1,c='',i={},s=[],r={};const a=['onload','onerror','src'],f=t=>'function'==typeof t,l=t=>'string'==typeof t,d=t=>t&&Object.keys(t)||[],u=t=>{const n=t.dataset,o={},e='data-iframe-',c=t.getAttributeNames().filter((t=>t.slice(0,12)===e)).map((t=>t.slice(12)));for(const n of c)o[n]=t.getAttribute(e+n);return{t:n.id,o:n.title,i:n.thumbnail,l:n.params,u:'thumbnailpreload'in n,h:'autoscale'in n,m:t,p:null,v:!1,$:!1,_:!0,g:o}},b=(n,o)=>{const e=t[n];if('IntersectionObserver'in window){const t=new IntersectionObserver((n=>{n.forEach((n=>{n.isIntersecting&&(h(o,e[n.target.dataset.index]),t.unobserve(n.target))}))}));for(const n of e)t.observe(n.m)}},h=(t,n)=>{const o=t=>{n.p.style.backgroundImage=`url('${t}')`;const o=new Image;o.onload=function(){n.p.classList.add('loaded')},o.src=t};if(l(n.i))n.u&&g(n.i),''!==n.i&&o(n.i);else if(f(t))t(n.t,(t=>{_(t),n.u&&g(t),o(t)}));else if(l(t)){const e=t.replace('{data-id}',n.t);_(e),n.u&&g(e),o(e)}},m=(t,n)=>{if(t.v)return;if(t.v=!0,f(n.onAccept))return void n.onAccept(t.m,(n=>{t.k=n,t.v=!0,t.m.classList.add('c-h-b')}));t.k=k('iframe');const o=t.l||n.iframe&&n.iframe.params;let e=(n.embedUrl||'').replace('{data-id}',t.t);t.o&&(t.k.title=t.o),o&&('ap:'===o.substring(0,3)?e+=o.substring(3):e+='?'+o);const c=n.iframe;t.k.onload=function(){t.m.classList.add('c-h-b'),t.k.onload=void 0,c&&f(c.onload)&&c.onload(t.t,t.k)};for(const n in c)p(t.k,n,c[n]);for(const n in t.g)p(t.k,n,t.g[n]);t.k.src=e,x(t.m,t.k)},p=(t,n,o)=>{a.includes(n)||t.setAttribute(n,o)},v=t=>{t.m.classList.add('c-h-n'),t._=!1},w=t=>{t.m.classList.remove('c-h-n','c-h-b'),t._=!0},$=t=>(t=r.cookie.match(`(^|;)\\s*${t}\\s*=\\s*([^;]+)`))?t.pop():'',_=t=>{const o=t.split('://'),e=o[0];if('http'===e||'https'===e){const t=o[1]&&o[1].split('/')[0];if(t&&t!==location.hostname&&-1===n.indexOf(t)){const o=k('link');o.rel='preconnect',o.href=`${e}://${t}`,x(r.head,o),n.push(t)}}},g=t=>{if(t&&-1===o.indexOf(t)){const n=k('link');n.rel='preload',n.as='image',n.href=t,x(r.head,n),o.push(t)}},k=t=>r.createElement(t),I=()=>k('div'),O=()=>{const t=k('button');return t.type='button',t},S=(t,n)=>t.className=n,x=(t,n)=>t.appendChild(n),D=(n,o,e)=>{const i=t[n],s=o.languages;i.forEach((t=>{if(!t.$){const i=s[c].loadBtn,a=s[c].notice,f=s[c].loadAllBtn,d=r.createDocumentFragment(),u=I(),b=I(),h=I(),p=I(),w=()=>{v(t),m(t,o)};if(i){const t=O();t.textContent=i,S(t,'c-l-b'),t.addEventListener('click',w),x(p,t)}if(f){const t=O();t.textContent=f,S(t,'c-la-b'),t.addEventListener('click',(()=>{w(),E.acceptService(n)})),x(p,t)}const $=I(),_=I(),g=I(),D=I(),y=I();S($,'cc-text'),S(D,'c-bg-i'),t.p=D,S(g,'c-ld'),l(t.i)&&''===t.i||S(_,'c-bg');const P=t.o,T=r.createDocumentFragment();if(P){const t=k('span');S(t,'c-tl'),t.insertAdjacentHTML('beforeend',P),x(T,t)}x($,T),u&&$.insertAdjacentHTML('beforeend',a||''),x(b,$),S(y,'c-t-cn'),S(b,'c-n-t'),S(h,'c-n-c'),S(u,'c-nt'),S(p,'c-n-a'),x(y,b),x(y,p),x(h,y),x(u,h),x(_,D),x(d,u),(o.thumbnailUrl||t.i)&&x(d,_),x(d,g),e&&t.m.classList.add('c-h-n'),x(t.m,d),t.$=!0}}))},y=(n,o)=>{const c=t[n];if('IntersectionObserver'in window){const t=new IntersectionObserver((n=>{if(e)t.disconnect();else for(let e=0;e{const i=n[e].target;setTimeout((()=>{const t=i.dataset.index;m(c[t],o),v(c[t])}),50*e),t.unobserve(i)})(e)}));c.forEach((n=>{n.v||t.observe(n.m)}))}},P=(t,n)=>t in n?t:d(n).length>0?c in n?c:d(n)[0]:void 0,T=(t,n)=>{const{cookie:o}=n;$(o.name)||(t=>{const{hostname:n,protocol:o}=location,e=t.name,c=new Date,i=t.path||'/',s=864e5*(t.expiration||182),a=t.sameSite||'Lax',f=t.domain||n;c.setTime(c.getTime()+s);let l=e+'=1'+(0!==s?`; Expires=${c.toUTCString()}`:'')+`; Path=${i}`+`; SameSite=${a}`;f.indexOf('.')>-1&&(l+=`; Domain=${f}`),'https:'===o&&(l+='; Secure'),r.cookie=l})(o),y(t,n)},j=(n,o)=>{const{cookie:e}=o;$(e.name)&&(t=>{const n=t.name,o=t.path||'/',e=t.domain||location.hostname;r.cookie=`${n}=; Path=${o}; Domain=${e}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(e),((n,o)=>{const e=t[n];for(let t=0;t{var n;e[t].v&&(f(o.onReject)?(o.onReject(e[t].k),e[t].v=!1):((n=e[t]).k.parentNode.removeChild(n.k),n.v=!1)),w(e[t])})(t)})(n,o)},E={acceptService:t=>{if(e=!1,'all'===t)for(const t of s)T(t,i[t]);else s.includes(t)&&T(t,i[t])},rejectService:t=>{if('all'===t){e=!0;for(const t of s)j(t,i[t])}else s.includes(t)&&j(t,i[t])},run:n=>{if(r=document,i=n.services,s=d(i),0===s.length)return;c=n.currLang;const o=i[s[0]].languages;!0===n.autoLang?c=P(navigator.language.slice(0,2).toLowerCase(),o):l(n.currLang)&&(c=P(n.currLang,o));for(const n of s){t[n]=[];const o=r.querySelectorAll(`div[data-service="${n}"]`),e=o.length;if(0===e)continue;for(let c=0;cE)})(); \ No newline at end of file +(()=>{'use strict';let t,e={},n=[],o=[],c=!1,i='',s={},r=[],a={},f=new Map;const l=['onload','onerror','src'],u=t=>'function'==typeof t,d=t=>'string'==typeof t,v=t=>t&&Object.keys(t)||[],b=t=>{const e=t.dataset,n={},o='data-iframe-',c=t.getAttributeNames().filter((t=>t.slice(0,12)===o)).map((t=>t.slice(12)));for(const e of c)n[e]=t.getAttribute(o+e);return{t:e.id,o:e.title,i:e.thumbnail,l:e.params,u:'thumbnailpreload'in e,v:'autoscale'in e,p:t,h:null,m:!1,S:!1,$:!0,_:n}},p=(t,n)=>{const o=e[t];if('IntersectionObserver'in window){const t=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting&&(h(n,o[e.target.dataset.index]),t.unobserve(e.target))}))}));for(const e of o)t.observe(e.p)}},h=(t,e)=>{const n=t=>{e.h.style.backgroundImage=`url('${t}')`;const n=new Image;n.onload=function(){e.h.classList.add('loaded')},n.src=t};if(d(e.i))e.u&&g(e.i),''!==e.i&&n(e.i);else if(u(t))t(e.t,(t=>{k(t),e.u&&g(t),n(t)}));else if(d(t)){const o=t.replace('{data-id}',e.t);k(o),e.u&&g(o),n(o)}},m=(t,e)=>{if(t.m)return;if(t.m=!0,u(e.onAccept))return void e.onAccept(t.p,(e=>{t.k=e,t.m=!0,t.p.classList.add('c-h-b')}));t.k=I('iframe');const n=t.l||e.iframe&&e.iframe.params;let o=(e.embedUrl||'').replace('{data-id}',t.t);t.o&&(t.k.title=t.o),n&&('ap:'===n.substring(0,3)?o+=n.substring(3):o+='?'+n);const c=e.iframe;t.k.onload=function(){t.p.classList.add('c-h-b'),t.k.onload=void 0,c&&u(c.onload)&&c.onload(t.t,t.k)};for(const e in c)w(t.k,e,c[e]);for(const e in t._)w(t.k,e,t._[e]);t.k.src=o,y(t.p,t.k)},w=(t,e,n)=>{l.includes(e)||t.setAttribute(e,n)},S=t=>{t.p.classList.add('c-h-n'),t.$=!1},$=t=>{t.p.classList.remove('c-h-n','c-h-b'),t.$=!0},_=t=>(t=a.cookie.match(`(^|;)\\s*${t}\\s*=\\s*([^;]+)`))?t.pop():'',k=t=>{const e=t.split('://'),o=e[0];if('http'===o||'https'===o){const t=e[1]&&e[1].split('/')[0];if(t&&t!==location.hostname&&-1===n.indexOf(t)){const e=I('link');e.rel='preconnect',e.href=`${o}://${t}`,y(a.head,e),n.push(t)}}},g=t=>{if(t&&-1===o.indexOf(t)){const e=I('link');e.rel='preload',e.as='image',e.href=t,y(a.head,e),o.push(t)}},I=t=>a.createElement(t),O=()=>I('div'),x=()=>{const t=I('button');return t.type='button',t},D=(t,e)=>t.className=e,y=(t,e)=>t.appendChild(e),P=(n,o,c)=>{const s=e[n],r=o.languages;s.forEach((e=>{if(!e.S){const s=r[i].loadBtn,l=r[i].notice,v=r[i].loadAllBtn,b=a.createDocumentFragment(),p=O(),h=O(),w=O(),$=O(),_=()=>{S(e),m(e,o)};if(s){const t=x();t.textContent=s,D(t,'c-l-b'),t.addEventListener('click',_),y($,t)}if(v){const e=x();e.textContent=v,D(e,'c-la-b'),e.addEventListener('click',(()=>{_(),N.acceptService(n),u(t)&&t({servicesState:f,eventSource:'click'})})),y($,e)}const k=O(),g=O(),P=O(),T=O(),j=O();D(k,'cc-text'),D(T,'c-bg-i'),e.h=T,D(P,'c-ld'),d(e.i)&&''===e.i||D(g,'c-bg');const E=e.o,M=a.createDocumentFragment();if(E){const t=I('span');D(t,'c-tl'),t.insertAdjacentHTML('beforeend',E),y(M,t)}y(k,M),p&&k.insertAdjacentHTML('beforeend',l||''),y(h,k),D(j,'c-t-cn'),D(h,'c-n-t'),D(w,'c-n-c'),D(p,'c-nt'),D($,'c-n-a'),y(j,h),y(j,$),y(w,j),y(p,w),y(g,T),y(b,p),(o.thumbnailUrl||e.i)&&y(b,g),y(b,P),c&&e.p.classList.add('c-h-n'),y(e.p,b),e.S=!0}}))},T=(t,n)=>{const o=e[t];if('IntersectionObserver'in window){const t=new IntersectionObserver((e=>{if(c)t.disconnect();else for(let c=0;c{const i=e[c].target;setTimeout((()=>{const t=i.dataset.index;m(o[t],n),S(o[t])}),50*c),t.unobserve(i)})(c)}));o.forEach((e=>{e.m||t.observe(e.p)}))}},j=(t,e)=>t in e?t:v(e).length>0?i in e?i:v(e)[0]:void 0,E=(t,e)=>{const{cookie:n}=e;_(n.name)||(t=>{const{hostname:e,protocol:n}=location,o=t.name,c=new Date,i=t.path||'/',s=864e5*(t.expiration||182),r=t.sameSite||'Lax',f=t.domain||e;c.setTime(c.getTime()+s);let l=o+'=1'+(0!==s?`; Expires=${c.toUTCString()}`:'')+`; Path=${i}`+`; SameSite=${r}`;f.indexOf('.')>-1&&(l+=`; Domain=${f}`),'https:'===n&&(l+='; Secure'),a.cookie=l})(n),T(t,e)},M=(t,n)=>{const{cookie:o}=n;_(o.name)&&(t=>{const e=t.name,n=t.path||'/',o=t.domain||location.hostname;a.cookie=`${e}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(o),((t,n)=>{const o=e[t];for(let t=0;t{var e;o[t].m&&(u(n.onReject)?(n.onReject(o[t].k),o[t].m=!1):((e=o[t]).k.parentNode.removeChild(e.k),e.m=!1)),$(o[t])})(t)})(t,n)},N={acceptService:e=>{if(c=!1,'all'===e){let e=!1;for(const t of r)f.get(t)||(f.set(t,!0),E(t,s[t]),e=!0);e&&u(t)&&t({servicesState:f,eventSource:'api'})}else r.includes(e)&&(f.get(e)||(f.set(e,!0),E(e,s[e]),u(t)&&t({servicesState:f,eventSource:'api'})))},rejectService:e=>{if('all'===e){c=!0;let e=!1;for(const t of r)f.get(t)&&(f.set(t,!1),M(t,s[t]),e=!0);e&&u(t)&&t({servicesState:f,eventSource:'api'})}else r.includes(e)&&f.get(e)&&(f.set(e,!1),M(e,s[e]),u(t)&&t({servicesState:f,eventSource:'api'}))},run:n=>{if(a=document,s=n.services,t=n.onChange,r=v(s),0===r.length)return;i=n.currLang;const o=s[r[0]].languages;!0===n.autoLang?i=j(navigator.language.slice(0,2).toLowerCase(),o):d(n.currLang)&&(i=j(n.currLang,o));for(const t of r){e[t]=[];const n=a.querySelectorAll(`div[data-service="${t}"]`),o=n.length;if(0===o)continue;for(let c=0;cN)})(); \ No newline at end of file diff --git a/src/iframemanager.js b/src/iframemanager.js index 1c772af..e914926 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -86,7 +86,11 @@ /** * @type {Document} */ - doc = {}; + doc = {}, + + servicesState = new Map(), + + onChangeCallback; /** * Prevent direct use of the following @@ -502,6 +506,9 @@ load_all_button.addEventListener('click', () => { showVideo(); api.acceptService(serviceName); + + if(isFunction(onChangeCallback)) + onChangeCallback({servicesState, eventSource: 'click'}); }); appendChild(buttons, load_all_button); @@ -689,12 +696,27 @@ stopObserver = false; if(serviceName === 'all'){ + let changed = false; - for(const name of serviceNames) - acceptHelper(name, services[name]); + for(const name of serviceNames){ + if(!servicesState.get(name)){ + servicesState.set(name, true); + acceptHelper(name, services[name]); + changed = true; + } + } + + changed && isFunction(onChangeCallback) + && onChangeCallback({servicesState, eventSource: 'api'}); }else if(serviceNames.includes(serviceName)){ - acceptHelper(serviceName, services[serviceName]); + if(!servicesState.get(serviceName)){ + servicesState.set(serviceName, true); + acceptHelper(serviceName, services[serviceName]); + + isFunction(onChangeCallback) + && onChangeCallback({servicesState, eventSource: 'api'}); + } } }, @@ -709,22 +731,41 @@ if(serviceName === 'all'){ stopObserver = true; - for(const name of serviceNames) - rejectHelper(name, services[name]); + let changed = false; + + for(const name of serviceNames){ + if(servicesState.get(name)){ + servicesState.set(name, false); + rejectHelper(name, services[name]); + changed = true; + } + } + + changed && isFunction(onChangeCallback) + && onChangeCallback({servicesState, eventSource: 'api'}); }else if(serviceNames.includes(serviceName)){ - rejectHelper(serviceName, services[serviceName]); + if(servicesState.get(serviceName)){ + servicesState.set(serviceName, false); + rejectHelper(serviceName, services[serviceName]); + + isFunction(onChangeCallback) + && onChangeCallback({servicesState, eventSource: 'api'}); + } } }, run : (_config) => { doc = document; + /** * Object with all services config. */ services = _config.services; + onChangeCallback = _config.onChange; + /** * Array containing the names of all services */ @@ -789,6 +830,8 @@ const cookieExists = getCookie(cookieName); + servicesState.set(serviceName, !!cookieExists); + // if cookie is not set => show notice if(cookieExists){ createAllNotices(serviceName, currService, true); From 9f9919afa058dffffca2172522d18722d16a2297 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 5 Jan 2023 14:45:20 +0100 Subject: [PATCH 27/53] Update Readme.md: refactoring and cleanup --- README.md | 125 +++++++++++++++++++++++++----------------------------- 1 file changed, 58 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index e28cd59..fed9214 100644 --- a/README.md +++ b/README.md @@ -31,10 +31,11 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or - [**Installation**](#installation) - [**Configuration options & API**](#configuration-options) - [**Configuration examples**](#configuration-examples) - - [How to embed youtube video](#configuration-examples) - - [How to embed dailymotion video](#configuration-examples) - - [How to embed vimeo video](#configuration-examples) - - [How to embed twitch channel/chat](#configuration-examples) + - [youtube](#configuration-examples) + - [dailymotion](#configuration-examples) + - [vimeo](#configuration-examples) + - [twitch](#configuration-examples) + - [google maps](#configuration-examples) - [**License**](#license) ## Features @@ -53,8 +54,8 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or 1. #### Download the [latest release](https://github.com/orestbida/iframemanager/releases/latest) or use via CDN: ```bash - https://cdn.jsdelivr.net/gh/orestbida/iframemanager@v1.1.0/dist/iframemanager.js - https://cdn.jsdelivr.net/gh/orestbida/iframemanager@v1.1.0/dist/iframemanager.css + https://cdn.jsdelivr.net/gh/orestbida/iframemanager@v1.2.0/dist/iframemanager.js + https://cdn.jsdelivr.net/gh/orestbida/iframemanager@v1.2.0/dist/iframemanager.css ``` 2. #### Import script + stylesheet: @@ -67,7 +68,7 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or ... - + ``` @@ -81,8 +82,8 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or ```html ... - - + + ``` @@ -91,20 +92,17 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or ```javascript (function(){ - var manager = iframemanager(); + const im = iframemanager(); // Example with youtube embed - manager.run({ + im.run({ currLang: 'en', services : { youtube : { embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}', thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg', iframe : { - allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', - }, - cookie : { - name : 'cc_youtube' + allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;' }, languages : { en : { @@ -126,26 +124,23 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or ```html ... - + From 4e0b4079564bccb5f80068e6351d12e7889fa890 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Wed, 11 Jan 2023 20:14:12 +0100 Subject: [PATCH 35/53] Update dev. dependencies --- package.json | 2 +- pnpm-lock.yaml | 236 ++++++++++++++++++++++++------------------------- 2 files changed, 119 insertions(+), 119 deletions(-) diff --git a/package.json b/package.json index 473acb5..45b9210 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "homepage": "https://github.com/orestbida/iframemanager#readme", "devDependencies": { "cssnano": "^5.1.14", - "postcss": "^8.4.20", + "postcss": "^8.4.21", "postcss-cli": "^10.1.0", "postcss-custom-properties": "^12.1.11", "terser": "^5.16.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6668c87..41293ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,16 +2,16 @@ lockfileVersion: 5.4 specifiers: cssnano: ^5.1.14 - postcss: ^8.4.20 + postcss: ^8.4.21 postcss-cli: ^10.1.0 postcss-custom-properties: ^12.1.11 terser: ^5.16.1 devDependencies: - cssnano: 5.1.14_postcss@8.4.20 - postcss: 8.4.20 - postcss-cli: 10.1.0_postcss@8.4.20 - postcss-custom-properties: 12.1.11_postcss@8.4.20 + cssnano: 5.1.14_postcss@8.4.21 + postcss: 8.4.21 + postcss-cli: 10.1.0_postcss@8.4.21 + postcss-custom-properties: 12.1.11_postcss@8.4.21 terser: 5.16.1 packages: @@ -197,13 +197,13 @@ packages: engines: {node: '>= 10'} dev: true - /css-declaration-sorter/6.3.1_postcss@8.4.20: + /css-declaration-sorter/6.3.1_postcss@8.4.21: resolution: {integrity: sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==} engines: {node: ^10 || ^12 || >=14} peerDependencies: postcss: ^8.0.9 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 dev: true /css-select/4.3.0: @@ -235,62 +235,62 @@ packages: hasBin: true dev: true - /cssnano-preset-default/5.2.13_postcss@8.4.20: + /cssnano-preset-default/5.2.13_postcss@8.4.21: resolution: {integrity: sha512-PX7sQ4Pb+UtOWuz8A1d+Rbi+WimBIxJTRyBdgGp1J75VU0r/HFQeLnMYgHiCAp6AR4rqrc7Y4R+1Rjk3KJz6DQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - css-declaration-sorter: 6.3.1_postcss@8.4.20 - cssnano-utils: 3.1.0_postcss@8.4.20 - postcss: 8.4.20 - postcss-calc: 8.2.4_postcss@8.4.20 - postcss-colormin: 5.3.0_postcss@8.4.20 - postcss-convert-values: 5.1.3_postcss@8.4.20 - postcss-discard-comments: 5.1.2_postcss@8.4.20 - postcss-discard-duplicates: 5.1.0_postcss@8.4.20 - postcss-discard-empty: 5.1.1_postcss@8.4.20 - postcss-discard-overridden: 5.1.0_postcss@8.4.20 - postcss-merge-longhand: 5.1.7_postcss@8.4.20 - postcss-merge-rules: 5.1.3_postcss@8.4.20 - postcss-minify-font-values: 5.1.0_postcss@8.4.20 - postcss-minify-gradients: 5.1.1_postcss@8.4.20 - postcss-minify-params: 5.1.4_postcss@8.4.20 - postcss-minify-selectors: 5.2.1_postcss@8.4.20 - postcss-normalize-charset: 5.1.0_postcss@8.4.20 - postcss-normalize-display-values: 5.1.0_postcss@8.4.20 - postcss-normalize-positions: 5.1.1_postcss@8.4.20 - postcss-normalize-repeat-style: 5.1.1_postcss@8.4.20 - postcss-normalize-string: 5.1.0_postcss@8.4.20 - postcss-normalize-timing-functions: 5.1.0_postcss@8.4.20 - postcss-normalize-unicode: 5.1.1_postcss@8.4.20 - postcss-normalize-url: 5.1.0_postcss@8.4.20 - postcss-normalize-whitespace: 5.1.1_postcss@8.4.20 - postcss-ordered-values: 5.1.3_postcss@8.4.20 - postcss-reduce-initial: 5.1.1_postcss@8.4.20 - postcss-reduce-transforms: 5.1.0_postcss@8.4.20 - postcss-svgo: 5.1.0_postcss@8.4.20 - postcss-unique-selectors: 5.1.1_postcss@8.4.20 - dev: true - - /cssnano-utils/3.1.0_postcss@8.4.20: + css-declaration-sorter: 6.3.1_postcss@8.4.21 + cssnano-utils: 3.1.0_postcss@8.4.21 + postcss: 8.4.21 + postcss-calc: 8.2.4_postcss@8.4.21 + postcss-colormin: 5.3.0_postcss@8.4.21 + postcss-convert-values: 5.1.3_postcss@8.4.21 + postcss-discard-comments: 5.1.2_postcss@8.4.21 + postcss-discard-duplicates: 5.1.0_postcss@8.4.21 + postcss-discard-empty: 5.1.1_postcss@8.4.21 + postcss-discard-overridden: 5.1.0_postcss@8.4.21 + postcss-merge-longhand: 5.1.7_postcss@8.4.21 + postcss-merge-rules: 5.1.3_postcss@8.4.21 + postcss-minify-font-values: 5.1.0_postcss@8.4.21 + postcss-minify-gradients: 5.1.1_postcss@8.4.21 + postcss-minify-params: 5.1.4_postcss@8.4.21 + postcss-minify-selectors: 5.2.1_postcss@8.4.21 + postcss-normalize-charset: 5.1.0_postcss@8.4.21 + postcss-normalize-display-values: 5.1.0_postcss@8.4.21 + postcss-normalize-positions: 5.1.1_postcss@8.4.21 + postcss-normalize-repeat-style: 5.1.1_postcss@8.4.21 + postcss-normalize-string: 5.1.0_postcss@8.4.21 + postcss-normalize-timing-functions: 5.1.0_postcss@8.4.21 + postcss-normalize-unicode: 5.1.1_postcss@8.4.21 + postcss-normalize-url: 5.1.0_postcss@8.4.21 + postcss-normalize-whitespace: 5.1.1_postcss@8.4.21 + postcss-ordered-values: 5.1.3_postcss@8.4.21 + postcss-reduce-initial: 5.1.1_postcss@8.4.21 + postcss-reduce-transforms: 5.1.0_postcss@8.4.21 + postcss-svgo: 5.1.0_postcss@8.4.21 + postcss-unique-selectors: 5.1.1_postcss@8.4.21 + dev: true + + /cssnano-utils/3.1.0_postcss@8.4.21: resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 dev: true - /cssnano/5.1.14_postcss@8.4.20: + /cssnano/5.1.14_postcss@8.4.21: resolution: {integrity: sha512-Oou7ihiTocbKqi0J1bB+TRJIQX5RMR3JghA8hcWSw9mjBLQ5Y3RWqEDoYG3sRNlAbCIXpqMoZGbq5KDR3vdzgw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - cssnano-preset-default: 5.2.13_postcss@8.4.20 + cssnano-preset-default: 5.2.13_postcss@8.4.21 lilconfig: 2.0.6 - postcss: 8.4.20 + postcss: 8.4.21 yaml: 1.10.2 dev: true @@ -547,17 +547,17 @@ packages: engines: {node: '>=0.10.0'} dev: true - /postcss-calc/8.2.4_postcss@8.4.20: + /postcss-calc/8.2.4_postcss@8.4.21: resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} peerDependencies: postcss: ^8.2.2 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-selector-parser: 6.0.10 postcss-value-parser: 4.2.0 dev: true - /postcss-cli/10.1.0_postcss@8.4.20: + /postcss-cli/10.1.0_postcss@8.4.21: resolution: {integrity: sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==} engines: {node: '>=14'} hasBin: true @@ -570,9 +570,9 @@ packages: get-stdin: 9.0.0 globby: 13.1.2 picocolors: 1.0.0 - postcss: 8.4.20 - postcss-load-config: 4.0.1_postcss@8.4.20 - postcss-reporter: 7.0.5_postcss@8.4.20 + postcss: 8.4.21 + postcss-load-config: 4.0.1_postcss@8.4.21 + postcss-reporter: 7.0.5_postcss@8.4.21 pretty-hrtime: 1.0.3 read-cache: 1.0.0 slash: 5.0.0 @@ -581,7 +581,7 @@ packages: - ts-node dev: true - /postcss-colormin/5.3.0_postcss@8.4.20: + /postcss-colormin/5.3.0_postcss@8.4.21: resolution: {integrity: sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -590,68 +590,68 @@ packages: browserslist: 4.21.4 caniuse-api: 3.0.0 colord: 2.9.3 - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-convert-values/5.1.3_postcss@8.4.20: + /postcss-convert-values/5.1.3_postcss@8.4.21: resolution: {integrity: sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-custom-properties/12.1.11_postcss@8.4.20: + /postcss-custom-properties/12.1.11_postcss@8.4.21: resolution: {integrity: sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==} engines: {node: ^12 || ^14 || >=16} peerDependencies: postcss: ^8.2 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-discard-comments/5.1.2_postcss@8.4.20: + /postcss-discard-comments/5.1.2_postcss@8.4.21: resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 dev: true - /postcss-discard-duplicates/5.1.0_postcss@8.4.20: + /postcss-discard-duplicates/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 dev: true - /postcss-discard-empty/5.1.1_postcss@8.4.20: + /postcss-discard-empty/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 dev: true - /postcss-discard-overridden/5.1.0_postcss@8.4.20: + /postcss-discard-overridden/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 dev: true - /postcss-load-config/4.0.1_postcss@8.4.20: + /postcss-load-config/4.0.1_postcss@8.4.21: resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} peerDependencies: @@ -664,22 +664,22 @@ packages: optional: true dependencies: lilconfig: 2.0.6 - postcss: 8.4.20 + postcss: 8.4.21 yaml: 2.1.3 dev: true - /postcss-merge-longhand/5.1.7_postcss@8.4.20: + /postcss-merge-longhand/5.1.7_postcss@8.4.21: resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 - stylehacks: 5.1.1_postcss@8.4.20 + stylehacks: 5.1.1_postcss@8.4.21 dev: true - /postcss-merge-rules/5.1.3_postcss@8.4.20: + /postcss-merge-rules/5.1.3_postcss@8.4.21: resolution: {integrity: sha512-LbLd7uFC00vpOuMvyZop8+vvhnfRGpp2S+IMQKeuOZZapPRY4SMq5ErjQeHbHsjCUgJkRNrlU+LmxsKIqPKQlA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -687,158 +687,158 @@ packages: dependencies: browserslist: 4.21.4 caniuse-api: 3.0.0 - cssnano-utils: 3.1.0_postcss@8.4.20 - postcss: 8.4.20 + cssnano-utils: 3.1.0_postcss@8.4.21 + postcss: 8.4.21 postcss-selector-parser: 6.0.10 dev: true - /postcss-minify-font-values/5.1.0_postcss@8.4.20: + /postcss-minify-font-values/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-gradients/5.1.1_postcss@8.4.20: + /postcss-minify-gradients/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: colord: 2.9.3 - cssnano-utils: 3.1.0_postcss@8.4.20 - postcss: 8.4.20 + cssnano-utils: 3.1.0_postcss@8.4.21 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-params/5.1.4_postcss@8.4.20: + /postcss-minify-params/5.1.4_postcss@8.4.21: resolution: {integrity: sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - cssnano-utils: 3.1.0_postcss@8.4.20 - postcss: 8.4.20 + cssnano-utils: 3.1.0_postcss@8.4.21 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-selectors/5.2.1_postcss@8.4.20: + /postcss-minify-selectors/5.2.1_postcss@8.4.21: resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-selector-parser: 6.0.10 dev: true - /postcss-normalize-charset/5.1.0_postcss@8.4.20: + /postcss-normalize-charset/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 dev: true - /postcss-normalize-display-values/5.1.0_postcss@8.4.20: + /postcss-normalize-display-values/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-positions/5.1.1_postcss@8.4.20: + /postcss-normalize-positions/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-repeat-style/5.1.1_postcss@8.4.20: + /postcss-normalize-repeat-style/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-string/5.1.0_postcss@8.4.20: + /postcss-normalize-string/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-timing-functions/5.1.0_postcss@8.4.20: + /postcss-normalize-timing-functions/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-unicode/5.1.1_postcss@8.4.20: + /postcss-normalize-unicode/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-url/5.1.0_postcss@8.4.20: + /postcss-normalize-url/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: normalize-url: 6.1.0 - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-whitespace/5.1.1_postcss@8.4.20: + /postcss-normalize-whitespace/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-ordered-values/5.1.3_postcss@8.4.20: + /postcss-ordered-values/5.1.3_postcss@8.4.21: resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - cssnano-utils: 3.1.0_postcss@8.4.20 - postcss: 8.4.20 + cssnano-utils: 3.1.0_postcss@8.4.21 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-reduce-initial/5.1.1_postcss@8.4.20: + /postcss-reduce-initial/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-//jeDqWcHPuXGZLoolFrUXBDyuEGbr9S2rMo19bkTIjBQ4PqkaO+oI8wua5BOUxpfi97i3PCoInsiFIEBfkm9w==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -846,27 +846,27 @@ packages: dependencies: browserslist: 4.21.4 caniuse-api: 3.0.0 - postcss: 8.4.20 + postcss: 8.4.21 dev: true - /postcss-reduce-transforms/5.1.0_postcss@8.4.20: + /postcss-reduce-transforms/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true - /postcss-reporter/7.0.5_postcss@8.4.20: + /postcss-reporter/7.0.5_postcss@8.4.21: resolution: {integrity: sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==} engines: {node: '>=10'} peerDependencies: postcss: ^8.1.0 dependencies: picocolors: 1.0.0 - postcss: 8.4.20 + postcss: 8.4.21 thenby: 1.3.4 dev: true @@ -878,24 +878,24 @@ packages: util-deprecate: 1.0.2 dev: true - /postcss-svgo/5.1.0_postcss@8.4.20: + /postcss-svgo/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-value-parser: 4.2.0 svgo: 2.8.0 dev: true - /postcss-unique-selectors/5.1.1_postcss@8.4.20: + /postcss-unique-selectors/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.20 + postcss: 8.4.21 postcss-selector-parser: 6.0.10 dev: true @@ -903,8 +903,8 @@ packages: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} dev: true - /postcss/8.4.20: - resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==} + /postcss/8.4.21: + resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.4 @@ -998,14 +998,14 @@ packages: ansi-regex: 5.0.1 dev: true - /stylehacks/5.1.1_postcss@8.4.20: + /stylehacks/5.1.1_postcss@8.4.21: resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.4 - postcss: 8.4.20 + postcss: 8.4.21 postcss-selector-parser: 6.0.10 dev: true From 93de56b0910e456eef96e64b4c8735a907d1e4bc Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 12 Jan 2023 01:43:38 +0100 Subject: [PATCH 36/53] Add `.getState()`, `.getConfig()`, cleanup + BC - Added new API to retrieve config: getConfig() - Added new API to retrieve state: getState() - BC: removed (useless and undocumented) data-thumbnailPreload - Improved support for custom widgets - Cleanup and code refactoring --- dist/iframemanager.css | 2 +- dist/iframemanager.js | 2 +- src/iframemanager.css | 6 +- src/iframemanager.js | 229 +++++++++++++++-------------------------- 4 files changed, 90 insertions(+), 149 deletions(-) diff --git a/dist/iframemanager.css b/dist/iframemanager.css index 9219864..2d59ccd 100644 --- a/dist/iframemanager.css +++ b/dist/iframemanager.css @@ -1 +1 @@ -:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-hover-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease,transform .3s ease;z-index:1}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .cll .c-nt{opacity:0;visibility:hidden}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative;transition:background-color .3s ease,opacity .3s ease;z-index:1}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto 20px;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}div[data-service] .cll .c-n-c .c-l-b,div[data-service] .cll .c-n-c .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-service] .cll .c-n-c .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;padding:1em}div[data-service] .cll .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .cll .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .cll .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b .cll iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none;transition:color .2s ease,border-color .2s ease}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-customwidget] .cll+*,div[data-customwidget] .cll>:last-child{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}@keyframes example{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:example .2s forwards;animation-delay:.5s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service][data-index] [data-placeholder]{animation:none}div[data-service].c-h-b [data-placeholder]{opacity:1;visibility:visible;z-index:1} \ No newline at end of file +:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-hover-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease,transform .3s ease;z-index:1}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .cll .c-nt{opacity:0;visibility:hidden}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative;transition:background-color .3s ease,opacity .3s ease;z-index:1}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}div[data-service] .cll .c-n-c .c-l-b,div[data-service] .cll .c-n-c .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-service] .cll .c-n-c .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;padding:1em}div[data-service] .cll .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .cll .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .cll .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b .cll iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none;transition:color .2s ease,border-color .2s ease}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-customwidget] .cll+*,div[data-customwidget] .cll>:last-child{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}@keyframes example{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:example .2s forwards;animation-delay:.5s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service][data-index] [data-placeholder]{animation:none}div[data-service].c-h-b [data-placeholder]{opacity:1;visibility:visible;z-index:1} \ No newline at end of file diff --git a/dist/iframemanager.js b/dist/iframemanager.js index e9ab299..024881a 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -(()=>{'use strict';const t='click',e='{data-id}';let n,o,c,i={},s=[],r=[],a=!1,l='',f={},d=[],u=new Map,m='api';const h=['onload','onerror','src'],p=t=>'function'==typeof t,b=t=>'string'==typeof t,v=t=>t&&Object.keys(t)||[],_=t=>{const e=t.dataset,n={},o='data-iframe-',c=t.getAttributeNames().filter((t=>t.slice(0,12)===o)).map((t=>t.slice(12))),i=t.querySelector('[data-placeholder]'),s=i&&i.cloneNode(!0);for(const e of c)n[e]=t.getAttribute(o+e);return{t:e.id,o:e.title,i:e.thumbnail,l:e.params,u:'thumbnailpreload'in e,m:'autoscale'in e,h:t,p:null,v:i,_:s,$:null,g:!1,S:!1,k:!0,I:n}},w=(t,e)=>{const o=i[t];if('IntersectionObserver'in n){const t=new IntersectionObserver((n=>{n.forEach((n=>{n.isIntersecting&&($(e,o[n.target.dataset.index]),t.unobserve(n.target))}))}));for(const e of o)t.observe(e.h)}},$=(t,n)=>{const o=t=>{n.$.style.backgroundImage=`url('${t}')`;const e=new Image;e.onload=()=>{n.$.classList.add('loaded')},e.src=t};if(b(n.i))n.u&&T(n.i),''!==n.i&&o(n.i);else if(p(t))t(n.t,(t=>{P(t),n.u&&T(t),o(t)}));else if(b(t)){const c=t.replace(e,n.t);P(c),n.u&&T(c),o(c)}},g=(t,n,o)=>{if(t.g)return;if(t.g=!0,t.v){const e=t._.cloneNode(!0);t.v.replaceWith(e),t.v=e}const c=n.iframe;if(p(n.onAccept))return void n.onAccept(t.h,(e=>{if(e instanceof HTMLIFrameElement){for(const t in c)S(e,t,c[t]);for(const n in t.I)S(e,n,t.I[n]);t.P=e,t.g=!0,t.h.classList.add('c-h-b')}}));t.P=y('iframe');const i=t.l||n.iframe&&n.iframe.params;let s=(n.embedUrl||'').replace(e,t.t);t.o&&(t.P.title=t.o),i&&('ap:'===i.substring(0,3)?s+=i.substring(3):s+='?'+i),t.P.onload=()=>{t.h.classList.add('c-h-b'),t.P.onload=void 0,c&&p(c.onload)&&c.onload(t.t,t.P)};for(const e in c)S(t.P,e,c[e]);for(const e in t.I)S(t.P,e,t.I[e]);t.P.src=s,M(t.p,t.P)},S=(t,e,n)=>{h.includes(e)||t.setAttribute(e,n)},k=t=>{t.h.classList.add('c-h-n'),t.k=!1},I=t=>{t.h.classList.remove('c-h-n','c-h-b'),t.k=!0},x=t=>(t=o.cookie.match(`(^|;)\\s*${t}\\s*=\\s*([^;]+)`))?t.pop():'',P=t=>{const e=t.split('://'),n=e[0];if('http'===n||'https'===n){const t=e[1]&&e[1].split('/')[0];if(t&&t!==location.hostname&&-1===s.indexOf(t)){const e=y('link');e.rel='preconnect',e.href=`${n}://${t}`,M(o.head,e),s.push(t)}}},T=t=>{if(t&&-1===r.indexOf(t)){const e=y('link');e.rel='preload',e.as='image',e.href=t,M(o.head,e),r.push(t)}},y=t=>o.createElement(t),D=()=>y('div'),O=()=>{const t=y('button');return t.type='button',t},E=(t,e)=>t.className=e,M=(t,e)=>t.appendChild(e),j=(e,n,c)=>{const s=i[e],r=n.languages;s.forEach((i=>{if(!i.S){const s=r[l].loadBtn,a=r[l].notice,f=r[l].loadAllBtn,d=o.createElement('div'),u=D(),h=D(),p=D(),v=D();E(d,'cll'),i.p=d;const _=()=>{k(i),g(i,n)};if(s){const e=O();e.textContent=s,E(e,'c-l-b'),e.addEventListener(t,_),M(v,e)}if(f){const n=O();n.textContent=f,E(n,'c-la-b'),n.addEventListener(t,(()=>{_(),m=t,G.acceptService(e)})),M(v,n)}const w=D(),$=D(),S=D(),I=D(),x=D();E(w,'cc-text'),E(I,'c-bg-i'),i.$=I,E(S,'c-ld'),b(i.i)&&''===i.i||E($,'c-bg');const P=i.o,T=o.createDocumentFragment();if(P){const t=y('span');E(t,'c-tl'),t.insertAdjacentHTML('beforeend',P),M(T,t)}M(w,T),u&&w.insertAdjacentHTML('beforeend',a||''),M(h,w),E(x,'c-t-cn'),E(h,'c-n-t'),E(p,'c-n-c'),E(u,'c-nt'),E(v,'c-n-a'),M(x,h),M(x,v),M(p,x),M(u,p),M($,I),M(d,u),(n.thumbnailUrl||i.i)&&M(d,$),M(d,S),c&&i.h.classList.add('c-h-n'),i.h.prepend(d),i.S=!0}}))},C=(t,e)=>{const o=i[t];if('IntersectionObserver'in n){const t=new IntersectionObserver((n=>{if(a)t.disconnect();else for(let c=0;c{const i=n[c].target;setTimeout((()=>{const t=i.dataset.index;g(o[t],e),k(o[t])}),50*c),t.unobserve(i)})(c)}));o.forEach((e=>{e.g||t.observe(e.h)}))}},L=(t,e)=>t in e?t:v(e).length>0?l in e?l:v(e)[0]:void 0,N=(t,e)=>{const{cookie:n}=e;x(n.name)||(t=>{const{hostname:e,protocol:n}=location,c=t.name,i=new Date,s=t.path||'/',r=864e5*(t.expiration||182),a=t.sameSite||'Lax',l=t.domain||e;i.setTime(i.getTime()+r);let f=c+'=1'+(0!==r?`; Expires=${i.toUTCString()}`:'')+`; Path=${s}`+`; SameSite=${a}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),o.cookie=f})(n),C(t,e)},A=(t,e)=>{const{cookie:n}=e;x(n.name)&&(t=>{const e=t.name,n=t.path||'/',c=t.domain||location.hostname;o.cookie=`${e}=; Path=${n}; Domain=${c}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((t,e)=>{const n=i[t];for(let t=0;t{var o;n[t].g&&(p(e.onReject)?(e.onReject(n[t].P),n[t].g=!1):((o=n[t]).P.parentNode.removeChild(o.P),o.g=!1)),I(n[t])})(t)})(t,e)},F=()=>{p(c)&&c({acceptedServices:[...u].filter((([t,e])=>!0===e)).map((([t,e])=>t)),eventSource:m})},G={acceptService:t=>{if(a=!1,'all'===t){let t=!1;for(const e of d)u.get(e)||(u.set(e,!0),N(e,f[e]),t=!0);t&&F()}else d.includes(t)&&(u.get(t)||(u.set(t,!0),N(t,f[t]),F()));m='api'},rejectService:t=>{if('all'===t){a=!0;let t=!1;for(const e of d)A(e,f[e]),u.get(e)&&(u.set(e,!1),t=!0);t&&F()}else d.includes(t)&&(A(t,f[t]),u.get(t)&&(u.set(t,!1),F()))},childExists:async({parent:t=n,childProperty:e,childSelector:o='iframe',timeout:c=1e3,maxTimeout:i=15e3})=>{let s=1;const r=e?()=>t[e]:()=>t.querySelector(o);return new Promise((t=>{const e=()=>{if(r()||s++*c>i)return t(void 0!==r());setTimeout(e,c)};e()}))},run:t=>{if(o=document,n=window,f=t.services,c=t.onChange,d=v(f),0===d.length)return;l=t.currLang;const e=f[d[0]].languages;!0===t.autoLang?l=L(navigator.language.slice(0,2).toLowerCase(),e):b(t.currLang)&&(l=L(t.currLang,e));for(const t of d){i[t]=[];const e=o.querySelectorAll(`div[data-service="${t}"]`),n=e.length;if(0===n)continue;for(let o=0;oG)})(); \ No newline at end of file +(()=>{'use strict';const e='click',t='{data-id}';let n,o,c,i,s,r={},a=!1,l='',f={},d=new Map,u='api';const m=['onload','onerror','src'],v=e=>'function'==typeof e,h=e=>'string'==typeof e,b=e=>o.createElement(e),p=()=>b('div'),w=()=>{const e=b('button');return e.type='button',e},_=(e,t)=>e.className=t,$=(e,t)=>e.appendChild(t),g=e=>e&&Object.keys(e)||[],S=(e,t)=>{for(const n in t)y(e,n,t[n])},I=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]');i&&i.removeAttribute('data-visible');const s=i&&i.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,m:null,v:i,h:s,p:null,_:!1,$:!1,g:!0,S:n}},x=(e,t)=>{const o=r[e];if('IntersectionObserver'in n){const e=new IntersectionObserver((n=>{n.forEach((n=>{n.isIntersecting&&(T(t,o[n.target.dataset.index]),e.unobserve(n.target))}))}));for(const t of o)e.observe(t.u)}},T=(e,n)=>{const o=e=>{n.p.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>{n.p.classList.add('loaded')},t.src=e};if(h(n.i))''!==n.i&&o(n.i);else if(v(e))e(n.t,(e=>o(e)));else if(h(e)){const c=e.replace(t,n.t);o(c)}},k=(e,n)=>{if(e._)return;if(e._=!0,e.v){const t=e.h.cloneNode(!0);e.v.replaceWith(t),e.v=t}const o=n.iframe;if(v(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;S(t,o),S(t,e.S),e.I=t,e._=!0,e.u.classList.add('c-h-b')}));e.I=b('iframe');const c=e.l||n.iframe&&n.iframe.params;let i=(n.embedUrl||'').replace(t,e.t);e.o&&(e.I.title=e.o),c&&('ap:'===c.substring(0,3)?i+=c.substring(3):i+='?'+c),e.I.onload=()=>{e.u.classList.add('c-h-b'),e.I.onload=void 0,o&&v(o.onload)&&o.onload(e.t,e.I)},S(e.I,o),S(e.I,e.S),e.I.src=i,$(e.m,e.I)},y=(e,t,n)=>{m.includes(t)||e.setAttribute(t,n)},D=e=>{e.u.classList.add('c-h-n'),e.g=!1},O=e=>{e.u.classList.remove('c-h-n','c-h-b'),e.g=!0},P=e=>(e=o.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',E=(t,n,c)=>{const i=r[t],s=n.languages;i.forEach((i=>{if(!i.$&&s){const r=s[l]?.loadBtn,a=s[l]?.notice,f=s[l]?.loadAllBtn,d=o.createElement('div'),m=p(),v=p(),g=p(),S=p();_(d,'cll'),i.m=d;const I=()=>{D(i),k(i,n)};if(r){const t=w();t.textContent=r,_(t,'c-l-b'),t.addEventListener(e,I),$(S,t)}if(f){const n=w();n.textContent=f,_(n,'c-la-b'),n.addEventListener(e,(()=>{I(),u=e,A.acceptService(t)})),$(S,n)}const x=p(),T=p(),y=p(),O=p(),P=p();_(x,'cc-text'),_(O,'c-bg-i'),i.p=O,_(y,'c-ld'),h(i.i)&&''===i.i||_(T,'c-bg');const E=i.o,M=o.createDocumentFragment();if(E){const e=b('span');_(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),$(M,e)}$(x,M),m&&x.insertAdjacentHTML('beforeend',a||''),$(v,x),_(P,'c-t-cn'),_(v,'c-n-t'),_(g,'c-n-c'),_(m,'c-nt'),_(S,'c-n-a'),$(P,v),(r||f)&&$(P,S),$(g,P),$(m,g),$(T,O),$(d,m),(n.thumbnailUrl||i.i)&&$(d,T),$(d,y),c&&i.u.classList.add('c-h-n'),i.u.prepend(d),i.$=!0}}))},M=(e,t)=>{const o=r[e];if('IntersectionObserver'in n){const e=new IntersectionObserver((n=>{if(a)e.disconnect();else for(let c=0;c{const i=n[c].target;setTimeout((()=>{const e=i.dataset.index;k(o[e],t),D(o[e])}),50*c),e.unobserve(i)})(c)}));o.forEach((t=>{t._||e.observe(t.u)}))}},C=(e,t)=>e in t?e:g(t).length>0?l in t?l:g(t)[0]:void 0,j=(e,t)=>{const{cookie:n}=t;P(n.name)||(e=>{const{hostname:t,protocol:n}=location,c=e.name,i=new Date,s=e.path||'/',r=864e5*(e.expiration||182),a=e.sameSite||'Lax',l=e.domain||t;i.setTime(i.getTime()+r);let f=c+'=1'+(0!==r?`; Expires=${i.toUTCString()}`:'')+`; Path=${s}`+`; SameSite=${a}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),o.cookie=f})(n),M(e,t)},L=(e,t)=>{const{cookie:n}=t;P(n.name)&&(e=>{const t=e.name,n=e.path||'/',c=e.domain||location.hostname;o.cookie=`${t}=; Path=${n}; Domain=${c}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=r[e];for(let e=0;e{var o;n[e]._&&(v(t.onReject)?(t.onReject(n[e].I),n[e]._=!1):((o=n[e]).I.parentNode.removeChild(o.I),o._=!1)),O(n[e])})(e)})(e,t)},N=()=>{v(s)&&s({state:A.getState(),eventSource:u})},A={acceptService:e=>{if(a=!1,'all'===e){let e=!1;for(const t of i)d.get(t)||(d.set(t,!0),j(t,f[t]),e=!0);e&&N()}else i.includes(e)&&(d.get(e)||(d.set(e,!0),j(e,f[e]),N()));u='api'},rejectService:e=>{if('all'===e){a=!0;let e=!1;for(const t of i)L(t,f[t]),d.get(t)&&(d.set(t,!1),e=!0);e&&N()}else i.includes(e)&&(L(e,f[e]),d.get(e)&&(d.set(e,!1),N()))},childExists:async({parent:e=n,childProperty:t,childSelector:o='iframe',timeout:c=1e3,maxTimeout:i=15e3})=>{let s=1;const r=t?()=>e[t]:()=>e.querySelector(o);return new Promise((e=>{const t=()=>{if(r()||s++*c>i)return e(void 0!==r());setTimeout(t,c)};t()}))},getState:()=>({services:new Map(d),acceptedServices:[...d].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>c,run:e=>{if(o=document,n=window,c=e,f=c.services,s=c.onChange,i=g(f),0===i.length)return;l=c.currLang;const t=f[i[0]].languages;!0===c.autoLang?l=C(navigator.language.slice(0,2).toLowerCase(),t):h(c.currLang)&&(l=C(c.currLang,t));for(const e of i){r[e]=[];const t=o.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oA)})(); \ No newline at end of file diff --git a/src/iframemanager.css b/src/iframemanager.css index f714bda..73a45b4 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -43,6 +43,7 @@ div[data-service] .cll input{ overflow: hidden; -webkit-appearance: none; appearance: none; + display: revert; } div[data-service]{ @@ -204,7 +205,10 @@ div[data-service] .cll .c-n-t{ line-height: 1.4em; max-width: 420px; margin: 0 auto; - margin-bottom: 20px; +} + +div[data-service] .cll .c-n-t + div{ + margin-top: 20px; } div[data-service] .cll .c-n-t, diff --git a/src/iframemanager.js b/src/iframemanager.js index 8eaca0d..877ea42 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -12,8 +12,6 @@ * @property {string} _title * @property {string} _thumbnail * @property {string} _params - * @property {boolean} _thumbnailPreload - * @property {boolean} _autoscale * @property {HTMLDivElement} _div * @property {HTMLDivElement} _innerContainer * @property {HTMLDivElement} _placeholderDiv @@ -72,21 +70,13 @@ */ doc, + config, + /** * @type {Object.} */ iframeDivs = {}, - /** - * @type {string[]} - */ - preconnects = [], - - /** - * @type {string[]} - */ - preloads = [], - stopObserver = false, currLang = '', @@ -98,7 +88,7 @@ /** * @type {string[]} */ - serviceNames = [], + serviceNames, /** * @type {Map} @@ -123,16 +113,57 @@ const isString = el => typeof el === 'string'; const getBrowserLang = () => navigator.language.slice(0, 2).toLowerCase(); + /** + * Create and return HTMLElement based on specified type + * @param {string} type + */ + const createNode = (type) => doc.createElement(type); + + /** + * @returns {HTMLDivElement} + */ + const createDiv = () => createNode('div'); + + /** + * @returns {HTMLButtonElement} + */ + const createButton = () => { + const btn = createNode('button'); + btn.type = 'button'; + return btn; + } + + /** + * @param {HTMLElement} el + * @param {string} className + */ + const setClassName = (el, className) => el.className = className; + + /** + * @param {HTMLElement} parent + * @param {HTMLElement} child + */ + const appendChild = (parent, child) => parent.appendChild(child); + /** * @returns {string[]} */ const getKeys = obj => obj && Object.keys(obj) || []; + /** + * @param {HTMLIFrameElement} iframe + * @param {Object.} attrs + */ + const setIframeAttributes = (iframe, attrs) => { + for(const key in attrs) + setAttribute(iframe, key, attrs[key]) + } + /** * @param {HTMLDivElement} div * @returns {IframeObj} */ - const getVideoProp = (div) => { + const getDivProps = (div) => { const dataset = div.dataset; const iframeAttrs = {}; @@ -143,6 +174,7 @@ .map(attr => attr.slice(12)); const placeholderDiv = div.querySelector('[data-placeholder]'); + placeholderDiv && placeholderDiv.removeAttribute('data-visible'); const placeholderClone = placeholderDiv && placeholderDiv.cloneNode(true); /** @@ -156,8 +188,6 @@ _title: dataset.title, _thumbnail: dataset.thumbnail, _params: dataset.params, - _thumbnailPreload: 'thumbnailpreload' in dataset, - _autoscale: 'autoscale' in dataset, _div: div, _innerContainer: null, _placeholderDiv: placeholderDiv, @@ -171,7 +201,6 @@ }; /** - * Lazy load all thumbnails of the iframes relative to specified service * @param {string} serviceName * @param {string} thumbnailUrl */ @@ -197,7 +226,6 @@ /** - * Set image as background * @param {string} url * @param {IframeObj} video */ @@ -217,22 +245,14 @@ // Set custom thumbnail if provided if(isString(video._thumbnail)){ - video._thumbnailPreload && preloadThumbnail(video._thumbnail); video._thumbnail !== '' && loadBackgroundImage(video._thumbnail); }else{ if(isFunction(url)){ - - url(video._id, (src) => { - preconnect(src); - video._thumbnailPreload && preloadThumbnail(src); - loadBackgroundImage(src); - }); + url(video._id, (src) => loadBackgroundImage(src)); }else if(isString(url)){ const src = url.replace(DATA_ID_PLACEHOLDER, video._id); - preconnect(src); - video._thumbnailPreload && preloadThumbnail(src); loadBackgroundImage(src); } } @@ -243,9 +263,8 @@ * Create iframe and append it into the specified div * @param {IframeObj} video * @param {Service} service - * @param {string} serviceName */ - const createIframe = (video, service, serviceName) => { + const createIframe = (video, service) => { // Create iframe only if doesn't alredy have one if(video._hasIframe) @@ -267,19 +286,17 @@ service.onAccept(video._div, (iframe) => { if(!(iframe instanceof HTMLIFrameElement)) - return; + return false; /** * Add global internal attributes */ - for(const key in iframeProps) - setAttribute(iframe, key, iframeProps[key]) + setIframeAttributes(iframe, iframeProps); /** * Add all data-attr-* attributes (iframe specific) */ - for(const attr in video._iframeAttributes) - setAttribute(iframe, attr, video._iframeAttributes[attr]) + setIframeAttributes(iframe, video._iframeAttributes); video._iframe = iframe; video._hasIframe = true; @@ -321,16 +338,12 @@ /** * Add global internal attributes */ - for(const key in iframeProps){ - setAttribute(video._iframe, key, iframeProps[key]) - } + setIframeAttributes(video._iframe, iframeProps); /** * Add all data-attr-* attributes (iframe specific) */ - for(const attr in video._iframeAttributes){ - setAttribute(video._iframe, attr, video._iframeAttributes[attr]) - } + setIframeAttributes(video._iframe, video._iframeAttributes); video._iframe.src = src; @@ -431,81 +444,6 @@ doc.cookie = `${name}=; Path=${path}; Domain=${domain}; Expires=${expires};`; }; - /** - * Add link rel="preconnect" - * @param {string} _url - */ - const preconnect = (_url) => { - const url = _url.split('://'); - const protocol = url[0]; - - // if valid protocol - if( - protocol === 'http' || - protocol === 'https' - ){ - const domain = url[1] && url[1].split('/')[0]; - - // if not current domain - if(domain && domain !== location.hostname){ - if(preconnects.indexOf(domain) === -1){ - const link = createNode('link'); - link.rel = 'preconnect'; - link.href = `${protocol}://${domain}`; - appendChild(doc.head, link); - preconnects.push(domain); - } - } - } - }; - - /** - * Add link rel="preload" - * @param {string} url - */ - const preloadThumbnail = (url) => { - if(url && preloads.indexOf(url) === -1){ - const link = createNode('link'); - link.rel = 'preload'; - link.as = 'image'; - link.href = url; - appendChild(doc.head, link); - preloads.push(url); - } - } - - /** - * Create and return HTMLElement based on specified type - * @param {string} type - */ - const createNode = (type) => doc.createElement(type); - - /** - * @returns {HTMLDivElement} - */ - const createDiv = () => createNode('div'); - - /** - * @returns {HTMLButtonElement} - */ - const createButton = () => { - const btn = createNode('button'); - btn.type = 'button'; - return btn; - } - - /** - * @param {HTMLElement} el - * @param {string} className - */ - const setClassName = (el, className) => el.className = className; - - /** - * @param {HTMLElement} parent - * @param {HTMLElement} child - */ - const appendChild = (parent, child) => parent.appendChild(child); - /** * Create all notices relative to the specified service * @param {string} serviceName @@ -520,10 +458,10 @@ videos.forEach(video => { - if(!video._hasNotice){ - const loadBtnText = languages[currLang].loadBtn; - const noticeText = languages[currLang].notice; - const loadAllBtnText = languages[currLang].loadAllBtn; + if(!video._hasNotice && languages){ + const loadBtnText = languages[currLang]?.loadBtn; + const noticeText = languages[currLang]?.notice; + const loadAllBtnText = languages[currLang]?.loadAllBtn; const fragment = doc.createElement('div'); const notice = createDiv(); @@ -536,7 +474,7 @@ const showVideo = () => { hideNotice(video); - createIframe(video, service, serviceName); + createIframe(video, service); }; if(loadBtnText){ @@ -599,9 +537,10 @@ setClassName(notice, 'c-nt'); setClassName(buttons, 'c-n-a'); - appendChild(notice_text_container, span); - appendChild(notice_text_container, buttons); + + if(loadBtnText || loadAllBtnText) + appendChild(notice_text_container, buttons); appendChild(innerDiv, notice_text_container); appendChild(notice, innerDiv); @@ -736,7 +675,7 @@ const fireOnChangeCallback = () => { isFunction(onChangeCallback) && onChangeCallback({ - acceptedServices: [...servicesState].filter(([k, v]) => v === true).map(([k, v]) => k), + state: api.getState(), eventSource: currentEventSource }); } @@ -744,11 +683,9 @@ const api = { /** - * 1. Set cookie (if not alredy set) - * 2. show iframes (relative to the specified service) * @param {string} serviceName */ - acceptService : (serviceName) => { + acceptService: (serviceName) => { stopObserver = false; if(serviceName === 'all'){ @@ -777,12 +714,9 @@ }, /** - * 1. set cookie - * 2. hide all notices - * 3. how iframes (relative to the specified service) * @param {string} serviceName */ - rejectService : (serviceName) => { + rejectService: (serviceName) => { if(serviceName === 'all'){ stopObserver = true; @@ -828,7 +762,7 @@ * @param {number} [config.maxTimeout] * @returns {Promise} */ - childExists : async ({parent=win, childProperty, childSelector='iframe', timeout=1000, maxTimeout=15000}) => { + childExists: async ({parent=win, childProperty, childSelector='iframe', timeout=1000, maxTimeout=15000}) => { let nTimeouts = 1; @@ -848,17 +782,27 @@ }); }, - run : (_config) => { + getState: () => ({ + services: new Map(servicesState), + acceptedServices: [...servicesState] + .filter(([name, value]) => !!value) + .map(([name]) => name) + }), + + getConfig: () => config, + + run: (_config) => { doc = document; win = window; + config = _config; /** * Object with all services config. */ - services = _config.services; + services = config.services; - onChangeCallback = _config.onChange; + onChangeCallback = config.onChange; /** * Array containing the names of all services @@ -869,13 +813,13 @@ return; // Set curr lang - currLang = _config.currLang; + currLang = config.currLang; const languages = services[serviceNames[0]].languages; - if(_config.autoLang === true){ + if(config.autoLang === true){ currLang = getValidatedLanguage(getBrowserLang(), languages); - }else if(isString(_config.currLang)){ - currLang = getValidatedLanguage(_config.currLang, languages); + }else if(isString(config.currLang)){ + currLang = getValidatedLanguage(config.currLang, languages); } // for each service @@ -884,18 +828,11 @@ // add new empty array of videos (with current service name as property) iframeDivs[serviceName] = []; - /** - * iframes/divs in the dom that have data-service value as current service name - */ /** * @type {NodeListOf} */ const foundDivs = doc.querySelectorAll(`div[data-service="${serviceName}"]`); - - /** - * number of iframes with current service - */ const nDivs = foundDivs.length; // if no iframes found => go to next service @@ -906,7 +843,7 @@ // add each iframe to array of iframes of the current service for(let j=0; j Date: Thu, 12 Jan 2023 01:46:20 +0100 Subject: [PATCH 37/53] Update demo example: cleanup --- demo/app.js | 186 ++-------------------------------------------------- 1 file changed, 5 insertions(+), 181 deletions(-) diff --git a/demo/app.js b/demo/app.js index 4e3e32d..d6f5f90 100644 --- a/demo/app.js +++ b/demo/app.js @@ -4,14 +4,8 @@ const im = iframemanager(); im.run({ - /** - * @param {{ - * acceptedServices: string[] - * eventSource: 'click' | 'api' - * }} - */ - onChange: ({acceptedServices, eventSource}) => { - console.log(eventSource, acceptedServices) + onChange: ({state, eventSource}) => { + console.log(state, eventSource) }, currLang: 'en', @@ -192,180 +186,10 @@ im.run({ // The map, centered at Uluru const map = new google.maps.Map(div.querySelector('.map'), { zoom: 4, - center: uluru, - styles: [ - { - "featureType": "all", - "elementType": "geometry.fill", - "stylers": [ - { - "weight": "2.00" - } - ] - }, - { - "featureType": "all", - "elementType": "geometry.stroke", - "stylers": [ - { - "color": "#9c9c9c" - } - ] - }, - { - "featureType": "all", - "elementType": "labels.text", - "stylers": [ - { - "visibility": "on" - } - ] - }, - { - "featureType": "landscape", - "elementType": "all", - "stylers": [ - { - "color": "#f2f2f2" - } - ] - }, - { - "featureType": "landscape", - "elementType": "geometry.fill", - "stylers": [ - { - "color": "#ffffff" - } - ] - }, - { - "featureType": "landscape.man_made", - "elementType": "geometry.fill", - "stylers": [ - { - "color": "#ffffff" - } - ] - }, - { - "featureType": "poi", - "elementType": "all", - "stylers": [ - { - "visibility": "off" - } - ] - }, - { - "featureType": "road", - "elementType": "all", - "stylers": [ - { - "saturation": -100 - }, - { - "lightness": 45 - } - ] - }, - { - "featureType": "road", - "elementType": "geometry.fill", - "stylers": [ - { - "color": "#eeeeee" - } - ] - }, - { - "featureType": "road", - "elementType": "labels.text.fill", - "stylers": [ - { - "color": "#7b7b7b" - } - ] - }, - { - "featureType": "road", - "elementType": "labels.text.stroke", - "stylers": [ - { - "color": "#ffffff" - } - ] - }, - { - "featureType": "road.highway", - "elementType": "all", - "stylers": [ - { - "visibility": "simplified" - } - ] - }, - { - "featureType": "road.arterial", - "elementType": "labels.icon", - "stylers": [ - { - "visibility": "off" - } - ] - }, - { - "featureType": "transit", - "elementType": "all", - "stylers": [ - { - "visibility": "off" - } - ] - }, - { - "featureType": "water", - "elementType": "all", - "stylers": [ - { - "color": "#46bcec" - }, - { - "visibility": "on" - } - ] - }, - { - "featureType": "water", - "elementType": "geometry.fill", - "stylers": [ - { - "color": "#c8d7d4" - } - ] - }, - { - "featureType": "water", - "elementType": "labels.text.fill", - "stylers": [ - { - "color": "#070707" - } - ] - }, - { - "featureType": "water", - "elementType": "labels.text.stroke", - "stylers": [ - { - "color": "#ffffff" - } - ] - } - ] + center: uluru }); - if(div.dataset.mapsMarker === ""){ + if(div.dataset.mapsMarker === ''){ // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, @@ -373,7 +197,7 @@ im.run({ }); } - if(div.dataset.mapsStreetview === ""){ + if(div.dataset.mapsStreetview === ''){ const panorama = new google.maps.StreetViewPanorama(div.querySelector('.map'), { position: uluru, pov: { From c94d2a8cbe672fbb433e8e9e99f73155e2c6ea68 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 12 Jan 2023 02:21:28 +0100 Subject: [PATCH 38/53] Update Readme.md: new api and placeholder div --- README.md | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 66d29bd..c232835 100644 --- a/README.md +++ b/README.md @@ -290,11 +290,59 @@ Note: `thumbnailUrl` can be static string, dynamic string or a function: } ``` +## Custom Widgets +Some services (e.g. twitter) have their own markup + API to generate the iframe. + +1. Place the markup inside a special `data-placeholder` div. Remove any `script` tag that comes with the markup. Example: + + ```html +
+ +
+ +
+ +
+ ``` + +2. [WIP] +3. ? + + + +It is highly recommended to set a fixed `width` and `height` to the main `data-service` div, to avoid the (awful) content jump effect when the iframe is loaded. + + + +## Placeholder for non-js browsers +You can set a placeholder visible only if javascript is disabled via a special div: +```html +
+``` + +Example: +```html +
+ +
+

I'm visible only if js is disabled

+
+ +
+``` + ## APIs -The plugin exposes 3 main methods: +The plugin exposes the following methods: - `.run()` - `.acceptService()` - `.rejectService()` +- `.getState()` [v1.2.0+] +- `.getConfig()` [v1.2.0+] Example usage: @@ -310,6 +358,15 @@ im.rejectService('youtube'); // reject all services (for example when user opts out of cookies) im.rejectService('all'); + +// get entire config object +const config = im.getConfig(); + +// get current state (enabled/disabled services) +const state = im.getState(); + +// state.services: Map +// state.acceptedServices: string[] ``` Both `acceptService` and `rejectService` work the same way: From d573db46babac4fc2b77c43d9c2b72c33c65f0a2 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Thu, 12 Jan 2023 02:48:30 +0100 Subject: [PATCH 39/53] Update Readme.md: add usage example with cookieconsent (wip) --- README.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/README.md b/README.md index c232835..c8ec28b 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or - [vimeo](#configuration-examples) - [twitch](#configuration-examples) - [google maps](#configuration-examples) +- [**Usage with CookieConsent**](#todo) - [**License**](#license) ## Features @@ -210,6 +211,13 @@ All available options for the config. object: autoLang: false, // if enabled => use current client's browser language // instead of currLang [OPTIONAL] + // callback fired when state changes (a new service is accepted/rejected) + onChange: ({state, eventSource}) => { + // state.services: Map + // state.acceptedServices: string[] + // eventSource: 'api' | 'click' + } + services : { myservice : { @@ -586,8 +594,43 @@ Both `acceptService` and `rejectService` work the same way:

+## Usage with CookieConsent [v1.2.0+] +You can use the `onChange` callback to detect when an iframe is loaded by the `loadAllBtn` button click event and notify CookieConsent to also update its state. + +Example: +```javascript +im.run({ + currLang: 'en', + + onChange: ({state, eventSource}) => { + + if(eventSource === 'click') { + CookieConsent.acceptService(state.acceptedServices); // CookieConsent v3 + } + + }, + + services: { + youtube: { + embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}', + thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg', + iframe: { + allow: 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', + }, + + 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.', + loadBtn: 'Load video', + loadAllBtn: "Don't ask again" + } + } + } + } +}); +``` ### Available `data-ratio` From 852f9ba0a00c5df96304e5e10609c829616a0e0f Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 14 Jan 2023 04:37:41 +0100 Subject: [PATCH 40/53] Update `onChange` callback parameters --- dist/iframemanager.js | 2 +- src/iframemanager.js | 39 +++++++++++++++++++++++++++------------ 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/dist/iframemanager.js b/dist/iframemanager.js index 024881a..220b828 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -(()=>{'use strict';const e='click',t='{data-id}';let n,o,c,i,s,r={},a=!1,l='',f={},d=new Map,u='api';const m=['onload','onerror','src'],v=e=>'function'==typeof e,h=e=>'string'==typeof e,b=e=>o.createElement(e),p=()=>b('div'),w=()=>{const e=b('button');return e.type='button',e},_=(e,t)=>e.className=t,$=(e,t)=>e.appendChild(t),g=e=>e&&Object.keys(e)||[],S=(e,t)=>{for(const n in t)y(e,n,t[n])},I=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]');i&&i.removeAttribute('data-visible');const s=i&&i.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,m:null,v:i,h:s,p:null,_:!1,$:!1,g:!0,S:n}},x=(e,t)=>{const o=r[e];if('IntersectionObserver'in n){const e=new IntersectionObserver((n=>{n.forEach((n=>{n.isIntersecting&&(T(t,o[n.target.dataset.index]),e.unobserve(n.target))}))}));for(const t of o)e.observe(t.u)}},T=(e,n)=>{const o=e=>{n.p.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>{n.p.classList.add('loaded')},t.src=e};if(h(n.i))''!==n.i&&o(n.i);else if(v(e))e(n.t,(e=>o(e)));else if(h(e)){const c=e.replace(t,n.t);o(c)}},k=(e,n)=>{if(e._)return;if(e._=!0,e.v){const t=e.h.cloneNode(!0);e.v.replaceWith(t),e.v=t}const o=n.iframe;if(v(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;S(t,o),S(t,e.S),e.I=t,e._=!0,e.u.classList.add('c-h-b')}));e.I=b('iframe');const c=e.l||n.iframe&&n.iframe.params;let i=(n.embedUrl||'').replace(t,e.t);e.o&&(e.I.title=e.o),c&&('ap:'===c.substring(0,3)?i+=c.substring(3):i+='?'+c),e.I.onload=()=>{e.u.classList.add('c-h-b'),e.I.onload=void 0,o&&v(o.onload)&&o.onload(e.t,e.I)},S(e.I,o),S(e.I,e.S),e.I.src=i,$(e.m,e.I)},y=(e,t,n)=>{m.includes(t)||e.setAttribute(t,n)},D=e=>{e.u.classList.add('c-h-n'),e.g=!1},O=e=>{e.u.classList.remove('c-h-n','c-h-b'),e.g=!0},P=e=>(e=o.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',E=(t,n,c)=>{const i=r[t],s=n.languages;i.forEach((i=>{if(!i.$&&s){const r=s[l]?.loadBtn,a=s[l]?.notice,f=s[l]?.loadAllBtn,d=o.createElement('div'),m=p(),v=p(),g=p(),S=p();_(d,'cll'),i.m=d;const I=()=>{D(i),k(i,n)};if(r){const t=w();t.textContent=r,_(t,'c-l-b'),t.addEventListener(e,I),$(S,t)}if(f){const n=w();n.textContent=f,_(n,'c-la-b'),n.addEventListener(e,(()=>{I(),u=e,A.acceptService(t)})),$(S,n)}const x=p(),T=p(),y=p(),O=p(),P=p();_(x,'cc-text'),_(O,'c-bg-i'),i.p=O,_(y,'c-ld'),h(i.i)&&''===i.i||_(T,'c-bg');const E=i.o,M=o.createDocumentFragment();if(E){const e=b('span');_(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),$(M,e)}$(x,M),m&&x.insertAdjacentHTML('beforeend',a||''),$(v,x),_(P,'c-t-cn'),_(v,'c-n-t'),_(g,'c-n-c'),_(m,'c-nt'),_(S,'c-n-a'),$(P,v),(r||f)&&$(P,S),$(g,P),$(m,g),$(T,O),$(d,m),(n.thumbnailUrl||i.i)&&$(d,T),$(d,y),c&&i.u.classList.add('c-h-n'),i.u.prepend(d),i.$=!0}}))},M=(e,t)=>{const o=r[e];if('IntersectionObserver'in n){const e=new IntersectionObserver((n=>{if(a)e.disconnect();else for(let c=0;c{const i=n[c].target;setTimeout((()=>{const e=i.dataset.index;k(o[e],t),D(o[e])}),50*c),e.unobserve(i)})(c)}));o.forEach((t=>{t._||e.observe(t.u)}))}},C=(e,t)=>e in t?e:g(t).length>0?l in t?l:g(t)[0]:void 0,j=(e,t)=>{const{cookie:n}=t;P(n.name)||(e=>{const{hostname:t,protocol:n}=location,c=e.name,i=new Date,s=e.path||'/',r=864e5*(e.expiration||182),a=e.sameSite||'Lax',l=e.domain||t;i.setTime(i.getTime()+r);let f=c+'=1'+(0!==r?`; Expires=${i.toUTCString()}`:'')+`; Path=${s}`+`; SameSite=${a}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),o.cookie=f})(n),M(e,t)},L=(e,t)=>{const{cookie:n}=t;P(n.name)&&(e=>{const t=e.name,n=e.path||'/',c=e.domain||location.hostname;o.cookie=`${t}=; Path=${n}; Domain=${c}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=r[e];for(let e=0;e{var o;n[e]._&&(v(t.onReject)?(t.onReject(n[e].I),n[e]._=!1):((o=n[e]).I.parentNode.removeChild(o.I),o._=!1)),O(n[e])})(e)})(e,t)},N=()=>{v(s)&&s({state:A.getState(),eventSource:u})},A={acceptService:e=>{if(a=!1,'all'===e){let e=!1;for(const t of i)d.get(t)||(d.set(t,!0),j(t,f[t]),e=!0);e&&N()}else i.includes(e)&&(d.get(e)||(d.set(e,!0),j(e,f[e]),N()));u='api'},rejectService:e=>{if('all'===e){a=!0;let e=!1;for(const t of i)L(t,f[t]),d.get(t)&&(d.set(t,!1),e=!0);e&&N()}else i.includes(e)&&(L(e,f[e]),d.get(e)&&(d.set(e,!1),N()))},childExists:async({parent:e=n,childProperty:t,childSelector:o='iframe',timeout:c=1e3,maxTimeout:i=15e3})=>{let s=1;const r=t?()=>e[t]:()=>e.querySelector(o);return new Promise((e=>{const t=()=>{if(r()||s++*c>i)return e(void 0!==r());setTimeout(t,c)};t()}))},getState:()=>({services:new Map(d),acceptedServices:[...d].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>c,run:e=>{if(o=document,n=window,c=e,f=c.services,s=c.onChange,i=g(f),0===i.length)return;l=c.currLang;const t=f[i[0]].languages;!0===c.autoLang?l=C(navigator.language.slice(0,2).toLowerCase(),t):h(c.currLang)&&(l=C(c.currLang,t));for(const e of i){r[e]=[];const t=o.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oA)})(); \ No newline at end of file +(()=>{'use strict';const e='click',t='{data-id}',n='ACCEPT',o='REJECT';let c,i,s,r,a,l={},f=!1,d='',u={},m=new Map,v='api';const h=['onload','onerror','src'],p=e=>'function'==typeof e,b=e=>'string'==typeof e,w=e=>i.createElement(e),_=()=>w('div'),g=()=>{const e=w('button');return e.type='button',e},$=(e,t)=>e.className=t,S=(e,t)=>e.appendChild(t),T=e=>e&&Object.keys(e)||[],E=(e,t)=>{for(const n in t)P(e,n,t[n])},I=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]');i&&i.removeAttribute('data-visible');const s=i&&i.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,m:null,v:i,h:s,p:null,_:!1,g:!1,$:!0,S:n}},x=(e,t)=>{const n=l[e];if('IntersectionObserver'in c){const e=new IntersectionObserver((o=>{o.forEach((o=>{o.isIntersecting&&(y(t,n[o.target.dataset.index]),e.unobserve(o.target))}))}));for(const t of n)e.observe(t.u)}},y=(e,n)=>{const o=e=>{n.p.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>{n.p.classList.add('loaded')},t.src=e};if(b(n.i))''!==n.i&&o(n.i);else if(p(e))e(n.t,(e=>o(e)));else if(b(e)){const c=e.replace(t,n.t);o(c)}},C=(e,n)=>{if(e._)return;if(e._=!0,e.v){const t=e.h.cloneNode(!0);e.v.replaceWith(t),e.v=t}const o=n.iframe;if(p(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;E(t,o),E(t,e.S),e.T=t,e._=!0,e.u.classList.add('c-h-b')}));e.T=w('iframe');const c=e.l||n.iframe&&n.iframe.params;let i=(n.embedUrl||'').replace(t,e.t);e.o&&(e.T.title=e.o),c&&('ap:'===c.substring(0,3)?i+=c.substring(3):i+='?'+c),e.T.onload=()=>{e.u.classList.add('c-h-b'),e.T.onload=void 0,o&&p(o.onload)&&o.onload(e.t,e.T)},E(e.T,o),E(e.T,e.S),e.T.src=i,S(e.m,e.T)},P=(e,t,n)=>{h.includes(t)||e.setAttribute(t,n)},k=e=>{e.u.classList.add('c-h-n'),e.$=!1},D=e=>{e.u.classList.remove('c-h-n','c-h-b'),e.$=!0},O=e=>(e=i.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',M=(t,n,o)=>{const c=l[t],s=n.languages;c.forEach((c=>{if(!c.g&&s){const r=s[d]?.loadBtn,a=s[d]?.notice,l=s[d]?.loadAllBtn,f=i.createElement('div'),u=_(),m=_(),h=_(),p=_();$(f,'cll'),c.m=f;const T=()=>{k(c),C(c,n)};if(r){const t=g();t.textContent=r,$(t,'c-l-b'),t.addEventListener(e,T),S(p,t)}if(l){const n=g();n.textContent=l,$(n,'c-la-b'),n.addEventListener(e,(()=>{T(),v=e,F.acceptService(t)})),S(p,n)}const E=_(),I=_(),x=_(),y=_(),P=_();$(E,'cc-text'),$(y,'c-bg-i'),c.p=y,$(x,'c-ld'),b(c.i)&&''===c.i||$(I,'c-bg');const D=c.o,O=i.createDocumentFragment();if(D){const e=w('span');$(e,'c-tl'),e.insertAdjacentHTML('beforeend',D),S(O,e)}S(E,O),u&&E.insertAdjacentHTML('beforeend',a||''),S(m,E),$(P,'c-t-cn'),$(m,'c-n-t'),$(h,'c-n-c'),$(u,'c-nt'),$(p,'c-n-a'),S(P,m),(r||l)&&S(P,p),S(h,P),S(u,h),S(I,y),S(f,u),(n.thumbnailUrl||c.i)&&S(f,I),S(f,x),o&&c.u.classList.add('c-h-n'),c.u.prepend(f),c.g=!0,setTimeout((()=>c.u.classList.add('c-an')),20)}}))},j=(e,t)=>{const n=l[e];if('IntersectionObserver'in c){const e=new IntersectionObserver((o=>{if(f)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;C(n[e],t),k(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},A=(e,t)=>e in t?e:T(t).length>0?d in t?d:T(t)[0]:void 0,J=(e,t)=>{const{cookie:n}=t;O(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,s=e.path||'/',r=864e5*(e.expiration||182),a=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+r);let f=o+'=1'+(0!==r?`; Expires=${c.toUTCString()}`:'')+`; Path=${s}`+`; SameSite=${a}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),i.cookie=f})(n),j(e,t)},L=(e,t)=>{const{cookie:n}=t;O(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;i.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=l[e];for(let e=0;e{var o;n[e]._&&(p(t.onReject)?(t.onReject(n[e].T),n[e]._=!1):((o=n[e]).T.parentNode.removeChild(o.T),o._=!1)),D(n[e])})(e)})(e,t)},N=(e,t,n)=>{p(a)&&a({eventSource:{type:v,service:e,action:t},changedServices:n})},F={acceptService:e=>{f=!1;const t=[];if('all'===e){for(const e of r)m.get(e)||(m.set(e,!0),J(e,u[e]),t.push(e));t.length>0&&N(e,n,t)}else r.includes(e)&&(m.get(e)||(m.set(e,!0),J(e,u[e]),t.push(e),N(e,n,t)));v='api'},rejectService:e=>{const t=[];if('all'===e){f=!0;for(const e of r)L(e,u[e]),m.get(e)&&(m.set(e,!1),t.push(e));t.length>0&&N(e,o,t)}else r.includes(e)&&(L(e,u[e]),m.get(e)&&(m.set(e,!1),t.push(e),N(e,o,t)))},childExists:async({parent:e=c,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:i=15e3})=>{let s=1;const r=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(r()||s++*o>i)return e(void 0!==r());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(m),acceptedServices:[...m].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>s,run:e=>{if(i=document,c=window,s=e,u=s.services,a=s.onChange,r=T(u),0===r.length)return;d=s.currLang;const t=u[r[0]].languages;!0===s.autoLang?d=A(navigator.language.slice(0,2).toLowerCase(),t):b(s.currLang)&&(d=A(s.currLang,t));for(const e of r){l[e]=[];const t=i.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oF)})(); \ No newline at end of file diff --git a/src/iframemanager.js b/src/iframemanager.js index 877ea42..ab61306 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -57,6 +57,8 @@ const API_EVENT_SOURCE = 'api'; const CLICK_EVENT_SOURCE = 'click'; const DATA_ID_PLACEHOLDER = '{data-id}'; + const ACCEPT_ACTION = 'ACCEPT'; + const REJECT_ACTION = 'REJECT'; let @@ -555,6 +557,8 @@ // Avoid reflow with fragment (only 1 appendChild) video._div.prepend(fragment); video._hasNotice = true; + + setTimeout(()=> video._div.classList.add('c-an'), 20); } }); }; @@ -673,10 +677,19 @@ showAllNotices(serviceName, service); }; - const fireOnChangeCallback = () => { + /** + * @param {string} serviceName + * @param {'accept' | 'reject'} action + * @param {string[]} changedServices + */ + const fireOnChangeCallback = (serviceName, action, changedServices) => { isFunction(onChangeCallback) && onChangeCallback({ - state: api.getState(), - eventSource: currentEventSource + eventSource: { + type: currentEventSource, + service: serviceName, + action + }, + changedServices }); } @@ -687,6 +700,7 @@ */ acceptService: (serviceName) => { stopObserver = false; + const changedServices = []; if(serviceName === 'all'){ let changed = false; @@ -695,18 +709,18 @@ if(!servicesState.get(name)){ servicesState.set(name, true); acceptHelper(name, services[name]); - changed = true; + changedServices.push(name); } } - changed && fireOnChangeCallback(); + changedServices.length > 0 && fireOnChangeCallback(serviceName, ACCEPT_ACTION, changedServices); }else if(serviceNames.includes(serviceName)){ if(!servicesState.get(serviceName)){ servicesState.set(serviceName, true); acceptHelper(serviceName, services[serviceName]); - - fireOnChangeCallback(); + changedServices.push(serviceName); + fireOnChangeCallback(serviceName, ACCEPT_ACTION, changedServices); } } @@ -718,21 +732,21 @@ */ rejectService: (serviceName) => { + const changedServices = []; + if(serviceName === 'all'){ stopObserver = true; - let changed = false; - for(const name of serviceNames){ rejectHelper(name, services[name]); if(servicesState.get(name)){ servicesState.set(name, false); - changed = true; + changedServices.push(name); } } - changed && fireOnChangeCallback(); + changedServices.length > 0 && fireOnChangeCallback(serviceName, REJECT_ACTION, changedServices); }else if(serviceNames.includes(serviceName)){ @@ -740,8 +754,9 @@ if(servicesState.get(serviceName)){ servicesState.set(serviceName, false); + changedServices.push(serviceName); - fireOnChangeCallback(); + fireOnChangeCallback(serviceName, REJECT_ACTION, changedServices); } } }, From efee6699a6837c4d220298639545e93b715158ed Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 14 Jan 2023 05:07:14 +0100 Subject: [PATCH 41/53] Update "Usage with CookieConsent" section and `onChange` callback parameters --- README.md | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index c8ec28b..2770604 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or - [vimeo](#configuration-examples) - [twitch](#configuration-examples) - [google maps](#configuration-examples) -- [**Usage with CookieConsent**](#todo) +- [**Usage with CookieConsent**](#usage-with-cookieconsent-v120) - [**License**](#license) ## Features @@ -213,9 +213,10 @@ All available options for the config. object: // callback fired when state changes (a new service is accepted/rejected) onChange: ({state, eventSource}) => { - // state.services: Map - // state.acceptedServices: string[] - // eventSource: 'api' | 'click' + // changedServices: string[] + // eventSource.type: 'api' | 'click' + // eventSource.service: string + // eventSource.action: 'accept' | 'reject' } services : { @@ -602,12 +603,21 @@ Example: im.run({ currLang: 'en', - onChange: ({state, eventSource}) => { + onChange: ({changedServices, eventSource}) => { - if(eventSource === 'click') { - CookieConsent.acceptService(state.acceptedServices); // CookieConsent v3 - } + if(eventSource.type === 'click') { + /** + * Retrieve array of already accepted services + * and add the new service + */ + const servicesToAccept = [ + ...CookieConsent.getUserPreferences().acceptedServices, //cookieconsent v3 + ...changedServices + ]; + + CookieConsent.acceptService(servicesToAccept, 'analytics'); + } }, services: { From e8bf1b0f99f71751b934d73b953fa79da91e6acd Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 14 Jan 2023 05:07:57 +0100 Subject: [PATCH 42/53] Minor tweak: use lower case name --- dist/iframemanager.js | 2 +- src/iframemanager.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/iframemanager.js b/dist/iframemanager.js index 220b828..c53a553 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -(()=>{'use strict';const e='click',t='{data-id}',n='ACCEPT',o='REJECT';let c,i,s,r,a,l={},f=!1,d='',u={},m=new Map,v='api';const h=['onload','onerror','src'],p=e=>'function'==typeof e,b=e=>'string'==typeof e,w=e=>i.createElement(e),_=()=>w('div'),g=()=>{const e=w('button');return e.type='button',e},$=(e,t)=>e.className=t,S=(e,t)=>e.appendChild(t),T=e=>e&&Object.keys(e)||[],E=(e,t)=>{for(const n in t)P(e,n,t[n])},I=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]');i&&i.removeAttribute('data-visible');const s=i&&i.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,m:null,v:i,h:s,p:null,_:!1,g:!1,$:!0,S:n}},x=(e,t)=>{const n=l[e];if('IntersectionObserver'in c){const e=new IntersectionObserver((o=>{o.forEach((o=>{o.isIntersecting&&(y(t,n[o.target.dataset.index]),e.unobserve(o.target))}))}));for(const t of n)e.observe(t.u)}},y=(e,n)=>{const o=e=>{n.p.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>{n.p.classList.add('loaded')},t.src=e};if(b(n.i))''!==n.i&&o(n.i);else if(p(e))e(n.t,(e=>o(e)));else if(b(e)){const c=e.replace(t,n.t);o(c)}},C=(e,n)=>{if(e._)return;if(e._=!0,e.v){const t=e.h.cloneNode(!0);e.v.replaceWith(t),e.v=t}const o=n.iframe;if(p(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;E(t,o),E(t,e.S),e.T=t,e._=!0,e.u.classList.add('c-h-b')}));e.T=w('iframe');const c=e.l||n.iframe&&n.iframe.params;let i=(n.embedUrl||'').replace(t,e.t);e.o&&(e.T.title=e.o),c&&('ap:'===c.substring(0,3)?i+=c.substring(3):i+='?'+c),e.T.onload=()=>{e.u.classList.add('c-h-b'),e.T.onload=void 0,o&&p(o.onload)&&o.onload(e.t,e.T)},E(e.T,o),E(e.T,e.S),e.T.src=i,S(e.m,e.T)},P=(e,t,n)=>{h.includes(t)||e.setAttribute(t,n)},k=e=>{e.u.classList.add('c-h-n'),e.$=!1},D=e=>{e.u.classList.remove('c-h-n','c-h-b'),e.$=!0},O=e=>(e=i.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',M=(t,n,o)=>{const c=l[t],s=n.languages;c.forEach((c=>{if(!c.g&&s){const r=s[d]?.loadBtn,a=s[d]?.notice,l=s[d]?.loadAllBtn,f=i.createElement('div'),u=_(),m=_(),h=_(),p=_();$(f,'cll'),c.m=f;const T=()=>{k(c),C(c,n)};if(r){const t=g();t.textContent=r,$(t,'c-l-b'),t.addEventListener(e,T),S(p,t)}if(l){const n=g();n.textContent=l,$(n,'c-la-b'),n.addEventListener(e,(()=>{T(),v=e,F.acceptService(t)})),S(p,n)}const E=_(),I=_(),x=_(),y=_(),P=_();$(E,'cc-text'),$(y,'c-bg-i'),c.p=y,$(x,'c-ld'),b(c.i)&&''===c.i||$(I,'c-bg');const D=c.o,O=i.createDocumentFragment();if(D){const e=w('span');$(e,'c-tl'),e.insertAdjacentHTML('beforeend',D),S(O,e)}S(E,O),u&&E.insertAdjacentHTML('beforeend',a||''),S(m,E),$(P,'c-t-cn'),$(m,'c-n-t'),$(h,'c-n-c'),$(u,'c-nt'),$(p,'c-n-a'),S(P,m),(r||l)&&S(P,p),S(h,P),S(u,h),S(I,y),S(f,u),(n.thumbnailUrl||c.i)&&S(f,I),S(f,x),o&&c.u.classList.add('c-h-n'),c.u.prepend(f),c.g=!0,setTimeout((()=>c.u.classList.add('c-an')),20)}}))},j=(e,t)=>{const n=l[e];if('IntersectionObserver'in c){const e=new IntersectionObserver((o=>{if(f)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;C(n[e],t),k(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},A=(e,t)=>e in t?e:T(t).length>0?d in t?d:T(t)[0]:void 0,J=(e,t)=>{const{cookie:n}=t;O(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,s=e.path||'/',r=864e5*(e.expiration||182),a=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+r);let f=o+'=1'+(0!==r?`; Expires=${c.toUTCString()}`:'')+`; Path=${s}`+`; SameSite=${a}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),i.cookie=f})(n),j(e,t)},L=(e,t)=>{const{cookie:n}=t;O(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;i.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=l[e];for(let e=0;e{var o;n[e]._&&(p(t.onReject)?(t.onReject(n[e].T),n[e]._=!1):((o=n[e]).T.parentNode.removeChild(o.T),o._=!1)),D(n[e])})(e)})(e,t)},N=(e,t,n)=>{p(a)&&a({eventSource:{type:v,service:e,action:t},changedServices:n})},F={acceptService:e=>{f=!1;const t=[];if('all'===e){for(const e of r)m.get(e)||(m.set(e,!0),J(e,u[e]),t.push(e));t.length>0&&N(e,n,t)}else r.includes(e)&&(m.get(e)||(m.set(e,!0),J(e,u[e]),t.push(e),N(e,n,t)));v='api'},rejectService:e=>{const t=[];if('all'===e){f=!0;for(const e of r)L(e,u[e]),m.get(e)&&(m.set(e,!1),t.push(e));t.length>0&&N(e,o,t)}else r.includes(e)&&(L(e,u[e]),m.get(e)&&(m.set(e,!1),t.push(e),N(e,o,t)))},childExists:async({parent:e=c,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:i=15e3})=>{let s=1;const r=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(r()||s++*o>i)return e(void 0!==r());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(m),acceptedServices:[...m].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>s,run:e=>{if(i=document,c=window,s=e,u=s.services,a=s.onChange,r=T(u),0===r.length)return;d=s.currLang;const t=u[r[0]].languages;!0===s.autoLang?d=A(navigator.language.slice(0,2).toLowerCase(),t):b(s.currLang)&&(d=A(s.currLang,t));for(const e of r){l[e]=[];const t=i.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oF)})(); \ No newline at end of file +(()=>{'use strict';const e='click',t='{data-id}',n='accept',o='reject';let c,i,s,r,a,l={},f=!1,d='',u={},m=new Map,v='api';const h=['onload','onerror','src'],p=e=>'function'==typeof e,b=e=>'string'==typeof e,w=e=>i.createElement(e),_=()=>w('div'),g=()=>{const e=w('button');return e.type='button',e},$=(e,t)=>e.className=t,S=(e,t)=>e.appendChild(t),I=e=>e&&Object.keys(e)||[],T=(e,t)=>{for(const n in t)O(e,n,t[n])},x=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]');i&&i.removeAttribute('data-visible');const s=i&&i.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,m:null,v:i,h:s,p:null,_:!1,g:!1,$:!0,S:n}},y=(e,t)=>{const n=l[e];if('IntersectionObserver'in c){const e=new IntersectionObserver((o=>{o.forEach((o=>{o.isIntersecting&&(k(t,n[o.target.dataset.index]),e.unobserve(o.target))}))}));for(const t of n)e.observe(t.u)}},k=(e,n)=>{const o=e=>{n.p.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>{n.p.classList.add('loaded')},t.src=e};if(b(n.i))''!==n.i&&o(n.i);else if(p(e))e(n.t,(e=>o(e)));else if(b(e)){const c=e.replace(t,n.t);o(c)}},D=(e,n)=>{if(e._)return;if(e._=!0,e.v){const t=e.h.cloneNode(!0);e.v.replaceWith(t),e.v=t}const o=n.iframe;if(p(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;T(t,o),T(t,e.S),e.I=t,e._=!0,e.u.classList.add('c-h-b')}));e.I=w('iframe');const c=e.l||n.iframe&&n.iframe.params;let i=(n.embedUrl||'').replace(t,e.t);e.o&&(e.I.title=e.o),c&&('ap:'===c.substring(0,3)?i+=c.substring(3):i+='?'+c),e.I.onload=()=>{e.u.classList.add('c-h-b'),e.I.onload=void 0,o&&p(o.onload)&&o.onload(e.t,e.I)},T(e.I,o),T(e.I,e.S),e.I.src=i,S(e.m,e.I)},O=(e,t,n)=>{h.includes(t)||e.setAttribute(t,n)},P=e=>{e.u.classList.add('c-h-n'),e.$=!1},E=e=>{e.u.classList.remove('c-h-n','c-h-b'),e.$=!0},M=e=>(e=i.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',j=(t,n,o)=>{const c=l[t],s=n.languages;c.forEach((c=>{if(!c.g&&s){const r=s[d]?.loadBtn,a=s[d]?.notice,l=s[d]?.loadAllBtn,f=i.createElement('div'),u=_(),m=_(),h=_(),p=_();$(f,'cll'),c.m=f;const I=()=>{P(c),D(c,n)};if(r){const t=g();t.textContent=r,$(t,'c-l-b'),t.addEventListener(e,I),S(p,t)}if(l){const n=g();n.textContent=l,$(n,'c-la-b'),n.addEventListener(e,(()=>{I(),v=e,G.acceptService(t)})),S(p,n)}const T=_(),x=_(),y=_(),k=_(),O=_();$(T,'cc-text'),$(k,'c-bg-i'),c.p=k,$(y,'c-ld'),b(c.i)&&''===c.i||$(x,'c-bg');const E=c.o,M=i.createDocumentFragment();if(E){const e=w('span');$(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),S(M,e)}S(T,M),u&&T.insertAdjacentHTML('beforeend',a||''),S(m,T),$(O,'c-t-cn'),$(m,'c-n-t'),$(h,'c-n-c'),$(u,'c-nt'),$(p,'c-n-a'),S(O,m),(r||l)&&S(O,p),S(h,O),S(u,h),S(x,k),S(f,u),(n.thumbnailUrl||c.i)&&S(f,x),S(f,y),o&&c.u.classList.add('c-h-n'),c.u.prepend(f),c.g=!0,setTimeout((()=>c.u.classList.add('c-an')),20)}}))},C=(e,t)=>{const n=l[e];if('IntersectionObserver'in c){const e=new IntersectionObserver((o=>{if(f)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;D(n[e],t),P(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},L=(e,t)=>e in t?e:I(t).length>0?d in t?d:I(t)[0]:void 0,N=(e,t)=>{const{cookie:n}=t;M(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,s=e.path||'/',r=864e5*(e.expiration||182),a=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+r);let f=o+'=1'+(0!==r?`; Expires=${c.toUTCString()}`:'')+`; Path=${s}`+`; SameSite=${a}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),i.cookie=f})(n),C(e,t)},A=(e,t)=>{const{cookie:n}=t;M(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;i.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=l[e];for(let e=0;e{var o;n[e]._&&(p(t.onReject)?(t.onReject(n[e].I),n[e]._=!1):((o=n[e]).I.parentNode.removeChild(o.I),o._=!1)),E(n[e])})(e)})(e,t)},F=(e,t,n)=>{p(a)&&a({eventSource:{type:v,service:e,action:t},changedServices:n})},G={acceptService:e=>{f=!1;const t=[];if('all'===e){for(const e of r)m.get(e)||(m.set(e,!0),N(e,u[e]),t.push(e));t.length>0&&F(e,n,t)}else r.includes(e)&&(m.get(e)||(m.set(e,!0),N(e,u[e]),t.push(e),F(e,n,t)));v='api'},rejectService:e=>{const t=[];if('all'===e){f=!0;for(const e of r)A(e,u[e]),m.get(e)&&(m.set(e,!1),t.push(e));t.length>0&&F(e,o,t)}else r.includes(e)&&(A(e,u[e]),m.get(e)&&(m.set(e,!1),t.push(e),F(e,o,t)))},childExists:async({parent:e=c,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:i=15e3})=>{let s=1;const r=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(r()||s++*o>i)return e(void 0!==r());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(m),acceptedServices:[...m].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>s,run:e=>{if(i=document,c=window,s=e,u=s.services,a=s.onChange,r=I(u),0===r.length)return;d=s.currLang;const t=u[r[0]].languages;!0===s.autoLang?d=L(navigator.language.slice(0,2).toLowerCase(),t):b(s.currLang)&&(d=L(s.currLang,t));for(const e of r){l[e]=[];const t=i.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oG)})(); \ No newline at end of file diff --git a/src/iframemanager.js b/src/iframemanager.js index ab61306..dcb1ab2 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -57,8 +57,8 @@ const API_EVENT_SOURCE = 'api'; const CLICK_EVENT_SOURCE = 'click'; const DATA_ID_PLACEHOLDER = '{data-id}'; - const ACCEPT_ACTION = 'ACCEPT'; - const REJECT_ACTION = 'REJECT'; + const ACCEPT_ACTION = 'accept'; + const REJECT_ACTION = 'reject'; let From eefc6ca2bf07c5f0ba715f481bf3f4de31b4e475 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 14 Jan 2023 05:09:49 +0100 Subject: [PATCH 43/53] Fix a potential flash of style and improve css variables --- dist/iframemanager.css | 2 +- src/iframemanager.css | 161 ++++++++++++++++++++++------------------- 2 files changed, 89 insertions(+), 74 deletions(-) diff --git a/dist/iframemanager.css b/dist/iframemanager.css index 2d59ccd..bebbf01 100644 --- a/dist/iframemanager.css +++ b/dist/iframemanager.css @@ -1 +1 @@ -:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-hover-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease,transform .3s ease;z-index:1}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .cll .c-nt{opacity:0;visibility:hidden}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative;transition:background-color .3s ease,opacity .3s ease;z-index:1}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}div[data-service] .cll .c-n-c .c-l-b,div[data-service] .cll .c-n-c .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-service] .cll .c-n-c .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;padding:1em}div[data-service] .cll .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .cll .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .cll .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b .cll iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none;transition:color .2s ease,border-color .2s ease}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-customwidget] .cll+*,div[data-customwidget] .cll>:last-child{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}@keyframes example{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:example .2s forwards;animation-delay:.5s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service][data-index] [data-placeholder]{animation:none}div[data-service].c-h-b [data-placeholder]{opacity:1;visibility:visible;z-index:1} \ No newline at end of file +:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-btn-s-color:var(--im-bg);--im-btn-s-bg:rgba(225,239,255,.8);--im-btn-s-hover-bg:rgba(225,239,255,.95);--im-btn-s-active-bg:rgba(225,239,255,.6);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}div[data-service].c-h-b .cll .c-ld{opacity:0;transform:translateY(0);visibility:hidden}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;width:100%}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;z-index:1}div[data-service] .cll .c-l-b,div[data-service] .cll .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative}div[data-service] .cll .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-la-b{background:rgba(225,239,255,.8);background:var(--im-btn-s-bg);color:#0b1016;color:var(--im-btn-s-color);padding:1em}div[data-service] .cll .c-la-b:hover{background:rgba(225,239,255,.95);background:var(--im-btn-s-hover-bg)}div[data-service] .cll .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-la-b:active{background:rgba(225,239,255,.6);background:var(--im-btn-s-active-bg);transition:none!important}div[data-service] .cll .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none!important}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;visibility:hidden;width:100%;z-index:1}div[data-service].c-h-b .cll iframe{display:block!important;height:100%!important;opacity:1;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-widget]{min-width:296px;vertical-align:top}div[data-widget]:before{display:none}div[data-widget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-widget] .cll+*,div[data-widget] .cll>:last-child{height:100%!important;margin:0!important}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;visibility:hidden}@keyframes fadeIn{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div.c-an [data-placeholder]{animation:none}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:fadeIn .2s forwards;animation-delay:.4s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service].c-h-b [data-placeholder]{opacity:1;visibility:visible}div.c-an .cll .c-bg,div.c-an .cll .c-bg:before,div.c-an .cll .c-ld,div.c-an .cll .c-n-t,div.c-an .cll .c-t-cn{transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div.c-an .cll .c-bg-i{transition:opacity .5s ease,transform .5s ease}div.c-an[data-widget]{transition:opacity .3s ease,background-color .3s ease}div.c-an .cll .c-l-b,div.c-an .cll .c-la-b{transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div.c-an .cll .c-n-t a{transition:color .2s ease,border-color .2s ease}div.c-an .cll iframe,div.c-an [data-placeholder]{transition:opacity .3s ease,visibility .3s ease;transition-delay:.1s} \ No newline at end of file diff --git a/src/iframemanager.css b/src/iframemanager.css index 73a45b4..1a26603 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -8,11 +8,15 @@ --im-link-hover-color: rgba(95, 178, 251, 0.682); --im-btn-color: #fff; - --im-btn-hover-color: #fff; --im-btn-bg: rgba(0, 102, 219, 0.84); --im-btn-hover-bg: rgba(9, 80, 161, 0.89); --im-btn-active-box-shadow: 0 0 0 4px rgba(24, 104, 250, 0.24); + --im-btn-s-color: var(--im-bg); + --im-btn-s-bg: rgba(225, 239, 255, .8); + --im-btn-s-hover-bg: rgba(225, 239, 255, .95); + --im-btn-s-active-bg: rgba(225, 239, 255, .6); + --im-overlay-bg: linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.118) 100%) } @@ -71,9 +75,6 @@ div[data-service] .cll .c-ld { opacity: 0; visibility: hidden; transform: translateY(10px); - transition: opacity .3s ease, - visibility .3s ease, - transform .3s ease; } div[data-service] .cll .c-ld, @@ -98,6 +99,12 @@ div[data-service].c-h-n .cll .c-ld{ transform: translateY(0); } +div[data-service].c-h-b .cll .c-ld{ + opacity: 0; + visibility: hidden; + transform: translateY(0); +} + @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } @@ -113,14 +120,11 @@ div[data-service] .cll .c-nt{ max-width: 100%; height: 100%; width: 100%; - transition: opacity .3s ease, - visibility .3s ease; position: absolute; top: 0; left: 0; bottom: 0; right: 0; - z-index: 2; } div[data-service] .cll .c-bg{ @@ -130,10 +134,6 @@ div[data-service] .cll .c-bg{ bottom: 0; left: 0; opacity: .5; - z-index: 1; - transition: opacity .3s ease, - visibility .3s ease, - transform .3s ease; } div[data-service] .cll .c-bg::before{ @@ -145,8 +145,6 @@ div[data-service] .cll .c-bg::before{ bottom: 0; z-index: 1; background: var(--im-overlay-bg); - transition: opacity .3s ease, - visibility .3s ease; } div[data-service] .cll .c-bg-i{ @@ -159,8 +157,6 @@ div[data-service] .cll .c-bg-i{ right: 0; bottom: 0; opacity: 0; - transition: opacity .5s ease, - transform .5s ease; } div[data-service] .cll .c-bg-i.loaded{ @@ -180,21 +176,13 @@ div[data-service].c-h-n .cll .c-bg{ transform: scale(1); } -div[data-service].c-h-n .cll .c-nt{ - opacity: 0; - visibility: hidden; -} - div[data-service] .cll .c-n-c{ display: flex; justify-content: center; align-items: center; height: 100%; position: relative; - z-index: 1; font-size: .9em; - transition: background-color .3s ease, - opacity .3s ease; } div[data-service] .cll .c-n-t{ @@ -222,13 +210,11 @@ div[data-service] .cll .c-n-a{ div[data-service] .cll .c-t-cn{ padding: 0 12px; - transition: opacity .3s ease, - transform .3s ease, - visibility .3s ease; + z-index: 1; } -div[data-service] .cll .c-n-c .c-la-b, -div[data-service] .cll .c-n-c .c-l-b{ +div[data-service] .cll .c-la-b, +div[data-service] .cll .c-l-b{ display: flex; justify-content: space-evenly; align-items: center; @@ -241,15 +227,10 @@ div[data-service] .cll .c-n-c .c-l-b{ color: var(--im-btn-color); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.19) 0px 4px 12px; - transition: opacity .3s ease, - transform .3s cubic-bezier(0.25, 1, 0.5, 1), - visibility .3s ease, - box-shadow .3s ease, - background-color .3s ease; } /* Play icon */ -div[data-service] .cll .c-n-c .c-l-b::before{ +div[data-service] .cll .c-l-b::before{ content: ''; display: block; border-left: 12px solid var(--im-btn-color); @@ -260,27 +241,27 @@ div[data-service] .cll .c-n-c .c-l-b::before{ background-size: contain; } -div[data-service] .cll .c-n-c .c-la-b{ +div[data-service] .cll .c-la-b{ padding: 1em; - background: rgba(225, 239, 255, .8); - color: #0d1f34; + background: var(--im-btn-s-bg); + color: var(--im-btn-s-color); } -div[data-service] .cll .c-n-c .c-la-b:hover{ - background: rgba(225, 239, 255, .95); +div[data-service] .cll .c-la-b:hover{ + background: var(--im-btn-s-hover-bg); } -div[data-service] .cll .c-n-c .c-l-b:hover{ +div[data-service] .cll .c-l-b:hover{ background: var(--im-btn-hover-bg); } -div[data-service] .cll .c-n-c .c-la-b:active{ - transition: none; - background: rgba(225, 239, 255, .6); +div[data-service] .cll .c-la-b:active{ + transition: none!important; + background: var(--im-btn-s-active-bg); } -div[data-service] .cll .c-n-c .c-l-b:active{ - transition: none; +div[data-service] .cll .c-l-b:active{ + transition: none!important; box-shadow: var(--im-btn-active-box-shadow); } @@ -304,23 +285,20 @@ div[data-service] .cll iframe{ display: block; visibility: hidden; opacity: 0; - z-index: 2; - transition: opacity .5s ease; + z-index: 1; } div[data-service].c-h-b .cll iframe{ opacity: 1; visibility: visible; - transform: scale(1); - transition-delay: .1s; + display: block!important; + height: 100%!important; } div[data-service] .cll .c-n-t a { color: var(--im-link-color); text-decoration: none; border-bottom: 1px solid var(--im-link-color); - transition: color .2s ease, - border-color .2s ease; } div[data-service] .cll .c-n-t a:hover{ @@ -372,25 +350,24 @@ div[data-service][data-ratio="9:20"]::before{ padding-top: 222.222222%; } -div[data-customwidget]::before { +div[data-widget]{ + vertical-align: top; + min-width: 296px; +} + +div[data-widget]::before { display: none; } -div[data-customwidget].c-h-b .cll .c-ld{ +div[data-widget].c-h-b .cll .c-ld{ opacity: 0; visibility: hidden; } -div[data-customwidget] .cll + *, -div[data-customwidget] .cll > *:last-child{ +div[data-widget] .cll + *, +div[data-widget] .cll > *:last-child{ margin: 0!important; -} - -div[data-customwidget]{ - vertical-align: top; - min-width: 296px; - transition: background-color .3s ease; - transition-delay: .3s; + height: 100%!important; } div[data-service] [data-placeholder] { @@ -401,11 +378,9 @@ div[data-service] [data-placeholder] { bottom: 0; opacity: 0; visibility: hidden; - transition: opacity .3s ease, - visibility .3s ease; } -@keyframes example { +@keyframes fadeIn { from { opacity: 0; visibility: hidden; @@ -414,23 +389,63 @@ div[data-service] [data-placeholder] { opacity: 1; visibility: visible; } - } +} + +div.c-an [data-placeholder]{ + animation: none; +} div[data-service] [data-placeholder][data-visible]{ display: flex; align-items: center; justify-content: center; color: var(--im-color); - animation: example .2s forwards; - animation-delay: .5s; -} - -div[data-service][data-index] [data-placeholder]{ - animation: none; + animation: fadeIn .2s forwards; + animation-delay: .4s; } div[data-service].c-h-b [data-placeholder]{ opacity: 1; visibility: visible; - z-index: 1; +} + +div.c-an .cll .c-n-t, +div.c-an .cll .c-bg, +div.c-an .cll .c-bg::before, +div.c-an .cll .c-ld, +div.c-an .cll .c-t-cn{ + transition: opacity .3s ease, + visibility .3s ease, + transform .3s ease; +} + +div.c-an .cll .c-bg-i{ + transition: opacity .5s ease, + transform .5s ease; +} + +div.c-an[data-widget]{ + transition: opacity .3s ease, + background-color .3s ease; +} + +div.c-an .cll .c-la-b, +div.c-an .cll .c-l-b{ + transition: opacity .3s ease, + transform .3s cubic-bezier(0.25, 1, 0.5, 1), + visibility .3s ease, + box-shadow .3s ease, + background-color .3s ease; +} + +div.c-an .cll .c-n-t a{ + transition: color .2s ease, + border-color .2s ease +} + +div.c-an .cll iframe, +div.c-an [data-placeholder]{ + transition: opacity .3s ease, + visibility .3s ease; + transition-delay: .1s; } \ No newline at end of file From 5710080bc5ce9348069e8e3f2cd0704e23316c22 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 14 Jan 2023 05:10:40 +0100 Subject: [PATCH 44/53] Update demo example --- demo/app.js | 9 ++++--- demo/index.html | 64 +++++++++++++++++++++++++++++++++---------------- 2 files changed, 47 insertions(+), 26 deletions(-) diff --git a/demo/app.js b/demo/app.js index d6f5f90..d3ad82d 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,11 +1,10 @@ - const im = iframemanager(); - +const MAPS_API_KEY = '' im.run({ - onChange: ({state, eventSource}) => { - console.log(state, eventSource) + onChange: ({changedServices, eventSource}) => { + console.log(changedServices, eventSource) }, currLang: 'en', @@ -174,7 +173,7 @@ im.run({ onAccept: async (div, setIframe) => { - await CookieConsent.loadScript(`https://maps.googleapis.com/maps/api/js?key=AIzaSyBTHpW1rTjMeLwaVuUVsSyil-kxTIaE_t0`); + await CookieConsent.loadScript(`https://maps.googleapis.com/maps/api/js?key=${MAPS_API_KEY}`); await im.childExists({childProperty: 'google'}); // The location of Uluru diff --git a/demo/index.html b/demo/index.html index a8ffd1c..e28b811 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,15 +4,12 @@ Test youtube videos cookie blocker + - + @@ -214,7 +236,7 @@

Instagram

@@ -242,7 +264,7 @@

Instagram

data-maps-marker data-autoscale > -
+
@@ -257,7 +279,7 @@

Instagram

data-maps-marker data-iframe-sds="ciao" > -
+
@@ -268,7 +290,7 @@

Instagram

data-maps-marker data-iframe-sds="ciao" > -
+
@@ -280,7 +302,7 @@

Instagram

data-iframe-tabindex="0" data-iframe-aria-hidden="false" > -
+
From 083032f4c13923c2378114d70a1882b9f6c56f67 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 14 Jan 2023 05:15:56 +0100 Subject: [PATCH 45/53] Update Readme.md: fix code examples --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2770604..6632965 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or services : { youtube : { embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}', - thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg' + thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg', iframe : { allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;' }, @@ -217,7 +217,7 @@ All available options for the config. object: // eventSource.type: 'api' | 'click' // eventSource.service: string // eventSource.action: 'accept' | 'reject' - } + }, services : { myservice : { @@ -612,7 +612,7 @@ im.run({ * and add the new service */ const servicesToAccept = [ - ...CookieConsent.getUserPreferences().acceptedServices, //cookieconsent v3 + ...CookieConsent.getUserPreferences().acceptedServices['analytics'], //cookieconsent v3 ...changedServices ]; From 7045902a2282480536b752ad13b24f716f2547e8 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 14 Jan 2023 05:18:21 +0100 Subject: [PATCH 46/53] Update Readme.md: fix wrong `onChange` callback parameters --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6632965..b08d416 100644 --- a/README.md +++ b/README.md @@ -212,7 +212,7 @@ All available options for the config. object: // instead of currLang [OPTIONAL] // callback fired when state changes (a new service is accepted/rejected) - onChange: ({state, eventSource}) => { + onChange: ({changedServices, eventSource}) => { // changedServices: string[] // eventSource.type: 'api' | 'click' // eventSource.service: string From 6ce627d518401a89e2aac9d4cbe90bd6af6ba04e Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Tue, 17 Jan 2023 14:00:08 +0100 Subject: [PATCH 47/53] Update Readme.md: update custom widget section --- README.md | 49 ++++++++++++++++++++++++++++--------------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index b08d416..0a99a39 100644 --- a/README.md +++ b/README.md @@ -302,11 +302,14 @@ Note: `thumbnailUrl` can be static string, dynamic string or a function: ## Custom Widgets Some services (e.g. twitter) have their own markup + API to generate the iframe. +Note: this is an example with twitter's widget. Each widget/service will have a slightly different implementation. + 1. Place the markup inside a special `data-placeholder` div. Remove any `script` tag that comes with the markup. Example: ```html
@@ -316,14 +319,34 @@ Some services (e.g. twitter) have their own markup + API to generate the iframe.
``` -2. [WIP] -3. ? +2. Create a new service and dynamically load and initialize the widget inside the `onAccept` callback: + ```javascript + im.run({ + services: { + twitter: { + onAccept: async (div, setIframe) => { + // Using cookieconsent v3 + await CookieConsent.loadScript('https://platform.twitter.com/widgets.js'); + // Make sure the "window.twttr" property exists + await im.childExists({childProperty: 'twttr'}) && await twttr.widgets.load(div); -It is highly recommended to set a fixed `width` and `height` to the main `data-service` div, to avoid the (awful) content jump effect when the iframe is loaded. + // Make sure the "iframe" element exists + await im.childExists({parent: div}) && setIframe(div.querySelector('iframe')); + }, + + onReject: (iframe) => { + iframe && iframe.parentElement.remove(); + } + } + } + }) + ``` +It is highly recommended to set a fixed `width` and `height` to the main `data-service` div, to avoid the (awful) content jump effect when the iframe is loaded. + ## Placeholder for non-js browsers You can set a placeholder visible only if javascript is disabled via a special div: @@ -621,23 +644,7 @@ im.run({ }, services: { - youtube: { - embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}', - - thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg', - - iframe: { - allow: 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;', - }, - - 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.', - loadBtn: 'Load video', - loadAllBtn: "Don't ask again" - } - } - } + // ... } }); ``` From 249092927f1852ff90dc557662bf58ee43c0dfde Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Wed, 18 Jan 2023 18:09:56 +0100 Subject: [PATCH 48/53] Minor tweaks and code refactoring --- dist/iframemanager.css | 2 +- dist/iframemanager.js | 2 +- src/iframemanager.css | 8 +--- src/iframemanager.js | 84 ++++++++++++++++++++++++++---------------- 4 files changed, 57 insertions(+), 39 deletions(-) diff --git a/dist/iframemanager.css b/dist/iframemanager.css index bebbf01..7e3ba74 100644 --- a/dist/iframemanager.css +++ b/dist/iframemanager.css @@ -1 +1 @@ -:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-btn-s-color:var(--im-bg);--im-btn-s-bg:rgba(225,239,255,.8);--im-btn-s-hover-bg:rgba(225,239,255,.95);--im-btn-s-active-bg:rgba(225,239,255,.6);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}div[data-service].c-h-b .cll .c-ld{opacity:0;transform:translateY(0);visibility:hidden}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;width:100%}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;z-index:1}div[data-service] .cll .c-l-b,div[data-service] .cll .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative}div[data-service] .cll .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-la-b{background:rgba(225,239,255,.8);background:var(--im-btn-s-bg);color:#0b1016;color:var(--im-btn-s-color);padding:1em}div[data-service] .cll .c-la-b:hover{background:rgba(225,239,255,.95);background:var(--im-btn-s-hover-bg)}div[data-service] .cll .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-la-b:active{background:rgba(225,239,255,.6);background:var(--im-btn-s-active-bg);transition:none!important}div[data-service] .cll .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none!important}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;visibility:hidden;width:100%;z-index:1}div[data-service].c-h-b .cll iframe{display:block!important;height:100%!important;opacity:1;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-widget]{min-width:296px;vertical-align:top}div[data-widget]:before{display:none}div[data-widget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-widget] .cll+*,div[data-widget] .cll>:last-child{height:100%!important;margin:0!important}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;visibility:hidden}@keyframes fadeIn{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div.c-an [data-placeholder]{animation:none}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:fadeIn .2s forwards;animation-delay:.4s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service].c-h-b [data-placeholder]{opacity:1;visibility:visible}div.c-an .cll .c-bg,div.c-an .cll .c-bg:before,div.c-an .cll .c-ld,div.c-an .cll .c-n-t,div.c-an .cll .c-t-cn{transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div.c-an .cll .c-bg-i{transition:opacity .5s ease,transform .5s ease}div.c-an[data-widget]{transition:opacity .3s ease,background-color .3s ease}div.c-an .cll .c-l-b,div.c-an .cll .c-la-b{transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div.c-an .cll .c-n-t a{transition:color .2s ease,border-color .2s ease}div.c-an .cll iframe,div.c-an [data-placeholder]{transition:opacity .3s ease,visibility .3s ease;transition-delay:.1s} \ No newline at end of file +:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-btn-s-color:var(--im-bg);--im-btn-s-bg:rgba(225,239,255,.8);--im-btn-s-hover-bg:rgba(225,239,255,.95);--im-btn-s-active-bg:rgba(225,239,255,.6);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}div[data-service].c-h-b .cll .c-ld{opacity:0;transform:translateY(0);visibility:hidden}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;width:100%}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;z-index:1}div[data-service] .cll .c-l-b,div[data-service] .cll .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative}div[data-service] .cll .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-la-b{background:rgba(225,239,255,.8);background:var(--im-btn-s-bg);color:#0b1016;color:var(--im-btn-s-color);padding:1em}div[data-service] .cll .c-la-b:hover{background:rgba(225,239,255,.95);background:var(--im-btn-s-hover-bg)}div[data-service] .cll .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-la-b:active{background:rgba(225,239,255,.6);background:var(--im-btn-s-active-bg);transition:none!important}div[data-service] .cll .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none!important}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);transition-duration:.2s;visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;visibility:hidden;width:100%;z-index:1}div[data-service].c-h-b .cll iframe{display:block!important;height:100%!important;opacity:1;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-widget]:before{display:none}div[data-widget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-widget] .cll+*,div[data-widget] .cll>:last-child{height:100%!important;margin:0!important}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;visibility:hidden}@keyframes fadeIn{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div.c-an [data-placeholder]{animation:none}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:fadeIn .2s forwards;animation-delay:.4s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service].show-ph [data-placeholder]{opacity:1;visibility:visible}div.c-an .cll .c-bg,div.c-an .cll .c-bg:before,div.c-an .cll .c-ld,div.c-an .cll .c-n-t,div.c-an .cll .c-t-cn{transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div.c-an .cll .c-bg-i{transition:opacity .5s ease,transform .5s ease}div.c-an[data-widget]{transition:opacity .3s ease,background-color .3s ease}div.c-an .cll .c-l-b,div.c-an .cll .c-la-b{transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div.c-an .cll .c-n-t a{transition:color .2s ease,border-color .2s ease}div.c-an .cll iframe,div.c-an [data-placeholder]{transition:opacity .3s ease,visibility .3s ease;transition-delay:.1s} \ No newline at end of file diff --git a/dist/iframemanager.js b/dist/iframemanager.js index c53a553..66ec2bf 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -(()=>{'use strict';const e='click',t='{data-id}',n='accept',o='reject';let c,i,s,r,a,l={},f=!1,d='',u={},m=new Map,v='api';const h=['onload','onerror','src'],p=e=>'function'==typeof e,b=e=>'string'==typeof e,w=e=>i.createElement(e),_=()=>w('div'),g=()=>{const e=w('button');return e.type='button',e},$=(e,t)=>e.className=t,S=(e,t)=>e.appendChild(t),I=e=>e&&Object.keys(e)||[],T=(e,t)=>{for(const n in t)O(e,n,t[n])},x=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]');i&&i.removeAttribute('data-visible');const s=i&&i.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,m:null,v:i,h:s,p:null,_:!1,g:!1,$:!0,S:n}},y=(e,t)=>{const n=l[e];if('IntersectionObserver'in c){const e=new IntersectionObserver((o=>{o.forEach((o=>{o.isIntersecting&&(k(t,n[o.target.dataset.index]),e.unobserve(o.target))}))}));for(const t of n)e.observe(t.u)}},k=(e,n)=>{const o=e=>{n.p.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>{n.p.classList.add('loaded')},t.src=e};if(b(n.i))''!==n.i&&o(n.i);else if(p(e))e(n.t,(e=>o(e)));else if(b(e)){const c=e.replace(t,n.t);o(c)}},D=(e,n)=>{if(e._)return;if(e._=!0,e.v){const t=e.h.cloneNode(!0);e.v.replaceWith(t),e.v=t}const o=n.iframe;if(p(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;T(t,o),T(t,e.S),e.I=t,e._=!0,e.u.classList.add('c-h-b')}));e.I=w('iframe');const c=e.l||n.iframe&&n.iframe.params;let i=(n.embedUrl||'').replace(t,e.t);e.o&&(e.I.title=e.o),c&&('ap:'===c.substring(0,3)?i+=c.substring(3):i+='?'+c),e.I.onload=()=>{e.u.classList.add('c-h-b'),e.I.onload=void 0,o&&p(o.onload)&&o.onload(e.t,e.I)},T(e.I,o),T(e.I,e.S),e.I.src=i,S(e.m,e.I)},O=(e,t,n)=>{h.includes(t)||e.setAttribute(t,n)},P=e=>{e.u.classList.add('c-h-n'),e.$=!1},E=e=>{e.u.classList.remove('c-h-n','c-h-b'),e.$=!0},M=e=>(e=i.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',j=(t,n,o)=>{const c=l[t],s=n.languages;c.forEach((c=>{if(!c.g&&s){const r=s[d]?.loadBtn,a=s[d]?.notice,l=s[d]?.loadAllBtn,f=i.createElement('div'),u=_(),m=_(),h=_(),p=_();$(f,'cll'),c.m=f;const I=()=>{P(c),D(c,n)};if(r){const t=g();t.textContent=r,$(t,'c-l-b'),t.addEventListener(e,I),S(p,t)}if(l){const n=g();n.textContent=l,$(n,'c-la-b'),n.addEventListener(e,(()=>{I(),v=e,G.acceptService(t)})),S(p,n)}const T=_(),x=_(),y=_(),k=_(),O=_();$(T,'cc-text'),$(k,'c-bg-i'),c.p=k,$(y,'c-ld'),b(c.i)&&''===c.i||$(x,'c-bg');const E=c.o,M=i.createDocumentFragment();if(E){const e=w('span');$(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),S(M,e)}S(T,M),u&&T.insertAdjacentHTML('beforeend',a||''),S(m,T),$(O,'c-t-cn'),$(m,'c-n-t'),$(h,'c-n-c'),$(u,'c-nt'),$(p,'c-n-a'),S(O,m),(r||l)&&S(O,p),S(h,O),S(u,h),S(x,k),S(f,u),(n.thumbnailUrl||c.i)&&S(f,x),S(f,y),o&&c.u.classList.add('c-h-n'),c.u.prepend(f),c.g=!0,setTimeout((()=>c.u.classList.add('c-an')),20)}}))},C=(e,t)=>{const n=l[e];if('IntersectionObserver'in c){const e=new IntersectionObserver((o=>{if(f)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;D(n[e],t),P(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},L=(e,t)=>e in t?e:I(t).length>0?d in t?d:I(t)[0]:void 0,N=(e,t)=>{const{cookie:n}=t;M(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,s=e.path||'/',r=864e5*(e.expiration||182),a=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+r);let f=o+'=1'+(0!==r?`; Expires=${c.toUTCString()}`:'')+`; Path=${s}`+`; SameSite=${a}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),i.cookie=f})(n),C(e,t)},A=(e,t)=>{const{cookie:n}=t;M(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;i.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=l[e];for(let e=0;e{var o;n[e]._&&(p(t.onReject)?(t.onReject(n[e].I),n[e]._=!1):((o=n[e]).I.parentNode.removeChild(o.I),o._=!1)),E(n[e])})(e)})(e,t)},F=(e,t,n)=>{p(a)&&a({eventSource:{type:v,service:e,action:t},changedServices:n})},G={acceptService:e=>{f=!1;const t=[];if('all'===e){for(const e of r)m.get(e)||(m.set(e,!0),N(e,u[e]),t.push(e));t.length>0&&F(e,n,t)}else r.includes(e)&&(m.get(e)||(m.set(e,!0),N(e,u[e]),t.push(e),F(e,n,t)));v='api'},rejectService:e=>{const t=[];if('all'===e){f=!0;for(const e of r)A(e,u[e]),m.get(e)&&(m.set(e,!1),t.push(e));t.length>0&&F(e,o,t)}else r.includes(e)&&(A(e,u[e]),m.get(e)&&(m.set(e,!1),t.push(e),F(e,o,t)))},childExists:async({parent:e=c,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:i=15e3})=>{let s=1;const r=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(r()||s++*o>i)return e(void 0!==r());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(m),acceptedServices:[...m].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>s,run:e=>{if(i=document,c=window,s=e,u=s.services,a=s.onChange,r=I(u),0===r.length)return;d=s.currLang;const t=u[r[0]].languages;!0===s.autoLang?d=L(navigator.language.slice(0,2).toLowerCase(),t):b(s.currLang)&&(d=L(s.currLang,t));for(const e of r){l[e]=[];const t=i.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oG)})(); \ No newline at end of file +(()=>{'use strict';const e='click',t='{data-id}',n='accept',o='reject',c='c-h-n',i='c-h-b',s='show-ph';let r,a,l,f,d,u={},v=!1,m='',p={},b=new Map,h='api';const w=['onload','onerror','src'],_=e=>'function'==typeof e,g=e=>'string'==typeof e,$=e=>a.createElement(e),S=()=>$('div'),I=()=>{const e=$('button');return e.type='button',e},T=(e,t)=>e.className=t,x=(e,t)=>e.classList.add(t),y=(e,t)=>e.appendChild(t),P=e=>e&&Object.keys(e)||[],k=(e,t)=>{for(const n in t)j(e,n,t[n])},D=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]'),s=i?.hasAttribute('data-visible');s&&i.removeAttribute('data-visible');const r=i?.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,v:null,m:i,p:r,h:null,_:!1,g:!1,$:!0,S:'widget'in t,I:s,T:n}},O=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{for(const c of o)c.isIntersecting&&(E(t,n[c.target.dataset.index]),e.unobserve(c.target))}));for(const t of n)e.observe(t.u)}},E=(e,n)=>{const o=e=>{n.h.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>x(n.h,'loaded'),t.src=e};if(g(n.i))''!==n.i&&o(n.i);else if(_(e))e(n.t,(e=>o(e)));else if(g(e)){const c=e.replace(t,n.t);o(c)}},M=(e,n)=>{if(e._)return;if(e._=!0,e.m){const t=e.p.cloneNode(!0);e.m.replaceWith(t),e.m=t}const o=n.iframe;if(_(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;k(t,o),k(t,e.T),e.P=t,e._=!0,x(e.u,i),(!e.I||e.S)&&x(e.u,s)}));e.P=$('iframe');const c=e.l||n?.iframe.params;let r=(n.embedUrl||'').replace(t,e.t);e.o&&(e.P.title=e.o),g(c)&&(r+='?'===c.slice(0,1)?c:`?${c}`),e.P.onload=()=>{x(e.u,i),e.P.onload=void 0,_(o?.onload)&&o.onload(e.t,e.P)},k(e.P,o),k(e.P,e.T),e.P.src=r,y(e.v,e.P)},j=(e,t,n)=>{w.includes(t)||e.setAttribute(t,n)},C=e=>{x(e.u,c),e.$=!1},L=e=>{e.u.classList.remove(c,i,s),e.$=!0},N=e=>(e=a.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',A=(t,n,o)=>{const i=u[t],s=n.languages;i.forEach((i=>{if(!i.g&&s){const r=s[m]?.loadBtn,l=s[m]?.notice,f=s[m]?.loadAllBtn,d=a.createElement('div'),u=S(),v=S(),p=S(),b=S();T(d,'cll'),i.v=d;const w=()=>{C(i),M(i,n)};if(r){const t=I();t.textContent=r,T(t,'c-l-b'),t.addEventListener(e,w),y(b,t)}if(f){const n=I();n.textContent=f,T(n,r?'c-la-b':'c-l-b'),n.addEventListener(e,(()=>{w(),h=e,W.acceptService(t)})),y(b,n)}const _=S(),P=S(),k=S(),D=S(),O=S();T(_,'cc-text'),T(D,'c-bg-i'),i.h=D,T(k,'c-ld'),g(i.i)&&''===i.i||T(P,'c-bg');const E=i.o,j=a.createDocumentFragment();if(E){const e=$('span');T(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),y(j,e)}y(_,j),u&&_.insertAdjacentHTML('beforeend',l||''),y(v,_),T(O,'c-t-cn'),T(v,'c-n-t'),T(p,'c-n-c'),T(u,'c-nt'),T(b,'c-n-a'),y(O,v),(r||f)&&y(O,b),y(p,O),y(u,p),y(P,D),y(d,u),(n.thumbnailUrl||i.i)&&y(d,P),y(d,k),o&&x(i.u,c),i.u.prepend(d),i.g=!0,setTimeout((()=>x(i.u,'c-an')),20)}}))},F=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{if(v)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;M(n[e],t),C(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},G=(e,t)=>e in t?e:P(t).length>0?m in t?m:P(t)[0]:void 0,H=(e,t)=>{const{cookie:n}=t;N(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,i=e.path||'/',s=864e5*(e.expiration||182),r=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+s);let f=o+'=1'+(0!==s?`; Expires=${c.toUTCString()}`:'')+`; Path=${i}`+`; SameSite=${r}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),a.cookie=f})(n),F(e,t)},J=(e,t)=>{const{cookie:n}=t;N(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;a.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=u[e];for(let e=0;e{var o;n[e]._&&(_(t.onReject)?(t.onReject(n[e].P),n[e]._=!1):((o=n[e]).P.parentNode.removeChild(o.P),o._=!1)),L(n[e])})(e)})(e,t)},V=(e,t,n)=>{_(d)&&d({eventSource:{type:h,service:e,action:t},changedServices:n})},W={acceptService:e=>{v=!1;const t=[];if('all'===e){for(const e of f)b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e));t.length>0&&V(e,n,t)}else f.includes(e)&&(b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e),V(e,n,t)));h='api'},rejectService:e=>{const t=[];if('all'===e){v=!0;for(const e of f)J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e));t.length>0&&V(e,o,t)}else f.includes(e)&&(J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e),V(e,o,t)))},childExists:async({parent:e=r,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:c=15e3})=>{let i=1;const s=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(s()||i++*o>c)return e(void 0!==s());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(b),acceptedServices:[...b].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>l,run:e=>{if(a=document,r=window,l=e,p=l.services,d=l.onChange,f=P(p),0===f.length)return;m=l.currLang;const t=p[f[0]].languages;!0===l.autoLang?m=G(navigator.language.slice(0,2).toLowerCase(),t):g(l.currLang)&&(m=G(l.currLang,t));for(const e of f){u[e]=[];const t=a.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oW)})(); \ No newline at end of file diff --git a/src/iframemanager.css b/src/iframemanager.css index 1a26603..8dd17ef 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -269,6 +269,7 @@ div[data-service].c-h-n .cll .c-t-cn{ opacity: 0; visibility: hidden; transform: translateY(-10px); + transition-duration: .2s; } div[data-service] .cll iframe{ @@ -350,11 +351,6 @@ div[data-service][data-ratio="9:20"]::before{ padding-top: 222.222222%; } -div[data-widget]{ - vertical-align: top; - min-width: 296px; -} - div[data-widget]::before { display: none; } @@ -404,7 +400,7 @@ div[data-service] [data-placeholder][data-visible]{ animation-delay: .4s; } -div[data-service].c-h-b [data-placeholder]{ +div[data-service].show-ph [data-placeholder]{ opacity: 1; visibility: visible; } diff --git a/src/iframemanager.js b/src/iframemanager.js index dcb1ab2..6cbdda1 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -21,6 +21,8 @@ * @property {boolean} _hasIframe * @property {boolean} _hasNotice * @property {boolean} _showNotice + * @property {boolean} _dataWidget + * @property {boolean} _dataPlaceholderVisible * @property {Object.} _iframeAttributes */ @@ -60,6 +62,10 @@ const ACCEPT_ACTION = 'accept'; const REJECT_ACTION = 'reject'; + const HIDE_NOTICE_CLASS = 'c-h-n'; + const HIDE_LOADER_CLASS = 'c-h-b'; + const SHOW_PLACEHOLDER_CLASS = 'show-ph'; + let /** @@ -141,6 +147,13 @@ */ const setClassName = (el, className) => el.className = className; + /** + * @param {HTMLElement} el + * @param {string} className + * @returns + */ + const addClass = (el, className) => el.classList.add(className); + /** * @param {HTMLElement} parent * @param {HTMLElement} child @@ -176,8 +189,9 @@ .map(attr => attr.slice(12)); const placeholderDiv = div.querySelector('[data-placeholder]'); - placeholderDiv && placeholderDiv.removeAttribute('data-visible'); - const placeholderClone = placeholderDiv && placeholderDiv.cloneNode(true); + const dataVisible = placeholderDiv?.hasAttribute('data-visible'); + dataVisible && placeholderDiv.removeAttribute('data-visible'); + const placeholderClone = placeholderDiv?.cloneNode(true); /** * Get all "data-iframe-* attributes @@ -197,7 +211,9 @@ _backgroundDiv: null, _hasIframe: false, _hasNotice: false, - _showNotice : true, + _showNotice: true, + _dataWidget: 'widget' in dataset, + _dataPlaceholderVisible: dataVisible, _iframeAttributes: iframeAttrs }; }; @@ -206,19 +222,19 @@ * @param {string} serviceName * @param {string} thumbnailUrl */ - const lazyLoadThumnails = (serviceName, thumbnailUrl) => { + const lazyLoadThumbnails = (serviceName, thumbnailUrl) => { const videos = iframeDivs[serviceName]; if ('IntersectionObserver' in win) { const thumbnailObserver = new IntersectionObserver((entries) => { - entries.forEach((entry) => { + for(const entry of entries){ if(entry.isIntersecting){ // true index of the video in the array relative to current service loadThumbnail(thumbnailUrl, videos[entry.target.dataset.index]); thumbnailObserver.unobserve(entry.target); } - }); + } }); for(const video of videos) @@ -237,11 +253,7 @@ video._backgroundDiv.style.backgroundImage = `url('${src}')`; const img = new Image(); - - img.onload = () => { - video._backgroundDiv.classList.add('loaded'); - }; - + img.onload = () => addClass(video._backgroundDiv, 'loaded'); img.src = src; } @@ -268,7 +280,7 @@ */ const createIframe = (video, service) => { - // Create iframe only if doesn't alredy have one + // Create iframe only if doesn't already have one if(video._hasIframe) return; @@ -302,7 +314,13 @@ video._iframe = iframe; video._hasIframe = true; - video._div.classList.add('c-h-b'); + + // Hide loading circle + addClass(video._div, HIDE_LOADER_CLASS); + + // Show placeholder + (!video._dataPlaceholderVisible || video._dataWidget) + && addClass(video._div, SHOW_PLACEHOLDER_CLASS); }); return; @@ -310,7 +328,10 @@ video._iframe = createNode('iframe'); - const iframeParams = video._params || (service.iframe && service.iframe.params); + /** + * @type {string} + */ + const iframeParams = video._params || service?.iframe.params; // Replace data-id with valid resource id const embedUrl = service.embedUrl || ''; @@ -319,22 +340,19 @@ video._title && (video._iframe.title = video._title); // Add parameters to src - if(iframeParams){ - if (iframeParams.substring(0, 3) === 'ap:'){ - src += iframeParams.substring(3); - }else{ - src += '?' + iframeParams; - } + if(isString(iframeParams)){ + src += iframeParams.slice(0, 1) === '?' + ? iframeParams + : `?${iframeParams}` } // When iframe is loaded => hide background image video._iframe.onload = () => { - video._div.classList.add('c-h-b'); + addClass(video._div, HIDE_LOADER_CLASS); video._iframe.onload = undefined; - iframeProps - && isFunction(iframeProps.onload) - && iframeProps.onload(video._id, video._iframe); + isFunction(iframeProps?.onload) + && iframeProps.onload(video._id, video._iframe); }; /** @@ -372,11 +390,11 @@ }; /** - * Remove necessary classes to hide notice + * Add necessary classes to hide notice * @param {IframeObj} video */ const hideNotice = (video) => { - video._div.classList.add('c-h-n'); + addClass(video._div, HIDE_NOTICE_CLASS); video._showNotice = false; }; @@ -385,7 +403,11 @@ * @param {IframeObj} video */ const showNotice = (video) => { - video._div.classList.remove('c-h-n', 'c-h-b'); + video._div.classList.remove( + HIDE_NOTICE_CLASS, + HIDE_LOADER_CLASS, + SHOW_PLACEHOLDER_CLASS + ); video._showNotice = true; }; @@ -491,7 +513,7 @@ if(loadAllBtnText){ const load_all_button = createButton() load_all_button.textContent = loadAllBtnText; - setClassName(load_all_button, 'c-la-b'); + setClassName(load_all_button, loadBtnText ? 'c-la-b' : 'c-l-b'); load_all_button.addEventListener(CLICK_EVENT_SOURCE, () => { showVideo(); @@ -552,13 +574,13 @@ (service.thumbnailUrl || video._thumbnail) && appendChild(fragment, ytVideoBackground); appendChild(fragment, loaderBg); - hidden && video._div.classList.add('c-h-n'); + hidden && addClass(video._div, HIDE_NOTICE_CLASS); // Avoid reflow with fragment (only 1 appendChild) video._div.prepend(fragment); video._hasNotice = true; - setTimeout(()=> video._div.classList.add('c-an'), 20); + setTimeout(()=> addClass(video._div, 'c-an'), 20); } }); }; @@ -886,7 +908,7 @@ createAllNotices(serviceName, currService, false); } - lazyLoadThumnails(serviceName, currService.thumbnailUrl); + lazyLoadThumbnails(serviceName, currService.thumbnailUrl); } } }; From 0cb8798772113d4e0c823801d3a537b06536b9e4 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Wed, 18 Jan 2023 18:27:20 +0100 Subject: [PATCH 49/53] Tweak: pass service div to the `onReject` callback if no iframe is found --- dist/iframemanager.js | 2 +- src/iframemanager.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/iframemanager.js b/dist/iframemanager.js index 66ec2bf..0dd1434 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -3,4 +3,4 @@ * Author Orest Bida * Released under the MIT License */ -(()=>{'use strict';const e='click',t='{data-id}',n='accept',o='reject',c='c-h-n',i='c-h-b',s='show-ph';let r,a,l,f,d,u={},v=!1,m='',p={},b=new Map,h='api';const w=['onload','onerror','src'],_=e=>'function'==typeof e,g=e=>'string'==typeof e,$=e=>a.createElement(e),S=()=>$('div'),I=()=>{const e=$('button');return e.type='button',e},T=(e,t)=>e.className=t,x=(e,t)=>e.classList.add(t),y=(e,t)=>e.appendChild(t),P=e=>e&&Object.keys(e)||[],k=(e,t)=>{for(const n in t)j(e,n,t[n])},D=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]'),s=i?.hasAttribute('data-visible');s&&i.removeAttribute('data-visible');const r=i?.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,v:null,m:i,p:r,h:null,_:!1,g:!1,$:!0,S:'widget'in t,I:s,T:n}},O=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{for(const c of o)c.isIntersecting&&(E(t,n[c.target.dataset.index]),e.unobserve(c.target))}));for(const t of n)e.observe(t.u)}},E=(e,n)=>{const o=e=>{n.h.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>x(n.h,'loaded'),t.src=e};if(g(n.i))''!==n.i&&o(n.i);else if(_(e))e(n.t,(e=>o(e)));else if(g(e)){const c=e.replace(t,n.t);o(c)}},M=(e,n)=>{if(e._)return;if(e._=!0,e.m){const t=e.p.cloneNode(!0);e.m.replaceWith(t),e.m=t}const o=n.iframe;if(_(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;k(t,o),k(t,e.T),e.P=t,e._=!0,x(e.u,i),(!e.I||e.S)&&x(e.u,s)}));e.P=$('iframe');const c=e.l||n?.iframe.params;let r=(n.embedUrl||'').replace(t,e.t);e.o&&(e.P.title=e.o),g(c)&&(r+='?'===c.slice(0,1)?c:`?${c}`),e.P.onload=()=>{x(e.u,i),e.P.onload=void 0,_(o?.onload)&&o.onload(e.t,e.P)},k(e.P,o),k(e.P,e.T),e.P.src=r,y(e.v,e.P)},j=(e,t,n)=>{w.includes(t)||e.setAttribute(t,n)},C=e=>{x(e.u,c),e.$=!1},L=e=>{e.u.classList.remove(c,i,s),e.$=!0},N=e=>(e=a.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',A=(t,n,o)=>{const i=u[t],s=n.languages;i.forEach((i=>{if(!i.g&&s){const r=s[m]?.loadBtn,l=s[m]?.notice,f=s[m]?.loadAllBtn,d=a.createElement('div'),u=S(),v=S(),p=S(),b=S();T(d,'cll'),i.v=d;const w=()=>{C(i),M(i,n)};if(r){const t=I();t.textContent=r,T(t,'c-l-b'),t.addEventListener(e,w),y(b,t)}if(f){const n=I();n.textContent=f,T(n,r?'c-la-b':'c-l-b'),n.addEventListener(e,(()=>{w(),h=e,W.acceptService(t)})),y(b,n)}const _=S(),P=S(),k=S(),D=S(),O=S();T(_,'cc-text'),T(D,'c-bg-i'),i.h=D,T(k,'c-ld'),g(i.i)&&''===i.i||T(P,'c-bg');const E=i.o,j=a.createDocumentFragment();if(E){const e=$('span');T(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),y(j,e)}y(_,j),u&&_.insertAdjacentHTML('beforeend',l||''),y(v,_),T(O,'c-t-cn'),T(v,'c-n-t'),T(p,'c-n-c'),T(u,'c-nt'),T(b,'c-n-a'),y(O,v),(r||f)&&y(O,b),y(p,O),y(u,p),y(P,D),y(d,u),(n.thumbnailUrl||i.i)&&y(d,P),y(d,k),o&&x(i.u,c),i.u.prepend(d),i.g=!0,setTimeout((()=>x(i.u,'c-an')),20)}}))},F=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{if(v)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;M(n[e],t),C(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},G=(e,t)=>e in t?e:P(t).length>0?m in t?m:P(t)[0]:void 0,H=(e,t)=>{const{cookie:n}=t;N(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,i=e.path||'/',s=864e5*(e.expiration||182),r=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+s);let f=o+'=1'+(0!==s?`; Expires=${c.toUTCString()}`:'')+`; Path=${i}`+`; SameSite=${r}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),a.cookie=f})(n),F(e,t)},J=(e,t)=>{const{cookie:n}=t;N(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;a.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=u[e];for(let e=0;e{var o;n[e]._&&(_(t.onReject)?(t.onReject(n[e].P),n[e]._=!1):((o=n[e]).P.parentNode.removeChild(o.P),o._=!1)),L(n[e])})(e)})(e,t)},V=(e,t,n)=>{_(d)&&d({eventSource:{type:h,service:e,action:t},changedServices:n})},W={acceptService:e=>{v=!1;const t=[];if('all'===e){for(const e of f)b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e));t.length>0&&V(e,n,t)}else f.includes(e)&&(b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e),V(e,n,t)));h='api'},rejectService:e=>{const t=[];if('all'===e){v=!0;for(const e of f)J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e));t.length>0&&V(e,o,t)}else f.includes(e)&&(J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e),V(e,o,t)))},childExists:async({parent:e=r,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:c=15e3})=>{let i=1;const s=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(s()||i++*o>c)return e(void 0!==s());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(b),acceptedServices:[...b].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>l,run:e=>{if(a=document,r=window,l=e,p=l.services,d=l.onChange,f=P(p),0===f.length)return;m=l.currLang;const t=p[f[0]].languages;!0===l.autoLang?m=G(navigator.language.slice(0,2).toLowerCase(),t):g(l.currLang)&&(m=G(l.currLang,t));for(const e of f){u[e]=[];const t=a.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oW)})(); \ No newline at end of file +(()=>{'use strict';const e='click',t='{data-id}',n='accept',o='reject',c='c-h-n',i='c-h-b',s='show-ph';let r,a,l,f,d,u={},v=!1,m='',p={},b=new Map,h='api';const w=['onload','onerror','src'],_=e=>'function'==typeof e,g=e=>'string'==typeof e,$=e=>a.createElement(e),S=()=>$('div'),I=()=>{const e=$('button');return e.type='button',e},T=(e,t)=>e.className=t,x=(e,t)=>e.classList.add(t),y=(e,t)=>e.appendChild(t),P=e=>e&&Object.keys(e)||[],k=(e,t)=>{for(const n in t)j(e,n,t[n])},D=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]'),s=i?.hasAttribute('data-visible');s&&i.removeAttribute('data-visible');const r=i?.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,v:null,m:i,p:r,h:null,_:!1,g:!1,$:!0,S:'widget'in t,I:s,T:n}},O=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{for(const c of o)c.isIntersecting&&(E(t,n[c.target.dataset.index]),e.unobserve(c.target))}));for(const t of n)e.observe(t.u)}},E=(e,n)=>{const o=e=>{n.h.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>x(n.h,'loaded'),t.src=e};if(g(n.i))''!==n.i&&o(n.i);else if(_(e))e(n.t,(e=>o(e)));else if(g(e)){const c=e.replace(t,n.t);o(c)}},M=(e,n)=>{if(e._)return;if(e._=!0,e.m){const t=e.p.cloneNode(!0);e.m.replaceWith(t),e.m=t}const o=n.iframe;if(_(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;k(t,o),k(t,e.T),e.P=t,e._=!0,x(e.u,i),(!e.I||e.S)&&x(e.u,s)}));e.P=$('iframe');const c=e.l||n?.iframe.params;let r=(n.embedUrl||'').replace(t,e.t);e.o&&(e.P.title=e.o),g(c)&&(r+='?'===c.slice(0,1)?c:`?${c}`),e.P.onload=()=>{x(e.u,i),e.P.onload=void 0,_(o?.onload)&&o.onload(e.t,e.P)},k(e.P,o),k(e.P,e.T),e.P.src=r,y(e.v,e.P)},j=(e,t,n)=>{w.includes(t)||e.setAttribute(t,n)},C=e=>{x(e.u,c),e.$=!1},L=e=>{e.u.classList.remove(c,i,s),e.$=!0},N=e=>(e=a.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',A=(t,n,o)=>{const i=u[t],s=n.languages;i.forEach((i=>{if(!i.g&&s){const r=s[m]?.loadBtn,l=s[m]?.notice,f=s[m]?.loadAllBtn,d=a.createElement('div'),u=S(),v=S(),p=S(),b=S();T(d,'cll'),i.v=d;const w=()=>{C(i),M(i,n)};if(r){const t=I();t.textContent=r,T(t,'c-l-b'),t.addEventListener(e,w),y(b,t)}if(f){const n=I();n.textContent=f,T(n,r?'c-la-b':'c-l-b'),n.addEventListener(e,(()=>{w(),h=e,W.acceptService(t)})),y(b,n)}const _=S(),P=S(),k=S(),D=S(),O=S();T(_,'cc-text'),T(D,'c-bg-i'),i.h=D,T(k,'c-ld'),g(i.i)&&''===i.i||T(P,'c-bg');const E=i.o,j=a.createDocumentFragment();if(E){const e=$('span');T(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),y(j,e)}y(_,j),u&&_.insertAdjacentHTML('beforeend',l||''),y(v,_),T(O,'c-t-cn'),T(v,'c-n-t'),T(p,'c-n-c'),T(u,'c-nt'),T(b,'c-n-a'),y(O,v),(r||f)&&y(O,b),y(p,O),y(u,p),y(P,D),y(d,u),(n.thumbnailUrl||i.i)&&y(d,P),y(d,k),o&&x(i.u,c),i.u.prepend(d),i.g=!0,setTimeout((()=>x(i.u,'c-an')),20)}}))},F=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{if(v)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;M(n[e],t),C(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},G=(e,t)=>e in t?e:P(t).length>0?m in t?m:P(t)[0]:void 0,H=(e,t)=>{const{cookie:n}=t;N(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,i=e.path||'/',s=864e5*(e.expiration||182),r=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+s);let f=o+'=1'+(0!==s?`; Expires=${c.toUTCString()}`:'')+`; Path=${i}`+`; SameSite=${r}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),a.cookie=f})(n),F(e,t)},J=(e,t)=>{const{cookie:n}=t;N(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;a.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=u[e];for(let e=0;e{var o;n[e]._&&(_(t.onReject)?(t.onReject(n[e].P||n[e].u),n[e]._=!1):((o=n[e]).P.parentNode.removeChild(o.P),o._=!1)),L(n[e])})(e)})(e,t)},V=(e,t,n)=>{_(d)&&d({eventSource:{type:h,service:e,action:t},changedServices:n})},W={acceptService:e=>{v=!1;const t=[];if('all'===e){for(const e of f)b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e));t.length>0&&V(e,n,t)}else f.includes(e)&&(b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e),V(e,n,t)));h='api'},rejectService:e=>{const t=[];if('all'===e){v=!0;for(const e of f)J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e));t.length>0&&V(e,o,t)}else f.includes(e)&&(J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e),V(e,o,t)))},childExists:async({parent:e=r,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:c=15e3})=>{let i=1;const s=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(s()||i++*o>c)return e(void 0!==s());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(b),acceptedServices:[...b].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>l,run:e=>{if(a=document,r=window,l=e,p=l.services,d=l.onChange,f=P(p),0===f.length)return;m=l.currLang;const t=p[f[0]].languages;!0===l.autoLang?m=G(navigator.language.slice(0,2).toLowerCase(),t):g(l.currLang)&&(m=G(l.currLang,t));for(const e of f){u[e]=[];const t=a.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oW)})(); \ No newline at end of file diff --git a/src/iframemanager.js b/src/iframemanager.js index 6cbdda1..3bd7004 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -644,7 +644,7 @@ // if doesn't have iframe => create it if(videos[i]._hasIframe){ if(isFunction(service.onReject)){ - service.onReject(videos[i]._iframe); + service.onReject(videos[i]._iframe || videos[i]._div); videos[i]._hasIframe = false; }else{ removeIframe(videos[i]); From 0fce73769b5b1ee7ac05d1e905918887c74221ed Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Wed, 18 Jan 2023 18:27:32 +0100 Subject: [PATCH 50/53] Update demo example --- demo/app.js | 38 +++++------- demo/assets/fonts.css | 32 +++++----- demo/index.html | 139 ++++++++++++++++++++++++------------------ 3 files changed, 111 insertions(+), 98 deletions(-) diff --git a/demo/app.js b/demo/app.js index d3ad82d..76fb1f3 100644 --- a/demo/app.js +++ b/demo/app.js @@ -74,7 +74,7 @@ im.run({ * * @param {HTMLDivElement} div */ - onAccept: async (div) => { + onAccept: async (div, setIframe) => { const leafletLoaded = await CookieConsent.loadScript('https://unpkg.com/leaflet@1.9.3/dist/leaflet.js'); const leafletReady = leafletLoaded && await im.childExists({childProperty: 'L'}); @@ -89,11 +89,17 @@ im.run({ for(const coordinates of markerCoordinates) coordinates && L.marker(JSON.parse(coordinates)).addTo(map); - div.classList.add('c-h-b'); + // Manually toggle show placeholder + div.classList.add('show-ph'); }, - onReject: (a) => { - console.log("must remove:", a); + /** + * + * @param {HTMLDivElement} serviceDiv + */ + onReject: (serviceDiv) => { + // remove: div[data-service] > div[placeholder] > div.leaflet-map + serviceDiv.lastElementChild.firstElementChild.remove(); }, languages : { @@ -114,11 +120,8 @@ im.run({ tweet && setIframe(tweet.firstChild); }, - /** - * @param {HTMLIFrameElement} iframe - */ onReject: (iframe) => { - iframe && iframe.parentElement.remove(); + iframe?.parentElement.remove(); }, languages : { @@ -165,12 +168,6 @@ im.run({ googlemapsapi: { - iframe: { - onload : function(dataId, setThumbnail){ - console.log("loaded iframe with data-id=", dataId, setThumbnail); - } - }, - onAccept: async (div, setIframe) => { await CookieConsent.loadScript(`https://maps.googleapis.com/maps/api/js?key=${MAPS_API_KEY}`); @@ -209,12 +206,11 @@ im.run({ map.setStreetView(panorama); } - await im.childExists({parent: div}); - setIframe(div.querySelector('iframe')); + await im.childExists({parent: div}) && setIframe(div.querySelector('iframe')); }, onReject: (iframe) => { - // console.log("must remove:", iframe); + iframe?.parentElement?.parentElement?.remove(); }, languages : { @@ -229,14 +225,12 @@ im.run({ instagram: { onAccept: async (div, setIframe) => { await CookieConsent.loadScript('https://www.instagram.com/embed.js'); - await im.childExists({childProperty: 'instgrm'}); - instgrm.Embeds.process(); - await im.childExists({parent: div}); - setIframe(div.querySelector('iframe')); + await im.childExists({childProperty: 'instgrm'}) && instgrm.Embeds.process(); + await im.childExists({parent: div}) && setIframe(div.querySelector('iframe')); }, onReject: (iframe) => { - // console.log("remove iframe:", iframe); + iframe?.remove(); }, languages: { diff --git a/demo/assets/fonts.css b/demo/assets/fonts.css index 3e05b50..ea6418c 100644 --- a/demo/assets/fonts.css +++ b/demo/assets/fonts.css @@ -1,25 +1,27 @@ -@font-face { - font-family: 'BasierSquare'; - src: local('BasierSquare'), +@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; + font-weight: 400; + font-style: normal; + font-display: swap; unicode-range: U+000-5FF; } -@font-face { - font-family: 'BasierSquare'; - src: local('BasierSquare'), +@font-face { + font-family: 'BasierSquare'; + src: local('BasierSquare'), url('./fonts/basier-square-semibold.woff2') format('woff2'); - font-weight: bold; - font-style: normal; + font-weight: bold; + font-style: normal; unicode-range: U+000-5FF; - font-display: swap; + font-display: swap; } - -body, -div[data-service]{ +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 e28b811..067f2f0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,13 +6,16 @@ + + * { + padding: 0; + margin: 0; + } - - + -
+

This is a test page


Demo with youtube & dailymotion config.

@@ -89,9 +139,10 @@

Youtube (title, autoscale, thumbnail & params)

data-service="youtube" data-id="861gfPVmgdc" data-title="A better CGi Luke Skywalker" - data-params="start=21&mute=1" + data-params="?start=21&mute=1" data-thumbnail="https://media.contentapi.ea.com/content/dam/star-wars-battlefront-2/images/2019/08/swbf2-refresh-hero-large-heroes-page-luke-skywalker-16x9-xl.jpg.adapt.crop16x9.1920w.jpg" - data-autoscale > + data-autoscale + >


@@ -207,31 +258,9 @@

Vimeo

>


-

Instagram

-
- - +

Instagram (JS API)

+
Instagram

- +

Google Maps (JS API)

+
Instagram
+

-
-
-
-
-
+

Leaflet (JS API)

+
@@ -341,7 +358,7 @@

Instagram

- + From 4eba0cd33d69a3f68ff0ceb8946bc99d61e011b8 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Wed, 18 Jan 2023 18:28:31 +0100 Subject: [PATCH 51/53] Increase version number --- dist/iframemanager.js | 2 +- package.json | 2 +- src/iframemanager.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/iframemanager.js b/dist/iframemanager.js index 0dd1434..59cdd6a 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -1,5 +1,5 @@ /*! - * iframemanager v1.1.0 + * iframemanager v1.2.0 * Author Orest Bida * Released under the MIT License */ diff --git a/package.json b/package.json index 45b9210..a0cac29 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@orestbida/iframemanager", - "version": "1.1.0", + "version": "1.2.0", "description": "GDPR friendly iframe manager written in vanilla js", "main": "dist/iframemanager.js", "files": [ diff --git a/src/iframemanager.js b/src/iframemanager.js index 3bd7004..5d68e10 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -1,5 +1,5 @@ /*! - * iframemanager v1.1.0 + * iframemanager v1.2.0 * Author Orest Bida * Released under the MIT License */ From eb2ff33f9bab51939d57fcca207ea0abf7c3f18e Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Wed, 18 Jan 2023 23:17:12 +0100 Subject: [PATCH 52/53] Update License: update year --- LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE b/LICENSE index 0b2590a..3ade459 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2021-2022 Orest Bida +Copyright (c) 2021-2023 Orest Bida Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal From 47d4d04e3bf50e96035b8814caa38424f1367579 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Wed, 18 Jan 2023 23:37:02 +0100 Subject: [PATCH 53/53] Update Readme.md: update examples and add missing `data` attribute --- README.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 0a99a39..17e3692 100644 --- a/README.md +++ b/README.md @@ -46,10 +46,9 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or - Automatic/custom thumbnail [support *](#note) - Allows to integrate any service which uses iframes - Improves website **performance**: - - no `