diff --git a/bin/Controls/backend/ExternalContent.html b/bin/Controls/backend/ExternalContent.html
new file mode 100644
index 0000000000000000000000000000000000000000..1977532d5a6e332fdd5c197c9c325cb6cffbb578
--- /dev/null
+++ b/bin/Controls/backend/ExternalContent.html
@@ -0,0 +1,71 @@
+<table class="data-table data-table-flexbox" style="margin-bottom: 0; border: none;">
+ <tbody>
+ <tr>
+ <td style="padding-inline: 0;">
+ <label class="field-container">
+ <span class="field-container-item">
+ {{typeTitle}}
+ </span>
+ <select name="externalContent-type" style="width: 100%;" data-ref="select">
+ <option value="text">{{typeOptionText}}</option>
+ <option value="iframe">{{typeOptionIFrame}}</option>
+ </select>
+ </label>
+ </td>
+ </tr>
+
+ <tr data-ref="variable-option" data-type="text">
+ <td style="padding-inline: 0;">
+ <label class="field-container">
+ <span class="field-container-item">
+ {{textTitle}}
+ </span>
+ <textarea name="externalContent-text" class="field-container-field field-description"
+ rows="12"></textarea>
+ </label>
+ </td>
+ </tr>
+
+ <tr data-ref="variable-option" data-type="iframe">
+ <td style="padding-inline: 0;">
+ <label class="field-container">
+ <span class="field-container-item">
+ {{urlTitle}}
+ </span>
+ <input name="externalContent-url" class="field-container-field field-title"/>
+ </label>
+ </td>
+ </tr>
+ <tr data-ref="variable-option" data-type="iframe">
+ <td style="padding-inline: 0;">
+ <label class="field-container">
+ <span class="field-container-item">
+ {{heightDesktopTitle}}
+ </span>
+ <input name="externalContent-height_desktop" class="field-container-field field-text"/>
+ </label>
+ </td>
+ </tr>
+ <tr data-ref="variable-option" data-type="iframe">
+ <td style="padding-top: 0; padding-inline: 0">
+ <div class="description"> {{{heightDesktopDesc}}}</div>
+ </td>
+ </tr>
+ <tr data-ref="variable-option" data-type="iframe">
+ <td style="padding-inline: 0;">
+ <label class="field-container">
+ <div class="field-container-item">
+ {{heightMobileTitle}}
+
+ </div>
+ <input name="externalContent-height_mobile" class="field-container-field field-text"/>
+ </label>
+ </td>
+ </tr>
+ <tr data-ref="variable-option" data-type="iframe">
+ <td style="padding-top: 0; padding-inline: 0">
+ <div class="description"> {{{heightMobileDesc}}}</div>
+ </td>
+ </tr>
+ </tbody>
+</table>
diff --git a/bin/Controls/backend/ExternalContent.js b/bin/Controls/backend/ExternalContent.js
new file mode 100644
index 0000000000000000000000000000000000000000..446e6aa29ac0073e8a18fcf7de1797f67e0980ab
--- /dev/null
+++ b/bin/Controls/backend/ExternalContent.js
@@ -0,0 +1,167 @@
+/**
+ *
+ * @module package/quiqqer/sitetypes/bin/Controls/backend/ExternalContent
+ * @author Michael Danielczok
+ *
+ */
+
+define('package/quiqqer/sitetypes/bin/Controls/backend/ExternalContent', [
+
+ 'qui/controls/Control',
+ 'Locale',
+ 'Mustache',
+
+ 'text!package/quiqqer/sitetypes/bin/Controls/backend/ExternalContent.html',
+
+], function(
+ QUIControl,
+ QUILocale,
+ Mustache,
+ template
+) {
+ 'use strict';
+
+ const lg = 'quiqqer/sitetypes';
+
+ return new Class({
+
+ Extends: QUIControl,
+ Type: 'package/quiqqer/sitetypes/bin/Controls/backend/ExternalContent',
+
+ Binds: [
+ '$onImport'
+ ],
+
+ initialize: function(options) {
+ this.parent(options);
+
+ this.Select = null;
+ this.variableOptionsNode = null; // NodeList of <tr> elements
+ this.data = {};
+
+ this.addEvents({
+ onImport: this.$onImport
+ });
+ },
+
+ /**
+ * event: on import
+ */
+ $onImport: function() {
+ this.$Input = this.getElm();
+
+ this.$loadDataFromInput();
+ this.$renderLayout();
+
+ this.Select.addEventListener('change', (e) => {
+ this.selectedType = e.target.value;
+ this.toggleVariableOption();
+ });
+
+ this.$setValuesToInputs();
+
+ this.variableOptionsNode = this.$Elm.querySelectorAll('[data-ref="variable-option"]');
+
+ this.toggleVariableOption();
+ },
+
+ /**
+ * Loads data from the hidden input field.
+ */
+ $loadDataFromInput: function () {
+ const jsonData = this.$Input.get('value');
+
+ if (jsonData) {
+ try {
+ this.data = JSON.parse(jsonData);
+ } catch (e) {
+ this.data = {};
+ console.warn('Invalid JSON in ExternalContent input:', e);
+ }
+ } else {
+ this.data = {};
+ }
+ },
+
+ /**
+ * Generates the HTML structure of the component.
+ */
+ $renderLayout: function () {
+ this.$Elm = new Element('div', {
+ 'class': 'quiqqer-sitetypes-backend-settings-externalContent',
+ styles: {
+ width: '100%'
+ }
+ }).wraps(this.$Input);
+
+ const prefix = 'sitetypes.externalContent.settings.';
+ const texts = {
+ typeTitle: QUILocale.get(lg, prefix + 'type.title'),
+ typeOptionText: QUILocale.get(lg, prefix + 'type.option.text'),
+ typeOptionIFrame: QUILocale.get(lg, prefix + 'type.option.iframe'),
+ textTitle: QUILocale.get(lg, prefix + 'text.title'),
+ urlTitle: QUILocale.get(lg, prefix + 'url.title'),
+ heightDesktopTitle: QUILocale.get(lg, prefix + 'heightDesktop.title'),
+ heightDesktopDesc: QUILocale.get(lg, prefix + 'heightDesktop.desc'),
+ heightMobileTitle: QUILocale.get(lg, prefix + 'heightMobile.title'),
+ heightMobileDesc: QUILocale.get(lg, prefix + 'heightMobile.desc'),
+ };
+
+ new Element('div', {
+ html: Mustache.render(template, texts)
+ }).inject(this.$Elm);
+
+ this.Select = this.$Elm.querySelector('[data-ref="select"]');
+ this.selectedType = 'text';
+ },
+
+ /**
+ * Sets the values of the input fields, selects and textareas based on the current data.
+ */
+ $setValuesToInputs: function () {
+ const inputs = this.$Elm.getElements('input, select, textarea');
+
+ inputs.each((input) => {
+ input.addEventListener('blur', this.onInputBlur.bind(this));
+
+ const name = input.getAttribute('name');
+ const value = this.data[name];
+
+ if (!value) return;
+
+ if (input.type === 'select-one') {
+ input.value = value;
+ this.selectedType = value;
+ } else {
+ input.set('value', value);
+ }
+ });
+ },
+
+ /**
+ * Toggles the visibility of variable options based on the selected type.
+ */
+ toggleVariableOption: function() {
+ this.variableOptionsNode.forEach((Node) => {
+ if (Node.getAttribute('data-type') === this.selectedType) {
+ Node.style.display = null;
+ } else {
+ Node.style.display = 'none';
+ }
+ });
+ },
+
+ /**
+ * Handles the blur event of input fields, selects and textareas.
+ * Updates the data object with the new value and sets the hidden input field.
+ *
+ * @param {Event} event - The blur event object.
+ */
+ onInputBlur: function(event) {
+ const input = event.target;
+ this.data[input.getAttribute('name')] = input.get('value');
+ const jsonData = JSON.stringify(this.data);
+ this.$Input.set('value', jsonData);
+ }
+ });
+});
diff --git a/locale.xml b/locale.xml
index 4c3b4ef8100405064b87985572342dfa56090489..2684f2b12b00205b6fb8f5644ce7b03006815769 100644
--- a/locale.xml
+++ b/locale.xml
@@ -34,13 +34,13 @@
Haben Sie z.B Ihre Community auf einer externen Webseite, leiten Sie den Nutzer von Ihrer Weiterleitungs-Seite "Community" auf die externe Seite um.]]></de>
<en><![CDATA[]]></en>
</locale>
- <locale name="admin.types.iframe">
- <de><![CDATA[iFrame]]></de>
- <en><![CDATA[iFrame]]></en>
+ <locale name="admin.types.externalContent">
+ <de><![CDATA[Externer Inhalt]]></de>
+ <en><![CDATA[External content]]></en>
</locale>
- <locale name="admin.types.iframe.description">
- <de><![CDATA[Ein iFrame-Seitentyp ermöglicht es, eine externe Webseite oder ein anderes HTML-Dokument innerhalb einer eigenen Webseite zu laden und anzuzeigen.]]></de>
- <en><![CDATA[A page type of iFrame allows you to load and display an external website or another HTML document within your own website.]]></en>
+ <locale name="admin.types.externalContent.description">
+ <de><![CDATA[Der Seitentyp ermöglicht es, eine externe Webseite oder ein anderes HTML-Dokument innerhalb einer eigenen Webseite zu laden und anzuzeigen.]]></de>
+ <en><![CDATA[This site type allows you to load and display an external website or another HTML document within your own website.]]></en>
</locale>
<locale name="quiqqer/sitetypes:types/list.title">
<de><![CDATA[Standard-Liste]]></de>
@@ -127,6 +127,47 @@
The page type automatically serves the QUIQQER system to access the content of this type and display it in a suitable place.
]]></en>
</locale>
+
+ <locale name="sitetypes.externalContent.settings.title">
+ <de><![CDATA[Externer Inhalt]]></de>
+ <en><![CDATA[External content]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.type.title">
+ <de><![CDATA[Externer Inhalt Typ]]></de>
+ <en><![CDATA[External content type]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.type.option.text">
+ <de><![CDATA[Text Eingabe]]></de>
+ <en><![CDATA[Text input]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.type.option.iframe">
+ <de><![CDATA[iFrame]]></de>
+ <en><![CDATA[iFrame]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.text.title">
+ <de><![CDATA[Externer Inhalt]]></de>
+ <en><![CDATA[External content]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.url.title">
+ <de><![CDATA[Link]]></de>
+ <en><![CDATA[Url]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.heightDesktop.title">
+ <de><![CDATA[Höhe des iFrames]]></de>
+ <en><![CDATA[Height of iFrame]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.heightDesktop.desc">
+ <de><![CDATA[Erlaubt sind alle valide CSS Werte, z.B. 250px, 100%, 50vh, etc. Wert ohne Einheit wird als Pixel interpretiert.]]></de>
+ <en><![CDATA[Allowed are all valid CSS values, e.g. 250px, 100%, 50vh, etc. Values without a unit are interpreted as pixels.]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.heightMobile.title">
+ <de><![CDATA[Höhe des iFrames (auf mobilen Geräten)]]></de>
+ <en><![CDATA[Height of iFrame (on mobile devices)]]></en>
+ </locale>
+ <locale name="sitetypes.externalContent.settings.heightMobile.desc">
+ <de><![CDATA[Erlaubt sind alle valide CSS Werte, z.B. 250px, 100%, 50vh, etc. Wert ohne Einheit wird als Pixel interpretiert.<br>Diese Einstellung ist optional. Wird kein Wert eingetragen, wird die Desktop-Einstellung verwendet.]]></de>
+ <en><![CDATA[Allowed are all valid CSS values, e.g. 250px, 100%, 50vh, etc. Values without a unit are interpreted as pixels.<br>This setting is optional. If no value is entered, the desktop setting is used.]]></en>
+ </locale>
</groups>
<groups name="quiqqer/sitetypes" datatype="php">
<locale name="quiqqer.sitetypes.privacypolicy.settings.title">
@@ -392,32 +433,6 @@
<en><![CDATA[Target page]]></en>
</locale>
-
- <locale name="sitetypes.iframe.settings.title">
- <de><![CDATA[iFrame]]></de>
- <en><![CDATA[iFrame]]></en>
- </locale>
- <locale name="sitetypes.iframe.settings.url">
- <de><![CDATA[Link]]></de>
- <en><![CDATA[Url]]></en>
- </locale>
- <locale name="sitetypes.iframe.settings.height.desktop">
- <de><![CDATA[Höhe des iFrames]]></de>
- <en><![CDATA[Height of iFrame]]></en>
- </locale>
- <locale name="sitetypes.iframe.settings.height.desktop.desc">
- <de><![CDATA[Erlaubt sind alle valide CSS Werte, z.B. 250px, 100%, 50vh, etc. Wert ohne Einheit wird als Pixel interpretiert.]]></de>
- <en><![CDATA[Allowed are all valid CSS values, e.g. 250px, 100%, 50vh, etc. Values without a unit are interpreted as pixels.]]></en>
- </locale>
- <locale name="sitetypes.iframe.settings.height.mobile">
- <de><![CDATA[Höhe des iFrames (auf mobilen Geräten)]]></de>
- <en><![CDATA[Height of iFrame (on mobile devices)]]></en>
- </locale>
- <locale name="sitetypes.iframe.settings.height.mobile.desc">
- <de><![CDATA[Erlaubt sind alle valide CSS Werte, z.B. 250px, 100%, 50vh, etc. Wert ohne Einheit wird als Pixel interpretiert.<br>Diese Einstellung ist optional. Wird kein Wert eingetragen, wird die Desktop-Einstellung verwendet.]]></de>
- <en><![CDATA[Allowed are all valid CSS values, e.g. 250px, 100%, 50vh, etc. Values without a unit are interpreted as pixels.<br>This setting is optional. If no value is entered, the desktop setting is used.]]></en>
- </locale>
-
<locale name="tpl.search.no.results">
<de><![CDATA[Keine Ergebnisse gefunden. Bitte nutzen Sie einen anderen Suchbegriff.]]></de>
<en><![CDATA[No results found. Please use a different search.]]></en>
diff --git a/site.xml b/site.xml
index f333a5d06ee868ee967cb323bf69a69d21cf172b..493d0ebb2fd0b09f1d017c9d3fc2f2e624e77e97 100644
--- a/site.xml
+++ b/site.xml
@@ -260,59 +260,32 @@
</settings>
</type>
- <!-- iframe -->
- <type type="types/iframe" icon="fa-solid fa-laptop-code">
- <locale group="quiqqer/sitetypes" var="admin.types.iframe"/>
+ <!-- externalContent (ifrmae) -->
+ <type type="types/externalContent" icon="fa-solid fa-laptop-code">
+ <locale group="quiqqer/sitetypes" var="admin.types.externalContent"/>
<desc>
- <locale group="quiqqer/sitetypes" var="admin.types.iframe.desc"/>
+ <locale group="quiqqer/sitetypes" var="admin.types.externalContent.desc"/>
</desc>
<attributes>
- <attribute>quiqqer.settings.sitetypes.iframe.url</attribute>
- <attribute>quiqqer.settings.sitetypes.iframe.height.desktop</attribute>
- <attribute>quiqqer.settings.sitetypes.iframe.height.mobile</attribute>
+ <attribute>quiqqer.settings.sitetypes.externalContent.settings</attribute>
</attributes>
<settings>
- <category name="sitetypes-iframe-settings">
+ <category name="sitetypes-externalContent-settings">
<settings>
<title>
<locale group="quiqqer/sitetypes"
- var="sitetypes.iframe.settings.title"
+ var="sitetypes.externalContent.settings.title"
/>
</title>
- <input conf="quiqqer.settings.sitetypes.iframe.url">
- <text>
- <locale group="quiqqer/sitetypes"
- var="sitetypes.iframe.settings.url"
- />
- </text>
- </input>
- <input conf="quiqqer.settings.sitetypes.iframe.height.desktop">
- <text>
- <locale group="quiqqer/sitetypes"
- var="sitetypes.iframe.settings.height.desktop"
- />
- </text>
- <description>
- <locale group="quiqqer/sitetypes"
- var="sitetypes.iframe.settings.height.desktop.desc"
- />
- </description>
- </input>
- <input conf="quiqqer.settings.sitetypes.iframe.height.mobile">
- <text>
- <locale group="quiqqer/sitetypes"
- var="sitetypes.iframe.settings.height.mobile"
- />
- </text>
- <description>
- <locale group="quiqqer/sitetypes"
- var="sitetypes.iframe.settings.height.mobile.desc"
- />
- </description>
+ <input conf="quiqqer.settings.sitetypes.externalContent.settings" type="hidden"
+ data-qui="package/quiqqer/sitetypes/bin/Controls/backend/ExternalContent"
+ >
+
</input>
+
</settings>
</category>
</settings>
diff --git a/src/QUI/Controls/ExternalContent.css b/src/QUI/Controls/ExternalContent.css
new file mode 100644
index 0000000000000000000000000000000000000000..8a2fed73a907d460ddf7bcc30e6a7c4475f2e077
--- /dev/null
+++ b/src/QUI/Controls/ExternalContent.css
@@ -0,0 +1,25 @@
+.quiqqer-sitetypes-controls-externalContent {
+ --_qui-sitetypes-controls-externalContent-contentText-height: var(--qui-sitetypes-controls-externalContent-contentText-height, auto);
+}
+
+/* text */
+.quiqqer-sitetypes-controls-externalContent__contentText {
+ height: var(--_qui-sitetypes-controls-externalContent-contentText-height);
+}
+
+/* iframe */
+.quiqqer-sitetypes-externalContent__iframe {
+ display: block;
+ border: none;
+ height: var(--_qui-sitetypes-controls-externalContent-iframe-height--desktop);
+ width: var(--_qui-sitetypes-controls-externalContent-iframe-width);
+ max-width: 100%;
+ margin-inline: auto;
+}
+
+@media screen and (max-width: 767px) {
+
+ .quiqqer-sitetypes-externalContent__iframe {
+ height: var(--_qui-sitetypes-controls-externalContent-iframe-height--mobile);
+ }
+}
\ No newline at end of file
diff --git a/src/QUI/Controls/ExternalContent.html b/src/QUI/Controls/ExternalContent.html
new file mode 100644
index 0000000000000000000000000000000000000000..a32c565497bcea202e05dd9f67891f201aa2445d
--- /dev/null
+++ b/src/QUI/Controls/ExternalContent.html
@@ -0,0 +1,21 @@
+{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+ <header class="control-header">
+ <h1>{$this->getAttribute('frontendTitle')}</h1>
+ </header>
+{/if}
+
+{if $this->getAttribute('content') != ""}
+ <div class="control-content">
+ {$this->getAttribute('content')}
+ </div>
+{/if}
+
+<div class="control-template quiqqer-sitetypes-controls-externalContent-controlWrapper">
+ {if $type === 'text' && $externalContentText}
+ <div class="quiqqer-sitetypes-controls-externalContent__contentText">
+ {$externalContentText}
+ </div>
+ {elseif $iframeUrl}
+ <iframe src="{$iframeUrl}" class="quiqqer-sitetypes-externalContent__iframe"></iframe>
+ {/if}
+</div>
\ No newline at end of file
diff --git a/src/QUI/Controls/InlineFrame.php b/src/QUI/Controls/ExternalContent.php
similarity index 56%
rename from src/QUI/Controls/InlineFrame.php
rename to src/QUI/Controls/ExternalContent.php
index 8b62a301ac09ea96ca24f99dc361631ab6c0d52a..f75d7b400fe7742e2e7ba7feec14c6634fef7c0e 100644
--- a/src/QUI/Controls/InlineFrame.php
+++ b/src/QUI/Controls/ExternalContent.php
@@ -1,7 +1,7 @@
<?php
/**
- * This file contains QUI\Controls\InlineFrame
+ * This file contains QUI\Controls\ExternalContent
*/
namespace QUI\Controls;
@@ -17,11 +17,11 @@
use function is_array;
/**
- * Class InlineFrame
+ * Class ExternalContent
*
* @package quiqqer/sitetypes
*/
-class InlineFrame extends QUI\Control
+class ExternalContent extends QUI\Control
{
/**
* constructor
@@ -32,8 +32,10 @@ public function __construct(array $attributes = [])
{
// default options
$this->setAttributes([
- 'class' => 'quiqqer-sitetypes-controls-inlineframe',
- 'url' => '',
+ 'class' => 'quiqqer-sitetypes-controls-externalContent',
+ 'externalContentType' => 'text', // 'text' or 'iframe'
+ 'externalContentText' => '', // it may by script tag and / or HTML Node <div>
+ 'iframeUrl' => '',
'iFrameHeightDesktop' => 400,
'iFrameHeightMobile' => '',
'iFrameWidth' => '100%'
@@ -41,7 +43,7 @@ public function __construct(array $attributes = [])
parent::__construct($attributes);
- $this->addCSSFile(dirname(__FILE__) . '/InlineFrame.css');
+ $this->addCSSFile(dirname(__FILE__) . '/ExternalContent.css');
$this->setAttribute('cacheable', 0);
}
@@ -59,7 +61,13 @@ public function getBody(): string
{
$Engine = QUI::getTemplateManager()->getEngine();
- if (!$this->getAttribute('url')) {
+ $type = $this->getAttribute('externalContentType');
+ $externalContentText = $this->getAttribute('externalContentText');
+ $iframeUrl = $this->getAttribute('iframeUrl');
+
+ if (!$externalContentText && !$iframeUrl) {
+ QUI\System\Log::addWarning('QUI\Controls\ExternalContent: nor externalContentText or iframeUrl found.');
+
return '';
}
@@ -71,13 +79,16 @@ public function getBody(): string
$heightMobile = $heightDesktop;
}
- $this->setCustomVariable('height--desktop', $this->getValue($heightDesktop));
- $this->setCustomVariable('height--mobile', $this->getValue($heightMobile));
- $this->setCustomVariable('width', $this->getValue($width));
+ $this->setCustomVariable('iframe-height--desktop', $this->getValue($heightDesktop));
+ $this->setCustomVariable('iframe-height--mobile', $this->getValue($heightMobile));
+ $this->setCustomVariable('iframe-width', $this->getValue($width));
+ $this->setCustomVariable('iframe-width', $this->getValue($width));
$Engine->assign([
'this' => $this,
- 'url' => $this->getAttribute('url')
+ 'type' => $type,
+ 'externalContentText' => $externalContentText,
+ 'iframeUrl' => $iframeUrl
]);
return $Engine->fetch($this->getTemplateFile());
@@ -104,10 +115,10 @@ protected function getValue($value): string
/**
* Set custom css variable to the control as inline style
- * --_qui-sitetypes-controls-inlineFrame-$name: var(--qui-sitetypes-controls-inlineFrame-$name, $value);
+ * --_qui-sitetypes-controls-externalContent-$name: var(--qui-sitetypes-controls-externalContent-$name, $value);
*
* Example:
- * --_qui-sitetypes-controls-inlineFrame-iFrameHeight--desktop: var(--qui-sitetypes-controls-inlineFrame-iFrameHeight--desktop, '50vh');
+ * --_qui-sitetypes-controls-externalContent-iFrameHeight--desktop: var(--qui-sitetypes-controls-externalContent-iFrameHeight--desktop, '50vh');
*
* @param string $name
* @param string $value
@@ -121,8 +132,8 @@ private function setCustomVariable(string $name, string $value): void
}
$this->setStyle(
- '--_qui-sitetypes-controls-inlineFrame-' . $name,
- 'var(--qui-sitetypes-controls-inlineFrame-' . $name . ', ' . $value . ')'
+ '--_qui-sitetypes-controls-externalContent-' . $name,
+ 'var(--qui-sitetypes-controls-externalContent-' . $name . ', ' . $value . ')'
);
}
}
diff --git a/src/QUI/Controls/InlineFrame.css b/src/QUI/Controls/InlineFrame.css
deleted file mode 100644
index 9a76b33df4e68863bdb063a3bd7d58292f28065e..0000000000000000000000000000000000000000
--- a/src/QUI/Controls/InlineFrame.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.quiqqer-sitetypes-inlineframe__iframe {
- display: block;
- border: none;
- height: var(--_qui-sitetypes-controls-inlineFrame-height--desktop);
- width: var(--_qui-sitetypes-controls-inlineFrame-width);
- max-width: 100%;
- margin-inline: auto;
-}
-
-@media screen and (max-width: 767px) {
- .quiqqer-sitetypes-inlineframe__iframe {
- height: var(--_qui-sitetypes-controls-inlineFrame-height--mobile);
- }
-}
\ No newline at end of file
diff --git a/src/QUI/Controls/InlineFrame.html b/src/QUI/Controls/InlineFrame.html
deleted file mode 100644
index 6f0ef24c2013536e6fd069048fe7e929b14b6ba2..0000000000000000000000000000000000000000
--- a/src/QUI/Controls/InlineFrame.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
- <header class="control-header">
- <h1>{$this->getAttribute('frontendTitle')}</h1>
- </header>
-{/if}
-
-{if $this->getAttribute('content') != ""}
- <div class="control-content">
- {$this->getAttribute('content')}
- </div>
-{/if}
-
-<div class="control-template quiqqer-sitetypes-controls-inlineframe-controlWrapper">
- <iframe src="{$url}" class="quiqqer-sitetypes-inlineframe__iframe"></iframe>
-</div>
\ No newline at end of file
diff --git a/types/iframe.html b/types/externalContent.html
similarity index 89%
rename from types/iframe.html
rename to types/externalContent.html
index a34dbc363d9460f9c65c77e2482b5da5cd1a5ff7..95df18ff6d7c3631d05912298924dda38c9298da 100644
--- a/types/iframe.html
+++ b/types/externalContent.html
@@ -5,5 +5,5 @@
{/if}
<section class="content-template">
- {$InlineFrame->create()}
+ {$ExternalContent->create()}
</section>
\ No newline at end of file
diff --git a/types/externalContent.php b/types/externalContent.php
new file mode 100644
index 0000000000000000000000000000000000000000..2b2b57fcb52c5d5305668344faf4dc0fc5e8aba5
--- /dev/null
+++ b/types/externalContent.php
@@ -0,0 +1,41 @@
+<?php
+
+/**
+ * This file contains the iframe site type
+ *
+ * @var QUI\Projects\Project $Project
+ * @var QUI\Projects\Site $Site
+ * @var QUI\Interfaces\Template\EngineInterface $Engine
+ * @var QUI\Template $Template
+ **/
+
+
+$settingsRaw = $Site->getAttribute('quiqqer.settings.sitetypes.externalContent.settings');
+
+if (!$settingsRaw || !is_string($settingsRaw)) {
+ QUI\System\Log::addWarning('ExternalContent: No settings found or settings are not a valid string.');
+
+ return;
+}
+
+$settings = json_decode($settingsRaw, true);
+
+if (json_last_error() !== JSON_ERROR_NONE || !is_array($settings)) {
+ QUI\System\Log::addWarning(
+ 'Site type external content: Failed to decode settings – JSON error: ' . json_last_error_msg()
+ );
+
+ return;
+}
+
+$ExternalContent = new QUI\Controls\ExternalContent([
+ 'externalContentType' => $settings['externalContent-type'] ?? 'text',
+ 'externalContentText' => $settings['externalContent-text'] ?? '',
+ 'iframeUrl' => $settings['externalContent-url'] ?? '',
+ 'iFrameHeightDesktop' => $settings['externalContent-height_desktop'] ?? null,
+ 'iFrameHeightMobile' => $settings['externalContent-height_mobile'] ?? null
+]);
+
+$Engine->assign([
+ 'ExternalContent' => $ExternalContent
+]);
diff --git a/types/iframe.php b/types/iframe.php
deleted file mode 100644
index 638fb803572b7c9660f1ee5e6f14f46872c7ea4b..0000000000000000000000000000000000000000
--- a/types/iframe.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-
-/**
- * This file contains the iframe site type
- *
- * @var QUI\Projects\Project $Project
- * @var QUI\Projects\Site $Site
- * @var QUI\Interfaces\Template\EngineInterface $Engine
- * @var QUI\Template $Template
- **/
-
-$InlineFrame = new QUI\Controls\InlineFrame([
- 'url' => $Site->getAttribute('quiqqer.settings.sitetypes.iframe.url'),
- 'iFrameHeightDesktop' => $Site->getAttribute('quiqqer.settings.sitetypes.iframe.height.desktop'),
- 'iFrameHeightMobile' => $Site->getAttribute('quiqqer.settings.sitetypes.iframe.height.mobile'),
-]);
-
-$Engine->assign([
- 'InlineFrame' => $InlineFrame
-]);