UNPKG

7.42 kBJavaScriptView Raw
1import BaseComponent from 'bootstrap/js/src/base-component.js'
2
3import { /*defineJQueryPlugin,*/ isDisabled, getElementFromSelector, reflow } from 'bootstrap/js/src/util/index'
4import EventHandler from 'bootstrap/js/src/dom/event-handler'
5
6/**
7 * ------------------------------------------------------------------------
8 * Constants
9 * ------------------------------------------------------------------------
10 */
11
12const NAME = 'cookiebar'
13const VERSION = '5.0.0'
14const DATA_KEY = 'bs.cookiebar'
15const EVENT_KEY = `.${DATA_KEY}`
16const DATA_API_KEY = '.data-api'
17//const JQUERY_NO_CONFLICT = $.fn[NAME]
18const COOKIE_NAME = 'cookies_consent'
19const COOKIE_VALUE = 'true'
20const COOKIE_EXPIRE = 30
21
22const SELECTOR_COOKIE_BAR = '.cookiebar'
23const SELECTOR_ACCEPT = '[data-bs-accept="cookiebar"]'
24
25const EVENT_CLOSE = `close${EVENT_KEY}`
26const EVENT_CLOSED = `closed${EVENT_KEY}`
27const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
28const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
29
30const CLASS_NAME_COOKIE_BAR = 'cookiebar'
31const CLASS_NAME_SHOW = 'show'
32const CLASS_NAME_FADE = 'fade'
33
34/**
35 * ------------------------------------------------------------------------
36 * Class Definition
37 * ------------------------------------------------------------------------
38 */
39
40class 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 // Getters
49 static get NAME() {
50 return NAME
51 }
52
53 static get VERSION() {
54 return VERSION
55 }
56
57 // Public
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 //this._removeElement(rootElement)
104 //this.dispose()
105 }
106
107 /*dispose() {
108 $.removeData(this._element, DATA_KEY)
109 this._element = null
110 }*/
111
112 static clearCookie() {
113 document.cookie = COOKIE_NAME + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
114 }
115
116 // Private
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}`) //$(element).closest(`.${CLASS_NAME_COOKIE_BAR}`)[0]
165 }
166
167 return parent
168 }
169
170 _triggerCloseEvent(element) {
171 /*const closeEvent = $.Event(EVENT_CLOSE)
172
173 $(element).trigger(closeEvent)*/
174
175 return EventHandler.trigger(element, EVENT_CLOSE)
176 }
177
178 _removeElement(element) {
179 //$(element).removeClass(CLASS_NAME_SHOW).attr('aria-hidden', 'true').attr('aria-live', 'off')
180 element.classList.remove(CLASS_NAME_SHOW)
181 element.setAttribute('aria-hidden', 'true')
182 element.setAttribute('aria-live', 'off')
183
184 //this._destroyElement(element)
185 EventHandler.trigger(element, EVENT_CLOSED)
186
187 this.dispose()
188 }
189
190 // Static
191
192 /*static _jQueryInterface(config) {
193 return this.each(function () {
194 const $element = $(this)
195 let data = $element.data(DATA_KEY)
196
197 if (!data) {
198 data = new Cookiebar(this)
199 $element.data(DATA_KEY, data)
200 }
201
202 if (typeof config === 'string') {
203 if (typeof data[config] === 'undefined') {
204 throw new TypeError(`No method named "${config}"`)
205 }
206 data[config](this)
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 * Data Api implementation
250 * ------------------------------------------------------------------------
251 */
252
253//$(document).on(EVENT_CLICK_DATA_API, SELECTOR_ACCEPT, Cookiebar._handleAccept(new Cookiebar()))
254
255EventHandler.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 //Cookiebar._handleAccept(new Cookiebar())
268})
269
270EventHandler.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/*$(window).on(EVENT_LOAD_DATA_API, () => {
282 const cookiebars = $.makeArray($(SELECTOR_COOKIE_BAR))
283 var consent = Cookiebar._getCookieEU()
284 if (!consent) {
285 for (let i = cookiebars.length; i--;) {
286 const $cookiebar = $(cookiebars[i])
287 Cookiebar._jQueryInterface.call($cookiebar, 'show')
288 }
289 }
290})*/
291
292/**
293 * ------------------------------------------------------------------------
294 * jQuery
295 * ------------------------------------------------------------------------
296 * add .Cookiebar to jQuery only if jQuery is present
297 */
298
299//defineJQueryPlugin(Cookiebar)
300
301export default Cookiebar