/*!
* ihavecookies - jQuery plugin for displaying cookie/privacy message
* v0.3.2
*
* Copyright (c) 2018 Ketan Mistry (https://iamketan.com.au)
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/! function(p) {
p.fn.ihavecookies = function(e, o) {
var i = p(this),
t = p.extend({
cookieTypes: [{
type: "Webサイトパフォーマンス",
value: "preferences",
description: "Webサイトの設定に関連するCookieです（例：ユーザー名、サイトの色等"
}, {
type: "解析",
value: "analytics",
description: "Webサイト訪問、ブラウザなどに関連するCookieです"
}, {
type: "マーケティング",
value: "marketing",
description: "マーケティング関連のCookieです（例：ニュースレター、SNS等"
}],
title: "Cookieとプライバシー",
message: "Cookieを使用する事で、ショッピングカートの使用や、WebサイトでのUXのパーソナライズ、Webサイトへ訪問の有無を記憶、広告や検索の効果の測定、ユーザーの行動把握に役立てます。ユーザーとのコミュニケーションを主な目的である事を前提とします",
link: "/privacy-policy",
delay: 2e3,
expires: 30,
moreInfoLabel: "詳細",
acceptBtnLabel: "Cookieを受け入れ",
advancedBtnLabel: "Cookieのカスタマイズ",
cookieTypesTitle: "受け入れるCookieを選択",
fixedCookieTypeLabel: "必要",
fixedCookieTypeDesc: "こちららは、Webサイトが正しく機能するために不可欠なCookiesです。",
onAccept: function() {},
uncheckBoxes: !1
}, e),
n = u("cookieControl"),
c = u("cookieControlPrefs");
if (n && c && "reinit" != o) {
var r = !0;
"false" == n && (r = !1), d(r, t.expires)
} else {
p("#gdpr-cookie-message").remove();
var a = '<li><input type="checkbox" name="gdpr[]" value="necessary" checked="checked" disabled="disabled"> <label title="' + t.fixedCookieTypeDesc + '">' + t.fixedCookieTypeLabel + "</label></li>";
preferences = JSON.parse(c), p.each(t.cookieTypes, function(e, o) {
if ("" !== o.type && "" !== o.value) {
var i = "";
!1 !== o.description && (i = ' title="' + o.description + '"'), a += '<li><input type="checkbox" id="gdpr-cookietype-' + o.value + '" name="gdpr[]" value="' + o.value + '" data-auto="on"> <label for="gdpr-cookietype-' + o.value + '"' + i + ">" + o.type + "</label></li>"
}
});
var s = '<div id="gdpr-cookie-message"><h4>' + t.title + "</h4><p>" + t.message + ' <a href="' + t.link + '">' + t.moreInfoLabel + '</a><div id="gdpr-cookie-types" style="display:none;"><h5>' + t.cookieTypesTitle + "</h5><ul>" + a + '</ul></div><p><button id="gdpr-cookie-accept" type="button">' + t.acceptBtnLabel + '</button><button id="gdpr-cookie-advanced" type="button">' + t.advancedBtnLabel + "</button></p></div>";
setTimeout(function() {
p(i).append(s), p("#gdpr-cookie-message").hide().fadeIn("slow", function() {
"reinit" == o && (p("#gdpr-cookie-advanced").trigger("click"), p.each(preferences, function(e, o) {
p("input#gdpr-cookietype-" + o).prop("checked", !0)
}))
})
}, t.delay), p("body").on("click", "#gdpr-cookie-accept", function() {
d(!0, t.expires), p('input[name="gdpr[]"][data-auto="on"]').prop("checked", !0);
var i = [];
p.each(p('input[name="gdpr[]"]').serializeArray(), function(e, o) {
i.push(o.value)
}), l("cookieControlPrefs", JSON.stringify(i), 365), t.onAccept.call(this)
}), p("body").on("click", "#gdpr-cookie-advanced", function() {
p('input[name="gdpr[]"]:not(:disabled)').attr("data-auto", "off").prop("checked", !1), p("#gdpr-cookie-types").slideDown("fast", function() {
p("#gdpr-cookie-advanced").prop("disabled", !0)
})
})
}!0 === t.uncheckBoxes && p('input[type="checkbox"].ihavecookies').prop("checked", !1)
}, p.fn.ihavecookies.cookie = function() {
var e = u("cookieControlPrefs");
return JSON.parse(e)
}, p.fn.ihavecookies.preference = function(e) {
var o = u("cookieControl"),
i = u("cookieControlPrefs");
return i = JSON.parse(i), !1 !== o && (!1 !== i && -1 !== i.indexOf(e))
};
var d = function(e, o) {
l("cookieControl", e, o), p("#gdpr-cookie-message").fadeOut("fast", function() {
p(this).remove()
})
}, l = function(e, o, i) {
var t = new Date;
t.setTime(t.getTime() + 24 * i * 60 * 60 * 1e3);
var n = "expires=" + t.toUTCString();
return document.cookie = e + "=" + o + ";" + n + ";path=/", u(e)
}, u = function(e) {
for (var o = e + "=", i = decodeURIComponent(document.cookie).split(";"), t = 0; t < i.length; t++) {
for (var n = i[t];
" " == n.charAt(0);) n = n.substring(1);
if (0 === n.indexOf(o)) return n.substring(o.length, n.length)
}
return !1
}
}(jQuery);
var options = {
title: '🍪 Cookie及びプライバシーに関する同意はお済ですか？',
message: 'みたいな感じで訪問者にポップアップで同意を促すことが出来る、というもの',
delay: 600,
expires: 1,
link: '#privacy',
onAccept: function(){
var myPreferences = $.fn.ihavecookies.cookie();
console.log('設定が保存されました');
console.log(myPreferences);
},
uncheckBoxes: true,
acceptBtnLabel: 'Cookieを受け入れる',
moreInfoLabel: '詳細',
cookieTypesTitle: '受け入れるCookieを選択',
fixedCookieTypeLabel: '必須項目です。詳細はマウスホバーで',
fixedCookieTypeDesc: 'Webサイトが正しく機能するために必須な設定です'
}
$(document).ready(function() {
$('body').ihavecookies(options);
if ($.fn.ihavecookies.preference('marketing') === true) {
console.log('マーケティングによる品質向上が期待できる為、推奨します');
}
$('#ihavecookiesBtn').on('click', function(){
$('body').ihavecookies(options, 'reinit');
});
});
:root {
--purple: #3B3646;
--red: #EE4B5A;
}
* {
padding: 0;
margin: 0;
border: none;
}
body {
padding: 30px;
color: #333;
font-family: 'Roboto Slab', system-ui;
font-weight: 400;
font-style: normal;
font-size: 18px;
}
.container {
margin: 0 auto;
max-width: 550px;
}
.highlight {
background: rgba(255,215,0,0.115);
}
h1 {
color: var(--red);
font-family: 'Quicksand', sans-serif;
font-weight: 500;
font-size: 30px;
margin-bottom: 20px;
}
h3 {
font-family: 'Quicksand', sans-serif;
font-size: 21px;
font-weight: 500;
color: var(--red);
margin-bottom: 20px;
}
p, ul {
margin-bottom: 20px;
line-height: 1.75em;
}
li {
list-style: none;
margin-bottom: 10px;
}
li:last-child {
margin-bottom: 0;
}
input[type="checkbox"] {
margin-top: 10px;
margin-right: 15px;
float: left;
}
label {
display: inline-block;
max-width: 90%;
}
code {
color: var(--red);
font-family: monospace;
font-size: 16px;
background: #f7f7f7;
padding: 3px 5px;
border-radius: 3px;
border: 1px solid #ebebeb;
}
button#ihavecookiesBtn {
margin-left: 0px !important;
}
/* Cookie Dialog */
#gdpr-cookie-message {
position: fixed;
right: 30px;
bottom: 30px;
max-width: 375px;
background-color: var(--purple);
padding: 20px;
border-radius: 5px;
box-shadow: 0 6px 6px rgba(0,0,0,0.25);
margin-left: 30px;
font-family: system-ui;
}
#gdpr-cookie-message h4 {
color: var(--red);
font-family: 'Quicksand', sans-serif;
font-size: 18px;
font-weight: 500;
margin-bottom: 10px;
}
#gdpr-cookie-message h5 {
color: var(--red);
font-family: 'Quicksand', sans-serif;
font-size: 15px;
font-weight: 500;
margin-bottom: 10px;
}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
color: white;
font-size: 15px;
line-height: 1.5em;
}
#gdpr-cookie-message p:last-child {
margin-bottom: 0;
text-align: right;
}
#gdpr-cookie-message li {
width: 49%;
display: inline-block;
}
#gdpr-cookie-message a {
color: var(--red);
text-decoration: none;
font-size: 15px;
padding-bottom: 2px;
border-bottom: 1px dotted rgba(255,255,255,0.75);
transition: all 0.3s ease-in;
}
#gdpr-cookie-message a:hover {
color: white;
border-bottom-color: var(--red);
transition: all 0.3s ease-in;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn {
border: none;
background: var(--red);
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 15px;
padding: 7px;
border-radius: 3px;
margin-left: 15px;
cursor: pointer;
transition: all 0.3s ease-in;
}
#gdpr-cookie-message button:hover {
background: white;
color: var(--red);
transition: all 0.3s ease-in;
}
button#gdpr-cookie-advanced {
background: white;
color: var(--red);
}
#gdpr-cookie-message button:disabled {
opacity: 0.3;
}
#gdpr-cookie-message input[type="checkbox"] {
float: none;
margin-top: 0;
margin-right: 5px;
}
hogehoge