diff --git a/packages/website/src/components/Editor/Splitter.js b/packages/website/src/components/Editor/Splitter.js new file mode 100644 index 000000000000..ac4d5f2bb312 --- /dev/null +++ b/packages/website/src/components/Editor/Splitter.js @@ -0,0 +1,87 @@ +import React, { useState, useRef, useEffect } from 'react'; + +export default function Splitter({ preview, editor }) { + const [moving, setMoving] = useState(false); + const [leftColumnSize, setLeftColumnSize] = useState("calc(50% - 0.5rem)"); + const [rightColumnSize, setRightColumnSize] = useState("calc(50% - 0.5rem)"); + const containerRef = useRef(); + + useEffect(() => { + const handleMouseMove = (e) => { + if (!moving) return; + + const containerRect = containerRef.current.getBoundingClientRect(); + const clientX = e.touches?.length > 0 ? e.touches[0].clientX : e.clientX; + const offsetX = clientX - containerRect.left; + + const leftPercent = Math.round((offsetX / containerRect.width) * 100); + const rightPercent = 100 - leftPercent; + + console.log(leftPercent, rightPercent) + + setLeftColumnSize(`calc(${leftPercent}% - 0.5rem)`); + setRightColumnSize(`calc(${rightPercent}% - 0.5rem)`); + }; + + const handleMouseUp = () => { + setMoving(false); + }; + + if (moving) { + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + document.addEventListener("touchmove", handleMouseMove); + document.addEventListener("touchend", handleMouseUp); + } + + return () => { + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + document.removeEventListener("touchmove", handleMouseMove); + document.removeEventListener("touchend", handleMouseUp); + }; + }, [moving]); + + const mousedownHandler = () => { + setMoving(true); + }; + + return ( + <> + {moving && ( +
+ )} +
+
{preview}
+
+ + + + + +
+
{editor}
+
+ + ); +} diff --git a/packages/website/src/components/Editor/index.js b/packages/website/src/components/Editor/index.js index 3d990a19933d..14104c038b82 100644 --- a/packages/website/src/components/Editor/index.js +++ b/packages/website/src/components/Editor/index.js @@ -9,7 +9,7 @@ import { ThemeContext, ContentDensityContext, TextDirectionContext } from "@site import { encodeToBase64, decodeFromBase64 } from "./share.js"; import clsx from "clsx"; import ShareIcon from "@ui5/webcomponents-icons/dist/v5/share-2.svg"; -import { Splitter } from 'react-splitter-light'; +import Splitter from './Splitter.js'; import DownloadIcon from "@ui5/webcomponents-icons/dist/v5/download-from-cloud.svg"; import EditIcon from "@ui5/webcomponents-icons/dist/v5/edit.svg"; import ActionIcon from "@ui5/webcomponents-icons/dist/v5/action.svg"; @@ -40,10 +40,10 @@ const getProjectFromPool = () => { // return a project element to the pool for reuse const returnProjectToPool = (project) => { - projectPool.push(project); + projectPool.push(project); } -export default function Editor({html, js, css, mainFile = "main.js", canShare = false, standalone = false, mainFileSelected = false }) { +export default function Editor({ html, js, css, mainFile = "main.js", canShare = false, standalone = false, mainFileSelected = false }) { const projectContainerRef = useRef(null); const projectRef = useRef(null); const previewRef = useRef(null); @@ -54,12 +54,12 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare = // name is set on iframe so it can be passed back in resize message to identify which iframe is resized const iframeId = useId(); const [editorVisible, setEditorVisible] = useState(false); - const {siteConfig, siteMetadata} = useDocusaurusContext(); + const { siteConfig, siteMetadata } = useDocusaurusContext(); const { theme, setTheme } = useContext(ThemeContext); const { contentDensity, setContentDensity } = useContext(ContentDensityContext); const { textDirection, setTextDirection } = useContext(TextDirectionContext); const [copied, setCopied] = useState(false); - const [ activeExample, setActiveExample ] = useState(""); + const [activeExample, setActiveExample] = useState(""); function calcImports() { if (process.env.NODE_ENV === 'development' || siteConfig.customFields.ui5DeploymentType === "nightly") { @@ -240,7 +240,7 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare = content: addHeadContent(fixAssetPaths(_html)), }, "playground-support.js": { - content: playgroundSupport({theme, textDirection, contentDensity, iframeId}), + content: playgroundSupport({ theme, textDirection, contentDensity, iframeId }), hidden: true, }, [mainFile]: { @@ -275,7 +275,7 @@ ${fixAssetPaths(_js)}`, // if the saved project has a main from an old default, and the default project has a main.tsx file, restore the saved one delete newConfig.files["main.tsx"]; } - newConfig.files = {...newConfig.files, ...savedConfig}; + newConfig.files = { ...newConfig.files, ...savedConfig }; } catch (e) { console.log(e); } @@ -289,10 +289,10 @@ ${fixAssetPaths(_js)}`, sharedConfig["index.html"].content = addHeadContent(fixAssetPaths(sharedConfig["index.html"].content)); const oldMainFile = sharedConfig["main.js"] || sharedConfig["main.ts"]; if (oldMainFile && newConfig.files["main.tsx"]) { - // if the shared project has a main from an old default, and the default project has a main.tsx file, restore the saved one + // if the shared project has a main from an old default, and the default project has a main.tsx file, restore the saved one delete newConfig.files["main.tsx"]; } - newConfig.files = {...newConfig.files, ...sharedConfig}; + newConfig.files = { ...newConfig.files, ...sharedConfig }; } catch (e) { console.log(e); } @@ -316,10 +316,10 @@ ${fixAssetPaths(_js)}`, // algolia search opens the search on key `/` because this custom element is the event target but has no `isContentEditable` Object.defineProperty(fileEditorRef.current, "isContentEditable", { - configurable: true, - get() { - return true; - }, + configurable: true, + get() { + return true; + }, }); tabBarRef.current.editor = fileEditorRef.current; @@ -347,7 +347,7 @@ ${fixAssetPaths(_js)}`, // setting has changed but exising project config is there // update the playground-support.js only with the new settings so refresh works correctly const newConfig = JSON.parse(JSON.stringify(projectRef.current.config)); - newConfig.files["playground-support.js"].content = playgroundSupport({theme, textDirection, contentDensity, iframeId}); + newConfig.files["playground-support.js"].content = playgroundSupport({ theme, textDirection, contentDensity, iframeId }); projectRef.current.config = newConfig; }, [theme, contentDensity, textDirection]); @@ -362,19 +362,16 @@ ${fixAssetPaths(_js)}`, function optionalSplitter(editor, preview) { return ( <> - { standalone + {standalone ? -
- - {preview} - {editor} - -
+
+ +
: -
- {editor} - {preview} -
+
+ {editor} + {preview} +
} ) @@ -384,10 +381,10 @@ ${fixAssetPaths(_js)}`, return ( <> ) @@ -401,7 +398,7 @@ ${fixAssetPaths(_js)}`, [styles['editor-standalone']]: standalone, [styles['editor-sample']]: !standalone, })} - style={{display: editorVisible | standalone ? "block" : "none"}}> + style={{ display: editorVisible | standalone ? "block" : "none" }}>
@@ -436,37 +433,37 @@ ${fixAssetPaths(_js)}`, {canShare ? - <> -
- -
- - - - -
+ } + + + +
- + + : - <> + <> }
{optionalSplitter(preview(), editor())} -
- { standalone - ? +
+ {standalone + ? <> - : - <> - - - - - - - } + : + <> + + + + + + + }
diff --git a/packages/website/src/components/Editor/index.module.css b/packages/website/src/components/Editor/index.module.css index ed1df452d71b..c98d613904d1 100644 --- a/packages/website/src/components/Editor/index.module.css +++ b/packages/website/src/components/Editor/index.module.css @@ -74,13 +74,6 @@ z-index: 1; } -.container-standalone { - display: flex; - flex-direction: row-reverse; - width: 100%; - height: 100vh; -} - .container-standalone playground-file-editor { height: 100%; }