configItemModal

Standarduser · Jan 5, 2025 · a9eb1f8 · a9eb1f8
1 parent 1d76008
commit a9eb1f8
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -42,6 +42,11 @@ The widgets are designed for VIS 1.x.
 -->
 ### **WORK IN PROGRESS**
 
+Introducing CONFIG-ITEMS:
+These can be used for manupulating styles, which are fixed in VIS, e.g. modal style of dialog windows.
+Just put the config item somewhere in your VIS and configure as you want.
+
+Other changes:
 * Added HTML-Dialog
 * Made "modal" to default setting (modal darkens the background when a dialog window is open)
 * Section 'dialog' splitted into 'dialog settings' and 'dialog content'

diff --git a/widgets/vis-homekittiles.html b/widgets/vis-homekittiles.html
@@ -1520,4 +1520,32 @@
 			i++;
 		} %>
 	</div>
+</script>
+
+<script id="tplHomekittilesConfigItemModal"
+	type="text/ejs"
+	class="vis-tpl"
+	data-vis-set="vis-homekittiles"
+	data-vis-update-style="true"
+	data-vis-type="ctrl"
+	data-vis-name="hkt-Config-Modal"
+	data-vis-prev='<div id="prev_tplHomekittilesSettingsBool" style="position: relative;">
+						<div class="vis-widget_prev" style="width: 110px; height: 17px; font-size:10px; font-weight: normal;">
+							<div class="homekitTiles settings bool vis-widget-prev-body state-active">
+								<label class="label">Switch</label>
+								<div class="toggle"></div>
+							</div>
+						</div>
+					</div>'
+	data-vis-attrs="description/custom,vis-homekittiles.infoText,hktConfigItemModal;blur[3]/slider,0,20,1;brightness[0.3]/slider,0,1,0.01;"
+>
+	<div class="homekitTiles config-item config-modal vis-widget <%== this.data.attr('class') %>" style="width:170px; height:75px;" id="<%= this.data.attr('wid') %>">
+		<div class="vis-widget-body" <%= (el) -> vis.binds['vis-homekittiles'].configModal(el, data) %>>
+			<div>
+				<span>CONFIG-ITEM MODAL</span><br>
+				<span>Blur: <%= this.data.attr('blur') %></span><br>
+				<span>Brightness: <%= this.data.attr('brightness') %></span>
+			</div>
+		</div>
+	</div>
 </script>
diff --git a/widgets/vis-homekittiles/css/style.css b/widgets/vis-homekittiles/css/style.css
@@ -1590,4 +1590,13 @@
 	50%  { transform: scale(0.8); }
 	100% { transform: scale(1); }
 }
+/*#endregion*/
+/*----------------------------------------------------------------*/
+/*#region CONFIG-ITEMS */
+.homekitTiles.config-item {
+	border: 1px solid #666;
+	color: #666;
+	padding: 2px;
+	box-sizing: border-box;
+}
 /*#endregion*/
diff --git a/widgets/vis-homekittiles/js/vis-homekittiles.js b/widgets/vis-homekittiles/js/vis-homekittiles.js
@@ -36,13 +36,16 @@ $.extend(
 		"arrowsPulse":					{	"en": "Arrows pulsate",					"de": "Pfeile Pulsieren"					},
 		"auto":							{	"en": "automatic",						"de": "automatisch"							},
 		"autofillOids":					{	"en": "Autofill object IDs",			"de": "Objekt-IDs automatisch füllen"		},
+		"backgroundcolor":				{	"en": "Background color",				"de": "Hintergrundfarbe"					},
 		"blockOperationIcon":			{	"en": "Icon if blocked",				"de": "Icon wenn gesperrt"					},
 		"blockOperationIconNotInEditor":{	"en": "Don't show icon in editor",		"de": "Icon im Editor nicht anzeigen"		},
 		"blockOperationIfTrue": 		{	"en": "Block operation if true",		"de": "Bedienung bei true sperren"			},
 		"blockOperationIfFalse":		{	"en": "Block operation if false",		"de": "Bedienung bei false sperren"			},
 		"blockOperationShowDisabled":	{	"en": "Show disabled",					"de": "Als deaktiviert anzeigen"			},
 		"blockOperationShowIcon":		{	"en": "Show icon if blocked",			"de": "Icon anzeigen wenn gesperrt"			},
 		"blockOperationUseDifferentOID":{	"en": "Use different OID",				"de": "Verwende andere OID"					},
+		"blur":							{	"en": "Blur",							"de": "Weichzeichner"						},
+		"brightness":					{	"en": "Brightness",						"de": "Helligkeit"							},
 		"buttonsAdd":					{	"en": "Add buttons",					"de": "Schaltflächen hinzufügen"			},
 		"closebuttonLabel":				{	"en": "Label close-button",				"de": "Beschriftung Schließen-Button"		},
 		"closeDialog_":					{	"en": "Close dialog ",					"de": "Dialog schließen "					},
@@ -73,7 +76,7 @@ $.extend(
 		"group_blockOperation":			{	"en": "Block operation",				"de": "Bedienung sperren"					},
 		"group_buttons":				{	"en": "Buttons",						"de": "Schaltflächen"						},
 		"group_column":					{	"en": "Columns",						"de": "Spalten"								},
-		"group_dialogButtons":			{	"en": "Dialog buttons",					"de": "Dialog-Schaltflächen"						},
+		"group_dialogButtons":			{	"en": "Dialog buttons",					"de": "Dialog-Schaltflächen"				},
 		"group_dialogContent":			{	"en": "Dialog content",					"de": "Dialog-Inhalt"						},
 		"group_dialogSettings":			{	"en": "Dialog settings",				"de": "Dialog-Einstellungen"				},
 		"group_increment":				{	"en": "Increment value",				"de": "Wert inkrementieren"					},
@@ -175,6 +178,7 @@ $.extend(
 		"oidSignal":					{	"en": "Object ID",						"de": "Objekt-ID"							},
 		"oidUnreach":					{	"en": "Object ID for unreach",			"de": "Objekt-ID für nicht Erreichbar"		},
 		"oidWindowState":				{	"en": "Object ID for window contact",	"de": "Objekt-ID für Fensterkontakt"		},
+		"opacity":						{	"en": "Opacity",						"de": "Transparenz"							},
 		"ownseparation":				{	"en": "own separation",					"de": "Eigene Aufteilung"					},
 		"scrollable":					{	"en": "Scrollable",						"de": "Scrollbar"							},
 		"separationselect":				{	"en": "Separation of buttons",			"de": "Aufteilung der Buttons"				},
@@ -245,6 +249,10 @@ $.extend(
 			"en": "This widget creates a set of buttons to navigate with a View-in-Widget8.",
 			"de": "Das Widget erzeugt eine einstellbare Anzahl an Buttons für die Navigation mit einem View-in-Widget8."
 		},
+		"hktConfigItemModalDescription": {
+			"en": "CONFIG-ITEM MODAL<br>This widget can be used to change the appearance of Modal. Modal darkens the background when a dialog window is opened.<br>The widget can be placed anywhere within the VIS, it is only visible in the editor.",
+			"de": "CONFIG-ITEM MODAL<br>Mit diesem Widget kann das Aussehen von Modal verändert werden. Modal dunkelt den Hintergrund ab, wenn ein Dialog-Fenster geöffnet wird.<br>Das Widget kann an einem beliebigen Ort innerhalb der VIS platziert werden, es ist nur im Editor sichtbar."
+		},
 		"hktDatepickerDescription": {
 			"en": "A Widget to pick a date.",
 			"de": "Widget zur Auswahl eines Datums."
@@ -335,6 +343,7 @@ vis.binds["vis-homekittiles"] = {
 		else if (data[1] === "hktButtonSet")					{ text = "hktButtonSetDescription";						}
 		else if (data[1] === "hktButtonSetNavigation")			{ text = "hktButtonSetNavigationDescription";			}
 		else if (data[1] === "hktButtonSetNavigationSubmenu")	{ text = "hktButtonSetNavigationSubmenuDescription";	}
+		else if (data[1] === "hktConfigItemModal")				{ text = "hktConfigItemModalDescription";				}
 		else if (data[1] === "hktDatepicker")					{ text = "hktDatepickerDescription";					}
 		else if (data[1] === "hktHtmlDialog")					{ text = "hktHtmlDialogDescription";					}
 		else if (data[1] === "hktJsonTable")					{ text = "hktJsonTableDescription";						}
@@ -1783,6 +1792,44 @@ vis.binds["vis-homekittiles"] = {
 		});}
 
 	},
+
+	//Config-items
+	configModal: function (el, data) {
+		var $this = $(el);
+		//var background = data.backgroundcolor;
+		//var opacity = data.opacity;
+		var blur = data.blur;
+		var brightness = data.brightness;
+
+		//make widget invisible in runtime
+		if (!vis.editMode) {
+			$this.parent().css('display', 'none');
+		}
+
+		/*
+		#vis_container:has(.homekitTiles.config-item) ~ .ui-widget-overlay {
+			background: unset;
+			opacity: unset;
+			backdrop-filter: blur(5px) brightness(0.5) hue-rotate(0deg);
+		}
+		*/
+		//set css code
+		//var css = `#vis_container:has(.homekitTiles.config-item) ~ .ui-widget-overlay {background: ${background}; opacity: ${opacity};}`;
+		var css = `#vis_container:has(.homekitTiles.config-item) ~ .ui-widget-overlay {background: unset; opacity: unset; backdrop-filter: blur(${blur}px) brightness(${brightness});}`;
+
+		//append css to head
+		var head = document.head || document.getElementsByTagName('head')[0];
+		var style = document.createElement('style');
+		head.appendChild(style);
+
+		style.type = 'text/css';
+		if (style.styleSheet){
+			// This is required for IE8 and below.
+			style.styleSheet.cssText = css;
+		} else {
+			style.appendChild(document.createTextNode(css));
+		}
+	},
 };
 
 vis.binds["vis-homekittiles"].showVersion();