CSS Klassen & JavaScript Events

Owned by Marko Oette
Last updated: Okt. 04, 2024 by Daniel Gilgen

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






Artikel Teilen Buttons



pscp-share-buttons

Komponente

pscp-share-buttons__button

Button in Komponente

pscp-share-buttons__button::after

Tooltip

pscp-share-buttons__button:hover::after

Aktivieren des Tooltips

pscp-share-buttons__share-facebook

Facebook Button

pscp-share-buttons__share-facebook::after

Tooltip Content für Facebook

pscp-share-buttons__share-twitter

Twitter Button

pscp-share-buttons__share-twitter::after

Tooltip Content für Twitter

pscp-share-buttons__share-mail

Mail Button

pscp-share-buttons__share-mail::after

Tooltip Content für Mail

pscp-share-buttons__share-native

Natives Teilen Button

pscp-share-buttons__share-native::after

Tooltip Content für natives Teilen

pscp-share-buttons__svg-icon

eingebettes SVG-Icon für die ButtonsFacebook und Twitter

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(destination: string)
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.

PSPC.executeAction(action: string)PSPC.executeAction('HISTORY_BACK')führt eine Aktion ausAnalog zu den Aktionen bei Navigationseinträgen
  • HISTORY_BACK
  • OPEN_SEARCH_LINE
  • TOGGLE_SEARCH_LINE
  • COOKIE_DIALOG


PSPC.isLoggedIn(): boolean
gibt den LoginStatus zurück
PSPC.getUser(): User | undefined
gibt den Nutzer oder undefined zurückab Version 27