diff --git a/static/css/theme.css b/static/css/theme.css
index c18174a8df..50e3b4ef16 100644
--- 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
index 768d9fafd7..84740437b9 100644
--- 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( '' + svg.html() + '' );
var inner = svg.select( '*:scope > g' );
+ parent.insertAdjacentHTML( 'beforeend', '' );
+ 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', '' );
- 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 );
});