JSFiddle - React, Tailwind, and code Playground

by bitstarr

JavaScript

var dsl = window.dsl || {};
        
        /* Cache aufbauen */

        dsl.win = $(window);
        dsl.body = $('body');
        dsl.teaser = dsl.body.find('#teaser');
        dsl.mediaQuerySetup = {};

        /* @section 1.3  Media Query */
        dsl.mediaQuery = function () {
            /* Größe des Fenster ändern */
            dsl.win.on('resize ready', function () {
                var clientWidthPX = document.documentElement.clientWidth,
                    clientWidthEM = $(clientWidthPX).toUnit(),
                    mediaQueryKey = clientWidthEM + 'em';

                dsl.body.attr('data-query', mediaQueryKey);

                /* Aufruf wenn MQ bezogene Methode vorhanden */
                if (clientWidthEM > 80 && typeof dsl.mediaQuerySetup['gt80em'] === 'function') {
                    dsl.mediaQuerySetup['gt80em']();
                } else if(typeof dsl.mediaQuerySetup['lt80em'] === 'function') {
                    dsl.mediaQuerySetup['lt80em']();
                }
            }).trigger('ready');
        };
        /* Starten */
        dsl.mediaQuery();

        /* Media Query Setup */
        dsl.mediaQuerySetup = {
            'gt80em': function () {
                dsl.teaser.addClass('teaserLarge');
            },
            'lt80em':function () {
                dsl.teaser.removeClass('teaserLarge');
            }
        };


    /* @section 2. Plugin - toUnit */
    $.fn.toUnit = function (options) {
         /* Settings */
        var settings = jQuery.extend({
            unit: 'em',
            scope: 'body',
            factor: 100000
        }, options);

        /* Berechnenung */
        var input = parseInt(this[0], 10),
            scopeContainer = $('<div style="display:none;width:' + settings.factor + settings.unit + '"></div>').appendTo(settings.scope),
            scopeValue = scopeContainer.width() / settings.factor,
            output = (input / scopeValue).toFixed(0);
        
        /* Container entfernen */
 ...