@el7ven/cookie-kit 0.3.1 → 0.3.3

package/src/core/ConsentMode.js

@@ -0,0 +1,109 @@
+/**
+ * Google Consent Mode v2 Integration
+ * Automatically syncs cookie consent with Google's Consent API
+ * @module ConsentMode
+ */
+
+const CONSENT_MODE_DEFAULTS = {
+  analytics_storage: 'denied',
+  ad_storage: 'denied',
+  ad_user_data: 'denied',
+  ad_personalization: 'denied',
+  functionality_storage: 'denied',
+  personalization_storage: 'denied',
+  security_storage: 'granted'
+}
+
+// Mapping: cookie category → Google consent types
+const CATEGORY_MAPPING = {
+  necessary: ['security_storage'],
+  analytics: ['analytics_storage'],
+  marketing: ['ad_storage', 'ad_user_data', 'ad_personalization'],
+  preferences: ['functionality_storage', 'personalization_storage']
+}
+
+export class ConsentMode {
+  constructor(consentManager, options = {}) {
+    this.manager = consentManager
+    this.enabled = options.enabled !== false
+    this.categoryMapping = { ...CATEGORY_MAPPING, ...options.categoryMapping }
+    this.waitForUpdate = options.waitForUpdate || 500
+    this._initialized = false
+
+    if (this.enabled) {
+      this._init()
+    }
+  }
+
+  _init() {
+    if (typeof window === 'undefined') return
+    if (this._initialized) return
+
+    // Ensure dataLayer exists
+    window.dataLayer = window.dataLayer || []
+
+    // Set default consent state (denied for everything except security)
+    this._gtag('consent', 'default', {
+      ...CONSENT_MODE_DEFAULTS,
+      wait_for_update: this.waitForUpdate
+    })
+
+    this.manager._debug('ConsentMode: defaults set', CONSENT_MODE_DEFAULTS)
+
+    // Check if user already has consent
+    const existing = this.manager.getConsent()
+    if (existing?.hasConsented) {
+      this._updateFromCategories(existing.categories)
+    }
+
+    // Listen for consent changes
+    this.manager.on('consentChanged', ({ categories }) => {
+      this._updateFromCategories(categories)
+    })
+
+    this._initialized = true
+  }
+
+  _updateFromCategories(categories) {
+    const consentUpdate = {}
+
+    Object.entries(this.categoryMapping).forEach(([category, gtagKeys]) => {
+      const granted = categories[category] === true
+      gtagKeys.forEach(key => {
+        consentUpdate[key] = granted ? 'granted' : 'denied'
+      })
+    })
+
+    this._gtag('consent', 'update', consentUpdate)
+    this.manager._debug('ConsentMode: updated', consentUpdate)
+  }
+
+  _gtag() {
+    if (typeof window === 'undefined') return
+    window.dataLayer = window.dataLayer || []
+    window.dataLayer.push(arguments)
+  }
+
+  // Get current consent mode state
+  getState() {
+    const consent = this.manager.getConsent()
+    if (!consent?.hasConsented) {
+      return { ...CONSENT_MODE_DEFAULTS }
+    }
+
+    const state = { ...CONSENT_MODE_DEFAULTS }
+    Object.entries(this.categoryMapping).forEach(([category, gtagKeys]) => {
+      const granted = consent.categories[category] === true
+      gtagKeys.forEach(key => {
+        state[key] = granted ? 'granted' : 'denied'
+      })
+    })
+    return state
+  }
+
+  destroy() {
+    this._initialized = false
+  }
+}
+
+export { CONSENT_MODE_DEFAULTS, CATEGORY_MAPPING }

package/src/core/FocusTrap.js

@@ -0,0 +1,130 @@
+const FOCUSABLE_SELECTORS = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable]'
+].join(', ')
+
+export class FocusTrap {
+  constructor(options = {}) {
+    this.active = false
+    this.element = null
+    this.previousFocus = null
+    this.onEscape = options.onEscape || null
+    this._handleKeyDown = this._handleKeyDown.bind(this)
+  }
+
+  activate(element) {
+    if (!element || typeof document === 'undefined') return
+
+    this.element = element
+    this.previousFocus = document.activeElement
+    this.active = true
+
+    element.setAttribute('role', 'dialog')
+    element.setAttribute('aria-modal', 'true')
+
+    document.addEventListener('keydown', this._handleKeyDown, { capture: true })
+    element.addEventListener('keydown', this._handleKeyDown, { capture: true })
+
+    requestAnimationFrame(() => {
+      const first = this._getFirstFocusable()
+      if (first) {
+        first.focus()
+      } else {
+        element.setAttribute('tabindex', '-1')
+        element.focus()
+      }
+    })
+  }
+
+  deactivate() {
+    if (!this.active) return
+
+    this.active = false
+
+    // Remove both listeners
+    document.removeEventListener('keydown', this._handleKeyDown, { capture: true })
+    if (this.element) {
+      this.element.removeEventListener('keydown', this._handleKeyDown, { capture: true })
+    }
+
+    // Restore previous focus
+    if (this.previousFocus && typeof this.previousFocus.focus === 'function') {
+      this.previousFocus.focus()
+    }
+
+    this.element = null
+    this.previousFocus = null
+  }
+
+  _handleKeyDown(event) {
+    if (!this.active || !this.element) return
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      if (this.onEscape) {
+        this.onEscape()
+      }
+      return
+    }
+
+    // Tab key — trap focus
+    if (event.key === 'Tab') {
+      const focusables = this._getFocusableElements()
+
+      if (focusables.length === 0) {
+        event.preventDefault()
+        return
+      }
+
+      const first = focusables[0]
+      const last = focusables[focusables.length - 1]
+      const current = document.activeElement
+
+      if (event.shiftKey) {
+        if (current === first || !focusables.includes(current)) {
+          event.preventDefault()
+          last.focus()
+        }
+      } else {
+        if (current === last || !focusables.includes(current)) {
+          event.preventDefault()
+          first.focus()
+        }
+      }
+    }
+  }
+
+  _getFocusableElements() {
+    if (!this.element) return []
+
+    return Array.from(this.element.querySelectorAll(FOCUSABLE_SELECTORS))
+      .filter(el => {
+        const style = window.getComputedStyle(el)
+        const isToggleInput = el.classList.contains('cookie-drawer__toggle-input')
+
+        let isVisible = style.display !== 'none' && style.visibility !== 'hidden'
+
+        if (!isToggleInput) {
+          isVisible = isVisible && el.offsetWidth > 0 && el.offsetHeight > 0
+        }
+
+        const isEnabled = !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden')
+
+        return isVisible && isEnabled
+      })
+  }
+
+  _getFirstFocusable() {
+    const elements = this._getFocusableElements()
+    return elements[0] || null
+  }
+
+  destroy() {
+    this.deactivate()
+  }
+}

package/src/core/GeoDetector.js

@@ -0,0 +1,144 @@
+/**
+ * Geo GDPR Detection — auto-detect user region for consent rules
+ * EU/UK → show banner, US → optional, other → configurable
+ * @module GeoDetector
+ */
+
+const EU_COUNTRIES = [
+  'AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR',
+  'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL',
+  'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'GB', 'IS', 'LI', 'NO'
+]
+
+const CCPA_STATES = ['CA']
+
+const REGION_RULES = {
+  gdpr: { showBanner: true, requireExplicit: true, rejectButton: true },
+  ccpa: { showBanner: true, requireExplicit: false, rejectButton: true },
+  none: { showBanner: false, requireExplicit: false, rejectButton: false }
+}
+
+export class GeoDetector {
+  constructor(consentManager, options = {}) {
+    this.manager = consentManager
+    this.defaultRegion = options.defaultRegion || 'unknown'
+    this.apiUrl = options.apiUrl || null
+    this.apiKey = options.apiKey || null
+    this.provider = options.provider || 'auto' // 'auto' | 'ipapi' | 'ipstack' | 'manual'
+    this._region = null
+    this._country = null
+    this._detected = false
+  }
+
+  /**
+   * Detect user's region
+   * @returns {Promise<{country: string, region: string, rules: Object}>}
+   */
+  async detect() {
+    if (this._detected) {
+      return this.getResult()
+    }
+
+    try {
+      if (this.provider === 'manual') {
+        this._region = this.defaultRegion
+        this._detected = true
+        return this.getResult()
+      }
+
+      const data = await this._fetchGeoData()
+      this._country = data.country
+      this._region = this._classifyRegion(data.country, data.state)
+      this._detected = true
+
+      this.manager._debug('GeoDetector: detected', {
+        country: this._country,
+        region: this._region
+      })
+
+      return this.getResult()
+    } catch (e) {
+      this.manager._debug('GeoDetector: detection failed, using default', e.message)
+      this._region = this.defaultRegion === 'gdpr' ? 'gdpr' : 'none'
+      this._detected = true
+      return this.getResult()
+    }
+  }
+
+  getResult() {
+    const region = this._region || 'gdpr' // default to gdpr for safety
+    return {
+      country: this._country,
+      region,
+      rules: REGION_RULES[region] || REGION_RULES.gdpr,
+      detected: this._detected
+    }
+  }
+
+  /**
+   * Check if banner should be shown based on region
+   */
+  shouldShowBanner() {
+    const result = this.getResult()
+    return result.rules.showBanner
+  }
+
+  /**
+   * Check if explicit consent is required
+   */
+  requiresExplicitConsent() {
+    const result = this.getResult()
+    return result.rules.requireExplicit
+  }
+
+  // --- Internal ---
+
+  _classifyRegion(country, state) {
+    if (EU_COUNTRIES.includes(country)) return 'gdpr'
+    if (country === 'US' && CCPA_STATES.includes(state)) return 'ccpa'
+    if (country === 'BR') return 'gdpr' // LGPD similar to GDPR
+    return 'none'
+  }
+
+  async _fetchGeoData() {
+    // Try multiple free providers
+    const providers = [
+      () => this._fetchIpApi(),
+      () => this._fetchCustom()
+    ]
+
+    for (const provider of providers) {
+      try {
+        return await provider()
+      } catch (e) {
+        continue
+      }
+    }
+
+    throw new Error('All geo providers failed')
+  }
+
+  async _fetchIpApi() {
+    const res = await fetch('https://ipapi.co/json/', {
+      signal: AbortSignal.timeout(3000)
+    })
+    if (!res.ok) throw new Error('ipapi failed')
+    const data = await res.json()
+    return {
+      country: data.country_code,
+      state: data.region_code
+    }
+  }
+
+  async _fetchCustom() {
+    if (!this.apiUrl) throw new Error('No custom API URL')
+    const url = this.apiKey ? `${this.apiUrl}?key=${this.apiKey}` : this.apiUrl
+    const res = await fetch(url, {
+      signal: AbortSignal.timeout(3000)
+    })
+    if (!res.ok) throw new Error('Custom API failed')
+    return await res.json()
+  }
+}
+
+export { EU_COUNTRIES, CCPA_STATES, REGION_RULES }

package/src/core/ScriptLoader.js

@@ -0,0 +1,229 @@
+/**
+ * Script Loader System — blocks/unblocks scripts based on consent
+ * Supports inline and external scripts with data-cookiecategory attribute
+ * @module ScriptLoader
+ */
+
+export class ScriptLoader {
+  constructor(consentManager) {
+    this.manager = consentManager
+    this.loadedScripts = new Map()
+    this.blockedScripts = []
+    this._observer = null
+
+    this._init()
+  }
+
+  _init() {
+    if (typeof window === 'undefined') return
+
+    // Scan existing scripts on page
+    this._scanBlockedScripts()
+
+    // Watch for new scripts added to DOM
+    this._observeDOM()
+
+    // Listen for consent changes
+    this.manager.on('consentChanged', ({ categories }) => {
+      this._onConsentChanged(categories)
+    })
+
+    // Check if consent already exists
+    const consent = this.manager.getConsent()
+    if (consent?.hasConsented) {
+      this._onConsentChanged(consent.categories)
+    }
+
+    this.manager._debug('ScriptLoader: initialized')
+  }
+
+  // --- Public API ---
+
+  /**
+   * Register a script to load when category consent is granted
+   * @param {string} category - Cookie category id
+   * @param {string} src - Script URL
+   * @param {Object} options - Script attributes
+   */
+  register(category, src, options = {}) {
+    const script = { category, src, options, loaded: false }
+    this.blockedScripts.push(script)
+
+    // Check if already consented
+    if (this.manager.hasCategoryConsent(category)) {
+      this._loadScript(script)
+    }
+
+    this.manager._debug('ScriptLoader: registered', { category, src })
+    return this
+  }
+
+  /**
+   * Load a script immediately (bypasses consent check)
+   */
+  loadImmediate(src, options = {}) {
+    return this._injectScript(src, options)
+  }
+
+  /**
+   * Remove all scripts for a category
+   */
+  removeCategory(category) {
+    this.loadedScripts.forEach((info, element) => {
+      if (info.category === category) {
+        element.remove()
+        this.loadedScripts.delete(element)
+        this.manager._debug('ScriptLoader: removed script', info.src)
+      }
+    })
+  }
+
+  /**
+   * Get all registered scripts and their status
+   */
+  getStatus() {
+    return this.blockedScripts.map(s => ({
+      category: s.category,
+      src: s.src,
+      loaded: s.loaded
+    }))
+  }
+
+  // --- Internal ---
+
+  _scanBlockedScripts() {
+    if (typeof document === 'undefined') return
+
+    const scripts = document.querySelectorAll('script[data-cookiecategory]')
+    scripts.forEach(script => {
+      const category = script.getAttribute('data-cookiecategory')
+      const src = script.getAttribute('data-src') || script.src
+
+      if (script.type === 'text/plain') {
+        // Blocked script — store for later activation
+        this.blockedScripts.push({
+          category,
+          src,
+          options: { inline: !src, content: script.textContent },
+          element: script,
+          loaded: false
+        })
+        this.manager._debug('ScriptLoader: found blocked script', { category, src })
+      }
+    })
+  }
+
+  _observeDOM() {
+    if (typeof MutationObserver === 'undefined') return
+
+    this._observer = new MutationObserver((mutations) => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          if (node.tagName === 'SCRIPT' && node.getAttribute('data-cookiecategory')) {
+            const category = node.getAttribute('data-cookiecategory')
+            if (node.type === 'text/plain') {
+              this.blockedScripts.push({
+                category,
+                src: node.getAttribute('data-src') || node.src,
+                options: { inline: !node.src, content: node.textContent },
+                element: node,
+                loaded: false
+              })
+            }
+          }
+        })
+      })
+    })
+
+    this._observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    })
+  }
+
+  _onConsentChanged(categories) {
+    Object.entries(categories).forEach(([catId, granted]) => {
+      if (granted) {
+        // Load all scripts for this category
+        this.blockedScripts
+          .filter(s => s.category === catId && !s.loaded)
+          .forEach(s => this._loadScript(s))
+      } else {
+        // Remove scripts for rejected category
+        this.removeCategory(catId)
+      }
+    })
+  }
+
+  _loadScript(scriptInfo) {
+    if (scriptInfo.loaded) return
+
+    if (scriptInfo.options?.inline && scriptInfo.options?.content) {
+      // Inline script
+      this._injectInlineScript(scriptInfo)
+    } else if (scriptInfo.src) {
+      // External script
+      this._injectScript(scriptInfo.src, {
+        ...scriptInfo.options,
+        category: scriptInfo.category
+      })
+    }
+
+    scriptInfo.loaded = true
+    this.manager._debug('ScriptLoader: loaded', scriptInfo.src || 'inline')
+  }
+
+  _injectScript(src, options = {}) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = src
+      script.async = options.async !== false
+
+      if (options.id) script.id = options.id
+      if (options.defer) script.defer = true
+      if (options.crossOrigin) script.crossOrigin = options.crossOrigin
+
+      script.onload = () => {
+        this.manager._debug('ScriptLoader: script loaded', src)
+        resolve(script)
+      }
+      script.onerror = (err) => {
+        this.manager._debug('ScriptLoader: script error', src, err)
+        reject(err)
+      }
+
+      document.head.appendChild(script)
+
+      this.loadedScripts.set(script, {
+        src,
+        category: options.category,
+        loaded: true
+      })
+    })
+  }
+
+  _injectInlineScript(scriptInfo) {
+    const script = document.createElement('script')
+    script.textContent = scriptInfo.options.content
+    document.head.appendChild(script)
+
+    // Remove original blocked script
+    if (scriptInfo.element) {
+      scriptInfo.element.remove()
+    }
+
+    this.loadedScripts.set(script, {
+      src: 'inline',
+      category: scriptInfo.category,
+      loaded: true
+    })
+  }
+
+  destroy() {
+    if (this._observer) {
+      this._observer.disconnect()
+    }
+    this.loadedScripts.clear()
+    this.blockedScripts = []
+  }
+}