Sprint 57

Heraus-forderung

Einige Elemente sollen bei großen Auflösungen an Positionen erscheinen, die einer anderen Position im DOM entsprechen.

Anforderungen

• Responsive First
• Kein doppelter Content für Google
• Wiederverwendbarkeit
• Möglichst performanter DOM Umbau

Lösung

responsive layout enhancer

Jede Technologie für Ihren
predestinierten Einsatzzweck einsetzten:

• Markup (Information, Position, Trigger)
• CSS (Viewport-Umschalter)
• JS (Clone-Generator)

Markup

Text

source:

<div class="js-RLE" 
     data-rle-target="individualName">

content to clone ...

</div>


targets:

<div data-rle-placeholder="individualName" 
     data-rle-breakpoint="mqMedium"></div>

SCSS

Text

// mobile first dom element
[data-rle-target] {
    @include aux-breakpoint($mq-medium) {
        display: none;
    }
}

// all other elements
[data-rle-breakpoint] {
    display: none;
}

// show element on medium breakpoint
[data-rle-breakpoint="mqMedium"] {
    @include aux-breakpoint($mq-medium) {
        display: block;
    }
}

jQuery Plugin

Text

$.fn.responsiveLayoutEnhancer = function () {
    var init = function ($obj) {
            var placeholder = $obj.data("rle-target"), breakpoint = "", clone = "";

            $('[data-rle-placeholder="' + placeholder + '"]').each(function () {
                // get breakpoint from target
                breakpoint = $(this).data("rle-breakpoint");

                // clone of source including data and events, 
                // but without unused source parameter
                clone = $obj.clone(true, true)
                        .removeClass('js-RLE').removeAttr('data-rle-target');

                // security check, if clone contains an id
                // ...

                // replace placeholder with clone and add data attribute 
                // to set visibillity for specific breakpoint
                $(this).replaceWith(clone.attr("data-rle-breakpoint", breakpoint));
            });
        };

    // iterate over all occurences
    return this.each(function () {
        init($(this));
    });
};

$(function() {
    $('.js-RLE').responsiveLayoutEnhancer();
});

Videos

Q:\IT\Team Orange\Screencapture\Sprint57

Desktop

Mobile