Skip to content

Commit

Permalink
[FEATURE] Upgrade Bootstrap Slider element. (#269)
Browse files Browse the repository at this point in the history 
New styles and features for bootstrap slider.
* add fixed caption
* option to show H1
* adjust styles
* add swipe gesture
  • Loading branch information
@dmh
Anna Färber authored and dmh committed Sep 11, 2017
1 parent ba5105d commit ec026d4
Show file tree
Hide file tree
Showing 21 changed files with 2,005 additions and 554 deletions.
70 changes: 68 additions & 2 deletions Configuration/FlexForms/flexform_bootstrapSlider.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@
</config>
</TCEforms>
</interval>

<!-- Show or hide the small circles on bottom of slider to navigate to each slide. -->
<quickselect>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:bootstrapSlider.flexform.quickselect</label>
Expand All @@ -30,8 +28,76 @@
</config>
</TCEforms>
</quickselect>
<showHeadlineH1>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:bootstrapSlider.flexform.showHeadlineH1</label>
<config>
<type>check</type>
</config>
</TCEforms>
</showHeadlineH1>
</el>
</ROOT>
</sDEF>
<fixedCaption>
<ROOT>
<TCEforms>
<sheetTitle>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:bootstrapSlider.flexform.fixedCaption</sheetTitle>
</TCEforms>
<type>array</type>
<el>
<fixedTitle>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:bootstrapSlider.flexform.fixedTitle</label>
<config>
<type>input</type>
</config>
</TCEforms>
</fixedTitle>
<fixedDescription>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:bootstrapSlider.flexform.fixedDescription</label>
<config>
<type>text</type>
</config>
</TCEforms>
</fixedDescription>
<fixedLinkText>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:bootstrapSlider.flexform.fixedLinkText</label>
<config>
<type>input</type>
</config>
</TCEforms>
</fixedLinkText>
<fixedLink>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:bootstrapSlider.flexform.fixedLink</label>
<config>
<type>input</type>
<size>30</size>
<eval>trim</eval>
<softref>typolink,typolink_tag,images,url</softref>
<wizards>
<_PADDING>2</_PADDING>
<link>
<type>popup</type>
<title>Link</title>
<module>
<name>wizard_element_browser</name>
<urlParameters>
<mode>wizard</mode>
</urlParameters>
</module>
<icon>link_popup.gif</icon>
<JSopenParams>height=500,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
</link>
</wizards>
</config>
</TCEforms>
</fixedLink>
</el>
</ROOT>
</fixedCaption>
</sheets>
</T3DataStructure>
9 changes: 8 additions & 1 deletion Configuration/TCA/Overrides/tt_content.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,8 +354,15 @@

// BootstrapSlider flexform
$GLOBALS['TCA']['tt_content']['columns']['pi_flexform']['config']['ds']['*,contentElementBootstrapSlider'] = $flexformPath . 'flexform_bootstrapSlider.xml';
// ======================= BootstrapSlider [end] ==========================================

$GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['appearance']['collapseAll'] = 0;
$GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['0']['showitem'] = '--div--;tx_themet3kit_slide_btn_txt, --palette--;;imageoverlayPalette, --palette--;;filePalette';
$GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['1']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['0']['showitem'];
$GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['2']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['0']['showitem'];
$GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['3']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['0']['showitem'];
$GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['4']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['0']['showitem'];
$GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['5']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['contentElementBootstrapSlider']['columnsOverrides']['image']['config']['foreign_types']['0']['showitem'];
// ======================= BootstrapSlider [end] ==========================================


// ======================= contentElementSlider [begin] ==========================================
Expand Down
18 changes: 18 additions & 0 deletions Resources/Private/Language/ContentElements.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,24 @@
<trans-unit id="bootstrapSlider.flexform.quickselect">
<source>Quickselect</source>
</trans-unit>
<trans-unit id="bootstrapSlider.flexform.showHeadlineH1">
<source>Show first title as H1. Use this option only if the page has no H1 yet.</source>
</trans-unit>
<trans-unit id="bootstrapSlider.flexform.fixedCaption">
<source>Fixed Caption</source>
</trans-unit>
<trans-unit id="bootstrapSlider.flexform.fixedTitle">
<source>Title</source>
</trans-unit>
<trans-unit id="bootstrapSlider.flexform.fixedDescription">
<source>Description</source>
</trans-unit>
<trans-unit id="bootstrapSlider.flexform.fixedLinkText">
<source>Link Text</source>
</trans-unit>
<trans-unit id="bootstrapSlider.flexform.fixedLink">
<source>Link</source>
</trans-unit>

<!--bigIconTextButton Element-->
<trans-unit id="bigIconTextButton.title">
Expand Down
115 changes: 64 additions & 51 deletions Resources/Private/Templates/ContentElements/BootstrapSlider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,82 +3,95 @@
<f:layout name="Default" />
<f:section name="Header" />
<f:section name="Main">
<!-- theme_t3kit: Templates/ContentElements/BootstrapSlider.html [begin] -->
<f:if condition="{slides}">
<div id="carousel-{data.uid}" class="carousel image-slider slide" data-interval="{settings.interval}000" data-ride="carousel">
<div id="carousel-{data.uid}" class="carousel image-slider slide"
data-interval="{f:if(condition:'{settings.interval}==0', then:'false', else:'{settings.interval}000')}"
data-ride="carousel">
<div class="carousel-inner" role="listbox">
<f:for each="{slides}" as="image" iteration="iteration">
<div class="item{f:if(condition: iteration.isFirst, then: ' active')}">
<f:media
file="{image}"
height="{data.imageheight}c"
width="{data.imagewidth}c"
alt="{image.alternative}"
title="{image.title}"/>

<f:if condition="{settings.fixedTitle} || {settings.fixedDescription} || {settings.fixedLink}">
<f:then> </f:then>
<f:else>
<f:render section="caption"
arguments="{
title: image.title,
description: image.description,
linkText: image.referenceProperties.tx_themet3kit_slide_btn_txt,
link: image.link,
settings: settings,
firstImage: iteration.isFirst}" />
</f:else>
</f:if>
</div>
</f:for>
</div>

<f:comment>If one of the fixed settings is enabled show the fixed caption</f:comment>
<f:if condition="{settings.fixedTitle} || {settings.fixedDescription} || {settings.fixedLink}">
<f:render section="caption"
arguments="{
title: settings.fixedTitle,
description: settings.fixedDescription,
linkText: settings.fixedLinkText,
link: settings.fixedLink,
settings: settings,
firstImage: 'true'}" />
</f:if>

<f:if condition="{settings.quickselect}">
<f:if condition="{slides->f:count()} > 1">
<ol class="carousel-indicators">
<f:for each="{slides}" as="image" iteration="iteration">
<li data-target="#carousel-{data.uid}" data-slide-to="{iteration.index}" class="{f:if(condition: iteration.isFirst, then: 'active')}">
</li>
<li data-target="#carousel-{data.uid}" data-slide-to="{iteration.index}"
class="{f:if(condition: iteration.isFirst, then: 'active')}"></li>
</f:for>
</ol>
</f:if>
</f:if>

<div class="carousel-inner" role="listbox">
<f:for each="{slides}" as="image" iteration="iteration">
<div class="item{f:if(condition: iteration.isFirst, then: ' active')}">

<f:render section="Image" arguments="{_all}" />
</div>
</f:for>
</div>

<f:if condition="{slides->f:count()} > 1">
<div class="container carousel-control-wrapper">
<a class="carousel-control left" href="#carousel-{data.uid}" role="button" data-slide="prev">
<span class="swiper-button-prev swiper-button-white"></span>
<span class="icons icon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#carousel-{data.uid}" role="button" data-slide="next">
<span class="swiper-button-next swiper-button-white"></span>
<span class="icons icon-chevron-right"></span>
</a>
</div>
</f:if>
</div>
</f:if>
</f:section>

<f:section name="Image">
<f:image src="{image.uid}" height="{data.imageheight}c" width="{data.imagewidth}c" treatIdAsReference="1"/>
<f:if condition="{image.referenceProperties.title}">
<f:then>
<div class="carousel-caption">
<h2 class="img-slider__caption-header">{image.referenceProperties.title}</h2>

<f:if condition="{image.referenceProperties.description}">
<p class="img-slider__caption-p js__img-slider__caption-p">{image.referenceProperties.description}</p>
</f:if>
<f:section name="caption">
<f:if condition="{title} || {description} || {link}">
<div class="carousel-caption">
<f:if condition="{title} && {firstImage} && {settings.showHeadlineH1}">
<f:then><h1>{title}</h1></f:then>
<f:else><h2>{title}</h2></f:else>
</f:if>

<f:if condition="{image.referenceProperties.link}">
<f:link.typolink parameter="{image.referenceProperties.link}" class="btn btn-primary"><f:translate key="contentElement.slider.linkText" extensionName="theme_t3kit" /></f:link.typolink>
</f:if>
</div>
</f:then>
<f:else>
<f:then>
<f:if condition="{image.referenceProperties.description}">
<div class="carousel-caption">
<p class="img-slider__caption-p js__img-slider__caption-p">{image.referenceProperties.description}</p>
<f:if condition="{description}">
<p class="carousel__description">{description}</p>
</f:if>

<f:if condition="{image.referenceProperties.link}">
<f:link.typolink parameter="{image.referenceProperties.link}" class="btn btn-primary"><f:translate key="contentElement.slider.linkText" extensionName="theme_t3kit" /></f:link.typolink>
</f:if>
</div>
</f:if>
</f:then>
<f:else>
<f:if condition="{image.referenceProperties.link}">
<div class="carousel-caption">
<f:link.typolink parameter="{image.referenceProperties.link}" class="btn btn-primary"><f:translate key="contentElement.slider.linkText" extensionName="theme_t3kit" /></f:link.typolink>
</div>
</f:if>
</f:else>
</f:else>
<f:if condition="{link}">
<f:link.typolink parameter="{link}" class="btn carousel__btn">
<f:if condition="{linkText}">
<f:then>{linkText}</f:then>
<f:else><f:translate key="contentElement.slider.linkText" extensionName="theme_t3kit"/></f:else>
</f:if>
</f:link.typolink>
</f:if>
</div>
</f:if>
<!-- theme_t3kit: Templates/ContentElements/BootstrapSlider.html [end] -->
</f:section>

</html>
Loading

0 comments on commit ec026d4

Please sign in to comment.