Für über den Standard hinausgehende Anpassungen stehen folgende CSS Klassen und Java-Script Events zur Verfügung:

CSS Klassen

NameBeschreibungAnmerkung
Seitentemplates / Rahmentemplates
nav-level-1
Hauptnavigation / Ebene 1
.article-preview__asset-badge-container::after
Das Piktogram, welches auf Artikel-Teasern mit mehr als einem Bild angezeigt wird.

Verstecken des Piktogramms mit:

.article-preview__asset-badge-container::after  {display: none !important;}
Im Artikel
article-leader
Vorspann des Artikels
article-text
Grundtext des Artikels
metadata-info
Liste der einzelnen Tags im Artikel.tag .department .location können als Sub-Selektor für die Kindelemente verwendet werden.



Hauptnavigation (Menü-Icon + Logo)

pscp-icon-image-navigation

pscp-icon-image-navigation__menu-icon-holder

pscp-icon-image-navigation__image-holder

pscp-icon-image-navigation__image

pscp-icon-image-navigation__right-icon-holder

pscp-icon-image-navigation__dummy-holder

pscp-icon-image-navigation__dropdown_anchor

pscp-icon-image-navigation__level-1

pscp-icon-image-navigation__level-2

pscp-icon-image-navigation__secondary-navigation

pscp-icon-image-navigation__text-and-toggle

pscp-icon-image-navigation__item

pscp-icon-image-navigation__item-text



pscp-icon-image-navigation__toggle



pscp-icon-image-navigation__toggle-icon






PayWall (modal)



pscp-modal-pay-wall



pscp-modal-pay-wall__title

pscp-modal-pay-wall__text




PayWall (inline)



pscp-inline-pay-wall



pscp-inline-pay-wall__title



pscp-inline-pay-wall__text



JavaScript Events

NameBeispielBeschreibungAnmerkung
pscpAssetViewChange
window.addEventListener('pscpAssetViewChange', e => console.log(e.detail));

Wird aufgerufen, wenn der Benutzer durch eine Galerie oder Lightbox blättert.

In der detail-Property des Events können mithilfe der Eigenschaften assetIdx und assetId die aktuelle Position sowie der Assetname ausgelesen werden.
pscpRessourceChangewindow.addEventListener('pscpRessourceChange', e => console.log(e.detail));Wird beim Initialen Aufruf und nach jedem Resourcenwechsel aufgerufen

detail: 

type PscpResourceChangeEventData = {
    type: string
    id: string,
    url: string,
}






JavaScript Funktionen

NameBeispielBeschreibungAnmerkung
PSCP.navigateByUrl(string destination)
PSCP.navigateByUrl('/epaper');

<a onclick="PSCP.navigateByUrl('/ressort/Sport');" href="/ressort/sport">Sport</a>

Wechselt innerhalb der SPA die angezeigte Ressource.

Diese Methode der Navigation ist dem Nutzen von normalen Links vorzuziehen, da diese deutlich performanter abläuft.

Wie im zweiten Beispiel gezeigt, kann beides kombiniert werden, falls JavaScript im Browser deaktiviert ist.









  • Keine Stichwörter