Flyin Overlay & Overlay

Das Flyin Overlay und das Overlay bestehen aus zwei Einheiten. Die erste Einheit ist ein Toggle mit der Klasse .js-flyin-overlay-toggler, der für das Ansprechen des Javascripts benötigt wird. Die zweite Einheit ist der konkrete Inhalt, welcher mit den entsprechenden Attributen des Togglers verknüpft wird. Dies ist möglich durch das data-containerid Attribut oder das data-ajaxurl Attribut. Der Inhalt des Flyin Overlay kann komplett beliebig sein, sollte aber möglichst einfach gehalten werden, da das Flyin Overlay für sehr komplexe Inhalte nicht ausreichend Fläche bietet.

Nachfolgend eine Übersicht der möglichen Attribute für den Toggler:

The Flyin Overlay consists of two parts. The first unit is a toggle with the class .js-flyin-overlay-toggler, which is required for addressing the JavaScript. The second unit is the concrete content that should be linked with the corresponding attributes of the toggle. This can be done with the data-containerid attribute or the data-ajaxurl attribute. Any content is possible for the Flyin Overlay, but it should be kept simple because the Flyin Overlay does not offer sufficient space for extremely complex content.

Below is an overview of the possible attributes for the toggle:

data-layout
flyin|modal (default:flyin)
data-containerid (method 1)
The unique id of the content to show inside the overlay
data-ajaxurl (method 2)
The url of the content to show inside the overlay
data-title (optional)
Overlay title
data-auralopentext (optional)
The buttons aria-label when the overlay is hidden
data-auralclosetext (optional)
The buttons aria-label when the overlay is visible
data-opentext (optional)
The buttons text when the overlay is hidden (will replace the text inside span-element of the button)
data-closetext (optional)
The buttons text when the overlay is visible (will replace the text inside span-element of the button)

Inhalt laden via "data-containerid"

Flyin Layout

HTML
<button type="button" class="js-flyin-overlay-toggler" data-layout="flyin" data-containerid="#overlay01" data-auralopentext="Öffnet ein Overlay" data-auralclosetext="Schließt das Overlay" data-opentext="Overlay 1 öffnen (Flyout)" data-closetext="Overlay 1 schließen" data-title="Overlay Titel im Flyout"><span class="text">Click to toggle (Layout: flyin)</span></button>

Beispielcontainer :

HTML

<div id="overlay01" style="display: none;" >
    <!-- Place your content here to show inside overlay body -->
    <h2>Overlay 1 Content</h2><h3>Aenean commodo ligula eget dolor aenean massa consequat massa quis</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><br><a href="#" class="more">Test</a></div>

Modal Layout

HTML
<button type="button" class="js-flyin-overlay-toggler" data-layout="modal" data-containerid="#overlay01" data-auralopentext="Öffnet ein Overlay" data-auralclosetext="Schließt das Overlay" data-opentext="Overlay 2 öffnen (Modal)" data-closetext="Overlay 2 schließen" data-title="Overlay Titel im Modal"><span class="text">Click to toggle (Layout: modal)</span></button>

Beispielcontainer :

HTML

<div id="overlay03" style="display: none;" >
    <!-- Place your content here to show inside overlay body -->
    <h3>Overlay 2 Content</h3><p>Lorem ipsum dolor sit amet.<br><a href="#" class="more">Test</a></div>

Inhalt laden via "data-ajaxurl"

HTML
<button type="button" class="js-flyin-overlay-toggler" data-layout="flyin" data-ajaxurl="/patternlab/public/styleguide/static/html/ajaxdummy.html" data-auralopentext="Click to open overlay" data-auralclosetext="Click to close overlay" data-opentext="Open" data-closetext="Close" data-title="Overlay title"><span class="text">Click to toggle</span></button>

Flyin Overlays mit Hilfetexten in Kombination mit Forms

HTML
    <div class="form-group">
        <label for="myInputField49" class="form-label ">
            Tooltip Test Neu  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>

            <a role="button" class="js-formhelp-flyin-overlay qmark-icon" title="Hilfe" data-original-title="Hier ist der Hilfetext." data-title="Hilfe" href="#" >?</a>
        </label> 
        <input class="form-control" required aria-required="true" id="myInputField49" type="text" name="myInputField49">
    </div>
HTML
    <div class="form-group">
        <label for="myInputField8803" class="form-label ">
            Tooltip Test Alt (Imperia form class)  <span class="icon-required" aria-hidden="true">*</span><span class="aural">(Pflichtfeld)</span>

            <a class="tooltip-wrapper js-tooltip-wrapper" title="Hilfe" data-original-title="Hilfetext" data-rel="tooltip" data-title="Hilfe" onclick="return false;" data-title="Hilfe" href="#"><span class="qmark-icon">?</span></a>
        </label> 
        <input class="form-control" required aria-required="true" id="myInputField8803" type="text" name="myInputField8803">
    </div>

Tests