mermaid: show zoom reset button always on mobile #691

McShelby · Oct 26, 2023 · 6cdb5c1 · 6cdb5c1
1 parent 1ff5026
commit 6cdb5c1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/static/css/theme.css b/static/css/theme.css
@@ -1353,6 +1353,12 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     right: 4px;
     top: 4px;
 }
+@media (any-hover: none) {
+    /* if there is at least one input device that does not support hover, we want to force the reset button */
+    .svg-reset-button {
+        display: block;
+    }
+}
 .mermaid:hover .svg-reset-button {
     display: block;
 }

diff --git a/static/js/theme.js b/static/js/theme.js
@@ -324,26 +324,25 @@ function initMermaid( update, attrs ) {
                     var svg = d3.select( this );
                     svg.html( '<g>' + svg.html() + '</g>' );
                     var inner = svg.select( '*:scope > g' );
+                    parent.insertAdjacentHTML( 'beforeend', '<span class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></span>' );
+                    var button = parent.querySelector( '.svg-reset-button' );
                     var zoom = d3.zoom().on( 'zoom', function( e ){
                         inner.attr( 'transform', e.transform );
-                        if( parent.querySelector( '.svg-reset-button' ) ){
-                            return;
+                        button.classList.add( "zoom" );
+                    });
+                    button.addEventListener( 'click', function( event ){
+                        svg.transition()
+                            .duration( 350 )
+                            .call( zoom.transform, d3.zoomIdentity );
+                        this.setAttribute( 'aria-label', window.T_View_reset );
+                        this.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isImageRtl?'e':'w')) );
+                    });
+                    button.addEventListener( 'mouseleave', function() {
+                        this.removeAttribute( 'aria-label' );
+                        if( this.classList.contains( 'tooltipped' ) ){
+                            this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' );
+                            this.classList.remove( "zoom" );
                         }
-                        parent.insertAdjacentHTML( 'beforeend', '<span class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></span>' );
-                        var button = parent.querySelector( '.svg-reset-button' );
-                        button.addEventListener( 'click', function( event ){
-                            svg.transition()
-                                .duration( 350 )
-                                .call( zoom.transform, d3.zoomIdentity );
-                            this.setAttribute( 'aria-label', window.T_View_reset );
-                            this.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isImageRtl?'e':'w')) );
-                        });
-                        button.addEventListener( 'mouseleave', function() {
-                            this.removeAttribute( 'aria-label' );
-                            if( this.classList.contains( 'tooltipped' ) ){
-                                this.remove();
-                            }
-                        });
                     });
                     svg.call( zoom );
                 });