@el7ven/cookie-kit 0.2.21 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@el7ven/cookie-kit",
-  "version": "0.2.21",
+  "version": "0.3.1",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",

package/src/core/analytics.js

@@ -127,27 +127,115 @@ export function loadYandexMetrica(counterId) {
 }
 
 /**
- * Block/unblock scripts based on consent categories
- * Scripts with data-cookie-category attribute will be managed
- * @param {Object} categories - { analytics: true, marketing: false }
+ * Block all scripts with data-cookie-category BEFORE consent.
+ * Call this as early as possible (before DOMContentLoaded).
+ * Rewrites script type to text/plain so they don't execute.
+ *
+ * Usage in HTML:
+ *   <script data-cookie-category="analytics" src="..."></script>
+ *   <script data-cookie-category="marketing">inline code</script>
  */
-export function manageScriptBlocking(categories = {}) {
+export function blockScriptsBeforeConsent() {
   if (typeof document === 'undefined') return
 
+  // MutationObserver to catch dynamically added scripts
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.tagName === 'SCRIPT' && node.getAttribute('data-cookie-category')) {
+          const category = node.getAttribute('data-cookie-category')
+          // Check if consent already given for this category
+          if (!_hasConsentFor(category)) {
+            node.type = 'text/plain'
+            if (node.src) {
+              node.dataset.originalSrc = node.src
+              node.removeAttribute('src')
+            }
+          }
+        }
+      }
+    }
+  })
+
+  observer.observe(document.documentElement, { childList: true, subtree: true })
+
+  // Also block any scripts already in the DOM
   document.querySelectorAll('script[data-cookie-category]').forEach(script => {
+    const category = script.getAttribute('data-cookie-category')
+    if (!_hasConsentFor(category)) {
+      if (!script.dataset.blocked) {
+        script.dataset.blocked = 'true'
+        // Already executed scripts can't be un-executed,
+        // but we mark them so future loads respect consent
+      }
+    }
+  })
+
+  // Store observer reference for cleanup
+  if (typeof window !== 'undefined') {
+    window.__cookieKitScriptObserver = observer
+  }
+
+  return observer
+}
+
+/**
+ * Unblock and execute scripts for consented categories.
+ * @param {Object} categories - { analytics: true, marketing: false }
+ */
+export function unblockConsentedScripts(categories = {}) {
+  if (typeof document === 'undefined') return
+
+  document.querySelectorAll('script[data-cookie-category][type="text/plain"]').forEach(script => {
     const category = script.getAttribute('data-cookie-category')
     if (categories[category]) {
-      // Re-enable script
-      if (script.type === 'text/plain' && script.dataset.originalSrc) {
-        const newScript = document.createElement('script')
+      const newScript = document.createElement('script')
+
+      // Copy attributes
+      for (const attr of script.attributes) {
+        if (attr.name !== 'type' && attr.name !== 'data-original-src') {
+          newScript.setAttribute(attr.name, attr.value)
+        }
+      }
+
+      // Restore src or inline content
+      if (script.dataset.originalSrc) {
         newScript.src = script.dataset.originalSrc
         newScript.async = true
-        script.parentNode.replaceChild(newScript, script)
+      } else if (script.textContent) {
+        newScript.textContent = script.textContent
       }
+
+      newScript.type = 'text/javascript'
+      script.parentNode.replaceChild(newScript, script)
     }
   })
 }
 
+/**
+ * Check localStorage for existing consent for a category
+ * @private
+ */
+function _hasConsentFor(category) {
+  if (typeof localStorage === 'undefined') return false
+  try {
+    const stored = localStorage.getItem('cookie_consent')
+    if (!stored) return false
+    const consent = JSON.parse(stored)
+    return consent?.categories?.[category] === true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Legacy alias
+ * @param {Object} categories - { analytics: true, marketing: false }
+ */
+export function manageScriptBlocking(categories = {}) {
+  unblockConsentedScripts(categories)
+}
+
 /**
  * Create analytics manager that auto-integrates with cookie consent
  * @param {Object} config - { ga4: 'G-XXX', gtm: 'GTM-XXX', metaPixel: 'XXX', yandexMetrica: 'XXX' }
@@ -160,6 +248,9 @@ export function createAnalyticsManager(config = {}) {
     if (initialized) return
     initialized = true
 
+    // Block scripts before consent
+    blockScriptsBeforeConsent()
+
     // Always init Google Consent Mode first (denied by default)
     initGoogleConsentMode()
 
@@ -181,8 +272,8 @@ export function createAnalyticsManager(config = {}) {
       if (config.metaPixel) loadMetaPixel(config.metaPixel)
     }
 
-    // Manage script blocking
-    manageScriptBlocking(categories)
+    // Unblock scripts for consented categories
+    unblockConsentedScripts(categories)
   }
 
   const connectToCookieConsent = () => {

package/src/core/index.js

@@ -32,7 +32,7 @@ const DEFAULT_CONFIG = {
       label: 'Necesare',
       description: 'Cookie-uri esențiale pentru funcționarea site-ului',
       required: true,
-      locked: true,
+      disabled: true,
       enabled: true
     },
     analytics: {
@@ -40,24 +40,24 @@ const DEFAULT_CONFIG = {
       label: 'Analiză',
       description: 'Cookie-uri pentru analiza traficului și comportamentului utilizatorilor',
       required: false,
-      locked: false,
-      enabled: true
+      disabled: false,
+      enabled: false
     },
     marketing: {
       id: 'marketing',
       label: 'Marketing',
       description: 'Cookie-uri pentru publicitate personalizată',
       required: false,
-      locked: false,
-      enabled: true
+      disabled: false,
+      enabled: false
     },
     preferences: {
       id: 'preferences',
       label: 'Preferințe',
       description: 'Cookie-uri pentru salvarea preferințelor utilizatorului',
       required: false,
-      locked: false,
-      enabled: true
+      disabled: false,
+      enabled: false
     }
   },
   

package/src/index.js

@@ -9,7 +9,7 @@
 export { createCookieKit, CookieKitCore, DEFAULT_CONFIG } from './core/index.js'
 
 // Analytics integration
-export { createAnalyticsManager, initGoogleConsentMode, updateGoogleConsent, loadGTM, loadGA4, loadMetaPixel, loadYandexMetrica, manageScriptBlocking } from './core/analytics.js'
+export { createAnalyticsManager, initGoogleConsentMode, updateGoogleConsent, loadGTM, loadGA4, loadMetaPixel, loadYandexMetrica, blockScriptsBeforeConsent, unblockConsentedScripts, manageScriptBlocking } from './core/analytics.js'
 
 // Import for default export
 import { createCookieKit, CookieKitCore, DEFAULT_CONFIG } from './core/index.js'

package/src/js/CookieConsent.js

@@ -386,7 +386,6 @@ class CookieConsent extends HTMLElement {
       /* Header */
       .cookie-drawer__header {
         padding: 24px 24px 16px;
-        border-bottom: 1px solid var(--ck-border);
         display: flex;
         justify-content: space-between;
         align-items: flex-start;

package/src/vue/CookieConsent.vue

@@ -206,7 +206,7 @@ const handleSelectTab = (tabId) => {
 
 const handleToggleCategory = (categoryId) => {
   const cat = mergedConfig.value.categories[categoryId]
-  if (cat && !cat.locked && !cat.required) {
+  if (cat && !cat.disabled && !cat.required) {
     categories.value[categoryId] = !categories.value[categoryId]
   }
 }

package/src/vue/CookieDrawer.vue

@@ -71,14 +71,14 @@
                       :id="`drawer-category-${category.id}`"
                       :checked="categories[category.id]"
                       @change="toggleCategory(category.id)"
-                      :disabled="category.locked"
+                      :disabled="category.disabled"
                       class="cookie-drawer__toggle-input"
                     />
                     <label
                       :for="`drawer-category-${category.id}`"
                       :class="[
                         'cookie-drawer__toggle-label',
-                        { 'cookie-drawer__toggle-label--disabled': category.locked }
+                        { 'cookie-drawer__toggle-label--disabled': category.disabled }
                       ]"
                     ></label>
                   </div>
@@ -154,14 +154,14 @@
                     :id="`settings-category-${currentTab}`"
                     :checked="categories[currentTab]"
                     @change="toggleCategory(currentTab)"
-                    :disabled="currentCategoryData.locked"
+                    :disabled="currentCategoryData.disabled"
                     class="cookie-drawer__toggle-input"
                   />
                   <label
                     :for="`settings-category-${currentTab}`"
                     :class="[
                       'cookie-drawer__toggle-label',
-                      { 'cookie-drawer__toggle-label--disabled': currentCategoryData.locked }
+                      { 'cookie-drawer__toggle-label--disabled': currentCategoryData.disabled }
                     ]"
                   ></label>
                 </div>