Copybara bot | be50d49 | 2023-11-30 00:16:42 +0100 | [diff] [blame] | 1 | <!-- See: https://github.com/WICG/ResizeObserver/blob/master/demo.html --> |
| 2 | |
| 3 | <style> |
| 4 | .resize { |
| 5 | border: 2em solid rgba(0,255,0, 0.5); |
| 6 | background-color: #DDD; |
| 7 | width: 90%; //300.49px; |
| 8 | height: 200.5px; |
| 9 | overflow: hidden; |
| 10 | position:relative; |
| 11 | display:inline-block; |
| 12 | } |
| 13 | .yellowBorder { |
| 14 | border-width: 1px; |
| 15 | border-style: solid; |
| 16 | } |
| 17 | |
| 18 | .maptiles { |
| 19 | overflow: hidden; |
| 20 | } |
| 21 | |
| 22 | .maptiles::after { |
| 23 | content: "map tiles"; |
| 24 | position: relative; |
| 25 | top: 20px; |
| 26 | } |
| 27 | |
| 28 | .elipse { |
| 29 | border: 20px solid rgba(100,255,100, 0.5); |
| 30 | } |
| 31 | .elipse::after { |
| 32 | content: "canvas"; |
| 33 | position: relative; |
| 34 | top: -100px; |
| 35 | } |
| 36 | .domMunch { |
| 37 | background-color: orange; |
| 38 | } |
| 39 | .domMunch > div { |
| 40 | display: inline-block; |
| 41 | width: 20px; |
| 42 | height: 20px; |
| 43 | border: 1px solid black; |
| 44 | } |
| 45 | .domMunch::after { |
| 46 | content: "domMunch"; |
| 47 | position: relative; |
| 48 | top: 20px; |
| 49 | } |
| 50 | |
| 51 | .toolbar { |
| 52 | margin: 16px 0; |
| 53 | position: relative; |
| 54 | display: flex; |
| 55 | align-items: center; |
| 56 | } |
| 57 | |
| 58 | .toolbar > * { |
| 59 | margin-right: 8px; |
| 60 | min-width: 110px; |
| 61 | width: auto; |
| 62 | } |
| 63 | |
| 64 | .toolbar > span { |
| 65 | flex-grow: 1; |
| 66 | text-align: right; |
| 67 | font-weight: 600; |
| 68 | font-size: 1.2em; |
| 69 | } |
| 70 | </style> |
| 71 | |
| 72 | <h1 style="display:none">ResizeObserver unexpected error</h1> |
| 73 | <pre id="log" style="display:none">log:</pre> |
| 74 | |
| 75 | <section class="toolbar"> |
| 76 | <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> |
| 77 | <input id="cb-observe" type="checkbox" class="mdl-checkbox__input" checked> |
| 78 | <span class="mdl-checkbox__label">Observe</span> |
| 79 | </label> |
| 80 | |
| 81 | <div id="input-inc-container" class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield"> |
| 82 | <input id="input-inc" class="mdl-textfield__input" type="number" min="1" max="40" value="10"> |
| 83 | <label class="mdl-textfield__label">Size increment</label> |
| 84 | </div> |
| 85 | |
| 86 | <button id="btn-grow" class="cmd-button mdl-button mdl-js-button mdl-button--raised">Grow</button> |
| 87 | <button id="btn-shrink" class="cmd-button mdl-button mdl-js-button mdl-button--raised">Shrink</button> |
| 88 | <button id="btn-delete" class="cmd-button mdl-button mdl-js-button mdl-button--raised">Delete observed element</button> |
| 89 | |
| 90 | <span id="observe-notification"> |
| 91 | </span> |
| 92 | </section> |
| 93 | |
| 94 | |
| 95 | <div id="observed-element" class="resize maptiles" ></div> |
| 96 | |
| 97 | <script> |
| 98 | 'use strict'; |
| 99 | |
| 100 | (function() { |
| 101 | 'use strict'; |
| 102 | document.addEventListener('DOMContentLoaded', function() { |
| 103 | |
| 104 | if (!window.ResizeObserver) { |
| 105 | throw new Error('no window.ResizeObserver'); |
| 106 | } |
| 107 | |
| 108 | function log(msg) { |
| 109 | var e = document.querySelector('#log'); |
| 110 | e.textContent = e.innerText + '\n' + msg; |
| 111 | } |
| 112 | |
| 113 | function nextColor() { |
| 114 | return '#'+Math.random().toString(16).substr(-6); |
| 115 | } |
| 116 | |
| 117 | function grow() { |
| 118 | var inc = parseInt(document.querySelector('#input-inc').value); |
| 119 | var elements = document.querySelectorAll('.resize'); |
| 120 | for (var i = 0; i < elements.length; i++) { |
| 121 | var el = elements[i]; |
| 122 | var s = window.getComputedStyle(el); |
| 123 | var w = parseFloat(s.width); |
| 124 | var h = parseFloat(s.height); |
| 125 | el.style.width = (w + inc) + 'px'; |
| 126 | el.style.height = (h + inc * 2 / 3) + 'px'; |
| 127 | } |
| 128 | } |
| 129 | |
| 130 | function shrink() { |
| 131 | var dec = parseInt(document.querySelector('#input-inc').value); |
| 132 | var elements = document.querySelectorAll('.resize'); |
| 133 | for (var i = 0; i < elements.length; i++) { |
| 134 | var el = elements[i]; |
| 135 | var s = window.getComputedStyle(el); |
| 136 | var w = parseFloat(s.width); |
| 137 | var h = parseFloat(s.height); |
| 138 | el.style.width = (w - dec) + 'px'; |
| 139 | el.style.height = (h - dec * 2 / 3) + 'px'; |
| 140 | } |
| 141 | } |
| 142 | |
| 143 | |
| 144 | function initResizeHandlers() { |
| 145 | var elements = document.querySelectorAll('.maptiles'); |
| 146 | for (var i = 0; i < elements.length; i++) { |
| 147 | elements[i].onresize = function() { this.style.borderColor = nextColor() }; |
| 148 | } |
| 149 | } |
| 150 | |
| 151 | function displayNotification(value) { |
| 152 | var notification = document.querySelector("#observe-notification"); |
| 153 | notification.style.color = nextColor(); |
| 154 | if(Number.isInteger(value)) { |
| 155 | notification.innerHTML = '<span>Observed: ' + value + ' element' + (value > 1 ? 's' : '') + '</span>'; |
| 156 | } |
| 157 | else { |
| 158 | notification.innerHTML = '<span>Observer: ' + value + '</span>'; |
| 159 | } |
| 160 | } |
| 161 | |
| 162 | // |
| 163 | // Init |
| 164 | // |
| 165 | window.addEventListener('error', function (e) { |
| 166 | var error = e.error; |
| 167 | console.log(error); |
| 168 | log(error); |
| 169 | }); |
| 170 | |
| 171 | |
| 172 | var ro = new ResizeObserver( function(entries) { |
| 173 | |
| 174 | displayNotification(entries.length); |
| 175 | |
| 176 | for (var i = 0; i < entries.length; i++) { |
| 177 | var entry = entries[i]; |
| 178 | if (!entry.target || !entry.target.parentNode) { |
| 179 | throw new Error("detected resize on orphan element"); |
| 180 | } |
| 181 | if (entry.target.onresize) { |
| 182 | entry.target.onresize(entry); |
| 183 | } |
| 184 | } |
| 185 | }); |
| 186 | |
| 187 | function toggleObserve() { |
| 188 | var isObserve = document.querySelector('#cb-observe').checked; |
| 189 | displayNotification(isObserve ? 'on' : 'off'); |
| 190 | |
| 191 | var elements = document.querySelectorAll('.resize'); |
| 192 | if (isObserve) { |
| 193 | for (var i = 0; i < elements.length; i++) { |
| 194 | ro.observe(elements[i]); |
| 195 | } |
| 196 | } |
| 197 | else { |
| 198 | for (var i = 0; i < elements.length; i++) { |
| 199 | ro.unobserve(elements[i]); |
| 200 | } |
| 201 | } |
| 202 | } |
| 203 | |
| 204 | function deleteObservedElement() { |
| 205 | var el = document.querySelector('#observed-element'); |
| 206 | el.parentNode.removeChild(el); |
| 207 | } |
| 208 | |
| 209 | |
| 210 | document.querySelector('#cb-observe').addEventListener('click', function() { toggleObserve() }); |
| 211 | document.querySelector('#btn-grow').addEventListener('click', function() { grow() }); |
| 212 | document.querySelector('#btn-shrink').addEventListener('click', function() { shrink() }); |
| 213 | document.querySelector('#btn-delete').addEventListener('click', function() { deleteObservedElement() }); |
| 214 | |
| 215 | // Start |
| 216 | initResizeHandlers() |
| 217 | toggleObserve(); |
| 218 | }); |
| 219 | |
| 220 | }()); |
| 221 | </script> |