Index.html 4.65 KB
Newer Older
1
<f:layout name="Default"/>
Johannes Kreiner's avatar
Johannes Kreiner committed
2
3

<f:section name="main">
4
5
6
	<f:if condition="{debugOutput}">
		{debugOutput -> f:format.raw()}
	</f:if>
7

8
	<f:if condition="{response.kind} == 'youtube#playlistItemListResponse' && {feed -> f:count() > 0}">
9
10
		<f:then>
			<div class="sg-youtube-playlist">
11
				<f:if condition="{feed -> f:count()} === 1">
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
					<f:then>
						<ul class="sg-youtube">
							<li class="sg-youtube-item-container sg-youtube-item-single">
								<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
									<f:if condition="{feed.0.thumbnail}">
										<div class="sg-youtube-image">
											<img src="{feed.0.thumbnail}" alt="{feed.0.title}"/>
										</div>
									</f:if>
									<f:if condition="{feed.0.title}">
										<div class="sg-youtube-title">
											<h3 class="h3">
												<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
											</h3>
										</div>
									</f:if>
28
									<f:if condition="{showDescription} && {feed.0.description}">
29
30
31
32
										<div class="sg-youtube-text">
											<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
										</div>
									</f:if>
33
34
35
36
37
								</a>
							</li>
						</ul>
					</f:then>
					<f:else>
38
39
						<div class="sg-youtube">
							<div class="sg-youtube-item-container">
40
41
								<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
									<f:if condition="{feed.0.thumbnail}">
42
										<div class="sg-youtube-image">
43
											<img src="{feed.0.thumbnail}" alt="{feed.0.title}"/>
44
45
										</div>
									</f:if>
46
									<f:if condition="{showTitle} && {feed.0.title}">
47
48
										<div class="sg-youtube-title">
											<h3 class="h3">
49
												<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
50
51
52
											</h3>
										</div>
									</f:if>
53
									<f:if condition="{showDescription} && {feed.0.description}">
54
55
56
57
										<div class="sg-youtube-text">
											<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
										</div>
									</f:if>
58
59
								</a>
							</div>
60
						</div>
61
62
63
64
65
66
67
68
69
70
						<ul class="sg-youtube">
							<f:for each="{feed}" as="feedItem" iteration="feedIterator">
								<f:if condition="!{feedIterator.isFirst}">
									<li class="sg-youtube-item-container sg-youtube-item-list">
										<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
											<f:if condition="{feedItem.thumbnail}">
												<div class="sg-youtube-image">
													<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
												</div>
											</f:if>
71
											<f:if condition="{showTitle} && {feedItem.title}">
72
73
74
75
76
77
78
79
												<div class="sg-youtube-title">
													<h3 class="h3">
														<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
													</h3>
												</div>
											</f:if>
										</a>
									</li>
80
								</f:if>
81
82
83
84
							</f:for>
						</ul>
					</f:else>
				</f:if>
85
86
87
88
89
90
			</div>
		</f:then>
		<f:else>
			<ul class="sg-youtube sg-youtube-default">
				<f:for each="{feed}" as="feedItem" iteration="feedIterator">
					<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single')}">
91
						<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
92
93
94
95
96
							<f:if condition="{feedItem.thumbnail}">
								<div class="sg-youtube-image">
									<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
								</div>
							</f:if>
97
							<f:if condition="{showTitle} && {feedItem.title}">
98
99
100
101
102
103
								<div class="sg-youtube-title">
									<h3 class="h3">
										<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
									</h3>
								</div>
							</f:if>
104
							<f:if condition="{showDescription} && {feedItem.description}">
105
106
107
108
109
110
111
112
113
114
								<div class="sg-youtube-text">
									<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop></f:format.htmlentitiesDecode>
								</div>
							</f:if>
						</a>
					</li>
				</f:for>
			</ul>
		</f:else>
	</f:if>
115
</f:section>