-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
145 lines (114 loc) · 3.61 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<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>