OPEN-ACCESS-PUBLICATIONS (component )

src/app/shared/components/open-access-publications/templates

Demo Section

Each variation will be presented in the following section.

Default

Readme

openAccessPublications (component)

Description

This application extracts publication lists from the Open Access LMU platform. The lists can belong to either a person (lmuId) or an institution (subjectId). The output of the lists can be grouped and sorted by document type or by year.

Redmine

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/open-access-publications

Fields

open-access-publications.hbs

Settings

Parameter Type Default Description
settings.openAccessPublicationsClasses String '' Modifier classes for component
settings.openAccessPublicationsContextClass String 'default' Context class of component

Content

Parameter Type Description
content.openAccessPublicationsField String Please add a description!

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$open-access-publications-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-open-access-publications:

Modifier Description
is-modifier Please add a description!

Helper Function

To demostrate delay added this function

async Delay() {
            return new Promise((resolver)=>{
                setInterval(resolver, 5000);
            });
        },

Templates

open-access-publications.hbs

<script type="text/javascript">
	var serverUrl = '/api/oap'; // http://localhost/api/oap
</script>

{{#if (prod)}}     
	<script type="text/javascript">
		serverUrl = '/assets/mocks/oap'; // https://cms-cdn.lmu.de/assets/
	</script>	
{{/if}}

<script>
     // Assigning CMS Template vars to Javascript vars
     function vueopenaccessload() {
          window.LmuOpenAccessPublications.init({
               config: {
                    lmuId: '5AB287EF46B5B864',  // lmuid of Simone Malaguti - $CMS_VALUE(st_lmuid)$
                    subjectId: '05',  //Examples: 0201, 2024, 19081 - $CMS_VALUE(st_subjectid)
                    idType: 'lmuid', //values: lmuid, subjects - $CMS_VALUE(st_id_type)$ - '$CMS_VALUE(st_group_type)
                    fileType: '.json', // Productuon can ben .js
                    groupType: '',  //values: type, date - $CMS_VALUE(st_group_type)$
                    language: 'de', //values: de, en, - $CMS_VALUE(#global.language.abbreviation.lowerCase)$
                    jsonExportContainer: 'JSON_EPUB_FSP',
                    serverUrl: serverUrl, // server path for fetching data = https://epub.ub.uni-muenchen.de/cgi/exportview
                    text : {
                         anchorHeadline : "Zum Dokumententyp springen"
                    },
                    showAnchorLinks: '1'
               },
               container: 'oap'
          })
     }
     window.addEventListener('load', vueopenaccessload);
</script>


<div id="oap"
     class="c-open-access-publications{{#if settings.openAccessPublicationsContextClass}}--{{settings.openAccessPublicationsContextClass}}{{else}}--default{{/if}}{{#if settings.openAccessPublicationsClasses}} {{settings.openAccessPublicationsClasses}}{{/if}}"
     data-css="c-open-access-publications"     
     >
     Loading...
</div>

Data File

open-access-publications.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"openAccessPublicationsContextClass": "default",
				"openAccessPublicationsClasses": ""				
			},
			"content": {}
		}
		
	}
}

Styles

open-access-publications.scss

/* ===================================================
component: open-access-publications
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-open-access-publications"] {  
    
    .open-access-publications__loader {                
        
        .open-access-publications__init-loader {
            @include centering(h);
    
            position: relative;
            top: 5px;
            display: flex;
            width: 200px;
            flex-direction: row;
            background-color: $color-white;
            height: 60px;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            opacity: 1;
            transition: opacity $animation-duration-std $animation-easing-std;
            z-index: 100;
            border: 1px solid $color-green;
            
        }
    
        .open-access-publications__init-loader-box {
            display: block;
            margin: 10px;
            border: 1em solid $color-green;
            opacity: 0;           
    
            /*
            MODIFIERS
            ----------------------- */
            &.is-one {
                animation: boxAppear 2s linear infinite;
            }
    
            &.is-two {
                animation: boxAppear 2s linear .3s infinite;
            }
    
            &.is-three {
                animation: boxAppear 2s linear .62s infinite;
            }
        }
    }


    // LOAD INIT LOADER
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-open-access-publications--default {}

HTML Output

Default

<script type="text/javascript">
	var serverUrl = '/api/oap'; // http://localhost/api/oap
</script>
<script type="text/javascript">
	serverUrl = '/assets/mocks/oap'; // https://cms-cdn.lmu.de/assets/
</script>
<script>
	// Assigning CMS Template vars to Javascript vars
	function vueopenaccessload() {
		window.LmuOpenAccessPublications.init({
			config: {
				lmuId: '5AB287EF46B5B864', // lmuid of Simone Malaguti - $CMS_VALUE(st_lmuid)$
				subjectId: '05', //Examples: 0201, 2024, 19081 - $CMS_VALUE(st_subjectid)
				idType: 'lmuid', //values: lmuid, subjects - $CMS_VALUE(st_id_type)$ - '$CMS_VALUE(st_group_type)
				fileType: '.json', // Productuon can ben .js
				groupType: '', //values: type, date - $CMS_VALUE(st_group_type)$
				language: 'de', //values: de, en, - $CMS_VALUE(#global.language.abbreviation.lowerCase)$
				jsonExportContainer: 'JSON_EPUB_FSP',
				serverUrl: serverUrl, // server path for fetching data = https://epub.ub.uni-muenchen.de/cgi/exportview
				text: {
					anchorHeadline: "Zum Dokumententyp springen"
				},
				showAnchorLinks: '1'
			},
			container: 'oap'
		})
	}
	window.addEventListener('load', vueopenaccessload);
</script>
<div id="oap" class="c-open-access-publications--default" data-css="c-open-access-publications">
	Loading...
</div>