diff --git a/docs/_includes/global/customizer.html b/docs/_includes/global/customizer.html new file mode 100644 index 00000000..9638697f --- /dev/null +++ b/docs/_includes/global/customizer.html @@ -0,0 +1,39 @@ +
+ + + + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 1dab741f..ae4b32b0 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -19,15 +19,16 @@ {% include global/about.html %} - - - + + - + + {% include global/customizer.html %} diff --git a/docs/_react/bulma-customizer/src/App.css b/docs/_react/bulma-customizer/src/App.css index d090352b..bbfc2fce 100644 --- a/docs/_react/bulma-customizer/src/App.css +++ b/docs/_react/bulma-customizer/src/App.css @@ -39,7 +39,7 @@ font-size: 1rem; overflow: auto; padding: 1em 1.25em; - margin: 0.5rem -0.5rem; + margin: 0.5rem -0.5rem -0.5rem; } & > .language-css { diff --git a/docs/_react/bulma-customizer/src/App.jsx b/docs/_react/bulma-customizer/src/App.jsx index 0a0ff880..a7bdf459 100644 --- a/docs/_react/bulma-customizer/src/App.jsx +++ b/docs/_react/bulma-customizer/src/App.jsx @@ -142,12 +142,15 @@ const PAGE_IDS = { Layout: ["footer", "hero", "media", "section"], Export: ["export"], }; +const LOCAL_STORAGE_KEY = "bulma-customizer-vars" export const CustomizerContext = createContext({ isOpen: false, cssvars: {}, + saved: {}, currentTab: "", currentPage: "", + showExport: false, getVar: () => {}, changeTab: () => {}, changePage: () => {}, @@ -159,8 +162,10 @@ function App() { const initialContext = { isOpen: true, cssvars: {}, - currentTab: "Export", - currentPage: "export", + saved: {}, + currentTab: "Global Variables", + currentPage: "colors", + showExport: true, getVar: (id) => { return context.cssvars[id]; }, @@ -195,7 +200,17 @@ function App() { }); }, }; - const [context, setContext] = useState(initialContext); + const [context, setContext] = useState(() => { + const saved = localStorage.getItem(LOCAL_STORAGE_KEY); + + if (saved) { + const initialValue = JSON.parse(saved); + initialContext.cssvars = initialValue; + initialContext.saved = initialValue; + } + + return initialContext; + }); const handleTabChange = (event) => { event.preventDefault(); @@ -220,6 +235,17 @@ function App() { }); }; + const handleExport = (event) => { + event.preventDefault(); + setContext((context) => { + return { + ...context, + showExport: !context.showExport, + }; + }); + } + + // Get the computed styles of all cssvars useEffect(() => { const styles = { root: window.getComputedStyle(document.documentElement), @@ -282,6 +308,12 @@ function App() { return; } + // Keep the value saved in localStorage + if (key in context.saved) { + cssvars[key] = context.saved[key]; + return; + } + let original; let scope = ":root"; @@ -396,10 +428,12 @@ function App() { cssvars, }; }); - }, []); + }, [context.saved]); + // Update the styling when the cssvars change useEffect(() => { const rules = {}; + const storedVars = {} Object.values(context.cssvars).forEach((cssvar) => { const { id, current, start, scope, unit } = cssvar; @@ -408,6 +442,8 @@ function App() { return; } + storedVars[id] = cssvar; + const computedValue = `${current}${unit}`; const declaration = `--bulma-${id}: ${computedValue} !important;`; @@ -429,8 +465,14 @@ function App() { if (styleRef) { styleRef.current.innerHTML = content; } + + localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(storedVars)); }, [context.cssvars]); + // Computed values + const isExportAvailable = Object.values(context.cssvars).some(item => item.current != item.start); + + // Styles const tabsStyle = { "--bulma-tabs-link-active-color": "var(--bulma-primary)", }; @@ -440,6 +482,15 @@ function App() { [cn.open]: context.isOpen, }); + const controlsClass = classNames({ + [cn.controls]: true, + }); + + const exportClass = classNames({ + [cn.button]: true, + "button is-primary is-outlined": true, + }); + const buttonClass = classNames({ [cn.button]: true, "button is-primary": true, @@ -451,7 +502,7 @@ function App() { -
+