v0.0.2 完整版

Author: frank-lam

README.md

@@ -10,7 +10,7 @@ This is a chrome extension that supports parsing articles on GitHub and generati
 
 **like the rendering graphics below, this must make you very excited !**
 
-![markdown-toc2](assets/markdown-toc.gif)
+![markdown-toc-2](assets/markdown-toc-2.gif)
 
 
 

assets/markdown-toc-2.gif

@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQC++s9zxbPDhxRB
-1mMOJNklQ9sOkpfjWyzDBj0IOtMaNOoTTjYdGrKkYxs9M2n3De+K+rxmn2lx3vvs
-4HyCD4CCQsD8LOTjOl7rptUXFbyN3uXNj2UO15JPyQnehcVm929f48LbZ8TOEeRU
-Eic2eCQMK6XuoNIRwI7gOFBmj1sFWXTHEhN7eP90DlA33GZbAMUp0GfUnK46FWLt
-+Yw5NiOudTWiVMlReoMnXP93PTfjjsDP9jQH5oK5SzsnXd5nwvaWS0P0sUh+cvmh
-dS1PzT/HbubRD7t1amyA+HEYAKp+GEJSWhcnI/MxB6TSw0LLTQly3aQUeAl/hzgU
-N9fYMRIJAgMBAAECggEAERj8thlqxtRCysMiApvnadfplmQm33aj6wDVuXUkvZmj
-pB9SJmhjumZaA7Bk6faQLcHVWJ2ob8aeCL6vPuia4W6O/vSY+EPbSB8bQDIUu6HL
-MoxGKJ5Bjc2Kieaxfc6kpLHMGd7wJl/BMIqggpaeaY2F0TeKHwc9c1LvVcM7S57n
-Q8g9N3OMive21KUsxRrSXf/O0SjSgdVSmF8NxMCbMLBY1FtnFN0gK90r2IUrC2Qr
-2AsF5mZH03MQWt6LK9hLJbd7yoMSvEHq/9PYgs3isPfrn8iDme0sBQrKRG2J9DcJ
-0YeSVWs9TSJn1QltcTmo1o5+DX8PncSojagl6Bz2gQKBgQDjH66Yc0/8x/kn21l0
-viailcyJNkCAzePDUwRyvm53pRLF/2l7WNnDW6/GMl1cnnx/iNu71EIwtxCHi58n
-tYTRBKQ7C5gBJPkEpVg5Biv1+63F5nglw9sau1BCK94PTSUEFEDztP0mW+ygjvXK
-7EROeXItN74f+jiTK4zE8pFyQQKBgQDXQrq2Q9OJGgvDheKkuIsj+KfYxfjMWHJl
-+EeiYjAYzGVvWtQ0P9khk0+aH7A9gTVpgg5abR6DTYg2JbxVfS1FvHi63/a45fnJ
-oC0ggIui1VwHdYhDl3S6YaZWVZz3axGAH7wvt8NlkmTgUIgmFlVQDjT5Wu1Is1aB
-d0VPbM0dyQKBgQDg/Sx+1pQhC5O0uOTH8enh21TPg8+oCM0cW6unYx+ZJAwR2a8L
-QnwNu1DHnHLB4jngOJm7WkvraB1WuKgDtRwJ1ng+CYEdeRu5T3Wyn3uC5DtDNMhG
-WNs+gtnBgyUpsTj+7nVdNigkDKG+d3/i8ePEfSfuxS5xDPVoTJbZLpWIQQKBgETJ
-D/zaI6h16DhsegYE6oFuHcSJTn2N7dBjzBA5rADgn7E7pv+jP3EZL6Cia6DbvwOe
-CZQftlZi2hnjaREwVN0p4rJkiuR+qJkjVAhEy1oXL7c6eXaP2T8NoSeJaAUv84Gr
-omjlIc09QHrlgPwautxADfF4esZ2eDgass00iT7xAoGBAN4BbVkRQ2lbitSlhCxh
-GvvkTP3EAI9KgkrP6nKISkGZ1aQs8DZF8zaqyJD/e24sMK7JLexFU4IhFaPRRd1L
-/+VFqdaVvzybevjOM1v8S7Zgr2VOOeITcNj03/i6JJ9DcSQA6qGVpgN0b4SUaejB
-S146cMiXFCbR/tc5ZxVFXt0R
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCdxR8JmENFZrNH
+pEQhDud38UsDMVaKnkp6rlqthfGYxhXhVxNakKz6uUVkjIP89wPP25FhRwNijtge
+CCz+0ry3QkaV2gPtPYe3ytv7TlSpXR0oxZ8RZOKsw049eVOYy8PNaSWUR4jkoUgw
+9VWruL6TR9tfHi1PqltRtDb4+eYCfN+TakCgjZKXsHrlMPZQrcoFQdoWTKSdoiOl
+ovFiB/DORj3JD1B1zexWaQtmZpVO6JRq/vwsYV5Y3BLNO3XWWYX4pBwqPdoPEYG6
+kmy0VD9Tyr6dL+IhB9xcfw0g38uerI0z7LTHLhQkBbpBHsCKsAodw5711Qxf7jEt
+gb/VMiQJAgMBAAECggEAOzR5aL7YY8dd+MEGhgdTSnnkpe6SZNNw7KfYRGzS1Htl
+Q5pLG33WRAJZrZljgH7r0ck6PbCJ7ybeqCp2RCwuAHFhDqPxPEqOTyTTt3NWJvZX
+1nCOuFbND3r9Nel9OwYgVMmj/gh4MR/q+OBgBWB/N8LL6l5nL5Gk0jzYMkeJDp5Z
+r46cxyTS66ZlSQf4xrwOD7jHOfIbrvJ+3tD+yfq9vm4ls6ErPqM3L/N8oeQIlGTH
+FRGSjiWVSpswB7j7LX4sLDg9v1VGLXdEBO135DWPeQlB4BBwBazLT6+f3CtZIgFd
+XE+oEhaQReKVClE50VgpfDF8OawpKLwhc/6LZubv3wKBgQDUkxQH/jWOhuJFgeUC
+zDinmDZ6csve7WsSDUf2WmHIGtKabh6orJRMH9K8g6OZqOtuxndHW7bYu6AUNKte
+5DBfvQuLh1I/7nglTrcvMCx1gwJAlG02/L0D3Zfxs7tZ5Jp73mCCAXNmV9u7EypP
+vcGLB1kn+UYfZDS8PFY6to9+XwKBgQC9//QpnbtAeIfKZamAT5M5fBpjtNS4tRmz
+b1rQHN+K+mmo0ondhpyKphLaoEf+Jbo95y8koQgrX9iTBb7SsVay0kFUoFQEZeuK
+0DelJ3TQn0jm3MsusVhKFOqZVWg3O8ptavWVNcyO6JkzG2xxO1UXga79YPjsxrUD
+6sYGkIOmlwKBgCrSXgymJv/JKDe8TPfdT+RjA0ZzbaJAzXrbdg2oc14uGRLG8CIm
+cdFL79XN5t0DbDnqfQjA7vqGAV9QpNz+tsfyeyrmXalHTqilTL2SxMH/XCrKO54C
+F8l5kCw+epVHOd+OEn7d7/ND652p5LIflad+GXW1/2w/cWgh93ToZcudAoGAdyar
+bOnAwzaTGadVe+TrU/Jy7jI58LeJrZBYqAhjW9mcJ0YZNTY0t3JcgoRfgY8RU77G
+PrdJ00GhJNpGiAS0dSIL3FFLPxLXes8HBmhPBoHNixHNzbNjxdmGIbCA0ZqKYMHh
+zrfVV42gfX9mK0BlJX+rSLTmhj46yIETvIwmM3MCgYEAg8cNU/ow5N40FhckEEBp
+EEEMlZ8+qHFPf0jvA0Bb34RVrwXMSUeecEsNE+sKyU4JdDZcpcbvyQZL7iGrnBs2
+CQ1X5yHFAllMiyleZ1W5PL1HU00BKdZGODsfa8RMNs+nIV89mhwQVNEjFPO7ZchM
+OCdo2mxwhyhY8TRjtTeUggA=
 -----END PRIVATE KEY-----

markdown-toc-code.crx

@@ -47,14 +47,50 @@ const domInit = function(){
     containerClient =  $container.getClientRects()[0];
 
     // 因为你这里你根本不知道页面结构到底加载好了没 资源  z加载enme完毕了吗
-    document.querySelector('.Header').style.paddingLeft = '350px';
+    // document.querySelector('.Header').style.paddingLeft = '350px';
+    initTocBar(350);
     // document.querySelector('#js-repo-pjax-container').style.paddingLeft = '350px';
 
 
     // document.getElementsByTagName('html')[0].style.marginLeft  = "350px";
 }
 document.addEventListener('DOMContentLoaded',domInit,false);
 
+
+function initTocBar(initWidth){
+    var els = document.getElementById('toc').style;
+
+    //宇宙超级无敌运算中...  
+    let w = document.body.clientWidth;
+    let w2 = initWidth + 'px';
+
+    var minWidth = 200;
+    var moveWidth = parseInt(initWidth);
+    if(moveWidth < 200){
+        return;
+    }
+    var $header = document.querySelector('.Header');
+    
+    
+    if(moveWidth > minWidth && initWidth > containerClient.left){
+        document.getElementsByTagName('html')[0].style.marginLeft = w2;
+        $header.style.paddingLeft = 0 + 'px';
+        // $container.style.marginLeft = '10px';
+        $container.style.marginLeft = '10px';
+        $repoheadDetailsContainer.style.marginLeft = '10px';
+        $jsRepoNav.style.marginLeft = '10px';
+    }else{
+        $header.style.paddingLeft = moveWidth + 'px';
+        document.getElementsByTagName('html')[0].style.marginLeft = 0;
+        $container.style.marginLeft = 'auto';
+        $repoheadDetailsContainer.style.marginLeft = 'auto';
+        $jsRepoNav.style.marginLeft = 'auto';
+    }
+    els.width = initTocBar  + 'px';
+}
+
+
+
 //  这里是画出 toc的逻辑
 function init(list) {
     var toc = document.createElement("div");
@@ -226,7 +262,6 @@ function bindResize(el) {
 
 
         els.width = e.clientX  + 'px';
-        
     }
     //停止事件
     function mouseUp() {