-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
111 lines (95 loc) · 4.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Observe element size changes and callback before and after layout reflow has occured.">
<title> Reflow Observer Example </title>
<style>
* { box-sizing: border-box; }
html, body { height: 100vh; margin: 0; }
body { padding: 1rem; font-family: sans-serif; background: grey; }
body:fullscreen { background: orange;}
body:fullscreen::backdrop { background: transparent; }
h1 { margin: 0 0 1rem 0; }
button#toggle { margin: 1rem; }
</style>
</head>
<body>
<h1> Reflow Observer Example </h1>
<p>
Click the button below to toggle between fullscreen states.
Check the JS Console for corresponding output.
</p>
<button id="toggle"> Toggle Fullscreen </button>
<label> <input type="checkbox" id="debug"> DEBUG MODE * </label>
<p> * Enable DEBUG MODE to pause executiion at key points. </p>
<script type="module">
// IMPORT THE CUSTOM OBSERVER CLASS
import { ReflowObserver } from './ReflowObserver.js';
// SPECIFY THE NODE WHICH WILL CHANGE SIZE
let resizableNode = document.body;
// HERE WE SETUP THE OBSERVER TO WATCH FOR CHANGES TO OUR SPECIFIED NODE
// THE CALLBACKS ARE PASSED ONE PARAMETER IN THE FORM OF A DOMHighResTimeStamp
// THE KEYWORD this WHEN REFERENCED INSIDE THE CALLBACKS WILL REFER TO THE OBSERVED NODE
const observer = new ReflowObserver(beforeReflow, afterReflow);
observer.observe(resizableNode);
// DO SOMETHING BEFORE REFLOW
function beforeReflow(timestamp) {
// AT THIS POINT THE DOM CHANGES HAVE BEEN MADE AND ANY
// QUERIES AGAINST THE ELEMENT WILL RETURN THE NEW PROPERTIES
// SOME STYLES MAY HAVE ALREADY BEEN APPLIED (COLOR CHANGES, ETC)
// BUT THE LAYOUT SHIFT HAS NOT ACTUALLY OCCURED YET, FOR EXAMPLE :
let height = this.getBoundingClientRect().height;
// RETURNS THE POST-REFLOW HEIGHT... AND :
let bgcolor = window.getComputedStyle(this).getPropertyValue('background-color');
// RETURNS THE POST-REFLOW BG COLOR...
// SO MAKE ANY LAST MOMENT DOM/STYLE CHANGES HERE
console.log(timestamp, 'about to reflow', this, { height, bgcolor });
// PAUSE EXECUTION BEFORE REFLOW
if (debug === true) { debugger; }
}
// DO SOMETHING AFTER REFLOW
function afterReflow(timestamp) {
// NOW THE REFLOW HAS ACTUALLY COMPLETED ON SCREEN
// AND YOU CAN DO WHATEVER YOU NEEDED TO DO
// THAT REQUIRED YOU TO SEARCH OUT THIS LIBRARY
console.log(timestamp, 'reflow complete', this);
// PAUSE EXECUTION AFTER REFLOW
if (debug === true) { debugger; }
}
// CHECK DEBUG STATUS, WILL PAUSE EXECUTION AT KEY POINTS IF ENABLED
// USEFUL ONLY FOR DEMONSTRATION PURPOSES
let debugControl = document.getElementById('debug');
let debug = getDebugState();
function getDebugState() {
return (debugControl.checked) ? true : false;
}
debugControl.addEventListener('change', event => {
debug = getDebugState();
});
// TRIGGER A REFLOW BY GOING FULLSCREEN ON THE SPECIFIED NODE
function toggleFullscreen(element) {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
element.requestFullscreen();
}
}
// ATTACH REFLOW TRIGGER TO USER INPUT
const trigger = document.getElementById('toggle');
trigger.addEventListener('click', event => {
toggleFullscreen(resizableNode);
});
// OBSERVE AS MANY NODES AS YOU NEED
observer.observe(trigger);
// LIST OBSERVED NODES
console.log('observed nodes', observer.observed);
// STOP OBSERVING NODES THAT YOU NO LONGER NEED TO KEEP TRACK OF
observer.unobserve(trigger);
window.addEventListener('pagehide', event => {
// UNOBSERVE ALL NODES (IN CASE YOU EVER NEED TO)
observer.disconnect();
});
</script>
</body>
</html>