From 729b8f136f5450a63796c77f59a4d13a32c128a4 Mon Sep 17 00:00:00 2001 From: Max <32452032+max-sym@users.noreply.github.com> Date: Fri, 13 Jan 2023 09:34:01 +0000 Subject: [PATCH] add center position --- README.md | 3 +- src/glowCookies.css | 139 +++++++++++++++++++++++++++----------------- src/glowCookies.js | 10 ++-- 3 files changed, 93 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index dd80a17..a304fe4 100644 --- a/README.md +++ b/README.md @@ -88,7 +88,8 @@ Now there are certain parameters that you can change to customize your banner. | Parameter | Type | Values | | --------------------- | ------ | ------------------------------------------------------------------------------------------------------ | | `border` | String | (`"border"` or `"none"`) Default: `"border"` | -| `position` | String | (`"left"` or `"right"`) Default: `"left"` | +| `position` | String | (`"left"`, `"center"` or `"right"`) Default: `"left"` | +| `managePosition` | String | (`"left"` or `"right"`) Default: `"left"` | | `bannerDescription` | String | Example: `"We use our own and third-party cookies to personalize content and to analyze web traffic."` | | `bannerLinkText` | String | Example: `"Read more about cookies"` | | `bannerBackground` | String | Example: `"#FAFAFA"` Example: `"lightblue"` | diff --git a/src/glowCookies.css b/src/glowCookies.css index cf46d79..647b397 100644 --- a/src/glowCookies.css +++ b/src/glowCookies.css @@ -1,37 +1,59 @@ /* CUSTOM CLASSES */ -.glowCookies__border { - border: 1px solid #e6e6e6 !important; +.glowCookies__container { + display: flex; + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + opacity: 0; + visibility: hidden; + pointer-events: none; + z-index: 999; + padding: 15px; } -.glowCookies__left { - left: 15px; +.glowCookies__container.glowCookies__center { + align-items: center; + justify-content: center; } -.glowCookies__right { - right: 15px; +.glowCookies__container.glowCookies__left { + align-items: flex-end; + justify-content: flex-start; } -.glowCookies__show { - opacity: 1 !important; - visibility: visible !important; - transform: scale(1) !important; +.glowCookies__container.glowCookies__right { + align-items: flex-end; + justify-content: flex-end; +} + +.glowCookies__container.glowCookies__show { + opacity: 1; + visibility: visible; + pointer-events: all; + transition: opacity 0.2s ease; +} + +.glowCookies__border { + border: 1px solid #e6e6e6 !important; } /* COMMON STYLES */ /* ========================= */ .glowCookies__banner { - opacity: 0; - visibility: hidden; transform: scale(0.9); font-family: inherit; - position: fixed; width: auto; max-width: 375px; - z-index: 999; - -webkit-box-shadow: 0 .625em 1.875em rgba(2,2,3,.2); - -moz-box-shadow: 0 .625em 1.875em rgba(2,2,3,.2); - box-shadow: 0 .625em 1.875em rgba(2,2,3,.2); - transition: transform .2s ease, opacity .2s ease !important; + -webkit-box-shadow: 0 0.625em 1.875em rgba(2, 2, 3, 0.2); + -moz-box-shadow: 0 0.625em 1.875em rgba(2, 2, 3, 0.2); + box-shadow: 0 0.625em 1.875em rgba(2, 2, 3, 0.2); + transition: transform 0.2s ease, opacity 0.2s ease !important; +} + +.glowCookies__show .glowCookies__banner { + transform: scale(1); } .glowCookies__banner .accept__btn__styles { @@ -77,7 +99,7 @@ } .btn__section .btn__settings { - width: 100%; + width: 100%; } } @@ -124,21 +146,20 @@ @media (max-width: 455px) { .glowCookies__banner__1 { - bottom: 0px; - left: 0px; - right: 0px; - margin: 7px; + bottom: 0px; + left: 0px; + right: 0px; + margin: 7px; } .glowCookies__banner__1 .btn__section { - display: flex; - flex-direction: column; - justify-content: space-between; - margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 20px; } } - /* BANNER STYLE 2 */ /* ========================= */ .glowCookies__banner__2 { @@ -182,19 +203,19 @@ @media (max-width: 455px) { .glowCookies__banner__2 { - bottom: 0px; - left: 0px; - right: 0px; - border-radius: 0px; - border: 0px; - max-width: 550px; + bottom: 0px; + left: 0px; + right: 0px; + border-radius: 0px; + border: 0px; + max-width: 550px; } .glowCookies__banner__2 .btn__section { - display: flex; - flex-direction: column; - justify-content: space-between; - margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 20px; } } @@ -241,19 +262,19 @@ @media (max-width: 455px) { .glowCookies__banner__3 { - bottom: 0px; - left: 0px; - right: 0px; - border-radius: 0px; - border: 0px; - max-width: 550px; + bottom: 0px; + left: 0px; + right: 0px; + border-radius: 0px; + border: 0px; + max-width: 550px; } .glowCookies__banner__3 .btn__section { - display: flex; - flex-direction: column; - justify-content: space-between; - margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 20px; } } @@ -263,6 +284,9 @@ position: fixed; bottom: 15px; z-index: 999; + display: flex; + align-items: center; + justify-content: center; min-height: 50px; min-width: 125px; cursor: pointer; @@ -274,9 +298,17 @@ padding: 12px 18px; text-decoration: none; user-select: none; - -webkit-box-shadow: 0 .625em 1.875em rgba(2,2,3,.1); - -moz-box-shadow: 0 .625em 1.875em rgba(2,2,3,.1); - box-shadow: 0 .625em 1.875em rgba(2,2,3,.1); + -webkit-box-shadow: 0 0.625em 1.875em rgba(2, 2, 3, 0.1); + -moz-box-shadow: 0 0.625em 1.875em rgba(2, 2, 3, 0.1); + box-shadow: 0 0.625em 1.875em rgba(2, 2, 3, 0.1); +} + +.prebanner.glowCookies__left { + left: 15px; +} + +.prebanner.glowCookies__right { + right: 15px; } .prebanner__border__1 { @@ -292,14 +324,13 @@ } .animation { - transition: .2s; + transition: 0.2s; } .animation:hover { - transform: scale(.97); + transform: scale(0.97); } .prebanner:hover { text-decoration: none; } - diff --git a/src/glowCookies.js b/src/glowCookies.js index b40caf8..685d56b 100644 --- a/src/glowCookies.js +++ b/src/glowCookies.js @@ -34,7 +34,7 @@ class GlowCookies { createDOMElements() { // COOKIES BUTTON this.PreBanner = document.createElement("div"); - this.PreBanner.innerHTML = ``; @@ -43,9 +43,11 @@ class GlowCookies { // COOKIES BANNER this.Cookies = document.createElement("div"); + this.Cookies.className = `glowCookies__container glowCookies__${this.config.position}`; + this.Cookies.id = 'glowCookies-container'; this.Cookies.innerHTML = `

${this.banner.heading}

@@ -97,12 +99,12 @@ class GlowCookies { openManageCookies() { this.PreBanner.style.display = this.config.hideAfterClick ? "none" : "block" - this.DOMbanner.classList.remove('glowCookies__show') + this.Cookies.classList.remove('glowCookies__show') } openSelector() { this.PreBanner.style.display = "none"; - this.DOMbanner.classList.add('glowCookies__show') + this.Cookies.classList.add('glowCookies__show') } acceptCookies() {