Bug AOEpeople#8, tidy Javascript; edit README; edit CHANGELOG

* AOEpeople#8
nfreear · Jun 20, 2018 · cc324cc · cc324cc
1 parent 35aeca3
commit cc324cc
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 96 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,18 @@
+
+*.css
+
 node_modules
-.idea
+.idea
+*diff*
+*BAK*
+
+test2.html
+.gitlab-ci.yml
+/res
+
+_pa11y-screen-capture.png
+
+*.tgz
+/package
+
+# End.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,9 +5,16 @@
 
 Version History
 
+## Version 2.0.0
+
+ * _Date:  approx. June 2018_;
+ * Move CSS from `style` attributes to `<style>` or `<link rel=stylesheet ... >`, Issue [#8][];
+ * The following configuration options are __removed__ in this version:
+   `buttonBgColor`, `buttonTextColor`, `noticeBgColor`, `noticeTextColor`, `linkColor`.
+
 ## Version 1.1.12
 
- * _Date:  approx. 4-6 June 2018_;
+ * _Date:  approx. 4-30 June 2018_;
  * Add accessibility testing via [grunt-rsids-pa11y][] and [pa11y][], WCAG 2.0 AA, pull #6;
  * Accessibility fixes — colour contrast, button role, link target, link underline;
  * Accessibility fixes — express CSS font-size in `em` or `rem`, not `px`;
@@ -22,7 +29,7 @@ Version History
 ## Version 1.1.11
 
  * _Date:  30 May 2018_;
- * Add support for `data-cookie-notice` attribute on `<script>`, pull #5, issue [#4][];
+ * Add support for `data-cookie-notice` attribute on `<script>`, pull #5, Issue [#4][];
  * Document `data-` attribute in README;
  * Document _unpkg_ CDN in README;
 
@@ -69,6 +76,9 @@ Version History
 [npm]: https://www.npmjs.com/package/cookie-notice
 [@micc83]: https://github.com/micc83/cookie-notice-js "Alessandro Benoit"
 [#4]: https://github.com/AOEpeople/cookie-notice/issues/4
+    "'data-cookie-notice' HTML attribute, other suggestions / wishlist"
+[#8]: https://github.com/AOEpeople/cookie-notice/issues/8
+    "Move styles to separate stylesheet, included via Javascript"
 [a11y-fail]: https://travis-ci.org/nfreear/cookie-notice/jobs/387344672#L1217-L1235
 [grunt-rsids-pa11y]: https://www.npmjs.com/package/grunt-rsids-pa11y
 [pa11y]: http://pa11y.org/
diff --git a/README.md b/README.md
@@ -86,20 +86,15 @@ For the most of you including the script should be enough but **CookieNoticeJS**
        // The message will be shown again in X days
        'expiresIn': 30,
 
-       // Dismiss button background color
-       'buttonBgColor': '#d35400',  
-
-       // Dismiss button text color
+       // DEPRECATED.
+       'buttonBgColor': '#d35400',
        'buttonTextColor': '#fff',
-
-       // Notice background color
        'noticeBgColor': '#000',
-
-       // Notice text color
        'noticeTextColor': '#fff',
-
-       // the learnMoreLink color (default='#009fdd')
        'linkColor': '#f00',
+       // END DEPRECATED.
+
+       'styleLinkHref': '../cookie-notice.css',
 
        // The target of the learn more link (default='', or '_blank')
        'linkTarget': '',
@@ -110,6 +105,12 @@ For the most of you including the script should be enough but **CookieNoticeJS**
 </script>
 ```
 
+### Deprecated properties
+
+In `cookie-notice` >= Version 2.x the color options shown above will be removed
+(`buttonBgColor`, `buttonTextColor`, `noticeBgColor`, `noticeTextColor`, `linkColor`).
+Instead, developers and designers can override these properties using the CSS styles for the page.
+
 ## Configuration via `data-` attribute
 
 Configuration options can be put in a `data-cookie-notice` HTML attribute in JSON format.

diff --git a/src/cookie.notice.js b/src/cookie.notice.js
@@ -9,8 +9,8 @@
     /**
      * Store current instance
      */
-    var instance,
-        originPaddingTop;
+    var instance;
+    // originPaddingTop;
 
     /**
      * Defaults values
@@ -43,15 +43,16 @@
 
         'expiresIn': 30,
 
-        /* DEPRECATED. No longer needed! */
+        /* DEPRECATED. No longer needed!
         'buttonBgColor': '#ca5000', // Accessibility contrast fix (Was: '#d35400') (WCAG2AAA: '#983c00').
         'buttonTextColor': '#fff',
         'noticeBgColor': '#000',
         'noticeTextColor': '#fff',
         'linkColor': '#009fdd',
-        /* END DEPRECATED. */
+        END DEPRECATED. */
 
         'styleLinkHref': '/../../dist/cookie.notice.css',
+        'scriptSelector': 'script[ src *= "cookie.notice." ]',
 
         'linkTarget': '', // Accessibility fix (Was: '_blank').
         'debug': false
@@ -103,27 +104,27 @@
             console.warn('cookie-notice:', params);
         }
 
-        addStylesheetLink(params.styleLinkHref);
+        addStylesheetLink(params.styleLinkHref, params.scriptSelector);
 
         // Get current locale for notice text
         var noticeText = getStringForCurrentLocale(params.messageLocales);
 
         // Create notice
-        var notice = createNotice(noticeText, params.noticeBgColor, params.noticeTextColor, params.cookieNoticePosition);
+        var notice = createNotice(noticeText, params.cookieNoticePosition);
 
         var learnMoreLink;
 
         if (params.learnMoreLinkEnabled) {
             var learnMoreLinkText = getStringForCurrentLocale(params.learnMoreLinkText);
 
-            learnMoreLink = createLearnMoreLink(learnMoreLinkText, params.learnMoreLinkHref, params.linkTarget, params.linkColor);
+            learnMoreLink = createLearnMoreLink(learnMoreLinkText, params.learnMoreLinkHref, params.linkTarget);
         }
 
         // Get current locale for button text
         var buttonText = getStringForCurrentLocale(params.buttonLocales);
 
         // Create dismiss button
-        var dismissButton = createDismissButton(buttonText, params.buttonBgColor, params.buttonTextColor);
+        var dismissButton = createDismissButton(buttonText);
 
         // Dismiss button click event
         dismissButton.addEventListener('click', function (e) {
@@ -140,7 +141,6 @@
         }
 
         noticeDomElement.appendChild(dismissButton);
-
     };
 
     /**
@@ -165,15 +165,12 @@
     /**
      * Create notice
      * @param message
-     * @param bgColor
-     * @param textColor
      * @param position
      * @returns {HTMLElement}
      */
-    function createNotice(message, bgColor, textColor, position) {
+    function createNotice(message, position) {
 
         var notice = document.createElement('div');
-        // var noticeStyle = notice.style,
         /* var lineHeight = 2, // Was: 28 (px).
             paddingBottomTop = 10,
             fontSize = lineHeight / 2.333,
@@ -188,47 +185,25 @@
 
         notice.className += (position === 'top') ? 'top' : 'bottom';
 
-        // noticeStyle.position = 'fixed';
-
         if (position === 'top') {
             var bodyDOMElement = document.querySelector('body');
 
             bodyDOMElement.className += ' cookie-notice-js-body-top';
 
-            originPaddingTop = bodyDOMElement.style.paddingTop;
-
-            // noticeStyle.top = '0';
-            // bodyDOMElement.style.paddingTop = noticeHeight + 'px';
-        } /* else {
-            noticeStyle.bottom = '0';
-        } */
-
-        /* noticeStyle.left = '0';
-        noticeStyle.right = '0';
-        noticeStyle.background = bgColor;
-        noticeStyle.color = textColor;
-        noticeStyle["z-index"] = '999';
-        noticeStyle.padding = paddingBottomTop + 'px 5px';
-        noticeStyle["text-align"] = 'center';
-        noticeStyle["font-size"] = fontSize + 'rem'; // Was: 'px'.
-        noticeStyle["line-height"] = lineHeight + 'rem'; // Was: 'px'.
-        noticeStyle.fontFamily = 'Helvetica neue, Helvetica, sans-serif';
-        */
+            // originPaddingTop = bodyDOMElement.style.paddingTop;
+        }
 
         return notice;
     }
 
     /**
      * Create dismiss button
      * @param message
-     * @param buttonColor
-     * @param buttonTextColor
      * @returns {HTMLElement}
      */
-    function createDismissButton(message, buttonColor, buttonTextColor) {
+    function createDismissButton(message) {
 
         var dismissButton = document.createElement('a');
-        // var dismissButtonStyle = dismissButton.style;
 
         // Dismiss button
         dismissButton.href = '#';
@@ -239,44 +214,27 @@
 
         dismissButton.setAttribute('data-test-action', 'dismiss-cookie-notice');
 
-        /*
-        // Dismiss button style
-        dismissButtonStyle.background = buttonColor;
-        dismissButtonStyle.color = buttonTextColor;
-        dismissButtonStyle['text-decoration'] = 'none';
-        dismissButtonStyle.display = 'inline-block';
-        dismissButtonStyle.padding = '0 15px';
-        dismissButtonStyle.margin = '0 0 0 10px';
-        */
-
         return dismissButton;
     }
 
     /**
-     * Create the learn more link
+     * Create the 'learn more' link
      *
      * @param learnMoreLinkText
      * @param learnMoreLinkHref
-     * @param linkColor
+     * @param linkTarget
      * @returns {HTMLElement}
      */
-    function createLearnMoreLink(learnMoreLinkText, learnMoreLinkHref, linkTarget, linkColor) {
+    function createLearnMoreLink(learnMoreLinkText, learnMoreLinkHref, linkTarget) {
 
-        var learnMoreLink = document.createElement('a'),
-            learnMoreLinkStyle = learnMoreLink.style;
+        var learnMoreLink = document.createElement('a');
 
         learnMoreLink.href = learnMoreLinkHref;
         learnMoreLink.textContent = learnMoreLinkText;
         learnMoreLink.target = linkTarget;
         learnMoreLink.className = 'learn-more';
         learnMoreLink.setAttribute('data-test-action', 'learn-more-link');
 
-        /*
-        learnMoreLinkStyle.color = linkColor;
-        learnMoreLinkStyle['text-decoration'] = 'underline'; // Accessibility fix (Was: 'none').
-        learnMoreLinkStyle.display = 'inline';
-        */
-
         return learnMoreLink;
     }
 
@@ -304,10 +262,10 @@
         (function fade() {
             if ((element.style.opacity -= .1) < 0.01) {
 
-                if (originPaddingTop !== undefined) {
+                /* if (originPaddingTop !== undefined) {
                     var bodyDOMElement = document.querySelector('body');
                     bodyDOMElement.style.paddingTop = originPaddingTop;
-                }
+                } */
 
                 document.body.removeChild(element);
             } else {
@@ -336,12 +294,17 @@
         return source;
     }
 
-    function addStylesheetLink(styleUrl) {
+    /**
+     * Method to add a stylesheet <link> to the page.
+     * @param styleUrl
+     * @param scriptSelector
+     */
+    function addStylesheetLink(styleUrl, scriptSelector) {
         if (!styleUrl) return;
 
         // Assume the Javascript and stylesheet are on a different domain to the page (e.g. CDN).
         var styleLink = document.createElement('link');
-        var script = document.querySelector('script[ src *= "cookie.notice." ]');
+        var script = document.querySelector(scriptSelector);
         var href = (script ? script.src : '') + styleUrl;
 
         styleLink.rel = 'stylesheet';

diff --git a/tests/tests.js b/tests/tests.js
@@ -19,21 +19,6 @@ QUnit.assert.matches = function( haystack, regExp, message ) {
   this.pushResult({ result: result, actual: result, expected: regExp, message: message });
 };
 
-// Not used! https://gist.github.com/chrisjhoughton/5554466
-/* var contains = function (list, value) {
-  if (list instanceof Array) {
-    var i = list.length;
-    while (i--) {
-      if (list[i] === value) {
-        return true;
-      }
-    }
-    return false;
-  } else if (typeof list === "string") {
-    return (list.indexOf(value) !== -1);
-  }
-}; */
-
 if (window._phantom) {
     if (!HTMLElement.prototype.click) {
         HTMLElement.prototype.click = function () {
@@ -81,6 +66,7 @@ $(document).ready(function () {
     QUnit.test('Check if the notice is present', function (assert) {
         assert.strictEqual($('#cookieNotice').length, 1, 'Notice is present');
         assert.strictEqual($('#cookieNotice').find('a.confirm').length, 1, 'Notice button is present');
+        assert.contains($('#cookieNotice')[0].className, 'cookie-notice-js', 'the className contains "cookie-notice-js"');
     });
 
     QUnit.test('Check that notice disappears when clicking on the OK button', function (assert) {
@@ -127,14 +113,11 @@ $(document).ready(function () {
         clearCookies();
         cookieNoticeJS.clearInstance();
         new cookieNoticeJS();
-        // console.log('className?', $('#cookieNotice'));
 
-        assert.contains($('#cookieNotice')[0].className, 'bottom', 'the className contains "bottom"');
-        assert.matches($('#cookieNotice').attr('class'), / bottom/, 'the className contains "bottom" (2)' );
-        // assert.strictEqual(contains($('#cookieNotice')[0].className, 'bottom'), true, 'the className contains "bottom"');
+        assert.matches($('#cookieNotice').attr('class'), / bottom/, 'the className contains "bottom"' );
 
         assert.strictEqual($('#cookieNotice').css('bottom'), '0px', 'positioning is stuck to the bottom');
-        assert.strictEqual($('#cookieNotice').css('top'), 'auto', 'so top position is auto');
+        assert.strictEqual($('#cookieNotice').css('top'), 'auto', 'so the top position is "auto"');
     });
 
     QUnit.test('When defaults have overrides changes should take place', function (assert) {