An error occurred while processing the template.
The following has evaluated to null or missing:
==> themeDisplay.request.getParameter("value") [in template "44658#44704#3933776" at line 228, column 22]
----
Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign parameter = themeDisplay.requ... [in template "44658#44704#3933776" at line 228, column 1]
---- 1<style> 2.comp-custom-tab { 3 width: 100%; 4 display: -webkit-box; 5 display: -ms-flexbox; 6 display: flex; 7 -webkit-box-align: center; 8 -ms-flex-align: center; 9 align-items: center; 10 -webkit-box-orient: vertical; 11 -webkit-box-direction: normal; 12 -ms-flex-direction: column; 13 flex-direction: column; 14} 15@media (max-width: 1199px) { 16 .comp-custom-tab { 17 padding: 0 23px; 18 } 19} 20.comp-custom-tab__block { 21 width: 1023px; 22 border-radius: 16px; 23 border: 1px solid #DBDBDB; 24 background-position: bottom; 25 background-size: 100% 2px; 26 background-repeat: no-repeat; 27 background-image: -webkit-gradient(linear, left top, right top, from(#389FDF), to(#2EB68F)); 28 background-image: linear-gradient(to right, #389FDF, #2EB68F); 29 border-bottom: 2px solid #31AEA8; 30 padding: 40px 40px 36px; 31} 32@media (max-width: 1199px) { 33 .comp-custom-tab__block { 34 width: auto; 35 padding: 26px 30px 18px; 36 } 37} 38.comp-custom-tab__presentation-text-zone { 39 display: -webkit-box; 40 display: -ms-flexbox; 41 display: flex; 42 width: 100%; 43 -webkit-box-orient: vertical; 44 -webkit-box-direction: normal; 45 -ms-flex-direction: column; 46 flex-direction: column; 47 gap: 15px; 48 -webkit-box-align: start; 49 -ms-flex-align: start; 50 align-items: start; 51} 52@media (max-width: 1199px) { 53 .comp-custom-tab__presentation-text-zone { 54 -webkit-box-align: center; 55 -ms-flex-align: center; 56 align-items: center; 57 } 58} 59.comp-custom-tab__presentation-title { 60 margin: 0 !important; 61 font-size: 32px !important; 62 line-height: 35px !important; 63 color: #002E58; 64} 65@media (max-width: 700px) { 66 .comp-custom-tab__presentation-title { 67 font-size: 24px !important; 68 } 69} 70.comp-custom-tab__presentation-txt { 71 margin: 0 !important; 72} 73.comp-custom-tab__tab-options-zone { 74 padding: 44px 0 40px; 75 display: -ms-grid; 76 display: grid; 77 -ms-grid-columns: (1fr)[4]; 78 grid-template-columns: repeat(4, 1fr); 79} 80.comp-custom-tab__tab-options-zone__three { 81 -ms-grid-columns: (1fr)[3]; 82 grid-template-columns: repeat(3, 1fr); 83} 84.comp-custom-tab__tab-options-zone__two { 85 -ms-grid-columns: (1fr)[2]; 86 grid-template-columns: repeat(2, 1fr); 87} 88.comp-custom-tab__tab-options-zone__one { 89 -ms-grid-columns: (1fr)[1]; 90 grid-template-columns: repeat(1, 1fr); 91} 92@media (max-width: 1199px) { 93 .comp-custom-tab__tab-options-zone { 94 -ms-grid-columns: 1fr 10px 1fr; 95 grid-template-columns: repeat(2, 1fr); 96 gap: 10px; 97 } 98} 99@media (max-width: 420px) { 100 .comp-custom-tab__tab-options-zone { 101 gap: 3px; 102 } 103} 104.comp-custom-tab__tab-button { 105 all: unset; 106 cursor: pointer; 107 display: -webkit-box; 108 display: -ms-flexbox; 109 display: flex; 110 -webkit-box-orient: vertical; 111 -webkit-box-direction: normal; 112 -ms-flex-direction: column; 113 flex-direction: column; 114 -webkit-box-align: center; 115 -ms-flex-align: center; 116 align-items: center; 117 -webkit-box-pack: center; 118 -ms-flex-pack: center; 119 justify-content: center; 120 width: auto; 121 height: 90px; 122 font-size: 14px; 123 gap: 14px; 124 border-radius: 5px; 125 background-color: transparent; 126 position: relative; 127} 128.comp-custom-tab__tab-button--active { 129 background-color: #E5FAFF; 130 color: #0071CE; 131 font-weight: bold; 132} 133@media (max-width: 1199px) { 134 .comp-custom-tab__tab-button { 135 -webkit-box-sizing: border-box; 136 box-sizing: border-box; 137 height: 50px; 138 width: auto; 139 -webkit-box-orient: horizontal; 140 -webkit-box-direction: normal; 141 -ms-flex-direction: row; 142 flex-direction: row; 143 gap: 10px; 144 -webkit-box-pack: start; 145 -ms-flex-pack: start; 146 justify-content: start; 147 padding: 7px; 148 border: 1px solid #E5FAFF; 149 } 150} 151.comp-custom-tab__tab-button:hover { 152 border: 2px solid #E5FAFF; 153} 154.comp-custom-tab__tab-button:focus { 155 border: 1px solid #0071CE; 156} 157.comp-custom-tab__tab-button:active { 158 border: none; 159} 160@media (min-width: 1199px) { 161 .comp-custom-tab__tab-button:not(:last-child)::after { 162 content: ""; 163 position: absolute; 164 right: -10px; 165 top: 50%; 166 -webkit-transform: translateY(-50%); 167 transform: translateY(-50%); 168 width: 1px; 169 height: 100%; 170 background-color: #7FB7E6; 171 } 172} 173.comp-custom-tab__tab-option-icon { 174 width: 46px; 175 height: 45px; 176 -o-object-fit: contain; 177 object-fit: contain; 178} 179@media (max-width: 1199px) { 180 .comp-custom-tab__tab-option-icon { 181 width: 30px; 182 height: 38px; 183 } 184} 185.comp-custom-tab__option { 186 display: none; 187 width: 944px; 188 height: 460px; 189 overflow: hidden; 190 border-radius: 8px; 191 -webkit-box-orient: vertical; 192 -webkit-box-direction: normal; 193 -ms-flex-direction: column; 194 flex-direction: column; 195 -webkit-box-align: center; 196 -ms-flex-align: center; 197 align-items: center; 198 -webkit-box-pack: start; 199 -ms-flex-pack: start; 200 justify-content: start; 201} 202.comp-custom-tab__option--active { 203 display: -webkit-box; 204 display: -ms-flexbox; 205 display: flex; 206} 207@media (max-width: 1199px) { 208 .comp-custom-tab__option { 209 width: 100%; 210 height: auto; 211 aspect-ratio: 16/9; 212 } 213} 214@media (max-width: 700px) { 215 .comp-custom-tab__option { 216 aspect-ratio: 1.1666; 217 height: auto; 218 } 219} 220.comp-custom-tab__option iframe { 221 width: 100%; 222 height: 100%; 223} 224 225 226</style> 227 228<#assign parameter = themeDisplay.request.getParameter("value")> 229<#assign activeButton = "comp-custom-tab__tab-button--active" /> 230<#assign activeOption = "comp-custom-tab__option--active" /> 231<#assign classMP = "" /> 232<#assign classMP2 = "" /> 233<#assign classOV = "" /> 234<#assign classOV2 = "" /> 235<#assign classAPP = "" /> 236<#assign classAPP2 = "" /> 237<#assign classKC = "" /> 238<#assign classKC2 = "" /> 239 240<#if parameter == "MP"> 241 <#assign classMP = activeButton /> 242 <#assign classMP2 = activeOption/> 243<#elseif parameter == "OV"> 244 <#assign classOV = activeButton /> 245 <#assign classOV2 = activeOption /> 246<#elseif parameter == "APP"> 247 <#assign classAPP = activeButton /> 248 <#assign classAPP2 = activeOption /> 249<#elseif parameter == "KC"> 250 <#assign classKC = activeButton /> 251 <#assign classKC2 = activeOption /> 252</#if> 253 254 255<div class="comp-custom-tab"> 256 <div class="comp-custom-tab__block"> 257 <div class="comp-custom-tab__presentation-text-zone"> 258 <h2 class="comp-custom-tab__presentation-title"> 259 ${titleFunction.getData()} 260 </h2> 261 <p class="comp-custom-tab__presentation-txt"> 262 ${description.getData()} 263 </p> 264 </div> 265 <div class="comp-custom-tab__tab-options-zone"> 266 <#if getterUtil.getBoolean(elementMariaPaula.isEnableMariaPaula.getData())> 267 <button class="comp-custom-tab__tab-button ${classMP}" role="tab" aria-selected="false" aria-controls="tab-option-1" id="tab-1" 268 onClick=updateUrlParameter('value','MP')> 269 <img class="comp-custom-tab__tab-option-icon" src="${imageMariaPaula.getData()}" alt="" loading="lazy"> 270 <span class="comp-custom-tab__tab-option-txt"> 271 Asistente Maria Paula 272 </span> 273 </button> 274 </#if> 275 <#if getterUtil.getBoolean(elementOficinaVirtual.isEnableOficinaVirtual.getData())> 276 <button class="comp-custom-tab__tab-button ${classOV}" role="tab" aria-selected="false" aria-controls="tab-option-2" id="tab-2" 277 onClick=updateUrlParameter('value','OV')> 278 <img class="comp-custom-tab__tab-option-icon" src="${ImageOficinaVirtual.getData()}" alt="" loading="lazy"> 279 <span class="comp-custom-tab__tab-option-txt"> 280 Oficina Virtual 281 </span> 282 </button> 283 </#if> 284 <#if getterUtil.getBoolean(elementApp.isEnableAPP.getData())> 285 <button class="comp-custom-tab__tab-button ${classAPP}" role="tab" aria-selected="false" aria-controls="tab-option-3" id="tab-3" 286 onClick=updateUrlParameter('value','APP')> 287 <img class="comp-custom-tab__tab-option-icon" src="${imageAPP.getData()}" alt="" loading="lazy"> 288 <span class="comp-custom-tab__tab-option-txt"> 289 App 290 </span> 291 </button> 292 </#if> 293 <#if getterUtil.getBoolean(elementKiosko.isEnableKiosko.getData())> 294 <button class="comp-custom-tab__tab-button ${classKC}" role="tab" aria-selected="false" aria-controls="tab-option-4" id="tab-4" 295 onClick=updateUrlParameter('value','KC')> 296 <img class="comp-custom-tab__tab-option-icon" src="${imageKiosko.getData()}" alt="" loading="lazy"> 297 <span class="comp-custom-tab__tab-option-txt"> 298 Kioskos 299 </span> 300 </button> 301 </#if> 302 </div> 303 <div class="comp-custom-tab__option ${classMP2}" id="tab-option-1" role="tabpanel" aria-labelledby="tab-1"> 304 <iframe src="${elementMariaPaula.enableVideoTutorialMP.urlIframeMariaPaula.getData()}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> 305 </div> 306 <div class="comp-custom-tab__option ${classOV2}" id="tab-option-2" role="tabpanel" aria-labelledby="tab-2"> 307 <iframe src="${elementOficinaVirtual.enableVideoTutorialOF.urlIframeOficinaVirtual.getData()}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> 308 </div> 309 <div class="comp-custom-tab__option ${classAPP2}" id="tab-option-3" role="tabpanel" aria-labelledby="tab-3"> 310 <iframe src="${elementApp.enableVideoTutorialAPP.urlIframeAPP.getData()}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> 311 </div> 312 <div class="comp-custom-tab__option ${classKC2}" id="tab-option-4" role="tabpanel" aria-labelledby="tab-4"> 313 <iframe src="${elementKiosko.enableVideoTutorialKC.urlIframeKioscos.getData()}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> 314 </div> 315 </div> 316</div> 317 318 319<div id="ctnMP" class="container" style="display:none;"> 320 <#if getterUtil.getBoolean(elementMariaPaula.enableCarrouselMP.getData())> 321 322 <#assign pkContent = elementMariaPaula.enableCarrouselMP.idCarrouselContentMP.getData()?eval> 323 <#assign pkClass = pkContent.classPK> 324 <#assign pk_Id = pkClass?number> 325 326 <#assign articleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 327 <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent")> 328 <#assign article = articleLocalService.getLatestArticle(pk_Id)> 329 <#assign articleId = article.getArticleId()> 330 <#assign groupId = article.getGroupId()> 331 332 ${journalContent.getContent(groupId, articleId, "", locale, themeDisplay)} 333 </#if> 334 335 <#if getterUtil.getBoolean(elementMariaPaula.enableRelationshipMP.getData())> 336 337 <#assign pkContent = elementMariaPaula.enableRelationshipMP.idTutorialsRelationshipMP.getData()?eval> 338 <#assign pkClass = pkContent.classPK> 339 <#assign pk_Id = pkClass?number> 340 341 <#assign articleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 342 <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent")> 343 <#assign article = articleLocalService.getLatestArticle(pk_Id)> 344 <#assign articleId = article.getArticleId()> 345 <#assign groupId = article.getGroupId()> 346 347 ${journalContent.getContent(groupId, articleId, "", locale, themeDisplay)} 348 </#if> 349</div> 350 351 352<div id="ctnOV" class="container" style="display:none;"> 353 354 <#if getterUtil.getBoolean(elementOficinaVirtual.enableCarrouselOF.getData())> 355 356 <#assign pkContent = elementOficinaVirtual.enableCarrouselOF.idCarrouselContentOF.getData()?eval> 357 <#assign pkClass = pkContent.classPK> 358 <#assign pk_Id = pkClass?number> 359 360 <#assign articleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 361 <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent")> 362 <#assign article = articleLocalService.getLatestArticle(pk_Id)> 363 <#assign articleId = article.getArticleId()> 364 <#assign groupId = article.getGroupId()> 365 366 ${journalContent.getContent(groupId, articleId, "", locale, themeDisplay)} 367 </#if> 368 369 <#if getterUtil.getBoolean(elementOficinaVirtual.enableRelationshipOF.getData())> 370 <#assign pkContent = elementOficinaVirtual.enableRelationshipOF.idTutorialsRelationshipOF.getData()?eval> 371 <#assign pkClass = pkContent.classPK> 372 <#assign pk_Id = pkClass?number> 373 374 <#assign articleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 375 <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent")> 376 <#assign article = articleLocalService.getLatestArticle(pk_Id)> 377 <#assign articleId = article.getArticleId()> 378 <#assign groupId = article.getGroupId()> 379 380 ${journalContent.getContent(groupId, articleId, "", locale, themeDisplay)} 381 </#if> 382</div> 383 384 385<div id="ctnAPP" class="container" style="display:none;"> 386 <#if getterUtil.getBoolean(elementApp.enableCarrouselAPP.getData())> 387 388 <#assign pkContent = elementApp.enableCarrouselAPP.idCarrouselContentAPP.getData()?eval> 389 <#assign pkClass = pkContent.classPK> 390 <#assign pk_Id = pkClass?number> 391 392 <#assign articleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 393 <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent")> 394 <#assign article = articleLocalService.getLatestArticle(pk_Id)> 395 <#assign articleId = article.getArticleId()> 396 <#assign groupId = article.getGroupId()> 397 398 ${journalContent.getContent(groupId, articleId, "", locale, themeDisplay)} 399 </#if> 400 401 <#if getterUtil.getBoolean(elementApp.enableRelationshipAPP.getData())> 402 <#assign pkContent = elementApp.enableRelationshipAPP.idTutorialsRelationshipAPP.getData()?eval> 403 <#assign pkClass = pkContent.classPK> 404 <#assign pk_Id = pkClass?number> 405 406 <#assign articleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 407 <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent")> 408 <#assign article = articleLocalService.getLatestArticle(pk_Id)> 409 <#assign articleId = article.getArticleId()> 410 <#assign groupId = article.getGroupId()> 411 412 ${journalContent.getContent(groupId, articleId, "", locale, themeDisplay)} 413 </#if> 414</div> 415 416 417<div id="ctnKC" class="container" style="display:none;"> 418 <#if getterUtil.getBoolean(elementKiosko.enableCarrouselKC.getData())> 419 <#assign pkContent = elementKiosko.enableCarrouselKC.idCarrouselContentKC.getData()?eval> 420 <#assign pkClass = pkContent.classPK> 421 <#assign pk_Id = pkClass?number> 422 423 <#assign articleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 424 <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent")> 425 <#assign article = articleLocalService.getLatestArticle(pk_Id)> 426 <#assign articleId = article.getArticleId()> 427 <#assign groupId = article.getGroupId()> 428 429 ${journalContent.getContent(groupId, articleId, "", locale, themeDisplay)} 430 </#if> 431 432 <#if getterUtil.getBoolean(elementKiosko.enableRelationshipKC.getData())> 433 <#assign pkContent = elementKiosko.enableRelationshipKC.idTutorialsRelationshipKC.getData()?eval> 434 <#assign pkClass = pkContent.classPK> 435 <#assign pk_Id = pkClass?number> 436 437 <#assign articleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 438 <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent")> 439 <#assign article = articleLocalService.getLatestArticle(pk_Id)> 440 <#assign articleId = article.getArticleId()> 441 <#assign groupId = article.getGroupId()> 442 443 ${journalContent.getContent(groupId, articleId, "", locale, themeDisplay)} 444 </#if> 445</div> 446 447 448<script> 449 450//funcion que actualiza el parametro en la Url 451 function updateUrlParameter(param, value) { 452 const url = new URL(window.location.href); 453 url.searchParams.set(param, value); 454 window.history.pushState({}, '', url.toString()); 455 456 updateContainers(value); 457 } 458 459//funcion que habilita y deshabilita los Contenidos segun el parametro 460 function updateContainers(value) { 461 462 const containers = document.querySelectorAll('.container'); 463 containers.forEach(container => { 464 container.style.display = 'none'; 465 }); 466 467 if (value) { 468 var id = "ctn"+value; 469 const containerId = id; 470 const container = document.getElementById(containerId); 471 if (container) { 472 container.style.display = 'block'; 473 } 474 } 475 } 476 477//Funcion que captura el parametro en la primera carga de pagina 478 function getParameterByName(name) { 479 var url = window.location.href; 480 name = name.replace(/[\[\]]/g, '\\$&'); 481 var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), 482 results = regex.exec(url); 483 if (!results) return null; 484 if (!results[2]) return ''; 485 return decodeURIComponent(results[2].replace(/\+/g, ' ')); 486 } 487 488 var valor = getParameterByName("value"); 489 var tab1 = $('.comp-custom-tab #tab-1'); 490 var tab2 = $('.comp-custom-tab #tab-2'); 491 var tab3 = $('.comp-custom-tab #tab-3'); 492 var tab4 = $('.comp-custom-tab #tab-4'); 493 494//Funcion que realiza click en cada tab para la primera Carga 495 setTimeout(function() { 496 switch (valor) { 497 case "MP": 498 tab1.trigger('click'); 499 break; 500 case "OV": 501 tab2.trigger('click'); 502 break; 503 case "APP": 504 tab3.trigger('click'); 505 break; 506 case "KC": 507 tab4.trigger('click'); 508 break; 509 default: 510 tab1.trigger('click'); 511 } 512 }, 0); 513 514 515 $(document).ready(function () { 516 517 var tabButtonsOnCustomTab = $('.comp-custom-tab .comp-custom-tab__block .comp-custom-tab__tab-options-zone .comp-custom-tab__tab-button'); 518 519 var tabOptionsOnCustomTab = $('.comp-custom-tab .comp-custom-tab__block .comp-custom-tab__option'); 520 521 var tabButtonsGridTemplateConf = ""; 522 523 if(tabButtonsOnCustomTab.length == 3){ 524 tabButtonsGridTemplateConf = "__three"; 525 } 526 527 if(tabButtonsOnCustomTab.length == 2){ 528 tabButtonsGridTemplateConf = "__two"; 529 } 530 531 if(tabButtonsOnCustomTab.length == 1){ 532 tabButtonsGridTemplateConf = "__one"; 533 } 534 535 if(tabButtonsGridTemplateConf != ""){ 536 537 tabButtonsOnCustomTab.closest(".comp-custom-tab__tab-options-zone").addClass('comp-custom-tab__tab-options-zone' + tabButtonsGridTemplateConf); 538 539 } 540 541 542 543 tabButtonsOnCustomTab.on('click', function() { 544 545 var targetTab = $(this).attr("aria-controls"); 546 547 var isTargetAlreadySelected = $(this).attr("aria-selected"); 548 549 if(isTargetAlreadySelected != 'true'){ 550 551 tabButtonsOnCustomTab.each(function() { 552 553 var thisButton = $(this); 554 555 var thisButtonTarget = thisButton.attr("aria-controls"); 556 557 if(targetTab != thisButtonTarget){ 558 559 thisButton.attr("aria-selected", "false"); 560 thisButton.removeClass('comp-custom-tab__tab-button--active'); 561 } 562 563 if(targetTab == thisButtonTarget){ 564 thisButton.attr("aria-selected", "true"); 565 thisButton.addClass('comp-custom-tab__tab-button--active'); 566 } 567 }); 568 569 tabOptionsOnCustomTab.each(function() { 570 571 var tabOptionElement = $(this); 572 var tabOptionId = tabOptionElement.attr("id"); 573 574 if(tabOptionId != targetTab){ 575 576 tabOptionElement.fadeOut(0); 577 tabOptionElement.removeClass("comp-custom-tab__option--active"); 578 } 579 }); 580 581 $('#'+targetTab).fadeIn(300); 582 $('#'+targetTab).addClass('comp-custom-tab__option--active'); 583 584 } 585 586 }); 587 588 }); 589 590 ///////////////////// 591 592document.addEventListener("DOMContentLoaded", (event) => { 593 594 var carouselElements = $('.cards-img-txt-btn-carousel .cards-img-txt-btn-carousel__container .owl-carousel'); 595 596 for(var i=0; i < carouselElements.length; i++){ 597 var carouselElementsItem = $(carouselElements[i]); 598 599 carouselElementsItem.attr('id', 'cards-img-txt-btn-carousel-Id-'+i); 600 601 } 602 603 604 for(var i=0; i < carouselElements.length; i++){ 605 var getCarouselElement = $('#cards-img-txt-btn-carousel-Id-'+i); 606 607 608 loadCarrouselComplete(getCarouselElement); 609 } 610 611 }); 612 613 function loadCarrouselComplete(elementoPadre){ 614 615 var originalElementsList = elementoPadre.children(".cards-img-txt-btn-carousel__card").get(); 616 617 618 if ($(window).width() < 1200) { 619 620 createAndLoadCardGroups(originalElementsList, elementoPadre); 621 622 dispatchCardsImgTxtBntCarouselOneByOne(elementoPadre); 623 } 624 625 if ($(window).width() >= 1200) { 626 627 elementoPadre.append($(originalElementsList)); 628 dispatchCardsImgTxtBntCarouselThreeByThree(elementoPadre); 629 } 630 631 632 633 $(window).resize(function () { 634 635 console.log('valores originales: ', originalElementsList); 636 637 638 elementoPadre.trigger('destroy.owl.carousel').removeClass('owl-loaded').find('.owl-stage-outer').children().unwrap(); 639 640 elementoPadre.empty(); 641 642 if ($(window).width() < 1200) { 643 644 createAndLoadCardGroups(originalElementsList, elementoPadre); 645 646 setTimeout(() => { 647 dispatchCardsImgTxtBntCarouselOneByOne(elementoPadre); 648 }, 0); 649 } 650 651 if ($(window).width() >= 1200) { 652 653 elementoPadre.append($(originalElementsList)); 654 655 setTimeout(() => { 656 dispatchCardsImgTxtBntCarouselThreeByThree(elementoPadre); 657 }, 0); 658 } 659 660 661 }); 662 663 function createAndLoadCardGroups(originalCards, carouselContainer){ 664 var group = $("<div class='cards-img-txt-btn-carousel__card-group'></div>"); 665 666 originalCards.forEach(function(card, index) { 667 group.append($(card)); 668 669 if ((index + 1) % 3 === 0 || index === originalCards.length - 1) { 670 carouselContainer.append($(group)); 671 group = $("<div class='cards-img-txt-btn-carousel__card-group'></div>"); 672 } 673 }); 674 } 675 676 function dispatchCardsImgTxtBntCarouselThreeByThree(){ 677 678 elementoPadre.owlCarousel({ 679 680 margin: 12, 681 nav:true, 682 navText : ['<div class="cards-img-txt-btn-carousel__back-next-arrow-zone"><i class="material-icons">arrow_back_ios_new</i></div>','<div class="cards-img-txt-btn-carousel__back-next-arrow-zone"><i class="material-icons">arrow_forward_ios</i></div>'], 683 dots: true, 684 items: 3, 685 }); 686 687 var cardsImgTxtBtnCarouselStage = elementoPadre.find('.owl-stage'); 688 689 var stageHeight = cardsImgTxtBtnCarouselStage.outerHeight(); 690 691 cardsImgTxtBtnCarouselStage.css('height', (stageHeight + 10) + 'px'); 692 693 var dotsZone = elementoPadre.find('.owl-dots'); 694 var dotZoneWith = dotsZone.outerWidth(); 695 696 dotsZone.css('left', 'calc(50% - '+(dotZoneWith / 2)+'px)'); 697 698 } 699 700 function dispatchCardsImgTxtBntCarouselOneByOne(){ 701 702 elementoPadre.owlCarousel({ 703 704 margin: 12, 705 nav:true, 706 navText : ['<div class="cards-img-txt-btn-carousel__back-next-arrow-zone"><i class="material-icons">arrow_back_ios_new</i></div>','<div class="cards-img-txt-btn-carousel__back-next-arrow-zone"><i class="material-icons">arrow_forward_ios</i></div>'], 707 dots: true, 708 items: 1, 709 }); 710 711 var cardsImgTxtBtnCarouselStage = elementoPadre.find('.owl-stage'); 712 713 var stageHeight = cardsImgTxtBtnCarouselStage.outerHeight(); 714 715 cardsImgTxtBtnCarouselStage.css('height', (stageHeight + 10) + 'px'); 716 717 var dotsZone = elementoPadre.find('.owl-dots'); 718 var dotZoneWith = dotsZone.outerWidth(); 719 720 dotsZone.css('left', 'calc(50% - '+(dotZoneWith / 2)+'px)'); 721 722 } 723 } 724 725 726</script>