Commit f4e8dea6 authored by Tobias Jeger's avatar Tobias Jeger

ESSENTIALS-1016 Reintegrate 'bugfix/ESSENTIALS-1016' into master

parents 6221a881 eaf062ce
<#include "../include/imports.ftl">
<#-- @ftlvariable name="componentId" type="java.lang.String" -->
<#-- @ftlvariable name="item" type="{{beansPackage}}.Banner" -->
<#-- @ftlvariable name="pageable" type="org.onehippo.cms7.essentials.components.paging.Pageable" -->
<#-- @ftlvariable name="cparam" type="org.onehippo.cms7.essentials.components.info.EssentialsCarouselComponentInfo" -->
......@@ -9,14 +10,14 @@
<#else>
<#assign pauseCarousel = ''/>
</#if>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="${cparam.interval?c}"
<div id="${componentId}" class="carousel slide" data-ride="carousel" data-interval="${cparam.interval?c}"
data-pause="${pauseCarousel}" data-wrap="${cparam.cycle?string}">
<ol class="carousel-indicators">
<#list 0..(pageable.total-1) as index>
<#if index==0>
<li data-target="#myCarousel" data-slide-to="${index}" class="active"></li>
<li data-target="#${componentId}" data-slide-to="${index}" class="active"></li>
<#else>
<li data-target="#myCarousel" data-slide-to="${index}"></li>
<li data-target="#${componentId}" data-slide-to="${index}"></li>
</#if>
</#list>
</ol>
......@@ -41,15 +42,15 @@
</#list>
</div>
<#if cparam.showNavigation>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="left carousel-control" href="#${componentId}" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#${componentId}" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</#if>
</div>
<@hst.headContribution category="htmlHead">
<style type="text/css">
/* Carousel base class */
.carousel {
#${componentId} {
height: ${cparam.carouselHeight}px;
/*width: ${cparam.carouselWidth}px;*/
margin-bottom: 60px;
......@@ -62,7 +63,7 @@
}
/* Declare heights because of positioning of img element */
.carousel .item {
#${componentId} .item {
height: ${cparam.carouselHeight}px;
background-color: ${cparam.carouselBackgroundColor};
}
......@@ -81,6 +82,22 @@
<@hst.headContribution category="htmlBodyEnd">
<script type="text/javascript" src="<@hst.webfile path="/js/bootstrap.min.js"/>"></script>
</@hst.headContribution>
<#--
The Carousel component is initialized on page-load by means of the data attributes. However, when the
channel-manager redraws a container (after actions like adding, removing or reordering components) it will only
do a page reload if one of the affected components adds a headContribution that has not been processed yet
(see HSTTWO-3747). To ensure it is also initialiazed when the page is *not* reloaded, the following snippet is
used.
-->
<#if editMode>
<script type="text/javascript">
if (window.jQuery && window.jQuery.fn.carousel) {
jQuery('#${componentId}').carousel();
}
</script>
</#if>
<#elseif editMode>
<img src="<@hst.link path='/images/essentials/catalog-component-icons/carousel.png'/>"> Click to edit Carousel
</#if>
<%@ include file="/WEB-INF/jsp/include/imports.jsp" %>
<%--@elvariable id="componentId" type="java.lang.String"--%>
<%--@elvariable id="pageable" type="org.onehippo.cms7.essentials.components.paging.Pageable"--%>
<%--@elvariable id="item" type="{{beansPackage}}.Banner"--%>
<%--@elvariable id="cparam" type="org.onehippo.cms7.essentials.components.info.EssentialsCarouselComponentInfo"--%>
<%--@elvariable id="editMode" type="java.lang.Boolean"--%>
<c:set var="pauseCarousel" value="${requestScope.cparam.pause ? 'hover':''}"/>
<c:if test="${requestScope.pageable ne null && requestScope.pageable.total gt 0}">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="${requestScope.cparam.interval}"
<div id="${componentId}" class="carousel slide" data-ride="carousel" data-interval="${requestScope.cparam.interval}"
data-pause="${pauseCarousel}" data-wrap="${requestScope.cparam.cycle}">
<ol class="carousel-indicators">
<c:forEach begin="0" end="${requestScope.pageable.total -1}" varStatus="index">
<c:choose>
<c:when test="${index.first}">
<li data-target="#myCarousel" data-slide-to="${index.index}" class="active"></li>
<li data-target="#${componentId}" data-slide-to="${index.index}" class="active"></li>
</c:when>
<c:otherwise>
<li data-target="#myCarousel" data-slide-to="${index.index}"></li>
<li data-target="#${componentId}" data-slide-to="${index.index}"></li>
</c:otherwise>
</c:choose>
</c:forEach>
......@@ -39,13 +42,13 @@
</c:forEach>
</div>
<c:if test="${requestScope.cparam.showNavigation}">
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="left carousel-control" href="#${componentId}" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#${componentId}" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</c:if>
</div>
<style type="text/css">
/* Carousel base class */
.carousel {
#${componentId} {
height: ${requestScope.cparam.carouselHeight}px;
/*width: ${requestScope.cparam.carouselWidth}px;*/
margin-bottom: 60px;
......@@ -58,7 +61,7 @@
}
/* Declare heights because of positioning of img element */
.carousel .item {
#${componentId} .item {
height: ${requestScope.cparam.carouselHeight}px;
background-color: ${requestScope.cparam.carouselBackgroundColor};
}
......@@ -70,11 +73,29 @@
<hst:headContribution category="htmlBodyEnd">
<script type="text/javascript" src="<hst:webfile path="/js/jquery-2.1.0.min.js"/>"></script>
</hst:headContribution>
<hst:headContribution category="htmlBodyEnd">
<script type="text/javascript" src="<hst:webfile path="/js/bootstrap.min.js"/>"></script>
</hst:headContribution></c:if>
<%--@elvariable id="editMode" type="java.lang.Boolean"--%>
</hst:headContribution>
<hst:headContribution category="htmlBodyEnd">
<script type="text/javascript" src="<hst:webfile path="/js/bootstrap.min.js"/>"></script>
</hst:headContribution>
<%--
The Carousel component is initialized on page-load by means of the data attributes. However, when the
channel-manager redraws a container (after actions like adding, removing or reordering components) it will only
do a page reload if one of the affected components adds a headContribution that has not been processed yet
(see HSTTWO-3747). To ensure it is also initialiazed when the page is *not* reloaded, the following snippet is
used.
--%>
<c:if test="${editMode}">
<script type="text/javascript">
if (window.jQuery && window.jQuery.fn.carousel) {
jQuery('#${componentId}').carousel();
}
</script>
</c:if>
</c:if>
<c:if test="${requestScope.editMode && (requestScope.pageable eq null || requestScope.pageable.total lt 1)}">
<img src="<hst:link path='/images/essentials/catalog-component-icons/carousel.png'/>"> Click to edit Carousel
</c:if>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment