nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-06-24 09:41:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

mermaid: improve zoom UX

Browse source
This commit is contained in:
Sören Weber 2023-10-01 12:21:29 +02:00
parent d4fed0ac71
commit 394ff3f7b2
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
25 changed files with 84 additions and 4 deletions
static/js
theme.js

14
static/js/theme.js
View file

@ -155,6 +155,9 @@ function restoreTabSelections() {
}
function initMermaid( update, attrs ) {
var doBeside = false;
var isImageRtl = false;
// we are either in update or initialization mode;
// during initialization, we want to edit the DOM;
// during update we only want to execute if something changed
@ -324,12 +327,19 @@ function initMermaid( update, attrs ) {
// 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' );
// if no unit is given for the width
parent.style.maxWidth = parent.style.maxWidth || this.getAttribute( 'width' ) + 'px';
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>' );
parent.querySelector( '.svg-reset-button' ).addEventListener( 'click', function( event ){
var button = parent.querySelector( '.svg-reset-button' );
button.addEventListener( 'click', function( event ){
inner.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' );
this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' );
});
});
},