simondavies/VueJS-Cookies-message.js

## VueJS-app.js
import Main from "./src/Main";
//-- init
var App = new Main();

## VueJS-Cookies-message.js
/**
 * Cookies Pop Up Component
 *  A pop up to inform the user that cookies are used on a/this site.
 *
 * usage:
 *    <cookie></cookie>
 *
 *  User Overwite the generic message and expiry days,
 *  add 'cookie-message' and/or 'days-to-expire' properties to the component
 *    <cookie
 *        cookie-message="COOKIE MESSAGE HERE"
 *        days-to-expire="123">
 *    </cookie>
 *
 * @author Simon Davies
 * @module components/cookies-message
 */

 /** Cookies Message. */
module.exports = {

  props : ['cookie-message', 'days-to-expire'],

  template: '<div class="cookies-wrapper" v-class="dismiss : dismissCookie, hide:cookieSet ">' +
              '<div class="cookies-message">{{message}}</div>' +
              '<div class="button-wrapper"><button v-on="click: _closeCookieMessage" id="close-button">&times;</button></div>' +
            '</div>',
  data : () => {
    /**
    * @param {string} cookieName
    * @param {message} cookieName
    * @param {expiresIn} cookieName
    */
      return {
        cookieName : 'cookiePopup',
        message : 'We use cookies to ensure that we give you the best experience on our website. By clicking on the close icon(X), you are agreeing to allowing my site to use 3rd party cookies.',
        expiresIn : 365,
        cookieSet : false,
        dismissCookie : false
      }
  },
  ready : function() {
    //-- check for user settings/properties
    this.message = (this.cookieMessage !== undefined || this.cookieMessage)
                      ? this.cookieMessage
                      : this.message
    this.expiresIn = (this.daysToExpire !== undefined || this.daysToExpire)
                      ? this.daysToExpire
                      : this.expiresIn
    //--
    this.init()
  },

  methods: {
    /**
     * initialise the component
     */
    init : function() {
      this._checkCookie();
    },
    /**
     * check for a existing cookie
     */
    _checkCookie : function() {
      //-- get the required cookie
      let cookie = this._getCookie();
      //-- check if we do have a cookie already set
      if (cookie !=="") {this.cookieSet = true; return;}
      //-- if not lets display message and set it
      this._setCookie();
    },
    /**
     * set the cookie
     */
    _setCookie : function() {
      var d = new Date(),
          cvalue = this._setCookieValue();
      d.setTime(d.getTime() + (this.expiresIn*24*60*60*1000));
      let expires = "expires="+d.toUTCString();
      document.cookie = this.cookieName + "=" + cvalue + "; " + expires;
    },
    /**
     * get the cookies and searh for ours
     * @return {string}
     */
    _getCookie : function() {
      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 the cookie value
     * @return {string}
     */
    _setCookieValue : function() {
      var a = () => { return (((1 + Math.random()) * 65536) | 0).toString(16).substring(1)};
      return (a() + a() + "-" + a() + "-" + a() + a() + a())
    },
    /**
     * close cookie message
     * @param {event} evt
     */
    _closeCookieMessage : function(evt) {
      evt.preventDefault()
      this.cookieSet = true;
      this.dismissCookie = true;
    }
  }
}

## VueJS-index.html
<html>
    <head>
        <title>Laravel</title>

        <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

        <style>
            html, body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                color: #444;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

            .container {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

            .content {
                text-align: center;
                display: inline-block;
            }
            .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.hide {display: none;}
  .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: 20px;
    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%}
  }


      </style>
  </head>
  <body>
      <div class="container">
          <div id="app">

          </div>
          <cookie></cookie>
      </div>

   <script src="js/app.js"></script>
  </body>
</html>

## VueJS-Main.js
import Vue from 'vue';
import CookiesComponent from './components/cookies-message'

export default class Main extends Vue{
  constructor() {

    var properties = {
      el: '#app',
      components: {
        'cookie' : CookiesComponent
      }
    };

    super(properties)
  }


}
	import Main from "./src/Main";
	//-- init
	var App = new Main();
	/**
	* Cookies Pop Up Component
	* A pop up to inform the user that cookies are used on a/this site.
	*
	* usage:
	* <cookie></cookie>
	*
	* User Overwite the generic message and expiry days,
	* add 'cookie-message' and/or 'days-to-expire' properties to the component
	* <cookie
	* cookie-message="COOKIE MESSAGE HERE"
	* days-to-expire="123">
	* </cookie>
	*
	* @author Simon Davies
	* @module components/cookies-message
	*/

	/** Cookies Message. */
	module.exports = {

	props : ['cookie-message', 'days-to-expire'],

	template: '<div class="cookies-wrapper" v-class="dismiss : dismissCookie, hide:cookieSet ">' +
	'<div class="cookies-message">{{message}}</div>' +
	'<div class="button-wrapper"><button v-on="click: _closeCookieMessage" id="close-button">×</button></div>' +
	'</div>',
	data : () => {
	/**
	* @param {string} cookieName
	* @param {message} cookieName
	* @param {expiresIn} cookieName
	*/
	return {
	cookieName : 'cookiePopup',
	message : 'We use cookies to ensure that we give you the best experience on our website. By clicking on the close icon(X), you are agreeing to allowing my site to use 3rd party cookies.',
	expiresIn : 365,
	cookieSet : false,
	dismissCookie : false
	}
	},
	ready : function() {
	//-- check for user settings/properties
	this.message = (this.cookieMessage !== undefined \|\| this.cookieMessage)
	? this.cookieMessage
	: this.message
	this.expiresIn = (this.daysToExpire !== undefined \|\| this.daysToExpire)
	? this.daysToExpire
	: this.expiresIn
	//--
	this.init()
	},

	methods: {
	/**
	* initialise the component
	*/
	init : function() {
	this._checkCookie();
	},
	/**
	* check for a existing cookie
	*/
	_checkCookie : function() {
	//-- get the required cookie
	let cookie = this._getCookie();
	//-- check if we do have a cookie already set
	if (cookie !=="") {this.cookieSet = true; return;}
	//-- if not lets display message and set it
	this._setCookie();
	},
	/**
	* set the cookie
	*/
	_setCookie : function() {
	var d = new Date(),
	cvalue = this._setCookieValue();
	d.setTime(d.getTime() + (this.expiresIn2460601000));
	let expires = "expires="+d.toUTCString();
	document.cookie = this.cookieName + "=" + cvalue + "; " + expires;
	},
	/**
	* get the cookies and searh for ours
	* @return {string}
	*/
	_getCookie : function() {
	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 the cookie value
	* @return {string}
	*/
	_setCookieValue : function() {
	var a = () => { return (((1 + Math.random()) * 65536) \| 0).toString(16).substring(1)};
	return (a() + a() + "-" + a() + "-" + a() + a() + a())
	},
	/**
	* close cookie message
	* @param {event} evt
	*/
	_closeCookieMessage : function(evt) {
	evt.preventDefault()
	this.cookieSet = true;
	this.dismissCookie = true;
	}
	}
	}
	<html>
	<head>
	<title>Laravel</title>

	<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

	<style>
	html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #444;
	display: table;
	font-weight: 100;
	font-family: 'Lato';
	}

	.container {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	}

	.content {
	text-align: center;
	display: inline-block;
	}
	.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.hide {display: none;}
	.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: 20px;
	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%}
	}


	</style>
	</head>
	<body>
	<div class="container">
	<div id="app">

	</div>
	<cookie></cookie>
	</div>

	<script src="js/app.js"></script>
	</body>
	</html>
	import Vue from 'vue';
	import CookiesComponent from './components/cookies-message'

	export default class Main extends Vue{
	constructor() {

	var properties = {
	el: '#app',
	components: {
	'cookie' : CookiesComponent
	}
	};

	super(properties)
	}


	}