https://www.upv.es/js/cookies.js

1const cookies = getCookie("upvPreferences")
2
3// En desarrollo, crear automáticamente la cookie de preferencias
4if (window.location.hostname !== 'upv.es' && window.location.hostname.indexOf('.upv.es') === -1) {
5  if (!cookies || !cookies.match("essentials")) {
6    const cookieDate = new Date()
7    cookieDate.setFullYear(cookieDate.getFullYear() + 1)
8    const devCookie = JSON.stringify(["essentials", "preferences", "analytics"])
9    document.cookie = `upvPreferences=${devCookie}; expires=${cookieDate}; path=/`
10  }
11}
12
13if (!cookies || !cookies.match("essentials")) {
14  createBox()
15}
16
17//Save lang cookie
18let langBtns = document.querySelectorAll(".lang-link")
19if (langBtns && langBtns.length) {
20  langBtns.forEach((btn) => {
21    btn.addEventListener(
22      "click",
23      function (e) {
24        e.preventDefault()
25        let cookies = getCookie("upvPreferences")
26        if (cookies.match("preferences")) {
27          const cookieDate = new Date()
28          cookieDate.setFullYear(cookieDate.getFullYear() + 1)
29          document.cookie = `UPV_IDIOMA=${btn.textContent.toLocaleLowerCase()}; domain=upv.es; path=/;`
30        }
31        window.location = this.href
32      },
33      false
34    )
35  })
36}
37//Save lang cookie ----------------------------
38
39loadAnalytics()
40
41//Functions
42
43function getCookie(cname) {
44  let name = cname + "="
45  let decodedCookie = decodeURIComponent(document.cookie)
46  let ca = decodedCookie.split(";")
47  for (let i = 0; i < ca.length; i++) {
48    let c = ca[i]
49    while (c.charAt(0) == " ") {
50      c = c.substring(1)
51    }
52    if (c.indexOf(name) == 0) {
53      return c.substring(name.length, c.length)
54    }
55  }
56  return ""
57}
58
59function createBox() {
60  // Cargamos textos
61  const css = getCssText()
62  const text = getModalText(document.documentElement.lang)
63  // Añadimos los estilos en el head
64
65  document.head.insertAdjacentHTML("beforeend", `<style>${css}</style>`)
66
67  // Creamos elementos
68  let cookieBox = document.createElement("div")
69  let title = document.createElement("p")
70  let firstText = document.createElement("p")
71  let secondText = document.createElement("p")
72  let thirdText = document.createElement("p")
73  let buttonBox = document.createElement("div")
74  let buttonSave = document.createElement("button")
75  let buttonCancel = document.createElement("button")
76  let settingButton = document.createElement("button")
77  let customCheckBoxEssential = document.createElement("div")
78  let customCheckBoxPreferences = document.createElement("div")
79  let customCheckBoxAnalytics = document.createElement("div")
80  let checks = document.createElement("div")
81
82  // Añadimos clases e ids
83  cookieBox.setAttribute("class", "cookie-box active")
84  buttonSave.setAttribute("id", "save-button")
85  buttonCancel.setAttribute("id", "cancel-button")
86  title.setAttribute("class", "cookie-title")
87  settingButton.setAttribute("id", "setting-button")
88  thirdText.setAttribute("class", "cookie-small-text")
89  checks.setAttribute("class", "cookies-checks")
90  buttonBox.setAttribute("class", "buttons")
91  customCheckBoxEssential.setAttribute("id", "essential")
92  customCheckBoxEssential.setAttribute("class", "custom-check")
93  customCheckBoxPreferences.setAttribute("id", "preferences")
94  customCheckBoxPreferences.setAttribute("class", "custom-check")
95  customCheckBoxAnalytics.setAttribute("id", "analytics")
96  customCheckBoxAnalytics.setAttribute("class", "custom-check")
97
98  // Creamos la estructura del check
99  text.checks.forEach((el) => {
100    let outsideBox = document.createElement("div")
101    let checkbox = document.createElement("input")
102    checkbox.setAttribute("type", "checkbox")
103    checkbox.setAttribute("id", `${el.id}-input`)
104    let customCheck = document.createElement("div")
105    let checkText = document.createElement("p")
106    checkText.innerText = el.text
107    outsideBox.appendChild(checkbox)
108    outsideBox.appendChild(customCheck)
109    if (el.id === "essential") {
110      customCheckBoxEssential.appendChild(outsideBox)
111      customCheckBoxEssential.appendChild(checkText)
112    } else if (el.id === "preferences") {
113      customCheckBoxPreferences.appendChild(outsideBox)
114      customCheckBoxPreferences.appendChild(checkText)
115    } else {
116      customCheckBoxAnalytics.appendChild(outsideBox)
117      customCheckBoxAnalytics.appendChild(checkText)
118    }
119  })
120
121  // Añadir textos

122  title.innerText = text.title
123  firstText.innerHTML = text.firstParagraph
124  secondText.innerHTML = text.secondParagraph
125  thirdText.innerHTML = text.thirdParagraph
126  buttonSave.innerText = text.saveButton
127  buttonCancel.innerText = text.cancelButton
128
129  settingButton.innerText = text.settingsButton
130
131  // Añadimos elementos al elemento principal
132  cookieBox.appendChild(title)
133  cookieBox.appendChild(firstText)
134  cookieBox.appendChild(secondText)
135  cookieBox.appendChild(thirdText)
136  checks.appendChild(customCheckBoxEssential)
137  checks.appendChild(customCheckBoxPreferences)
138  checks.appendChild(customCheckBoxAnalytics)
139  cookieBox.appendChild(checks)
140  buttonBox.appendChild(buttonSave)
141  buttonBox.appendChild(buttonCancel)
142  buttonBox.appendChild(settingButton)
143  cookieBox.appendChild(buttonBox)
144
145  // Añadimos el elemento principal al DOM
146
147  document.body.appendChild(cookieBox)
148
149  // Creamos los onclick
150  const save = document.getElementById("save-button")
151  save.addEventListener(
152    "click",
153    function () {
154      checkAndSaveCookies()
155    },
156    false
157  )
158  const cancel = document.getElementById("cancel-button")
159  cancel.addEventListener(
160    "click",
161    function () {
162      rejectCookies()
163    },
164    false
165  )
166
167  const preferences = document.getElementById("setting-button")
168  const checksContainer = document.getElementsByClassName("cookies-checks")
169
170  preferences.addEventListener(
171    "click",
172    function () {
173      checksContainer[0].classList.toggle("active")
174    },
175    false
176  )
177
178  // Preparamos el autotoggle
179  let esentialBtn = document.getElementById("essential-input")
180  let preferencesBtn = document.getElementById("preferences-input")
181  let analyticsBtn = document.getElementById("analytics-input")
182
183  if (cookies.match("essentials")) {
184    esentialBtn.checked = Boolean(cookies.match("essentials"))
185    preferencesBtn.checked = Boolean(cookies.match("preferences"))
186    analyticsBtn.checked = Boolean(cookies.match("analytics"))
187  } else {
188    esentialBtn.checked = true
189    preferencesBtn.checked = true
190    analyticsBtn.checked = true
191  }
192
193  // addEventListener para los inputs
194
195  esentialBtn.addEventListener("change", function (e) {
196    if (!this.checked) {
197      preferencesBtn.checked = false
198      analyticsBtn.checked = false
199    }
200  })
201
202  preferencesBtn.addEventListener("change", function (e) {
203    if (this.checked && !esentialBtn.checked) {
204      esentialBtn.checked = true
205    }
206  })
207  analyticsBtn.addEventListener("change", function (e) {
208    if (this.checked && !esentialBtn.checked) {
209      esentialBtn.checked = true
210    }
211  })
212}
213
214function rejectCookies() {
215  closeCookies()
216}
217
218function closeCookies() {
219  let cookieBox = document.querySelector(".cookie-box")
220  if (cookieBox) cookieBox.classList.toggle("active")
221}
222function checkAndSaveCookies() {
223  const essential = document.getElementById("essential-input").checked
224  const preferences = document.getElementById("preferences-input").checked
225  const analytics = document.getElementById("analytics-input").checked
226  const cookieDate = new Date()
227
228  if (essential) {
229    const cookie = JSON.stringify([
230      essential ? "essentials" : null,
231      preferences ? "preferences" : null,
232      analytics ? "analytics" : null,
233    ])
234    cookieDate.setFullYear(cookieDate.getFullYear() + 1)
235    document.cookie = `upvPreferences=${cookie}; expires=${cookieDate}; domain=upv.es; path=/`
236    loadAnalytics()
237    if (!cookies.match("preferences")) clearLanguajeCookies()
238    if (!cookies.match("analytics")) clearAnalyticsCookies()
239  } else {
240    clearPreferenceCookies()
241    clearLanguajeCookies()
242    clearAnalyticsCookies()
243    return location.reload()
244  }
245  closeCookies()
246    if(analytics)location.reload();
247}
248
249function loadAnalytics() {
250  if (cookies.match("analytics")) {
251    ;(function (i, s, o, g, r, a, m) {
252      i["GoogleAnalyticsObject"] = r
253      ;(i[r] =
254        i[r] ||
255        function () {
256          ;(i[r].q = i[r].q || []).push(arguments)
257        }),
258        (i[r].l = 1 * new Date())
259      ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
260      a.async = 1
261      a.src = g
262      m.parentNode.insertBefore(a, m)
263    })(window, document, "script", "https://www.googletagmanager.com/gtag/js?i

263d=G-FH0S6SQPXT", "gtag")
264    window.dataLayer = window.dataLayer || []
265    function gtag() {
266      dataLayer.push(arguments)
267    }
268    gtag("js", new Date())
269    gtag("config", "G-FH0S6SQPXT")
270  } else {
271    clearAnalyticsCookies()
272  }
273}
274
275function getCookieList() {
276  let cookieList = document.cookie.split(";").reduce((cookies, cookie) => {
277    const [name, val] = cookie.split("=").map((c) => c.trim())
278    cookies[name] = val
279    return cookies
280  }, {})
281  return Object.keys(cookieList)
282}
283
284function clearPreferenceCookies() {
285  let cookieDate = new Date()
286  cookieDate.setFullYear(cookieDate.getFullYear() - 1)
287  document.cookie = `upvPreferences=; expires=${cookieDate}; domain=upv.es; path=/`
288}
289
290function clearLanguajeCookies() {
291  let cookieDate = new Date()
292  cookieDate.setFullYear(cookieDate.getFullYear() - 1)
293  document.cookie = `UPV_IDIOMA=; expires=${cookieDate}; domain=upv.es; path=/`
294}
295function clearAnalyticsCookies() {
296  let cookieListKeys = getCookieList()
297  if (cookieListKeys && cookieListKeys.length) {
298    cookieListKeys.forEach((cookieName, index) => {
299      let analyticsCookiesPrefix = ["_ga"]
300      analyticsCookiesPrefix.forEach((analyticCookie) => {
301        if (cookieName.includes(analyticCookie)) {
302          const cookieDate = new Date()
303          cookieDate.setFullYear(cookieDate.getFullYear() - 1)
304          document.cookie = `${cookieName}=; expires=${cookieDate}; domain=upv.es; path=/`
305        }
306      })
307    })
308  }
309}
310
311function openCookies() {
312  let cookieBox = document.querySelector(".cookie-box")
313  if (cookieBox) {
314    cookieBox.classList.toggle("active")
315  } else {
316    createBox()
317  }
318}
319// ----------------------------
320
321// Text functions
322function getModalText(lang) {
323  if (lang === "es-CA") {
324    return {
325      title: "Galetes i pol\u00edtica de privacitat",
326      firstParagraph:
327        "Utilitzem cookies pr\u00f2pies i de tercers per a analitzar l'\u00fas que fas de la nostra web, com recordar les prefer\u00e8ncies de l'usuari en el cas de l'idioma seleccionat, dades d'acc\u00e9s o personalitzaci\u00f3 de la p\u00e0gina. Pots obtenir m\u00e9s informaci\u00f3, o b\u00e9 con\u00e8ixer com canviar la configuraci\u00f3, en la nostra <a href='/legal/politica-cookies-va.html' target='_blank'>Pol\u00edtica de cookies</a>",
328      secondParagraph:
329        '',
330      thirdParagraph:
331        "Prem el bot\u00f3 ACCEPTAR per a confirmar que has llegit i acceptat la informaci\u00f3 presentada. Si desitges modificar la configuraci\u00f3 de les galetes prem PERSONALITZAR. Despr\u00e9s d'acceptar, no tornarem a mostrar-te aquest missatge.",
332      saveButton: "Acceptar",
333      cancelButton: "Rebutjar",
334      settingsButton: "Personalitzar",
335      checks: [
336        { text: "Essencials", id: "essential" },
337        { text: "Prefer\u00e8ncies del lloc", id: "preferences" },
338        { text: "Anal\u00edtiques", id: "analytics" },
339      ],
340    }
341  }
342  if (lang === "en-GB") {
343    return {
344      title: "Cookies and privacy policy",
345      firstParagraph:
346        "We use our own and third-party cookies to analyse your use of our website, such as remembering user preferences in the case of the language selected, access data or personalisation of the page. You can obtain more information, or find out how to change your settings, in our <a href='/legal/politica-cookies-en.html' target='_blank'>Cookie policy</a>",
347      secondParagraph:
348        '',
349      thirdParagraph:
350        "Click on the ACCEPT button to confirm that you have read and accepted the information presented. If you wish to change your cookie settings, please click on CUSTOMISE. Once you have clicked on ACCEPT, we will not show you this message again.",
351      saveButton: "Accept",
352      cancelButton: "Reject",
353      settingsButton: "Customise",
354      checks: [
355        { text: "Essential cookies", id: "essential" },
356        { text: "Site preferences", id: "preferences" },
357        { text: "Analytic cookies", id: "analytics" },
358      ],
359    }
360  }
361  // Spanish texts
362  return {
363    title: "Cookies y pol\u00edtica de privacidad",
364    firstParagraph:
365      "Utilizamos cookies propias y de terceros para analizar el uso que haces de nuestra web, como recordar las preferencias del usuario en el caso del idioma seleccionado, datos de acceso o personalizaci\u00f3n de la p\u00e1gina. Puedes obtener m\u00e1s informaci\u00f3n, o bien conocer c\u00f3mo cambiar la configuraci\u00f3n, en nuestra <a href='/legal/politica-cookies-es.html' target='_blank'>Pol\u00edtica de cookies</a>",
366    secondParagraph:'',

367    thirdParagraph:
368      "Pulsa el bot\u00f3n ACEPTAR para confirmar que has le\u00eddo y aceptado la informaci\u00f3n presentada. Si deseas modificar la configuraci\u00f3n de las cookies pulsa PERSONALIZAR. Despu\u00e9s de aceptar, no volveremos a mostrarte este mensaje.",
369    saveButton: "Aceptar",
370    cancelButton: "Rechazar",
371    settingsButton: "Personalizar",
372    checks: [
373      { text: "Esenciales", id: "essential" },
374      { text: "Preferencias del sitio (idioma)", id: "preferences" },
375      { text: "Anal\u00edtica", id: "analytics" },
376    ],
377  }
378}
379
380function getCssText() {
381  return `
382.cookie-box{
383position:fixed;
384background-color:#3F4444;
385border-radius:24px;
386padding:40px;
387color:white;
388max-width:min(500px, 90vw);
389max-height:min(700px, 60vh);
390overflow-y: auto;
391height:auto;
392bottom:1rem;
393left:1rem;
394font-family: Inter, sans-serif;
395size:18px;
396line-height:1.3;
397font-weight:400;
398opacity: 0;
399z-index:999;
400visibility: hidden;}
401.cookie-box p{
402    font-size:16px;
403}
404.cookie-box a{
405color: #E5554F;
406text-decoration:none
407
408}
409.cookie-box a:hover{
410  color: #D73333;
411  }
412.cookie-title{
413font-weight: 700;
414font-size:28px;
415margin-top: unset;
416}
417.cookie-small-text{
418font-size: 12px;
419}
420.cookie-box button{
421text-transform: uppercase;
422font-size: 0.75rem;
423padding: 10px 16px;
424background-color: rgba(229, 85, 79, 1);
425color: white;
426text-decoration: unset;
427display: inline-flex;
428align-items: center;
429transition: all ease .3s;
430border: unset;
431text-align: center;
432cursor: pointer;
433}
434.cookie-box button:hover{
435background-color: #a40e0e;
436}
437.cookie-box button#setting-button{
438background-color: transparent;
439border: 1px solid white;
440transition: all ease .3s;
441}
442.cookie-box button#setting-button:hover{
443background-color: white;
444border: 1px solid white;
445color: #3F4444;
446}
447.cookie-box .buttons{
448display: flex;
449gap: 1rem;
450flex-wrap: wrap;
451margin-top:1.5rem;
452}
453.custom-check{
454display: grid;
455grid-template-columns: 48px 1fr;
456gap: 1rem;
457align-items: center;
458margin-top:0.5rem;
459}
460#essential{
461margin-top:1.5rem;
462}
463.custom-check p{
464margin: unset;
465padding: unset;
466font-size: 12px;
467}
468.custom-check input{
469width:48px;
470height: 24px;
471cursor: pointer;
472z-index:1;
473padding: unset;
474margin: unset;
475position:relative;
476opacity:0;
477}
478.custom-check > div{
479position: relative
480}
481.custom-check div div{
482width: 48px;
483border-radius:30px;
484background-color:#111;
485z-index: 0;
486position: absolute;
487width:48px;
488height: 24px;
489top:0;
490left:0;
491}
492.custom-check div div:after{
493content: '';
494display:block;
495position:absolute;
496width:16px;
497height:16px;
498border-radius:9px;
499top:4px;
500left:0;
501transform:translateX(4px);
502background-color:#5B5B5B;
503transition: all ease .3s;
504}
505.custom-check > div input:checked + div:after{
506transform:translateX(calc(48px - 4px - 16px));
507background-color: #E5554F;
508}
509.cookies-checks{
510max-height: 0;
511overflow: hidden;
512transition: all ease .3s;
513}
514.cookies-checks.active{
515max-height: 200px;
516}
517.cookie-box.active{
518  opacity:1;
519  visibility: visible;
520}
521`
522}