From 8d0c0ce510c517db50ccf1f4ed74ef3d5c54105a Mon Sep 17 00:00:00 2001 From: TS Date: Fri, 6 Nov 2020 17:55:49 +0100 Subject: [PATCH] Updated reject flow (added close button when info visible) Updated examples (callback) --- README.md | 4 --- demo/index-bootstrap.html | 28 ++++++++------- demo/index-params.html | 59 ++++++++++++++----------------- demo/index.css | 33 ++++++++++++++++++ demo/index.html | 24 ++++++++----- demo/index.js | 11 ++++++ dist/cookie-warn.js | 69 ++++++++++++++++++++++++------------- dist/cookie-warn.min.js | 4 +-- dist/cookie-warn.min.js.gz | Bin 1943 -> 1982 bytes package.json | 2 +- src/cookie-warn.js | 67 +++++++++++++++++++++++------------ 11 files changed, 195 insertions(+), 106 deletions(-) create mode 100644 demo/index.css create mode 100644 demo/index.js diff --git a/README.md b/README.md index f15b9ea..74edcf1 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,3 @@ EU Cookie Law warning message ``` - -## TODO - -- add more info to the demo pages diff --git a/demo/index-bootstrap.html b/demo/index-bootstrap.html index 49e7dee..e8b5202 100644 --- a/demo/index-bootstrap.html +++ b/demo/index-bootstrap.html @@ -5,28 +5,32 @@ EU Cookie Law warning message demo page - + + + + + + - - - - - +
-

EU cookie warning example

+

EU cookie warning example

+
+

More examples

+ +
diff --git a/demo/index-params.html b/demo/index-params.html index 9889fc1..b629397 100644 --- a/demo/index-params.html +++ b/demo/index-params.html @@ -5,7 +5,10 @@ EU Cookie Law warning message demo page - + + - + data-callback="cookieWarnCallback"> + + +
-

EU cookie warning example

+

EU cookie warning example

+ +
+

More examples

-
- - +
+ diff --git a/demo/index.css b/demo/index.css new file mode 100644 index 0000000..e28ae98 --- /dev/null +++ b/demo/index.css @@ -0,0 +1,33 @@ +body { + color: #d2d2d2; + background-color: #424242; + margin: 2%; + line-height: 1.8em; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +a { + color: white; + text-decoration: none; + padding-bottom: 3px; + border-bottom: 1px dashed #a1a1a1; +} + +a:hover { + color: white; + text-decoration: none; + border-bottom: 1px solid #f1f1f1; +} + +.myCookieWarningClass { + box-shadow: 0px 0px 10px 1px #101010; + border-radius: 5px; + border: 1px solid #a1a1a1; + margin: 30px; +} + +#output { + color: orange; + letter-spacing: 2px; +} + diff --git a/demo/index.html b/demo/index.html index 156f420..9682cd7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,26 +1,32 @@ - + EU Cookie Law warning message demo page - - + + + + +
-

EU cookie warning example

+

EU cookie warning example

+
+

More examples

+ +
diff --git a/demo/index.js b/demo/index.js new file mode 100644 index 0000000..8d0bc10 --- /dev/null +++ b/demo/index.js @@ -0,0 +1,11 @@ + +// callback + +var cookieWarnCallback = function (accepted) { + + var message = 'I am a callback, cookies accepted: ' + (accepted ? 'TRUE' : 'FALSE'); + + document.getElementById('output').innerHTML = message; + console.log(message); + +}; \ No newline at end of file diff --git a/dist/cookie-warn.js b/dist/cookie-warn.js index c20c45e..cee5bff 100644 --- a/dist/cookie-warn.js +++ b/dist/cookie-warn.js @@ -1,12 +1,12 @@ /** * @preserve cookie-warn - EU cookie warn * - * @version v3.1.7 + * @version v3.1.10 * @link http://schalk.hu/projects/cookie-warn/demo/index.html * @author Tamas Schalk (https://github.com/schalkt) * @license MIT */ -(function(fn) { +(function (fn) { "use strict"; @@ -23,7 +23,7 @@ } // get cookie warn attributes - var getAttributes = function() { + var getAttributes = function () { var lang = document.documentElement.lang ? document.documentElement.lang : 'en'; var langData = el.getAttribute('data-lang-' + lang); @@ -36,8 +36,9 @@ 'more_text': 'Click here for more information', 'more_link': 'http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm', 'reject_text': 'I reject', - 'reject_info': 'You can disable unwanted cookies by using this program', - 'reject_link': 'https://www.ghostery.com/' + 'reject_info': null, + 'reject_link': null, + 'close_text': 'Close' }; } else { data = JSON.parse(langData.replace(/'/g, '"')); @@ -76,7 +77,7 @@ // set or get cookie - var cookie = function(name, value, days, path, domain, secure) { + var cookie = function (name, value, days, path, domain, secure) { if (value === undefined) { @@ -135,7 +136,7 @@ // warning box close function window[fn] = { - accept: function() { + accept: function () { // set the cookie cookie(cookieName, true, attributes.expire, attributes.path, attributes.domain, attributes.secure); @@ -149,26 +150,38 @@ }, - reject: function() { + reject: function () { // set the cookie cookie(cookieName, false, attributes.expire, attributes.path, attributes.domain, attributes.secure); - // show reject information var wbox = document.getElementById(elementId); - wbox.className = wbox.className + ' reject'; + + // show reject information + if (attributes.data.reject_info) { + wbox.className = wbox.className + ' reject'; + } else { + wbox.className = wbox.className + ' closed'; + } cookieWarnValue = false; check(cookieWarnValue); }, + close: function () { + + var wbox = document.getElementById(elementId); + wbox.className = wbox.className + ' closed'; + + }, + }; var cookieWarnValue = cookie(cookieName); // check - var check = function(cookieWarnValue) { + var check = function (cookieWarnValue) { var accepted = cookieWarnValue == 'true' || cookieWarnValue === true ? true : false; @@ -176,6 +189,10 @@ console.log('status: ' + (accepted ? 'accepted' : 'rejected')); } + if (!attributes.callback) { + attributes.callback = 'cookieWarnCallback'; + } + if (attributes.callback && window[attributes.callback]) { if (attributes.debug) { console.log('call: ' + attributes.callback); @@ -185,7 +202,7 @@ }; - var warn = function() { + var warn = function () { if (!attributes.data) { console.error('Empty or invalid data-lang parameters'); @@ -212,7 +229,7 @@ ], type: 'text/css', element: document.createElement('style'), - append: function() { + append: function () { if (!bootstrap) { this.style = this.style.concat(this.style2); @@ -240,15 +257,21 @@ } var info = (attributes.data.more_link && attributes.data.more_text) ? ' ' + attributes.data.more_text + ' ' : ''; - var accept_button = '' + attributes.data.accept_text + ''; - var reject_button, reject_content; + var accept_button = '' + attributes.data.accept_text + ' '; + var reject_button = ''; + var reject_content = ''; if (attributes.data.reject_text) { - reject_button = '' + attributes.data.reject_text + ''; - reject_content = '' + attributes.data.reject_info + ' ' + attributes.data.reject_link + ''; - } else { - reject_button = ''; - reject_content = ''; + + reject_button = '' + attributes.data.reject_text + ' '; + + if (attributes.data.reject_info || attributes.data.reject_link) { + reject_content = ' '; + reject_content += attributes.data.reject_info + ' ' + attributes.data.reject_link + ' '; + reject_content += ' ' + attributes.data.close_text + ' '; + reject_content += ' '; + } + } wbox.innerHTML = '
' + attributes.data.text + info + accept_button + reject_button + reject_content + '
'; @@ -257,14 +280,14 @@ var body = document.getElementsByTagName("body")[0]; body.appendChild(wbox); - setTimeout(function() { + setTimeout(function () { wbox.className = wbox.className + ' loaded'; }, attributes.delay); }; - var isDOMready = function() { + var isDOMready = function () { var readyState = document.readyState; @@ -281,7 +304,7 @@ } } else { - setTimeout(function() { + setTimeout(function () { isDOMready(); }, 200); } diff --git a/dist/cookie-warn.min.js b/dist/cookie-warn.min.js index f7150ac..d6827b2 100644 --- a/dist/cookie-warn.min.js +++ b/dist/cookie-warn.min.js @@ -1,9 +1,9 @@ /** * @preserve cookie-warn - EU cookie warn * - * @version v3.1.7 + * @version v3.1.10 * @link http://schalk.hu/projects/cookie-warn/demo/index.html * @author Tamas Schalk (https://github.com/schalkt) * @license MIT */ -!function(l){"use strict";var p,e,t,s,r,i,d=l+"Box",a="cookieWarn.accepted",n=document.getElementById(l);n?(e=document.documentElement.lang||"en",e=(e=n.getAttribute("data-lang-"+e))?JSON.parse(e.replace(/'/g,'"')):{text:"Our website uses cookies.",accept_text:"I accept",more_text:"Click here for more information",more_link:"http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm",reject_text:"I reject",reject_info:"You can disable unwanted cookies by using this program",reject_link:"https://www.ghostery.com/"},(e={delay:parseInt(n.getAttribute("data-delay")),expire:parseInt(n.getAttribute("data-expire")),domain:n.getAttribute("data-domain"),path:n.getAttribute("data-path"),secure:n.getAttribute("data-secure"),debug:n.getAttribute("data-debug"),style:n.getAttribute("data-style"),class:n.getAttribute("data-class"),callback:n.getAttribute("data-callback"),data:e}).path=e.path||"/",e.delay=e.delay||500,e.expire=e.expire||365,e.secure="true"==e.secure,e.debug="true"==e.debug,e.debug&&console.log(e),p=e,t=function(e,t,a,n,o,c){if(void 0===t){for(var l,s,r=document.cookie.split(";"),i=0;i'+p.data.more_text+" ":"",n=''+p.data.accept_text+"",c=p.data.reject_text?(o=''+p.data.reject_text+"",''+p.data.reject_info+' '+p.data.reject_link+""):o="",t.innerHTML='
'+p.data.text+a+n+o+c+"
",document.getElementsByTagName("body")[0].appendChild(t),setTimeout(function(){t.className=t.className+" loaded"},p.delay)):console.error("Empty or invalid data-lang parameters"):setTimeout(function(){i()},200)})()):console.warn(l+" element not found by id")}("cookieWarn"); \ No newline at end of file +!function(o){"use strict";var p,e,t,s,r,d,i=o+"Box",a="cookieWarn.accepted",n=document.getElementById(o);n?(e=document.documentElement.lang||"en",e=(e=n.getAttribute("data-lang-"+e))?JSON.parse(e.replace(/'/g,'"')):{text:"Our website uses cookies.",accept_text:"I accept",more_text:"Click here for more information",more_link:"http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm",reject_text:"I reject",reject_info:null,reject_link:null,close_text:"Close"},(e={delay:parseInt(n.getAttribute("data-delay")),expire:parseInt(n.getAttribute("data-expire")),domain:n.getAttribute("data-domain"),path:n.getAttribute("data-path"),secure:n.getAttribute("data-secure"),debug:n.getAttribute("data-debug"),style:n.getAttribute("data-style"),class:n.getAttribute("data-class"),callback:n.getAttribute("data-callback"),data:e}).path=e.path||"/",e.delay=e.delay||500,e.expire=e.expire||365,e.secure="true"==e.secure,e.debug="true"==e.debug,e.debug&&console.log(e),p=e,t=function(e,t,a,n,c,l){if(void 0===t){for(var o,s,r=document.cookie.split(";"),d=0;d'+p.data.more_text+" ":"",n=''+p.data.accept_text+" ",l=c="",p.data.reject_text&&(c=''+p.data.reject_text+" ",(p.data.reject_info||p.data.reject_link)&&(l=' ',l+=p.data.reject_info+' '+p.data.reject_link+" ",l+=' '+p.data.close_text+" ",l+=" ")),t.innerHTML='
'+p.data.text+a+n+c+l+"
",document.getElementsByTagName("body")[0].appendChild(t),setTimeout(function(){t.className=t.className+" loaded"},p.delay)):console.error("Empty or invalid data-lang parameters"):setTimeout(function(){d()},200)})()):console.warn(o+" element not found by id")}("cookieWarn"); \ No newline at end of file diff --git a/dist/cookie-warn.min.js.gz b/dist/cookie-warn.min.js.gz index a4bb7f5666004226c9e43a8170a5353bddecd3ba..a85bc2d5d7df225fe2009c934d3eb95aaf066f2c 100644 GIT binary patch literal 1982 zcmV;v2SNBBiwFP!000003awaebKAHP{(ip##@)zdNKvwrTzjMu-zCko=`_i7;Q&D;}KpS>@M~lp1gSR9ecrkE-Nrl-2qFrzRh8L zFDu2y?ET-`1x5>mbm%*%Os*BXdl{WYXH&OUvQ-|7b*O2Hf1{(+)JGEJeh zknvE7OsDknVo{V?ZNcN2 zv~orZ;3d%yJ;7v{^i|~}6`hL8z@L*&9xvtnf%uH^9;oVGY z8WZ6qoY-F*+y~Z7dAQOQw2SXhS7;xofXz|Qw8L_R!<8h3wOBG@%v&o$8bMv@QsU1f zFBg-UG3*3Q#;PugZo%<$3u&QEFDs7uE=1LB zGAQIacFOsntantE4#RyvgoiS(;J=_75WzFOlDUeH({y{>4@+s6$04+X00U`_OpijE zJp^Sis~693qAj9h*Tr*WXbT}}A&of>aa#nDMKP1Z=(H2` z*~lqWw7=W!>**918@-8cu-(4=@ii_tR}|bN>lLOg+Qw;7vm}b8h^3?r}k$VGbZq0Ku6bA{pHW>%abKf-V02 zfI-WV0^ZlJz}A>W%?=6!8xlAd*EeA;6x_2vNDGM+vQcA=TC=p|)nqm|@&oCI6dNZ( zjz;@I9+kCOdc3iM5j?0PtN-}%>I<4$Ej+(Fq`E_@Kjdu91Jz;D4wLqn#`6)CcBrC5 z;h^Y&d*_~B-7dUG z-Rt{neIqtaW{dZ3;%}@c!;>k}Zxn(9x+L*)_rO6Tr|)V2Je$>XKY_?a(I>egH{Xu~ z&RllFqELB8oJ{>)o4=mOarS?a1J7V^MuVhz`MhXtij9Ax@MkEzTNujzziS4qWCW_f z$AIi(*xw8i!*+W@@e9dOSK!7`MJbM6fF8mO0v?>d* zq`KnLT%z&(xN!{XJsNqUZ-1?!T8~D&69Un8U4ovoA3Q%==}Z>krl~B~{Cf;aG}*>h zQehW?@EC8yrqL_IKpGh5YOHIUl)BxW=MRu2zm8q*i+^&TWTvgvt9X1qEgzBs<~E)t zRlZo#FE$HlZr3=XNtUFa(Q{``!-J05mo zMl-9}=6;Fo&e$Mbtd07F3Skg?7FZqZ%`$YcO)LZPSBvb||4`}x2CbFJ)nE?0T6j@jR#%A}GB_ChdTg45*r zD-^#~%>0bLi92KRUm-rD%_oX-3U`*JrY^3_5~>u9nqbl~NT3``tH-wf0h02_wx1dv}}dXAk~%YMjO=~ z2t;}$&yG1^Cn+{NAv8%U?kfm}k%cyQQA%mrCW*RG*)ZW@GV<&)H<5#geuza#rP2;I z&t2MaL#l57=}-&918%PsFCwuUG>s1T8qwY@^CI&eUE>Px`AKIm;MrDGDyW0Hxy0Oo z?Fqi$>{~$Nw&mS;p*2dBR@PbP+zq?b~=+P()pKN)Zu zJhq4z(MNWe?o+|(zQf{8AatAb89C@Vj8XQ4ZFBmN?SSHtt@pHB*lrKkNLM~eQ3zD; zP>ewWL`Go|h^NGY-(r#hqXVN1*ITm?mq%jkt%3-`0 z%WTH>|5RZ3{6#95>+wApALoqmz6;N%*vb0dfHt|Kr;&e~JDAdz%_*0&*&1!a{hc>x QwYZ=B8{L?IJwOrw0Hg%gm;e9( literal 1943 zcmV;I2Wa>oiwFP!000003bj~mbKAHP{(ip##@)zdNKvwr-1SH^zRNY!%T1F^CvH2P z)XhNTNV_?ytJBHE7E4jxB+F(}8~p_eXD0)) zlM+^XB2@`@$c45b}0A+!_dwYf7 zC*PdR8&xgTc`MuBQM5!91=J2o z9;>|6MY96sk_EUo70~ka=52|zGj$oj{=8pwprjINaevQ2@fdOhDx&bSLs4dpgMgR9 zi7|o3Jc2O1{O#k1_em{`g#Z!*btMW2Ca04{e9BM5Fx@)1b1DDO7`BF)l@1ub&32Zt z2|mJ${kg@xW$jlUue5<~^B2?=+6N4xB_pQ1vmz7;G)C6~KPIwX zOlHE$!cHn!h^jNFZSD9O6q%C82FTnyLE5joZDN@6f9Qr4La|a>F{|(`YAqD%ynhdy zZSZ|kEtp$M%g}`uM(kFuh+?9sjUOE@eaZtVpRFIgi35uuhh571xHQbF+2=o zxT~ds|AKBo1TXbUNR=L^>Cbo=*TOB2L+Atn7K#R$9)+}L2r6OLES}&*M?}YMs;9`% z5kiVeSbH4ej|d{FY9@-CCs5rfNrc~1cnA}EMh^Z1oqdA7o_K}k-RJ%N%jpz1TfOD| z;{N{m_b+j~ePYg?X@KW>zu~Fi!v+Wbd%rt)sD)c*GKxYZRpsWB zyiRO0!>kfaWB<*&|A%?NbMg#(0C@z6&cYbURQn+R*FSA^kAL4`uydq#y|GN~K840vk= zoAanioc`0htB+`EwFtuglIkz1{UvW}9;qIqdyL*=TF*z6?omaL!bPzM?wosiQFbaG zjRKduh-ZvPW%5N!70?=Gs*jpIb`*sN_RGN*qQ(pwMyTq@Jv_u~)V*GRs;={Gn-SBU zn}k~zi1=iR^jn4Cf*wiy{5x>b${G6F0Z&$gGRz?HQS@G{$jx`_h_j;7mWqi9Y<@Bg zAG#d&NRG4rvmCoTOmduss2iIj;}FAOA35Q65RUivCloc19W?;APPoRVXs!S*`L1fF zyyb*TZ@WHkj7FU;_FLCz^W(G$L6rB{Fn)X;&|Gzdm#|*HZ|xu`z{ERl`cgU zZ`%z0iGPdEjmFqIBNSF~gs1o#Hcehw2ExKvsH zuhQ}Pw7$zKn7eeE8M#=}Cl>2Mx(%+V0*^%{7b?Xb39DmPi?YN(PtWKcsc>O*qsnoi zD{azm&(G-hfycd=$;>IXT`#fS7+a)^HAb(EsE3fQB>Qe++cQA=%rn6PUsDxUT0yqI z*4_H*b`PFay0{slD=kWF4z|0uB|9A;lL4>|wmqee?R8rr&j$vWYvsmsv69s$Wq$)x z3MDe^D`30?ugUWlD1N7y`5FCY{*INuLwZJsj}+ww^qWs|x;^pwR z=!7q!(8hOzt?CX0B0Z94r<|~p0-J^y+Vqp|GcksdgDxvkl4#oxfx1xTFzI1>38=YC zJS5*QF`27ExWVDMPb7XxRpLKg>R@=mpLOCTBzB9Y)!|ty+Am94VFo>X#udKvy)I$E zv#U&0mHhm?#PJc8S?vPzCPuYcF4qXjg&Ogs^NV(x`X<(l7 z)9CB_(J6m*xJxu5elZcR7}f$BqE0U`cPQp%$T>v{{*7&e6$7PXvLwP)boz5UvM{tH zO)A}PH;)BjHsCZEc8C|zf5kD|cgKSfFuz{C`!l{5y`>k6WFFA*PY{ucbW{)_MB+=1 zbQJdW=1MH6c?kGSmpCM$w;lwGqXEWU$rWJ53Woj6pb2pYO-P%_aXzct0Rbo5z6OIa z*qie=tJ-ZCj;B)HV(lu~Zc=7An;{iUpg63g$2rRY8-nvGwpn2?piQO@aN1{GKr*Er d&cK);Y0$(d3Lk>OzW{ic{Tn9e&w&&X0087' + attributes.data.more_text + ' ' : ''; - var accept_button = '' + attributes.data.accept_text + ''; - var reject_button, reject_content; + var accept_button = '' + attributes.data.accept_text + ' '; + var reject_button = ''; + var reject_content = ''; if (attributes.data.reject_text) { - reject_button = '' + attributes.data.reject_text + ''; - reject_content = '' + attributes.data.reject_info + ' ' + attributes.data.reject_link + ''; - } else { - reject_button = ''; - reject_content = ''; + + reject_button = '' + attributes.data.reject_text + ' '; + + if (attributes.data.reject_info || attributes.data.reject_link) { + reject_content = ' '; + reject_content += attributes.data.reject_info + ' ' + attributes.data.reject_link + ' '; + reject_content += ' ' + attributes.data.close_text + ' '; + reject_content += ' '; + } + } wbox.innerHTML = '
' + attributes.data.text + info + accept_button + reject_button + reject_content + '
'; @@ -249,14 +272,14 @@ var body = document.getElementsByTagName("body")[0]; body.appendChild(wbox); - setTimeout(function() { + setTimeout(function () { wbox.className = wbox.className + ' loaded'; }, attributes.delay); }; - var isDOMready = function() { + var isDOMready = function () { var readyState = document.readyState; @@ -273,7 +296,7 @@ } } else { - setTimeout(function() { + setTimeout(function () { isDOMready(); }, 200); }