https://gorgeous-smakager-db1548.netlify.app/gitbook/gitbook-plugin-splitter/splitter.js

1require(['gitbook', 'jQuery'], function (gitbook, $) {
2  
3	// MEMO:
4	// Gitbook is calculated as "calc (100% - 60px)" in the horizontal width when the width of the screen size is 600px
5	// or less.
6	// In this case, since contradiction occurs in the implementation of this module, return.
7	if($(window).width() <= 600) {
8		return;
9	}
10
11	gitbook.events.bind('start', function () {
12	});
13
14	gitbook.events.bind('page.change', function () {
15
16		var KEY_SPLIT_STATE = 'plugin_gitbook_split';
17
18		var dividerWidth = null;
19		var isDraggable = false;
20		var dividerCenterOffsetLeft = null;
21		var splitState = null;
22		var grabPointWidth = null;
23
24		var $body = $('body');
25		var $book = $('.book');
26		var $summary = $('.book-summary');
27		var $bookBody = $('.book-body');
28		var $divider = $('<div class="divider-content-summary">' +
29			               '<div class="divider-content-summary__icon">' +
30			                 '<i class="fa fa-ellipsis-v"></i>' +
31			               '</div>' +
32			             '</div>');
33
34		$summary.append($divider);
35
36		dividerWidth = $divider.outerWidth();
37		dividerCenterOffsetLeft = $divider.outerWidth() / 2;
38
39		// restore split state from sessionStorage
40		splitState = getSplitState();
41		setSplitState(
42			splitState.summaryWidth,
43			splitState.summaryOffset,
44			splitState.bookBodyOffset
45		);
46
47		setTimeout(function() {
48			var isGreaterThanEqualGitbookV2_5 = !Boolean($('.toggle-summary').length);
49
50			var $toggleSummary = isGreaterThanEqualGitbookV2_5
51				? $('.fa.fa-align-justify').parent() : $('.toggle-summary');
52
53			$toggleSummary.on('click', function () {
54
55				var summaryOffset  = null;
56				var bookBodyOffset = null;
57
58				var isOpen = isGreaterThanEqualGitbookV2_5
59					? !gitbook.sidebar.isOpen() : $book.hasClass('with-summary');
60
61				if (isOpen) {
62					summaryOffset  = -($summary.outerWidth());
63					bookBodyOffset = 0;
64				} else {
65					summaryOffset  = 0;
66					bookBodyOffset = $summary.outerWidth();
67				}
68
69				setSplitState($summary.outerWidth(), summaryOffset, bookBodyOffset);
70				saveSplitState($summary.outerWidth(), summaryOffset, bookBodyOffset);
71			});
72		}, 1);
73
74		$divider.on('mousedown', function (event) {
75			event.stopPropagation();
76			isDraggable = true;
77			grabPointWidth = $summary.outerWidth() - event.pageX;
78		});
79
80		$body.on('mouseup', function (event) {
81			event.stopPropagation();
82			isDraggable = false;
83			saveSplitState(
84				$summary.outerWidth(),
85				$summary.position().left,
86				$bookBody.position().left
87			);
88		});
89
90		$body.on('mousemove', function (event) {
91			if (!isDraggable) {
92				return;
93			}
94			event.stopPropagation();
95			event.preventDefault();
96			$summary.outerWidth(event.pageX + grabPointWidth);
97			$bookBody.offset({ left: event.pageX + grabPointWidth });
98		});
99
100		function getSplitState() {
101			var splitState = JSON.parse(sessionStorage.getItem(KEY_SPLIT_STATE));
102			splitState || (splitState = {});
103			splitState.summaryWidth || (splitState.summaryWidth = $summary.outerWidth());
104			splitState.summaryOffset || (splitState.summaryOffset = $summary.position().left);
105			splitState.bookBodyOffset || (splitState.bookBodyOffset = $bookBody.position().left);
106			return splitState;
107		}
108
109		function saveSplitState(summaryWidth, summaryWidthOffset, bookBodyOffset) {
110			sessionStorage.setItem(KEY_SPLIT_STATE, JSON.stringify({
111				summaryWidth: summaryWidth,
112				summaryOffset: summaryWidthOffset,
113				bookBodyOffset: bookBodyOffset,
114			}));
115		}
116
117		function setSplitState(summaryWidth, summaryOffset, bookBodyOffset) {
118			$summary.outerWidth(summaryWidth);
119			$summary.offset({ left: summaryOffset });
120			$bookBody.offset({ left: bookBodyOffset });
121			// improved broken layout in windows chrome.
122			//   "$(x).offset" automatically add to "position:relative".
123			//   but it cause layout broken..
124			$summary.css({ position: 'absolute' });
125			$bookBody.css({ position: 'absolute' });
126		}
127	});
128});