pepebe
12/9/2016 - 3:22 PM

Add a breakpoint class to the html element. Useful for targeting stuff in Bootstrap projects.

Add a breakpoint class to the html element. Useful for targeting stuff in Bootstrap projects.

        /*
            mqDebug by pepebe
            Purpose: Add a class to the html element that fits to the current media Query
            To be used with with bootstrap
        */

        function mqDebug(){

            if(document.getElementById("mq") === null){
                console.log('Appending mq debugger to dom');
                document.body.innerHTML += '<span id="mq"></div>';
                
                var mq = document.getElementById("mq");
    
                var mediaQueries = ['xs','sm','md','lg'];
                
                for(var i = 0; i < mediaQueries.length; ++i){
                    var span = document.createElement('span');
                    span.setAttribute("id", mediaQueries[i]);
                    span.setAttribute('class', 'visible-' + mediaQueries[i] + '-inline');
                    mq.appendChild(span);
                }
            }

            var mq = document.getElementById("mq");
            var items = mq.getElementsByTagName("span");
            /* Check each element if it is displayed or not */
            for (var i = 0; i < items.length; ++i) {
                if(items[i].offsetParent !== null){
                    size = items[i].id;
                }
            }
            console.log('Current size: ' + size);             
            document.documentElement.className = size + ' js';
        }

        
        /*  debounce by davidwalsh
            Delay the resize event my a certain threshhold
            https://davidwalsh.name/javascript-debounce-function 
        */        
        function debounce(func, wait, immediate) {
        	var timeout;
        	return function() {
        		var context = this, args = arguments;
        		var later = function() {
        			timeout = null;
        			if (!immediate) func.apply(context, args);
        		};
        		var callNow = immediate && !timeout;
        		clearTimeout(timeout);
        		timeout = setTimeout(later, wait);
        		if (callNow) func.apply(context, args);
        	};
        };        
        
        var resize = debounce(function() {
        	mqDebug();
        }, 250);
        
        window.addEventListener('resize', resize);        
        
        mqDebug();