@@ -9,7 +9,27 @@ function addStyle(obj, atrr) {
99}
1010
1111// Github页面 过去一秒后开始加载元素 渲染toc目录
12- setTimeout ( function ( ) {
12+ // setTimeout(function () {
13+ // var git_reg = /[https://github.com].*/;
14+ // if (git_reg.test(document.URL)) {
15+ // var _readme = $('article');
16+ // var data = _readme.querySelectorAll('h1,h2,h3');
17+ // var div = init(data);
18+ // document.body.appendChild(div);
19+ // }
20+ // // alert($(window).width);
21+ // console.log(document.getElementById('div_right_bar'));
22+ // bindResize(document.getElementById('div_right_bar'));
23+ // // 因为你这里你根本不知道页面结构到底加载好了没 资源 z加载enme完毕了吗
24+ // document.getElementsByTagName('html')[0].style.marginLeft = "350px";
25+ // }, 1000)
26+ //看看 这里执行了吗
27+ let $container ;
28+ let $repoheadDetailsContainer ;
29+ let $jsRepoNav ;
30+ let containerClient ;
31+ const domInit = function ( ) {
32+ console . log ( new Date ( ) . getTime ( ) , '初始化开始' )
1333 var git_reg = / [ h t t p s : / / g i t h u b . c o m ] .* / ;
1434 if ( git_reg . test ( document . URL ) ) {
1535 var _readme = $ ( 'article' ) ;
@@ -20,7 +40,56 @@ setTimeout(function () {
2040 // alert($(window).width);
2141 console . log ( document . getElementById ( 'div_right_bar' ) ) ;
2242 bindResize ( document . getElementById ( 'div_right_bar' ) ) ;
23- } , 1000 )
43+ const $idHtml = document . querySelector ( '#js-repo-pjax-container' ) ;
44+ $container = $idHtml . children [ 1 ] ;
45+ $repoheadDetailsContainer = document . querySelector ( '.repohead-details-container' ) ;
46+ $jsRepoNav = document . querySelector ( '.js-repo-nav' ) ;
47+ containerClient = $container . getClientRects ( ) [ 0 ] ;
48+
49+ // 因为你这里你根本不知道页面结构到底加载好了没 资源 z加载enme完毕了吗
50+ // document.querySelector('.Header').style.paddingLeft = '350px';
51+ initTocBar ( 350 ) ;
52+ // document.querySelector('#js-repo-pjax-container').style.paddingLeft = '350px';
53+
54+
55+ // document.getElementsByTagName('html')[0].style.marginLeft = "350px";
56+ }
57+ document . addEventListener ( 'DOMContentLoaded' , domInit , false ) ;
58+
59+
60+ function initTocBar ( initWidth ) {
61+ var els = document . getElementById ( 'toc' ) . style ;
62+
63+ //宇宙超级无敌运算中...
64+ let w = document . body . clientWidth ;
65+ let w2 = initWidth + 'px' ;
66+
67+ var minWidth = 200 ;
68+ var moveWidth = parseInt ( initWidth ) ;
69+ if ( moveWidth < 200 ) {
70+ return ;
71+ }
72+ var $header = document . querySelector ( '.Header' ) ;
73+
74+
75+ if ( moveWidth > minWidth && initWidth > containerClient . left ) {
76+ document . getElementsByTagName ( 'html' ) [ 0 ] . style . marginLeft = w2 ;
77+ $header . style . paddingLeft = 0 + 'px' ;
78+ // $container.style.marginLeft = '10px';
79+ $container . style . marginLeft = '10px' ;
80+ $repoheadDetailsContainer . style . marginLeft = '10px' ;
81+ $jsRepoNav . style . marginLeft = '10px' ;
82+ } else {
83+ $header . style . paddingLeft = moveWidth + 'px' ;
84+ document . getElementsByTagName ( 'html' ) [ 0 ] . style . marginLeft = 0 ;
85+ $container . style . marginLeft = 'auto' ;
86+ $repoheadDetailsContainer . style . marginLeft = 'auto' ;
87+ $jsRepoNav . style . marginLeft = 'auto' ;
88+ }
89+ els . width = initTocBar + 'px' ;
90+ }
91+
92+
2493
2594// 这里是画出 toc的逻辑
2695function init ( list ) {
@@ -59,7 +128,7 @@ function init(list) {
59128 isGetFisrtLevel = true ;
60129
61130 var header_p = document . createElement ( "li" ) ;
62- header_p . textContent = "Article TOC for GitHub " ;
131+ header_p . textContent = "GitHub Markdown TOC " ;
63132 addStyle ( header_p , { "listStyle" : "none" , "font-size" :"20px" , "margin-bottom" :"10px" } ) ;
64133
65134 var gotop_li = document . createElement ( "li" ) ;
@@ -136,12 +205,63 @@ function bindResize(el) {
136205
137206 //移动事件
138207 function mouseMove ( e ) {
139- //宇宙超级无敌运算中...
140- els . width = e . clientX - x + 'px' ;
141- els . width = e . clientX + 'px' ;
142- console . log ( "clientX:" + e . clientX ) ;
143- console . log ( "x:" + x ) ;
208+ console . log ( e ) ;
209+ // document.querySelector('#js-repo-pjax-container').style.paddingLeft = "0px";
210+ // console.log
211+ //宇宙超级无敌运算中...
212+ let w = document . body . clientWidth ;
213+ let w2 = e . clientX + 'px' ;
214+ // haha xiecuole
215+ // els.width = e.clientX - x + 'px';
216+ // 好的你来操作
217+
218+ // if(e.clientX && e.clientX > (w-980)/2 ){
219+ // document.getElementsByTagName('html')[0].style.marginLeft = w2;
220+ // }else{
221+ // document.getElementsByTagName('html')[0].style.marginLeft = '0px';
222+ // }
223+ // console.log(e.clientX);
224+ // if(e.clientX > 100){
225+
226+ // }
227+ // console.log("e.clientX " + e.clientX);
228+
229+
230+ // var readmeWidth = document.getElementById("readme").clientWidth;
231+ // var maxWidth = document.getElementById("readme").clientWidth * 0.8;
232+ var minWidth = 200 ;
233+ var moveWidth = parseInt ( e . clientX ) ;
234+ if ( moveWidth < 200 ) {
235+ return ;
236+ }
237+ var $header = document . querySelector ( '.Header' ) ;
238+
144239
240+ if ( moveWidth > minWidth && e . clientX > containerClient . left ) {
241+ document . getElementsByTagName ( 'html' ) [ 0 ] . style . marginLeft = w2 ;
242+ $header . style . paddingLeft = 0 + 'px' ;
243+ // $container.style.marginLeft = '10px';
244+ $container . style . marginLeft = '10px' ;
245+ $repoheadDetailsContainer . style . marginLeft = '10px' ;
246+ $jsRepoNav . style . marginLeft = '10px' ;
247+ } else {
248+ $header . style . paddingLeft = moveWidth + 'px' ;
249+ document . getElementsByTagName ( 'html' ) [ 0 ] . style . marginLeft = 0 ;
250+ $container . style . marginLeft = 'auto' ;
251+ $repoheadDetailsContainer . style . marginLeft = 'auto' ;
252+ $jsRepoNav . style . marginLeft = 'auto' ;
253+ }
254+ els . width = e . clientX + 'px' ;
255+
256+ return ;
257+ if ( moveWidth > minWidth && e . clientX > ( w - 980 ) / 2 ) {
258+ document . getElementsByTagName ( 'html' ) [ 0 ] . style . marginLeft = w2 ;
259+ $header . style . paddingLeft = 0 + 'px' ;
260+
261+ }
262+
263+
264+ els . width = e . clientX + 'px' ;
145265 }
146266 //停止事件
147267 function mouseUp ( ) {
0 commit comments