Compare commits
36 Commits
Author | SHA1 | Date |
---|---|---|
|
b60ebdd143 | 3 years ago |
|
d7495fa874 | 4 years ago |
|
a0d2306a29 | 4 years ago |
|
b71677b31a | 4 years ago |
|
49b70126e6 | 4 years ago |
|
73301a5c50 | 4 years ago |
|
6c029f98b8 | 4 years ago |
|
e8ebd6db27 | 4 years ago |
|
c361a989c5 | 4 years ago |
|
3b2737b38e | 4 years ago |
|
e5adef5f51 | 4 years ago |
|
42b3ae6602 | 4 years ago |
|
18214bcf10 | 4 years ago |
|
fe9efa7128 | 4 years ago |
|
78f4b96430 | 4 years ago |
|
741b12261b | 4 years ago |
|
d5922b785e | 4 years ago |
|
dc75dd168a | 4 years ago |
|
2d399de16d | 4 years ago |
|
db4037dd07 | 4 years ago |
|
16cac55ec0 | 4 years ago |
|
d4aa9d6e64 | 4 years ago |
|
2de1868c05 | 4 years ago |
|
9e2ece9d48 | 4 years ago |
|
0eca3d003f | 4 years ago |
|
45d054571d | 5 years ago |
|
2a0ca26c8c | 5 years ago |
|
e69dcf99fb | 5 years ago |
|
7ddb740cb8 | 5 years ago |
|
6903112af5 | 5 years ago |
|
eb0dc1fdf2 | 5 years ago |
|
802d8d8c08 | 5 years ago |
|
715290696c | 5 years ago |
|
ce977a8d3a | 5 years ago |
|
1ba299c7a8 | 5 years ago |
|
481fa28274 | 5 years ago |
@ -1,26 +1,136 @@ |
||||
# react-epub-viewer |
||||
Epub Viewer for React.js powered by [Epub.js](https://github.com/futurepress/epub.js/) |
||||
<div align=center> |
||||
<br /> |
||||
<a href="https://github.com/altmshfkgudtjr/react-epub-viewer"><img src="https://user-images.githubusercontent.com/47492535/115026922-02c0be80-9efe-11eb-8c0c-40379e3249d1.png" alt="react_epub" style="zoom:50%;" /></a> |
||||
<br /> |
||||
<br /> |
||||
</div> |
||||
|
||||
# React-Epub-Viewer |
||||
|
||||
[](https://www.npmjs.com/package/react-epub-viewer) [](https://www.npmjs.com/package/react-epub-viewer) |
||||
|
||||
**React-Epub-Viewer** is Epub Viewer for React.js powered by [Epub.js](https://github.com/futurepress/epub.js/) v0.3 |
||||
|
||||
You can use React-Epub-Viewer together with React. |
||||
|
||||
## EpubViewer |
||||
|
||||
If you put ref as an argument, the module will register the viewer as an `iframe` in the ref. Also, there are some functions written in the ref by default. |
||||
|
||||
- [x] **`handleKeyPress`** Function |
||||
- [x] **`onLocationChange`** Function |
||||
- [x] **`selectionChanged`** Function |
||||
<br /> |
||||
|
||||
|
||||
|
||||
## ReactViewer |
||||
## Getting Started |
||||
|
||||
📢 **[Online demo](https://altmshfkgudtjr.github.io/react-epub-viewer)** |
||||
|
||||
**Features** |
||||
|
||||
- Table of contents |
||||
- Setting |
||||
- Font |
||||
- Font size |
||||
- Line height |
||||
- Viewer horizontal margin |
||||
- Viewer vertical margin |
||||
- Change viewer type |
||||
- Scrolled-doc [`true`/`false`] |
||||
- Spread [`true`/`false`] |
||||
|
||||
- Current Page Information |
||||
- Current chapter name |
||||
- Current page number |
||||
- Total page number |
||||
- Move page by arrow keys |
||||
- Highlight (Using `mouseup` event) |
||||
- Select highlight color |
||||
|
||||
|
||||
|
||||
### Getting the Code |
||||
|
||||
Install library from [NPM](https://www.npmjs.com/package/react-epub-viewer) |
||||
|
||||
```shell |
||||
npm install react-epub-viewer |
||||
``` |
||||
|
||||
Import viewer component |
||||
|
||||
```javascript |
||||
import { useRef } from 'react' |
||||
import { |
||||
EpubViewer, |
||||
ReactEpubViewer |
||||
} from 'react-epub-viewer' |
||||
|
||||
const App = () => { |
||||
const viewerRef = useRef(null); |
||||
|
||||
return ( |
||||
<div style={{ position: "relative", height: "100%" }}> |
||||
<ReactEpubViewer |
||||
url={'files/Alices Adventures in Wonderland.epub'} |
||||
ref={viewerRef} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default App |
||||
``` |
||||
|
||||
You can find other parameters in [Component Props](##Component Props). |
||||
|
||||
|
||||
|
||||
<br /> |
||||
|
||||
|
||||
|
||||
## Component Props |
||||
|
||||
You can see also Types for React-Epub-Viewer [here](https://github.com/altmshfkgudtjr/react-epub-viewer/blob/main/src/types/index.d.ts). |
||||
|
||||
|
||||
|
||||
### EpubViewer Props |
||||
|
||||
- `ref` [RefObject] Viewer Ref |
||||
|
||||
- `url` [string] - Epub file path |
||||
- `epubFileOptions` - [[object](http://epubjs.org/documentation/0.3/#book)] Epub file option (Epub.js BookOption) |
||||
- `epubOptions` - [[object](http://epubjs.org/documentation/0.3/#rendition)] Epub viewer option (Epub.js RenditionOption) |
||||
- `style` - [object] Epub wrapper style |
||||
- `location` - [string] Epub [CFI](http://idpf.org/epub/linking/cfi/epub-cfi.html) or Spine href |
||||
- `bookChanged` - [function] Run when epub book changed |
||||
- `renditionChanged` - [function] Run when rendition changed |
||||
- `pageChanged` - [function] Run when page changed |
||||
- `tocChanged` - [function] Run when toc changed |
||||
- `selectionChanged` - [function] Run when selected |
||||
- `loadingView` - [ReactNode] React Loading Component |
||||
|
||||
|
||||
|
||||
### ReactEpubViewer Props |
||||
|
||||
- `ref` [RefObject] Viewer Ref |
||||
|
||||
- `url` [string] - Epub file path |
||||
- `viewerLayout` - [object] Viewer layout values (header height, footer height, etc...) |
||||
- `viewerOption` - [object] Viewer option (whether is flow or is spread) |
||||
- `onBookInfoChange` - [function] Run when book information changed |
||||
- `onPageChange ` - [function] Run when page changed |
||||
- `onTocChange ` - [function] Run when toc changed |
||||
- `onSelection ` - [function] Run when selected |
||||
- `loadingView` - [ReactNode] React Loading Component |
||||
|
||||
|
||||
|
||||
<br /> |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
- [x] **`onTocChange`** Event |
||||
- [x] **`onBookInfoChange`** Event |
||||
- [x] **`onPageChange`** Event |
||||
- [x] **`onSelection`** Event |
||||
- Fire with `mouseup` event |
||||
- [x] Custom Loading Component |
||||
|
||||
|
@ -1,37 +1,48 @@ |
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'); |
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"); |
||||
|
||||
html, body { |
||||
scroll-behavior: auto; |
||||
-webkit-overflow-scrolling: touch; |
||||
font-size: 16px; |
||||
height: 100%; |
||||
html, |
||||
body { |
||||
scroll-behavior: auto; |
||||
-webkit-overflow-scrolling: touch; |
||||
font-size: 16px; |
||||
height: 100%; |
||||
} |
||||
|
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
button { |
||||
background: none; |
||||
border: none; |
||||
cursor: pointer; |
||||
background: none; |
||||
border: none; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
|
||||
|
||||
* { |
||||
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: auto; |
||||
font-weight: 400; |
||||
-webkit-tap-highlight-color: rgba(0,0,0,0); |
||||
font-size: 1rem; |
||||
color: #333; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: auto; |
||||
font-weight: 400; |
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||
font-size: 1rem; |
||||
color: #009aa8; |
||||
} |
||||
|
||||
#root { |
||||
height : 100%; |
||||
} |
||||
height: 100%; |
||||
} |
||||
|
||||
.epub-container { |
||||
overflow-x: hidden !important; |
||||
} |
||||
|
||||
.epub-container::-webkit-scrollbar { |
||||
width: 0px; |
||||
background: transparent; |
||||
} |
||||
|
@ -0,0 +1,6 @@ |
||||
<?xml version='1.0' encoding='utf-8'?> |
||||
<container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" version="1.0"> |
||||
<rootfiles> |
||||
<rootfile full-path="content.opf" media-type="application/oebps-package+xml"/> |
||||
</rootfiles> |
||||
</container> |
@ -0,0 +1,153 @@ |
||||
<?xml version='1.0' encoding='utf-8'?> |
||||
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="uuid_id" version="2.0"> |
||||
<metadata xmlns:calibre="http://calibre.kovidgoyal.net/2009/metadata" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:opf="http://www.idpf.org/2007/opf" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> |
||||
<dc:title>جنگ و صلح</dc:title> |
||||
<dc:creator opf:role="aut" opf:file-as="Zare, Sajjad">Sajjad Zare</dc:creator> |
||||
<dc:identifier id="uuid_id" opf:scheme="uuid">3a1a915b-ed6e-4916-8a47-bce9deeb7c85</dc:identifier> |
||||
<dc:date>0101-01-01T00:00:00+00:00</dc:date> |
||||
<dc:contributor opf:role="bkp">calibre (3.21.0) [https://calibre-ebook.com]</dc:contributor> |
||||
<dc:language>fa</dc:language> |
||||
<dc:identifier opf:scheme="calibre">3a1a915b-ed6e-4916-8a47-bce9deeb7c85</dc:identifier> |
||||
<meta name="calibre:timestamp" content="2021-07-31T11:53:39.697000+00:00"/> |
||||
<meta name="calibre:title_sort" content="جنگ و صلح"/> |
||||
<meta name="calibre:author_link_map" content="{"Sajjad Zare": ""}"/> |
||||
</metadata> |
||||
<manifest> |
||||
<item href="index_split_000.html" id="id265" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_001.html" id="id264" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_002.html" id="id263" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_003.html" id="id262" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_004.html" id="id261" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_005.html" id="id260" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_006.html" id="id259" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_007.html" id="id258" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_008.html" id="id257" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_009.html" id="id256" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_010.html" id="id255" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_011.html" id="id254" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_012.html" id="id253" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_013.html" id="id252" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_014.html" id="id251" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_015.html" id="id250" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_016.html" id="id249" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_017.html" id="id248" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_018.html" id="id247" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_019.html" id="id246" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_020.html" id="id245" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_021.html" id="id244" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_022.html" id="id243" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_023.html" id="id242" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_024.html" id="id241" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_025.html" id="id240" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_026.html" id="id239" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_027.html" id="id238" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_028.html" id="id237" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_029.html" id="id236" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_030.html" id="id235" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_031.html" id="id234" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_032.html" id="id233" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_033.html" id="id232" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_034.html" id="id231" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_035.html" id="id230" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_036.html" id="id229" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_037.html" id="id228" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_038.html" id="id227" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_039.html" id="id226" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_040.html" id="id225" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_041.html" id="id224" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_042.html" id="id223" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_043.html" id="id222" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_044.html" id="id221" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_045.html" id="id220" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_046.html" id="id219" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_047.html" id="id218" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_048.html" id="id217" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_049.html" id="id216" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_050.html" id="id215" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_051.html" id="id214" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_052.html" id="id213" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_053.html" id="id212" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_054.html" id="id211" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_055.html" id="id210" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_056.html" id="id29" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_057.html" id="id28" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_058.html" id="id27" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_059.html" id="id26" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_060.html" id="id25" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_061.html" id="id24" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_062.html" id="id23" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_063.html" id="id22" media-type="application/xhtml+xml"/> |
||||
<item href="index_split_064.html" id="id21" media-type="application/xhtml+xml"/> |
||||
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/> |
||||
<item href="page_styles.css" id="page_css" media-type="text/css"/> |
||||
<item href="stylesheet.css" id="css" media-type="text/css"/> |
||||
</manifest> |
||||
<spine toc="ncx" page-progression-direction="rtl"> |
||||
<itemref idref="id265"/> |
||||
<itemref idref="id264"/> |
||||
<itemref idref="id263"/> |
||||
<itemref idref="id262"/> |
||||
<itemref idref="id261"/> |
||||
<itemref idref="id260"/> |
||||
<itemref idref="id259"/> |
||||
<itemref idref="id258"/> |
||||
<itemref idref="id257"/> |
||||
<itemref idref="id256"/> |
||||
<itemref idref="id255"/> |
||||
<itemref idref="id254"/> |
||||
<itemref idref="id253"/> |
||||
<itemref idref="id252"/> |
||||
<itemref idref="id251"/> |
||||
<itemref idref="id250"/> |
||||
<itemref idref="id249"/> |
||||
<itemref idref="id248"/> |
||||
<itemref idref="id247"/> |
||||
<itemref idref="id246"/> |
||||
<itemref idref="id245"/> |
||||
<itemref idref="id244"/> |
||||
<itemref idref="id243"/> |
||||
<itemref idref="id242"/> |
||||
<itemref idref="id241"/> |
||||
<itemref idref="id240"/> |
||||
<itemref idref="id239"/> |
||||
<itemref idref="id238"/> |
||||
<itemref idref="id237"/> |
||||
<itemref idref="id236"/> |
||||
<itemref idref="id235"/> |
||||
<itemref idref="id234"/> |
||||
<itemref idref="id233"/> |
||||
<itemref idref="id232"/> |
||||
<itemref idref="id231"/> |
||||
<itemref idref="id230"/> |
||||
<itemref idref="id229"/> |
||||
<itemref idref="id228"/> |
||||
<itemref idref="id227"/> |
||||
<itemref idref="id226"/> |
||||
<itemref idref="id225"/> |
||||
<itemref idref="id224"/> |
||||
<itemref idref="id223"/> |
||||
<itemref idref="id222"/> |
||||
<itemref idref="id221"/> |
||||
<itemref idref="id220"/> |
||||
<itemref idref="id219"/> |
||||
<itemref idref="id218"/> |
||||
<itemref idref="id217"/> |
||||
<itemref idref="id216"/> |
||||
<itemref idref="id215"/> |
||||
<itemref idref="id214"/> |
||||
<itemref idref="id213"/> |
||||
<itemref idref="id212"/> |
||||
<itemref idref="id211"/> |
||||
<itemref idref="id210"/> |
||||
<itemref idref="id29"/> |
||||
<itemref idref="id28"/> |
||||
<itemref idref="id27"/> |
||||
<itemref idref="id26"/> |
||||
<itemref idref="id25"/> |
||||
<itemref idref="id24"/> |
||||
<itemref idref="id23"/> |
||||
<itemref idref="id22"/> |
||||
<itemref idref="id21"/> |
||||
</spine> |
||||
<guide/> |
||||
</package> |
@ -0,0 +1 @@ |
||||
application/epub+zip |
@ -0,0 +1,12 @@ |
||||
@page { |
||||
margin-bottom: 5pt; |
||||
margin-top: 5pt; |
||||
} |
||||
@font-face { |
||||
font-family: "Nazanin"; |
||||
src: url(/react-epub-viewer/css/Nazanin.woff); |
||||
} |
||||
@font-face { |
||||
font-family: "Sans"; |
||||
src: url(/react-epub-viewer/css/IRANSansWebFaNum.woff); |
||||
} |
@ -0,0 +1,56 @@ |
||||
.block_ { |
||||
text-align: center; |
||||
} |
||||
.block_1 { |
||||
font-weight: bold; |
||||
text-align: center; |
||||
} |
||||
.block_2 { |
||||
font-weight: bold; |
||||
page-break-after: avoid; |
||||
page-break-inside: avoid; |
||||
text-align: center; |
||||
} |
||||
.block_3 { |
||||
text-align: right; |
||||
} |
||||
.block_4 { |
||||
font-weight: bold; |
||||
text-align: left; |
||||
} |
||||
.block_5 { |
||||
text-align: left; |
||||
} |
||||
.block_6 { |
||||
text-align: right; |
||||
} |
||||
.block_7 { |
||||
font-weight: bold; |
||||
page-break-after: avoid; |
||||
page-break-inside: avoid; |
||||
text-align: center; |
||||
} |
||||
.block_8 { |
||||
font-weight: bold; |
||||
text-align: right; |
||||
} |
||||
.block_9 { |
||||
font-weight: bold; |
||||
text-align: right; |
||||
} |
||||
.block_10 { |
||||
font-weight: normal; |
||||
page-break-after: avoid; |
||||
page-break-inside: avoid; |
||||
text-align: center; |
||||
} |
||||
.calibre { |
||||
direction: rtl; |
||||
text-align: right; |
||||
} |
||||
.calibre2 { |
||||
font-style: italic; |
||||
} |
||||
.text_ { |
||||
font-weight: bold; |
||||
} |
After Width: | Height: | Size: 973 B |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 7.1 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 351 B |
@ -0,0 +1,109 @@ |
||||
import { useState, useEffect } from "react"; |
||||
import "../../../components/style/colorsComponents.scss"; |
||||
import "../../../components/style/chosecolor.scss"; |
||||
import PalletColorOutline from "../../image/PalletColorOutline.svg"; |
||||
import PalletColorbold from "../../image/PalletColorBold.svg"; |
||||
// import Chosecolor from "./Colors/chosecolor";
|
||||
import { |
||||
ButtonDropdown, |
||||
DropdownToggle, |
||||
DropdownMenu, |
||||
DropdownItem, |
||||
} from "reactstrap"; |
||||
|
||||
const Colors = (props) => { |
||||
const { setcolor, color, readyColors } = props; |
||||
const [localColorControl, localColorControlSetter] = useState(true); |
||||
|
||||
const [dropdownOpen, setOpen] = useState(false); |
||||
const toggle = () => setOpen(!dropdownOpen); |
||||
const [isChecked, setIsChecked] = useState(false); |
||||
// const idofelement = readyColors.map((item) => item.id);
|
||||
const colorMoodHandler = () => { |
||||
setIsChecked(!isChecked); |
||||
if (Number(localStorage.getItem("colorId")) > 3) { |
||||
setcolor(Number(localStorage.getItem("colorId")) - 3); |
||||
localStorage.setItem( |
||||
"colorId", |
||||
Number(localStorage.getItem("colorId")) - 3 |
||||
); |
||||
} else { |
||||
setcolor(Number(localStorage.getItem("colorId")) + 3); |
||||
localStorage.setItem( |
||||
"colorId", |
||||
Number(localStorage.getItem("colorId")) + 3 |
||||
); |
||||
} |
||||
}; |
||||
|
||||
const changeColorHandler = (id) => { |
||||
localStorage.setItem("colorId", id); |
||||
setcolor(id); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
if (localStorage.getItem("colorId") !== color && localColorControl) { |
||||
localStorage.setItem("colorId", 1); |
||||
localColorControlSetter(false); |
||||
} |
||||
}); |
||||
|
||||
const darkMood = readyColors.slice(0, 3); |
||||
|
||||
const lightMood = readyColors.slice(3); |
||||
|
||||
return ( |
||||
<> |
||||
<label class="switch"> |
||||
<input type="checkbox" onChange={colorMoodHandler} /> |
||||
<span class="slider round"></span> |
||||
</label> |
||||
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}> |
||||
<DropdownToggle> |
||||
<div> |
||||
<img |
||||
src={dropdownOpen ? PalletColorbold : PalletColorOutline} |
||||
className="palette-icon" |
||||
alt="icon" |
||||
/> |
||||
</div> |
||||
</DropdownToggle> |
||||
<DropdownMenu> |
||||
{isChecked ? ( |
||||
<> |
||||
{darkMood.map((item) => ( |
||||
<DropdownItem> |
||||
<button |
||||
onClick={() => changeColorHandler(item.id)} |
||||
id="red-btn-d" |
||||
style={{ backgroundColor: item.bgColor, color: item.color }} |
||||
className={"btn-color"} |
||||
> |
||||
الف |
||||
</button> |
||||
</DropdownItem> |
||||
))} |
||||
</> |
||||
) : ( |
||||
<> |
||||
{lightMood.map((item) => ( |
||||
<DropdownItem> |
||||
<button |
||||
onClick={() => changeColorHandler(item.id)} |
||||
id="red-btn-d" |
||||
style={{ backgroundColor: item.bgColor, color: item.color }} |
||||
className={"btn-color"} |
||||
> |
||||
الف |
||||
</button> |
||||
</DropdownItem> |
||||
))} |
||||
</> |
||||
)} |
||||
</DropdownMenu> |
||||
</ButtonDropdown> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Colors; |
@ -0,0 +1,64 @@ |
||||
// import React, { useState } from "react";
|
||||
import "../../../components/style/fontsize.scss"; |
||||
|
||||
function ButtonIncrement(props) { |
||||
return ( |
||||
<p |
||||
type="button" |
||||
outline |
||||
onClick={props.onClickFunc} |
||||
style={{ padding: "0px 5px", color: "#009AA8" }} |
||||
> |
||||
+ |
||||
</p> |
||||
); |
||||
} |
||||
|
||||
function ButtonDecrement(props) { |
||||
return ( |
||||
<p |
||||
type="button" |
||||
outline |
||||
onClick={props.onClickFunc} |
||||
style={{ padding: "0px 5px", color: "#009AA8" }} |
||||
> |
||||
- |
||||
</p> |
||||
); |
||||
} |
||||
|
||||
function Display(props) { |
||||
return <label style={{ color: "#009AA8" }}>{props.message}</label>; |
||||
} |
||||
|
||||
const Fontsize = (props) => { |
||||
const { bookStyle, setBookStyle } = props; |
||||
// const [countersize, setCounter ] = useState(1)
|
||||
const incrementCounter = () => { |
||||
if (bookStyle.fontSize !== 20) { |
||||
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 }); |
||||
} else { |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
let decrementCounter = () => { |
||||
if (bookStyle.fontSize !== 10) { |
||||
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 }); |
||||
} else { |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<div className="nav-fontBtn"> |
||||
<nav> |
||||
<ButtonIncrement onClickFunc={incrementCounter} /> |
||||
<Display message={bookStyle.fontSize} /> |
||||
<ButtonDecrement onClickFunc={decrementCounter} /> |
||||
</nav> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Fontsize; |
@ -0,0 +1,33 @@ |
||||
import React from "react"; |
||||
import "../../../style/fonts.scss"; |
||||
import { DropdownItem } from "reactstrap"; |
||||
|
||||
const Fonts = (props) => { |
||||
const { setBookStyle, bookStyle, dropdownOpen, setDropdownOpen } = props; |
||||
|
||||
const changeFontStyle = (id) => { |
||||
setDropdownOpen(!dropdownOpen) |
||||
|
||||
if (id === 1) { |
||||
setBookStyle({ ...bookStyle, fontFamily: "Sans" }); |
||||
} else { |
||||
setBookStyle({ ...bookStyle, fontFamily: "Nazanin" }); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<DropdownItem className="button-body-fontFamily mb-1" onClick={() => changeFontStyle(1)}> |
||||
<button>سانس</button> |
||||
</DropdownItem> |
||||
<DropdownItem className="button-body-fontFamily" onClick={() => changeFontStyle(2)}> |
||||
<button>نازنین</button> |
||||
</DropdownItem> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Fonts; |
||||
|
||||
// ()=>setBookStyle({fontFamily: bookStyle.fontFamily === "Nazanin" })
|
||||
// ()=>setBookStyle({fontFamily: bookStyle.fontFamily === "Sans" })
|
@ -0,0 +1,32 @@ |
||||
import React, { useState } from "react"; |
||||
import { Dropdown, DropdownToggle, DropdownMenu } from "reactstrap"; |
||||
import "../../../components/style/fontStyle.scss"; |
||||
import Fonts from "./Fonts/fonts"; |
||||
|
||||
const Fontstyle = (props) => { |
||||
const { bookStyle, setBookStyle } = props; |
||||
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false); |
||||
const toggle = () => { |
||||
|
||||
setDropdownOpen(!dropdownOpen) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<div> |
||||
<Dropdown isOpen={dropdownOpen} toggle={toggle}> |
||||
<DropdownToggle> |
||||
<button className="button-head-fontFamily"> |
||||
<p>{bookStyle.fontFamily === "Sans" ? "سانس" : "نازنین"}</p> |
||||
</button> |
||||
</DropdownToggle> |
||||
<DropdownMenu className="nav-menu-font"> |
||||
<Fonts setDropdownOpen={setDropdownOpen} dropdownOpen={dropdownOpen} bookStyle={bookStyle} setBookStyle={setBookStyle} /> |
||||
</DropdownMenu> |
||||
</Dropdown> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Fontstyle; |
@ -0,0 +1,77 @@ |
||||
import lineSpace from "../../image/lineSpace.svg"; |
||||
import line from "../../image/line.svg"; |
||||
import "../../../components/style/lineheight.scss"; |
||||
|
||||
function ButtonIncrement(props) { |
||||
return ( |
||||
<img |
||||
type="button" |
||||
outline |
||||
onClick={props.onClickFunc} |
||||
src={line} |
||||
alt="Icon" |
||||
className="line-space-icon-" |
||||
/> |
||||
); |
||||
} |
||||
|
||||
function ButtonDecrement(props) { |
||||
return ( |
||||
<img |
||||
type="button" |
||||
outline |
||||
onClick={props.onClickFunc} |
||||
src={lineSpace} |
||||
alt="Icon" |
||||
className="line-space-icon-" |
||||
/> |
||||
); |
||||
} |
||||
|
||||
function Display(props) { |
||||
return <label className="label">{props.message}</label>; |
||||
} |
||||
|
||||
const Lineheight = (props) => { |
||||
const { setBookStyle, bookStyle } = props; |
||||
// const [counterline, setcounterline] = useState(1);
|
||||
|
||||
const incrementCounter = () => { |
||||
if (bookStyle.lineHeight !== 2) { |
||||
setBookStyle({ |
||||
...bookStyle, |
||||
lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 + 0.2, |
||||
}); |
||||
} else { |
||||
return; |
||||
} |
||||
}; |
||||
let decrementCounter = () => { |
||||
if (bookStyle.lineHeight !== 1) { |
||||
setBookStyle({ |
||||
...bookStyle, |
||||
lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 - 0.2, |
||||
}); |
||||
} else { |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
// if (counterline <= 1) {
|
||||
// decrementCounter = () => setcounterline(1);
|
||||
// }
|
||||
|
||||
return ( |
||||
<> |
||||
<div className="nav-fontBtn"> |
||||
<nav style={{ width: "70px" }}> |
||||
<ButtonIncrement onClickFunc={incrementCounter} /> |
||||
<Display message={Math.round(bookStyle.lineHeight * 5) / 5} /> |
||||
<ButtonDecrement onClickFunc={decrementCounter} /> |
||||
</nav> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Lineheight; |
@ -0,0 +1,62 @@ |
||||
import React from "react"; |
||||
import { Collapse, Card } from "reactstrap"; |
||||
import Fontstyle from "./FontStyle/Fontstyle"; |
||||
import Colors from "./FontColor/colors"; |
||||
import FontSize from "./FontSize/fontsize"; |
||||
import LineHeight from "./LineHeight/lineheight"; |
||||
import "../style/setting.scss"; |
||||
// import OptionDropdown from "../option/Dropdown";
|
||||
|
||||
const Setting = (props) => { |
||||
const { |
||||
// BookStyle,
|
||||
// onSelect,
|
||||
isOpen, |
||||
// valueList,
|
||||
// defaultValue,
|
||||
// title,
|
||||
readyColors, |
||||
setIsChecked, |
||||
isChecked, |
||||
setcolor, |
||||
color, |
||||
bookStyle, |
||||
setBookStyle, |
||||
bookOption, |
||||
} = props; |
||||
return ( |
||||
<> |
||||
<Collapse isOpen={isOpen}> |
||||
<Card> |
||||
<nav className="nav-content"> |
||||
<nav className="nav-items"> |
||||
<Colors |
||||
setcolor={setcolor} |
||||
setIsChecked={setIsChecked} |
||||
isChecked={isChecked} |
||||
color={color} |
||||
readyColors={readyColors} |
||||
/> |
||||
</nav> |
||||
<nav className="nav-items"> |
||||
<LineHeight setBookStyle={setBookStyle} bookStyle={bookStyle} /> |
||||
<FontSize setBookStyle={setBookStyle} bookStyle={bookStyle} /> |
||||
<Fontstyle |
||||
setBookStyle={setBookStyle} |
||||
bookStyle={bookStyle} |
||||
/> |
||||
{/* <OptionDropdown |
||||
title="فونت" |
||||
defaultValue={fontFamily} |
||||
valueList={["Nazanin", "Sans"]} |
||||
onSelect={onSelectFontFamily} |
||||
/> */} |
||||
</nav> |
||||
</nav> |
||||
</Card> |
||||
</Collapse> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Setting; |