From 5c78640d8173f65a3a7dc9cfa171a8a05a3f28c6 Mon Sep 17 00:00:00 2001
From: Enzo Volkmann <enzo@volkmann.dev>
Date: Sat, 1 Jun 2024 13:43:21 +0200
Subject: [PATCH] add attribute values also as css variables

---
 index.js     | 2 +-
 src/index.js | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index bcded9e..b1aa5b4 100644
--- a/index.js
+++ b/index.js
@@ -1 +1 @@
-(function(){"use strict";const o="volkmann-design-code/kirby-layout-attributes";window[o]=window[o]??{},window[o].functions=window[o].functions??{},window[o].functions.isLayoutField=n=>Array.isArray(n)&&n.length>0&&n.every(t=>"attrs"in t&&"columns"in t&&"id"in t&&typeof t.attrs=="object"&&Array.isArray(t.columns)),window[o].functions.addLayoutAttrs=n=>{const t=n.columns[0].id;let a=document.querySelector(`.k-layout:has(.k-layout-column[id="${t}"])`);if(!a)return;const e=Object.keys(n.attrs);for(const i of e){const s=n.attrs[i];a.setAttribute(`data-attr-${i}`,s)}},window.panel.plugin("volkmann-design-code/kirby-layout-attributes",{created(n){n.$store.subscribeAction({after:(t,a)=>{var e;if(t.type==="content/create"&&setTimeout(()=>{for(const i in t.payload.content){const s=t.payload.content[i];if(window[o].functions.isLayoutField(s))for(const u of s)window[o].functions.addLayoutAttrs(u)}},100),t.type==="content/update"){const i=(e=t.payload)==null?void 0:e[1];if(window[o].functions.isLayoutField(i))for(const s of i)window[o].functions.addLayoutAttrs(s)}}})}})})();
+(function(){"use strict";const o="volkmann-design-code/kirby-layout-attributes";window[o]=window[o]??{},window[o].functions=window[o].functions??{},window[o].functions.isLayoutField=n=>Array.isArray(n)&&n.length>0&&n.every(t=>"attrs"in t&&"columns"in t&&"id"in t&&typeof t.attrs=="object"&&Array.isArray(t.columns)),window[o].functions.addLayoutAttrs=n=>{const t=n.columns[0].id;let e=document.querySelector(`.k-layout:has(.k-layout-column[id="${t}"])`);if(!e)return;const a=Object.keys(n.attrs);for(const s of a){const i=n.attrs[s];e.setAttribute(`data-attr-${s}`,i),e.style.setProperty(`--attr-${s}`,i)}},window.panel.plugin("volkmann-design-code/kirby-layout-attributes",{created(n){n.$store.subscribeAction({after:(t,e)=>{var a;if(t.type==="content/create"&&setTimeout(()=>{for(const s in t.payload.content){const i=t.payload.content[s];if(window[o].functions.isLayoutField(i))for(const u of i)window[o].functions.addLayoutAttrs(u)}},100),t.type==="content/update"){const s=(a=t.payload)==null?void 0:a[1];if(window[o].functions.isLayoutField(s))for(const i of s)window[o].functions.addLayoutAttrs(i)}}})}})})();
diff --git a/src/index.js b/src/index.js
index 50ce67f..b4e42d2 100755
--- a/src/index.js
+++ b/src/index.js
@@ -18,6 +18,9 @@ window[pluginNamespace].functions.isLayoutField = (field) => {
 };
 window[pluginNamespace].functions.addLayoutAttrs = (layoutField) => {
   const columnId = layoutField.columns[0].id;
+  /**
+   * @type {HTMLElement} layoutEl
+   */
   let layoutEl = document.querySelector(
     `.k-layout:has(.k-layout-column[id="${columnId}"])`,
   );
@@ -30,6 +33,7 @@ window[pluginNamespace].functions.addLayoutAttrs = (layoutField) => {
   for (const key of attrKeys) {
     const val = layoutField.attrs[key];
     layoutEl.setAttribute(`data-attr-${key}`, val);
+    layoutEl.style.setProperty(`--attr-${key}`, val);
   }
 };