fullstack-tutorial · frank-lam · Dec 8, 2018 · Dec 8, 2018 · Dec 8, 2018 · Dec 8, 2018
diff --git a/README.md b/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)
 
 
 
@@ -40,4 +40,8 @@ This is a chrome extension that supports parsing articles on GitHub and generati
 - 2018-12-04 : version 0.0.1
   - features
     - software is born
+- 2018-12-08 : version 0.0.2
+  - features
+    - 侧边栏显示，不遮挡正文内容
+    - 拖动自适应效果
 
diff --git a/assets/markdown-toc-2.gif b/assets/markdown-toc-2.gif
diff --git a/markdown-toc-code.crx b/markdown-toc-code.crx
diff --git a/markdown-toc-code.pem b/markdown-toc-code.pem
@@ -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-----
diff --git a/markdown-toc-code/css/content.css b/markdown-toc-code/css/content.css
@@ -20,35 +20,42 @@
 
 /* 目录栏的样式 */
 .div_toc{
-	width: -webkit-calc(100% - 6px);
+	width: -webkit-calc(100% - 5px);
 	height: 100%;
 	float: left;
 	padding: 20px;
 	overflow: auto;
 	overflow-x: hidden;
 	background-color: #fafbfc;
-	border: 1px solid #d1d5da;
+	/* border: 1px solid #d1d5da; */
+	border-right-width: 0;
 }
 
 .div_right_bar{
-	width: 6px; 
+	width: 5px; 
 	height: 100%;
-	background-color: white; 
-	cursor: e-resize; 
+	background-color: #fafbfc; 
+	cursor: col-resize; 
 	float: left;
+	border-right: 1px solid #d1d5da;
 }
 
+/* 这个地方 */
+
 .toc{
 	position: fixed;
-	width: 400px;
+	width: 350px;
 	min-height: 200px;
-	z-index: 999;
-
-	left: 10px;
-	top: 70px;
-	border-radius: 3px;
-	height: 85%;
+	z-index: 999; 
+	min-width: 200px;
+	left: 0px;
+	top: 0px;
+	border-radius: 0px;
+	height: 100%;
 	bottom: 100px;
 	float: left;
 }
 
+body{
+	margin-left: 350px;
+}
diff --git a/markdown-toc-code/img/icon.png → markdown-toc-code/img/icon2.png b/markdown-toc-code/img/icon.png → markdown-toc-code/img/icon2.png
diff --git a/markdown-toc-code/img/logo.ico b/markdown-toc-code/img/logo.ico
diff --git a/markdown-toc-code/js/content-script.js b/markdown-toc-code/js/content-script.js
@@ -9,7 +9,27 @@ function addStyle(obj, atrr) {
 }
 
 // Github页面 过去一秒后开始加载元素 渲染toc目录
-setTimeout(function () {
+// setTimeout(function () {
+//     var git_reg = /[https://github.com].*/;
+//     if (git_reg.test(document.URL)) {
+//         var _readme = $('article');
+//         var data = _readme.querySelectorAll('h1,h2,h3');
+//         var div = init(data);
+//         document.body.appendChild(div);
+//     }
+//     // alert($(window).width);
+//     console.log(document.getElementById('div_right_bar'));
+//     bindResize(document.getElementById('div_right_bar'));
+//     // 因为你这里你根本不知道页面结构到底加载好了没 资源  z加载enme完毕了吗
+//     document.getElementsByTagName('html')[0].style.marginLeft  = "350px";
+// }, 1000)
+//看看 这里执行了吗
+let $container;
+let $repoheadDetailsContainer;
+let $jsRepoNav;
+let containerClient;
+const domInit = function(){
+    console.log(new Date().getTime(),'初始化开始')
     var git_reg = /[https://github.com].*/;
     if (git_reg.test(document.URL)) {
         var _readme = $('article');
@@ -20,7 +40,56 @@ setTimeout(function () {
     // alert($(window).width);
     console.log(document.getElementById('div_right_bar'));
     bindResize(document.getElementById('div_right_bar'));
-}, 1000)
+    const $idHtml = document.querySelector('#js-repo-pjax-container');
+    $container =  $idHtml.children[1];
+    $repoheadDetailsContainer = document.querySelector('.repohead-details-container');
+    $jsRepoNav = document.querySelector('.js-repo-nav');
+    containerClient =  $container.getClientRects()[0];
+
+    // 因为你这里你根本不知道页面结构到底加载好了没 资源  z加载enme完毕了吗
+    // 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) {
@@ -59,7 +128,7 @@ function init(list) {
             isGetFisrtLevel = true;
 
             var header_p = document.createElement("li");
-            header_p.textContent = "Article TOC for GitHub";
+            header_p.textContent = "GitHub Markdown TOC";
             addStyle(header_p, {"listStyle": "none","font-size":"20px","margin-bottom":"10px"});
 
             var gotop_li = document.createElement("li");
@@ -136,12 +205,63 @@ function bindResize(el) {
 
     //移动事件
     function mouseMove(e) {
-        //宇宙超级无敌运算中...
-        els.width = e.clientX - x + 'px';
-        els.width = e.clientX  + 'px';
-        console.log("clientX:"+e.clientX);
-        console.log("x:"+x);
+        console.log(e);
+        // document.querySelector('#js-repo-pjax-container').style.paddingLeft = "0px";
+        // console.log
+        //宇宙超级无敌运算中...  
+        let w = document.body.clientWidth;
+        let w2 = e.clientX + 'px';
+        // haha xiecuole 
+        // els.width = e.clientX - x + 'px';
+        // 好的你来操作
+
+        // if(e.clientX && e.clientX > (w-980)/2 ){
+        //     document.getElementsByTagName('html')[0].style.marginLeft = w2;
+        // }else{
+        //     document.getElementsByTagName('html')[0].style.marginLeft = '0px';
+        // }
+        // console.log(e.clientX);
+        // if(e.clientX > 100){
+
+        // }
+        // console.log("e.clientX " + e.clientX);
+
+
+        // var readmeWidth = document.getElementById("readme").clientWidth;
+        // var maxWidth = document.getElementById("readme").clientWidth * 0.8;
+        var minWidth = 200;
+        var moveWidth = parseInt(e.clientX);
+        if(moveWidth < 200){
+            return;
+        }
+        var $header = document.querySelector('.Header');
+
 
+        if(moveWidth > minWidth && e.clientX > 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 = e.clientX  + 'px';
+
+        return;
+        if( moveWidth > minWidth &&  e.clientX > (w-980)/2 ){
+            document.getElementsByTagName('html')[0].style.marginLeft = w2;
+            $header.style.paddingLeft = 0 + 'px';
+
+        }
+
+
+        els.width = e.clientX  + 'px';
     }
     //停止事件
     function mouseUp() {

diff --git a/markdown-toc-code/manifest.json b/markdown-toc-code/manifest.json
@@ -22,7 +22,7 @@
 		"script":["js/background.js"]
 	},
   "browser_action": {
-    "default_icon": "img/icon.png",
+    "default_icon": "img/logo.ico",  // https://www.easyicon.net/1201150-menu_icon.html
     "default_popup": "popup.html"
   }
 }