actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Disable text selection and CSS transition while resizing sidebar

This commit is contained in:
gentoo90 2018-12-12 21:43:02 +02:00
parent 3d37e24c14
commit 3d8db7f25c
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/book.js
View File

@ -480,12 +480,14 @@ function playpen_text(playpen) {
function initResize(e) { function initResize(e) {
window.addEventListener('mousemove', resize, false); window.addEventListener('mousemove', resize, false);
window.addEventListener('mouseup', stopResize, false); window.addEventListener('mouseup', stopResize, false);
html.classList.add('sidebar-resizing');
} }
function resize(e) { function resize(e) {
document.documentElement.style.setProperty('--sidebar-width', (e.clientX - sidebar.offsetLeft) + 'px'); document.documentElement.style.setProperty('--sidebar-width', (e.clientX - sidebar.offsetLeft) + 'px');
} }
//on mouseup remove windows functions mousemove & mouseup //on mouseup remove windows functions mousemove & mouseup
function stopResize(e) { function stopResize(e) {
html.classList.remove('sidebar-resizing');
window.removeEventListener('mousemove', resize, false); window.removeEventListener('mousemove', resize, false);
window.removeEventListener('mouseup', stopResize, false); window.removeEventListener('mouseup', stopResize, false);
} }

8
src/theme/css/chrome.css
View File

@ -308,7 +308,13 @@ ul#searchresults span.teaser em {
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg);
color: var(--sidebar-fg); color: var(--sidebar-fg);
} }
.js .sidebar { .sidebar-resizing {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.js:not(.sidebar-resizing) .sidebar {
transition: transform 0.3s; /* Animation: slide away */ transition: transform 0.3s; /* Animation: slide away */
} }
.sidebar code { .sidebar code {

5
src/theme/css/general.css
View File

@ -30,7 +30,7 @@ h4, h5 { margin-top: 2em; }
.header + .header h3, .header + .header h3,
.header + .header h4, .header + .header h4,
.header + .header h5 { .header + .header h5 {
margin-top: 1em; margin-top: 1em;
} }
@ -51,7 +51,7 @@ a.header:target h4:before {
.page-wrapper { .page-wrapper {
box-sizing: border-box; box-sizing: border-box;
} }
.js .page-wrapper { .js:not(.sidebar-resizing) .page-wrapper {
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
} }
@ -141,4 +141,3 @@ blockquote {
.tooltipped .tooltiptext { .tooltipped .tooltiptext {
visibility: visible; visibility: visible;
} }