添加导航栏

book.toml

@@ -1,3 +1,6 @@
+
+
+
 [book]
 language = "zh"
 authors = ["Dhammapāla","Kosalla","Dhammavarī","paññāñāṇā"]
@@ -5,11 +8,20 @@ multilingual = false
 src = "src"
 title = "教理部口袋书"
 
+[preprocessor.mermaid]
+command = "mdbook-mermaid"
+
+
+
 
 [output.html]
-additional-js = ["theme/myjs/mermaid.min.js", "theme/myjs/mermaid-init.js","theme/myjs/jquery-1.12.3.min.js","theme/myjs/lrc.js","theme/myjs/nosleep.js","theme/myjs/social-share.min.js","theme/myplugin/layer/layer.js"]
+git-repository-url = "https://gitee.com/jinghong-dajin-pagoda/fofazhishi.git"
+git-repository-icon = "fa-git"
+
 mathjax-support = true
-additional-css = ["theme/fonts/tai-tham-kh-new-v3.ttf","theme/mycss/font.css","theme/mycss/lrc.css","theme/mycss/share.min.css","theme/fonts/iconfont.ttf","theme/fonts/iconfont.woff","theme/myplugin/layer/theme/default/layer.css","theme/myplugin/layer/theme/default/icon.png"] 
+additional-css = ["theme/fonts/tai-tham-kh-new-v3.ttf","theme/mycss/font.css","theme/mycss/lrc.css","theme/mycss/share.min.css","theme/fonts/iconfont.ttf","theme/fonts/iconfont.woff","theme/myplugin/layer/theme/default/layer.css","theme/myplugin/layer/theme/default/icon.png","theme/css/anchor_list.css"] 
+
+additional-js = ["theme/myjs/mermaid.min.js", "theme/myjs/mermaid-init.js","theme/myjs/jquery-1.12.3.min.js","theme/myjs/lrc.js","theme/myjs/nosleep.js","theme/myjs/anchor_list.js","theme/myjs/social-share.min.js","theme/myplugin/layer/layer.js"]
 
 [output.html.fold]
 enable = true

mermaid-init.js

@@ -0,0 +1 @@
+mermaid.initialize({startOnLoad:true});

src/chanting/evening_chanting_A.md

@@ -177,7 +177,7 @@
 <tai>ᩍᨾᩣᨿ ᨵᨾᩜ-ᩋᨶᩩᨵᨾᩜ-ᨷᨭᩥᨷᨲ᩠ᨲᩥᨿᩣ ᩈᩘᨥᩴ ᨷᩪᨩᩮᨾᩥ.</tai><roman>Imāya dhamma-anudhamma-paṭipattiyā Saṅghaṃ pūjemi.</roman><zh>以此法随法行, 我敬奉僧！</zh>
 <tai>ᩋᨴ᩠ᨵᩤ ᩍᨾᩣᨿ ᨷᨭᩥᨷᨲ᩠ᨲᩥᨿᩣ ᨩᩣᨲᩥ-ᨩᩁᩣ-ᨻ᩠ᨿᩣᨵᩥ-ᨾᩁᨱᨾ᩠ᩉᩣ ᨷᩁᩥᨾᩩᨧ᩠ᨧᩥᩔᩣᨾᩥ.</tai><roman>Addhā imāya paṭipattiyā jāti-jarā-byādhi-maraṇamhā parimuccissāmi.</roman><zh>切实依此而行, 我将解脱生、老、病、死！</zh>
 <tai>ᩍᨴᩴ ᨾᩮ ᨷᩩᨬ᩠ᨬᩴ ᩋᩣᩈᩅ-ᨠ᩠ᨡᨿ-ᩋᩅᩉᩴ ᩉᩮᩣᨲᩩ.</tai><roman>Idaṃ me puññaṃ āsava-kkhaya-avahaṃ hotu.</roman><zh>愿我此功德, 导向诸漏尽！</zh>
-<tai>ᩍᨴᨾ᩠ ᨾᩮ ᨷᩩᨬ᩠ᨬᩴ ᨶᩥᨻ᩠ᨻᩣᨶᩔ ᨷᨧ᩠ᨧᨿᩮᩣ ᩉᩮᩣᨲᩩ.</tai><roman>Idam me puññaṃ nibbānassa paccayo hotu.</roman><zh>愿我此功德, 为证涅槃缘！</zh>
+<tai>ᩍᨴᩴ ᨾᩮ ᨷᩩᨬ᩠ᨬᩴ ᨶᩥᨻ᩠ᨻᩣᨶᩔ ᨷᨧ᩠ᨧᨿᩮᩣ ᩉᩮᩣᨲᩩ.</tai><roman>Idaṃ me puññaṃ nibbānassa paccayo hotu.</roman><zh>愿我此功德, 为证涅槃缘！</zh>
 <tai>ᨾᨾ ᨷᩩᨬ᩠ᨬ-ᨽᩣᨣᩴ ᩈᨻ᩠ᨻ-ᩈᨲ᩠ᨲᩣᨶᩴ ᨽᩣᨩᩮᨾᩥ;</tai><roman>Mama puñña-bhāgaṃ sabba-sattānaṃ bhājemi;</roman><zh>我此功德分, 回向诸有情,</zh>
 <tai>ᨲᩮ ᩈᨻᩮ᩠ᨻ ᨾᩮ ᩈᨾᩴ ᨷᩩᨬ᩠ᨬ-ᨽᩣᨣᩴ ᩃᨽᨶ᩠ᨲᩩ.</tai><roman>Te sabbe me samaṃ puñña-bhāgaṃ labhantu.</roman><zh>愿彼等一切, 同得功德分！</zh>
 <tai>ᩈᩣᨵᩩ! ᩈᩣᨵᩩ! ᩈᩣᨵᩩ!</tai><roman>Sādhu! Sādhu! Sādhu!</roman><zh>善哉！善哉！善哉！</zh>

src/chanting/ratana_sutta.md

@@ -49,7 +49,7 @@
 <tai>ᨲᨿᩔᩩ ᨵᨾᩜᩣ ᨩᩉᩥᨲᩣ ᨽᩅᨶ᩠ᨲᩥ:</tai><roman>Tay’assu dhammā jahitā bhavanti:</roman><zh>实已断除三种法：</zh>
 <tai>ᩈᨠ᩠ᨠᩣᨿ-ᨴᩥᨭᩛᩥ, ᩅᩥᨧᩥᨠᩥᨧ᩠ᨨᩥᨲᨬ᩠ᨧ,</tai><roman>Sakkāya-diṭṭhi, vicikicchitañ·ca,</roman><zh>有身邪见与怀疑、</zh>
 <tai>ᩈᩦᩃ-ᨻ᩠ᨻᨲᩴ ᩅᩤᨷᩥ ᨿᨴᨲ᩠ᨳᩥ ᨠᩥᨬ᩠ᨧᩥ.</tai><roman>Sīla-bbataṃ vāpi yad·atthi kiñci.</roman><zh>戒禁取乃至其余；</zh>
-<tai>ᨧᨲᩪᩉ᩠(ᩍ)ᩋᨷᩤᨿᩮᩉᩥ ᨧ ᩅᩥᨷ᩠ᨷᨾᩩᨲᩮ᩠ᨲᩣ,</tai><roman>Catūh(i)apāyehi ca vippamutto,</roman><zh>他已解脱四恶趣,</zh>
+<tai>ᨧᨲᩪᩉᨷᩤᨿᩮᩉᩥ ᨧ ᩅᩥᨷ᩠ᨷᨾᩩᨲᩮ᩠ᨲᩣ,</tai><roman>Catūh(i)apāyehi ca vippamutto,</roman><zh>他已解脱四恶趣,</zh>
 <tai>ᨨ ᨧᩣᨽᩥᨮᩣᨶᩣᨶᩥ ᩋᨽᨻᩮ᩠ᨻᩣ ᨠᩣᨲᩩᩴ.</tai><roman>Cha cābhiṭhānāni abhabbo kātuṃ.</roman><zh>不可能造六逆罪。</zh>
 <tai>ᩍᨴᨾ᩠ᨷᩥ ᩈᩘᨥᩮ ᩁᨲᨶᩴ ᨷᨱᩦᨲᩴ.</tai><roman>Idam’pi Saṅghe ratanaṃ paṇītaṃ.</roman><zh>此乃僧之殊胜宝,</zh>
 <tai>ᩑᨲᩮᨶ ᩈᨧᩮ᩠ᨧᨶ ᩈᩩᩅᨲ᩠ᨳᩥ ᩉᩮᩣᨲᩩ!</tai><roman>Etena saccena suvatthi hotu!</roman><zh>以此实语愿安乐！</zh>

src/lrc/大金塔寺晚课0322.lrc

@@ -358,7 +358,7 @@
 [37:54.35]ᨲᨿᩔᩩ ᨵᨾᩜᩣ ᨩᩉᩥᨲᩣ ᨽᩅᨶ᩠ᨲᩥ:<br/>Tay’assu dhammā jahitā bhavanti:<br/>实已断除三种法：
 [37:58.48]ᩈᨠ᩠ᨠᩣᨿ-ᨴᩥᨭᩛᩥ, ᩅᩥᨧᩥᨠᩥᨧ᩠ᨨᩥᨲᨬ᩠ᨧ,<br/>Sakkāya-diṭṭhi, vicikicchitañ·ca,<br/>有身邪见与怀疑、
 [38:02.31]ᩈᩦᩃ-ᨻ᩠ᨻᨲᩴ ᩅᩤᨷᩥ ᨿᨴᨲ᩠ᨳᩥ ᨠᩥᨬ᩠ᨧᩥ.<br/>Sīla-bbataṃ vāpi yad·atthi kiñci.<br/>戒禁取乃至其余；
-[38:06.45]ᨧᨲᩪᩉ᩠(ᩍ)ᩋᨷᩤᨿᩮᩉᩥ ᨧ ᩅᩥᨷ᩠ᨷᨾᩩᨲᩮ᩠ᨲᩣ,<br/>Catūh(i)apāyehi ca vippamutto,<br/>他已解脱四恶趣,
+[38:06.45]ᨧᨲᩪᩉᨷᩤᨿᩮᩉᩥ ᨧ ᩅᩥᨷ᩠ᨷᨾᩩᨲᩮ᩠ᨲᩣ,<br/>Catūh(i)apāyehi ca vippamutto,<br/>他已解脱四恶趣,
 [38:10.28]ᨨ ᨧᩣᨽᩥᨮᩣᨶᩣᨶᩥ ᩋᨽᨻᩮ᩠ᨻᩣ ᨠᩣᨲᩩᩴ.<br/>Cha cābhiṭhānāni abhabbo kātuṃ.<br/>不可能造六逆罪。
 [38:14.42]ᩍᨴᨾ᩠ᨷᩥ ᩈᩘᨥᩮ ᩁᨲᨶᩴ ᨷᨱᩦᨲᩴ.<br/>Idam’pi Saṅghe ratanaṃ paṇītaṃ.<br/>此乃僧之殊胜宝,
 [38:17.95]ᩑᨲᩮᨶ ᩈᨧᩮ᩠ᨧᨶ ᩈᩩᩅᨲ᩠ᨳᩥ ᩉᩮᩣᨲᩩ!<br/>Etena saccena suvatthi hotu!<br/>以此实语愿安乐！

src/lrc/大金塔寺晚课（宝经）祜巴罕听_0321.lrc

@@ -358,7 +358,7 @@
 [37:52.35]ᨲᨿᩔᩩ ᨵᨾᩜᩣ ᨩᩉᩥᨲᩣ ᨽᩅᨶ᩠ᨲᩥ:<br/>Tay’assu dhammā jahitā bhavanti:<br/>实已断除三种法：
 [37:56.48]ᩈᨠ᩠ᨠᩣᨿ-ᨴᩥᨭᩛᩥ, ᩅᩥᨧᩥᨠᩥᨧ᩠ᨨᩥᨲᨬ᩠ᨧ,<br/>Sakkāya-diṭṭhi, vicikicchitañ·ca,<br/>有身邪见与怀疑、
 [38:00.31]ᩈᩦᩃ-ᨻ᩠ᨻᨲᩴ ᩅᩤᨷᩥ ᨿᨴᨲ᩠ᨳᩥ ᨠᩥᨬ᩠ᨧᩥ.<br/>Sīla-bbataṃ vāpi yad·atthi kiñci.<br/>戒禁取乃至其余；
-[38:04.45]ᨧᨲᩪᩉ᩠(ᩍ)ᩋᨷᩤᨿᩮᩉᩥ ᨧ ᩅᩥᨷ᩠ᨷᨾᩩᨲᩮ᩠ᨲᩣ,<br/>Catūh(i)apāyehi ca vippamutto,<br/>他已解脱四恶趣,
+[38:04.45]ᨧᨲᩪᩉᨷᩤᨿᩮᩉᩥ ᨧ ᩅᩥᨷ᩠ᨷᨾᩩᨲᩮ᩠ᨲᩣ,<br/>Catūh(i)apāyehi ca vippamutto,<br/>他已解脱四恶趣,
 [38:08.28]ᨨ ᨧᩣᨽᩥᨮᩣᨶᩣᨶᩥ ᩋᨽᨻᩮ᩠ᨻᩣ ᨠᩣᨲᩩᩴ.<br/>Cha cābhiṭhānāni abhabbo kātuṃ.<br/>不可能造六逆罪。
 [38:12.42]ᩍᨴᨾ᩠ᨷᩥ ᩈᩘᨥᩮ ᩁᨲᨶᩴ ᨷᨱᩦᨲᩴ.<br/>Idam’pi Saṅghe ratanaṃ paṇītaṃ.<br/>此乃僧之殊胜宝,
 [38:15.95]ᩑᨲᩮᨶ ᩈᨧᩮ᩠ᨧᨶ ᩈᩩᩅᨲ᩠ᨳᩥ ᩉᩮᩣᨲᩩ!<br/>Etena saccena suvatthi hotu!<br/>以此实语愿安乐！

theme/css/anchor_list.css

@@ -0,0 +1,86 @@
+    /*导航*/
+    .BlogAnchor {
+        /*background: #f1f1f1;*/
+        background: #ffffff;
+        /*padding: 10px;*/
+        line-height: 180%;
+        position: fixed;
+        /*left: 0px;*/
+		right: 0px;
+        top: 0px;
+        border: 1px solid #aaaaaa;
+        width: var(--sidebar-width);
+        /*height:100%;*/
+		z-index: 105;
+		transition: transform 0.3s ease 0s;
+    }
+    .BlogAnchor p {
+        font-size: 18px;
+        color: #15a230;
+        margin: 0 0 0.3rem 0;
+        text-align: right;
+    }
+    .BlogAnchor .AnchorContent {
+        /*padding: 5px 0px;*/
+        overflow: auto;
+		transition: transform 0.3s ease 0s;
+ 
+    }
+    .BlogAnchor li{
+        text-indent: 0.5rem;
+        font-size: 14px;
+        list-style: none;
+    }
+    .BlogAnchor li .nav_item{
+        padding: 3px;
+    }
+    .BlogAnchor li .item_h1{
+        margin-left: 0rem;
+    }
+    .BlogAnchor li .item_h2{
+        margin-left: 2rem;
+        font-size: 0.8rem;
+    }
+ 
+    .BlogAnchor li .item_h3{
+        margin-left: 4rem;
+        font-size: 0.8rem;
+    }
+ 
+    .BlogAnchor li .item_h4{
+        margin-left: 5rem;
+        font-size: 0.8rem;
+    }
+ 
+    .BlogAnchor li .item_h5{
+        margin-left: 6rem;
+        font-size: 0.8rem;
+    }
+ 
+ 
+    .BlogAnchor li .item_h6{
+        margin-left: 7rem;
+        font-size: 0.8rem;
+    }
+ 
+    .BlogAnchor li .nav_item.current{
+        color: white;
+        background-color: var(--scrollbar);
+    }
+    /*#AnchorContentToggle {
+        font-size: 13px;
+        font-weight: normal;
+        color: #FFF;
+        display: inline-block;
+        line-height: 20px;
+        background: #5cc26f;
+        font-style: normal;
+        padding: 1px 8px;
+    }*/
+    .BlogAnchor a:hover {
+        color: var(--sidebar-active);
+    }
+    .BlogAnchor a {
+        text-decoration: none;
+		color: var(--sidebar-fg);
+    }

theme/css/chrome.css

@@ -336,7 +336,7 @@ ul#searchresults span.teaser em {
     line-height: 2em;
 }
 .sidebar .sidebar-scrollbox {
-    overflow-y: auto;
+    overflow-y: scroll;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -367,7 +367,8 @@ ul#searchresults span.teaser em {
 }
 
 .sidebar-visible .page-wrapper {
-    transform: translateX(var(--sidebar-width));
+    /*transform: translateX(var(--sidebar-width));*/
+	margin-left: var(--sidebar-width);
 }
 @media only screen and (min-width: 620px) {
     .sidebar-visible .page-wrapper {

theme/css/general.css

@@ -9,7 +9,7 @@
 
 
 html {
-    font-family: "Times New Roman","Noto Sans",'ATaiThamKHNewV3-Normal', "Open Sans", sans-serif;
+    font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans Myanmar", "ATaiThamKHNewV3-Normal", Arial, Verdana;
     color: var(--fg);
     background-color: var(--bg);
     text-size-adjust: none;
@@ -76,7 +76,7 @@ h6:target::before {
     box-sizing: border-box;
 }
 .js:not(.sidebar-resizing) .page-wrapper {
-    transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
+    transition: 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 }
 
 .content {

theme/css/variables.css

@@ -2,14 +2,14 @@
 /* Globals */
 
 :root {
-    --sidebar-width: 300px;
+    --sidebar-width: min(300px,25vw);
     --page-padding: 15px;
     --content-max-width: 750px;
     --menu-bar-height: 50px;
 }
 
 /* Themes */
-.all,.tai,.roman,.han,.zh{
+.light,.all,.tai,.roman,.han,.zh{
     --bg: hsl(0, 0%, 100%);
     --fg: hsl(0, 0%, 0%);
 

theme/head.hbs

@@ -0,0 +1,6 @@
+<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/gojs/2.2.13/go.min.js"></script>
+<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+<link href="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/theme/default/layer.min.css" rel="stylesheet">

theme/index.hbs

@@ -134,15 +134,9 @@
                         {{/if}}
                     </div>
 
-                    <h1 class="menu-title">{{ book_title }}</h1>
+                    <h class="menu-title">{{ book_title }}</h>
 
                     <div class="right-buttons">
-						<a href="https://gitee.com/jinghong-dajin-pagoda/fofazhishi" target="_blank"><i class="fa">
-							<svg id="gitee_logo" class="icon" style="height: 16px;width: 16px;" viewBox="0 0 56 56" fill="#747474" xmlns="http://www.w3.org/2000/svg">
-								<path d="M27.9094271,0 C43.323378,0 55.8188541,12.4954761 55.8188541,27.9094271 C55.8188541,43.323378 43.323378,55.8188541 27.9094271,55.8188541 C12.4954761,55.8188541 0,43.323378 0,27.9094271 C0,12.4954761 12.4954761,0 27.9094271,0 Z M42.0372834,12.40419 C42.0369985,12.4041899 42.0367135,12.4041898 42.0364286,12.4050443 L22.7409577,12.4050443 C17.0321184,12.4050443 12.4041898,17.0329729 12.4041898,22.7418122 L12.4041898,42.0364286 C12.4041898,42.7976072 13.021247,43.4146643 13.7824255,43.4146643 L34.1117768,43.4146643 C39.2496197,43.4146643 43.4146643,39.2496197 43.4146643,34.1117768 L43.4146643,26.187125 C43.4146643,25.4259464 42.7976072,24.8088893 42.0364286,24.8088893 L26.1867179,24.8088893 C25.4256803,24.8092503 24.8086815,25.4260875 24.8081213,26.187125 L24.807219,29.6325761 C24.8066809,30.3489793 25.3531034,30.9378612 26.0519898,31.0048287 L26.1847213,31.0111726 C26.1848455,31.0111726 26.1849696,31.0111726 26.1850937,31.0108003 L35.8343679,31.0107199 C36.5507712,31.0107031 37.1395145,31.5572949 37.2063048,32.2561994 L37.2126036,32.3889441 L37.2126036,32.3889441 L37.2126036,33.0780271 C37.2126036,35.3615628 35.3614322,37.2127342 33.0778965,37.2127342 L19.9836314,37.2127342 C19.2225621,37.2126963 18.6055876,36.5957388 18.6055287,35.8346695 L18.6051677,22.7416739 C18.6049962,20.5273363 20.3456221,18.7195081 22.5332835,18.6119187 L22.7397609,18.6069668 L22.7397609,18.6069668 L42.0325819,18.6069668 C42.7934267,18.6061117 43.4103455,17.9895754 43.4116725,17.2287314 L43.4138095,13.7832798 C43.4151362,13.0221019 42.7984619,12.4046621 42.0372834,12.40419 Z" id="Combined-Shape" />
-							</svg>
-						</i></a>
-
                         {{#if print_enable}}
                         <a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
                             <i id="print-button" class="fa fa-print"></i>
@@ -158,6 +152,9 @@
                             <i id="git-edit-button" class="fa fa-edit"></i>
                         </a>
                         {{/if}}
+                        <a title="显示大纲" >
+                            <i id="AnchorContentToggle" class="fa fa-list-ul" state="show"></i>
+                        </a>
 						<a href="javascript:openQrcode()" ><i class="fa fa-qrcode" aria-hidden="true"></i></a>
                     </div>
                 </div>

theme/myjs/HyperlinkText.js

@@ -0,0 +1,133 @@
+"use strict";
+/*
+*  Copyright (C) 1998-2022 by Northwoods Software Corporation. All Rights Reserved.
+*/
+
+// A "HyperlinkText" is either a TextBlock or a Panel containing a TextBlock that when clicked
+// opens a new browser window with a given or computed URL.
+// When the user's mouse passes over a "HyperlinkText", the text is underlined.
+// When the mouse hovers over a "HyperlinkText", it shows a tooltip that displays the URL.
+
+// This "HyperlinkText" builder is not pre-defined in the GoJS library, so you will need to load this definition.
+
+// Typical usages:
+//    $("HyperlinkText", "https://gojs.net", "Visit GoJS")
+//
+//    $("HyperlinkText",
+//        function(node) { return "https://gojs.net/" + node.data.version; },
+//        function(node) { return "Visit GoJS version " + node.data.version; })
+//
+//    $("HyperlinkText",
+//        function(node) { return "https://gojs.net/" + node.data.version; },
+//        $(go.Panel, "Auto",
+//            $(go.Shape, ...),
+//            $(go.TextBlock, ...)
+//        )
+//    )
+
+// The first argument to the "HyperlinkText" builder should be either the URL string or a function
+// that takes the data-bound Panel and returns the URL string.
+// If the URL string is empty or if the function returns an empty string,
+// the text will not be underlined on a mouse-over and a click has no effect.
+
+// The second argument to the "HyperlinkText" builder may be either a string to display in a TextBlock,
+// or a function that takes the data-bound Panel and returns the string to display in a TextBlock.
+// If no text string or function is provided, it assumes all of the arguments are used to
+// define the visual tree for the "HyperlinkText", in the normal fashion for a Panel.
+
+// The result is either a TextBlock or a Panel.
+
+go.GraphObject.defineBuilder("HyperlinkText", function(args) {
+  // the URL is required as the first argument, either a string or a side-effect-free function returning a string
+  var url = go.GraphObject.takeBuilderArgument(args, undefined, function(x) { return typeof x === "string" || typeof x === "function"; });
+  // the text for the HyperlinkText is the optional second argument, either a string or a side-effect-free function returning a string
+  var text = go.GraphObject.takeBuilderArgument(args, null, function(x) { return typeof x === "string" || typeof x === "function"; });
+
+  // see if the visual tree is supplied in the arguments to the "HyperlinkText"
+  var anyGraphObjects = false;
+  for (var i = 0; i < args.length; i++) {
+    var a = args[i];
+    if (a && a instanceof go.GraphObject) anyGraphObjects = true;
+  }
+
+  // define the click behavior
+  var click =
+    function(e, obj) {
+      var u = obj._url;
+      if (typeof u === "function") u = u(obj.findBindingPanel());
+      if (u) window.open(u, "_blank");
+    };
+
+  // define the tooltip
+  var tooltip =
+    go.GraphObject.make("ToolTip",
+      go.GraphObject.make(go.TextBlock,
+        { name: "TB", margin: 4 },
+        new go.Binding("text", "", function(obj) {
+          // here OBJ will be in the Adornment, need to get the HyperlinkText/TextBlock
+          obj = obj.part.adornedObject;
+          var u = obj._url;
+          if (typeof u === "function") u = u(obj.findBindingPanel());
+          return u;
+        }).ofObject()
+      ),
+      new go.Binding("visible", "text", function(t) { return !!t; }).ofObject("TB")
+    );
+
+  // if the text is provided, use a new TextBlock; otherwise assume the TextBlock is provided
+  if (typeof (text) === "string" || typeof (text) === "function" || !anyGraphObjects) {
+    if (text === null && typeof (url) === "string") text = url;
+    var tb = go.GraphObject.make(go.TextBlock,
+                {
+                  "_url": url,
+                  cursor: "pointer",
+                  mouseEnter: function(e, obj) {
+                    var u = obj._url;
+                    if (typeof u === "function") u = u(obj.findBindingPanel());
+                    if (u) obj.isUnderline = true;
+                  },
+                  mouseLeave: function(e, obj) { obj.isUnderline = false; },
+                  click: click,  // defined above
+                  toolTip: tooltip // shared by all HyperlinkText textblocks
+                }
+              );
+    if (typeof(text) === "string") {
+      tb.text = text;
+    } else if (typeof(text) === "function") {
+      tb.bind(new go.Binding("text", "", text).ofObject())
+    } else if (typeof (url) === "function") {
+      tb.bind(new go.Binding("text", "", url).ofObject())
+    }
+    return tb;
+  } else {
+    function findTextBlock(obj) {
+      if (obj instanceof go.TextBlock) return obj;
+      if (obj instanceof go.Panel) {
+        var it = obj.elements;
+        while (it.next()) {
+          var result = findTextBlock(it.value);
+          if (result !== null) return result;
+        }
+      }
+      return null;
+    }
+    return go.GraphObject.make(go.Panel,
+      {
+        "_url": url,
+        cursor: "pointer",
+        mouseEnter: function(e, panel) {
+          var tb = findTextBlock(panel);
+          var u = panel._url;
+          if (typeof u === "function") u = u(panel.findBindingPanel());
+          if (tb !== null && u) tb.isUnderline = true;
+        },
+        mouseLeave: function(e, panel) {
+          var tb = findTextBlock(panel);
+          if (tb !== null) tb.isUnderline = false;
+        },
+        click: click,  // defined above
+        toolTip: tooltip  // shared by all HyperlinkText panels
+      }
+    );
+  }
+});

theme/myjs/anchor_list.js

@@ -0,0 +1,349 @@
+
+//是否显示导航栏
+ var showNavBar = true;
+ //是否展开导航栏
+ var expandNavBar = true;
+ var currentIndex = 0;
+ var currentScrollHigh = 0;
+ var currentContentScrollHigh = 0;
+ function sleep(numberMillis) {  
+    var now = new Date();  
+    var exitTime = now.getTime() + numberMillis;  
+    while (true) {  
+        now = new Date();  
+        if (now.getTime() > exitTime)  
+        return;  
+        }  
+}
+ 
+ 
+$(window).onbeforeunload = function(){ 
+currentIndex = 0;
+} 
+ 
+ 
+ $(window).load(function(){
+    var h1s = $("body").find("h1");
+    var h2s = $("body").find("h2");
+    var h3s = $("body").find("h3");
+    var h4s = $("body").find("h4");
+    var h5s = $("body").find("h5");
+    var h6s = $("body").find("h6");
+ 
+    var headCounts = [h1s.length, h2s.length, h3s.length, h4s.length, h5s.length, h6s.length];
+    var vH1Tag = null;  // 显示的最高层级
+    var vH2Tag = null;   // 显示的最低层级
+var sum = 0;
+ 
+ 
+    for(var i = 0; i < headCounts.length; i++){
+          if(headCounts[i] > 0){
+          for( var y = 0; y < headCounts[i]; y++)
+                 sum = sum + 1;
+          }
+    }
+    for(var i = 0; i < headCounts.length; i++){
+        if(headCounts[i] > 0){
+            if(vH1Tag == null){
+                vH1Tag = 'h' + (i + 1);
+            }else{
+                vH2Tag = 'h' + (i + 1);
+            }
+        }
+    }
+    if(vH1Tag == null){
+        return;
+    }
+ 
+    $("#page-wrapper").after('<div class="BlogAnchor">' + 
+        //'<span style="color:red;position:absolute;top:-6px;left:0px;cursor:pointer;" οnclick="$(\'.BlogAnchor\').hide();">×</span>' +
+		//'<p>' + 
+        //    '<b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录▲</b>' + 
+        //'</p>' + 
+        '<div class="AnchorContent" id="AnchorContent"> </div>' + 
+    '</div>' );
+ 
+    var vH1Index = 0;
+    var vH2Index = 0;
+ 
+ 
+    var vIndexH1 = 0;
+    var vIndexH2 = 0;
+    var vIndexH3 = 0;
+    var vIndexH4 = 0;
+    var vIndexH5 = 0;
+    var vIndexH6 = 0;
+    var headerALL = [];
+    var headerIDALL = [];
+    var headerHightALL = [];
+    $("body").find("h1,h2,h3,h4,h5,h6").each(function(i,item){
+ 
+        var id = '';
+        var name = '';
+        var tag = $(item).get(0).tagName.toLowerCase();
+        var className = '';
+        // i=0 tag=h1          i=1 tag=h2     i=2 tag=h2
+ 
+        if(tag == "h1"){
+            id = name = ++vIndexH1;
+    vIndexH2 = 0;
+    vIndexH3 = 0;
+    vIndexH4 = 0;
+    vIndexH5 = 0;
+    vIndexH6 = 0;
+    className = 'item_h1';
+ 
+//alert("tag ="+ tag +"----   i = "+ i + " name ="+ name +"    className= "+ className);
+//tag =h1----   i = 0 name =1    className= item_h1
+        }else if(tag == "h2"){
+ 
+            id = vIndexH1 + '_' + ++vIndexH2;
+            name = vIndexH1 + '.' + vIndexH2;
+            className = 'item_h2'; 
+    vIndexH3 = 0;
+    vIndexH4 = 0;
+    vIndexH5 = 0;
+    vIndexH6 = 0;
+ 
+       }else if(tag == "h3"){
+            id = vIndexH1 + '_' + vIndexH2+ '_' + ++vIndexH3;
+            name = vIndexH1 + '.' + vIndexH2+ '.' + +vIndexH3;
+            className = 'item_h3'; 
+    vIndexH4 = 0;
+    vIndexH5 = 0;
+    vIndexH6 = 0;
+ 
+       }
+ 
+       else if(tag == "h4"){
+            id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_'+ ++vIndexH4 ;
+            name =  vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.'+  vIndexH4 ;
+            className = 'item_h4';
+    vIndexH5 = 0;
+    vIndexH6 = 0; 
+       }
+ 
+       else if(tag == "h5"){
+            id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_' +vIndexH4+'_'+ ++vIndexH5;
+            name = vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.' +vIndexH4+'.'+ vIndexH5;
+            className = 'item_h5'; 
+            vIndexH6 = 0; 
+       }
+ 
+       else if(tag == "h6"){
+            id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_' +vIndexH4+'_' +vIndexH5+'_'+ ++vIndexH6;
+            name = vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.' +vIndexH4+'.' +vIndexH5+'.'+ vIndexH6;
+            className = 'item_h6'; 
+ 
+       }
+        if(name.length > 2){
+ 
+        var mFirstName = name.substring(0,2);
+        while(mFirstName == "0."){
+        name = name.substring(2,name.length);
+        mFirstName = name.substring(0,2);
+         }
+ 
+        }
+        $(item).attr("id","wow"+id+"_index_"+i);
+        $(item).addClass("wow_head");
+        var itemHeight = $(item).offset().top
+        $("#AnchorContent").css('max-height', ($(document).height()) + 'px');
+        $("#AnchorContent").css('height', ($(window).height()) + 'px');
+        $("#AnchorContent").css('overflow','auto');
+        $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link"  href="#wow'+id+'_index_'+i+'" link="#wow'+id+'" index="'+i+'">'+name+" "+$(this).text()+" "+'</a></li>');
+        var str = "#wow"+id+"_index_"+i;
+        headerALL.push($(item));
+        headerIDALL.push(str);
+        console.log("  i = "+ i +"   id =" + id +"  itemHeight = "+ itemHeight);
+    });
+ 
+    // 1
+    // 1.1
+    // 1.1.1
+    // 1.1.1.1
+    // 1.1.1.1.1
+    // 1.1.1.1.1.1
+    $("#AnchorContentToggle").click(function(){
+        var state = $(this).attr("state");
+        if(state=="show"){
+            //$(this).html("目录▼");
+            $(this).attr({"state":"hide"});
+			$("#page-wrapper").css("marginRight",'0');
+			//$("#page-wrapper").css("max-width","unset");
+			$(".next").css("right",'0');
+			$(".BlogAnchor").css("transform","translateX(var(--sidebar-width))");
+        }else{
+            //$(this).html("目录▲");
+            $(this).attr({"state":"show"});
+			$("#page-wrapper").css("marginRight","var(--sidebar-width)");
+			//$("#page-wrapper").css("max-width",xlength);
+			$(".next").css("right","var(--sidebar-width)");
+			$(".BlogAnchor").css("transform","translateX(0)");
+        }
+        $("#AnchorContent").toggle();
+    });
+ 
+ 
+$(".anchor-link").click(function(){
+ 
+        //$("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 10);
+        var index  = $(this).attr("index");
+                $(".BlogAnchor li .nav_item.current").removeClass('current');
+                $(headerNavs[index]).addClass('current');
+                      var scrollTop = $(window).scrollTop(); // 获得将要到达的点离顶距离
+                      currentScrollHigh = scrollTop;
+                      currentContentScrollHigh = headerHightALL[index];
+      var value = headerTops[index];
+      currentIndex = value;
+      console.log("index = "+ index+ "  headerTops["+index+"] ="+ value + "scrollTop="+ scrollTop);
+    });
+ 
+ 
+ 
+ 
+ 
+    var headerNavs = $(".BlogAnchor li .nav_item");
+    var headerTops = [];
+    var mHeight = 0;
+    $(".wow_head").each(function(i, n){
+    var value = $(n).offset().top;
+ 
+        headerTops.push($(n).offset().top);
+         console.log("i = "+ i+ "  offset().top ="+ value);
+    });
+    headerTops.push($(document).height());
+ 
+window.onresize = function(){
+ 
+headerTops = [];
+$.each(headerNavs, function(i, n){
+$(n).trigger("click"); 
+document.querySelector(headerIDALL[i]).scrollIntoView(true);
+//var high = $(n).offset().top;
+var scrollTop = $(window).scrollTop();
+headerTops.push(scrollTop);
+console.log("headerNavs_index="+i +"   scrollTop="+scrollTop +"  headerTops="+headerTops[i]);
+}
+);
+headerTops.push($(document).height());
+ 
+//$("#AnchorContent").height($(window).height());
+$("#AnchorContent").css('height', ($(window).height()) + 'px');
+var xcontentWidth =  $("#AnchorContent").width();
+var xWidth = $(window).width();
+var xlength = xWidth - xcontentWidth;
+
+//$("body").css("marginRight",var(--sidebar-width));
+$(".next").css("right","var(--sidebar-width)");
+//$("body").css("max-width",xlength);
+//$(".BlogAnchor").css("top",headbar_height+'px')
+$(headerNavs[currentIndex]).trigger("click"); 
+document.querySelector(headerIDALL[i]).scrollIntoView(true);
+ 
+ 
+}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+$(window).scroll(function(){
+        var scrollTop = $(window).scrollTop(); // 获得将要到达的点离顶距离
+ 
+        $.each(headerTops, function(i, n){
+            if( (scrollTop >= (headerTops[i])  && scrollTop < (headerTops[i+1] -1))  ){
+                console.log("headerTops[i-1]"+headerTops[i-1]+"headerTops[i]"+headerTops[i]+"  scrollTop ="+ scrollTop+"  headerTops[i+1]= "+headerTops[i+1] +"  i ="+i);
+                $(".BlogAnchor li .nav_item.current").removeClass('current');
+                $(headerNavs[i]).addClass('current');
+                currentScrollHigh = scrollTop;
+                currentContentScrollHigh = headerHightALL[i];
+                currentIndex = i;
+                var mxxHeight = $("#AnchorContent").height()
+                var mscrollTop1 = $("#AnchorContent").scrollTop();  // 当前标签的高度
+            console.log("zukgit2 currentIndex="+ currentIndex );
+                console.log("zukgit2 windows.scrollTop="+ scrollTop );
+                console.log("zukgit2 $(window).height()="+ $(window).height() );
+                console.log("zukgit2 currentContentScrollHigh="+ currentContentScrollHigh );
+                console.log("zukgit2 AnchorContent.mscrollTop="+ mscrollTop1 );
+                console.log("zukgit2 AnchorContent.high="+ mxxHeight );
+                if((currentContentScrollHigh - mscrollTop1)>  ($(window).height()/2)){ //↓ // 如果当前index超出  界面的高度
+                //var sum =   Math.floor(headerHightALL(i) / $(window).height());
+                var dif = currentContentScrollHigh - mscrollTop1;
+                $("#AnchorContent").animate({scrollTop: (currentContentScrollHigh)}, 50);
+                console.log("  i(zukgit3) = "+ i +"   currentContentScrollHigh =" + currentContentScrollHigh +"  mscrollTop1 = "+ mscrollTop1);
+                console.log(" $(window).height()="+ $(window).height() );
+ 
+                } else if( ( mscrollTop1 - currentContentScrollHigh )>  0 ){  //↑
+                $("#AnchorContent").animate({scrollTop: currentContentScrollHigh-($("#AnchorContent").height()/3)}, 50);
+                console.log("  i(zukgit4) = "+ i +"   currentContentScrollHigh =" + currentContentScrollHigh +"  mscrollTop1 = "+ mscrollTop1);
+                console.log(" $(window).height()="+ $(window).height() +"   $(#AnchorContent).height()="+mxxHeight);
+                }
+ 
+                return false;
+            }
+        }
+        );
+        if(scrollTop == 0){
+        $("#AnchorContent").animate({scrollTop: 0}, 50);
+        }
+        if(scrollTop == $(document).height()){
+        $("#AnchorContent").animate({scrollTop: headerHightALL[headerHightALL.length-1]}, 50);
+        }
+    });
+ 
+ 
+$.each(headerNavs, function(i, n){
+var high = $(n).offset().top;
+headerHightALL.push(high);
+console.log("high"+high);
+}
+);
+ 
+ 
+headerTops = [];
+$.each(headerNavs, function(i, n){
+ 
+$(n).trigger("click"); 
+document.querySelector(headerIDALL[i]).scrollIntoView(true);
+ 
+var scrollTop = $(window).scrollTop();
+ 
+headerTops.push(scrollTop);
+console.log("headerNavs_index="+i +"   scrollTop="+scrollTop +"  headerTops="+headerTops[i]);
+ 
+}
+);
+ 
+ 
+ 
+headerTops.push($(document).height());
+$(headerNavs[0]).trigger("click"); 
+document.querySelector(headerIDALL[0]).scrollIntoView(true);
+ 
+ 
+ 
+ 
+var xcontentWidth =  $("#AnchorContent").width();
+var headbar_height =  $("#menu-bar-hover-placeholder").height();
+
+var xWidth = $(window).width();
+var xlength = xWidth - xcontentWidth;
+$("#page-wrapper").css("marginRight","var(--sidebar-width)");
+//$("#page-wrapper").css("max-width",xlength);
+$(".next").css("right","var(--sidebar-width)");
+//$(".BlogAnchor").css("top",headbar_height+'px')
+
+    if(!showNavBar){
+        $('.BlogAnchor').hide();
+    }
+    if(!expandNavBar){
+        //$(this).html("目录▼");
+        //$(this).attr({"title":"展开"});
+        $("#AnchorContent").hide();
+    }
+ });

theme/myjs/go-init.js

@@ -0,0 +1,541 @@
+function initGo() {
+	if(!document.getElementById("myDiagramDiv") 
+		||!document.getElementById("mySavedModel") 
+		||!document.getElementsByName("highlight")){
+		console.error("缺少元素 myDiagramDiv 或 mySavedModel 或 highlight");
+		return;
+	}
+	
+	var $ = go.GraphObject.make;  // for conciseness in defining templates
+	
+	myDiagram =
+			$(go.Diagram, "myDiagramDiv", // Diagram refers to its DIV HTML element by id
+					{
+						//maxSelectionCount: 1 ,// 一次只能选择一个元素no more than 1 element can be selected at a time
+						isReadOnly: true,
+						
+						"toolManager.mouseWheelBehavior":go.ToolManager.WheelNone//鼠标滚轮事件禁止
+					});
+
+	// 为了简化代码，我们定义了一个函数来创建内容目录按钮To simplify this code we define a function for creating a context menu button:
+	function makeButton(text, action, visiblePredicate) {
+		return $("ContextMenuButton",
+				$(go.TextBlock, text),
+				{click: action},
+				// 如果没有断定，不要被捆绑GraphObject.visible所干扰。don't bother with binding GraphObject.visible if there's no predicate
+				visiblePredicate ? new go.Binding("visible", "", function (o, e) {
+					return o.diagram ? visiblePredicate(o, e) : false;
+				}).ofObject() : {});
+	}
+
+	function nodeInfo(d) {  // Tooltip info for a node data object
+		var str = "Node " + d.key + ": " + d.text + "\n";
+		if (d.group)
+			str += "member of " + d.group;
+		else
+			str += "top-level node";
+		return str;
+	}
+
+	// 为节点定义外观与行为Define the appearance and behavior for Nodes:
+
+	// 首先定义节点、连线与组群共用的内容目录First, define the shared context menu for all Nodes, Links, and Groups.
+	// define the node template
+	myDiagram.nodeTemplate =
+			$(go.Node, "Auto",
+					new go.Binding("location").makeTwoWay(),
+					{
+						locationSpot: go.Spot.Center,
+						toEndSegmentLength: 30, fromEndSegmentLength: 30
+					},
+					$(go.Shape, "RoundedRectangle",
+							{
+								name: "OBJSHAPE",
+								fill: "white",
+								//desiredSize: new go.Size(30, 30)
+								portId: "", cursor: "pointer", // 轮廓是端口，而不是整个节点the Shape is the port, not the whole Node
+								// 允许出发和指向此端口的各种链接allow all kinds of links from and to this port
+								fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
+								toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
+							}),
+					$("HyperlinkText",
+							function (node) {
+								return node.data.url;
+							},
+							$(go.Panel, "Auto",
+									$(go.TextBlock,
+											{
+												font: "bold 11pt helvetica, bold arial, sans-serif",
+												editable: true  // editing the text automatically updates the model data
+											},
+											new go.Binding("text", "text").makeTwoWay()))), // 标签显示节点数据的文本the label shows the node data's text
+					{
+						toolTip: //  为显示其信息的每个节点定义工具提示define a tooltip for each node that displays its information
+								$("ToolTip",
+										$(go.TextBlock, {margin: 4},
+												new go.Binding("text", "", nodeInfo))
+										)
+					}
+			);
+	function linkInfo(d) {  // 链接数据对象的工具提示信息Tooltip info for a link data object
+		return "Link:\nfrom " + d.from + " to " + d.to;
+	}
+
+	// define the link template
+	myDiagram.linkTemplate =
+			$(go.Link,
+					{routing: go.Link.AvoidsNodes,corner: 10 },
+					{
+						selectionAdornmentTemplate:
+								$(go.Adornment,
+										$(go.Shape,
+												{isPanelMain: true, stroke: "dodgerblue", strokeWidth: 3}),
+										$(go.Shape,
+												{toArrow: "Standard", fill: "dodgerblue", stroke: null, scale: 1})
+										),
+						adjusting: go.Link.Stretch,
+						reshapable: true, relinkableFrom: true, relinkableTo: true,
+						toShortLength: 2,
+						relinkableFrom: true,
+						relinkableTo: true
+					},
+					new go.Binding("points").makeTwoWay(),
+					new go.Binding("curviness"),
+					$(go.Shape, //  the link shape
+							{name: "OBJSHAPE"}),
+					$(go.Shape, //  the arrowhead
+							{name: "ARWSHAPE", toArrow: "Standard"}),
+					$("HyperlinkText",
+							function (node) {
+								return node.data.url;
+							},
+							$(go.Panel, "Auto",
+									$(go.TextBlock,
+											{
+												font: "bold 11pt helvetica, bold arial, sans-serif",
+												editable: true  // editing the text automatically updates the model data
+											},
+											new go.Binding("text", "text").makeTwoWay()))), // 标签显示节点数据的文本the label shows the node data's text
+					
+					{
+						toolTip: //  define a tooltip for each link that displays its information
+								$("ToolTip",
+										$(go.TextBlock, {margin: 4},
+												new go.Binding("text", "", getInfo))
+										)
+					}
+			);
+
+	// define the group template
+	myDiagram.groupTemplate =
+			$(go.Group, "Vertical",
+					{
+						selectionObjectName: "PANEL", // 选择控制柄围绕形状，而不是标签selection handle goes around shape, not label
+						ungroupable: true, // 启用Ctrl-Shift-G以取消选定组的分组enable Ctrl-Shift-G to ungroup a selected Group
+						selectionAdornmentTemplate: // adornment when a group is selected
+								$(go.Adornment, "Auto",
+										$(go.Shape, "Rectangle",
+												{fill: null, stroke: "dodgerblue", strokeWidth: 3}),
+										$(go.Placeholder)
+										),
+						toSpot: go.Spot.AllSides, // links coming into groups at any side
+						toEndSegmentLength: 30, fromEndSegmentLength: 30
+					},
+					$(go.Panel, "Auto",
+							$(go.Shape, "Rectangle",
+									{
+										name: "OBJSHAPE",
+										parameter1: 14,
+										fill: "rgba(255,0,0,0.10)",
+										// 允许从和到此端口的各种链接allow all kinds of links from and to this port
+										portId: "", cursor: "pointer", // 轮廓是端口，而不是整个节点the Shape is the port, not the whole Node
+										fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
+										toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
+									},
+									new go.Binding("desiredSize", "ds")),
+							$(go.Placeholder,
+									{padding: 16, margin: 10, background: "transparent"})  // 表示成员所在的位置represents where the members are)
+							),
+					$(go.TextBlock,
+							{
+								name: "GROUPTEXT",
+								alignment: go.Spot.TopLeft,
+								alignmentFocus: new go.Spot(0, 0, -4, -4),
+								font: "Bold 10pt Sans-Serif",
+								isMultiline: false, // 不允许在文本中使用换行符don't allow newlines in text
+								editable: true  // 允许用户进行就地编辑allow in-place editing by user
+							},
+							new go.Binding("text", "text")),
+					{
+						toolTip: //  define a tooltip for each group that displays its information
+								$("ToolTip",
+										$(go.TextBlock, {margin: 4},
+												new go.Binding("text", "", getInfo))
+										)
+					}
+			);
+
+	// add nodes, including groups, and links to the model
+
+	// whenever selection changes, run updateHighlights
+	myDiagram.addDiagramListener("ChangedSelection",
+			function () {
+				updateHighlights(getRadioButton());
+			});
+
+	myDiagram.select(myDiagram.findNodeForKey('A'));
+	load();
+}
+function load() {
+	myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
+}
+// This highlights all graph objects that should be highlighted
+// whenever a radio button is checked or selection changes.
+// Parameter e is the checked radio button.
+function updateHighlights(e) {
+	// Set highlight to 0 for everything before updating
+	myDiagram.nodes.each(function (node) {
+		node.highlight = 0;
+	});
+	myDiagram.links.each(function (link) {
+		link.highlight = 0;
+	});
+
+	// Get the selected GraphObject and run the appropriate method
+	var sel = myDiagram.selection.first();
+	if (sel !== null) {
+		switch (e.id) {
+			case "linksIn":
+				linksTo(sel, 1);
+				break;
+			case "linksOut":
+				linksFrom(sel, 1);
+				break;
+			case "linksAll":
+				linksAll(sel, 1);
+				break;
+			case "nodesIn":
+				nodesTo(sel, 1);
+				break;
+			case "nodesOut":
+				nodesFrom(sel, 1);
+				break;
+			case "nodesConnect":
+				nodesConnect(sel, 1);
+				break;
+			case "nodesReach":
+				nodesReach(sel, 1);
+				break;
+			case "group":
+				containing(sel, 1);
+				break;
+			case "groupsAll":
+				containingAll(sel, 1);
+				break;
+			case "nodesMember":
+				childNodes(sel, 1);
+				break;
+			case "nodesMembersAll":
+				allMemberNodes(sel, 1);
+				break;
+			case "linksMember":
+				childLinks(sel, 1);
+				break;
+			case "linksMembersAll":
+				allMemberLinks(sel, 1);
+				break;
+		}
+	}
+
+	// Give everything the appropriate highlighting ( color and width of stroke )
+	// nodes, including groups
+	myDiagram.nodes.each(function (node) {
+		var shp = node.findObject("OBJSHAPE");
+		var grp = node.findObject("GROUPTEXT");
+		var hl = node.highlight;
+		highlight(shp, grp, hl);
+	});
+	// links
+	myDiagram.links.each(function (link) {
+		var hl = link.highlight;
+		var shp = link.findObject("OBJSHAPE");
+		var arw = link.findObject("ARWSHAPE");
+		highlight(shp, arw, hl);
+	});
+}
+
+// Functions for highlighting, called by updateHighlights.
+// x in each case is the selected object or the object being treated as such.
+// Some have return values for use by each other or for tooltips.
+
+// if the link connects to this node, highlight it
+function linksTo(x, i) {
+	if (x instanceof go.Node) {
+		x.findLinksInto().each(function (link) {
+			link.highlight = i;
+		});
+	}
+}
+
+// if the link comes from this node, highlight it
+function linksFrom(x, i) {
+	if (x instanceof go.Node) {
+		x.findLinksOutOf().each(function (link) {
+			link.highlight = i;
+		});
+	}
+}
+
+// highlight all links connected to this node
+function linksAll(x, i) {
+	if (x instanceof go.Node) {
+		x.linksConnected.each(function (link) {
+			link.highlight = i;
+		});
+	}
+}
+
+// If selected object is a link, highlight its fromNode.
+// Otherwise highlight the fromNode of each link coming into the selected node.
+// Return a List of the keys of the nodes.
+function nodesTo(x, i) {
+	var nodesToList = new go.List(/*"string"*/);
+	if (x instanceof go.Link) {
+		x.fromNode.highlight = i;
+		nodesToList.add(x.data.from);
+	} else {
+		x.findNodesInto().each(function (node) {
+			node.highlight = i;
+			nodesToList.add(node.data.key);
+		});
+	}
+	return nodesToList;
+}
+
+// same as nodesTo, but 'from' instead of 'to'
+function nodesFrom(x, i) {
+	var nodesFromList = new go.List(/*"string"*/);
+	if (x instanceof go.Link) {
+		x.toNode.highlight = i;
+		nodesFromList.add(x.data.to);
+	} else {
+		x.findNodesOutOf().each(function (node) {
+			node.highlight = i;
+			nodesFromList.add(node.data.key);
+		});
+	}
+	return nodesFromList;
+}
+
+// If x is a link, highlight its toNode, or if it is a node, the node(s) it links to,
+// and then call nodesReach on the highlighted node(s), with the next color.
+// Do not highlight any node that has already been highlit with a color
+// indicating a closer relationship to the original node.
+function nodesReach(x, i) {
+	if (x instanceof go.Link) {
+		x.toNode.highlight = i;
+		nodesReach(x.toNode, i + 1);
+	} else {
+		x.findNodesOutOf().each(function (node) {
+			if (node.highlight === 0 || node.highlight > i) {
+				node.highlight = i;
+				nodesReach(node, i + 1);
+			}
+		});
+	}
+}
+
+// highlight all nodes linked to this one
+function nodesConnect(x, i) {
+	if (x instanceof go.Link) {
+		x.toNode.highlight = i;
+		x.fromNode.highlight = i;
+	} else {
+		x.findNodesConnected().each(function (node) {
+			node.highlight = i;
+		});
+	}
+}
+
+// highlights the group containing this object, specific method for links
+// returns the containing group of x
+function containing(x, i) {
+	var container = x.containingGroup;
+	if (container !== null)
+		container.highlight = i;
+	return container;
+}
+
+// container is the group that contains this node and
+// will be the parameter x for the next call of this function.
+// Calling containing(x,i) highlights each group the appropriate color
+function containingAll(x, i) {
+	containing(x, i);
+	var container = x.containingGroup;
+	if (container !== null)
+		containingAll(container, i + 1);
+}
+
+// if the Node"s containingGroup is x, highlight it
+function childNodes(x, i) {
+	var childLst = new go.List(/*"string"*/);
+	if (x instanceof go.Group) {
+		myDiagram.nodes.each(function (node) {
+			if (node.containingGroup === x) {
+				node.highlight = i;
+				childLst.add(node.data.key);
+			}
+		});
+	}
+	return childLst;
+}
+
+// same as childNodes, then run allMemberNodes for each child Group with the next color
+function allMemberNodes(x, i) {
+	if (x instanceof go.Group) {
+		myDiagram.nodes.each(function (node) {
+			if (node.containingGroup === x) {
+				node.highlight = i;
+				allMemberNodes(node, i + 1);
+			}
+		});
+	}
+}
+
+// if the link"s containing Group is x, highlight it
+function childLinks(x, i) {
+	var childLst = new go.List(/*go.Link*/);
+	myDiagram.links.each(function (link) {
+		if (link.containingGroup === x) {
+			link.highlight = i;
+			childLst.add(link);
+		}
+	});
+	return childLst;
+}
+
+// same as childLinks, then run allMemberLinks for each child Group with the next color
+function allMemberLinks(x, i) {
+	childLinks(x, i);
+	myDiagram.nodes.each(function (node) {
+		if (node instanceof go.Group && node.containingGroup === x) {
+			allMemberLinks(node, i + 1);
+		}
+	});
+}
+
+// perform the actual highlighting
+function highlight(shp, obj2, hl) {
+	var color;
+	var width = 3;
+	if (hl === 0) {
+		color = "black";
+		width = 1;
+	} else if (hl === 1) {
+		color = "blue";
+	} else if (hl === 2) {
+		color = "green";
+	} else if (hl === 3) {
+		color = "orange";
+	} else if (hl === 4) {
+		color = "red";
+	} else {
+		color = "purple";
+	}
+	shp.stroke = color;
+	shp.strokeWidth = width;
+	if (obj2 !== null) {
+		obj2.stroke = color;
+		obj2.fill = color;
+	}
+}
+
+// return the selected radio button in "highlight"
+function getRadioButton() {
+	var radio = document.getElementsByName("highlight");
+	for (var i = 0; i < radio.length; i++)
+		if (radio[i].checked)
+			return radio[i];
+}
+
+// returns the text for a tooltip, param obj is the text itself
+function getInfo(model, obj) {
+	var x = obj.panel.adornedPart; // the object that the mouse is over
+	var text = ""; // what will be displayed
+	if (x instanceof go.Node) {
+		if (x instanceof go.Group)
+			text += "Group: ";
+		else
+			text += "Node: ";
+		text += x.data.key;
+		var toLst = nodesTo(x, 0); // display names of nodes going into this node
+		if (toLst.count > 0) {
+			toLst.sort(function (a, b) {
+				return a < b ? -1 : 1
+			});
+			text += "\nNodes into: ";
+			toLst.each(function (key) {
+				if (key !== text.substring(text.length - 3, text.length - 2)) {
+					text += key + ", ";
+				}
+			});
+			text = text.substring(0, text.length - 2);
+		}
+		var frLst = nodesFrom(x, 0); // display names of nodes coming out of this node
+		if (frLst.count > 0) {
+			frLst.sort(function (a, b) {
+				return a < b ? -1 : 1
+			});
+			text += "\nNodes out of: ";
+			frLst.each(function (key) {
+				if (key !== text.substring(text.length - 3, text.length - 2)) {
+					text += key + ", ";
+				}
+			});
+			text = text.substring(0, text.length - 2);
+		}
+		var grpC = containing(x, 0); // if the node is in a group, display its name
+		if (grpC !== null)
+			text += "\nContaining SubGraph: " + grpC.data.key;
+		if (x instanceof go.Group) {
+			// if it"s a group, also display nodes and links contained in it
+			text += "\nMember nodes: ";
+			var children = childNodes(x, 0);
+			children.sort(function (a, b) {
+				return a < b ? -1 : 1
+			});
+			children.each(function (key) {
+				if (key !== text.substring(text.length - 3, text.length - 2)) {
+					text += key + ", ";
+				}
+			});
+			text = text.substring(0, text.length - 2);
+
+			var linkChildren = childLinks(x, 0);
+			if (linkChildren.count > 0) {
+				text += "\nMember links: ";
+				var linkStrings = new go.List(/*"string"*/);
+				linkChildren.each(function (link) {
+					linkStrings.add(link.data.from + " --> " + link.data.to);
+				});
+				linkStrings.sort(function (a, b) {
+					return a < b ? -1 : 1
+				});
+				linkStrings.each(function (str) {
+					text += str + ", ";
+				});
+				text = text.substring(0, text.length - 2);
+			}
+		}
+	} else if (x instanceof go.Link) {
+		// if it"s a link, display its to and from nodes
+		text += "Link: " + x.data.from + " --> " + x.data.to +
+				"\nNode To: " + x.data.to + "\nNode From: " + x.data.from;
+		var grp = containing(x, 0); // and containing group, if it has one
+		if (grp !== null)
+			text += "\nContaining SubGraph: " + grp.data.key;
+	}
+	return text;
+}
+
+window.addEventListener('DOMContentLoaded', initGo);