Kimberly-Clark: prototipação e validação para uma plataforma sobre menstruação
Virhe tapahtui prosessoidessa esitysmallia.
The following has evaluated to null or missing:
==> hubPath [in template "805010#805052#1222393" at line 24, column 18]
----
Tip: If the failing expression is known to 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: #if hubPath.getData()?? && hubPath.ge... [in template "805010#805052#1222393" at line 24, column 13]
----
1<#setting url_escaping_charset="UTF-8">
2<#assign
3 groupId = themeDisplay.getLayout().getGroupId()
4 journalArticleId = .vars['reserved-article-id'].data
5 assetVocabularyLocalService = serviceLocator.findService('com.liferay.asset.kernel.service.AssetVocabularyLocalService')
6 journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")
7 catLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService")
8 tagLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetTagLocalService")
9 userLocalService = serviceLocator.findService('com.liferay.portal.kernel.service.UserLocalService')
10 Article = journalArticleLocalService.getArticle(groupId, journalArticleId)
11 classPK = getterUtil.getLong(Article.getResourcePrimKey())
12 categories = catLocalService.getCategories("com.liferay.journal.model.JournalArticle", classPK)
13 tags = tagLocalService.getTags("com.liferay.journal.model.JournalArticle", classPK)
14 currentURL = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()
15 author_id = .vars['reserved-article-author-id'].data?number
16 author_user = userLocalService.getUserById(author_id)
17 author_image = author_user.getPortraitURL(themeDisplay)
18 author_name = author_user.getFullName()
19/>
20<div class="d-flex">
21
22 <section class="section-content col">
23 <div class="container">
24 <#if hubPath.getData()?? && hubPath.getData() != "">
25 <input type="hidden" class="url-cases" data-href="${hubPath.getData()}">
26 </#if>
27 <div class="row justify-content-between row-header d-none d-lg-flex">
28 <div class="col-border">
29 <span class="time"></span> min para ler
30 </div>
31 <div class="col-border content-author d-flex flex-row align-items-center">
32 <div class="img-author img-circle mr-3" style="background-image: url(${author_image});"></div>
33 <div>
34 <span>${author_name}</span>
35 </div>
36 </div>
37 <div class="col-border">
38 <span>
39 ${dateUtil.getDate(Article.getDisplayDate(), "dd", locale)} de
40 ${dateUtil.getDate(Article.getDisplayDate(), "MMMM", locale)},
41 ${dateUtil.getDate(Article.getDisplayDate(), "yyyy", locale)}
42 </span>
43 </div>
44 </div>
45 <div class="row row-content">
46 <article class="d-flex flex-column w-100">
47 <h2 class="h5 text-primary text-center title-category">
48 <#assign categoryName = "">
49 <#assign categoryId = "">
50 <#assign categoryNameType = "">
51 <#assign categoryIdType = "">
52 <#if categories??>
53 <#list categories as category>
54 <#assign vocabularyId = category.getVocabularyId()/>
55 <#assign vocabularyName = assetVocabularyLocalService.getVocabulary(vocabularyId).getName()>
56 <#if vocabularyName?lower_case?contains("categoria")>
57 <#assign categoryName = category.getName()>
58 <#assign categoryId = category.getCategoryId()>
59 </#if>
60 <#if vocabularyName?lower_case?contains("tipo")>
61 <#assign categoryNameType = category.getName()>
62 <#assign categoryIdType = category.getCategoryId()>
63 </#if>
64 </#list>
65 <span data-categoryid="${categoryId}">${categoryName}</span>
66 <span class="d-none category-type-article" data-categoryid="${categoryIdType}">${categoryNameType}</span>
67 </#if>
68 </h2>
69 <h1 class="h3 text-center title-article">
70 ${htmlUtil.escape(.vars['reserved-article-title'].data)}
71 </h1>
72
73 <div class="align-items-center content-author d-flex d-lg-none flex-row">
74 <div class="img-author img-circle mr-3" style="background-image: url(${author_image});"></div>
75 <div class="d-flex flex-column">
76 <span>${author_name}</span>
77 <span>
78 ${dateUtil.getDate(Article.getDisplayDate(), "dd", locale)} de
79 ${dateUtil.getDate(Article.getDisplayDate(), "MMMM", locale)},
80 ${dateUtil.getDate(Article.getDisplayDate(), "yyyy", locale)}
81 </span>
82 </div>
83 </div>
84
85 <#if (Imagem.getData())?? && Imagem.getData() != "">
86 <img class="img-article w-100" alt="${Imagem.getAttribute("alt")}" data-fileentryid="${Imagem.getAttribute("fileEntryId")}" src="${Imagem.getData()}" />
87 </#if>
88 <div class="content-article">
89 ${Conteudo.getData()}
90 </div>
91 </article>
92
93 </div>
94 <div class="row row-tags">
95 <div class="box-tags">
96 <#if tags??>
97 <#list tags as tag>
98 <a href="javascript:;" class="btn">
99 ${tag.getName()}
100 </a>
101 </#list>
102 </#if>
103 </div>
104 </div>
105 <div class="copy-mensage">
106 <div class="toast toast-noticia" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
107 <div class="toast-body d-flex align-items-baseline">
108 <p class="mb-0">Copiado para área de transferência.</p>
109 </div>
110 </div>
111 </div>
112 </div>
113 </section>
114 <div class="redes-sociais">
115 <nav class="nav flex-row flex-lg-column">
116 <a class="nav-social copy-link" title="Copiar para a área de transferência">
117 <!--img src="/o/site-principal/images/icon-link.svg" alt="Ícone para o link"-->
118 <svg width="33" height="17" viewBox="0 0 33 17" fill="none" xmlns="http://www.w3.org/2000/svg">
119 <path d="M21.5711 8.2153C21.5687 12.7514 17.8994 16.3585 13.4428 16.3708C13.4341 16.3712 13.4243 16.3712 13.4151 16.3712L8.3158 16.3712C3.81821 16.3712 0.159843 12.7122 0.159877 8.21527C0.159492 3.71806 3.81857 0.0589816 8.31578 0.0593663L11.1315 0.0593693C11.8782 0.0593697 12.273 0.950466 11.7647 1.49735C11.1169 2.19434 10.5619 2.99047 10.132 3.86532C9.98647 4.16157 9.68829 4.35208 9.3582 4.35208L8.36511 4.35207C6.23841 4.35207 4.47364 6.05014 4.45277 8.17677C4.43172 10.3244 6.17293 12.0785 8.3158 12.0785L13.4148 12.0789C15.554 12.0789 17.2783 10.3456 17.2783 8.21529C17.2781 7.93471 17.2455 7.68438 17.2111 7.49782C17.1866 7.36598 17.1933 7.23025 17.2306 7.10144C17.2678 6.97264 17.3347 6.85432 17.4258 6.75595C17.8117 6.33999 18.3669 6.0689 19.0006 6.0689L20.5982 6.06887C21.0172 6.06887 21.3715 6.37175 21.4449 6.78418C21.5288 7.2566 21.571 7.73548 21.5711 8.2153ZM32.2659 8.21504C32.2659 3.71809 28.6076 0.0591223 24.11 0.0591175L19.0106 0.0591114C19.0015 0.0591111 18.9917 0.0591114 18.9829 0.0594907C14.5264 0.0718546 10.8571 3.67888 10.8547 8.21502C10.8547 8.69481 10.8969 9.17367 10.9809 9.64606C11.0543 10.0585 11.4087 10.3614 11.8276 10.3614L13.4252 10.3613C14.0589 10.3613 14.6141 10.0902 15 9.67429C15.0911 9.57592 15.1579 9.45761 15.1952 9.3288C15.2325 9.19999 15.2392 9.06426 15.2147 8.93242C15.1803 8.74586 15.1477 8.49553 15.1474 8.21495C15.1474 6.08468 16.8718 4.35136 19.011 4.35136L24.11 4.35175C26.2528 4.35175 27.994 6.10583 27.973 8.25347C27.9521 10.3801 26.1874 12.0782 24.0607 12.0782L23.0676 12.0782C22.7375 12.0782 22.4393 12.2687 22.2938 12.5649C21.8639 13.4398 21.3089 14.2359 20.6611 14.9329C20.1528 15.4798 20.5476 16.3709 21.2943 16.3709L24.11 16.3709C28.6072 16.3713 32.2663 12.7123 32.2659 8.21504Z" fill="#292725"/>
120 </svg>
121 </a>
122 <a class="nav-social twitter" title="Twitter">
123 <i class="icon-twitter"></i>
124 </a>
125 <a class="nav-social facebook" title="Facebook">
126 <i class="icon-facebook-sign"></i>
127 </a>
128 <a class="nav-social linkedin" title="Linkedin">
129 <i class="icon-linkedin"></i>
130 </a>
131 </nav>
132 </div>
133</div>
134<style>
135 .col-custom-article .redes-sociais nav {
136 padding-right: 0;
137 }
138 .col-custom-article .breadcrumb-de-pagina-de-exibicao .col-12{
139 padding: 0;
140 }
141 .col-custom-article {
142 margin: 0;
143 }
144 .box-comments-page {
145 max-width: 88.6666%;
146 padding: 5.2rem 4.05rem;
147 box-shadow: 0px 0px 15rem 2rem rgba(0, 0, 0, 0.06);
148 background-color: white;
149 margin-bottom: 8rem;
150 border-radius: 0.5rem;
151 }
152 .box-comments-page .ratings-thumbs .btn .on .lexicon-icon {
153 color: var(--primary);
154 }
155 .row-tags {
156 padding: 0 4.7rem;
157 border-top: 1px solid #F2F2F2;
158 }
159 .box-tags {
160 padding: 2rem;
161 padding-bottom: 1.5rem;
162 }
163 #wrapper .box-tags .btn{
164 background-color: #F2F2F2;
165 background-color:var(--gray-200);
166 color: #828282;
167 color: var(--gray-500);
168 padding: .55rem 1rem;
169 font-size: .7rem;
170 line-height: .9rem;
171 letter-spacing: -0.02em;
172 margin-bottom: 0.5rem;
173 border-radius: .5rem;
174 }
175 .section-content {
176 margin-top: 14rem;
177 margin-bottom: 1.95rem;
178 padding: 0;
179 background-color: white;
180 box-shadow: 0px 0px 15rem 2rem rgba(0, 0, 0, 0.06);
181 border-radius: .5rem;
182 }
183 .section-content .title-article {
184 margin-bottom: 6rem;
185 width: 58%;
186 margin-left: 21%;
187 }
188 .section-content .title-category {
189 margin-bottom: 1.35rem;
190 width: 42%;
191 margin-left: 29%;
192 border-bottom: 1px dashed var(--gray-500);
193 padding-bottom: 1.5rem;
194 }
195 /* author */
196 .content-author .img-author {
197 width: 1.3rem;
198 height: 1.3rem;
199 background-size: cover;
200 background-position: center;
201 margin-right: .6rem;
202 }
203 .row-content {
204 padding: 5rem 4.7rem 5rem 4.7rem;
205 }
206
207 .row-content article .embed-responsive{
208 width: 100% !important;
209 }
210
211 .row-content article iframe{
212 margin: 0 auto;
213 width: 100%;
214 height: 100%;
215 }
216 .col-border {
217 padding: 2.35rem 8.5% 2.35rem 8%;
218 border-bottom: 1px solid #F2F2F2;
219 }
220 .content-author {
221 flex: 1;
222 justify-content: center;
223 padding: 0 5%;
224 border-left: 1px solid #F2F2F2;
225 border-right: 1px solid #F2F2F2;
226 }
227 .img-article {
228 width: 100%;
229 border-radius: .5rem;
230 margin-bottom: 4rem;
231 }
232 .section-content article img {
233 max-width: 100%;
234 height: auto;
235 }
236 .section-content article figcaption {
237 font-size: .7rem;
238 line-height: 2.25rem;
239 letter-spacing: -0.03em;
240 }
241 .section-content article cite {
242 font-size: 1.5rem;
243 line-height: 2rem;
244 letter-spacing: -0.02em;
245 font-weight: normal;
246 padding-top: 1.15rem;
247 padding-bottom: 2.15rem;
248 border-top: 1px solid #333333;
249 display: block;
250 position: relative;
251 }
252 .section-content article cite:after {
253 content: '';
254 display: block;
255 width: 100%;
256 height: 1px;
257 background: #333;
258 position: absolute;
259 bottom: 0;
260 }
261 .section-content article cite:before {
262 content: '';
263 display: block;
264 width: 1.5rem;
265 height: 1.198rem;
266 background-image: url("data:image/svg+xml,%3Csvg width='31' height='25' viewBox='0 0 31 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.8694 0.367188V2.27086C10.1455 3.69475 8.19534 5.18055 7.01909 6.72825C5.84283 8.27596 5.25471 9.96295 5.25471 11.7892C5.25471 12.8726 5.40948 13.6155 5.71902 14.0179C5.9976 14.4513 6.3381 14.668 6.7405 14.668C7.14291 14.668 7.6846 14.5596 8.36559 14.343C9.04658 14.0953 9.66566 13.9715 10.2228 13.9715C11.492 13.9715 12.5908 14.4513 13.5194 15.4109C14.479 16.3395 14.9588 17.4848 14.9588 18.8468C14.9588 20.3326 14.3862 21.6172 13.2409 22.7006C12.0956 23.753 10.6717 24.2792 8.9692 24.2792C6.89527 24.2792 5.02255 23.3816 3.35103 21.5862C1.67951 19.7909 0.84375 17.5777 0.84375 14.9466C0.84375 11.8512 1.86523 8.97242 3.9082 6.31037C5.98213 3.61737 8.9692 1.63631 12.8694 0.367188ZM28.6151 0.506481V2.27086C25.4887 4.0662 23.4302 5.67581 22.4397 7.0997C21.4492 8.52359 20.9539 10.1951 20.9539 12.1143C20.9539 12.981 21.1242 13.631 21.4647 14.0644C21.8052 14.4977 22.1611 14.7144 22.5326 14.7144C22.8731 14.7144 23.3838 14.5906 24.0648 14.343C24.7458 14.0953 25.4268 13.9715 26.1078 13.9715C27.3769 13.9715 28.4758 14.4358 29.4044 15.3644C30.364 16.2621 30.8437 17.3765 30.8437 18.7075C30.8437 20.2242 30.2401 21.5398 29.0329 22.6541C27.8567 23.7685 26.4018 24.3257 24.6684 24.3257C22.6254 24.3257 20.7837 23.4435 19.1431 21.6791C17.5025 19.9147 16.6823 17.717 16.6823 15.0859C16.6823 11.8357 17.7192 8.87956 19.7931 6.21751C21.8671 3.5245 24.8077 1.62083 28.6151 0.506481Z' fill='%23333333'/%3E%3C/svg%3E%0A");
267 background-repeat: no-repeat;
268 position: absolute;
269 right: 0;
270 bottom: 0.5rem;
271 transform: rotateY(180deg);
272 }
273 .section-content .content-article > * {
274 padding: 0 2rem;
275 }
276 .section-content .content-article > figure, .section-content .content-article > img {
277 padding: 0;
278 }
279 #wrapper .ratings-thumbs {
280 margin: 0 1rem;
281 }
282 #wrapper .ratings-thumbs button span {
283 padding: 0;
284 margin: 0;
285 height: auto;
286 }
287 .ratings-like button:hover:not(:disabled) .lexicon-icon, .ratings-thumbs button:hover:not(:disabled) .lexicon-icon {
288 transform: scale(1.1);
289 }
290 .col-custom-article > .col-lg-1 {
291 flex: 0 0 11.33333%;
292 max-width: 11.33333%;
293 }
294 .col-custom-article > .col-lg-11 {
295 flex: 0 0 88.66666%;
296 max-width: 88.66666%;
297 }
298 .redes-sociais {
299 flex: 0 0 11.33333%;
300 max-width: 11.33333%;
301 }
302
303 body:not(.has-edit-mode-menu) .redes-sociais {
304 margin-top: 14rem;
305 }
306
307 .redes-sociais nav {
308 padding: 0 1rem;
309 align-content: end;
310 align-items: end;
311 justify-content: end;
312 position: sticky;
313 position: -webkit-sticky;
314 top: 0;
315 }
316 body.has-control-menu .redes-sociais nav {
317 top: 3.2rem;
318 }
319
320 .redes-sociais .nav-social {
321 width: 3.8585rem;
322 height: 3.8585rem;
323 border: 1px solid #EFEFEF;
324 background: #FFFFFF;
325 display: flex;
326 align-items: center;
327 justify-content: center;
328 border-radius: 50%;
329 margin-bottom: .8rem;
330 color: inherit;
331 transition: all 0.4s ease-in;
332 font-size: 1.25rem;
333 }
334
335 .redes-sociais .nav-social:hover {
336 color: var(--primary);
337 border-color: var(--primary);
338 text-decoration: none;
339 }
340
341 .redes-sociais .nav-social svg path{
342 transition: all 0.4s ease-in;
343 }
344
345 .redes-sociais .nav-social:hover svg path {
346 fill: var(--primary);
347 }
348
349 .redes-sociais .nav-social .icon-link{
350 transform: rotate(135deg);
351 position: relative;
352 left: -1px;
353 }
354
355 .section-content .copy-mensage {
356 position: fixed;
357 bottom: 4rem;
358 right: 2rem;
359 }
360
361 .section-content .copy-mensage .toast{
362 max-width: 25rem;
363 }
364
365 @media (max-width: 1279.98px) {
366 .section-content .title-category,
367 .section-content .title-article{
368 width: 100%;
369 margin-left: 0;
370 }
371
372 .section-content .title-category {
373 border-bottom: none;
374 padding-bottom: 0;
375 }
376 }
377
378 @media (max-width: 991.98px) {
379 .col-custom-article {
380 margin: 0 -1rem;
381 }
382 .redes-sociais {
383 display: none;
384 }
385 .section-content h1 {
386 margin-bottom: 4.375rem;
387 text-align: left!important;
388 }
389 .section-content h2 {
390 margin-bottom: 0.688rem;
391 text-align: left!important;
392 }
393 .section-content .content-article p {
394 padding: 0 0.438rem;
395 }
396 .section-content .img-article {
397 margin-bottom: 1.5rem;
398 }
399 #wrapper .section-content h3, #wrapper .section-content .h3{
400 font-size: 1.563rem;
401 line-height: 2rem;
402 letter-spacing: -0.02em;
403 }
404 .col-custom-article > div {
405 flex: 0 0 100% !important;
406 max-width: 100% !important;
407 }
408 .section-content {
409 margin-top: 0;
410 box-shadow: initial;
411 }
412 .section-content .title-article{
413 margin-bottom: 3rem;
414 }
415 .row-content {
416 padding: 5rem 0;
417 }
418 .row-tags {
419 padding: 0;
420 }
421 .box-tags {
422 width: 100%;
423 max-width: 100%;
424 overflow: auto;
425 padding: 1rem 0;
426 display: flex;
427 flex-wrap: nowrap;
428 list-style: none;
429 margin-bottom: 0;
430 }
431
432 #wrapper .box-tags .btn {
433 margin-right: 0.486rem;
434 margin-bottom: 0;
435 white-space: nowrap;
436 font-size: 0.875rem;
437 padding: 0.688rem 1.188rem;
438 }
439
440 .section-content article cite:before {
441 width: 1.938rem;
442 height: 1.563rem;
443 }
444
445 .content-author {
446 padding: 0;
447 margin: 1.875rem 0;
448 border: none;
449 justify-content: start;
450 }
451 .content-author .img-author {
452 width: 2.813rem;
453 height: 2.813rem;
454 }
455 .content-author span{
456 font-size: 0.875rem;
457 line-height: 1.125rem;
458 color: var(--gray-700);
459 }
460 .content-author span:last-child{
461 color: var(--gray-500);
462 }
463 .box-comments-page {
464 padding:2rem 1rem;
465 box-shadow: none;
466 width: 100%;
467 max-width: 100%;
468 margin-bottom: 2.438rem;
469 margin-bottom: 0;
470 padding-bottom: 0;
471 }
472 #wrapper .box-comments-page .btn-sm {
473 padding: 1rem;
474 }
475 .section-content .copy-mensage {
476 width: 100%;
477 bottom: 10%;
478 right: initial;
479 left: 0;
480 display: flex;
481 justify-content: center;
482 }
483 }
484</style>
485
486<script>
487 $(function(){
488
489 function appendCategoryBreadcrumb() {
490 const categoryType = $('.category-type-article').text();
491 $(".breadcrumb-de-pagina-de-exibicao .active").text(categoryType);
492 }
493
494 function appendUrlTags(){
495 (function exists() {
496
497 if (!!document.querySelector('.structuredContents .load-more')) {
498 var urlList = $('.structuredContents .load-more').attr('href').split('?')[0];
499 }else{
500 var urlList = $('.url-cases').data().href;
501 }
502
503 if(urlList) {
504 $('.box-tags a').each(function(i, e){
505 $(e).attr('href', urlList+'?tag='+e.innerHTML.trim());
506 })
507 }
508 })();
509 }
510
511 function socialMedia(){
512 var text = encodeURIComponent($('.section-content h1').text());
513 var url = window.location.href;
514 var user_id = "";
515 var hash_tags = $('.box-tags a').map(function(){
516 return $.trim($(this).text());
517 }).get();
518 var params = "menubar=no,toolbar=no,status=no,width=570,height=570"; // for window
519
520 var facebook = document.querySelector('.facebook');
521 var twitter = document.querySelector('.twitter');
522 var linkedin = document.querySelector('.linkedin');
523 let copyLink = document.querySelector('.copy-link')
524
525 facebook.addEventListener('click', function(ev) {
526 let shareUrl = "http://www.facebook.com/sharer/sharer.php?u="+url;
527 window.open(shareUrl,"NewWindow" , params);
528 });
529
530 twitter.addEventListener('click', function(ev) {
531 let shareUrl = "https://twitter.com/intent/tweet?url="+url+"&text="+text+"&via="+user_id+"&hashtags="+hash_tags;
532 window.open(shareUrl,"NewWindow" , params);
533 });
534
535 linkedin.addEventListener('click', function(ev) {
536 let shareUrl = "https://www.linkedin.com/shareArticle?mini=true&url="+url+"&title="+text+"&summary="+hash_tags;
537 window.open(shareUrl,"NewWindow" , params);
538 });
539
540 $(copyLink).on( "click", function(e) {
541 e.preventDefault();
542 $('.toast-noticia').toast('show');
543
544 navigator.clipboard.writeText(window.location.href);
545 });
546
547 }
548
549 function readingTime() {
550 const text = document.querySelector(".section-content article").innerText;
551 const wpm = 225;
552 const words = text.trim().split(/\s+/).length;
553 const time = Math.ceil(words / wpm);
554 document.querySelector(".section-content .time").innerText = time;
555 }
556
557 $('.section-content').closest('.row').addClass('col-custom-article');
558 $(".portlet-boundary_com_liferay_comment_page_comments_web_portlet_PageCommentsPortlet_").addClass('box-comments-page');
559 readingTime();
560 socialMedia();
561 appendUrlTags();
562 appendCategoryBreadcrumb();
563 })
564</script>