vue-cookie-accept-decline
Version:
Show a banner with text, a decline button, and an accept button on your page.
526 lines (449 loc) • 15.6 kB
JavaScript
var VueCookieAcceptDecline = (function (exports) {
'use strict';
function hasOwn(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
} // Escape special characters.
function escapeRe(str) {
return str.replace(/[.*+?^$|[\](){}\\-]/g, '\\$&');
} // Return a future date by the given string.
function computeExpires(str) {
var lastCh = str.charAt(str.length - 1);
var value = parseInt(str, 10);
var expires = new Date();
switch (lastCh) {
case 'Y':
expires.setFullYear(expires.getFullYear() + value);
break;
case 'M':
expires.setMonth(expires.getMonth() + value);
break;
case 'D':
expires.setDate(expires.getDate() + value);
break;
case 'h':
expires.setHours(expires.getHours() + value);
break;
case 'm':
expires.setMinutes(expires.getMinutes() + value);
break;
case 's':
expires.setSeconds(expires.getSeconds() + value);
break;
default:
expires = new Date(str);
}
return expires;
} // Convert an object to a cookie option string.
function convert(opts) {
var res = ''; // eslint-disable-next-line
for (var key in opts) {
if (hasOwn(opts, key)) {
if (/^expires$/i.test(key)) {
var expires = opts[key];
if (typeof expires !== 'object') {
expires += typeof expires === 'number' ? 'D' : '';
expires = computeExpires(expires);
}
res += ";" + key + "=" + expires.toUTCString();
} else if (/^secure$/.test(key)) {
if (opts[key]) {
res += ";" + key;
}
} else {
res += ";" + key + "=" + opts[key];
}
}
}
if (!hasOwn(opts, 'path')) {
res += ';path=/';
}
return res;
}
function get(key, decoder) {
if (decoder === void 0) {
decoder = decodeURIComponent;
}
if (typeof key !== 'string' || !key) {
return null;
}
var reKey = new RegExp("(?:^|; )" + escapeRe(key) + "(?:=([^;]*))?(?:;|$)");
var match = reKey.exec(document.cookie);
if (match === null) {
return null;
}
return typeof decoder === 'function' ? decoder(match[1]) : match[1];
} // The all cookies
function set(key, value, encoder, options) {
if (encoder === void 0) {
encoder = encodeURIComponent;
}
if (typeof encoder === 'object' && encoder !== null) {
/* eslint-disable no-param-reassign */
options = encoder;
encoder = encodeURIComponent;
/* eslint-enable no-param-reassign */
}
var attrsStr = convert(options || {});
var valueStr = typeof encoder === 'function' ? encoder(value) : value;
var newCookie = key + "=" + valueStr + attrsStr;
document.cookie = newCookie;
} // Remove a cookie by the specified key.
//
var script = {
name: 'vue-cookie-accept-decline',
props: {
elementId: {
type: String,
required: true
},
debug: {
type: Boolean,
default: false
},
disableDecline: {
type: Boolean,
default: false
},
// floating: bottom-left, bottom-right, top-left, top-rigt
// bar: bottom, top
position: {
type: String,
default: 'bottom-left'
},
// floating, bar
type: {
type: String,
default: 'floating'
},
// slideFromBottom, slideFromTop, fade
transitionName: {
type: String,
default: 'slideFromBottom'
},
showPostponeButton: {
type: Boolean,
default: false
}
},
data: function data () {
return {
status: null,
supportsLocalStorage: true,
isOpen: false
}
},
computed: {
containerPosition: function containerPosition () {
return ("cookie--" + (this.position))
},
containerType: function containerType () {
return ("cookie--" + (this.type))
}
},
mounted: function mounted () {
this.checkLocalStorageFunctionality();
this.init();
},
methods: {
init: function init () {
var visitedType = this.getCookieStatus();
if (visitedType && (visitedType === 'accept' || visitedType === 'decline' || visitedType === 'postpone')) {
this.isOpen = false;
}
if (!visitedType) {
this.isOpen = true;
}
this.status = visitedType;
this.$emit('status', visitedType);
},
checkLocalStorageFunctionality: function checkLocalStorageFunctionality () {
// Check for availability of localStorage
try {
var test = '__vue-cookie-accept-decline-check-localStorage';
window.localStorage.setItem(test, test);
window.localStorage.removeItem(test);
} catch (e) {
console.error('Local storage is not supported, falling back to cookie use');
this.supportsLocalStorage = false;
}
},
setCookieStatus: function setCookieStatus (type) {
if (this.supportsLocalStorage) {
if (type === 'accept') {
localStorage.setItem(("vue-cookie-accept-decline-" + (this.elementId)), 'accept');
}
if (type === 'decline') {
localStorage.setItem(("vue-cookie-accept-decline-" + (this.elementId)), 'decline');
}
if (type === 'postpone') {
localStorage.setItem(("vue-cookie-accept-decline-" + (this.elementId)), 'postpone');
}
} else {
if (type === 'accept') {
set(("vue-cookie-accept-decline-" + (this.elementId)), 'accept');
}
if (type === 'decline') {
set(("vue-cookie-accept-decline-" + (this.elementId)), 'decline');
}
if (type === 'postpone') {
set(("vue-cookie-accept-decline-" + (this.elementId)), 'postpone');
}
}
},
getCookieStatus: function getCookieStatus () {
if (this.supportsLocalStorage) {
return localStorage.getItem(("vue-cookie-accept-decline-" + (this.elementId)))
} else {
return get(("vue-cookie-accept-decline-" + (this.elementId)))
}
},
accept: function accept () {
if (!this.debug) {
this.setCookieStatus('accept');
}
this.status = 'accept';
this.isOpen = false;
this.$emit('clicked-accept');
},
decline: function decline () {
if (!this.debug) {
this.setCookieStatus('decline');
}
this.status = 'decline';
this.isOpen = false;
this.$emit('clicked-decline');
},
postpone: function postpone () {
if (!this.debug) {
this.setCookieStatus('postpone');
}
this.status = 'postpone';
this.isOpen = false;
this.$emit('clicked-postpone');
},
removeCookie: function removeCookie () {
localStorage.removeItem(("vue-cookie-accept-decline-" + (this.elementId)));
this.status = null;
this.$emit('removed-cookie');
}
},
}
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("transition", { attrs: { appear: "", name: _vm.transitionName } }, [
_vm.isOpen
? _c(
"div",
{
staticClass: "cookie",
class: [
"cookie__" + _vm.type,
"cookie__" + _vm.type + "--" + _vm.position
],
attrs: { id: _vm.elementId }
},
[
_vm.showPostponeButton === true
? _c(
"div",
{
class: "cookie__" + _vm.type + "__postpone-button",
attrs: { title: "Close" },
on: { click: _vm.postpone }
},
[
_vm._t("postponeContent", [
_vm._v("\n ×\n ")
])
],
2
)
: _vm._e(),
_vm._v(" "),
_c(
"div",
{ class: "cookie__" + _vm.type + "__content" },
[
_vm._t("message", [
_vm._v(
"\n We use cookies to ensure you get the best experience on our website. "
),
_c(
"a",
{
attrs: {
href: "https://cookiesandyou.com/",
target: "_blank"
}
},
[_vm._v("Learn More...")]
)
])
],
2
),
_vm._v(" "),
_c("div", { class: "cookie__" + _vm.type + "__buttons" }, [
_vm.disableDecline === false
? _c(
"button",
{
class: [
"cookie__" + _vm.type + "__buttons__button",
"cookie__" + _vm.type + "__buttons__button--decline"
],
on: { click: _vm.decline }
},
[
_vm._t("declineContent", [
_vm._v(
"\n Opt Out\n "
)
])
],
2
)
: _vm._e(),
_vm._v(" "),
_c(
"button",
{
class: [
"cookie__" + _vm.type + "__buttons__button",
"cookie__" + _vm.type + "__buttons__button--accept"
],
on: { click: _vm.accept }
},
[
_vm._t("acceptContent", [
_vm._v("\n Got It!\n ")
])
],
2
)
])
]
)
: _vm._e()
])
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var component = normalizeComponent_1(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
undefined,
undefined
)
// Import vue component
// install function executed by Vue.use()
function install(Vue) {
if (install.installed) { return; }
install.installed = true;
Vue.component('VueCookieAcceptDecline', component);
}
// Create module definition for Vue.use()
var plugin = {
install: install,
};
// To auto-install when vue is found
var GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
// It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = component;
exports.install = install;
exports.default = component;
return exports;
}({}));