UNPKG

7.47 kBJavaScriptView Raw
1require( [ 'gitbook' ], function ( gitbook ) {
2
3 gitbook.events.bind('start', function () { });
4
5 gitbook.events.bind('page.change', function () {
6 /**
7 * [uDesign description]
8 * @type {Object}
9 */
10 var uDesign = {
11 /**
12 * 初始化
13 * @return {[type]} [description]
14 */
15 init: function() {
16 this.DOMHandler();
17 this.leftDirChange();
18 this.mobileNav();
19 window.onresize = this.mobileNav;
20
21 this.navControl();
22 this.buildTag();
23
24 this.addClass();
25 this.changeLink();
26
27 },
28
29 /**
30 * 获取DOM元素
31 * @type {Object}
32 */
33 DOM: {
34 "$body": $('body'),
35 "$book": $('.book'), // 文档左侧目录
36 "$summary": $('.book-summary'),
37 "$bookBody": $('.book-body'), // 文档右侧主体
38 "$bookInner": $('.body-inner')
39 },
40
41 DOMHandler: function() {
42 var DOM = this.DOM;
43
44 var $container = $('<div class="container"></div>');
45 var $containerDiv = $('<div class="container-div"></div>');
46
47 DOM.$book.append( $container );
48
49 $container.append( $containerDiv );
50 $containerDiv.append( DOM.$summary );
51 $containerDiv.append( DOM.$bookBody );
52
53
54 // 将超链接放到page-wrapper的最后
55 var $pageWrapper = $('.page-wrapper');
56 var $prevA = $('.navigation-prev', DOM.$bookBody );
57 var $nextA = $('.navigation-next', DOM.$bookBody );
58
59 $pageWrapper.append( $prevA );
60 $pageWrapper.append( $nextA );
61
62 var $html = $('html');
63 $html.css('font-size','62.5%');
64
65 $('body').css('display','block');
66 document.body.scrollTop = 0;
67
68 // Menu scroll
69
70 // HEAD Height
71 var header = document.getElementsByTagName('header')[0];
72 var banner = document.querySelectorAll('.banner')[0];
73 var headerHt = parseFloat(getComputedStyle(header)['height']);
74 var bannerHt = parseFloat(getComputedStyle(banner)['height']);
75 var headAddHt = headerHt + bannerHt;
76
77 function menuScroll(){
78 document.body.onscroll = function(){
79 var bodyht = document.body.scrollTop || document.documentElement.scrollTop;
80 var contain = document.querySelectorAll('.book .container')[0];
81 // console.log(contain.offsetWidth,contain.clientWidth);
82 // console.log('offleft' + contain.offsetLeft);
83 // console.log('getClient' + contain.getBoundingClientRect().left);
84 var leftPadding = parseInt(getComputedStyle(contain)['padding-left']);
85 var leftBasic = contain.getBoundingClientRect().left;
86 var leftDis = leftBasic + leftPadding;
87
88 var anchorTop = headAddHt - bodyht + 30;
89
90 if(bodyht >= headAddHt) {
91 $('.book-summary').addClass('fix').css('left',leftDis + 'px');
92 $('#anchors-navbar').css('top', '30px');
93 } else {
94 $('.book-summary').removeClass('fix');
95 $('#anchors-navbar').css('top',anchorTop +'px');
96 }
97
98
99
100 };
101 }
102 menuScroll();
103 setInterval(menuScroll, 1);
104
105 var oH = document.body.offsetHeight;
106 var h = parseInt(oH) - 80;
107
108 // 设置左侧目录最大高度 : browser height - footerheight - leftmenuMargintop
109 var browserH = document.documentElement.clientHeight;
110 DOM.$summary.css('height', browserH - 163 + 'px');
111 DOM.$summary.children('nav').eq(0).css('height',parseInt(oH) - 193 + 'px');
112 DOM.$bookInner.css('min-height',browserH - 133 + 'px');
113 },
114
115 /**
116 * 左侧目录修改
117 * @return {[type]} [description]
118 */
119 leftDirChange: function() {
120 var DOM = this.DOM;
121
122 var $summaryUl = $('ul', DOM.$summary);
123 var $dividerLi = $('.divider', DOM.$summaryUl);
124 var $dividerLiNext = $('.divider + li', DOM.$summaryUl);
125
126 // 去掉介绍
127 $('.summary > li').first().remove();
128
129 // 删除下面横线及之后的li
130 $dividerLi.remove();
131 $dividerLiNext.remove();
132
133 var $summaryAB = $('a b',DOM.$summary);
134
135 // 去掉目录的编号
136 $summaryAB.remove();
137 },
138
139 /**
140 * gitbook 生成内容的移动端面包导航切换
141 * mobile side menu init
142 * @return {[type]} [description]
143 */
144 mobileNav: function() {
145 var bodyWidth = document.body.offsetWidth;
146 var eleBook = document.querySelectorAll('.book')[0];
147 if(bodyWidth<=600) {
148 eleBook.classList ? eleBook.classList.remove('with-summary') : eleBook.className.replace(new RegExp('(^|\\b)' + 'with-summary'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
149 eleBook.classList ? eleBook.classList.remove('with-search') : eleBook.className.replace(new RegExp('(^|\\b)' + 'with-search'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
150 }
151 },
152
153 /**
154 * 右侧导航控制
155 * @return {[type]} [description]
156 */
157 navControl: function(){
158 var openOffcanvas = $('[data-offcanvas="open"]');
159 var closeOffcanvas = $('[data-offcanvas="close"]');
160 var offcanvasNav = $('.offcanvas-nav');
161 openOffcanvas.click(function(){
162 openOffcanvas.addClass('nav-open');
163 offcanvasNav.addClass('open');
164 $('body').append('<div class="offcanvas-backdrop"></div>');
165 });
166 closeOffcanvas.click(function(){
167 openOffcanvas.removeClass('nav-open');
168 offcanvasNav.removeClass('open');
169 $('.offcanvas-backdrop').remove();
170 });
171 $(document).on('click', '.offcanvas-backdrop', function(){
172 openOffcanvas.removeClass('nav-open');
173 offcanvasNav.removeClass('open');
174 $('.offcanvas-backdrop').remove();
175 });
176 },
177
178 /**
179 * 创建<style>,<script>标签
180 * @return {[type]} [description]
181 */
182 buildTag: function() {
183 var jsCode = document.querySelectorAll('.jstag');
184 var cssCode = document.querySelectorAll('.csstag');
185 var jsTag = document.createElement('script');
186 var cssTag = document.createElement('style');
187
188 for(var i=0, jsLen = jsCode.length; i<jsLen; i++) {
189 jsTag.innerHTML += jsCode[i].textContent;
190 }
191 document.body.appendChild(jsTag);
192
193 for(var j=0, cssLen = cssCode.length; j<cssLen; j++ ) {
194 cssTag.innerHTML += cssCode[j].textContent;
195 }
196 document.head.appendChild(cssTag);
197 },
198 addClass: function() {
199 $('.book-summary > nav').addClass('nano');
200 $('.summary').addClass('nano-content');
201 },
202 /**
203 * 用于解决gitbook生成的目录没有跳转刷新功能,导致页面加载的插件无法执行
204 * @return {[type]} [description]
205 */
206 changeLink: function() {
207 $('.chapter a').on('click', function(){
208 var aLink = $(this).attr('href').replace(/^\./,'');
209 var linkPageIndex = window.location.href.lastIndexOf('/');
210 var lastHref = window.location.href.substr(0,linkPageIndex);
211 var newHref = window.location.href.substr(0,linkPageIndex) + aLink;
212 // var newHref = window.location.href.replace(/\/[\w-]+\.html[#]*[\w-]*[\u4e00-\u9fa5]*$/g, aLink); //firefox没识别
213 window.location.href = newHref;
214 return false;
215 });
216 }
217
218 }
219
220 uDesign.init();
221 });
222});