Skip to content

Commit 650bf45

Browse files
nitzanonitzano
authored
feat: 24 allow to show only some of the buttons 1 (#25)
* add * dev * change * update * change * format * options * show * change * docs: showButtons * story * more * buttons * spacing * show less * horiz * broken * re render * typo * bug * delete * use user only for set * start * fi * debug * text * format * fix * fix * no border
1 parent 6f30c18 commit 650bf45

19 files changed

Lines changed: 225 additions & 182 deletions

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,6 @@ dist-ssr
3232
!.yarn/sdks
3333
!.yarn/versions
3434

35-
dist
35+
dist
36+
37+
vite.config.timestamp*.mjs

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ yarn add react-reading-panel
8282
| `lineHeightDefaultSize` | line height default size | `1rem` |
8383
| `lineHeightsStep` | line height step size | 1 |
8484
| `lineHeightUnits` | line height units | `px` |
85+
| `showButtons` | show only some of the buttons | shows everything |
8586

8687

8788
## Color Setting

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"vite-plugin-dts": "^2.3.0"
8383
},
8484
"lint-staged": {
85-
"*.ts[x]": [
85+
"src/**/*.{ts,tsx}": [
8686
"eslint --fix",
8787
"prettier --write"
8888
]

‎src/components/ReadingPanel/ReadingPanel.stories.tsx‎

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,55 +9,56 @@ const meta: Meta<typeof ReadingPanel> = {
99
};
1010

1111
export default meta;
12+
1213
type Story = StoryObj<typeof ReadingPanel>;
1314

15+
const ReadingPanelTemplate: Story = {
16+
render: ({ ...args }) => {
17+
return (
18+
<>
19+
<ReadingPanel {...args} targetClass="sample" />
20+
<div className="sample" style={{ marginTop: 100 }}>
21+
Lorem ipsum dolor sit amet. Id consequuntur labore sed iste omnis aut
22+
ratione internos aut ducimus voluptas. Nam quia adipisci et quam
23+
laborum sed deserunt aliquid qui consequatur quia et autem inventore
24+
ut impedit galisum et cupiditate libero. Qui galisum Quis ea laborum
25+
ullam est sequi cumque in molestiae eius. Est omnis voluptates a alias
26+
aliquid in similique unde a cumque similique non debitis amet aut
27+
ullam autem et repellat quae.
28+
</div>
29+
</>
30+
);
31+
},
32+
};
33+
1434
export const Primary: Story = {
15-
args: {},
16-
render: () => (
17-
<>
18-
<ReadingPanel targetId="sample"></ReadingPanel>
19-
<div>
20-
<p id="sample" style={{ userSelect: "none", maxWidth: "400px" }}>
21-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
22-
eiusmod tempor incididunt ut labore et dolore magna aliqua.
23-
Pellentesque habitant morbi tristique senectus et netus et malesuada
24-
fames. Ultrices neque ornare aenean euismod elementum nisi quis.
25-
Euismod elementum nisi quis eleifend quam adipiscing. Est ante in nibh
26-
mauris cursus. Morbi tristique senectus et netus et malesuada fames ac
27-
turpis. Vitae purus faucibus ornare suspendisse. In nisl nisi
28-
scelerisque eu ultrices vitae auctor eu. Purus viverra accumsan in
29-
nisl nisi scelerisque eu ultrices vitae. Ultrices gravida dictum fusce
30-
ut. At quis risus sed vulputate odio. Nisl tincidunt eget nullam non.
31-
Malesuada fames ac turpis egestas sed tempus.
32-
</p>
33-
</div>
34-
</>
35-
),
35+
...ReadingPanelTemplate,
36+
};
37+
38+
export const StartOpen: Story = {
39+
...ReadingPanelTemplate,
40+
args: {
41+
settings: {
42+
startOpen: true,
43+
},
44+
},
3645
};
3746

3847
export const Vertical: Story = {
39-
args: {},
40-
render: () => (
41-
<>
42-
<ReadingPanel
43-
targetId="sample"
44-
settings={{ direction: "vertical" }}
45-
></ReadingPanel>
46-
<div>
47-
<p id="sample" style={{ userSelect: "none", maxWidth: "400px" }}>
48-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
49-
eiusmod tempor incididunt ut labore et dolore magna aliqua.
50-
Pellentesque habitant morbi tristique senectus et netus et malesuada
51-
fames. Ultrices neque ornare aenean euismod elementum nisi quis.
52-
Euismod elementum nisi quis eleifend quam adipiscing. Est ante in nibh
53-
mauris cursus. Morbi tristique senectus et netus et malesuada fames ac
54-
turpis. Vitae purus faucibus ornare suspendisse. In nisl nisi
55-
scelerisque eu ultrices vitae auctor eu. Purus viverra accumsan in
56-
nisl nisi scelerisque eu ultrices vitae. Ultrices gravida dictum fusce
57-
ut. At quis risus sed vulputate odio. Nisl tincidunt eget nullam non.
58-
Malesuada fames ac turpis egestas sed tempus.
59-
</p>
60-
</div>
61-
</>
62-
),
48+
...ReadingPanelTemplate,
49+
args: {
50+
settings: {
51+
direction: "vertical",
52+
},
53+
},
54+
};
55+
56+
export const Partial: Story = {
57+
...ReadingPanelTemplate,
58+
args: {
59+
settings: {
60+
startOpen: true,
61+
showButtons: ["increase_font_size", "change_colors"],
62+
},
63+
},
6364
};

‎src/components/ReadingPanel/ReadingPanel.styles.ts‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
11
import styled from "styled-components";
22
import { PanelDirection } from "./settings/settings.types";
33

4-
5-
export const PanelButton = styled.div`
6-
7-
8-
cursor: pointer;
9-
height: 35px;
10-
width: 35px;
11-
border-radius: 50%;
12-
background: #e2e1e1;
4+
export const PanelButton = styled.button`
5+
height: 35px;
6+
width: 35px;
7+
border-radius: 50%;
8+
border: initial;
9+
background: #e2e1e1;
1310
color: black;
1411
font-size: 1rem;
1512
display: flex;
1613
justify-content: center;
1714
align-items: center;
1815
`;
1916

20-
21-
export const Container = styled.div<{ direction?: PanelDirection}>`
17+
export const Container = styled.div<{ direction?: PanelDirection }>`
2218
display: flex;
23-
flex-direction: ${props => props.direction === 'vertical' ? 'column' : 'row'};
19+
flex-direction: ${(props) =>
20+
props.direction === "vertical" ? "column" : "row"};
2421
align-items: center;
2522
background: white;
2623
padding: 5px 2px;

‎src/components/ReadingPanel/ReadingPanel.tsx‎

Lines changed: 48 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { VscColorMode } from "react-icons/vsc";
1313
import { Container, PanelButton } from "./ReadingPanel.styles";
1414
import { changeColorTheme } from "./colors/change-color-theme.util";
1515
import { decreaseFont } from "./font-size/decrease-font.util";
16-
import { increseFont } from "./font-size/increase-font.util";
16+
import { increaseFont } from "./font-size/increase-font.util";
1717
import { decreaseLetterSpacing } from "./letter-spacing/decrease-letter-spacing.util";
1818
import { increaseLetterSpacing } from "./letter-spacing/increase-letter-spacing.util";
1919
import { decreaseLineHeight } from "./line-height/decrease-line-height.util";
@@ -35,6 +35,9 @@ export function ReadingPanel({
3535
const [settings, setSettings] = useState<Settings>(defaultSettings);
3636
const [isOpen, setIsOpen] = useState<boolean>(settings.startOpen);
3737

38+
const { showButtons } = settings;
39+
console.debug(`render! renderSettings=${JSON.stringify(settings, null, 2)}`);
40+
3841
useEffect(() => {
3942
if (targetClass) {
4043
const htmlCollection: HTMLCollectionOf<Element> =
@@ -48,8 +51,15 @@ export function ReadingPanel({
4851

4952
useEffect(() => {
5053
if (userSettings) {
51-
const newSettings = merge(settings, userSettings);
54+
const newSettings = merge({}, defaultSettings, userSettings);
55+
if (userSettings.showButtons) {
56+
newSettings.showButtons = userSettings.showButtons;
57+
}
5258
setSettings(newSettings);
59+
setIsOpen(newSettings.startOpen);
60+
} else {
61+
setSettings(defaultSettings);
62+
setIsOpen(defaultSettings.startOpen);
5363
}
5464
}, [userSettings]);
5565

@@ -66,7 +76,7 @@ export function ReadingPanel({
6676

6777
const handleFontIncrease = () => {
6878
elements?.forEach((el) =>
69-
increseFont(el, settings.fontSizeUnits, settings.fontSizeStep)
79+
increaseFont(el, settings.fontSizeUnits, settings.fontSizeStep)
7080
);
7181
};
7282

@@ -152,27 +162,41 @@ export function ReadingPanel({
152162

153163
{isOpen && (
154164
<>
155-
<PanelButton onClick={handleFontIncrease}>
156-
<MdTextIncrease></MdTextIncrease>
157-
</PanelButton>
158-
<PanelButton onClick={handleFontDecrease}>
159-
<MdTextDecrease></MdTextDecrease>
160-
</PanelButton>
161-
<PanelButton onClick={handleLineHeightIncrease}>
162-
<AiOutlineMenu></AiOutlineMenu>
163-
</PanelButton>
164-
<PanelButton onClick={handleLineHeightDecrease}>
165-
<IoMenuOutline></IoMenuOutline>
166-
</PanelButton>
167-
<PanelButton onClick={handleColorChange}>
168-
<VscColorMode></VscColorMode>
169-
</PanelButton>
170-
<PanelButton>
171-
<FaExpandAlt onClick={handleLetterSpacingIncrease}></FaExpandAlt>
172-
</PanelButton>
173-
<PanelButton onClick={handleLetterSpacingDecrease}>
174-
<ImShrink2></ImShrink2>
175-
</PanelButton>
165+
{showButtons.includes("increase_font_size") && (
166+
<PanelButton onClick={handleFontIncrease}>
167+
<MdTextIncrease></MdTextIncrease>
168+
</PanelButton>
169+
)}
170+
{showButtons.includes("decrease_font_size") && (
171+
<PanelButton onClick={handleFontDecrease}>
172+
<MdTextDecrease></MdTextDecrease>
173+
</PanelButton>
174+
)}
175+
{showButtons.includes("increase_line_height") && (
176+
<PanelButton onClick={handleLineHeightIncrease}>
177+
<AiOutlineMenu></AiOutlineMenu>
178+
</PanelButton>
179+
)}
180+
{showButtons.includes("decrease_line_height") && (
181+
<PanelButton onClick={handleLineHeightDecrease}>
182+
<IoMenuOutline></IoMenuOutline>
183+
</PanelButton>
184+
)}
185+
{showButtons.includes("change_colors") && (
186+
<PanelButton onClick={handleColorChange}>
187+
<VscColorMode></VscColorMode>
188+
</PanelButton>
189+
)}
190+
{showButtons.includes("increase_letter_spacing") && (
191+
<PanelButton>
192+
<FaExpandAlt onClick={handleLetterSpacingIncrease}></FaExpandAlt>
193+
</PanelButton>
194+
)}
195+
{showButtons.includes("decrease_letter_spacing") && (
196+
<PanelButton onClick={handleLetterSpacingDecrease}>
197+
<ImShrink2></ImShrink2>
198+
</PanelButton>
199+
)}
176200
</>
177201
)}
178202
</Container>

‎src/components/ReadingPanel/colors/change-color-theme.util.ts‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { ColorSettings, Theme } from "../settings/settings.types";
22

3-
export function changeColorTheme(element: HTMLElement, currentTheme: Theme, colorSettings: ColorSettings) {
4-
if (!element) throw new Error('no element')
3+
export function changeColorTheme(
4+
element: HTMLElement,
5+
currentTheme: Theme,
6+
colorSettings: ColorSettings
7+
) {
8+
if (!element) throw new Error("no element");
59

6-
if (currentTheme === 'light') {
7-
element.style.background = colorSettings.bgDarkColor;
8-
element.style.color = colorSettings.fgDarkColor;
9-
} else {
10-
element.style.background = colorSettings.bgLightColor;
11-
element.style.color = colorSettings.bgDarkColor;
12-
}
13-
}
10+
if (currentTheme === "light") {
11+
element.style.background = colorSettings.bgDarkColor;
12+
element.style.color = colorSettings.fgDarkColor;
13+
} else {
14+
element.style.background = colorSettings.bgLightColor;
15+
element.style.color = colorSettings.bgDarkColor;
16+
}
17+
}

‎src/components/ReadingPanel/font-size/decrease-font.util.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { getStyleProp } from "../utils/get-style-prop.util";
22

3-
export function decreaseFont(element: HTMLElement, fontUnits: string, fontChange: number ) {
4-
const style = getStyleProp(element, "font-size");
3+
export function decreaseFont(
4+
element: HTMLElement,
5+
fontUnits: string,
6+
fontChange: number
7+
) {
8+
const style = getStyleProp(element, "font-size");
59
const fontSize = parseFloat(style);
610
element.style.fontSize = `${fontSize - fontChange}${fontUnits}`;
7-
}
11+
}

‎src/components/ReadingPanel/font-size/increase-font.util.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { getStyleProp } from "../utils/get-style-prop.util";
22

3-
export function increseFont(element: HTMLElement, fontUnits: string, fontChange: number ) {
3+
export function increaseFont(
4+
element: HTMLElement,
5+
fontUnits: string,
6+
fontChange: number
7+
) {
48
const style = getStyleProp(element, "font-size");
59
const fontSize = parseFloat(style);
610
element.style.fontSize = `${fontSize + fontChange}${fontUnits}`;
7-
}
11+
}

‎src/components/ReadingPanel/letter-spacing/decrease-letter-spacing.util.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
import { getStyleProp } from "../utils/get-style-prop.util";
22

3-
export function decreaseLetterSpacing(element: HTMLElement, letterSpacingUnits: string, letterSpacingStep: number, defaultLetterSpacing: string) {
3+
export function decreaseLetterSpacing(
4+
element: HTMLElement,
5+
letterSpacingUnits: string,
6+
letterSpacingStep: number,
7+
defaultLetterSpacing: string
8+
) {
49
const style = getStyleProp(element, "letter-spacing");
510
const styleValue = parseFloat(style);
611
if (!styleValue) {
712
element.style.letterSpacing = defaultLetterSpacing;
813
}
9-
element.style.letterSpacing = `${styleValue - letterSpacingStep}${letterSpacingUnits}`;
10-
}
14+
element.style.letterSpacing = `${
15+
styleValue - letterSpacingStep
16+
}${letterSpacingUnits}`;
17+
}

0 commit comments

Comments
 (0)