LMUCAST-PLAYLIST (component )
src/app/shared/components/lmucast-playlist/templates
Demo Section
Each variation will be presented in the following section.
Readme
lmucastPlaylist (component)
Description
This blueprint is based on the blueprint of Veams.
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/lmucast-playlist
Fields
lmucast-playlist.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.lmucastPlaylistClasses | String | '' |
Modifier classes for component |
| settings.lmucastPlaylistContextClass | String | 'default' |
Context class of component |
| settings.lmucastPlaylistJsOptions | Object | null |
JavaScript options object which gets stringified |
Content
| Parameter | Type | Description |
|---|---|---|
| content.lmucastPlaylistField | String | Please add a description! |
JavaScript Options
The module gives you the possibility to override default JS options:
| Option | Type | Default | Description |
|---|---|---|---|
| optionOne | String | 'is-option' |
Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $lmucast-playlist-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-lmucast-playlist:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
lmucast-playlist.hbs
{{!--
Die App startet sich selbst, sobald das Bundle geladen ist (App-Kit).
Kein Inline-Script mehr nötig – das ist die Voraussetzung für eine strikte CSP.
Die Konfiguration steht als JSON im data-config-Attribut.
--}}
<div class="c-lmucast-playlist" data-css="c-lmucast-playlist">
<div id="LMUcast-playlist"
data-lmu-app="lmucast-playlist"
data-config='{
"rssUrl": "https://opencast.lmu.de/~rss/series/NukujDuBokl",
"clipUrlPrefix": "https://cast.itunes.uni-muenchen.de/clips/",
"showDownload": false,
"showAudio": false,
"format": "de",
"cssPostfix": "rte",
"texts": {
"links": {
"videoLink": "Video auf LMUcast ansehen",
"downloadLink": "Video als Download",
"audioLink": "Tonspur auf LMUcast anhören"
},
"authorTitle": "Sprecher"
}
}'></div>
</div>
Data File
lmucast-playlist.hjson
Styles
lmucast-playlist.scss
/* ===================================================
component: lmucast-playlist
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-lmucast-playlist"] {
.lmucast-playlist__headline {
@include headline-h2-styles();
}
.lmucast-playlist__list-item-meta {
font-size: 1.6rem;
margin-bottom: 1.5rem;
}
.lmucast-playlist__list-item-title {
font-size: 1.8rem;
font-family: $font-bold;
line-height: (24/16);
letter-spacing: 0.25px;
display: inline-block;
margin-bottom: 0.5rem;
}
.lmucast-playlist__list-item-subtitle {
font-size: 1.6rem;
font-style: italic;
margin-bottom: 0.5rem;
}
.lmucast-playlist__list-item-links {
display: flex;
flex-direction: column;
.lmucast-playlist__list-item-links-link {
color: $color-green;
font-family: $font-bold;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: 0.3px;
margin-bottom: 12px;
text-decoration: none;
display: block;
transition: color $animation-duration-std/2 $animation-easing-std;
position: relative;
padding-left: 25px;
@include print() {
padding-left: 0;
}
&:focus {
outline: none;
}
/*
MODIFIERS
----------------------- */
&.is-icon {
&::before {
@include pseudo();
position: absolute;
display: inline-block;
top: 5px;
left: 0;
margin-right: 10px;
vertical-align: unset;
transition: transform $animation-duration-std
$animation-easing-std;
@include print() {
display: none;
}
}
&.is-download {
&:hover {
color: $color-black;
&::before {
@include sprites-icon-download-black();
}
}
&::before {
@include sprites-icon-download-green60();
}
}
&.is-video {
&:hover {
color: $color-black;
&::before {
@include sprites-icon-video-black();
}
}
&::before {
@include sprites-icon-video-green100();
}
}
&.is-audio {
&:hover {
color: $color-black;
&::before {
@include sprites-icon-audio-liste-black();
}
}
&::before {
@include sprites-icon-audio-liste-green();
}
}
}
}
}
.lmucast-playlist__list-item-description-wrapper {
line-height: (24/16);
letter-spacing: 0.25px;
.lmucast-playlist__list-item-description-headline {
font-size: 1.6rem;
font-family: $font-bold;
line-height: (24/16);
letter-spacing: 0.25px;
display: inline-block;
margin-bottom: 0.5rem;
}
.lmucast-playlist__list-item-description-speaker {
font-size: 1.6rem;
display: inline-block;
margin-bottom: 1.5rem;
}
.lmucast-playlist__list-item-description-text {
font-size: 1.6rem;
p {
font-size: 1.6rem;
}
a {
color: $color-green;
font-family: $font-bold;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: 0.3px;
margin-bottom: 12px;
text-decoration: none;
display: block;
transition: color $animation-duration-std/2
$animation-easing-std;
position: relative;
padding-left: 25px;
@include print() {
padding-left: 0;
}
&:focus {
outline: none;
}
}
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-lmucast-playlist--default {
}
Scripts
lmucast-playlist.js
HTML Output
<div class="c-lmucast-playlist" data-css="c-lmucast-playlist">
<div id="LMUcast-playlist" data-lmu-app="lmucast-playlist" data-config='{
"rssUrl": "https://opencast.lmu.de/~rss/series/NukujDuBokl",
"clipUrlPrefix": "https://cast.itunes.uni-muenchen.de/clips/",
"showDownload": false,
"showAudio": false,
"format": "de",
"cssPostfix": "rte",
"texts": {
"links": {
"videoLink": "Video auf LMUcast ansehen",
"downloadLink": "Video als Download",
"audioLink": "Tonspur auf LMUcast anhören"
},
"authorTitle": "Sprecher"
}
}'></div>
</div>