Athletes of the Week
This is where the description of the files goes.
| There was a problem with a Velocity script | |
| Page | /component-aotw-view |
| Error | VM #headshot: too few arguments to macro. Wanted 1 got 0 at bjuffr3jkhyh76n9/component-aotw-view[line 309, column 17] |
| Page source: |
1: $website.addCss("/assets/css/aotw.css")
2:
3: #***********************************************
4: # DEFAULT VARIABLES
5: # *********************************************#
6: #set ($layout = $!request.getAttribute("component-aotw-layout"))
7: #set ($players = $!request.getAttribute("component-aotw-players"))
8: #set ($page = $!request.getAttribute("component-aotw-page"))
9: #set ($id = $!request.getAttribute("component-aotw-id"))
10: #set ($details = $!request.getAttribute("component-aotw-details"))
11: #set ($headshotWidth = $!request.getAttribute("component-aotw-headshot-width"))
12: #set ($archive = $!request.getAttribute("component-aotw-archive"))
13: #set ($archiveText = $!request.getAttribute("component-aotw-archive-text"))
14: #set ($showSport = $!request.getAttribute("component-aotw-show-sport"))
15: #set ($dots = $!request.getAttribute("component-aotw-show-dots"))
16: #set ($sliderModule = "https://theme-assets.prestosports.com/theme-assets/generic/assets/js/slick-slider-init.js")
17: #set ($showLeadin = $!request.getAttribute("component-headlines-show-leadin"))
18: #set ($autoPlay = $!request.getAttribute("component-aotw-auto-play"))
19: #set ($detailsInSlide = $!request.getAttribute("component-aotw-detailsInSlide"))
20: #set ($fullStory = $!request.getAttribute("component-aotw-fullStory"))
21: #set ($fullStoryText = $!request.getAttribute("component-aotw-fullStory-text"))
22:
23: ###set ($staticTitle = $!request.getAttribute("component-title")) ## This is needed to be able to consistently pass a
24:
25: ## KEEP TRACK OF INSTANCES OF THIS COMPONENT TO CREATE A UNIQUE ID
26: #set ($instance = 1)
27: #if ($request.getAttribute("${id}-instance"))
28: #set ($instance = $request.getAttribute("${id}-instance"))
29: #set ($instance = $tool.math.add($instance, 1))
30: #end
31: #set ($uid = "${id}-${instance}")
32: #set ($uidSanitized = $uid.replace("-", "_")) ## For JS variable names to avoid issues with hyphens.
33: $!request.setAttribute("${id}-instance", $instance)
34:
35:
36: ## Separate players into odd and even lists
37: #set ($oddPlayers = [])
38: #set ($evenPlayers = [])
39: #foreach ($player in $players)
40: #if($velocityCount % 2 == 0)
41: #set($dummy = $evenPlayers.add($player))
42: #else
43: #set($dummy = $oddPlayers.add($player))
44: #end
45: #end
46:
47: #macro(archive)
48: #if ($archive)
49: <div class="archive-link align-center">
50: <a href="${page.url}" class="btn btn-link">${archiveText}</a>
51: </div>
52: #end
53: #end
54:
55: #macro(details)
56: #if ($details == true)
57: $!request.setAttribute("component-inc-header", $page)
58: $!request.setAttribute("component-inc-header-showThumbnail", true)
59: $website.includeAgain('component-inc-header')
60: #end
61: #end
62:
63: #macro (name)
64: <a href="${player.page.url}" class="player-name stretched-link fs-5">$player.name</a>
65: #end
66:
67: #macro (headshot $extraClass)
68: <div class="headshot bg-light text-dark $extraClass overflow-hidden">
69: #if ($player.headshot.length() > 0)
70: #set ($src = $player.headshot)
71: #elseif ($website.exists("/images/setup/default-headshot.png"))
72: #set ($src = "/images/setup/default-headshot.png")
73: #elseif ($website.exists("/images/setup/headshot_default.jpg"))
74: #set ($src = "/images/setup/headshot_default.jpg")
75: #else
76: #set ($src = "/info/images/default-headshot.png")
77: #end
78:
79: #set($extraClass = "")
80: #if($src.contains('default'))
81: #set($extraClass = "deault-thumbnail")
82: #end
83: <div class="headshot-holder $extraClass" style="background-image:url(${src}?max_width=${headshotWidth});">
84: <img class="img-fluid invisible" src="${src}?max_width=${headshotWidth}" alt="${player.name} bio photo" />
85: </div>
86:
87: </div>
88: #end
89:
90: #macro (headshotCutout)
91: #if ($player.headshot.length() > 0)
92: #set ($ext_starts_at = $player.headshot.lastIndexOf("."))
93: #set ($cutout_src = $player.headshot.substring(0, $ext_starts_at))
94: <div class="headshot-cutout" style="background-image:url(${cutout_src}_cutout.png)"></div>
95: #end
96: #end
97:
98: #macro (sport)
99: #if ($showSport && $player.sport.length() > 0)
100: <div class="player-sport">$player.sport</div>
101: #end
102: #end
103:
104: #macro (bioAttrs)
105: <div class="player-attrs">
106: #if ($player.bio.get("position").length() > 0)
107: <span class="pos">$player.bio.get("position")</span>
108: #end
109: #if ($player.bio.get("number").length() > 0)
110: <span class="jersey">#${player.bio.get("number")}</span>
111: #end
112: </div>
113: #end
114:
115: #macro (teamLogo)
116: #if ($player.team.teamId.length() > 0)
117: <div class="team-logo"><img src="${website.teamLogo($player.team.teamId)}" alt="${player.team.name} logo" class="img-fluid" /></div>
118: #end
119: #end
120:
121: #macro (synopsis)
122: #if($player.page.contentType == 'loki/bio') ## Bio
123: #set ($bio = $player.page.getDataAsObject())
124: #set ($text = $bio.synopsis)
125: #else ## Rich Article
126: #set ($text = $player.leadIn)
127: #end
128:
129: #if ($text.length() > 0)
130: <div class="synopsis clamp-3">$text</div>
131: #end
132: #end
133:
134: ## Render individual player blocks.
135: #macro (playerBlock $players)
136: #foreach ($player in $players)
137: <div class="player">
138: #headshot('ratio')
139: <div class="player-details bg-white p-2 text-center">
140: #name
141: #sport
142: </div>
143: </div>
144: #end
145: #end
146:
147: ## If there are more than one player, render the players inside a slider structure.
148: ## If there is only one player, render the player block without creating a slider.
149: #macro (slider $players $sliderClass)
150: #if ($players.size() > 1)
151: <div class="slider ${sliderClass}-${uid}">
152: #playerBlock($players)
153: </div>
154: #else
155: #playerBlock($players)
156: #end
157: #end
158:
159:
160:
161: #macro (layoutStandard)
162: <div class="players">
163: <div class="details-wrapper">
164: #details
165: </div>
166: #foreach ($player in $players)
167: <div class="player desktop">
168: #headshot('ratio')
169: <div class="player-details bg-white p-2 text-center">
170: #name
171: #sport
172: </div>
173: </div>
174: #end
175: </div>
176: #end
177:
178:
179:
180: #macro (layoutInline)
181: <div class="details-wrapper">
182: #details
183: </div>
184:
185: <div class="players mobile" #if ($players.size() > 3) data-module="$sliderModule" data-settings-id="${uid}-slick-settings" #end>
186: #foreach ($player in $players)
187: <div class="player position-relative overflow-hidden bg-dark text-white">
188: #headshot('ratio')
189: <div class="player-details">
190: #teamLogo
191: <div class="player-bio">
192: #name
193: #sport
194: #bioAttrs
195: </div>
196: </div>
197: </div>
198: #end
199: </div>
200:
201: #if ($players.size() > 3)
202: $request.setAttribute('icl-slickSlider-script', true)
203: <script>
204: window['${uid}-slick-settings'] = {
205: autoplay: false,
206: slidesToShow: 1,
207: slidesToScroll: 1,
208: infinite: false,
209: responsive: [{
210: breakpoint: 576,
211: settings: {
212: slidesToShow: 3,
213: slidesToScroll: 1
214: }
215: }]
216: }
217: </script>
218: #end
219: #end
220:
221: #macro (layoutAlign)
222: <div class="players" #if ($players.size() > 1) data-module="$sliderModule" data-settings-id="${uid}-slick-settings" #end>
223: #foreach ($player in $players)
224: $!request.setAttribute("component-title", $staticTitle) ## needed because the component-inc-header clears the title after each include.
225: <div class="player position-relative d-flex flex-row flex-nowrap justify-content-center align-items-center">
226: <div class="player-details flex-fill ">
227: #details()
228: <div class="player-bio">
229: <a href="${player.page.url}" class="player-name">$player.name</a>
230: #sport
231: #bioAttrs
232: #if($showLeadin) #synopsis #end
233: </div>
234: </div>
235: <div class="player-headshot">
236: <div class="headshot-wrapper">
237: #headshot('')
238: #headshotCutout
239: </div>
240: </div>
241: </div>
242: #end
243: </div>
244:
245: #if ($players.size() > 1)
246: $request.setAttribute('icl-slickSlider-script', true)
247: <script>
248: window['${uid}-slick-settings'] = {
249: autoplay: true,
250: autoplaySpeed: 8000,
251: infinite: true,
252: adaptiveHeight: true
253: }
254: </script>
255: #end
256: #end
257:
258: #macro (layoutBio)
259: #if (!$detailsInSlide)
260: <div class="details-wrapper">
261: #details
262: </div>
263: #end
264:
265: <div class="players" #if ($players.size() > 1) data-module="$sliderModule" data-settings-id="${uid}-slick-settings" #end>
266: #foreach ($player in $players)
267: $!request.setAttribute("component-title", $staticTitle) ## needed because the component-inc-header clears the title after each include.
268: <div class="player position-relative overflow-hidden">
269: <div class="player-headshot">
270: #headshot('ratio')
271: </div>
272: <div class="player-details">
273: <div class="player-bio">
274: #if ($detailsInSlide)
275: #details
276: #end
277: <a href="${player.page.url}" class="player-name">$player.name</a>
278: #if ($fullStory)
279: <a href="${player.page.url}" class="fs-6 full-story-link">$fullStoryText</a>
280: #end
281: #sport
282: #bioAttrs
283: #synopsis
284: </div>
285: </div>
286: </div>
287: #end
288: </div>
289:
290: #if ($players.size() > 1)
291: $request.setAttribute('icl-slickSlider-script', true)
292: <script>
293: window['${uid}-slick-settings'] = {
294: autoplay: $autoPlay,
295: dots: $dots
296: }
297: </script>
298: #end
299: #end
300:
301: #macro (layoutSlider)
302: <div class="details-wrapper">
303: #details
304: </div>
305:
306: <div class="players" #if ($players.size() > 1) data-module="$sliderModule" data-settings-id="${uid}-slick-settings" #end>
307: #foreach ($player in $players)
308: <div class="player position-relative overflow-hidden bg-dark text-white">
309: #headshot
310: <div class="player-details">
311: <div class="player-bio">
312: #name
313: #sport
314: #bioAttrs
315: </div>
316: </div>
317: </div>
318: #end
319: </div>
320:
321: #if ($players.size() > 1)
322: $request.setAttribute('icl-slickSlider-script', true)
323: <script>
324: window['${uid}-slick-settings'] = {
325: autoplay: true,
326: slidesToShow: 1,
327: slidesToScroll: 1,
328: infinite: true,
329: responsive: [{
330: breakpoint: 576,
331: settings: {
332: slidesToShow: 3,
333: slidesToScroll: 1
334: }
335: },
336: {
337: breakpoint: 991,
338: settings: {
339: slidesToShow: 5,
340: slidesToScroll: 1
341: }
342: }]
343: }
344: </script>
345: #end
346: #end
347: #macro (layoutDual)
348: <div class="details-wrapper">
349: #details
350: </div>
351: <div class="d-sm-block d-none">
352: <div class="players player_desktop">
353: #slider($oddPlayers 'slider-odd')
354: #slider($evenPlayers 'slider-even')
355: </div>
356: </div>
357: <div class="d-block d-sm-none">
358: <div class="players player_mobile">
359: #foreach ($player in $players)
360: $!request.setAttribute("component-title", $staticTitle) ## needed because the component-inc-header clears the title after each include.
361: <div class="player position-relative overflow-hidden">
362: <div class="player-headshot">
363: #headshot('ratio')
364: </div>
365: <div class="player-details">
366: <div class="player-bio">
367: #if ($detailsInSlide)
368: #details
369: #end
370: <a href="${player.page.url}" class="player-name">$player.name</a>
371: </div>
372: </div>
373: </div>
374: #end
375: </div>
376: </div>
377: ## Check if either $oddPlayers.size() or $evenPlayers.size() is greater than one before rendering the navigation controls and including the script.
378: ## If there are fewer than two players, the navigation controls and script are not included, but the single player markup is still displayed.
379: #if ($oddPlayers.size() > 1 || $evenPlayers.size() > 1)
380: <div class="slider-navigation">
381: <button class="btn btn-outline-secondary slick-prev prev-${uid}" aria-label="Previous slide" type="button">
382: <span class="fa fa-chevron-left" aria-hidden="true"></span>
383: <span class="sr-only">Previous</span>
384: </button>
385: <button class="btn btn-outline-secondary slick-pp pp-${uid} pause" aria-label="Stop slide rotation" type="button">
386: <span class="fa fa-pause" aria-hidden="true"></span>
387: <span class="sr-only">Pause</span>
388: </button>
389: <button class="btn btn-outline-secondary slick-next next-${uid}" aria-label="Next slide" type="button">
390: <span class="fa fa-chevron-right" aria-hidden="true"></span>
391: <span class="sr-only">Next</span>
392: </button>
393: </div>
394:
395: $request.setAttribute('icl-slickSlider-script', true)
396:
397: <script>
398: $(document).ready(function(){
399: /*
400: Used $uidSanitized for JavaScript variable names to avoid issues with hyphens.
401: Ensured all classes and identifiers in the JavaScript code use ${uid} for CSS classes and ${uidSanitized} for JavaScript variable names.
402: */
403:
404: let currentMode = null;
405: function destroySlider($el) {
406: if ($el.hasClass("slick-initialized")) {
407: $el.slick('unslick');
408: }
409: }
410:
411: function initDesktopSlider() {
412: destroySlider($(".player_mobile"));
413: $('.player_desktop .slider').each(function(){
414: destroySlider($(this));
415: })
416:
417: var isPlaying_${uidSanitized} = $autoPlay;
418:
419: var oddSliderSettings_${uidSanitized} = {
420: autoplay: $autoPlay,
421: infinite: true,
422: dots: $dots,
423: slidesToShow: 1,
424: slidesToScroll: 1,
425: fade: true,
426: arrows: false
427: };
428:
429: var evenSliderSettings_${uidSanitized} = {
430: autoplay: $autoPlay,
431: infinite: true,
432: dots: $dots,
433: slidesToShow: 1,
434: slidesToScroll: 1,
435: fade: true,
436: arrows: false
437: };
438:
439: if ($oddPlayers.size() > 1 && $evenPlayers.size() > 1) {
440: oddSliderSettings_${uidSanitized}.asNavFor = '.slider-even-${uid}';
441: evenSliderSettings_${uidSanitized}.asNavFor = '.slider-odd-${uid}';
442: }
443:
444: if ($oddPlayers.size() > 1) {
445: $('.slider-odd-${uid}').slick(oddSliderSettings_${uidSanitized});
446: }
447:
448: if ($evenPlayers.size() > 1) {
449: $('.slider-even-${uid}').slick(evenSliderSettings_${uidSanitized});
450: }
451:
452: $('.next-${uid}').click(function() {
453: $('.slider-odd-${uid}').slick('slickNext');
454: $('.slider-even-${uid}').slick('slickNext');
455: });
456:
457: $('.prev-${uid}').click(function() {
458: $('.slider-odd-${uid}').slick('slickPrev');
459: $('.slider-even-${uid}').slick('slickPrev');
460: });
461:
462: $('.pp-${uid}').click(function() {
463: if (isPlaying_${uidSanitized}) {
464: $('.slider-odd-${uid}').slick('slickPause');
465: $('.slider-even-${uid}').slick('slickPause');
466: $(this).attr('aria-label', 'Start slide rotation').removeClass('pause').addClass('play');
467: $('.fa', this).removeClass('fa-pause').addClass('fa-play');
468: $('.sr-only', this).text('Play');
469: } else {
470: $('.slider-odd-${uid}').slick('slickPlay');
471: $('.slider-even-${uid}').slick('slickPlay');
472: $(this).attr('aria-label', 'Stop slide rotation').removeClass('play').addClass('pause');
473: $('.fa', this).removeClass('fa-play').addClass('fa-pause');
474: $('.sr-only', this).text('Pause');
475: }
476: isPlaying_${uidSanitized} = !isPlaying_${uidSanitized};
477: });
478:
479: }
480:
481:
482: function initMobileSlider() {
483: destroySlider($(".slider1"));
484: destroySlider($(".player_mobile"));
485: $('.player_desktop .slider').each(function(){
486: destroySlider($(this));
487: })
488:
489:
490: $(".player_mobile").slick({
491: dots: true,
492: arrows: true
493: });
494: }
495: function checkMode() {
496: const width = $(window).width();
497:
498: if (width > 567) {
499: if (currentMode !== 'desktop') {
500: currentMode = 'desktop';
501: initDesktopSlider();
502: }
503: } else {
504: if (currentMode !== 'mobile') {
505: currentMode = 'mobile';
506: initMobileSlider();
507: }
508: }
509: }
510: checkMode();
511: $(window).on('resize', checkMode);
512:
513: });
514: </script>
515: #end
516: #end
517:
518:
519: #***********************************************
520: # HTML OUTPUT
521: # *********************************************#
522: #if ($players.size() > 0)
523: <div class="ps-component component-aotw layout-${layout} d-flex flex-column gap-3" id="${uid}">
524: <div class="layout-wrapper position-relative">
525: #if ($layout == "standard")
526: #layoutStandard
527: #elseif ($layout == "inline")
528: #layoutInline
529: #elseif ($layout == "align")
530: #layoutAlign
531: #elseif ($layout == "bio")
532: #layoutBio
533: #elseif ($layout == "slider")
534: #layoutSlider
535: #elseif ($layout == "dual" || $layout == "elite")
536: #layoutDual
537: #end
538: </div>
539: #archive
540: </div>
541: #end
|