qor5 · danni-cool · Sep 30, 2024 · Sep 30, 2024 · Sep 30, 2024 · Sep 30, 2024
diff --git a/go.mod b/go.mod
@@ -26,7 +26,7 @@ require (
 	github.com/qor/oss v0.0.0-20240729105053-88484a799a79
 	github.com/qor5/web v1.3.2
 	github.com/qor5/web/v3 v3.0.10-0.20240930021253-c7c6a418ae3d
-	github.com/qor5/x/v3 v3.0.11-0.20240929131016-1cfc25f2805c
+	github.com/qor5/x/v3 v3.0.11-0.20240930122753-c782501dcdf2
 	github.com/samber/lo v1.47.0
 	github.com/shurcooL/sanitized_anchor_name v1.0.0
 	github.com/spf13/cast v1.6.0

diff --git a/go.sum b/go.sum
@@ -316,6 +316,8 @@ github.com/qor5/web/v3 v3.0.10-0.20240930021253-c7c6a418ae3d h1:7A/JkehEyeZgqODQ
 github.com/qor5/web/v3 v3.0.10-0.20240930021253-c7c6a418ae3d/go.mod h1:32vdHHcZb2JimlcaclW9hLUyimdXjrllZDHTh3rl6d0=
 github.com/qor5/x/v3 v3.0.11-0.20240929131016-1cfc25f2805c h1:wU+8S19jOGwszqQ7qwhsFBpwqMT15AocITL5nYs2fbY=
 github.com/qor5/x/v3 v3.0.11-0.20240929131016-1cfc25f2805c/go.mod h1:kMR6DyRGm90zkro6v4xf+pfieESWEplueTZIiMh3M/Y=
+github.com/qor5/x/v3 v3.0.11-0.20240930122753-c782501dcdf2 h1:ZRoG4JdSi2lgztBLZ7gwcH02cDQqZNbpFN57x5ye0MI=
+github.com/qor5/x/v3 v3.0.11-0.20240930122753-c782501dcdf2/go.mod h1:kMR6DyRGm90zkro6v4xf+pfieESWEplueTZIiMh3M/Y=
 github.com/robfig/cron/v3 v3.0.1/go.mod h1:eQICP3HwyT7UooqI/z+Ov+PtYAWygg1TEWWzGIFLtro=
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/rogpeppe/go-internal v1.12.0 h1:exVL4IDcn6na9z1rAb56Vxr+CgyK3nn3O+epU5NdKM8=

diff --git a/pagebuilder/editor.go b/pagebuilder/editor.go
@@ -161,14 +161,93 @@ func (b *Builder) Editor(m *ModelBuilder) web.PageFunc {
 			return
 		}
 		r.Body = h.Components(
-			h.Div().Style("display:none").Attr("v-on-mounted", fmt.Sprintf(`({window, computed})=>{
+			h.Div().Style("display:none").
+				Attr("v-on-unmounted", fmt.Sprintf(`()=>{
+				vars.$pbRightDrawerOnMouseLeave = null
+				vars.$pbRightDrawerOnMouseDown = null
+				vars.$pbRightDrawerOnMouseMove = null
+			}`)).
+				Attr("v-on-mounted", fmt.Sprintf(`({ref, window, computed})=>{
 				vars.$pbLeftDrawerFolded = window.localStorage.getItem("$pbLeftDrawerFolded") === '1'
 				vars.$pbRightDrawerFolded = window.localStorage.getItem("$pbRightDrawerFolded") === '1'
 				vars.$pbLeftDrawerWidth = computed(()=>vars.$pbLeftDrawerFolded ? 32 : 350)
-				vars.$pbRightDrawerWidth = computed(()=>vars.$pbRightDrawerFolded ? 32 : 350)
+				vars.$pbRightAdjustableWidth = +window.localStorage.getItem("$pbRightAdjustableWidth") || 350
+				vars.$pbRightDrawerWidth = computed(()=>vars.$pbRightDrawerFolded ? 32 : vars.$pbRightAdjustableWidth)
 				vars.$pbLeftIconName = computed(()=> vars.$pbLeftDrawerFolded ? "mdi-chevron-right": "mdi-chevron-left")
 				vars.$pbRightIconName = computed(()=> vars.$pbRightDrawerFolded ? "mdi-chevron-left": "mdi-chevron-right")
+				vars.$pbRightDrawerHighlight = false
+				vars.$pbRightDrawerIsDragging = false
 				vars.$window = window
+
+				const borderWidth = 5
+				const draggableEl = ref(null)
+
+				vars.$pbRightDrawerRefGet = (el) => {
+					draggableEl.value = el.parentElement?.parentElement || el.parentElement
+				}
+
+				function isOnLeftBorder(event) {
+					const rect = draggableEl.value.getBoundingClientRect()
+					const x = event.clientX - rect.left
+					// console.log(event.clientX,rect.left, event.clientX - rect.left)
+
+					return x <= borderWidth
+				}
+
+				function onMouseMove(event) {
+					if (vars.$pbRightDrawerIsDragging) {
+						if (animationFrameId) return;
+						animationFrameId = window.requestAnimationFrame(() => {
+							const rect = draggableEl.value.getBoundingClientRect();
+							const dx = rect.right - event.clientX;
+							const minWidth = 350; 
+							const maxWidth = window.innerWidth / 2;
+
+							const newWidth = Math.min(Math.max(dx, minWidth), maxWidth);
+							if (vars.$pbRightAdjustableWidth !== newWidth) {
+								vars.$pbRightAdjustableWidth = newWidth;
+							}
+
+							animationFrameId = null;
+						});
+					}
+				}
+
+				function onMouseUp () {
+					vars.$pbRightDrawerIsDragging = false
+					vars.$pbRightDrawerHighlight = false
+					window.localStorage.setItem("$pbRightAdjustableWidth", vars.$pbRightAdjustableWidth)
+
+					window.removeEventListener("mousemove", onMouseMove);
+      		window.removeEventListener("mouseup", onMouseUp);
+				}
+
+				vars.$pbRightDrawerOnMouseDown = (event) => {
+					if(vars.$pbRightDrawerFolded) return
+
+					if (isOnLeftBorder(event)) {
+						vars.$pbRightDrawerIsDragging = true
+						event.preventDefault()
+
+						 window.addEventListener("mousemove", onMouseMove, {passive:true, capture:true});
+      			 window.addEventListener("mouseup", onMouseUp, {capture:true});
+					}
+
+					if(vars.$pbRightDrawerIsDragging) {
+						vars.$pbRightDrawerHighlight = true
+					}
+				}
+
+				vars.$pbRightDrawerOnMouseLeave = (event) => {
+					if(vars.$pbRightDrawerIsDragging) return
+					vars.$pbRightDrawerHighlight = false
+				}
+
+				vars.$pbRightDrawerOnMouseMove = (event) => {
+					if(vars.$pbRightDrawerFolded || vars.$pbRightDrawerIsDragging) return
+
+					vars.$pbRightDrawerHighlight = isOnLeftBorder(event)
+				}
 			}`)),
 			VAppBar(
 				h.Div(
@@ -196,33 +275,39 @@ func (b *Builder) Editor(m *ModelBuilder) web.PageFunc {
 
 				VNavigationDrawer(
 					h.Div().Style("display:none").Attr("v-on-mounted", fmt.Sprintf(`({el}) => {
-						el.__handleScroll = (event) => {
-							locals.__pageBuilderRightContentScrollTop = event.target.scrollTop;
-						}
-						el.parentElement.addEventListener('scroll', el.__handleScroll)
-
-						locals.__pageBuilderRightContentKeepScroll = () => {
-							el.parentElement.scrollTop = locals.__pageBuilderRightContentScrollTop;
-						}
-					}`)).Attr("v-on-unmounted", `({el}) => {
-						el.parentElement.removeEventListener('scroll', el.__handleScroll);
-					}`),
+							el.__handleScroll = (event) => {
+								locals.__pageBuilderRightContentScrollTop = event.target.scrollTop;
+							}
+							el.parentElement.addEventListener('scroll', el.__handleScroll)
+	
+							locals.__pageBuilderRightContentKeepScroll = () => {
+								el.parentElement.scrollTop = locals.__pageBuilderRightContentScrollTop;
+							}
+						}`)).Attr("v-on-unmounted", `({el}) => {
+							el.parentElement.removeEventListener('scroll', el.__handleScroll);
+						}`),
 					web.Slot(
 						VBtn("").
 							Attr(":icon", "vars.$pbRightIconName").
+							Attr("@mousemove.stop", "()=>{vars.$pbRightDrawerHighlight=false}").
+							Attr("@mousedown.stop", "()=>{vars.$pbRightDrawerHighlight=false}").
 							Attr("@click", `() => {
-								vars.$pbRightDrawerFolded = !vars.$pbRightDrawerFolded
-								vars.$window.localStorage.setItem("$pbRightDrawerFolded", vars.$pbRightDrawerFolded ? "1": "0")
-							}`).
+									vars.$pbRightDrawerFolded = !vars.$pbRightDrawerFolded
+									vars.$window.localStorage.setItem("$pbRightDrawerFolded", vars.$pbRightDrawerFolded ? "1": "0")
+								}`).
 							Size(SizeSmall).
 							Class("pb-drawer-btn drawer-btn-right")).
 						Name("append"),
 					h.Div(
 						web.Portal(editContainerDrawer).Name(pageBuilderRightContentPortal),
-					).Attr("v-show", "!vars.$pbRightDrawerFolded"),
+					).Attr("v-show", "!vars.$pbRightDrawerFolded").Attr(":ref", "vars.$pbRightDrawerRefGet"),
 				).Location(LocationRight).
 					Permanent(true).
-					Attr(":width", "vars.$pbRightDrawerWidth"),
+					Attr(":class", "['draggable-el',{'border-left-draggable-highlight': vars.$pbRightDrawerHighlight}]").
+					Attr(":width", "vars.$pbRightDrawerWidth").
+					Attr("@mousedown", "vars.$pbRightDrawerOnMouseDown").
+					Attr("@mousemove", "vars.$pbRightDrawerOnMouseMove").
+					Attr("@mouseleave", "vars.$pbRightDrawerOnMouseLeave"),
 			),
 			VMain(
 				addOverlay,