Index.html 8.32 KiB
{namespace vi=SGalinski\SgVimeo\ViewHelpers}
<f:layout name="Default" />
<f:section name="main">
<f:if condition="{showApiResult}">
{response -> f:debug()}
</f:if>
<f:variable name="feedCount" value="{response.items -> f:count()}" />
<f:comment><!--Handle the container classes--></f:comment>
<f:variable name="classes">
<f:if condition="{settings.layout} === 'playlist' && {feedCount} < 4">
<f:then>
sg-video--default
</f:then>
<f:else>
<f:switch expression="{settings.layout}">
<f:case value="rows">
sg-video--rows
</f:case>
<f:case value="playlist">
sg-video--playlist sg-video--{feedCount}
</f:case>
<f:defaultCase>
sg-video--default
</f:defaultCase>
</f:switch>
</f:else>
</f:if>
</f:variable>
{vi:structuredVideoData(videoArray: '{response.items}', arrayType: 'vimeo')}
<f:if condition="{error}">
<f:then>
<p>{error}</p>
</f:then>
<f:else>
<f:comment><!--Set the layout to single if there is only one item.--></f:comment>
<form>
<div class="row">
<f:if condition="{filtersTop} || {submitButton.position} == 'top' || {submitButton.position} == 'both'">
<div class="sg-video-filters sg-video-filters-top">
<f:for each="{filtersTop}" as="filter">
<f:render partial="{filter.partial}" arguments="{filter: filter, pluginId: pluginContentData.uid, filterValues: filterValues}" />
</f:for>
<f:if condition="{submitButton.position} == top || {submitButton.position} == 'both'">
<div class="sg-video-submit-filters sg-video-submit-filters-top">
<button class="{submitButton.cssClass}" type="submit">{f:translate(key: submitButton.label)}</button>
</div>
</f:if>
</div>
</f:if>
<f:if condition="{notFound}">
<f:then>
<f:render partial="NotFound" arguments="{name: filter.name, label: filter.label}" />
</f:then>
<f:else>
<div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}">
<f:if condition="{feedCount} < 2">
<f:then>
<f:render section="videoItem" arguments="{
feedItem: response.items.0,
titleChars: settings.maxTitleChars,
descChars: settings.maxDescriptionChars }" />
</f:then>
<f:else>
<f:switch expression="{settings.layout}">
<f:case value="playlist">
<f:render section="list-playlist" arguments="{_all}" />
</f:case>
<f:defaultCase>
<f:render section="list" arguments="{_all}" />
</f:defaultCase>
</f:switch>
</f:else>
</f:if>
</div>
</f:else>
</f:if>
<f:if condition="{filtersBottom} || {submitButton.position} == 'bottom' || {submitButton.position} == 'both'">
<div class="sg-video-filters sg-video-filters-bottom">
<f:for each="{filtersBottom}" as="filter">
<f:render partial="{filter.partial}" arguments="{filter: filter, pluginId: pluginContentData.uid, filterValues: filterValues}" />
</f:for>
<f:if condition="{submitButton.position} == 'bottom' || {submitButton.position} == 'both'">
<div class="sg-video-submit-filters sg-video-submit-filters-bottom">
<button class="{submitButton.cssClass}" type="submit">{f:translate(key: submitButton.label)}</button>
</div>
</f:if>
</div>
</f:if>
</div>
</form>
</f:else>
</f:if>
</f:section>
<f:section name="list">
<ul class="sg-video__list sg-video__list--{f:if(condition: '{settings.layout} === \'rows\'', then: 'rows', else: 'default')}">
<f:for each="{response.items}" as="feedItem" iteration="feedIterator">
<li class="sg-video__list-item">
<f:render section="videoItem" arguments="{
feedItem: feedItem,
titleChars: settings.maxTitleChars,
descChars: settings.maxDescriptionChars,
expand: 1
}" />
</li>
</f:for>
</ul>
</f:section>
<f:section name="list-playlist">
<div class="sg-video__highlight">
<f:render section="videoItem" arguments="{
feedItem: response.items.0,
titleChars: settings.maxTitleChars,
descChars: settings.maxDescriptionChars
}" />
</div>
<ul class="sg-video__list sg-video__list--playlist">
<div>
<f:for each="{response.items}" as="feedItem" iteration="feedIterator">
<f:if condition="!{feedIterator.isFirst}">
<li class="sg-video__list-item">
<f:render section="videoItem" arguments="{
feedItem: feedItem,
titleChars: settings.maxTitleChars,
descChars: settings.maxDescriptionChars
}" />
</li> </f:if>
</f:for>
</div>
</ul>
</f:section>
<f:section name="videoItem">
<f:variable name="urlParameters">{f:if(condition: '{settings.urlParameters}', then: '{settings.urlParameters}', else: '{settings.globalUrlParameters}')}</f:variable>
<f:variable name="feedItemUrl">
<vi:urlWithQueryParameters url="{f:if(condition: '{feedItem.embedLink}', then: '{feedItem.embedLink}', else: '{feedItem.link}')}" parameters="{urlParameters}" />
</f:variable>
<div class="sg-video__item">
<a class="sg-video__image-container sg-video-item" href="{feedItemUrl}" target="_blank"
data-disable-lightbox="{settings.disableLightbox}"
data-disable-lightbox-mobile="{settings.disableLightboxMobile}"
data-additional-url-parameters="{urlParameters}"
data-video-type="vimeo">
<span>
<vi:renderSvg color="currentColor" name="solid-play"></vi:renderSvg>
<f:if condition="{feedItem.thumbnail}">
<f:then>
<img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.name}" loading="lazy" />
</f:then>
<f:else>
<f:if condition="{feedItem.pictures.base_link}">
<img class="sg-video__image" src="{feedItem.pictures.base_link}_{feedItem.width}x{feedItem.height}?r=pad" alt="{item.name}" width="{feedItem.width}" height="{feedItem.height}" loading="lazy" />
</f:if>
<f:comment><!--
<f:if condition="{feedItem.pictures.sizes}">
<f:for each="{feedItem.pictures.sizes}" as="picture" iteration="iterator">
<f:if condition="{iterator.isLast}">
<img class="sg-video__image" src="{picture.link}" alt="{item.name}" width="{picture.width}" height="{picture.height}" loading="lazy"/>
</f:if>
</f:for>
</f:if>
--></f:comment>
</f:else>
</f:if>
</span>
</a>
<f:if condition="{settings.showTitle} || {settings.showDescription}">
<div class="sg-video__bodytext">
<f:if condition="{settings.showTitle} && {feedItem.name}">
<h3 class="h3">
<f:if condition="{titleChars}">
<f:then>
<!-- This MUST be in one line, otherwise the crop function will count the whitespace -->
<f:format.crop maxCharacters="{titleChars}" respectWordBoundaries="1" append="..."><f:format.htmlentitiesDecode>{feedItem.name}</f:format.htmlentitiesDecode></f:format.crop>
</f:then>
<f:else>
<f:format.htmlentitiesDecode>{feedItem.name}</f:format.htmlentitiesDecode>
</f:else>
</f:if>
</h3>
</f:if>
<f:if condition="{settings.showDescription} && {feedItem.description}">
<span class="sg-video__description">
<f:if condition="{descChars}">
<f:then>
<f:format.nl2br><f:format.crop maxCharacters="{descChars}" respectWordBoundaries="1" append="..."><f:format.raw>{feedItem.description}</f:format.raw></f:format.crop></f:format.nl2br>
</f:then>
<f:else>
<f:format.nl2br><f:format.raw>{feedItem.description}</f:format.raw></f:format.nl2br>
</f:else>
</f:if>
</span>
</f:if>
<f:if condition="{settings.layout} == 'rows'">
<f:render section="readMoreButton" />
</f:if> </div>
<f:if condition="{settings.showDescription} && {settings.layout} == 'default'">
<f:render section="readMoreButton" />
</f:if>
</f:if>
</div>
</f:section>
<f:section name="readMoreButton">
<button type="button" class="sg-video__read-more"
data-button-open-text="{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}"
data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'sg_vimeo')}"><span class="sg-video__read-more-text">{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}</span>
<vi:renderSvg color="currentColor" name="solid-chevron-down" class="sg-video__read-more-arrow"></vi:renderSvg>
</button>
</f:section>