/
CSS Klassen & JavaScript Events

CSS Klassen & JavaScript Events

Jan. 13, 2025

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

CSS Klassen

Name

Beschreibung

Anmerkung

Name

Beschreibung

Anmerkung

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 Buttons

Facebook und Twitter

 

 

 

Vollbild-/Print2Media-Anzeigen

 

 

pscp-fullscreen-media-content

Wurzelknoten

 

pscp-fullscreen-media-content--no-logo

Modifier am Wurzelknoten, wenn kein Logo konfiguriert wurde

 

pscp-fullscreen-media-content__content

Inhaltsbereich (alles bis auf den Schließen Button)

 

pscp-fullscreen-media-content__close-button

Schließen Button

 

pscp-fullscreen-media-content__logo-area

Logo Bereich

 

pscp-fullscreen-media-content__media-area

Advert Bereich

 

pscp-fullscreen-media-content__meta-data-area

Links und Metadaten/Text Bereich

 

pscp-fullscreen-media-content__company-name

Name

 

pscp-fullscreen-media-content__company-heading

Name (groß)

 

pscp-fullscreen-media-content__anchors

Links

 

pscp-fullscreen-media-content__anchor

Link

 

pscp-fullscreen-media-content__anchor-caption

Text des Links

 

pscp-fullscreen-media-content__company-data-grid

tabellarischer Text zur Anzeige

 

pscp-fullscreen-media-content__company-data-name

Name oberhalb Texts

 

pscp-fullscreen-media-content__company-data-label

Label zu textueller Info (z.B. Mail:)

 

pscp-fullscreen-media-content__company-data-field

textuelle Info (z.B. name@mail.de)

 

JavaScript Events

Name

Beispiel

Beschreibung

Anmerkung

Name

Beispiel

Beschreibung

Anmerkung

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.

pscpRessourceChange

window.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

Name

Beispiel

Beschreibung

Anmerkung

Name

Beispiel

Beschreibung

Anmerkung

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 aus

Analog 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ück

ab Version 27