https://docs.conda.io/projects/conda/en/stable/_static/js/panzoom.js?v=74da3ef2

1function isTouchDevice() {
2    return (('ontouchstart' in window) ||
3        (navigator.maxTouchPoints > 0) ||
4        (navigator.msMaxTouchPoints > 0));
5}
6
7function initSVG(xhr, panel) {
8    // store SVG response in content
9    panel.content.innerHTML = xhr.responseText;
10    var svg = $(panel.content).find("svg").eq(0);
11
12    // patch content to center svg
13    $(panel.content).css("display", "grid");
14    svg.css("margin", "auto");
15
16    // resize/reposition modal
17    panel.resize({
18        width: () => {
19            return Math.min(svg.width(), $(window).width() * 0.9);
20        },
21        height: () => {
22            return Math.min(
23                svg.height() +
24                $(panel).find(".jsPanel-hdr").eq(0).height() +
25                $(panel).find(".jsPanel-ftr").eq(0).height(),
26                $(window).height() * 0.9
27            );
28        }
29    });
30    panel.reposition();
31
32    // scale svg to fit
33    var xscale = $(panel.content).width() / svg.width();
34    var yscale = $(panel.content).height() / svg.height();
35    var scale = (xscale < yscale) ? xscale : yscale;
36    svg.width(svg.width() * scale);
37    svg.height(svg.height() * scale);
38
39    // initializing panzoom object
40    var panzoom = Panzoom(svg.get(0), {
41        duration: 50,
42        minScale: 1,
43        maxScale: 20,
44        step: 0.5,
45    });
46
47    // ensure slider uses the same min/max/step as panzoom
48    var slider = $("#panzoom-slider")
49    slider.attr("min", 1);
50    slider.attr("max", 10);
51    slider.attr("step", 0.5);
52    slider.attr("value", 1);
53
54    // panning and zooming using the mouse wheel
55    $(panel.content).on("wheel", function (event) {
56        event.preventDefault();
57        panzoom.zoomWithWheel(event.originalEvent);
58        slider.val(panzoom.getScale());
59    });
60
61    // code to enable double-click zoom
62    $(panel.content).dblclick(function (event) {
63        event.preventDefault();
64        if (event.shiftKey) {
65            panzoom.zoomOut();
66        } else {
67            panzoom.zoomIn();
68        }
69        slider.val(panzoom.getScale());
70    });
71
72    // button zoom
73    $("#panzoom-out").click(function () {
74        panzoom.zoomOut();
75        slider.val(panzoom.getScale());
76    });
77    $("#panzoom-in").click(function () {
78        panzoom.zoomIn();
79        slider.val(panzoom.getScale());
80    });
81
82    // slider zoom
83    slider.on("change", function () {
84        panzoom.zoom($(this).val());
85    });
86
87    // button reset
88    $("#panzoom-reset").click(function () {
89        panzoom.reset();
90        slider.val(panzoom.getScale());
91    });
92}
93
94function getTitle(element) {
95    // step through parents searching for h2/h3
96    // once we find a h2 we stop, finding a h3 is optional
97    var h2title, h3title, obj = $(element);
98    while (!h2title && obj != window.document) {
99        var h2 = obj.siblings("h2"), h3 = obj.siblings("h3");
100        if (h2.length) { h2title = h2.eq(0).text(); }
101        if (h3.length) { h3title = h3.eq(0).text(); }
102        obj = obj.parent();
103    }
104    // combine titles
105    var title = h2title;
106    if (h3title) {
107        title = title + ' ' + h3title
108    }
109    // remove non-printable chars from title
110    title = title.replace(/[^\x20-\x7e]/g, '');
111
112    return title;
113}
114
115function getFooter() {
116    return `
117        <span class="desc">
118            <i class="fa fa-search" aria-hidden="true"></i> Mouse wheel or double-click/shift+double-click for zoom.<br />
119            <i class="fa fa-arrows" aria-hidden="true"></i> Click and drag to move.<br />
120            <i class="fa fa-times" aria-hidden="true"></i> Esc to exit.
121        </span>
122        <span class="buttons">
123            <button id="panzoom-out" type="button" style="margin-right: 5px;">
124                <i class="fa fa-search-minus" aria-hidden="true"></i>
125            </button>
126            <input id="panzoom-slider" type="range" style="margin-right: 5px;" />
127            <button id="panzoom-in" type="button" style="margin-right: 5px;">
128                <i class="fa fa-search-plus" aria-hidden="true"></i>
129            </button>
130            <button id="panzoom-reset" type="button">
131                <i class="fa fa-refresh" aria-hidden="true"></i> Reset
132            </button>
133        </span>
134    `;
135}
136
137window.onload = function () {
138    // only add pan and zoom to non-touchable interfaces since they
139    // usually implement plan and zoom much better
140    if (!isTouchDevice()) {
141        var elements = document.querySelectorAll('p.plantuml img');

142        elements.forEach(element => {
143            element.addEventListener('click', function (event) {
144                event.preventDefault();
145                jsPanel.modal.create({
146                    contentAjax: {
147                        url: element.src,
148                        done: initSVG,
149                    },
150                    theme: 'none',
151                    boxShadow: 0,
152                    dragit: false,
153                    resizeit: false,
154                    headerTitle: getTitle(element),
155                    footerToolbar: getFooter,
156                });
157            });
158        });
159    };
160};