-import { createContext, useEffect, useState } from "react";
+import { createContext, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import "../../../../css/bulma.css";
import Table from "./pages/elements/Table";
import Tag from "./pages/elements/Tag";
import Title from "./pages/elements/Title";
+import Control from "./pages/form/Control";
+import Input from "./pages/form/Input";
+import File from "./pages/form/File";
+import Columns from "./pages/grid/Columns";
+import Grid from "./pages/grid/Grid";
+import Footer from "./pages/layout/Footer";
+import Hero from "./pages/layout/Hero";
+import Media from "./pages/layout/Media";
+import Section from "./pages/layout/Section";
const SUFFIX_TO_KIND = {
"-h": "hue",
other: <Other />,
generic: <Generic />,
skeleton: <Skeleton />,
+ // Elements
box: <Box />,
content: <Content />,
delete: <Delete />,
table: <Table />,
tag: <Tag />,
title: <Title />,
+ // Form
+ control: <Control />,
+ input: <Input />,
+ file: <File />,
+ // Grid
+ columns: <Columns />,
+ grid: <Grid />,
+ // Layout
+ footer: <Footer />,
+ hero: <Hero />,
+ media: <Media />,
+ section: <Section />,
};
const PAGE_IDS = [
"colors",
"table",
"tag",
"title",
+ "control",
+ "input",
+ "file",
+ "columns",
+ "grid",
+ "footer",
+ "hero",
+ "media",
+ "section",
];
export const CustomizerContext = createContext({
});
function App() {
+ const styleRef = useRef();
const initialContext = {
cssvars: {},
currentPage: "delete",
},
updateVar: (id, newValue) => {
setContext((context) => {
- const { start, unit, scope } = context.cssvars[id];
- const computedValue = `${newValue}${unit}`;
- const el = document.querySelector(scope);
+ // const { start, unit, scope } = context.cssvars[id];
+ // const computedValue = `${newValue}${unit}`;
+ // const el = document.querySelector(`#scope ${scope}`);
- if (start === newValue) {
- el.style.removeProperty(`--bulma-${id}`);
- } else {
- el.style.setProperty(`--bulma-${id}`, computedValue);
- }
+ // if (start === newValue) {
+ // el.style.removeProperty(`--bulma-${id}`);
+ // } else {
+ // el.style.setProperty(`--bulma-${id}`, computedValue);
+ // }
return {
...context,
table: window.getComputedStyle(document.querySelector(".table")),
tag: window.getComputedStyle(document.querySelector(".tag")),
title: window.getComputedStyle(document.querySelector(".title")),
+ file: window.getComputedStyle(document.querySelector(".file")),
+ input: window.getComputedStyle(document.querySelector(".input")),
+ columns: window.getComputedStyle(document.querySelector(".columns")),
+ grid: window.getComputedStyle(document.querySelector(".grid")),
+ footer: window.getComputedStyle(document.querySelector(".footer")),
+ hero: window.getComputedStyle(document.querySelector(".hero")),
+ media: window.getComputedStyle(document.querySelector(".media")),
+ section: window.getComputedStyle(document.querySelector(".section")),
};
const cssvars = {};
} else if (key.startsWith("title")) {
scope = ".title";
original = styles.title.getPropertyValue(`--bulma-${key}`);
+ } else if (key.startsWith("file")) {
+ scope = ".file";
+ original = styles.file.getPropertyValue(`--bulma-${key}`);
+ } else if (key.startsWith("input")) {
+ scope = ".input";
+ original = styles.input.getPropertyValue(`--bulma-${key}`);
+ } else if (key.startsWith("columns")) {
+ scope = ".columns";
+ original = styles.columns.getPropertyValue(`--bulma-${key}`);
+ } else if (key.startsWith("grid")) {
+ scope = ".grid";
+ original = styles.grid.getPropertyValue(`--bulma-${key}`);
+ } else if (key.startsWith("footer")) {
+ scope = ".footer";
+ original = styles.footer.getPropertyValue(`--bulma-${key}`);
+ } else if (key.startsWith("hero")) {
+ scope = ".hero";
+ original = styles.hero.getPropertyValue(`--bulma-${key}`);
+ } else if (key.startsWith("media")) {
+ scope = ".media";
+ original = styles.media.getPropertyValue(`--bulma-${key}`);
+ } else if (key.startsWith("section")) {
+ scope = ".section";
+ original = styles.section.getPropertyValue(`--bulma-${key}`);
} else {
original = styles.root.getPropertyValue(`--bulma-${key}`);
}
});
}, []);
+ useEffect(() => {
+ const rules = {};
+
+ Object.values(context.cssvars).forEach((cssvar) => {
+ const { id, current, start, scope, unit } = cssvar;
+
+ if (current == start) {
+ return;
+ }
+
+ const computedValue = `${current}${unit}`;
+ const declaration = `--bulma-${id}: ${computedValue};`;
+
+ if (scope in rules) {
+ rules[scope].push(declaration);
+ } else {
+ rules[scope] = [declaration];
+ }
+ });
+
+ let content = "";
+
+ for (const [key, arr] of Object.entries(rules)) {
+ content += `${key} {`;
+ arr.forEach((item) => (content += item));
+ content += `}`;
+ }
+
+ if (styleRef) {
+ styleRef.current.innerHTML = content;
+ }
+ }, [context.cssvars]);
+
return (
<CustomizerContext.Provider value={context}>
+ <style ref={styleRef} />
<section className="section">
<div className="buttons">
{PAGE_IDS.map((pageId) => {
description: "The subtitle strong elements font weight",
},
],
+ control: [
+ { id: "control-radius", description: "The control elements border radius" },
+ {
+ id: "control-radius-small",
+ description: "The control elements small border radius",
+ },
+ {
+ id: "control-border-width",
+ description: "The control elements border width",
+ },
+ { id: "control-height", description: "The control elements height" },
+ {
+ id: "control-line-height",
+ description: "The control elements line height",
+ },
+ {
+ id: "control-padding-vertical",
+ description: "The control elements vertical padding",
+ },
+ {
+ id: "control-padding-horizontal",
+ description: "The control elements horizontal padding",
+ },
+ { id: "control-size", description: "The control elements font size" },
+ {
+ id: "control-focus-shadow-l",
+ description: "The control elements shadow Lightness when focused",
+ },
+ ],
file: [
{ id: "file-radius", description: "The file element border radius" },
{
id: "input-border-style",
description: "The input element main border style",
},
- {
- id: "input-border-width",
- description: "The input element main border width",
- },
{
id: "input-border-l",
description: "The input element main border Lightness",
projects / thirdparty / bulma.git / commitdiff
