diff --git a/Classes/Controller/PluginController.php b/Classes/Controller/PluginController.php index c0bc93935cc33ee7466168fff2734e1209c03b24..37867f40492b05c79ad25a547876374d5c018e98 100644 --- a/Classes/Controller/PluginController.php +++ b/Classes/Controller/PluginController.php @@ -29,6 +29,7 @@ use SGalinski\DfTabs\DataProvider\AbstractBaseDataProvider; use SGalinski\DfTabs\Domain\Repository\TabRepository; use SGalinski\DfTabs\Service\ConfigurationService; use SGalinski\DfTabs\View\TypoScriptView; +use SGalinski\DfTabs\View\FluidView; use TYPO3\CMS\Core\Page\PageRenderer; use TYPO3\CMS\Core\Utility\GeneralUtility; use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer; @@ -82,17 +83,25 @@ class PluginController extends AbstractPlugin { * Returns an instance of the renderer * * @param string $tabId - * @return TypoScriptView + * @return FluidView */ protected function getRenderer($tabId) { /** @var TypoScriptFrontendController $tsfe */ $tsfe = $GLOBALS['TSFE']; - /** @var $renderer TypoScriptView */ - $renderer = GeneralUtility::makeInstance(TypoScriptView::class); - $renderer->injectPluginConfiguration($this->pluginConfiguration, $tabId); - $renderer->injectPageRenderer(GeneralUtility::makeInstance(PageRenderer::class)); - $renderer->injectContentObject($this->cObj); + if ($this->pluginConfiguration['renderer'] === 'TypoScript' || !$this->pluginConfiguration['renderer']) { + /** @var $renderer TypoScriptView */ + $renderer = GeneralUtility::makeInstance(TypoScriptView::class); + $renderer->injectPluginConfiguration($this->pluginConfiguration, $tabId); + $renderer->injectPageRenderer(GeneralUtility::makeInstance(PageRenderer::class)); + $renderer->injectContentObject($this->cObj); + $repository = $this->getTabRepository(); + $records = $repository->getRecords(); + $renderer->addInlineJavaScriptCode($records, $this->pluginConfiguration['mode'], $tabId); + } else if ($this->pluginConfiguration['renderer'] === 'Fluid') { + /** @var $renderer FluidView */ + $renderer = GeneralUtility::makeInstance(FluidView::class); + } return $renderer; } @@ -149,7 +158,6 @@ class PluginController extends AbstractPlugin { $records = $repository->getRecords(); $tabElements = $repository->buildTabElements($this->pluginConfiguration['titles'] ?? [], $records); $content .= $renderer->renderTabs($tabElements, $tabId); - $renderer->addInlineJavaScriptCode($records, $this->pluginConfiguration['mode'], $tabId); } catch (\Exception $exception) { $content = $exception->getMessage(); diff --git a/Classes/Service/ConfigurationService.php b/Classes/Service/ConfigurationService.php index 4a58c1d67301f19f9ba23cc264530f4c1e0c3ff6..d43758adf5b10b17357f221f03b8a3b4dbaf3cd4 100644 --- a/Classes/Service/ConfigurationService.php +++ b/Classes/Service/ConfigurationService.php @@ -176,6 +176,11 @@ class ConfigurationService { $configuration['hashName'] = $value; } + $value = \trim($this->controllerContext->pi_getFFvalue($data, 'renderer')); + if ($value !== '') { + $configuration['renderer'] = $value; + } + return $configuration; } } diff --git a/Classes/View/FluidView.php b/Classes/View/FluidView.php new file mode 100644 index 0000000000000000000000000000000000000000..7b7579e53f64880949d7a5e28567d16ab7da93ed --- /dev/null +++ b/Classes/View/FluidView.php @@ -0,0 +1,129 @@ +<?php + +namespace SGalinski\DfTabs\View; + +/*************************************************************** + * Copyright notice + * + * (c) sgalinski Internet Services (https://www.sgalinski.de) + * All rights reserved + * + * This script is part of the TYPO3 project. The TYPO3 project is + * free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * The GNU General Public License can be found at + * http://www.gnu.org/copyleft/gpl.html. + * + * This script is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * This copyright notice MUST APPEAR in all copies of the script! + ***************************************************************/ + +use SGalinski\DfTabs\Domain\Model\Tab; +use TYPO3\CMS\Core\Context\Context; +use TYPO3\CMS\Core\Page\PageRenderer; +use TYPO3\CMS\Core\SingletonInterface; +use TYPO3\CMS\Core\Utility\GeneralUtility; +use TYPO3\CMS\Core\Utility\VersionNumberUtility; +use TYPO3\CMS\Extbase\Utility\LocalizationUtility; +use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer; + +/** + * Renders the content + */ +class FluidView implements SingletonInterface { + /** + * @var array + */ + protected $pluginConfiguration = []; + + /** + * Page Renderer Instance + * + * @var PageRenderer + */ + protected $pageRenderer; + + /** + * @var ContentObjectRenderer + */ + protected $contentObject; + + /** + * Internal plugin counter + * + * @var int + */ + protected $counter = 1; + + /** + * Internal container that holds the used hashes + * + * @var array + */ + protected $usedHashes = []; + + /** + * Injects the plugin configuration + * + * @param array $configuration + * @param string $tabId + * @return void + */ + public function injectPluginConfiguration(array $configuration, $tabId) { + $this->pluginConfiguration[$tabId] = $configuration; + + $this->pluginConfiguration[$tabId]['counter'] = $this->counter; + if (\in_array($this->pluginConfiguration[$tabId]['hashName'], $this->usedHashes)) { + $this->pluginConfiguration[$tabId]['hashName'] = 'tab' . $this->counter . '-'; + } + $this->usedHashes[] = $this->pluginConfiguration[$tabId]['hashName']; + + ++$this->counter; + } + + /** + * Injects the page renderer + * + * @param PageRenderer $pageRenderer + * @return void + */ + public function injectPageRenderer($pageRenderer) { + $this->pageRenderer = $pageRenderer; + } + + /** + * Injects the content object + * + * @param ContentObjectRenderer $contentObject + * @return void + */ + public function injectContentObject($contentObject) { + $this->contentObject = $contentObject; + } + + + /** + * Renders the tabs + * + * @param array $tabElements + * @param string $tabId + * @return string + */ + public function renderTabs($tabElements, $tabId) { + $fluidView = GeneralUtility::makeInstance(\TYPO3\CMS\Fluid\View\StandaloneView::class); + $fluidView->setTemplateRootPaths([ + GeneralUtility::getFileAbsFileName('EXT:df_tabs/Resources/Private/Templates') + ]); + $fluidView->setTemplate('Tabs.html'); + $fluidView->assign('tabElements', $tabElements); + return $fluidView->render(); + } + +} diff --git a/Configuration/TypoScript/constants.typoscript b/Configuration/TypoScript/constants.typoscript index 9bed25387cf10ae5616b7ff026839c3f1b5f149b..971b95095d84d87a458ef2b01adcc7b8956237b3 100644 --- a/Configuration/TypoScript/constants.typoscript +++ b/Configuration/TypoScript/constants.typoscript @@ -4,6 +4,8 @@ plugin.tx_dftabs_plugin1 { jqueryApp = EXT:df_tabs/Resources/Public/Scripts/jquery.tabs.js } + renderer = TypoScript + # typoscript specific options enableJavascript = 1 defaultTabTitle = Tab diff --git a/Configuration/TypoScript/setup.typoscript b/Configuration/TypoScript/setup.typoscript index c57a8a246fe16b48d63c3f3f7d0014e571a72129..5d3a115f1e36e052951a5acb1695b77c37838be6 100644 --- a/Configuration/TypoScript/setup.typoscript +++ b/Configuration/TypoScript/setup.typoscript @@ -30,6 +30,7 @@ plugin.tx_dftabs_plugin1 { titles = {$plugin.tx_dftabs_plugin1.titles} pages = {$plugin.tx_dftabs_plugin1.pages} tt_content = {$plugin.tx_dftabs_plugin1.tt_content} + renderer = {$plugin.tx_dftabs_plugin1.renderer} # javascript events events { diff --git a/README.md b/README.md index a365970d8f78755185bfe4e29acf2f9ed2a9096b..da0ea9a100cd5b06375031293695b8f721e2e841 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,11 @@ Repository: https://gitlab.sgalinski.de/typo3/df_tabs Please report bugs here: https://gitlab.sgalinski.de/typo3/df_tabs -TYPO3 version: >7.6 +TYPO3 version: >7.6 ## About -This extension adds a new plugin to the content element wizard that provides the user the possibility to define other content elements and pages as tab based content. +This extension adds a new plugin to the content element wizard that provides the user the possibility to define other content elements and pages as tab based content. Furthermore you can define an auto-play mechanism with a custom interval to implement an auto-sliding effect. ## Installation @@ -28,17 +28,31 @@ Furthermore you can define an auto-play mechanism with a custom interval to impl ### Configuration -#### TypoScript Constants +#### Fluid Renderer + +If you want to use the new Fluid Renderer, very little configuration is necessary. Just overwrite the following in your TypoScript Configuration: + +``` +plugin.tx_dftabs_plugin1.renderer = Fluid +``` + +The output can be completely controlled from within the Fluid-Template ```(EXT:df_tabs/Resources/Private/Templates/Standard/Tabs.html)```. Just overwrite it to adjust it to your needs. + +Please note that the Fluid Renderer does not come with preconfigured CSS or JavaScript. You have to add this on your own. + +#### TypoScript Renderer (deprecated) + +##### TypoScript Constants # The css file that should be used. css = EXT:df_tabs/Resources/Public/StyleSheets/df_tabs.css - + js { # Javascript file that implements the back button for tabs history = EXT:df_tabs/Resources/Public/Scripts/History/History.js - + # Router Javascript file (see above) historyRouting = EXT:df_tabs/Resources/Public/Scripts/History/History.Routing.js - + # Javascript that implements the default tab functionality app = EXT:df_tabs/Resources/Public/Scripts/df_tabs.js @@ -51,83 +65,83 @@ Furthermore you can define an auto-play mechanism with a custom interval to impl # Default tab title if the given information is empty defaultTabTitle = Tab - + # classPrefix = tx-dftabs- - + # Prefix for classes and ids to prevent html errors and styling problems if multiple plugins are used on the same page hashName = tab - + # Polling interval (in ms) to detect url changes for the history functionality pollingInterval = 1000 - + # Animation speed in ms (if a transition effect between the tabs is used) animationSpeed = 400 - + # the tab index where the animation should start (starts with 0) startIndex = 0 - + # forceUsageOfLeft = false - + # Node type that is used for the tab menu menuNodeType = li - + # Node type that is used for the tab content contentNodeType = div - + # Javascript callback function that is triggered for the tab switches. The default is no animation animationCallback = - + # Remove a substring from all tab-title. Can be either a string, or a regex. This example will remove the string # 'Foo' if is found at the end of the title. removeFromTitle = Foo$ # flexform options for the plugin usage with plain typoscript - + # Enables the autoplay functionality enableAutoPlay = 0 - + # Interval of the autoplay functionality in ms autoPlayInterval = 7000 - + # Enables the mouseover event for tab switches instead of simple clicks enableMouseOver = 0 - + # Data Provider Mode: tt_content, pages, combined and typoscript mode = tt_content - + # Comma separated list of preferred menu titles titles = - + # Comma-separated list of ids related to the mode; not needed for the typoscript mode; combined mode requires the table name as a prefix of the id (e.g. pages_12,tt_content_14) data = # pages mode related configuration settings pages { - + # Limit of fetched content elements from a page limit = 999 - + # Order clause for the content elements orderBy = colPos,sorting - + # Extra filter for content elements from a page additionalWhere = AND colPos >= 0 # Title field for the tab menu titleField = title - + # Link field for links linkField = uid } # tt_content mode related configuration settings tt_content { - + # Title field for the tab menu titleField = header - + # Link field for links linkField = header_link } diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf index bc8475b75505827f5b74f8dc6fd11b458b62a716..869c4f999bb0204639e93dfeffaebf1023ce45e9 100644 --- a/Resources/Private/Language/de.locallang.xlf +++ b/Resources/Private/Language/de.locallang.xlf @@ -1,6 +1,6 @@ <?xml version="1.0" encoding="utf-8" standalone="yes" ?> <xliff version="1.0"> - <file source-language="en" target-language="de" datatype="plaintext" original="messages" date="2012-02-17T17:44:27Z"> + <file source-language="en" target-language="de" datatype="plaintext" original="messages" date="2019-05-23T11:42:32Z"> <header> <type>module</type> <description>Language labels for plugin "tx_dftabs_plugin1"</description> @@ -9,66 +9,66 @@ <authorEmail>stefan.galinski@gmail.com</authorEmail> </header> <body> - <trans-unit id="flexform.sheets.general.autoPlayInterval" approved="yes"> - <source>Autoplay Interval</source> - <target>Auto-Play-Intervall</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.data" approved="yes"> - <source>Pages and content that should be rendered as tabs</source> - <target>Seiten und Inhalte, welche als Tabs gerendert werden sollen</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.enableAutoPlayInterval" approved="yes"> - <source>Enable Autoplay</source> - <target>Auto-Play aktivieren</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.enableMouseOver" approved="yes"> - <source>Enable MouseOver Navigation</source> - <target>MouseOver-Navigation aktivieren</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.hash" approved="yes"> - <source>Hash</source> - <target>Hash</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.mode" approved="yes"> - <source>Mode</source> - <target>Modus</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.mode.0" approved="yes"> - <source>Show Content Elements</source> - <target>Zeige Inhaltselemente</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.mode.1" approved="yes"> - <source>Show Pages</source> - <target>Zeige Seiten</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.mode.2" approved="yes"> - <source>Combined</source> - <target>Kombiniert</target> - </trans-unit> - <trans-unit id="flexform.sheets.general.titles" approved="yes"> - <source>Override Tab Titles (separation with newlines)</source> - <target>Titel der Reiter überschreiben (Trennung per Zeilenumbruch)</target> - </trans-unit> - <trans-unit id="noContentFound" approved="yes"> - <source>Didn't found any content for rendering of the tabs. Please check your plugin configuration.</source> - <target>Es wurde kein Inhalt für das Rendering der Tabs gefunden. Bitte überprüfen Sie die Plugin-Konfiguration.</target> - </trans-unit> - <trans-unit id="plugin1_plus_wiz_description" approved="yes"> - <source>Show pages or content elements like tabs</source> - <target>Darstellung von Seiten oder Inhaltselementen als Tabs.</target> - </trans-unit> - <trans-unit id="plugin1_title" approved="yes"> - <source>Pages/Content Elements In Tabs</source> - <target>Seiten/Inhalte in Tabs</target> - </trans-unit> - <trans-unit id="tt_content.list_type_plugin1" approved="yes"> - <source>Pages/Content Elements In Tabs</source> - <target>Seiten/Inhaltselemente in Tabs</target> - </trans-unit> - <trans-unit id="tt_content.list_type_plugin1"> - <source>[ContentTabs] Pages/Content Elements In Tabs</source> - <target>[Inhaltstabs] Seiten/Inhalte in Tabs</target> - </trans-unit> + <trans-unit id="flexform.sheets.general.autoPlayInterval" approved="yes"> + <source><![CDATA[Autoplay Interval]]></source> + <target><![CDATA[Auto-Play-Intervall]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.data" approved="yes"> + <source><![CDATA[Pages and content that should be rendered as tabs]]></source> + <target><![CDATA[Seiten und Inhalte, welche als Tabs gerendert werden sollen]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.enableAutoPlayInterval" approved="yes"> + <source><![CDATA[Enable Autoplay]]></source> + <target><![CDATA[Auto-Play aktivieren]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.enableMouseOver" approved="yes"> + <source><![CDATA[Enable MouseOver Navigation]]></source> + <target><![CDATA[MouseOver-Navigation aktivieren]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.hash" approved="yes"> + <source><![CDATA[Hash]]></source> + <target><![CDATA[Hash]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.mode" approved="yes"> + <source><![CDATA[Mode]]></source> + <target><![CDATA[Modus]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.mode.0" approved="yes"> + <source><![CDATA[Show Content Elements]]></source> + <target><![CDATA[Zeige Inhaltselemente]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.mode.1" approved="yes"> + <source><![CDATA[Show Pages]]></source> + <target><![CDATA[Zeige Seiten]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.mode.2" approved="yes"> + <source><![CDATA[Combined]]></source> + <target><![CDATA[Kombiniert]]></target> + </trans-unit> + <trans-unit id="flexform.sheets.general.titles" approved="yes"> + <source><![CDATA[Override Tab Titles (separation with newlines)]]></source> + <target><![CDATA[Titel der Reiter überschreiben (Trennung per Zeilenumbruch)]]></target> + </trans-unit> + <trans-unit id="frontend.buttonLabelMore" approved="yes"> + <source><![CDATA[More]]></source> + <target><![CDATA[Mehr]]></target> + </trans-unit> + <trans-unit id="noContentFound" approved="yes"> + <source><![CDATA[Didn't found any content for rendering of the tabs. Please check your plugin configuration.]]></source> + <target><![CDATA[Es wurde kein Inhalt für das Rendering der Tabs gefunden. Bitte überprüfen Sie die Plugin-Konfiguration.]]></target> + </trans-unit> + <trans-unit id="plugin1_plus_wiz_description" approved="yes"> + <source><![CDATA[Show pages or content elements like tabs.]]></source> + <target><![CDATA[Darstellung von Seiten oder Inhaltselementen als Tabs.]]></target> + </trans-unit> + <trans-unit id="plugin1_title" approved="yes"> + <source><![CDATA[Pages/Content Elements In Tabs]]></source> + <target><![CDATA[Seiten/Inhalte in Tabs]]></target> + </trans-unit> + <trans-unit id="tt_content.list_type_plugin1" approved="yes"> + <source><![CDATA[[ContentTabs] Pages/Content Elements In Tabs]]></source> + <target><![CDATA[[Inhaltstabs] Seiten/Inhalte in Tabs]]></target> + </trans-unit> </body> </file> -</xliff> +</xliff> \ No newline at end of file diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf index 8bf3eb25223fd0897bb53e6951e466cd3b700392..e90f3c955b4ac432fde30fb9a47060b72f867c20 100644 --- a/Resources/Private/Language/locallang.xlf +++ b/Resources/Private/Language/locallang.xlf @@ -1,6 +1,6 @@ <?xml version="1.0" encoding="utf-8" standalone="yes" ?> <xliff version="1.0"> - <file source-language="en" datatype="plaintext" original="messages" date="2012-02-17T17:44:27Z"> + <file source-language="en" datatype="plaintext" original="messages" date="2019-05-23T11:42:32Z"> <header> <type>module</type> <description>Language labels for plugin "tx_dftabs_plugin1"</description> @@ -9,51 +9,51 @@ <authorEmail>stefan.galinski@gmail.com</authorEmail> </header> <body> - <trans-unit id="flexform.sheets.general.autoPlayInterval"> - <source>Autoplay Interval</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.data"> - <source>Pages and content that should be rendered as tabs</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.enableAutoPlayInterval"> - <source>Enable Autoplay</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.enableMouseOver"> - <source>Enable MouseOver Navigation</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.hash"> - <source>Hash</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.mode"> - <source>Mode</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.mode.0"> - <source>Show Content Elements</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.mode.1"> - <source>Show Pages</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.mode.2"> - <source>Combined</source> - </trans-unit> - <trans-unit id="flexform.sheets.general.titles"> - <source>Override Tab Titles (separation with newlines)</source> - </trans-unit> - <trans-unit id="noContentFound"> - <source>Didn't found any content for rendering of the tabs. Please check your plugin configuration.</source> - </trans-unit> - <trans-unit id="plugin1_plus_wiz_description"> - <source>Show pages or content elements like tabs.</source> - </trans-unit> - <trans-unit id="plugin1_title"> - <source>Pages/Content Elements In Tabs</source> - </trans-unit> - <trans-unit id="tt_content.list_type_plugin1"> - <source>Pages/Content Elements In Tabs</source> - </trans-unit> - <trans-unit id="tt_content.list_type_plugin1"> - <source>[ContentTabs] Pages/Content Elements In Tabs</source> - </trans-unit> + <trans-unit id="flexform.sheets.general.autoPlayInterval"> + <source><![CDATA[Autoplay Interval]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.data"> + <source><![CDATA[Pages and content that should be rendered as tabs]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.enableAutoPlayInterval"> + <source><![CDATA[Enable Autoplay]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.enableMouseOver"> + <source><![CDATA[Enable MouseOver Navigation]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.hash"> + <source><![CDATA[Hash]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.mode"> + <source><![CDATA[Mode]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.mode.0"> + <source><![CDATA[Show Content Elements]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.mode.1"> + <source><![CDATA[Show Pages]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.mode.2"> + <source><![CDATA[Combined]]></source> + </trans-unit> + <trans-unit id="flexform.sheets.general.titles"> + <source><![CDATA[Override Tab Titles (separation with newlines)]]></source> + </trans-unit> + <trans-unit id="frontend.buttonLabelMore"> + <source><![CDATA[More]]></source> + </trans-unit> + <trans-unit id="noContentFound"> + <source><![CDATA[Didn't found any content for rendering of the tabs. Please check your plugin configuration.]]></source> + </trans-unit> + <trans-unit id="plugin1_plus_wiz_description"> + <source><![CDATA[Show pages or content elements like tabs.]]></source> + </trans-unit> + <trans-unit id="plugin1_title"> + <source><![CDATA[Pages/Content Elements In Tabs]]></source> + </trans-unit> + <trans-unit id="tt_content.list_type_plugin1"> + <source><![CDATA[[ContentTabs] Pages/Content Elements In Tabs]]></source> + </trans-unit> </body> </file> -</xliff> +</xliff> \ No newline at end of file diff --git a/Resources/Private/Templates/Standard/Tabs.html b/Resources/Private/Templates/Standard/Tabs.html new file mode 100644 index 0000000000000000000000000000000000000000..fee3536f5c253ccaab7848fe476dcebcfaa78dc6 --- /dev/null +++ b/Resources/Private/Templates/Standard/Tabs.html @@ -0,0 +1,17 @@ +<div class="default-content-element m-tabs" data-more-label="{f:translate(key: 'frontend.buttonLabelMore', extensionName: 'df_tabs')}"> + <div class="m-tabs__tablist" role="tablist"> + <f:for each="{tabElements}" as="tab" iteration="iterator"> + <button class="m-tabs__tab" role="tab" aria-controls="panel-{tab.record}-{iterator.index}" id="tab-{tab.record}-{iterator.index}" aria-selected="{f:if(condition: iterator.isFirst, then: 'true', else: 'false')}"> + {tab.title} + </button> + </f:for> + </div> + + <div class="m-tabs__panellist"> + <f:for each="{tabElements}" as="tab" iteration="iterator"> + <div class="m-tabs__panel {f:if(condition: iterator.isFirst, else: 'm-tabs__panel--closed')}" role="tabpanel" aria-labelledby="tab-{tab.record}-{iterator.index}" id="panel-{tab.record}-{iterator.index}"> + {tab.content -> f:format.raw()} + </div> + </f:for> + </div> +</div>