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: let it behave like block level element #795

Browse source
This commit is contained in:
Sören Weber 2024-03-11 21:37:55 +01:00
parent a9e7e8a492
commit 74b9aaaeed
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 15 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
static/css/theme.css
View file

@ -1369,7 +1369,6 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
} }
.mermaid { .mermaid {
border: 1px solid transparent;
display: inline-block; display: inline-block;
padding: .5rem .5rem 0 .5rem; padding: .5rem .5rem 0 .5rem;
position: relative; position: relative;
@ -1380,17 +1379,17 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
.mermaid.mermaid-render { .mermaid.mermaid-render {
visibility: visible; visibility: visible;
} }
.mermaid.zoomable:hover {
border-color: rgba( 134, 134, 134, .333 );
}
.mermaid > svg { .mermaid > svg {
/* remove inline height from generated diagram */ /* remove inline height from generated diagram */
border: 1px solid transparent;
height: initial !important; height: initial !important;
} }
.mermaid.zoomable > svg { .mermaid-container.zoomable > .mermaid > svg {
cursor: grab; cursor: grab;
} }
.mermaid-container.zoomable > .mermaid:hover > svg{
border-color: rgba( 134, 134, 134, .333 );
}
.svg-reset-button { .svg-reset-button {
background-color: rgba( 160, 160, 160, .2 ); background-color: rgba( 160, 160, 160, .2 );

25
static/js/theme.js
View file

@ -217,24 +217,19 @@ function initMermaid( update, attrs ) {
is_initialized = true; is_initialized = true;
var graph = serializeGraph( parse ); var graph = serializeGraph( parse );
var new_element = document.createElement( 'div' );
for( var attr of element.attributes ){
new_element.setAttribute( attr.name, attr.value );
element.removeAttribute( attr.name );
}
new_element.classList.add( 'mermaid-container' );
new_element.classList.remove( 'mermaid' );
element.classList.add( 'mermaid' );
element.innerHTML = graph; element.innerHTML = graph;
if( element.offsetParent !== null ){ if( element.offsetParent !== null ){
element.classList.add( 'mermaid-render' ); element.classList.add( 'mermaid-render' );
} }
var new_element = document.createElement( 'div' );
new_element.classList.add( 'mermaid-container' );
if( element.classList.contains( 'align-right' ) ){
new_element.classList.add( 'align-right' );
element.classList.remove( 'align-right' );
}
if( element.classList.contains( 'align-center' ) ){
new_element.classList.add( 'align-center' );
element.classList.remove( 'align-center' );
}
if( element.classList.contains( 'align-left' ) ){
new_element.classList.add( 'align-left' );
element.classList.remove( 'align-left' );
}
new_element.innerHTML = '<div class="mermaid-code">' + graph + '</div>' + element.outerHTML; new_element.innerHTML = '<div class="mermaid-code">' + graph + '</div>' + element.outerHTML;
element.parentNode.replaceChild( new_element, element ); element.parentNode.replaceChild( new_element, element );
}); });
@ -314,7 +309,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.zoomable > #' + id ); var svgs = d3.selectAll( 'body:not(.print) .mermaid-container.zoomable > .mermaid > #' + 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