taha
/
epub_Reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

slider pageNumber Button buy book Setting

Browse Source 
not complited collaps
demo
taha12322 3 years ago
parent 16cac55ec0
commit db4037dd07
15 changed files with 351 additions and 169 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 10
      public/index.html
  3. 5
      src/components/Setting/setting.js
  4. 2
      src/components/contextMenu/Item.tsx
  5. 6
      src/components/footer/Item.tsx
  6. 4
      src/components/footer/Wrapper.tsx
  7. 59
      src/components/footer/progressBar.js
  8. 4
      src/components/nav/NavItem.tsx
  9. 3
      src/components/note/Layout.tsx
  10. 1
      src/components/option/Layout.tsx
  11. 24
      src/containers/Footer.tsx
  12. 13
      src/containers/Header.tsx
  13. 29
      src/containers/Reader.tsx
  14. 208
      src/containers/menu/Option.tsx
  15. 5
      yarn.lock

1
package.json
Unescape View File

@ -42,6 +42,7 @@
"dependencies": { "dependencies": {
"@material-ui/core": "^4.12.3", "@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2", "@material-ui/icons": "^4.11.2",
"bootstrap": "^5.1.0",
"epubjs": "^0.3.88", "epubjs": "^0.3.88",
"node-sass": "4.14.1", "node-sass": "4.14.1",
"react-epub-viewer": "^0.1.7", "react-epub-viewer": "^0.1.7",

10
public/index.html
Unescape View File

@ -21,11 +21,17 @@
@font-face { @font-face {
font-family: "SansNum"; font-family: "SansNum";
src: url(../fonts/IRANSansWebFaNum.woff); src: url(%PUBLIC_URL%/css/IRANSansWebFaNum.woff);
} }
* , body { *,
body {
font-family: Sans, Nazanin; font-family: Sans, Nazanin;
} }
.nav-footer-item > div > span {
font-family: "SansNum" !important;
color: #000 !important;
}
</style> </style>
</head> </head>
<body> <body>

5
src/components/Setting/setting.js
Unescape View File

@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import { UncontrolledCollapse, Card } from 'reactstrap' import { UncontrolledCollapse, Card } from 'reactstrap'
import '../../../src/components/style/setting.scss'
import Fontstyle from './FontStyle/Fontstyle' import Fontstyle from './FontStyle/Fontstyle'
import Colors from './FontColor/colors' import Colors from './FontColor/colors'
import FontSize from './FontSize/fontsize' import FontSize from './FontSize/fontsize'
@ -8,6 +7,7 @@ import LineHeight from './LineHeight/lineheight'
const Setting = (props) => { const Setting = (props) => {
const { const {
isOpen,
setIsChecked, setIsChecked,
isChecked, isChecked,
countersize, countersize,
@ -22,8 +22,7 @@ const Setting = (props) => {
return ( return (
<> <>
<Card isOpen={isOpen}>
<Card>
<nav className="nav-content"> <nav className="nav-content">
<nav className="nav-items"> <nav className="nav-items">
<Colors <Colors

2
src/components/contextMenu/Item.tsx
Unescape View File

@ -13,7 +13,7 @@ const Container = styled.button`
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #ccc; color: #000;
transition: .1s ${styles.transition}; transition: .1s ${styles.transition};
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
border-radius: 6px; border-radius: 6px;

6
src/components/footer/Item.tsx
Unescape View File

@ -1,6 +1,6 @@
import styled from 'styled-components' import styled from "styled-components";
// lib // lib
import palette from 'lib/styles/palette' import palette from "lib/styles/palette";
const Item = ({ text }: Props) => { const Item = ({ text }: Props) => {
return ( return (
@ -8,7 +8,7 @@ const Item = ({ text }: Props) => {
<span>{text}</span> <span>{text}</span>
</Container> </Container>
); );
} };
const Container = styled.div` const Container = styled.div`
height: 100%; height: 100%;

4
src/components/footer/Wrapper.tsx
Unescape View File

@ -12,6 +12,10 @@ const Wrapper = styled.div`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: ${palette.white}; background-color: ${palette.white};
$ < span {
color: #000 ;
}
`; `;
export default Wrapper export default Wrapper

59
src/components/footer/progressBar.js
Unescape View File

@ -0,0 +1,59 @@
import React from 'react'
import { withStyles, makeStyles } from '@material-ui/core/styles'
import Slider from '@material-ui/core/Slider'
const useStyles = makeStyles((theme) => ({
root: {
width: 500 + theme.spacing(0),
},
margin: {
height: theme.spacing(3),
},
}))
const PrettoSlider = withStyles({
root: {
color: '#009AA8',
height: '5px',
padding: 0,
direction: 'rtl !important',
},
thumb: {
height: '15px',
width: '15px',
backgroundColor: '#fff',
border: '1.5px solid currentColor',
marginTop: '-6px',
marginLeft: '-11px',
direction: 'rtl !important',
'&:focus, &:hover, &$active': {
boxShadow: 'inherit',
direction: 'rtl !important',
},
},
active: {},
track: {
height: '5px',
borderRadius: 4,
direction: 'rtl !important',
},
rail: {
height: '5px',
borderRadius: 4,
},
})(Slider)
export default function ProgressBar(props) {
const classes = useStyles()
const { CountPage } = props;
return (
<div className={classes.root}>
<PrettoSlider
track="inverted"
value={CountPage}
max={100}
min={1}
marks={true}
/>
</div>
)
}

4
src/components/nav/NavItem.tsx
Unescape View File

@ -30,8 +30,8 @@ const Content = styled.button`
&:focus, &:hover { &:focus, &:hover {
& > span { & > span {
color: ${palette.blue3}; color: rgb(0, 154, 168);
margin-left: 12px; margin-right: 12px;
} }
} }

3
src/components/note/Layout.tsx
Unescape View File

@ -6,6 +6,9 @@ const Layout = styled.div`
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
padding: 24px 0; padding: 24px 0;
&:focus, &:hover < div { {
color: rgb(0, 154, 168);
}
`; `;
export default Layout export default Layout

1
src/components/option/Layout.tsx
Unescape View File

@ -3,6 +3,7 @@ import styled from 'styled-components'
const Wrapper = styled.div` const Wrapper = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding: 24px; padding: 24px;
direction: ltr;
`; `;
export default Wrapper export default Wrapper

24
src/containers/Footer.tsx
Unescape View File

@ -3,12 +3,31 @@ import Wrapper from "components/footer/Wrapper";
import Item from "components/footer/Item"; import Item from "components/footer/Item";
import MoveBtn from "components/footer/MoveBtn"; import MoveBtn from "components/footer/MoveBtn";
import styled from "styled-components"; import styled from "styled-components";
import ProgressBar from "../components/footer/progressBar";
const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => { const Footer = ({
title,
nowPage,
totalPage,
onPageMove,
CountPage,
}: Props) => {
return ( return (
<> <>
<Wrapper> <Wrapper>
{/* <Item text={`${nowPage} / ${totalPage}`} /> */} <nav
style={{
display: "flex",
justifyContent: "space-between",
padding: "0rem 2rem",
width: "100%",
}}
>
<nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${totalPage}`} />
</nav>
<ProgressBar CountPage={CountPage} />
</nav>
{window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null} {window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
</Wrapper> </Wrapper>
</> </>
@ -30,6 +49,7 @@ interface Props {
title: string; title: string;
nowPage: number; nowPage: number;
totalPage: number; totalPage: number;
CountPage: number;
onPageMove: (type: "PREV" | "NEXT") => void; onPageMove: (type: "PREV" | "NEXT") => void;
} }

13
src/containers/Header.tsx
Unescape View File

@ -1,9 +1,11 @@
// components // components
import { useState } from "react";
import styled from "styled-components"; import styled from "styled-components";
import Wrapper from "components/header/Wrapper"; import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout"; import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo"; import Logo from "components/header/Logo";
import Item from "components/footer/Item"; import Item from "components/footer/Item";
import Setting from "components/Setting/setting";
const Header = ({ const Header = ({
onNavToggle, onNavToggle,
@ -11,16 +13,22 @@ const Header = ({
onLearningToggle, onLearningToggle,
title, title,
}: Props) => { }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return ( return (
<>
<Wrapper> <Wrapper>
<Layout> <Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}> <AutoLayout style={{ backgroundColor: "#009AA8" }}>
<nav style={{ display: "flex", marginLeft: "16px" }}> <nav style={{ display: "flex", marginLeft: "16px" }}>
<nav onClick={toggle} style={{ display: "flex" }} id="toggler">
<Img <Img
src="/react-epub-viewer/images/Setting.svg" src="/react-epub-viewer/images/Setting.svg"
onClick={onOptionToggle as any} onClick={onOptionToggle as any}
alt="Logo" alt="Logo"
/> />
</nav>
<Img <Img
src="/react-epub-viewer/images/Edit.svg" src="/react-epub-viewer/images/Edit.svg"
alt="Logo" alt="Logo"
@ -39,8 +47,7 @@ const Header = ({
> >
<Item text={title as any} /> <Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>|</span> <span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<p style={{ margin: "0", color: "#fff" }}> <p style={{ margin: "0", color: "#fff" }}></p>
</p>
<Logo /> <Logo />
<Img <Img
src="/react-epub-viewer/images/menu.svg" src="/react-epub-viewer/images/menu.svg"
@ -54,6 +61,8 @@ const Header = ({
</AutoLayout> </AutoLayout>
</Layout> </Layout>
</Wrapper> </Wrapper>
<Setting isOpen={isOpen}/>
</>
); );
}; };

29
src/containers/Reader.tsx
Unescape View File

@ -63,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
}); });
const [navControl, onNavToggle] = useMenu(navRef, 300); const [navControl, onNavToggle] = useMenu(navRef, 300);
const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 5000); const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
const [learningControl, onLearningToggle] = useMenu(learningRef, 300); const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
const { const {
selection, selection,
@ -166,15 +166,19 @@ const Reader = ({ url, loadingView }: Props) => {
setsettingicon(!settingicon); setsettingicon(!settingicon);
}; };
const [CountPage, setCountPage] = useState(0);
return ( return (
<> <>
<ViewerWrapper> <ViewerWrapper>
<Header <Header
title={currentLocation.chapterName} title={currentLocation.chapterName}
onNavToggle={onNavToggle} onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle} onOptionToggle={onOptionToggle}
onLearningToggle={onLearningToggle} onLearningToggle={onLearningToggle}
/> />
<nav <nav
style={{ style={{
display: "flex", display: "flex",
@ -183,6 +187,8 @@ const Reader = ({ url, loadingView }: Props) => {
}} }}
> >
{window.innerWidth < 768 ? ( {window.innerWidth < 768 ? (
<>
<nav onClick={() => setCountPage(CountPage + 1)}>
<button <button
style={{ style={{
opacity: "0", opacity: "0",
@ -197,10 +203,19 @@ const Reader = ({ url, loadingView }: Props) => {
> >
<ArrowBackIosRoundedIcon /> <ArrowBackIosRoundedIcon />
</button> </button>
</nav>
</>
) : ( ) : (
<>
<nav
style={{ display: "flex" }}
onClick={() => setCountPage(CountPage + 1)}
>
<button onClick={() => onPageMove("NEXT")}> <button onClick={() => onPageMove("NEXT")}>
<ArrowBackIosRoundedIcon /> <ArrowBackIosRoundedIcon />
</button> </button>
</nav>
</>
)} )}
<nav style={{ overflow: "hidden" }}> <nav style={{ overflow: "hidden" }}>
@ -218,6 +233,8 @@ const Reader = ({ url, loadingView }: Props) => {
/> />
</nav> </nav>
{window.innerWidth < 768 ? ( {window.innerWidth < 768 ? (
<>
<nav onClick={() => setCountPage(CountPage - 1)}>
<button <button
style={{ style={{
opacity: "0", opacity: "0",
@ -231,14 +248,24 @@ const Reader = ({ url, loadingView }: Props) => {
> >
<ArrowForwardIosRoundedIcon /> <ArrowForwardIosRoundedIcon />
</button> </button>
</nav>
</>
) : ( ) : (
<>
<nav
style={{ display: "flex" }}
onClick={() => setCountPage(CountPage - 1)}
>
<button onClick={() => onPageMove("PREV")}> <button onClick={() => onPageMove("PREV")}>
<ArrowForwardIosRoundedIcon /> <ArrowForwardIosRoundedIcon />
</button> </button>
</nav>
</>
)} )}
</nav> </nav>
<Footer <Footer
CountPage={CountPage}
title={currentLocation.chapterName} title={currentLocation.chapterName}
nowPage={currentLocation.currentPage} nowPage={currentLocation.currentPage}
totalPage={currentLocation.totalPage} totalPage={currentLocation.totalPage}

208
src/containers/menu/Option.tsx
Unescape View File

@ -11,6 +11,10 @@ import ControlIconBtn from "components/option/ControlIconBtn";
import { BookStyle, BookFontFamily, BookFlow } from "types/book"; import { BookStyle, BookFontFamily, BookFlow } from "types/book";
import { MenuControl } from "lib/hooks/useMenu"; import { MenuControl } from "lib/hooks/useMenu";
import { BookOption } from "types/book"; import { BookOption } from "types/book";
import * as styles from 'lib/styles/styles'
import palette from 'lib/styles/palette'
import styled, { css } from 'styled-components'
import Setting from "components/Setting/setting"; import Setting from "components/Setting/setting";
const Option = ( const Option = (
@ -140,10 +144,94 @@ const Option = (
ref={ref} ref={ref}
> >
<OptionLayout> <OptionLayout>
<Setting/> <ControlIconBtnWrapper title="نحوه دیدن صفحه">
<ControlIconBtn
type="ScrollHorizontal"
alt="Horizontal View"
active={true}
isSelected={isScrollHorizontal}
onClick={() => onClickDirection("Horizontal")}
/>
<ControlIconBtn
type="ScrollVertical"
alt="Vertical View"
active={true}
isSelected={!isScrollHorizontal}
onClick={() => onClickDirection("Vertical")}
/>
</ControlIconBtnWrapper>
<ControlIconBtnWrapper title="حالت صفحه">
<ControlIconBtn
type="BookOpen"
alt="دو صفحه"
active={viewType.active}
isSelected={viewType.spread}
onClick={() => onClickViewType(true)}
/>
<ControlIconBtn
type="BookClose"
alt="تک صفحه"
active={viewType.active}
isSelected={!viewType.spread}
onClick={() => onClickViewType(false)}
/>
</ControlIconBtnWrapper>
<OptionDropdown
title="فونت"
defaultValue={fontFamily}
valueList={["Nazanin", "Sans"]}
onSelect={onSelectFontFamily}
/>
<OptionSlider
active={true}
title="اندازه"
minValue={8}
maxValue={36}
defaultValue={fontSize}
step={1}
onChange={(e) => onChangeSlider("FontSize", e)}
/>
<OptionSlider
active={true}
title="فاصله ی بین خط ها"
minValue={1}
maxValue={3}
defaultValue={lineHeight}
step={0.1}
onChange={(e) => onChangeSlider("LineHeight", e)}
/>
<OptionTitle>رنگ ها</OptionTitle>
<BtnWrapper>
<Btn>الف</Btn>
<Btn>الف</Btn>
<Btn>الف</Btn>
<Btn>الف</Btn>
</BtnWrapper>
<BtnWrapper>
<Btn>الف</Btn>
<Btn>الف</Btn>
<Btn>الف</Btn>
<Btn>الف</Btn>
</BtnWrapper>
{/* <OptionSlider
active={true}
title="Horizontal margin"
minValue={0}
maxValue={100}
defaultValue={marginHorizontal}
step={1}
onChange={(e) => onChangeSlider("MarginHorizontal", e)}
/> */}
{/* <OptionSlider
active={bookFlow === "paginated"}
title="Vertical margin"
minValue={0}
maxValue={100}
defaultValue={marginVertical}
step={1}
onChange={(e) => onChangeSlider("MarginVertical", e)}
/> */}
</OptionLayout> </OptionLayout>
</Wrapper> </Wrapper>
)} )}
</> </>
@ -161,6 +249,43 @@ interface Props {
onBookOptionChange: (bookOption: BookOption) => void; onBookOptionChange: (bookOption: BookOption) => void;
} }
const Btn = styled.button`
position: relative;
height: 100%;
padding: 0 12px;
dispayl: flex;
align-items: center;
justify-content: center;
z-index: 0;
transition: .3s ${styles.transition};
outline: none;
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: -1;
border-radius: 30px;
transition: .1s ${styles.transition};
background-color: rgb(0, 154, 168);
};
`;
const BtnWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px 0;
`;
const OptionTitle = styled.div`
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
`;
type SliderType = type SliderType =
| "FontSize" | "FontSize"
| "LineHeight" | "LineHeight"
@ -173,80 +298,3 @@ type ViewType = {
}; };
export default React.forwardRef(Option); export default React.forwardRef(Option);
{/* <ControlIconBtnWrapper title="View Direction">
<ControlIconBtn
type="ScrollHorizontal"
alt="Horizontal View"
active={true}
isSelected={isScrollHorizontal}
onClick={() => onClickDirection("Horizontal")}
/>
<ControlIconBtn
type="ScrollVertical"
alt="Vertical View"
active={true}
isSelected={!isScrollHorizontal}
onClick={() => onClickDirection("Vertical")}
/>
</ControlIconBtnWrapper>
<ControlIconBtnWrapper title="View Spread">
<ControlIconBtn
type="BookOpen"
alt="Two Page View"
active={viewType.active}
isSelected={viewType.spread}
onClick={() => onClickViewType(true)}
/>
<ControlIconBtn
type="BookClose"
alt="One Page View"
active={viewType.active}
isSelected={!viewType.spread}
onClick={() => onClickViewType(false)}
/>
</ControlIconBtnWrapper>
<OptionDropdown
title="Font"
defaultValue={fontFamily}
valueList={["Nazanin", "Sans"]}
onSelect={onSelectFontFamily}
/>
<OptionSlider
active={true}
title="Size"
minValue={8}
maxValue={36}
defaultValue={fontSize}
step={1}
onChange={(e) => onChangeSlider("FontSize", e)}
/>
<OptionSlider
active={true}
title="Line height"
minValue={1}
maxValue={3}
defaultValue={lineHeight}
step={0.1}
onChange={(e) => onChangeSlider("LineHeight", e)}
/>
<OptionSlider
active={true}
title="Horizontal margin"
minValue={0}
maxValue={100}
defaultValue={marginHorizontal}
step={1}
onChange={(e) => onChangeSlider("MarginHorizontal", e)}
/>
<OptionSlider
active={bookFlow === "paginated"}
title="Vertical margin"
minValue={0}
maxValue={100}
defaultValue={marginVertical}
step={1}
onChange={(e) => onChangeSlider("MarginVertical", e)}
/> */}

5
yarn.lock
Unescape View File

@ -3301,6 +3301,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.0.tgz#543ef8f44f4b9af67b0230f19508542fec38ef55"
integrity sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==
brace-expansion@^1.1.7: brace-expansion@^1.1.7:
version "1.1.11" version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"

Write Preview
Loading…
Cancel
Save