1 | import BaseComponent from 'bootstrap/js/src/base-component.js'
|
2 |
|
3 | import { isDisabled, getElementFromSelector, reflow } from 'bootstrap/js/src/util/index'
|
4 | import EventHandler from 'bootstrap/js/src/dom/event-handler'
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | const NAME = 'cookiebar'
|
13 | const VERSION = '5.0.0'
|
14 | const DATA_KEY = 'bs.cookiebar'
|
15 | const EVENT_KEY = `.${DATA_KEY}`
|
16 | const DATA_API_KEY = '.data-api'
|
17 |
|
18 | const COOKIE_NAME = 'cookies_consent'
|
19 | const COOKIE_VALUE = 'true'
|
20 | const COOKIE_EXPIRE = 30
|
21 |
|
22 | const SELECTOR_COOKIE_BAR = '.cookiebar'
|
23 | const SELECTOR_ACCEPT = '[data-bs-accept="cookiebar"]'
|
24 |
|
25 | const EVENT_CLOSE = `close${EVENT_KEY}`
|
26 | const EVENT_CLOSED = `closed${EVENT_KEY}`
|
27 | const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
|
28 | const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
29 |
|
30 | const CLASS_NAME_COOKIE_BAR = 'cookiebar'
|
31 | const CLASS_NAME_SHOW = 'show'
|
32 | const CLASS_NAME_FADE = 'fade'
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | class Cookiebar extends BaseComponent {
|
41 | constructor(element) {
|
42 | super(element)
|
43 |
|
44 | this._isShown = this._element.classList.contains(CLASS_NAME_SHOW)
|
45 | this._isTransitioning = false
|
46 | }
|
47 |
|
48 |
|
49 | static get NAME() {
|
50 | return NAME
|
51 | }
|
52 |
|
53 | static get VERSION() {
|
54 | return VERSION
|
55 | }
|
56 |
|
57 |
|
58 |
|
59 | show() {
|
60 | if (this._isShown || this._isTransitioning) {
|
61 | return
|
62 | }
|
63 |
|
64 | this._isShown = true
|
65 |
|
66 | if (this._isAnimated()) {
|
67 | this._isTransitioning = true
|
68 | }
|
69 |
|
70 | this._showElement()
|
71 | }
|
72 |
|
73 | hide() {
|
74 | if (!this._isShown || this._isTransitioning) {
|
75 | return
|
76 | }
|
77 |
|
78 | this._isShown = false
|
79 | const isAnimated = this._isAnimated()
|
80 |
|
81 | if (isAnimated) {
|
82 | this._isTransitioning = true
|
83 | }
|
84 |
|
85 | this._element.classList.remove(CLASS_NAME_SHOW)
|
86 |
|
87 | this._queueCallback(() => this._hideElement(), this._element, isAnimated)
|
88 | }
|
89 |
|
90 | accept(element) {
|
91 | element = element || this._element
|
92 |
|
93 | const rootElement = this._getRootElement(element)
|
94 | const customEvent = this._triggerCloseEvent(rootElement)
|
95 |
|
96 | if (customEvent.defaultPrevented) {
|
97 | return
|
98 | }
|
99 |
|
100 | this._setCookieEU()
|
101 |
|
102 | this.hide()
|
103 |
|
104 |
|
105 | }
|
106 |
|
107 | |
108 |
|
109 |
|
110 |
|
111 |
|
112 | static clearCookie() {
|
113 | document.cookie = COOKIE_NAME + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
|
114 | }
|
115 |
|
116 |
|
117 |
|
118 | _isAnimated() {
|
119 | return this._element.classList.contains(CLASS_NAME_FADE)
|
120 | }
|
121 |
|
122 | _showElement() {
|
123 | const isAnimated = this._isAnimated()
|
124 |
|
125 | this._element.removeAttribute('aria-hidden')
|
126 | this._element.setAttribute('aria-live', 'polite')
|
127 |
|
128 | if (isAnimated) {
|
129 | reflow(this._element)
|
130 | }
|
131 |
|
132 | this._element.classList.add(CLASS_NAME_SHOW)
|
133 |
|
134 | const transitionComplete = () => {
|
135 | this._isTransitioning = false
|
136 | }
|
137 |
|
138 | this._queueCallback(transitionComplete, this._element, isAnimated)
|
139 | }
|
140 |
|
141 | _hideElement() {
|
142 | this._element.style.display = 'none'
|
143 | this._element.setAttribute('aria-hidden', true)
|
144 | this._element.removeAttribute('aria-live')
|
145 | this._isTransitioning = false
|
146 | }
|
147 |
|
148 | _setCookieEU() {
|
149 | var exdate = new Date()
|
150 | exdate.setDate(exdate.getDate() + COOKIE_EXPIRE)
|
151 | var c_value = escape(COOKIE_VALUE) + (COOKIE_EXPIRE == null ? '' : '; expires=' + exdate.toUTCString())
|
152 | document.cookie = COOKIE_NAME + '=' + c_value + '; path=/'
|
153 | }
|
154 |
|
155 | _getRootElement(element) {
|
156 | const selector = getElementFromSelector(element)
|
157 | let parent = null
|
158 |
|
159 | if (selector) {
|
160 | parent = selector
|
161 | }
|
162 |
|
163 | if (!parent) {
|
164 | parent = element.closest(`.${CLASS_NAME_COOKIE_BAR}`)
|
165 | }
|
166 |
|
167 | return parent
|
168 | }
|
169 |
|
170 | _triggerCloseEvent(element) {
|
171 | |
172 |
|
173 |
|
174 |
|
175 | return EventHandler.trigger(element, EVENT_CLOSE)
|
176 | }
|
177 |
|
178 | _removeElement(element) {
|
179 |
|
180 | element.classList.remove(CLASS_NAME_SHOW)
|
181 | element.setAttribute('aria-hidden', 'true')
|
182 | element.setAttribute('aria-live', 'off')
|
183 |
|
184 |
|
185 | EventHandler.trigger(element, EVENT_CLOSED)
|
186 |
|
187 | this.dispose()
|
188 | }
|
189 |
|
190 |
|
191 |
|
192 | |
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 | static _handleAccept(cookiebarInstance) {
|
212 | return function (event) {
|
213 | if (event) {
|
214 | event.preventDefault()
|
215 | }
|
216 |
|
217 | cookiebarInstance.close(this)
|
218 | }
|
219 | }
|
220 |
|
221 | static _handleConsent(cookiebarInstance) {
|
222 | return function (event) {
|
223 | if (event) {
|
224 | event.preventDefault()
|
225 | }
|
226 |
|
227 | cookiebarInstance.close(this)
|
228 | }
|
229 | }
|
230 |
|
231 | static _getCookieEU() {
|
232 | var i,
|
233 | x,
|
234 | y,
|
235 | ARRcookies = document.cookie.split(';')
|
236 | for (i = 0; i < ARRcookies.length; i++) {
|
237 | x = ARRcookies[i].substring(0, ARRcookies[i].indexOf('='))
|
238 | y = ARRcookies[i].substring(ARRcookies[i].indexOf('=') + 1)
|
239 | x = x.replace(/^\s+|\s+$/g, '')
|
240 | if (x == COOKIE_NAME) {
|
241 | return unescape(y)
|
242 | }
|
243 | }
|
244 | }
|
245 | }
|
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 | EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_ACCEPT, function (event) {
|
256 | if (['A', 'AREA'].includes(this.tagName)) {
|
257 | event.preventDefault()
|
258 | }
|
259 |
|
260 | if (isDisabled(this)) {
|
261 | return
|
262 | }
|
263 |
|
264 | const target = getElementFromSelector(this) || this.closest(`.${NAME}`)
|
265 | const instance = Cookiebar.getOrCreateInstance(target)
|
266 | instance.accept()
|
267 |
|
268 | })
|
269 |
|
270 | EventHandler.on(window, EVENT_LOAD_DATA_API, function () {
|
271 | const consent = Cookiebar._getCookieEU()
|
272 | if (!consent) {
|
273 | const cookiebars = document.querySelectorAll(SELECTOR_COOKIE_BAR)
|
274 | cookiebars.forEach((bar) => {
|
275 | const instance = Cookiebar.getOrCreateInstance(bar)
|
276 | instance.show()
|
277 | })
|
278 | }
|
279 | })
|
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 |
|
292 |
|
293 |
|
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 | export default Cookiebar
|