Skip to content

Instantly share code, notes, and snippets.

@simondavies

simondavies/VueJS-Cookies-message.js

Last active June 14, 2016 09:02
Show Gist options
  • Save simondavies/e8a6e179605f9b2ca766 to your computer and use it in GitHub Desktop.
Save simondavies/e8a6e179605f9b2ca766 to your computer and use it in GitHub Desktop.
Download ZIP
Example Combination of Vue JS with ES2015 style, using babelify to ports to the current ES5.
Raw
VueJS-app.js
import Main from "./src/Main";
//-- init
var App = new Main();
Raw
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;
}
}
}
Raw
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>
Raw
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)
}
}
@cmnstmntmn
Copy link

dismissCookie variable is not used anywhere, so alert bar will allways appear

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment