Skip to content
Snippets Groups Projects
Commit c3c03fd1 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Resolve #3447257 "Make the sidebar resizable"

parent 65f8b237
Branches
Tags
3 merge requests!518Issue 3480661: Add padding to bottom of ckeditor content.,!441Resolve #3447257 "Make the sidebar resizable",!228Issue #3342164: Remove implicit dependency on node module for gin content form
Pipeline #210094 passed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 212 additions and 60 deletions
dist/css/components/edit_form.css
+ 3
− 0
View file @ c3c03fd1
......@@ -113,6 +113,8 @@
.gin--edit-form .page-wrapper__node-edit-form .layout-region-node-secondary {
z-index: 103;
width: var(--gin-sidebar-width);
min-width: var(--gin-sidebar-min-width);
max-width: var(--gin-sidebar-max-width);
height: calc(100% - var(--gin-toolbar-y-offset));
position: fixed;
top: var(--gin-toolbar-y-offset);
......@@ -221,6 +223,7 @@
}
.gin--edit-form .page-wrapper__node-edit-form .layout-region-node-secondary .entity-meta > .accordion__item > .claro-details__summary {
font-size: var(--gin-font-size-s);
display: block;
}
......
dist/css/components/sidebar.css
+ 28
− 1
View file @ c3c03fd1
#gin-sidebar-draggable {
cursor: ew-resize;
z-index: 104;
position: absolute;
top: 0;
inset-inline-start: 0;
padding: 0;
display: block;
width: 2px;
height: 100%;
transition: var(--gin-transition-fast);
}
#gin-sidebar-draggable:hover {
background-color: var(--gin-border-color-table);
}
#gin-sidebar-draggable:active {
background-color: var(--gin-border-color);
}
.layout-region-node-secondary {
transition: transform var(--gin-transition-fast);
}
@media (max-width: 60.99em) {
.layout-region-node-secondary {
--gin-sidebar-width: var(--gin-sidebar-small-width);
}
}
@media (max-width: 63.99em) {
.layout-region-node-secondary {
opacity: 0;
......@@ -10,7 +37,7 @@
}
body[data-meta-sidebar=closed] {
--gin-sidebar-offset: 0px;
--gin-sidebar-width-offset: 0px;
}
body[data-meta-sidebar=closed] .layout-region-node-secondary {
......
dist/css/theme/variables.css
+ 3
− 0
View file @ c3c03fd1
......@@ -106,7 +106,10 @@
--gin-toolbar-x-offset: 0px;
--gin-scroll-offset: 0px;
--gin-sticky-offset: 0px;
--gin-sidebar-small-width: 320px;
--gin-sidebar-min-width: 240px;
--gin-sidebar-width: 320px;
--gin-sidebar-max-width: 560px;
--gin-sidebar-offset: var(--gin-sidebar-width);
--gin-switch: #26a769;
--gin-shadow-button: #00000033;
......
dist/js/init.js
+ 4
− 0
View file @ c3c03fd1
......@@ -13,6 +13,10 @@
scriptTag.parentNode.insertBefore(style, scriptTag);
} else document.getElementsByClassName(className).length > 0 && document.getElementsByClassName(className)[0].remove();
}
if (localStorage.getItem("Drupal.gin.sidebarWidth")) {
const sidebarWidth = localStorage.getItem("Drupal.gin.sidebarWidth");
document.documentElement.style.setProperty("--gin-sidebar-width", sidebarWidth);
}
if (localStorage.getItem("Drupal.gin.sidebarExpanded.desktop")) {
const style = document.createElement("style"), className = "gin-sidebar-inline-styles";
if (style.className = className, window.innerWidth < 1024 || "false" === localStorage.getItem("Drupal.gin.sidebarExpanded.desktop")) {
......
dist/js/sidebar.js
+ 83
− 57
View file @ c3c03fd1
((Drupal, drupalSettings, once) => {
const toolbarVariant = drupalSettings.gin.toolbar_variant, storageDesktop = "Drupal.gin.sidebarExpanded.desktop";
Drupal.behaviors.ginSidebar = {
attach: function(context) {
Drupal.ginSidebar.init(context);
}
}, Drupal.ginSidebar = {
init: function(context) {
once("ginSidebarInit", "#gin_sidebar", context).forEach((() => {
localStorage.getItem(storageDesktop) || localStorage.setItem(storageDesktop, "true"),
window.innerWidth >= 1024 && ("true" === localStorage.getItem(storageDesktop) ? this.showSidebar() : this.collapseSidebar()),
document.addEventListener("keydown", (e => {
!0 === e.altKey && "KeyS" === e.code && this.toggleSidebar();
})), new ResizeObserver((entries => {
for (let entry of entries) Drupal.debounce(this.handleResize(entry.contentRect), 150);
})).observe(document.querySelector("html"));
})), once("ginSidebarToggle", ".meta-sidebar__trigger", context).forEach((el => el.addEventListener("click", (e => {
e.preventDefault(), this.removeInlineStyles(), this.toggleSidebar();
})))), once("ginSidebarClose", ".meta-sidebar__close, .meta-sidebar__overlay", context).forEach((el => el.addEventListener("click", (e => {
e.preventDefault(), this.removeInlineStyles(), this.collapseSidebar();
}))));
},
toggleSidebar: () => {
var _Drupal$ginStickyForm, _Drupal$ginStickyForm2;
document.querySelector(".meta-sidebar__trigger").classList.contains("is-active") ? (Drupal.ginSidebar.collapseSidebar(),
null === (_Drupal$ginStickyForm = Drupal.ginStickyFormActions) || void 0 === _Drupal$ginStickyForm || _Drupal$ginStickyForm.hideMoreActions()) : (Drupal.ginSidebar.showSidebar(),
null === (_Drupal$ginStickyForm2 = Drupal.ginStickyFormActions) || void 0 === _Drupal$ginStickyForm2 || _Drupal$ginStickyForm2.hideMoreActions());
},
showSidebar: () => {
const chooseStorage = window.innerWidth < 1024 ? "Drupal.gin.sidebarExpanded.mobile" : storageDesktop, hideLabel = Drupal.t("Hide sidebar panel"), sidebarTrigger = document.querySelector(".meta-sidebar__trigger");
var _Drupal$ginCoreNaviga;
if (sidebarTrigger.querySelector("span").innerHTML = hideLabel, sidebarTrigger.setAttribute("title", hideLabel),
sidebarTrigger.nextSibling.innerHTML = hideLabel, sidebarTrigger.setAttribute("aria-expanded", "true"),
sidebarTrigger.classList.add("is-active"), document.body.setAttribute("data-meta-sidebar", "open"),
localStorage.setItem(chooseStorage, "true"), window.innerWidth < 1280) if (null === (_Drupal$ginCoreNaviga = Drupal.ginCoreNavigation) || void 0 === _Drupal$ginCoreNaviga || _Drupal$ginCoreNaviga.collapseToolbar(),
"vertical" === toolbarVariant) Drupal.ginToolbar.collapseToolbar(); else if ("new" === toolbarVariant) {
var _Drupal$behaviors$gin;
null === (_Drupal$behaviors$gin = Drupal.behaviors.ginNavigation) || void 0 === _Drupal$behaviors$gin || _Drupal$behaviors$gin.collapseSidebar();
}
},
collapseSidebar: () => {
const chooseStorage = window.innerWidth < 1024 ? "Drupal.gin.sidebarExpanded.mobile" : storageDesktop, showLabel = Drupal.t("Show sidebar panel"), sidebarTrigger = document.querySelector(".meta-sidebar__trigger");
sidebarTrigger.querySelector("span").innerHTML = showLabel, sidebarTrigger.setAttribute("title", showLabel),
sidebarTrigger.nextSibling.innerHTML = showLabel, sidebarTrigger.setAttribute("aria-expanded", "false"),
sidebarTrigger.classList.remove("is-active"), document.body.setAttribute("data-meta-sidebar", "closed"),
localStorage.setItem(chooseStorage, "false");
},
handleResize: function() {
let windowSize = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : window;
Drupal.ginSidebar.removeInlineStyles(), windowSize.width < 1024 ? Drupal.ginSidebar.collapseSidebar() : "true" === localStorage.getItem(storageDesktop) ? Drupal.ginSidebar.showSidebar() : Drupal.ginSidebar.collapseSidebar();
},
removeInlineStyles: () => {
const elementToRemove = document.querySelector(".gin-sidebar-inline-styles");
elementToRemove && elementToRemove.parentNode.removeChild(elementToRemove);
}
};
})(Drupal, drupalSettings, once);
\ No newline at end of file
({
"./js/sidebar.js": function() {
((Drupal, drupalSettings, once) => {
const toolbarVariant = drupalSettings.gin.toolbar_variant, storageDesktop = "Drupal.gin.sidebarExpanded.desktop", resizer = document.getElementById("gin-sidebar-draggable"), resizable = document.getElementById("gin_sidebar");
let startX, startWidth, isResizing = !1;
Drupal.behaviors.ginSidebar = {
attach: function(context) {
Drupal.ginSidebar.init(context);
}
}, Drupal.ginSidebar = {
init: function(context) {
once("ginSidebarInit", "#gin_sidebar", context).forEach((() => {
localStorage.getItem(storageDesktop) || localStorage.setItem(storageDesktop, "true"),
window.innerWidth >= 1024 && ("true" === localStorage.getItem(storageDesktop) ? this.showSidebar() : this.collapseSidebar()),
document.addEventListener("keydown", (e => {
!0 === e.altKey && "KeyS" === e.code && this.toggleSidebar();
})), new ResizeObserver((entries => {
for (let entry of entries) Drupal.debounce(this.handleResize(entry.contentRect), 150);
})).observe(document.querySelector("html")), this.resizeInit();
})), once("ginSidebarToggle", ".meta-sidebar__trigger", context).forEach((el => el.addEventListener("click", (e => {
e.preventDefault(), this.removeInlineStyles(), this.toggleSidebar();
})))), once("ginSidebarClose", ".meta-sidebar__close, .meta-sidebar__overlay", context).forEach((el => el.addEventListener("click", (e => {
e.preventDefault(), this.removeInlineStyles(), this.collapseSidebar();
}))));
},
toggleSidebar: () => {
var _Drupal$ginStickyForm, _Drupal$ginStickyForm2;
document.querySelector(".meta-sidebar__trigger").classList.contains("is-active") ? (Drupal.ginSidebar.collapseSidebar(),
null === (_Drupal$ginStickyForm = Drupal.ginStickyFormActions) || void 0 === _Drupal$ginStickyForm || _Drupal$ginStickyForm.hideMoreActions()) : (Drupal.ginSidebar.showSidebar(),
null === (_Drupal$ginStickyForm2 = Drupal.ginStickyFormActions) || void 0 === _Drupal$ginStickyForm2 || _Drupal$ginStickyForm2.hideMoreActions());
},
showSidebar: () => {
const chooseStorage = window.innerWidth < 1024 ? "Drupal.gin.sidebarExpanded.mobile" : storageDesktop, hideLabel = Drupal.t("Hide sidebar panel"), sidebarTrigger = document.querySelector(".meta-sidebar__trigger");
var _Drupal$ginCoreNaviga;
if (sidebarTrigger.querySelector("span").innerHTML = hideLabel, sidebarTrigger.setAttribute("title", hideLabel),
sidebarTrigger.nextSibling.innerHTML = hideLabel, sidebarTrigger.setAttribute("aria-expanded", "true"),
sidebarTrigger.classList.add("is-active"), document.body.setAttribute("data-meta-sidebar", "open"),
localStorage.setItem(chooseStorage, "true"), window.innerWidth < 1280) if (null === (_Drupal$ginCoreNaviga = Drupal.ginCoreNavigation) || void 0 === _Drupal$ginCoreNaviga || _Drupal$ginCoreNaviga.collapseToolbar(),
"vertical" === toolbarVariant) Drupal.ginToolbar.collapseToolbar(); else if ("new" === toolbarVariant) {
var _Drupal$behaviors$gin;
null === (_Drupal$behaviors$gin = Drupal.behaviors.ginNavigation) || void 0 === _Drupal$behaviors$gin || _Drupal$behaviors$gin.collapseSidebar();
}
},
collapseSidebar: () => {
const chooseStorage = window.innerWidth < 1024 ? "Drupal.gin.sidebarExpanded.mobile" : storageDesktop, showLabel = Drupal.t("Show sidebar panel"), sidebarTrigger = document.querySelector(".meta-sidebar__trigger");
sidebarTrigger.querySelector("span").innerHTML = showLabel, sidebarTrigger.setAttribute("title", showLabel),
sidebarTrigger.nextSibling.innerHTML = showLabel, sidebarTrigger.setAttribute("aria-expanded", "false"),
sidebarTrigger.classList.remove("is-active"), document.body.setAttribute("data-meta-sidebar", "closed"),
localStorage.setItem(chooseStorage, "false");
},
handleResize: function() {
let windowSize = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : window;
Drupal.ginSidebar.removeInlineStyles(), windowSize.width < 1024 ? Drupal.ginSidebar.collapseSidebar() : "true" === localStorage.getItem(storageDesktop) ? Drupal.ginSidebar.showSidebar() : Drupal.ginSidebar.collapseSidebar();
},
removeInlineStyles: () => {
const elementToRemove = document.querySelector(".gin-sidebar-inline-styles");
elementToRemove && elementToRemove.parentNode.removeChild(elementToRemove);
},
resizeInit: function() {
resizer.addEventListener("mousedown", this.resizeStart), document.addEventListener("mousemove", this.resizeWidth),
document.addEventListener("mouseup", this.resizeEnd), resizer.addEventListener("touchstart", this.resizeStart),
document.addEventListener("touchmove", this.resizeWidth), document.addEventListener("touchend", this.resizeEnd);
},
resizeStart: e => {
e.preventDefault(), isResizing = !0, startX = e.clientX, startWidth = parseInt(document.defaultView.getComputedStyle(resizable).width, 10);
},
resizeEnd: () => {
isResizing = !1;
const setWidth = document.documentElement.style.getPropertyValue("--gin-sidebar-width"), currentWidth = setWidth || resizable.style.width;
localStorage.setItem("Drupal.gin.sidebarWidth", currentWidth), document.removeEventListener("mousemove", this.resizeWidth),
document.removeEventListener("touchend", this.resizeWidth);
},
resizeWidth: e => {
if (isResizing) {
let sidebarWidth = startWidth - (e.clientX - startX);
sidebarWidth <= 240 ? sidebarWidth = 240 : sidebarWidth >= 560 && (sidebarWidth = 560),
sidebarWidth = `${sidebarWidth}px`, document.documentElement.style.setProperty("--gin-sidebar-width", sidebarWidth);
}
}
};
})(Drupal, drupalSettings, once);
}
})["./js/sidebar.js"]();
\ No newline at end of file
js/init.js
+ 6
− 1
View file @ c3c03fd1
......@@ -62,7 +62,12 @@ if (localStorage.getItem('Drupal.gin.toolbarExpanded')) {
}
}
// Sidebar check.
// Sidebar checks.
if (localStorage.getItem('Drupal.gin.sidebarWidth')) {
const sidebarWidth = localStorage.getItem('Drupal.gin.sidebarWidth');
document.documentElement.style.setProperty('--gin-sidebar-width', sidebarWidth);
}
if (localStorage.getItem('Drupal.gin.sidebarExpanded.desktop')) {
const style = document.createElement('style');
const className = 'gin-sidebar-inline-styles';
......
js/sidebar.js
+ 51
− 0
View file @ c3c03fd1
......@@ -6,6 +6,11 @@
const toolbarVariant = drupalSettings.gin.toolbar_variant;
const storageMobile = 'Drupal.gin.sidebarExpanded.mobile';
const storageDesktop = 'Drupal.gin.sidebarExpanded.desktop';
const storageWidth = "Drupal.gin.sidebarWidth";
const resizer = document.getElementById('gin-sidebar-draggable');
const resizable = document.getElementById('gin_sidebar');
let isResizing = false;
let startX, startWidth;
Drupal.behaviors.ginSidebar = {
attach: function attach(context) {
......@@ -47,6 +52,8 @@
});
resizeHandler.observe(document.querySelector('html'));
// Init resizable sidebar.
this.resizeInit();
});
// Toolbar toggle
......@@ -145,5 +152,49 @@
}
},
resizeInit: function () {
// Mouse
resizer.addEventListener('mousedown', this.resizeStart);
document.addEventListener('mousemove', this.resizeWidth);
document.addEventListener('mouseup', this.resizeEnd);
// Touch
resizer.addEventListener('touchstart', this.resizeStart);
document.addEventListener('touchmove', this.resizeWidth);
document.addEventListener('touchend', this.resizeEnd);
},
resizeStart: (e) => {
e.preventDefault();
isResizing = true;
startX = e.clientX;
startWidth = parseInt(document.defaultView.getComputedStyle(resizable).width, 10);
},
resizeEnd: () => {
isResizing = false;
const setWidth = document.documentElement.style.getPropertyValue('--gin-sidebar-width');
const currentWidth = setWidth ? setWidth : resizable.style.width;
localStorage.setItem(storageWidth, currentWidth);
document.removeEventListener('mousemove', this.resizeWidth);
document.removeEventListener('touchend', this.resizeWidth);
},
resizeWidth: (e) => {
if (isResizing) {
let sidebarWidth = startWidth - (e.clientX - startX);
if (sidebarWidth <= 240) {
sidebarWidth = 240;
} else if (sidebarWidth >= 560) {
sidebarWidth = 560;
}
sidebarWidth = `${sidebarWidth}px`;
// resizable.style.width = sidebarWidth;
document.documentElement.style.setProperty('--gin-sidebar-width', sidebarWidth);
}
}
};
})(Drupal, drupalSettings, once);
styles/components/edit_form.scss
+ 3
− 0
View file @ c3c03fd1
......@@ -98,6 +98,8 @@
.layout-region-node-secondary {
z-index: 103;
width: var(--gin-sidebar-width);
min-width: var(--gin-sidebar-min-width);
max-width: var(--gin-sidebar-max-width);
height: calc(100% - var(--gin-toolbar-y-offset));
position: fixed;
top: var(--gin-toolbar-y-offset);
......@@ -191,6 +193,7 @@
}
> .claro-details__summary {
font-size: var(--gin-font-size-s);
display: block;
padding-left: #{$sidebarSpacer + 1.5rem};
......
styles/components/sidebar.scss
+ 26
− 1
View file @ c3c03fd1
#gin-sidebar-draggable {
cursor: ew-resize;
z-index: 104;
position: absolute;
top: 0;
inset-inline-start: 0;
padding: 0;
display: block;
width: 2px;
height: 100%;
transition: var(--gin-transition-fast);
&:hover {
background-color: var(--gin-border-color-table);
}
&:active {
background-color: var(--gin-border-color);
}
}
.layout-region-node-secondary {
transition: transform var(--gin-transition-fast);
@include mq($to: medium) {
--gin-sidebar-width: var(--gin-sidebar-small-width);
}
// Fixes the flickering happinging on smaller devices.
@include mq($to: large) {
opacity: 0;
......@@ -9,7 +34,7 @@
}
body[data-meta-sidebar=closed] {
--gin-sidebar-offset: 0px;
--gin-sidebar-width-offset: 0px;
.layout-region-node-secondary {
transform: translateX(var(--gin-sidebar-width));
......
styles/theme/variables.scss
+ 4
− 0
View file @ c3c03fd1
......@@ -167,8 +167,12 @@
}
// Sidebar
--gin-sidebar-small-width: 320px;
--gin-sidebar-min-width: 240px;
--gin-sidebar-width: 320px;
--gin-sidebar-max-width: 560px;
--gin-sidebar-offset: var(--gin-sidebar-width);
@include mq(wide) {
--gin-sidebar-width: 360px;
}
......
templates/node/node-edit-form.html.twig
+ 1
− 0
View file @ c3c03fd1
......@@ -20,6 +20,7 @@
{{ form|without('advanced', 'footer', 'actions', 'gin_actions', 'gin_sidebar', 'gin_sidebar_toggle') }}
</div>
<div class="layout-region layout-region-node-secondary" id="gin_sidebar">
<span class="gin-sidebar-draggable" id="gin-sidebar-draggable"></span>
<div class="layout-region__content">
{{ form.advanced }}
{{ form.gin_sidebar_toggle }}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment