Loading...
NEWSROOM-CH (component )
src/app/shared/components/newsroom-ch/templates
Demo Section
Each variation will be presented in the following section.
Readme
newsroomCh (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/newsroom-ch
Fields
newsroom-ch.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.newsroomChClasses | String | '' |
Modifier classes for component |
| settings.newsroomChContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.newsroomChField | String | Please add a description! |
First Spieret Absatvorlage
$CMS_SWITCH(set_ft_newsroom_edit_typ)$ $CMS_IF(set_ft_newsroom_edit_archive)$ fetch(’$CMS_REF(ps_nrch_news_archive_json,templateSet:“JSON”)$’) $CMS_ELSE$ fetch(’$CMS_REF(ps_nrch_news_current_json,templateSet:“JSON”)$’) $CMS_END_IF$
$CMS_CASE("1")$
$CMS_IF(set_ft_newsroom_edit_archive)$
fetch('$CMS_REF(ps_nrch_news_archive_json,templateSet:"JSON")$')
$CMS_ELSE$
fetch('$CMS_REF(ps_nrch_news_current_json,templateSet:"JSON")$')
$CMS_END_IF$
$CMS_CASE("2")$
$CMS_IF(set_ft_newsroom_edit_archive)$
fetch('$CMS_REF(ps_nrch_events_archive_json,templateSet:"JSON")$')
$CMS_ELSE$
fetch('$CMS_REF(ps_nrch_events_current_json,templateSet:"JSON")$')
$CMS_END_IF$
$CMS_CASE("3")$
$CMS_IF(set_ft_newsroom_edit_archive)$
fetch('$CMS_REF(ps_nrch_videos_archive_json,templateSet:"JSON")$')
$CMS_ELSE$
fetch('$CMS_REF(ps_nrch_videos_current_json,templateSet:"JSON")$')
$CMS_END_IF$
$CMS_CASE("4")$
$CMS_IF(set_ft_newsroom_edit_archive)$
fetch('$CMS_REF(ps_nrch_galleries_archive_json,templateSet:"JSON")$')
$CMS_ELSE$
fetch('$CMS_REF(ps_nrch_galleries_current_json,templateSet:"JSON")$')
$CMS_END_IF$
$CMS_CASE("5")$
$CMS_IF(set_ft_newsroom_edit_archive)$
fetch('$CMS_REF(ps_nrch_social_medias_archive_json,templateSet:"JSON")$')
$CMS_ELSE$
fetch('$CMS_REF(ps_nrch_social_medias_current_json,templateSet:"JSON")$')
$CMS_END_IF$
$CMS_END_SWITCH$
Old Script
New Script
Templates
newsroom-ch.hbs
<script type="text/javascript">
var pathPrefix = '/api';
var pathEndix = '';
</script>
{{#if (prod)}}
<script type="text/javascript">
pathPrefix = '/assets/mocks';
pathEndix = '/data.json'
</script>
{{/if}}
<script type="text/javascript">
function getQparam(name) {
var result = null;
var q = document.URL.split('?')[1];
if (q != undefined) {
var n = q.split('&');
if (n.length > 1) {
for (var i = 0; i < n.length; i++) {
var params = n[i].split('=');
if (params[0] == name) {
result = params[1];
}
}
} else {
var params = n[0].split('=');
if (params[0] == name) {
result = params[1];
}
}
return result;
}
}
var type = getQparam('type');
switch(type) {
case "news":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/news" + pathEndix,
newsroomEditTyp: "NewsroomCh_News"
}
break;
case "events":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/events" + pathEndix,
newsroomEditTyp: "NewsroomCh_Events"
}
break;
case "galleries":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/galleries" + pathEndix,
newsroomEditTyp: "NewsroomCh_Galleries"
}
break;
case "video":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/video" + pathEndix,
newsroomEditTyp: "NewsroomCh_Video"
}
break;
case "social-media":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/social-media" + pathEndix,
newsroomEditTyp: "NewsroomCh_SocialMedia"
}
break;
default:
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/news" + pathEndix,
newsroomEditTyp: "NewsroomCh_News"
}
break;
}
function load() {
LmuNewsroomCH.init({
config: {
selectedCategoryType: "all",
sort: 'date_sort',
categoryTypes: [
{ id: '1', label: 'Forschung', value: 'Forschung' },
{ id: '3', label: 'Uni & Campus', value: 'Uni & Campus' }
],
options: [
{ label: 'Titel', value: 'title' },
{ label: 'Datum', value: 'date_sort' }
],
fetchError: false,
fetchUrl: configData.fetchUrl,
fallbackImgPath : '/img/Newsroom_green_LMU.svg', //$CMS_VALUE(ps_frontend_path)$/img/Newsroom_green_LMU.svg,
newsroomEditTyp: configData.newsroomEditTyp,
text: {
categoryFilterText: 'Nach Kategorien filtern', //$CMS_IF(#global.language.abbreviation.upperCase == "DE")$Nach Kategorien filtern$CMS_ELSE$Filter by categories$CMS_END_IF$,
allText: 'Alle', //$CMS_VALUE(set_dictionary["all"])$
searchListText: 'Liste durchsuchen nach Begriffen im Titel oder Datum', //$CMS_IF(#global.language.abbreviation.upperCase == "DE")$Liste durchsuchen nach Begriffen im Titel oder Datum$CMS_ELSE$Search list for terms in title or date$CMS_END_IF$
searchInputPlaceholderText : 'Liste durchsuchen', //$CMS_IF(#global.language.abbreviation.upperCase == "DE")$Liste durchsuchen$CMS_ELSE$Search list$CMS_END_IF$
sortByText : 'Sortieren nach', //$CMS_VALUE(set_dictionary["sort_by"])$
chooseSortingTypeText: 'Bitte Sortierungsart wählen', //$CMS_VALUE(set_dictionary["choose_sorting_type"])$
noSearchResultsText: 'Es gibt keine Treffer zu Ihrer Suche.', //$CMS_VALUE(set_dictionary["no_search_results"])$
till: 'bis', //$CMS_VALUE(set_dictionary["till"])$
}
},
container: 'newsroom-ch'
});
};
window.addEventListener('load', load);
</script>
<div id="newsroom-ch"
class="c-newsroom-ch{{#if settings.newsroomChContextClass}}--{{settings.newsroomChContextClass}}{{else}}--default{{/if}}{{#if settings.newsroomChClasses}} {{settings.newsroomChClasses}}{{/if}}"
data-css="c-newsroom-ch">
Loading...
</div>
Data File
newsroom-ch.hjson
Styles
newsroom-ch.scss
/* ===================================================
component: newsroom-app
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-newsroom-ch"] {
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-newsroom-ch--default {
.newsroom-ch__form-select {
border: none;
width: 100%;
background-color: #f5f5f5;
color: #232323;
padding: 6px 10px 6px 10px;
line-height: 1.46667;
letter-spacing: 0.3px;
caret-color: #008f3f;
font-family: Roboto-regular, sans-serif;
font-size: 1.5rem;
outline: none;
cursor: pointer;
}
.newsroom-ch__form-select option {
color: #232323;
line-height: 1.46667;
letter-spacing: 0.3px;
caret-color: #008f3f;
font-family: Roboto-regular, sans-serif;
font-size: 1.5rem;
}
.newsroom-ch__form-select:focus::-ms-value {
background-color: transparent;
color: #232323;
}
.newsroom-ch__form-area {
display: inline-block;
width: 100%;
padding-bottom: 2px;
border-bottom: 1px solid #e6e6e7;
margin-bottom: 20px;
}
}
HTML Output
<script type="text/javascript">
var pathPrefix = '/api';
var pathEndix = '';
</script>
<script type="text/javascript">
pathPrefix = '/assets/mocks';
pathEndix = '/data.json'
</script>
<script type="text/javascript">
function getQparam(name) {
var result = null;
var q = document.URL.split('?')[1];
if (q != undefined) {
var n = q.split('&');
if (n.length > 1) {
for (var i = 0; i < n.length; i++) {
var params = n[i].split('=');
if (params[0] == name) {
result = params[1];
}
}
} else {
var params = n[0].split('=');
if (params[0] == name) {
result = params[1];
}
}
return result;
}
}
var type = getQparam('type');
switch (type) {
case "news":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/news" + pathEndix,
newsroomEditTyp: "NewsroomCh_News"
}
break;
case "events":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/events" + pathEndix,
newsroomEditTyp: "NewsroomCh_Events"
}
break;
case "galleries":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/galleries" + pathEndix,
newsroomEditTyp: "NewsroomCh_Galleries"
}
break;
case "video":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/video" + pathEndix,
newsroomEditTyp: "NewsroomCh_Video"
}
break;
case "social-media":
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/social-media" + pathEndix,
newsroomEditTyp: "NewsroomCh_SocialMedia"
}
break;
default:
var configData = {
fetchUrl: pathPrefix + "/newsroom-ch/news" + pathEndix,
newsroomEditTyp: "NewsroomCh_News"
}
break;
}
function load() {
LmuNewsroomCH.init({
config: {
selectedCategoryType: "all",
sort: 'date_sort',
categoryTypes: [{
id: '1',
label: 'Forschung',
value: 'Forschung'
},
{
id: '3',
label: 'Uni & Campus',
value: 'Uni & Campus'
}
],
options: [{
label: 'Titel',
value: 'title'
},
{
label: 'Datum',
value: 'date_sort'
}
],
fetchError: false,
fetchUrl: configData.fetchUrl,
fallbackImgPath: '/img/Newsroom_green_LMU.svg', //$CMS_VALUE(ps_frontend_path)$/img/Newsroom_green_LMU.svg,
newsroomEditTyp: configData.newsroomEditTyp,
text: {
categoryFilterText: 'Nach Kategorien filtern', //$CMS_IF(#global.language.abbreviation.upperCase == "DE")$Nach Kategorien filtern$CMS_ELSE$Filter by categories$CMS_END_IF$,
allText: 'Alle', //$CMS_VALUE(set_dictionary["all"])$
searchListText: 'Liste durchsuchen nach Begriffen im Titel oder Datum', //$CMS_IF(#global.language.abbreviation.upperCase == "DE")$Liste durchsuchen nach Begriffen im Titel oder Datum$CMS_ELSE$Search list for terms in title or date$CMS_END_IF$
searchInputPlaceholderText: 'Liste durchsuchen', //$CMS_IF(#global.language.abbreviation.upperCase == "DE")$Liste durchsuchen$CMS_ELSE$Search list$CMS_END_IF$
sortByText: 'Sortieren nach', //$CMS_VALUE(set_dictionary["sort_by"])$
chooseSortingTypeText: 'Bitte Sortierungsart wählen', //$CMS_VALUE(set_dictionary["choose_sorting_type"])$
noSearchResultsText: 'Es gibt keine Treffer zu Ihrer Suche.', //$CMS_VALUE(set_dictionary["no_search_results"])$
till: 'bis', //$CMS_VALUE(set_dictionary["till"])$
}
},
container: 'newsroom-ch'
});
};
window.addEventListener('load', load);
</script>
<div id="newsroom-ch" class="c-newsroom-ch--default" data-css="c-newsroom-ch">
Loading...
</div>