Skip to content

Commit 98d27f6

Browse files
author
Rosa Hase
committed
cleanup the code; use css file for interactive graph stuff
1 parent b0d7278 commit 98d27f6

3 files changed

Lines changed: 47 additions & 7 deletions

File tree

docs/ObsidianVault/assets/javascripts/graph.js renamed to docs/ObsidianVault/assets/javascripts/interactive_graph.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
// add graph button next to light/dark mode switch
2-
$('.md-search').before('<form class="md-header__option"><label id="graph_button" class="md-header__button md-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171 146"><path d="M171,100 C171,106.075 166.075,111 160,111 C154.016,111 149.158,106.219 149.014,100.27 L114.105,83.503 C111.564,86.693 108.179,89.18 104.282,90.616 L108.698,124.651 C112.951,126.172 116,130.225 116,135 C116,141.075 111.075,146 105,146 C98.925,146 94,141.075 94,135 C94,131.233 95.896,127.912 98.781,125.93 L94.364,91.896 C82.94,90.82 74,81.206 74,69.5 C74,69.479 74.001,69.46 74.001,69.439 L53.719,64.759 C50.642,70.269 44.76,74 38,74 C36.07,74 34.215,73.689 32.472,73.127 L20.624,90.679 C21.499,92.256 22,94.068 22,96 C22,102.075 17.075,107 11,107 C4.925,107 0,102.075 0,96 C0,89.925 4.925,85 11,85 C11.452,85 11.895,85.035 12.332,85.089 L24.184,67.531 C21.574,64.407 20,60.389 20,56 C20,48.496 24.594,42.07 31.121,39.368 L29.111,21.279 C24.958,19.707 22,15.704 22,11 C22,4.925 26.925,0 33,0 C39.075,0 44,4.925 44,11 C44,14.838 42.031,18.214 39.051,20.182 L41.061,38.279 C49.223,39.681 55.49,46.564 55.95,55.011 L76.245,59.694 C79.889,52.181 87.589,47 96.5,47 C100.902,47 105.006,48.269 108.475,50.455 L131.538,27.391 C131.192,26.322 131,25.184 131,24 C131,17.925 135.925,13 142,13 C148.075,13 153,17.925 153,24 C153,30.075 148.075,35 142,35 C140.816,35 139.678,34.808 138.609,34.461 L115.546,57.525 C117.73,60.994 119,65.098 119,69.5 C119,71.216 118.802,72.884 118.438,74.49 L153.345,91.257 C155.193,89.847 157.495,89 160,89 C166.075,89 171,93.925 171,100"></path></svg></label></form>');
1+
// add graph button next to light/dark mode switch if activated, but before search
2+
$('.md-search').before('<form class="md-header__option"> \
3+
<label id="graph_button" class="md-header__button md-icon"> \
4+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171 146"> \
5+
<path d="M171,100 C171,106.075 166.075,111 160,111 C154.016,111 149.158,106.219 149.014,100.27 L114.105,83.503 C111.564,86.693 108.179,89.18 104.282,90.616 L108.698,124.651 C112.951,126.172 116,130.225 116,135 C116,141.075 111.075,146 105,146 C98.925,146 94,141.075 94,135 C94,131.233 95.896,127.912 98.781,125.93 L94.364,91.896 C82.94,90.82 74,81.206 74,69.5 C74,69.479 74.001,69.46 74.001,69.439 L53.719,64.759 C50.642,70.269 44.76,74 38,74 C36.07,74 34.215,73.689 32.472,73.127 L20.624,90.679 C21.499,92.256 22,94.068 22,96 C22,102.075 17.075,107 11,107 C4.925,107 0,102.075 0,96 C0,89.925 4.925,85 11,85 C11.452,85 11.895,85.035 12.332,85.089 L24.184,67.531 C21.574,64.407 20,60.389 20,56 C20,48.496 24.594,42.07 31.121,39.368 L29.111,21.279 C24.958,19.707 22,15.704 22,11 C22,4.925 26.925,0 33,0 C39.075,0 44,4.925 44,11 C44,14.838 42.031,18.214 39.051,20.182 L41.061,38.279 C49.223,39.681 55.49,46.564 55.95,55.011 L76.245,59.694 C79.889,52.181 87.589,47 96.5,47 C100.902,47 105.006,48.269 108.475,50.455 L131.538,27.391 C131.192,26.322 131,25.184 131,24 C131,17.925 135.925,13 142,13 C148.075,13 153,17.925 153,24 C153,30.075 148.075,35 142,35 C140.816,35 139.678,34.808 138.609,34.461 L115.546,57.525 C117.73,60.994 119,65.098 119,69.5 C119,71.216 118.802,72.884 118.438,74.49 L153.345,91.257 C155.193,89.847 157.495,89 160,89 C166.075,89 171,93.925 171,100"> \
6+
</path> \
7+
</svg> \
8+
</label> \
9+
</form>');
310

411
// add a div to html in which the graph will be drawn
512
function add_graph_div(params) {
613
$('.md-sidebar--secondary').each(function() {
7-
$(this).contents().append('<div id="graph" style="height:300px; width: 100%;"></div>');
14+
$(this).contents().append('<div id="graph" class="graph"></div>');
815
});
916
};
1017

@@ -119,12 +126,12 @@ $("#__palette_1").change(function(){
119126
$('#graph_button').on('click', function (params) {
120127
$("body").css({ overflow: "hidden", position: "fixed" });
121128
$('#graph').remove();
122-
$('<div id="modal_graph" style="background-color: var(--md-default-fg-color--lightest); overflow: hidden; display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99;"><div id="graph" style="border: 1px solid var(--md-default-fg-color--lightest); box-shadow: 0px 0px 10px var(--md-default-fg-color--lightest); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: absolute; top: 10%; left: 15%; width: 70%; height: 80%; z-index: 100;"></div></div>').appendTo('body');
123-
$('#modal_graph').on('click', function (params) {
129+
$('<div id="modal_background"><div id="graph" class="modal_graph"></div></div>').appendTo('body');
130+
$('#modal_background').on('click', function (params) {
124131
if(params.target === this) {
125132
$("body").css({ overflow: "", position: "" });
126133
$('#graph').remove();
127-
$('#modal_graph').remove();
134+
$('#modal_background').remove();
128135
add_graph_div();
129136
myChart = init_graph();
130137
draw_graph(myChart);

‎docs/ObsidianVault/assets/stylesheets/interactive_graph.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.graph {
2+
height:300px;
3+
width: 100%;
4+
}
5+
6+
#modal_background {
7+
background-color: var(--md-default-fg-color--lightest);
8+
overflow: hidden;
9+
display: flex;
10+
position: fixed;
11+
top: 0;
12+
left: 0;
13+
width: 100%;
14+
height: 100%;
15+
z-index: 99;
16+
}
17+
18+
.modal_graph {
19+
border: 1px solid var(--md-default-fg-color--lightest);
20+
box-shadow: 0px 0px 10px var(--md-default-fg-color--lightest);
21+
border-radius: 8px;
22+
overflow: hidden;
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
position: absolute;
27+
top: 10%;
28+
left: 15%;
29+
width: 70%;
30+
height: 80%;
31+
z-index: 100;
32+
}

‎mkdocs.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,10 @@ markdown_extensions:
6464

6565
extra_css:
6666
- assets/stylesheets/obsidian_tags.css
67+
- assets/stylesheets/interactive_graph.css
6768

6869
extra_javascript:
6970
- https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
7071
- https://fastly.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js
7172
- assets/javascripts/obsidian_tags.js
72-
- assets/javascripts/graph.js
73+
- assets/javascripts/interactive_graph.js

0 commit comments

Comments
 (0)