NEWSROOM-CH (component )

src/app/shared/components/newsroom-ch/templates

Demo Section

Each variation will be presented in the following section.

Nach Kategorien filtern
Es gibt keine Treffer zu Ihrer Suche.

    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>