Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- minasa-cms:widget [19.05.2026 11:46] – alex
+++ minasa-cms:widget [19.05.2026 11:55] (aktuell) – [HTML-Konfigurationsattribute] alex
@@ Zeile 11: / Zeile 11: @@
 Der Einbau in die eigene Webseite erfolgt durch Einbinden einer JavaScript-Bibliothek. Diese stellt die Widget-Component als HTML-Tag ''<minasa-widget></minasa-widget>'' zur Verfügung.
-–code–
+<file html>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Eigene Webseite</title>
+</head>
+<body>
+    <h1>Eigene Seite</h1>
+    <p>........</p>
+    <!-- hier steht nun eine WebComponent zur Verfügung, welche die Widget-Inhalte darstellt: -->
+    <minasa-widget
+        minasa-url="https://www.minasa-system.ch"
+        api-key="aswcsadf"
+        query-mode="next"
+    ></minasa-widget>
+    <!-- Laden der Widget-JavaScript-Library, am Ende des Body-Tags: -->
+    <script src="https://minasa-system.ch/widget/minasa-widget.js" type="module"></script>
+</body>
+</html>
+</file>
 Sie benötigen folgende Daten, damit Sie das Widget-System nutzen können:
@@ Zeile 20: / Zeile 42: @@
 ==== HTML-Konfigurationsattribute ====
-Die Web-Komponenten ''<minasa-widget>''  unterstützt folgende HTML-Attribute für die Konfiguration:
+Die Web-Komponenten ''<minasa-widget>'' unterstützt folgende HTML-Attribute für die Konfiguration:
 ^Attribut^Pflicht^Beispiel^Beschreibung|
-|''minasa-url'' |Ja| | |
+|''minasa-url'' |Ja|''minasa-url="https://www.minasa-system.ch"'' |Basis-URL des Minasa-Systems|
+|''api-key'' |Ja|''api-key="abcdefgh"'' |API-Key des Minasa-Systems|
+|''filter-organizer-ids'' |Nein|''filter-organizer-ids="1,2234,7"'' |Liste mit vorgefilterten Organizer-IDs: Es werden nur Events dieser Organizer angezeigt|
+|''filter-organizer-group-ids'' |Nein|''filter-organizer-group-ids="2,5,18"'' |Liste mit vorgefilterten Kulturverbund-IDs: Es werden nur Events dieser Kulturverbünde (= Organizer Groups) angezeigt|
+|''filter-dataprovider-uuids'' |Nein|''filter-dataprovider-uuids="0187dc91-4340-793f-8627-47938a4476c0"'' |Liste mit vorgefilterten Data Provider UUIDs: Es werden nur Events dieser Data Provider angezeigt|
+|''query-mode'' |Nein|''query-mode="next"'' |Zeigt alle Daten eines Events (''all'') oder nurdas nächste Datum (''next'') eines Events. Default: ''next'' |
+|''min-date'' |Nein|''min-date="2026-01-06"''_PARA__TABLE_INS_''min-date="yyyy-mm-dd"'' |In Kombination mit ''max-date'' beschränkt es den Datumsfilter auf mindestens dieses Datum ein|
+|''max-date'' |Nein|''max-date="2026-01-06"''_PARA__TABLE_INS_''max-date="yyyy-mm-dd"'' |In Kombination mit ''min-date'' beschränkt es den Datumsfilter auf maximum dieses Datum ein|
+|''with-tag-filter'' |Nein|''with-tag-filter="1,2,3"''_PARA__TABLE_INS_''with-tag-filter="[1,2,3]"''_PARA__TABLE_INS_''with-tag-filter'' |Schränkt das Dropdown auf die Tags ein die hier als Tag-Id’s konfiguriert worden sind._PARA__TABLE_INS_Wenn kein Tag-Id gesetzt wird oder alle Id’s ungültig sind, werden alle Tags in der Liste angezeigt.|
+Die entsprechenden IDs resp. UUIDs erhalten Sie vom technischen Support der jeweiligen Minasa-Instanz.
+**Beispiel einer Konfiguration:**
+<file html>
+    <minasa-widget
+        minasa-url="https://www.minasa-system.ch"
+        api-key="jjfufuzrue7647czhd74656"
+        query-mode="next"
+        filter-organizer-grup-ids="33,157"
+        min-date="2026-01-06"
+        max-date="2026-02-16"
+        with-tag-filter
+    ></minasa-widget>
+</file>
+==== Styling ====
+Das Widget ist als WebComponent implementiert und kann in geringem Masse mit CSS angepasst werden. Folgende CSS-Variablen stehen zur Verfügung. Sie müssen nur die Variablen definieren, welche Sie überschreiben wollen. Die hier gezeigten Werte sind die Vorgabewerte.
+<file css>
+minasa-widget {
+    /* Die primäre Farbe für Links, Rahmen etc: */
+    --mw-primary-color: #e3004f;
+    /* Hintergrundfarbe des gesamten Widgets:*/
+    --mw-background-color: transparent;
+    /* verwendete Textfarbe: */
+    --mw-text-color: black;
+    /* Kontrastfarbe für Text auf der Primärfarbe */
+    --mw-contrast-color: white;
+    /* verwendete Schriftart (Inter wird automatisch geladen / Gesetzt) */
+    --mw-font-family: Inter, sans-serif;
+    /* verwendete Schriftgrösse */
+    --mw-font-size: 12pt;
+    /* verwendete Standard-Zeilenhöhe für Lauftext */
+    --mw-line-height: 1.375rem;
+    /* Rahmenfarbe der Ergebnis-Kacheln */
+    --mw-border-color: #cfcfcf;
+    /* leicht abgeschwächter Text: */
+    --mw-faded-text-color: #8c8c8c;
+    /* Hintergrundfarbe der Ergebnis-Kacheln */
+    --mw-panel-background-color: #ffffff;
+    /* Hintergrundfarbe des Loading-Overlay */
+    --mw-loading-overlay-background-color: #8c8c8c;
+}
+</file>