#10 Custom font family support

Issue: #10
AOEpeople · Jan 2, 2020 · 1bdcaf1 · 1bdcaf1
1 parent 487c475
commit 1bdcaf1
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 67 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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;
 
     }