nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

mermaid: only show zoom reset button if zoomed #691

Browse source
This commit is contained in:
Sören Weber 2023-10-18 22:43:30 +02:00
parent 292e261617
commit 3787cfccc5
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
1 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
static/js/theme.js
View file

@ -316,31 +316,36 @@ function initMermaid( update, attrs ) {
// https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607 // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607
var svgs = d3.selectAll( 'body:not(.print) .mermaid.zoom > #' + id ); var svgs = d3.selectAll( 'body:not(.print) .mermaid.zoom > #' + id );
svgs.each( function(){ svgs.each( function(){
var svg = d3.select( this );
svg.html( '<g>' + svg.html() + '</g>' );
var inner = svg.select( '*:scope > g' );
var zoom = d3.zoom().on( 'zoom', function( e ){
inner.attr( 'transform', e.transform );
});
svg.call( zoom );
var parent = this.parentElement; var parent = this.parentElement;
// we need to copy the maxWidth, otherwise our reset button will not align in the upper right // we need to copy the maxWidth, otherwise our reset button will not align in the upper right
parent.style.maxWidth = this.style.maxWidth || this.getAttribute( 'width' ); parent.style.maxWidth = this.style.maxWidth || this.getAttribute( 'width' );
// if no unit is given for the width // if no unit is given for the width
parent.style.maxWidth = parent.style.maxWidth || 'calc( ' + this.getAttribute( 'width' ) + 'px + 1rem )'; parent.style.maxWidth = parent.style.maxWidth || 'calc( ' + this.getAttribute( 'width' ) + 'px + 1rem )';
parent.insertAdjacentHTML( 'beforeend', '<span class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></span>' ); var svg = d3.select( this );
var button = parent.querySelector( '.svg-reset-button' ); svg.html( '<g>' + svg.html() + '</g>' );
button.addEventListener( 'click', function( event ){ var inner = svg.select( '*:scope > g' );
svg.transition() var zoom = d3.zoom().on( 'zoom', function( e ){
.duration( 350 ) inner.attr( 'transform', e.transform );
.call( zoom.transform, d3.zoomIdentity ); if( parent.querySelector( '.svg-reset-button' ) ){
this.setAttribute( 'aria-label', window.T_View_reset ); return;
this.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isImageRtl?'e':'w')) ); }
}); parent.insertAdjacentHTML( 'beforeend', '<span class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></span>' );
button.addEventListener( 'mouseleave', function() { var button = parent.querySelector( '.svg-reset-button' );
this.removeAttribute( 'aria-label' ); button.addEventListener( 'click', function( event ){
this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' ); 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 );
}); });
}, },
querySelector: '.mermaid.mermaid-render', querySelector: '.mermaid.mermaid-render',