diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9000c0c..5015e7fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
- Add `sl-format-bytes` utility component
- Add `clearable` and `required` props to `sl-select`
- Add `slClear` event to `sl-input`
+- Added keyboard support to the preview resizer in the docs
- Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
- Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
- Fixed a bug where `--sl-input-color-*` custom properties had no affect on `sl-input` and `sl-textarea`
diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index 66781f77..e7d98523 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -35,6 +35,14 @@
transition: 250ms background-color;
}
+.code-block__resizer:focus {
+ outline: none;
+ box-shadow: 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)), var(--sl-focus-ring-box-shadow);
+ background-color: var(--sl-color-primary-95);
+ color: var(--sl-color-primary-50);
+ z-index: 2;
+}
+
@media screen and (max-width: 600px) {
.code-block__preview {
padding-right: 1.5rem;
diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js
index 851f1dfc..8f9a59d4 100644
--- a/docs/assets/plugins/code-block/code-block.js
+++ b/docs/assets/plugins/code-block/code-block.js
@@ -44,7 +44,14 @@
preview.classList.add('code-block__preview');
preview.innerHTML = code.textContent;
preview.innerHTML += `
-
+
`;
@@ -92,6 +99,7 @@
// Horizontal resizing
hook.doneEach(() => {
[...document.querySelectorAll('.code-block__preview')].map(resizeElement => {
+ const resizer = resizeElement.querySelector('.code-block__resizer');
let startX;
let startY;
let startWidth;
@@ -104,11 +112,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';
+ setWidth(startWidth + event.clientX - startX);
};
const stopDrag = event => {
@@ -116,7 +123,33 @@
document.documentElement.removeEventListener('mouseup', stopDrag, false);
};
- resizeElement.querySelector('.code-block__resizer').addEventListener('mousedown', initDrag);
+ const handleKeyDown = event => {
+ if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+ const currentWidth = resizeElement.clientWidth;
+ const maxWidth = resizeElement.parentElement.clientWidth;
+ const incr = event.shiftKey ? 100 : 10;
+
+ event.preventDefault();
+
+ if (event.key === 'ArrowLeft') setWidth(currentWidth - incr);
+ if (event.key === 'ArrowRight') setWidth(currentWidth + incr);
+ if (event.key === 'Home') setWidth(0);
+ if (event.key === 'End') setWidth(maxWidth);
+ }
+ };
+
+ const setWidth = width => {
+ resizeElement.style.width = width + 'px';
+
+ const totalWidth = resizeElement.parentElement.clientWidth;
+ const currentWidth = resizeElement.clientWidth;
+ const valuenow = Math.round((currentWidth / totalWidth) * 100);
+
+ resizer.setAttribute('aria-valuenow', valuenow);
+ };
+
+ resizer.addEventListener('mousedown', initDrag);
+ resizer.addEventListener('keydown', handleKeyDown);
}, false);
});
});