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: show zoom reset button always on mobile #691

Browse source
This commit is contained in:
Sören Weber 2023-10-27 00:30:30 +02:00
parent 1ff5026bec
commit 6cdb5c1dad
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/css/theme.css
View file

@ -1353,6 +1353,12 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
right: 4px; right: 4px;
top: 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 { .mermaid:hover .svg-reset-button {
display: block; display: block;
} }

33
static/js/theme.js
View file

@ -324,26 +324,25 @@ function initMermaid( update, attrs ) {
var svg = d3.select( this ); var svg = d3.select( this );
svg.html( '<g>' + svg.html() + '</g>' ); svg.html( '<g>' + svg.html() + '</g>' );
var inner = svg.select( '*:scope > 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 ){ var zoom = d3.zoom().on( 'zoom', function( e ){
inner.attr( 'transform', e.transform ); inner.attr( 'transform', e.transform );
if( parent.querySelector( '.svg-reset-button' ) ){ button.classList.add( "zoom" );
return; });
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 ); svg.call( zoom );
}); });