From 1bdcaf1381a0de5270ad23e68c604f654eb74685 Mon Sep 17 00:00:00 2001 From: "bernhard.behrendt" Date: Thu, 2 Jan 2020 16:13:47 +0100 Subject: [PATCH] #10 Custom font family support Issue: https://github.com/AOEpeople/cookie-notice/issues/10 --- README.md | 3 ++ dist/cookie.notice.js | 24 ++++++--- dist/cookie.notice.min.js | 4 +- package.json | 104 +++++++++++++++++++------------------- src/cookie.notice.js | 24 ++++++--- 5 files changed, 92 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 5e1c73a..2ec0e56 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,9 @@ For the most of you including the script should be enough but **CookieNoticeJS** // The message will be shown again in X days 'expiresIn': 30, + // Specify a custom font family + 'fontFamily': 'inherit', + // Dismiss button background color 'buttonBgColor': '#d35400', diff --git a/dist/cookie.notice.js b/dist/cookie.notice.js index 343e719..55ef137 100644 --- a/dist/cookie.notice.js +++ b/dist/cookie.notice.js @@ -44,6 +44,9 @@ }, expiresIn: 30, + + fontFamily: 'inherit', + buttonBgColor: '#ca5000', buttonTextColor: '#fff', noticeBgColor: '#000', @@ -106,7 +109,7 @@ var noticeText = getStringForCurrentLocale(params.messageLocales); // Create notice - var notice = createNotice(noticeText, params.noticeBgColor, params.noticeTextColor, params.cookieNoticePosition); + var notice = createNotice(noticeText, params.noticeBgColor, params.noticeTextColor, params.fontFamily); var learnMoreLink; @@ -120,7 +123,7 @@ var buttonText = getStringForCurrentLocale(params.buttonLocales); // Create dismiss button - var dismissButton = createDismissButton(buttonText, params.buttonBgColor, params.buttonTextColor); + var dismissButton = createDismissButton(buttonText, params.buttonBgColor, params.buttonTextColor, params.fontFamily); // Dismiss button click event dismissButton.addEventListener('click', function (e) { @@ -165,10 +168,10 @@ * @param bgColor * @param textColor * @param position + * @param fontFamily * @returns {HTMLElement} */ - function createNotice(message, bgColor, textColor, position) { - + function createNotice(message, bgColor, textColor, fontFamily, position) { var notice = document.createElement('div'), noticeStyle = notice.style, lineHeight = 28, @@ -205,8 +208,12 @@ noticeStyle["text-align"] = 'center'; noticeStyle["font-size"] = fontSize + 'px'; noticeStyle["line-height"] = lineHeight + 'px'; - noticeStyle.fontFamily = 'Helvetica neue, Helvetica, sans-serif'; + if (!!fontFamily) { + noticeStyle['fontFamily'] = fontFamily; + } + + console.log(notice); return notice; } @@ -218,7 +225,7 @@ * @param buttonTextColor * @returns {HTMLElement} */ - function createDismissButton(message, buttonColor, buttonTextColor) { + function createDismissButton(message, buttonColor, buttonTextColor, buttonTextFontFamily) { var dismissButton = document.createElement('span'), dismissButtonStyle = dismissButton.style; @@ -242,6 +249,11 @@ dismissButtonStyle.padding = '0 15px'; dismissButtonStyle.margin = '0 0 0 10px'; + if (!!buttonTextFontFamily) { + dismissButtonStyle.fontFamily = buttonTextFontFamily; + + } + return dismissButton; } diff --git a/dist/cookie.notice.min.js b/dist/cookie.notice.min.js index 3de6239..bcb66cd 100644 --- a/dist/cookie.notice.min.js +++ b/dist/cookie.notice.min.js @@ -1,3 +1,3 @@ -/*! cookie-notice v1.1.18 by Alessandro Benoit, Bernhard Behrendt 2020-01-02 */ +/*! cookie-notice v1.2.0 by Alessandro Benoit, Bernhard Behrendt 2020-01-02 */ -!function(){"use strict";var x,y,C={messageLocales:{it:"Utilizziamo i cookie per essere sicuri che tu possa avere la migliore esperienza sul nostro sito. Se continui ad utilizzare questo sito assumiamo che tu ne sia felice.",en:"We use cookies to ensure that you have the best experience on our website. If you continue to use this site we assume that you accept this.",de:"Wir verwenden Cookies um sicherzustellen, dass Sie das beste Erlebnis auf unserer Website haben.",fr:"Nous utilisons des cookies afin d'être sûr que vous pouvez avoir la meilleure expérience sur notre site. Si vous continuez à utiliser ce site, nous supposons que vous acceptez.",pt:"Utilizamos cookies para garantir que você tenha a melhor experiência em nosso site. Se você continuar a usar este site, assumimos que você aceita isso."},cookieNoticePosition:"bottom",learnMoreLinkEnabled:!1,learnMoreLinkHref:"/cookie-banner-information.html",learnMoreLinkText:{it:"Saperne di più",en:"Learn more",de:"Mehr erfahren",fr:"En savoir plus",pt:"Saber mais"},buttonLocales:{en:"OK"},expiresIn:30,buttonBgColor:"#ca5000",buttonTextColor:"#fff",noticeBgColor:"#000",noticeTextColor:"#fff",linkColor:"#009fdd",linkBgColor:"#000",linkTarget:"_blank",debug:!1};function L(e){var t=(navigator.userLanguage||navigator.language).substr(0,2);return e[t]?e[t]:e.en}document.addEventListener("DOMContentLoaded",function(){x||new cookieNoticeJS}),window.cookieNoticeJS=function(){if(void 0===x&&(x=this,-1==document.cookie.indexOf("cookie_notice"))){var t,o=document.querySelector("script[ data-cookie-notice ]");try{t=o?JSON.parse(o.getAttribute("data-cookie-notice")):{}}catch(e){console.error("data-cookie-notice JSON error:",o,e),t={}}var r=function e(t,o){var i;for(i in o)o.hasOwnProperty(i)&&("object"==typeof t[i]?t[i]=e(t[i],o[i]):t[i]=o[i]);return t}(C,arguments[0]||t||{});r.debug&&console.warn("cookie-notice:",r);var e,i,n,a,s,c,l,u=function(e,t,o,i){var n=document.createElement("div"),r=n.style;if(n.innerHTML=e+" ",n.setAttribute("id","cookieNotice"),n.setAttribute("data-test-section","cookie-notice"),n.setAttribute("data-test-transitioning","false"),r.position="fixed","top"===i){var a=document.querySelector("body");y=a.style.paddingTop,r.top="0",a.style.paddingTop="48px"}else r.bottom="0";return r.left="0",r.right="0",r.background=t,r.color=o,r["z-index"]="999",r.padding="10px 5px",r["text-align"]="center",r["font-size"]="12px",r["line-height"]="28px",r.fontFamily="Helvetica neue, Helvetica, sans-serif",n}(L(r.messageLocales),r.noticeBgColor,r.noticeTextColor,r.cookieNoticePosition);if(r.learnMoreLinkEnabled){var d=L(r.learnMoreLinkText);i=d,n=r.learnMoreLinkHref,a=r.linkTarget,s=r.linkColor,r.linkBgColor,c=document.createElement("a"),l=c.style,c.href=n,c.textContent=i,c.title=i,c.target=a,c.className="learn-more",c.setAttribute("data-test-action","learn-more-link"),l.color=s,l.backgroundColor="transparent",l["text-decoration"]="underline",l.display="inline",e=c}var p,m,f,b,k,g=L(r.buttonLocales),v=(p=g,m=r.buttonBgColor,f=r.buttonTextColor,b=document.createElement("span"),k=b.style,b.href="#",b.innerHTML=p,b.setAttribute("role","button"),b.className="confirm",b.setAttribute("data-test-action","dismiss-cookie-notice"),k.background=m,k.color=f,k["text-decoration"]="none",k.cursor="pointer",k.display="inline-block",k.padding="0 15px",k.margin="0 0 0 10px",b);v.addEventListener("click",function(e){var t,o,i,n;e.preventDefault(),t=60*parseInt(r.expiresIn+"",10)*1e3*60*24,o=new Date,(i=new Date).setTime(o.getTime()+t),document.cookie="cookie_notice=1; expires="+i.toUTCString()+"; path=/;",(n=u).style.opacity=1,n.setAttribute("data-test-transitioning","true"),function e(){if((n.style.opacity-=.1)<.01){if(void 0!==y)document.querySelector("body").style.paddingTop=y;document.body.removeChild(n)}else setTimeout(e,40)}()});var h=document.body.appendChild(u);e&&h.appendChild(e),h.appendChild(v)}}}(); \ No newline at end of file +!function(){"use strict";var f,b,g={messageLocales:{it:"Utilizziamo i cookie per essere sicuri che tu possa avere la migliore esperienza sul nostro sito. Se continui ad utilizzare questo sito assumiamo che tu ne sia felice.",en:"We use cookies to ensure that you have the best experience on our website. If you continue to use this site we assume that you accept this.",de:"Wir verwenden Cookies um sicherzustellen, dass Sie das beste Erlebnis auf unserer Website haben.",fr:"Nous utilisons des cookies afin d'être sûr que vous pouvez avoir la meilleure expérience sur notre site. Si vous continuez à utiliser ce site, nous supposons que vous acceptez.",pt:"Utilizamos cookies para garantir que você tenha a melhor experiência em nosso site. Se você continuar a usar este site, assumimos que você aceita isso."},cookieNoticePosition:"bottom",learnMoreLinkEnabled:!1,learnMoreLinkHref:"/cookie-banner-information.html",learnMoreLinkText:{it:"Saperne di più",en:"Learn more",de:"Mehr erfahren",fr:"En savoir plus",pt:"Saber mais"},buttonLocales:{en:"OK"},expiresIn:30,fontFamily:"inherit",buttonBgColor:"#ca5000",buttonTextColor:"#fff",noticeBgColor:"#000",noticeTextColor:"#fff",linkColor:"#009fdd",linkBgColor:"#000",linkTarget:"_blank",debug:!1};function k(e){var t=(navigator.userLanguage||navigator.language).substr(0,2);return e[t]?e[t]:e.en}document.addEventListener("DOMContentLoaded",function(){f||new cookieNoticeJS}),window.cookieNoticeJS=function(){if(void 0===f&&(f=this,-1==document.cookie.indexOf("cookie_notice"))){var t,o=document.querySelector("script[ data-cookie-notice ]");try{t=o?JSON.parse(o.getAttribute("data-cookie-notice")):{}}catch(e){console.error("data-cookie-notice JSON error:",o,e),t={}}var r=function e(t,o){var i;for(i in o)o.hasOwnProperty(i)&&("object"==typeof t[i]?t[i]=e(t[i],o[i]):t[i]=o[i]);return t}(g,arguments[0]||t||{});r.debug&&console.warn("cookie-notice:",r);var e,i,n,a,s,c,l,u=function(e,t,o,i,n){var r=document.createElement("div"),a=r.style;if(r.innerHTML=e+" ",r.setAttribute("id","cookieNotice"),r.setAttribute("data-test-section","cookie-notice"),r.setAttribute("data-test-transitioning","false"),a.position="fixed","top"===n){var s=document.querySelector("body");b=s.style.paddingTop,a.top="0",s.style.paddingTop="48px"}else a.bottom="0";a.left="0",a.right="0",a.background=t,a.color=o,a["z-index"]="999",a.padding="10px 5px",a["text-align"]="center",a["font-size"]="12px",a["line-height"]="28px",i&&(a.fontFamily=i);return console.log(r),r}(k(r.messageLocales),r.noticeBgColor,r.noticeTextColor,r.fontFamily);if(r.learnMoreLinkEnabled){var d=k(r.learnMoreLinkText);i=d,n=r.learnMoreLinkHref,a=r.linkTarget,s=r.linkColor,r.linkBgColor,c=document.createElement("a"),l=c.style,c.href=n,c.textContent=i,c.title=i,c.target=a,c.className="learn-more",c.setAttribute("data-test-action","learn-more-link"),l.color=s,l.backgroundColor="transparent",l["text-decoration"]="underline",l.display="inline",e=c}var p=function(e,t,o,i){var n=document.createElement("span"),r=n.style;n.href="#",n.innerHTML=e,n.setAttribute("role","button"),n.className="confirm",n.setAttribute("data-test-action","dismiss-cookie-notice"),r.background=t,r.color=o,r["text-decoration"]="none",r.cursor="pointer",r.display="inline-block",r.padding="0 15px",r.margin="0 0 0 10px",i&&(r.fontFamily=i);return n}(k(r.buttonLocales),r.buttonBgColor,r.buttonTextColor,r.fontFamily);p.addEventListener("click",function(e){var t,o,i,n;e.preventDefault(),t=60*parseInt(r.expiresIn+"",10)*1e3*60*24,o=new Date,(i=new Date).setTime(o.getTime()+t),document.cookie="cookie_notice=1; expires="+i.toUTCString()+"; path=/;",(n=u).style.opacity=1,n.setAttribute("data-test-transitioning","true"),function e(){if((n.style.opacity-=.1)<.01){if(void 0!==b)document.querySelector("body").style.paddingTop=b;document.body.removeChild(n)}else setTimeout(e,40)}()});var m=document.body.appendChild(u);e&&m.appendChild(e),m.appendChild(p)}}}(); \ No newline at end of file diff --git a/package.json b/package.json index 43d2ddf..46163dc 100644 --- a/package.json +++ b/package.json @@ -1,58 +1,56 @@ { - "name": "cookie-notice", - "version": "1.1.18", - "description": "Show a widely configurable notice for European cookie law", - "main": "gruntfile.js", - "browser": "dist/cookie.notice.js", - "scripts": { - "start": "live-server --port=9001", - "test": "grunt" - }, - "keywords": [ - "GDPR", - "DSGVO‎", - "cookie", - "notice", - "vanilla" - ], - "author": "Alessandro Benoit, Bernhard Behrendt", - "contributors": [ - { - "name": "Bernhard Behrendt" + "name": "cookie-notice", + "version": "1.2.1", + "description": "Show a widely configurable notice for European cookie law", + "main": "gruntfile.js", + "browser": "dist/cookie.notice.js", + "scripts": { + "start": "./node_modules/.bin/live-server --port=9001", + "test": "grunt" }, - { - "name": "Nick Freear" + "keywords": [ + "GDPR", + "DSGVO‎", + "cookie", + "notice", + "vanilla" + ], + "author": "Alessandro Benoit, Bernhard Behrendt", + "contributors": [ + { + "name": "Bernhard Behrendt" + }, + { + "name": "Nick Freear" + }, + { + "name": "Matthias Schröder" + } + ], + "license": "MIT", + "devDependencies": { + "grunt": "^1.0.3", + "grunt-cli": "^1.3.2", + "grunt-contrib-connect": "^2.0.0", + "grunt-contrib-qunit": "^3.0.1", + "grunt-contrib-uglify": "^4.0.0", + "grunt-rsids-pa11y": "^0.3.4", + "grunt-strip-code": "^1.0.6", + "jquery": "^3.3.1", + "phantomjs-prebuilt": "^2.1.16", + "qunit": "^2.8.0", + "live-server": "^1.2.0" }, - { - "name": "Matthias Schröder" + "engines": { + "node": ">=6.0" + }, + "files": [ + "dist/", + "src/" + ], + "bugs": "https://github.com/AOEpeople/cookie-notice/issues", + "repository": { + "type": "git", + "url": "https://github.com/AOEpeople/cookie-notice" } - ], - "license": "MIT", - "devDependencies": { - "grunt": "^1.0.3", - "grunt-cli": "^1.3.2", - "grunt-contrib-connect": "^2.0.0", - "grunt-contrib-qunit": "^3.0.1", - "grunt-contrib-uglify": "^4.0.0", - "grunt-rsids-pa11y": "^0.3.4", - "grunt-strip-code": "^1.0.6", - "jquery": "^3.3.1", - "phantomjs-prebuilt": "^2.1.16", - "qunit": "^2.8.0" - }, - "peerDependencies": { - "live-server": "^1.2.0" - }, - "engines": { - "node": ">=6.0" - }, - "files": [ - "dist/", - "src/" - ], - "bugs": "https://github.com/AOEpeople/cookie-notice/issues", - "repository": { - "type": "git", - "url": "https://github.com/AOEpeople/cookie-notice" - } } diff --git a/src/cookie.notice.js b/src/cookie.notice.js index c69df0c..796ca03 100644 --- a/src/cookie.notice.js +++ b/src/cookie.notice.js @@ -44,6 +44,9 @@ }, expiresIn: 30, + + fontFamily: 'inherit', + buttonBgColor: '#ca5000', buttonTextColor: '#fff', noticeBgColor: '#000', @@ -106,7 +109,7 @@ var noticeText = getStringForCurrentLocale(params.messageLocales); // Create notice - var notice = createNotice(noticeText, params.noticeBgColor, params.noticeTextColor, params.cookieNoticePosition); + var notice = createNotice(noticeText, params.noticeBgColor, params.noticeTextColor, params.fontFamily); var learnMoreLink; @@ -120,7 +123,7 @@ var buttonText = getStringForCurrentLocale(params.buttonLocales); // Create dismiss button - var dismissButton = createDismissButton(buttonText, params.buttonBgColor, params.buttonTextColor); + var dismissButton = createDismissButton(buttonText, params.buttonBgColor, params.buttonTextColor, params.fontFamily); // Dismiss button click event dismissButton.addEventListener('click', function (e) { @@ -165,10 +168,10 @@ * @param bgColor * @param textColor * @param position + * @param fontFamily * @returns {HTMLElement} */ - function createNotice(message, bgColor, textColor, position) { - + function createNotice(message, bgColor, textColor, fontFamily, position) { var notice = document.createElement('div'), noticeStyle = notice.style, lineHeight = 28, @@ -205,8 +208,12 @@ noticeStyle["text-align"] = 'center'; noticeStyle["font-size"] = fontSize + 'px'; noticeStyle["line-height"] = lineHeight + 'px'; - noticeStyle.fontFamily = 'Helvetica neue, Helvetica, sans-serif'; + if (!!fontFamily) { + noticeStyle['fontFamily'] = fontFamily; + } + + console.log(notice); return notice; } @@ -218,7 +225,7 @@ * @param buttonTextColor * @returns {HTMLElement} */ - function createDismissButton(message, buttonColor, buttonTextColor) { + function createDismissButton(message, buttonColor, buttonTextColor, buttonTextFontFamily) { var dismissButton = document.createElement('span'), dismissButtonStyle = dismissButton.style; @@ -242,6 +249,11 @@ dismissButtonStyle.padding = '0 15px'; dismissButtonStyle.margin = '0 0 0 10px'; + if (!!buttonTextFontFamily) { + dismissButtonStyle.fontFamily = buttonTextFontFamily; + + } + return dismissButton; }