| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-20 19:34:06 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-23 10:09:51 -0700 |
| commit | 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf (patch) | |
| tree | a072ea398ce00b68dd0e5e670b32ac5ee1a812ad /src/app.js | |
| parent | 263201d869956b94660d4efa8297e89dadbe36a8 (diff) | |
Use CSS transformations instead of manipulating the viewBox
Diffstat (limited to 'src/app.js')
| -rw-r--r-- | src/app.js | 33 |
1 files changed, 23 insertions, 10 deletions
@@ -1,18 +1,31 @@ import zoom from './modules/zoom.js'; import pan from './modules/pan.js'; -window.addEventListener('load', function () { - const svg = document.querySelector('object').contentDocument.querySelector('svg'); +const optionalZoomFactor = 0.1, + container = document.querySelector('.container'), + object = document.querySelector('object'), + img = document.querySelector('img'), + button = document.querySelector('button'); + +function reset(elements) { + elements.forEach(el => el.removeAttribute('style')); +} - svg.addEventListener('wheel', e => { - e.preventDefault(); +// If embedding an SVG using an <object> tag, it's necessary to wait until the +// page has loaded before querying its `contentDocument`, otherwise it will be +// `null`. - svg.setAttributeNS(null, 'viewBox', zoom(svg, e)); - }, { passive: false }); +window.addEventListener('load', function () { + const svg = object.contentDocument.querySelector('svg'), + pannableAndZoomableElements = [img, svg]; - svg.addEventListener('pointerdown', e => { - e.preventDefault(); + button.addEventListener('click', () => { + [button, container].forEach(el => el.classList.toggle('switch')); + reset(pannableAndZoomableElements); + }); - pan(svg, e); - }, { passive: false }); + pannableAndZoomableElements.forEach(el => { + el.addEventListener('wheel', e => zoom(el, e, optionalZoomFactor), { passive: false }); + el.addEventListener('pointerdown', e => pan(el, e), { passive: false }); + }); }); |