nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

mermaid: fix zoom button #725

Browse source
This commit is contained in:
Sören Weber 2023-11-18 23:19:35 +01:00
parent 10f696e4ce
commit 32d5fd5d56
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/partials/shortcodes/mermaid.html
View file

@ -19,7 +19,7 @@
{{- end }} {{- end }}
{{- end }} {{- end }}
{{- with $page }} {{- with $page }}
<pre class="mermaid align-{{ $align }}{{ if $zoom }} zoom{{ end }}"> <pre class="mermaid align-{{ $align }}{{ if $zoom }} zoomable{{ end }}">
{{- replaceRE "&#39;" "'" ( replaceRE "&#34;" "\"" ( $content | safeHTML ) ) -}} {{- replaceRE "&#39;" "'" ( replaceRE "&#34;" "\"" ( $content | safeHTML ) ) -}}
</pre> </pre>
{{- .Store.Set "hasMermaid" true }} {{- .Store.Set "hasMermaid" true }}

33
static/css/theme.css
View file

@ -1320,20 +1320,17 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
.mermaid { .mermaid {
border: 1px solid transparent; border: 1px solid transparent;
display: inline-block;
padding: .5rem .5rem 0 .5rem;
position: relative;
/* don't use display: none, as this will cause no renderinge by Mermaid */ /* don't use display: none, as this will cause no renderinge by Mermaid */
visibility: hidden; visibility: hidden;
padding: .5rem .5rem 0 .5rem;
}
.mermaid.mermaid-render {
display: inline;
visibility: visible;
}
.mermaid.mermaid-render.zoom {
display: inline-block;
position: relative;
width: 100%; width: 100%;
} }
.mermaid.zoom:hover { .mermaid.mermaid-render {
visibility: visible;
}
.mermaid.zoomable:hover {
border-color: rgba( 134, 134, 134, .333 ); border-color: rgba( 134, 134, 134, .333 );
} }
@ -1341,8 +1338,8 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
/* remove inline height from generated diagram */ /* remove inline height from generated diagram */
height: initial !important; height: initial !important;
} }
.mermaid.zoom > svg { .mermaid.zoomable > svg {
cursor: pointer; cursor: grab;
} }
.svg-reset-button { .svg-reset-button {
@ -1359,15 +1356,15 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
right: 4px; right: 4px;
top: 4px; top: 4px;
} }
@media (any-hover: none) { .mermaid:hover .svg-reset-button.zoomed {
/* if there is at least one input device that does not support hover, we want to force the reset button */ display: block;
.svg-reset-button.zoom { }
@media (any-hover: some) {
/* if there is at least one input device that does not support hover, we want to force the reset button if zoomed */
.svg-reset-button.zoomed {
display: block; display: block;
} }
} }
.mermaid:hover .svg-reset-button {
display: block;
}
.svg-reset-button > i { .svg-reset-button > i {
font-size: .859625rem; font-size: .859625rem;

12
static/js/theme.js
View file

@ -314,7 +314,7 @@ function initMermaid( update, attrs ) {
postRenderCallback: function( id ){ postRenderCallback: function( id ){
// zoom for Mermaid // zoom for Mermaid
// 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.zoomable > #' + id );
svgs.each( function(){ svgs.each( function(){
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
@ -328,7 +328,12 @@ function initMermaid( update, attrs ) {
var button = parent.querySelector( '.svg-reset-button' ); 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 );
button.classList.add( "zoom" ); if( e.transform.k == 1 ){
button.classList.remove( 'zoomed' );
}
else{
button.classList.add( 'zoomed' );
}
}); });
button.addEventListener( 'click', function( event ){ button.addEventListener( 'click', function( event ){
svg.transition() svg.transition()
@ -338,10 +343,9 @@ function initMermaid( update, attrs ) {
this.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isImageRtl?'e':'w')) ); this.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isImageRtl?'e':'w')) );
}); });
button.addEventListener( 'mouseleave', function() { button.addEventListener( 'mouseleave', function() {
this.removeAttribute( 'aria-label' );
if( this.classList.contains( 'tooltipped' ) ){ if( this.classList.contains( 'tooltipped' ) ){
this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' ); this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' );
this.classList.remove( "zoom" ); this.removeAttribute( 'aria-label' );
} }
}); });
svg.call( zoom ); svg.call( zoom );