js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add resize to code block previews

Browse Source
This commit is contained in:
Cory LaViska
2020-03-27 17:50:31 -04:00
parent 3c52219279
commit 650457866e
2 changed files with 72 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
docs/scripts/code-block-plugin.js
View File

@@ -11,6 +11,7 @@
}
window.$docsify.plugins.push((hook, vm) => {
// Convert code blocks to previews
hook.afterEach(function(html, next) {
const domParser = new DOMParser();
const doc = domParser.parseFromString(html, 'text/html');
@@ -30,6 +31,20 @@
preview.classList.add('code-block__preview');
preview.innerHTML = code.textContent;
preview.innerHTML += `
<div class="code-block__resizer">
<svg width="8" height="15" viewBox="0 0 8 15" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor" fill-rule="nonzero" transform="translate(8) rotate(90)">
<circle cx="1.5" cy="1.5" r="1.5"></circle>
<circle cx="1.5" cy="6.5" r="1.5"></circle>
<circle cx="7.5" cy="1.5" r="1.5"></circle>
<circle cx="7.5" cy="6.5" r="1.5"></circle>
<circle cx="13.5" cy="1.5" r="1.5"></circle>
<circle cx="13.5" cy="6.5" r="1.5"></circle>
</g>
</svg>
</div>
`;
pre.id = preId;
pre.classList.add('code-block__source');
@@ -51,8 +66,40 @@
next(doc.body.innerHTML);
});
// Horizontal resizing
hook.doneEach(() => {
[...document.querySelectorAll('.code-block__preview')].map(resizeElement => {
let startX;
let startY;
let startWidth;
let startHeight;
const initDrag = event => {
startX = event.clientX;
startY = event.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(resizeElement).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(resizeElement).height, 10);
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.addEventListener('mouseup', stopDrag, false);
event.preventDefault();
};
const doDrag = event => {
resizeElement.style.width = startWidth + event.clientX - startX + 'px';
};
const stopDrag = event => {
document.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
};
resizeElement.querySelector('.code-block__resizer').addEventListener('mousedown', initDrag);
}, false);
});
});
// Expand and collapse code blocks
document.addEventListener('click', event => {
if (event.target.classList.contains('code-block__toggle')) {
const codeBlock = event.target.closest('.code-block');

28
docs/styles/docs.css
View File

@@ -168,22 +168,44 @@ body.close .sidebar-toggle {
/* Code blocks */
.code-block {
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.025);
border-radius: 3px;
margin-bottom: 1.5rem;
background: var(--sh-color-gray-95);
}
.code-block__preview {
position: relative;
border: solid 1px var(--sh-color-gray-90);
border-bottom: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 1.5rem;
background-color: var(--sh-color-white);
overflow: auto;
min-width: 200px;
max-width: 100%;
padding: 1.5rem 3rem 1.5rem 1.5rem;
}
.code-block__preview * {
vertical-align: middle;
}
.code-block__resizer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
color: var(--sh-color-gray-70);
top: 0;
right: 0;
bottom: 0;
width: 1.5rem;
border-left: solid 1px var(--sh-color-gray-90);
box-shadow: var(--sh-shadow-1);
cursor: ew-resize;
transition: 250ms background-color;
}
pre.code-block__source {
border: solid 1px var(--sh-color-gray-90);
border-bottom: none;
@@ -209,7 +231,7 @@ pre.code-block__source {
border: solid 1px var(--sh-color-gray-90);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background: none;
background-color: var(--sh-color-white);
font: inherit;
color: var(--sh-color-gray-60);
cursor: pointer;