CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Coding my own GDPR cookie code  (Read 393 times)

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Coding my own GDPR cookie code
« on: 27 Nov 2023, 11:24:50 pm »
Hi, i currently use a third party GDPR cookie code but i want to code my own version.  Here is the 3rd party code i am currently using. 

Code: [Select]
<!-- GDPR Cookie code -->
  <!-- source is cookieconsent.insites.com  -->
 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" media="screen, projection, tv" />
  <script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
  <script>
   window.addEventListener("load", function(){
   window.cookieconsent.initialise({
   "palette": {
    "popup": {
      "background": "#252e39"
    },
    "button": {
      "background": "#14a7d0"
    }
   },
   "content": {
    "href": "privacy.php"
  }
})});



Where do i begin, youtube?  Or should i just use their js as an example?
« Last Edit: 27 Nov 2023, 11:57:29 pm by durangod »

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Coding my own GDPR cookie code
« Reply #1 on: 28 Nov 2023, 02:25:04 am »
GDPR makes me laugh, as you have to set a cookie to remember that they have either agreed to, or decline your cookie policy…

Why can’t you code it yourself?  That looks pretty straight forward coding?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Coding my own GDPR cookie code
« Reply #2 on: 28 Nov 2023, 10:56:05 am »
Makes me laugh too, i think its stupid but it is what it is ya know man.   

Its easy until you expand the mini js file that it calls, its miles longer than i ever thought it would be.  Of course they have all kinds of stuff in there that i wont or should not use im sure.

The other reason is that i have no clue what is old js BS that is depricated and what is js BS that is just not recommended.  I am curious how to stop the cookie that is created during login with js if they decline.

I did find a few videos on youtube, i think ill start there and make them my own, and post it here to see if it passes muster :)
« Last Edit: 28 Nov 2023, 10:57:47 am by durangod »

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Coding my own GDPR cookie code
« Reply #3 on: 28 Nov 2023, 09:54:06 pm »
GDPR makes me laugh, as you have to set a cookie to remember that they have either agreed to, or decline your cookie policy…
Actually localstorage can do a pretty good job.

What I hate about it is it's scripting only in most implementations, and wreaks utter havoc for braille users.

Shitting on accessibility, usability, and sanity out of some whackjob paranoia about a technical feature you NEED on any website that has the ability to be logged into?

It's the legal equivalent of hunting for a fly with a shotgun.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Coding my own GDPR cookie code
« Reply #4 on: 29 Nov 2023, 12:51:04 am »
It's the legal equivalent of hunting for a fly with a shotgun.

Well unless you use fly shot lol :)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Coding my own GDPR cookie code
« Reply #5 on: 29 Nov 2023, 03:22:41 am »
GDPR makes me laugh, as you have to set a cookie to remember that they have either agreed to, or decline your cookie policy…
Actually localstorage can do a pretty good job.
Still means having to save that the user has either declined or accepted the policy... so can I have half a point, please?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Coding my own GDPR cookie code
« Reply #6 on: 30 Nov 2023, 02:34:04 am »
Yeah its really pretty stupid to create a cookie just to record their option.    Thats why i dont have yes or no option on the ticker tape.  Instead of asking a question, i make a statement instead.  It allows them to visit the privacy page to see how cookies are used if they choose to.  It does not ever prevent the login cookie creation and i also do not create a cookie for the ticker, the ticker will show up again once they close their browser.

https://photos.app.goo.gl/Ft2S1tmwEeFcCscdA   

So i dont need all their junk in their js, probably just need the css and a html link and a button is all, i think i can do that... :)

here is their css code.... some stuff i will use other stuff not..

Code: [Select]
.cc-window {
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
.cc-window.cc-invisible {
    opacity: 0;
}
.cc-animate.cc-revoke {
    -webkit-transition: transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
}
.cc-animate.cc-revoke.cc-top {
    -webkit-transform: translateY(-2em);
    transform: translateY(-2em);
}
.cc-animate.cc-revoke.cc-bottom {
    -webkit-transform: translateY(2em);
    transform: translateY(2em);
}
.cc-animate.cc-revoke.cc-active.cc-top {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.cc-animate.cc-revoke.cc-active.cc-bottom {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.cc-revoke:hover {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.cc-grower {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
}
.cc-revoke,
.cc-window {
    position: fixed;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    z-index: 9999;
}
.cc-window.cc-static {
    position: static;
}
.cc-window.cc-floating {
    padding: 2em;
    max-width: 24em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.cc-window.cc-banner {
    padding: 1em 1.8em;
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.cc-revoke {
    padding: 0.5em;
}
.cc-revoke:hover {
    text-decoration: underline;
}
.cc-header {
    font-size: 18px;
    font-weight: 700;
}
.cc-btn,
.cc-close,
.cc-link,
.cc-revoke {
    cursor: pointer;
}
.cc-link {
    opacity: 0.8;
    display: inline-block;
    padding: 0.2em;
    text-decoration: underline;
}
.cc-link:hover {
    opacity: 1;
}
.cc-link:active,
.cc-link:visited {
    color: initial;
}
.cc-btn {
    display: block;
    padding: 0.4em 0.8em;
    font-size: 0.9em;
    font-weight: 700;
    border-width: 2px;
    border-style: solid;
    text-align: center;
    white-space: nowrap;
}
.cc-highlight .cc-btn:first-child {
    background-color: transparent;
    border-color: transparent;
}
.cc-highlight .cc-btn:first-child:focus,
.cc-highlight .cc-btn:first-child:hover {
    background-color: transparent;
    text-decoration: underline;
}
.cc-close {
    display: block;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    font-size: 1.6em;
    opacity: 0.9;
    line-height: 0.75;
}
.cc-close:focus,
.cc-close:hover {
    opacity: 1;
}
.cc-revoke.cc-top {
    top: 0;
    left: 3em;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}
.cc-revoke.cc-bottom {
    bottom: 0;
    left: 3em;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}
.cc-revoke.cc-left {
    left: 3em;
    right: unset;
}
.cc-revoke.cc-right {
    right: 3em;
    left: unset;
}
.cc-top {
    top: 1em;
}
.cc-left {
    left: 1em;
}
.cc-right {
    right: 1em;
}
.cc-bottom {
    bottom: 1em;
}
.cc-floating > .cc-link {
    margin-bottom: 1em;
}
.cc-floating .cc-message {
    display: block;
    margin-bottom: 1em;
}
.cc-window.cc-floating .cc-compliance {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}
.cc-window.cc-banner {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.cc-banner.cc-top {
    left: 0;
    right: 0;
    top: 0;
}
.cc-banner.cc-bottom {
    left: 0;
    right: 0;
    bottom: 0;
}
.cc-banner .cc-message {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    max-width: 100%;
    margin-right: 1em;
}
.cc-compliance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: justify;
    align-content: space-between;
}
.cc-floating .cc-compliance > .cc-btn {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.cc-btn + .cc-btn {
    margin-left: 0.5em;
}
@media print {
    .cc-revoke,
    .cc-window {
        display: none;
    }
}
@media screen and (max-width: 900px) {
    .cc-btn {
        white-space: normal;
    }
}
@media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
    .cc-window.cc-top {
        top: 0;
    }
    .cc-window.cc-bottom {
        bottom: 0;
    }
    .cc-window.cc-banner,
    .cc-window.cc-floating,
    .cc-window.cc-left,
    .cc-window.cc-right {
        left: 0;
        right: 0;
    }
    .cc-window.cc-banner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .cc-window.cc-banner .cc-compliance {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }
    .cc-window.cc-floating {
        max-width: none;
    }
    .cc-window .cc-message {
        margin-bottom: 1em;
    }
    .cc-window.cc-banner {
        -webkit-box-align: unset;
        -ms-flex-align: unset;
        align-items: unset;
    }
    .cc-window.cc-banner .cc-message {
        margin-right: 0;
    }
}
.cc-floating.cc-theme-classic {
    padding: 1.2em;
    border-radius: 5px;
}
.cc-floating.cc-type-info.cc-theme-classic .cc-compliance {
    text-align: center;
    display: inline;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}
.cc-theme-classic .cc-btn {
    border-radius: 5px;
}
.cc-theme-classic .cc-btn:last-child {
    min-width: 140px;
}
.cc-floating.cc-type-info.cc-theme-classic .cc-btn {
    display: inline-block;
}
.cc-theme-edgeless.cc-window {
    padding: 0;
}
.cc-floating.cc-theme-edgeless .cc-message {
    margin: 2em;
    margin-bottom: 1.5em;
}
.cc-banner.cc-theme-edgeless .cc-btn {
    margin: 0;
    padding: 0.8em 1.8em;
    height: 100%;
}
.cc-banner.cc-theme-edgeless .cc-message {
    margin-left: 1em;
}
.cc-floating.cc-theme-edgeless .cc-btn + .cc-btn {
    margin-left: 0;
}




« Last Edit: 30 Nov 2023, 02:52:12 am by durangod »

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Coding my own GDPR cookie code
« Reply #7 on: 30 Nov 2023, 04:20:54 am »
dunno WTF all that CSS is for, but it's NOT good for what should be a DIV, a BUTTON, the button hooked to closest(div).remove();

For style outer container position:fixed top/left, full size, z-index dafoxtrot out of it, so it can overlay and prevent clicking until they agree.

That is more CSS than I'd have for HTML, CSS, and JS combined.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Coding my own GDPR cookie code
« Reply #8 on: 30 Nov 2023, 04:28:17 am »
Yeah i agree, theirs is way too much coding, this does the same thing.

the display none is commented out until i get the js done.. 

here is my css i came up with on my own

Code: [Select]
/*
  ****************************
    GDPR Notify Ticker Banner   
  ****************************
*/

#gdpr_notice {
    width: 99%;
    position: fixed;
    bottom: 0;
    color: #ffffff;
    background-color: #252e39;
    z-index: 1;
    /* display: none; */
}

.gdpr_container {
    width: 100em;
    margin: auto;
}

.gdpr_subcontainer {
    width: 75%;
}

.gdpr_ticker {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 2em;
}

.gdpr_ticker a {
    padding-left: 1em;
    color: #ffffff;
    font-weight: 500;
    text-decoration: underline;
}


#gdpr_button {
     border-radius: 5px;
     padding: 0.75em;
     font-size: 1em;
     font-family: inherit;
     cursor: pointer;
     background-color: #14a7d0;
}

.gdpr_btn_text {
    color: #ffffff;
}



and here is my html

Code: [Select]
<div id="gdpr_notice">
     
    <div class="gdpr_container">
       
        <div class="gdpr_subcontainer">
           
            <div class="gdpr_ticker">
             
              <p>This Website uses cookies to ensure you get the best experience on our website.  <a href="privacy.php" target-"_blank">Learn More</a></p>
              <button id="gdpr_button"><span class="gdpr_btn_text">Got It!</span></button>
               
            </div>
           
           
        </div>
       
    </div>
     
 </div>
 


Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Coding my own GDPR cookie code
« Reply #9 on: 30 Nov 2023, 04:53:03 am »
This is untested, but how I'd go about it if I gave a flying purple fish about the EU's idiocy.

HTML:
Code: [Select]
<section id="cookieWarning">
<div>
<p>This site uses 'cookies' for essential functionality.</p>
</div>
<!-- #cookieWarning --></section>

The inner DIV is there so that I can make it behave like a modal when scripting is present. IF JavaScript is not present just show it as a normal part of the page since you can't close it and have it remember you closed it without JS.

The button is not there because it is scripting only, and thus has ZERO huffing business in the markup!

Code: [Select]
{
const
cookieWarning = document.querySelector("cookieWarning");
if (localStorage.getItem("cookieAgree")) {
cookieWarning.remove();
} else {
cookieWarning.classList.add('scripted'),
cookieWarning.firstElementChild.append(
Object.assign(
document.createElement("button"),
{
onclick : (e) => {
localstorage.setItem("cookieAgree", 1);
cookieWarning.remove();
},
textContent = "Got it!",
type : "button"
}
)
);
}
}

if the cookie is set, remove the warning. If it's not set, add the button that removes the cookies, and the class to tell CSS to lock out the page with a fixed element over everything else.

Style would be something like:
Code: [Select]
#cookieAgreement.scripted {
position:fixed;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background:#EEEC;
display:flex;
align-items:end;
gap:1rem;
}

#cookieAgreement.scripted div {
width:100%;
display:flex;
padding:0.5rem 1rem;
background:#FFF;
border-top:0.0625rem solid #0008;
}

#cookieAgreement.scripted p {
flex-grow:1;
}

the flex grow pushes the button to the far side.

Again untested, may have typos.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Coding my own GDPR cookie code
« Reply #10 on: 30 Nov 2023, 05:11:20 am »
Thanks, much appreciated :)

durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Coding my own GDPR cookie code
« Reply #11 on: 30 Nov 2023, 03:26:11 pm »
for css, Is em out the window now, i noticed alot of people use rem now?

and my editor does not recognize css gap.  So i used html &nbsp;  instead.

I understand why you did it your way, because its alot shorter than having to break down the cookie array and look for the value.  Just that alone adds alot of code to the mix. 

Though i think i dont have to break the cookie down like others do, (as i dont care about the value i just care about the existance).  So i just have to test for existance which should be just one DOM document command and then a if statement.  I did a normal version with js so i could understand how the basic version worked, that helps me to understand your version better.    I will share the basic version when i get it done for others to have a choice between using local storage and not.  :)


durangod

  • Sr. Member
  • ****
  • Posts: 364
  • Karma: +5/-0
  • Weebles Wobble - but they dont fall down!
Re: Coding my own GDPR cookie code
« Reply #12 on: 30 Nov 2023, 07:02:58 pm »
here is my basic attempt using the js array

setting the cookie when needed   
Code: [Select]

 <script>
     
  "use strict";

   /*  Setting the cookie here */
 
    function setGDPRcookie(cookname, cookvalue, cookexpdays)
    {
       
      var GDPRcooky = "";
     
      let date = new Date();
      date.setTime(date.getTime() + (cookexpdays * 24 * 60 * 60 * 1000));
   
      const gdpr_expires = "expires=" + date.toUTCString();
   
      document.cookie = cookname + "=" + cookvalue  + "; " +  gdpr_expires  + "; path=/; Secure; SameSite=Strict;";
   
    }//close function setGDPRcookie

</script>
 

 here is the click event for the button click

Code: [Select]

<script>

"use Strict";
 
  document.querySelector("#gdpr_button").addEventListener("click", () => {
     
    document.querySelector("#gdpr_notice ").style.display = "none";
   
    setGDPRcookie("GDPRcooky", true, 10); /* 10 days */
     
  });

</script>

 
we need to check if the cookie exists

I did have a problem with iteration, i forgot there are 4 arrays, so it will go found, not found, not found, not found or   not found, not found, found, not found   you get the drift....

So the found side is easy if its found i just add a return to kill the loop.

But if its not found i had to count the arrays and then make sure it was not found when the last array was looked at before setting the display block 
Seems to be working now that i started the iteration at 1 rather than 0

Code: [Select]

<script>

 "use Strict";

 function checkGDPRcookie()
  {
     
    /* split up array by semicolon */
    const GDPRdocCook = document.cookie.split(';');

   /* how many individual arrays do we have */
    var howmany = GDPRdocCook.length;
    var iteration = 1;
   
    /* then search for the cookie name */
   
    GDPRdocCook.forEach(
                        (cookvalue) => {
                                       
                                    if(cookvalue.indexOf('GDPRcooky') > -1)
                                    {
                                         
                                       /* found exists */
                                         
                                       document.querySelector("#gdpr_notice").style.display = "none";
                                        return;                                     
                                         
                                        }else{

                                                /* not found */
                                                /* but we need to be sure it is not found */
                                                /* after all of the iterations (arrays) have been looked at */
                                                /* otherwise example if we have 4 arrays then it sets the display */
                                                /* block every time and that is a waste of resources */
                                               
                                                if(iteration == howmany)
                                                {
                                               
                                                  document.querySelector("#gdpr_notice").style.display = "block";
                                                  return;
                                                 
                                                }
                                               
                                                iteration++;                                               

                                                 }//close else index of
                      });
     
  }//close function checkGDPRcookie
 
 </script>

then to check for it, in my site head file i do this

Code: [Select]
<script>

"use Strict";

document.addEventListener("DOMContentLoaded", function()
{

  checkGDPRcookie();

});

</script>
« Last Edit: 1 Dec 2023, 12:59:05 am by durangod »

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Coding my own GDPR cookie code
« Reply #13 on: 4 Dec 2023, 06:28:54 am »
for css, Is em out the window now, i noticed alot of people use rem now?
Not out the window, but now that Firefox screwing up REM (not scaling it to user preference and defaulting 1rem to 16px irregardless of OS or browser setting) is years in the rear-view mirror (was fixed same time "Quantum" came out) REM can be more convenient when you don't need/want internal scaling.

It's now a case of "right tool for the right job" instead of "Well it doesn't work yet"

and my editor does not recognize css gap.  So i used html &nbsp;  instead.

If your editor is saying what CSS you can and cannot use, it's utter incompetent bullshit you shouldn't be using in the first place! Get a better editor instead of whatever clown-shoes you're waddling around in.

Especially if your alternative is taking a dump on the markup with non-breaking spaces. That's as dumbass as using double-breaks for padding.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Coding my own GDPR cookie code
« Reply #14 on: 4 Dec 2023, 07:15:53 am »
Also I have no idea why you would have "four arrays" (of what exactly) or what that has to do with what should be ONE cookie?

But then using split for what should be a regExp is a bit wonky too.

Code: [Select]
function cookieGet(name) {
const match = document.cookie.match(
new RegExp(
"(^|;)\\s*" +
name.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&") +
"=([^;]*)(;|$)",
"i"
)
);
return match ? unescape(match[2]) : undefined;
} // cookieGet

The setter could stand a little reduction too.
Code: [Select]
function cookieSet(name, value, expiresInDays = false) {
document.cookie = (
name + "=" + escape(value)
";expires=" + (new Date(
expiresInDays === false ?
8640000000000000 :
Date.now() + expiresInDays * 86400000
)).toUTCString() +
";path=/;secure;samesite=strict"
);
} // cookieSet

Though I prefer to use an object of properties for setting, I dumbed down my routine to more closely match yours. (untested, may be typos)

In both cases though, your lack of using "escape" on the values is asking for headaches. If you're plugging a variable into a cookie string, escape it!
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement