ResponsiveEl

gistfile1.js

/**
 * Helper function that dynamically adds eg. gt480 class to element if it's width is >480px
 *
 * Basically simulates media queries for elements
 */
Kwf.Utils.ResponsiveEl = function(selector, widths)
{
    var initEl;

    if (typeof(widths) != "function") {

        if (!widths instanceof Array) widths = [widths];
        initEl = function(el) {
            var changed = false;
            widths.each(function(w) {
                if (typeof w != 'object') {
                    w = {
                        minWidth: w,
                        cls: 'gt'+w
                    };
                }
                var match = true;
                if (w.minWidth && !(el.getWidth() > w.minWidth)) {
                    match = false;
                }
                if (match && w.maxWidth && !(el.getWidth() < w.maxWidth)) {
                    match = false;
                }
                if (match) {
                    if (!el.hasClass(w.cls)) {
                        el.addClass(w.cls);
                        changed = true;
                    }
                } else {
                    if (el.hasClass(w.cls)) {
                        el.removeClass(w.cls);
                        changed = true;
                    }
                }
            }, this);
            if (changed) {
                Kwf.callOnContentReady(el.dom, {newRender: false});
            }
        };

    } else {

        initEl = widths;

    }

    Kwf.Utils.ResponsiveEl._selectors.push({
        selector: selector,
        fn: initEl
    });
};

Kwf.Utils.ResponsiveEl._selectors = [];
Kwf.Utils.ResponsiveEl._nodes = [];

// Alte Variante
Kwf.onContentReady(function(el, options){
    Kwf.Utils.ResponsiveEl._selectors.each(function(i) {
       Ext.fly(el).select(i.selector).each(i.fn);
    })
})

//EXT Variante
Kwf.onContentReady(function(el, options) {
    if (options.newRender) {
        el = Ext.fly(el);
        Kwf.Utils.ResponsiveEl._selectors.each(function(re) {
            el.query(re.selector).each(function(node) {
                Kwf.Utils.ResponsiveEl._nodes.push({
                    el: node,
                    fn: re.fn
                });
            }, this);
        }, this);
    }
}, this, {priority: -2});

Kwf.onContentReady(function(el) {
    el = Ext.get(el);
    Kwf.Utils.ResponsiveEl._nodes.each(function(re) {
        if (el.contains(re.el)) {
            re.fn(Ext.fly(re.el));
        }
    });
}, this, {priority: -1});

// JQUERY Variante
Kwf.onContentReady(function(el, options) {
    if (options.newRender) {
        Kwf.Utils.ResponsiveEl._selectors.each(function(re) {
            $(el).find(re.selector).each(function(i, node) {
                Kwf.Utils.ResponsiveEl._nodes.push({
                    el: node,
                    fn: re.fn
                });
            });
        }, this);
    }
}, this, {priority: -2});

Kwf.onContentReady(function(el) {
    Kwf.Utils.ResponsiveEl._nodes.each(function(re) {
        if ($.contains(el, re.el)) {
            re.fn(Ext.fly(re.el));
        }
    });
}, this, {priority: -1});

//VanillaJs Variante
Kwf.onContentReady(function(el, options) {
    if (options.newRender) {
        Kwf.Utils.ResponsiveEl._selectors.each(function(re) {
            var selector = re.selector.replace('.', '');
            var nodes = el.getElementsByClassName(selector);
            if(nodes.length) {
                var i, len = nodes.length;
                for (i = 0; i < len; i++) {
                    Kwf.Utils.ResponsiveEl._nodes.push({
                        el: nodes[i],
                        fn: re.fn
                    })
                }
            }
        }, this);
    }
}, this, {priority: -2});

Kwf.onContentReady(function(el) {
    Kwf.Utils.ResponsiveEl._nodes.each(function(re) {
        if (el.contains(re.el)) {
            re.fn(Ext.fly(re.el));
        }
    });
}, this, {priority: -1});

Ext.fly(window).on('resize', function() {
    Kwf.Utils.ResponsiveEl._nodes.each(function(re) {
        re.fn(Ext.fly(re.el));
    });
}, this, { buffer: 100 });