wip fix cache prasi loader
This commit is contained in:
Rizky
parent
00b1437ed6
commit
655bc0432d
|
|
@ -40,7 +40,7 @@ export const EdBase = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className={cx("flex flex-col flex-1", style)}>
|
||||
<div className="flex justify-between"></div>
|
||||
<div className="flex flex-1 items-stretch">
|
||||
<EdLeft />
|
||||
|
|
@ -66,3 +66,75 @@ export const EdBase = () => {
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const style = css`
|
||||
.toolbar-box {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-left: 1px solid #ececeb;
|
||||
border-right: 1px solid #ececeb;
|
||||
margin: 0px 0px 0px 5px;
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
margin-top: 1px;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.items {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin-left: 5px;
|
||||
color: #555;
|
||||
border-left: 1px solid transparent;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-right: 1px solid transparent;
|
||||
padding: 5px;
|
||||
border-radius: 0px;
|
||||
|
||||
&:hover {
|
||||
background: #ececeb;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-label {
|
||||
padding-left: 0px;
|
||||
margin-left: 0px;
|
||||
.items {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid black;
|
||||
|
||||
.items {
|
||||
color: #111;
|
||||
border-left: 1px solid #ececeb;
|
||||
.item {
|
||||
border-right: 1px solid #ececeb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { EdCompPicker } from "./panel/header/mid/comp-picker";
|
|||
import { EdPagePicker } from "./panel/header/mid/page-picker";
|
||||
import { TopBtn } from "./panel/header/top-btn";
|
||||
import { useGlobal } from "web-utils";
|
||||
import { ResponsiveToggle } from "./panel/header/right/responsive-toggle";
|
||||
|
||||
export const EdMid: FC<{}> = () => {
|
||||
const ed = useGlobal(EDGlobal, "EDITORF");
|
||||
|
|
@ -32,8 +33,9 @@ export const EdMid: FC<{}> = () => {
|
|||
<EdCompPicker />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center flex-1 justify-end">
|
||||
<label className="border-r border-r-slate-300 text-slate-400 flex items-center pr-1 mr-1">
|
||||
<div className="flex items-stretch flex-1 justify-end">
|
||||
{ed.mode}
|
||||
<label className=" text-slate-400 flex items-center pr-1">
|
||||
<div className=" px-1"> Zoom</div>
|
||||
<select
|
||||
value={ed.ui.zoom}
|
||||
|
|
@ -54,6 +56,9 @@ export const EdMid: FC<{}> = () => {
|
|||
)}
|
||||
</select>
|
||||
</label>
|
||||
<div className=" text-slate-400 flex items-center pr-1 ">
|
||||
<ResponsiveToggle />
|
||||
</div>
|
||||
<a href={`/vi/${params.site_id}/${params.page_id}`} target="_blank">
|
||||
<TopBtn style="slim" className="font-mono text-[9px]">
|
||||
PREVIEW
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export const EmptySite = {
|
|||
config: { api_url: "" },
|
||||
js: "",
|
||||
js_compiled: "",
|
||||
responsive: "" as "desktop" | "mobile",
|
||||
layout: {
|
||||
id: "--",
|
||||
snapshot: null as null | Uint8Array,
|
||||
|
|
@ -182,7 +183,7 @@ export const EDGlobal = {
|
|||
group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
|
||||
},
|
||||
ui: {
|
||||
zoom: localStorage.zoom || '100%',
|
||||
zoom: localStorage.zoom || "100%",
|
||||
should_render: false,
|
||||
side: { prop: true },
|
||||
layout: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
import { useGlobal } from "web-utils";
|
||||
import { w } from "../../../../../utils/types/general";
|
||||
import { ToolbarBox } from "../../../../../utils/ui/box";
|
||||
import { EDGlobal } from "../../../logic/ed-global";
|
||||
|
||||
export const ResponsiveToggle = () => {
|
||||
const c = useGlobal(EDGlobal, "EDITOR");
|
||||
const mode = c.mode;
|
||||
const activeModeClassName = "border-b-2 border-blue-500";
|
||||
return (
|
||||
<ToolbarBox
|
||||
className="flex"
|
||||
items={[
|
||||
{
|
||||
onClick() {
|
||||
c.mode = "mobile";
|
||||
w.isMobile = true;
|
||||
w.isDesktop = false;
|
||||
localStorage.setItem("prasi-editor-mode", "mobile");
|
||||
c.render();
|
||||
},
|
||||
className: cx(mode === "mobile" && activeModeClassName),
|
||||
content: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
fill="none"
|
||||
viewBox="0 0 15 15"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M4 2.5a.5.5 0 01.5-.5h6a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-6a.5.5 0 01-.5-.5v-10zM4.5 1A1.5 1.5 0 003 2.5v10A1.5 1.5 0 004.5 14h6a1.5 1.5 0 001.5-1.5v-10A1.5 1.5 0 0010.5 1h-6zM6 11.65a.35.35 0 100 .7h3a.35.35 0 100-.7H6z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
onClick() {
|
||||
c.mode = "desktop";
|
||||
w.isMobile = false;
|
||||
w.isDesktop = true;
|
||||
localStorage.setItem("prasi-editor-mode", "desktop");
|
||||
c.render();
|
||||
},
|
||||
className: cx(mode === "desktop" && activeModeClassName),
|
||||
content: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
fill="none"
|
||||
viewBox="0 0 15 15"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M1 3.25A.25.25 0 011.25 3h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.25a.25.25 0 01-.25-.25v-7.5zM1.25 2C.56 2 0 2.56 0 3.25v7.5C0 11.44.56 12 1.25 12h3.823l-.243 1.299a.55.55 0 00.54.651h4.26a.55.55 0 00.54-.651L9.927 12h3.823c.69 0 1.25-.56 1.25-1.25v-7.5C15 2.56 14.44 2 13.75 2H1.25zm7.76 10H5.99l-.198 1.05h3.416L9.01 12z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -4,8 +4,8 @@ import { g } from "../utils/global";
|
|||
import { dir } from "../utils/dir";
|
||||
|
||||
const cache = {
|
||||
dev: "",
|
||||
prod: "",
|
||||
dev: {} as Record<string, string>,
|
||||
prod: {} as Record<string, string>,
|
||||
};
|
||||
|
||||
export const _ = {
|
||||
|
|
@ -25,8 +25,12 @@ export const _ = {
|
|||
? JSON.stringify(req.query_parameters["url"])
|
||||
: "undefined";
|
||||
|
||||
if (!cache.dev) {
|
||||
cache.dev = `\
|
||||
const mode = req.query_parameters["dev"] ? "dev" : "prod";
|
||||
|
||||
if (!cache[mode][url]) {
|
||||
let src = "";
|
||||
if (mode === "dev") {
|
||||
src = `\
|
||||
(() => {
|
||||
const baseurl = new URL(location.href);
|
||||
baseurl.pathname = '';
|
||||
|
|
@ -45,8 +49,8 @@ export const _ = {
|
|||
},
|
||||
};
|
||||
})();`;
|
||||
|
||||
cache.prod = `\
|
||||
} else {
|
||||
src = `\
|
||||
(() => {
|
||||
const baseurl = new URL(location.href);
|
||||
baseurl.pathname = '';
|
||||
|
|
@ -59,13 +63,12 @@ export const _ = {
|
|||
apiEntry: ${JSON.stringify(getApiEntry())},
|
||||
};
|
||||
})();`;
|
||||
}
|
||||
|
||||
cache[mode][url] = src;
|
||||
}
|
||||
|
||||
if (req.query_parameters["dev"]) {
|
||||
res.send(cache.dev);
|
||||
} else {
|
||||
res.send(cache.prod);
|
||||
}
|
||||
res.send(cache[mode][url]);
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue