ES6 Class for UK Cookies Message pop up

CookiesPopup.js

"use strict";
/**
 * CookiesPopup
 * a simple class to check for, set, a cookie if not currently set,
 * and inform the user that cookies are present
 */

 /**
  * set up some private vars
  */

  const _ExpireIn = Symbol();
  let _CookieName = Symbol();
  let _cookieMessage = Symbol();

export default class CookiesPopup {

  /**
  * @param string cookieName
  * @param string message
   */
  constructor(cookieName, message) {
    //-- cookies name
    this[_CookieName] = (cookieName !=='')
                          ? cookieName
                          : 'ImACookie';
    // set expiry date in days
    this[_ExpireIn] = 365;
    //-- cookie message
    this[_cookieMessage] = (message !=='')
                            ? message
                            : 'Please except the cookies I add';
  }
  /**
   * init method
   */
  init (){
    //-- check if cookie is set
    this._checkCookie();
  }
  /**
   * Display message and set cookie if cookie not set
   */
  _displayMessage(){
    //-- construct the message and container
    var message = this._constructMessage();
    //--display the message
    document.body.appendChild(message);
    //-- assign an event listener for the close btn
    document.getElementById('close-button').addEventListener('click', this._removeMessage);
    //-- set the cookie and time
    this._setCookie();
  }
  /**
   * Remove the cookies message on click
   */
  _removeMessage(evt){
    evt.preventDefault();
    var wrapper = this.parentNode.parentNode;
    wrapper.className += " dismiss";
    //-- complete the remove message
  }
  /**
   * check for the required cookie
   */
  _checkCookie() {
    //-- get the required cookie
    var cookie = this._getCookie();
    //-- check if we do have a cookie already set
    if (cookie !=="") return;
    //-- if not lets display message and set it
    this._displayMessage(cookie);
  }
  /**
   * get the required cookie
   */
  _getCookie(){
    var name = this[_CookieName] + "=";
    var ca = document.cookie.split(';');

    for(let i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
  }
  /**
   * set a cookie
   */
  _setCookie() {
    var d = new Date(),
        cvalue = this._createCookieValue();
    d.setTime(d.getTime() + (this[_ExpireIn]*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = this[_CookieName] + "=" + cvalue + "; " + expires;
  }
  /**
   * create a cookie value
   */
  _createCookieValue (s) {
    var a = () => { return (((1 + Math.random()) * 65536) | 0).toString(16).substring(1)};
    return (a() + a() + "-" + a() + "-" + a() + a() + a())
  };
  /**
   * construct the message container and message
   */
  _constructMessage() {
    //-- construct the container
    var cookiewrapper = document.createElement('div');
    cookiewrapper.className = 'cookies-wrapper';
    //-- create the message area
    var cookiemessage = document.createElement('div');
    cookiemessage.className = 'cookies-message';
    var  cookietxt = document.createTextNode(this[_cookieMessage]);
    cookiemessage.appendChild(cookietxt);
    //-- create the close button
    var closeButtonWrapper = document.createElement('div');
    closeButtonWrapper.className = 'button-wrapper';
    var closebutton = document.createElement('button');
    closebutton.id = 'close-button';
    var closeTxt = document.createTextNode('\u00d7');
    closebutton.appendChild(closeTxt);
    closeButtonWrapper.appendChild(closebutton);
    //-- lets string it all together
    cookiewrapper.appendChild(cookiemessage);
    cookiewrapper.appendChild(closeButtonWrapper);
    //-- return for output
    return cookiewrapper;

  }

}

Example1.js

/**
 * Example usage of the Cookies Popup Files
 */
 
import Cookies from './CookiesPopup';

let CookiesMessage = 'We use cookies to ensure that we give you the best experience on our website. By clikcing on the "Close"  icon, you are agreeing to allowing my site to use 3rd party cookies.';
//-- init the class
let Cookie = new Cookies('CookiePopUpMessage',CookiesMessage);
//-- start the cookie process
Cookie.init();

Example2.js

/**
 * An example of using the Cookies Class within another via extends
 */
 
import Cookies from './CookiesPopup';

export default class Main extends Cookies {
    constructor() {
      let CookiesMessage = 'We use cookies to ensure that we give you the best experience on our website. By clikcing on the "Close"  icon, you are agreeing to allowing my site to use 3rd party cookies.';
      //-- init the cookies class
      super('CookiePopUpMessage',CookiesMessage);
    }

    initMain(name){
        //-- call the cookies init method to start the process
        super.init();
    }
}

StylesExample.css

  /**
   * Example Styles used for the above Cookies pop up code
   */

  .cookies-wrapper {
    position: fixed;
    z-index: 4000;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
    display: table;
    background: rgba(0,0,0,.5);
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    -o-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
  }
  .cookies-wrapper.dismiss {opacity: 0;}

  .cookies-wrapper .cookies-message {
    margin: 0;
    padding: 15px 10px;
    display: table-cell;
    vertical-align: middle;
    font-size: 13px;
    font-family: sans-serif;
    color: white;
    text-align: left;
    width: 93%;
  }
  .cookies-wrapper .button-wrapper {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    width: 6%;
    pointer-events: auto;
  }
  .cookies-wrapper .button-wrapper button {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: white;
    background: transparent;
    border-left: 1px rgba(0,0,0,.2) solid;
    cursor: pointer;
    outline: none;
    -webkit-transition: background 300ms ease;
    -moz-transition: background 300ms ease;
    -o-transition: background 300ms ease;
    transition: background 300ms ease;
  }
  .cookies-wrapper .button-wrapper button:hover {
    background: rgba(0,0,0,.8);
  }


  @media (max-width: 800px) {
    .cookies-wrapper .cookies-message {width: 90%; font-size: 11px}
    .cookies-wrapper .button-wrapper{width: 10%}
  }

  @media (max-width: 400px) {
    .cookies-wrapper .cookies-message {width: 86%}
    .cookies-wrapper .button-wrapper{width: 13%}
  }