Presets der Slick-Modal für TYPO3

Die Slick-Modal Extension für TYPO3 nutzt einfach zu konfigurierende Presets, sodass sich Dein Redakteur nicht mit komplizierten Konfigurationseinstellungen herumschlagen muss. Du bereitest einfach die gewünschten Presets für Deine Website vor und der Editor erstellt einfach Slick-Modals mit Deinem Inhalt im gewünschten Look and Feel.

Derzeit kommt die Extension mit 4 Presets: Standard, Verzögert, Toast, und Hintergrund.

Standard: Auf der Webseite wird ein Button gezeigt. Auf Klick öffnet sich das Modal. Das Modal kann mit einem beliebigen Inhaltselement gefüllt werden. Das Modal ist mittig auf dem Bildschirm platziert. Die eigentliche Webseite wird abgedunkelt.

Verzögert: Nachdem die Seite geöffnet wurde, vergehen ein paar Sekunden. Dann dunkelt die Seite ab und das Modal erscheint. ACHTUNG: Hier wird ein Cookie gesetzt, der dafür sorgt, dass das Modal nur einmal erscheint. Dieser muss ggf. gelöscht werden, um das Modal erneut anzuzeigen.

Toast: Nachdem die Seite geöffnet wurde, vergehen ein paar Sekunden. Dann fährt unten rechts ein Bereich aus, der ein beliebiges Inhaltselement enthält. Die Meldung wird nach einigen Sekunden automatisch wieder ausgeblendet. ACHTUNG: Hier wird ein Cookie gesetzt, der dafür sorgt, dass das Modal nur einmal erscheint. Dieser muss ggf. gelöscht werden, um das Modal erneut anzuzeigen.

Hintergrund: Auf der Webseite wird ein Button gezeigt. Auf Klick öffnet sich das Modal. Das Modal kann mit einem beliebigen Inhaltselement gefüllt werden. Das Modal ist mittig, unten auf dem Bildschirm platziert. Die eigentliche Webseite wird mit einem Hintergrundbild überlagert.

Slick-Modal Preset-Konfiguration erstellen.

Um ein Preset für ein Slick-Modal zu konfigurieren, benötigst Du nur TypoScript. Das folgende Beispiel definiert ein Preset mit dem Namen MyPreset. Die Beschreibung aller Konfigurationswerte findest Du in der Slick-Modal Dokumentation.

plugin.tx_slickmodal {
  settings {
    presets {
      MyPreset {
        # Restrictions
        restrict_hideOnUrls =
        restrict_cookieSet = true
        restrict_cookieDays =  30
        # cookieTriggerClass = slick-modal-cookie-UID
        # cookieName = slick-modal-UID
        restrict_cookieScope = domain
        restrict_dateRange = false
        restrict_dateRangeStart =
        restrict_dateRangeEnd =
        restrict_dateRangeServerTime = true
        restrict_dateRangeServerTimeFile =
        restrict_dateRangeServerTimeZone = Europe/London
        restrict_showAfterVisits = 1
        restrict_showAfterVisitsResetWhenShown= false

        # Popup
        popup_type = none
        popup_delayedTime  = 0s
        popup_scrollDistance = 400px
        popup_scrollHideOnUp = false
        popup_exitShowAlways = false
        popup_autoClose = false
        popup_autoCloseAfter = 3s
        popup_openWithHash = false
        popup_redirectOnClose = false
        popup_redirectOnCloseUrl =
        popup_redirectOnCloseTarget = _blank
        popup_redirectOnCloseTriggers = overlay button
        popup_position = center
        popup_animation = fadeIn
        popup_closeButtonEnable = true
        popup_closeButtonStyle = cancel simple
        popup_closeButtonAlign = right
        popup_closeButtonPlace = outside
        popup_closeButtonText = Close
        # reopenClass = open-slick-modal-UID
        popup_reopenClassTrigger = click
        popup_reopenStickyButtonEnable = false
        popup_reopenStickyButtonText = Open popup
        popup_enableESC = true
        popup_bodyClass =
        popup_wrapperClass =
        popup_draggableEnable = false
        popup_allowMultipleInstances = false
        # Popup styling
        popupWidth = 480px
        popupHeight = 280px
        popupBackground = #fff
        popupMargin = 30px
        popupPadding = 30px
        popupPosition = center
        popupAnimationDuration = 0.4s

        # Overlay
        overlay_isVisible = true
        overlay_closesPopup = true
        overlay_animation = fadeIn
        # Overlay styling
        overlayColor = rgba(0,0,0,0.85)
        overlayAnimationDuration = 0.4s
        overlayAnimationDelay = 0s

        # Content
        content_loadViaAjax = false
        content_animate = false
        content_animation = zoomIn
        # Content styles
        contentAnimationDuration = 0.4s
        contentAnimationDelay = 0.4s

        # Page
        page_animate = false
        page_animation  = scale
        page_animationDuration = 0.4s
        page_blurRadius = 0px
        pageScaleValue = 0.9
        page_moveDistance = 20%

        # Mobile rules
        mobile_show = false
        mobile_breakpoint = 480px
        mobile_position = bottomCenter
        # Mobile styles
        mobileWidth = 100%
        mobileHeight = auto
        mobileBackground = #fff
        mobileMargin = 0
        mobilePadding = 18px
        responsive = true
        mobileAnimationDuration = 0.4s

        # Callbacks
        callback_beforeInit (
            function() {
                console.log('onSlickLoad');
            }
        )
        callback_afterInit (
            function() {
                console.log('callback_beforeInit');
            }
        )
        callback_beforeOpen (
            function() {
                console.log('callback_beforeOpen');
            }
        )
        callback_afterOpen (
            function() {
                console.log('callback_afterOpen');
            }
        )
        callback_afterVisible (
            function() {
                console.log('callback_afterVisible');
            }
        )
        callback_beforeClose (
            function() {
                console.log('callback_beforeClose');
            }
        )
        callback_afterClose (
            function() {
                console.log('callback_afterClose');
            }
        )
        callback_afterHidden (
            function() {
                console.log('callback_afterHidden');
            }
        )
      }
    }
  }
}

Registrierung der Voreinstellung im TYPO3 Backend

Das neue Konfigurations-Preset muss registriert werden, damit Du es im TYPO3 Backend auswählen kannst. Dies kann mit Hilfe von Page-TypoScript (tsconfig) geschehen:

TCEFORM.tt_content {
    tx_slickmodal_preset {
        addItems {
            Default = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_default
            Delayed = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_delayed
            Toast = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_toast
            Background = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_background
            MyPreset = The label for my preset in backend
        }
    }
}

Slick-Modal Fluid-Templates erstellen

Jedes dieser Presets besitzt ein eigenes Fluid-Teil.

Das Fluid-Template Default.html sieht so aus:

<button class="btn btn-primary open-slick-modal-{contentObject.uid}">OPEN</button>
<div id="slick-modal-{contentObject.uid}" class="slickModal">
    <div class="slickWindow">
        <f:format.raw><slickmodal:renderContent uid="{contentUid}" /></f:format.raw>
    </div>
</div>

Die erste Zeile definiert eine Schaltfläche, die zum Öffnen des Slick-Modals verwendet wird. Die folgenden letzten Zeilen definieren den Inhalt des Slick-Modals. In diesem Fall fügen wir nur das Ergebnis des Renderns des Inhaltselements ein.

Für unser neues Preset mit dem Namen MeinPreset erstellen wir eine Fluid-Vorlage mit dem Namen MeinPreset.html. In dieser Vorlage kannst Du Dein HTML nach Bedarf ändern.