1<#assign liferay_theme = PortletJspTagLibs["/META-INF/liferay-theme.tld"] />
2<@liferay_theme["defineObjects"] />
3<#assign serviceContext = staticUtil["com.liferay.portal.kernel.service.ServiceContextThreadLocal"].getServiceContext()>
4<#assign ocupacionMedia = serviceContext.getAttribute('ocupacionMedia')>
5<#assign embalses = serviceContext.getAttribute('embalses')>
6
7<#assign tituloLimitChar = 50/>
8<#assign descripcionLimitChar = 500/>
9
10 <div class="carrusel-wrapper carrusel-home">
11 <div id="slide_carrusel">
12 <#assign velocidadSlide = 700>
13 <#if velocidad.getData()?has_content>
14 <#assign velocidadSlide = velocidad.getData() />
15 </#if>
16 <#assign autoplaytime = 300>
17 <#if autoplay.getData()?has_content>
18 <#assign autoplaytime = autoplay.getData() />
19 </#if>
20 <#-- ITEMS -->
21 <#if item.getSiblings()?has_content>
22 <#assign contador = 0 />
23 <#assign cont = 0 />
24 <#assign classHide = "" />
25 <#list item.getSiblings() as curItem>
26 <#assign enlace = curItem.enlace.getData() />
27 <#assign imagen = curItem.imagen.getData() />
28 <#assign video = curItem.video.getData() />
29 <#assign titulo = curItem.titulo.getData() />
30 <#assign descripcion = curItem.descripcion.getData() />
31
32 <#if video?has_content>
33 <#assign imagen = "" />
34 </#if>
35 <div class="carousel-item ${classHide}" data-imgcarousel="${imagen}">
36 <#if contador == 0 && !video?has_content>
37 <script type="text/javascript">
38 $('.carousel-item').each(function(){
39 $(this).css('background-image','url("'+$(this).data("imgcarousel")+'")');
40 });
41 </script>
42 </#if>
43 <#assign classHide = "hide" />
44 <#assign contador = 1 />
45 <#assign cssStyle = "height: 720px" />
46 <#if video?has_content>
47 <#assign previewUrl = video + "?videoThumbnail=1" />
48 <#assign cssStyle = "height: 600px; position:absolute; top:0; left:0; right:0; width:100%;" />
49 <div class="" style="position: relative; ">
50 <div class="" style="position: absolute; width:100%; height: 720px; overflow: hidden; text-align:center; background-color:#333;">
51 <video autoplay="autoplay" loop="loop" muted="muted" style=" position: relative; opacity: .85;" class="video-carrusel">
52 <source src="${video}" type="video/mp4"/>
53 Video tag not supported. Download the video <a href="${video}">here</a>.
54 </video>
55 </div>
56
57 </div>
58 </#if>
59 <div>
60 <div class="carousel-data-content container" style="${cssStyle}">
61
62 <!-- TODO: Quitar estilo en linea -->
63 <div class="row">
64
65 <!-- TODO: Quitar estilo en linea -->
66 <div class="margin-top-200 margin-bottom-60">
67 <#if titulo?has_content>
68
69 <!-- TODO: Quitar estilo de color en linea -->
70 <a href="${enlace}">
71 <h1>
72 ${limitText(titulo, tituloLimitChar)} <#if descripcion?has_content><small>${limitText(descripcion,descripcionLimitChar)}</small></#if>
73 </h1>
74 </a>
75
76 </#if>
77
78 </div>
79 </div>
80 <div class="row">
81 <#if ocupacionMedia?has_content && ocupacionMedia != 0>
82 <div class="col-xs-12 col-sm-6">
83 <strong>EMBALSES DE MADRID
84 <a class="" role="button" data-toggle="collapse" href="#collapseExample-${cont}" aria-expanded="false" aria-controls="collapseExample">
85 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i><span class="sr-only">Ir</span>
86 </a>
87 <br/>
88 <span class="ocupacionMedia">${ocupacionMedia?replace(".", ",")}%</span></strong><br/>nivel medio
89 </div>
90 <div class="col-xs-12 col-sm-6">
91 <div id="collapseExample-${cont}" class="collapse">
92 <#if embalses?has_content>
93 <#list embalses as curEmbalse>
94 <div class="row padding-bottom-2 padding-top-2" >
95 <div class="col-xs-6">${curEmbalse.nombre}</div>
96 <div class="col-xs-3 text-right">${curEmbalse.volumen?replace(".", ",")}</div>
97 <div class="col-xs-3 text-right">${curEmbalse.nivel?replace(".", ",")}%</div>
98 </div>
99 </#list>
100 </#if>
101 </div>
102 </div>
103 </div>
104 <#else>
105 <div class="col-xs-12 col-sm-12 text-center">
106 <a href="https://www.canaldeisabelsegunda.es/inicio#more-modulos" tabindex="-1">
107 <h4>Para una información más detallada del nivel de los embalses, pulsar aquí.</h4>
108 </a>
109 </div>
110 </#if>
111 </div>
112 </div><!-- /.carousel-data-content -->
113 </div><!-- /.carousel-item -->
114 <#assign cont = cont + 1 />
115 </#list>
116 </#if>
117 </div>
118 <script type="text/javascript">
119 $(document).ready(function () {
120 $('.carousel-item').each(function(){
121 $(this).css('background-image','url("'+$(this).data("imgcarousel")+'")');
122 $(this).removeClass('hide');
123 });
124 $('#slide_carrusel').slick({
125 dots: true,
126 infinite: true,
127 arrows: false,
128 speed: ${autoplaytime},
129 slidesToShow: 1,
130 adaptiveHeight: false,
131 autoplay: false,
132 autoplaySpeed: ${velocidadSlide},
133 rtl: ${(languageUtil.get(locale, "lang.dir") == "rtl")?string}
134 });
135 });
136 </script>
137
138 </div><!-- /.carrusel-wrapper -->
139
140
141<!--limit text function-->
142<#function limitText text limit>
143 <#local resultText = text>
144 <#if resultText?length > limit>
145 <#local resultText = text?substring(0,limit)>
146 </#if>
147 <#return resultText>
148</#function>
149
150<script type="text/javascript">
151
152 $(document).ready(function () {
153 var screenWidth = Liferay.Util.getWindowWidth();
154 if ( screenWidth < Liferay.BREAKPOINTS.TABLET ) {
155 var carouselMobileHeight = $('.carrusel-home .carousel-item').outerHeight();
156 $('.carrusel-home').css('height',carouselMobileHeight);
157 }
158 });
159
160</script>
161
162<style type="text/css">
163.carrusel-home video{
164 min-height:720px;
165 overflow: hidden;
166
167
168
169}
170.carrusel-home a h1,
171.carrusel-home a h1 small{
172 color: white;
173 line-height:1;
174
175}
176.carrusel-home a:hover,
177.carrusel-home a:hover h1,
178.carrusel-home a:hover h1 small{
179 color: white;
180 text-decoration:none;
181
182}
183.carrusel-home .slick-slide{
184 background-size: cover;
185 background-position: center;
186 color: white;
187}
188.carrusel-wrapper.carrusel-home {
189 height: 720px !important;
190}
191.carrusel-home .slick-slide a{
192 color: white;
193}
194.carrusel-home .slick-slide a:hover,
195.carrusel-home .slick-slide a:focus {
196 color: white;
197}
198.carrusel-home .slick-slide .ocupacionMedia{
199 font-family: 'OpenSans-Bold';
200 font-size:51px;
201 line-height:1;
202}
203.carrusel-home .slick-slide strong{
204 font-size:18px;
205 line-height:1;
206}
207.carrusel-home .carousel-data-content.container{
208max-width: 750px;
209
210}
211@media (max-width: 767px) {
212
213 .carrusel-home .carousel-data-content.container{
214 max-width: 90vw;
215
216 }
217 .carrusel-home .margin-top-200.margin-bottom-60{
218 margin-top:70px !important;
219 margin-bottom:20px !important;
220 }
221}
222
223.carrusel-home .row.padding-bottom-2.padding-top-2{
224 border-bottom:1px solid #ccc;
225}
226
227</style>
