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 |
<div align=center> |
||||||
Epub Viewer for React.js powered by [Epub.js](https://github.com/futurepress/epub.js/) |
<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 |
<br /> |
||||||
- [x] **`onLocationChange`** Function |
|
||||||
- [x] **`selectionChanged`** Function |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 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 |
|
||||||
|
|
||||||
|
@ -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; |