Last active
August 30, 2020 08:44
-
-
Save qstudio/d54d75124b1db981ba6ba3c93d177815 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js'></script> | |
<script type='text/javascript'src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script> | |
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script> | |
<style>body.debug :not(.nodebug) { border: 1px dashed pink !important; }</style> | |
<title>Q Studio ~ Bootstrap Helper</title> | |
</head> | |
<body> | |
<script> | |
if( typeof jQuery !== 'undefined' ) { | |
// assign target ## | |
var $bs_element = "#bs_helper"; | |
var $bs_helper; | |
// show breakpoint on load, tooltip will be updated to show actual document dimentions ## | |
jQuery(window).load(function(){ | |
// assign target ## | |
$bs_helper = jQuery($bs_element); | |
q_bootstrap_tooltip( true, false ); | |
// click to add debug borders ## | |
$bs_helper.click( function() { | |
jQuery("body").toggleClass("debug"); | |
}); | |
}); | |
// resizing, open tooltip and update document dimensions as they change ## | |
jQuery(window).on('resize', function(){ | |
q_bootstrap_tooltip( false, true ); | |
}); | |
}; | |
// Tooltip with BS breakpoint info ## | |
function q_bootstrap_tooltip( load, resize ) { | |
// sizes ## | |
vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); | |
vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0); | |
// resize ## | |
resize = resize || false; | |
load = load || false; | |
// update attrs ## | |
$bs_helper.attr('title', 'Width: '+ vw +'px<br />Height: '+ vh +'px' ); | |
$bs_helper.html( q_bootstrap_breakpoint().name ); | |
if ( load ) { | |
// trigger tooltip ## | |
$bs_helper.tooltip('show'); | |
setTimeout(function(){ | |
$bs_helper.tooltip('hide'); | |
}, 3000); | |
} | |
// possible delay, for resizing ## | |
if ( resize ) { | |
// trigger tooltip ## | |
$bs_helper.tooltip('show'); | |
// set short timeout to update document dimensions, as they change ## | |
setInterval(function(){ | |
jQuery('.tooltip-inner').html( 'Width: '+ vw +'px<br />Height: '+ vh +'px' ); | |
}, 30); | |
// add an event listener to check for an end to the resize action ## | |
window.addEventListener( | |
"resize", | |
q_bootstrap_debounce( | |
function(e){ | |
// when resizing is done, set a timeout for 3 secs, then close the tooltip ## | |
setTimeout(function(){ | |
$bs_helper.tooltip('hide'); | |
}, 3000 ); | |
} | |
), { passive: true } // Passive Event Listener ## | |
); | |
} | |
} | |
// resize debouncer, set form eventlistener ## | |
function q_bootstrap_debounce( func ){ | |
var timer; | |
return function(event){ | |
if(timer) clearTimeout(timer); | |
timer = setTimeout(func,100,event); | |
}; | |
} | |
/* | |
https://cdn.jsdelivr.net/npm/bootstrap-detect-breakpoint/src/bootstrap-detect-breakpoint.js | |
*/ | |
function q_bootstrap_breakpoint() { | |
const breakpointNames = ["xl", "lg", "md", "sm", "xs"] | |
let breakpointValues = [] | |
for (const breakpointName of breakpointNames) { | |
breakpointValues[breakpointName] = window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-' + breakpointName) | |
} | |
let i = breakpointNames.length | |
for (const breakpointName of breakpointNames) { | |
i-- | |
if (window.matchMedia("(min-width: " + breakpointValues[breakpointName] + ")").matches) { | |
return { | |
name: breakpointName, | |
height: vh, | |
width: vw, | |
index: i | |
} | |
} | |
} | |
return null | |
} | |
</script> | |
<span | |
id="bs_helper" | |
class="nodebug badge badge-warning" | |
data-toggle="tooltip" | |
data-placement="top" | |
data-html="true" | |
title="Tooltip on top" | |
style="position: fixed; left: 0; bottom: 0; padding: 20px;" | |
>~@~ | |
</span> | |
<div class="example p-5">hello<strong class="ml-1 text-strong">world</strong></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment