footer setting

demo
taha12322 3 years ago
parent 42b3ae6602
commit e5adef5f51
  1. 20
      src/components/style/footerStyle.scss
  2. 295
      src/containers/Footer.tsx
  3. 11
      src/containers/Header.tsx
  4. 15
      src/containers/Reader.tsx
  5. 82
      src/containers/menu/Option.tsx
  6. 4
      src/lib/svg/BookClose.js
  7. 4
      src/lib/svg/BookOpen.js
  8. 6
      src/lib/svg/ScrollVertical.js
  9. 87
      src/slices/book.ts

@ -19,8 +19,14 @@
align-items: center;
margin-bottom: 5px;
.icon{
width: 25px;
margin-left: 1rem;
width: 30px;
padding: 4px 5px;
margin-left: 0.25rem;
cursor: pointer;
}
.active{
border-radius: 7px;
background-color: #009aa8;
}
}
}
@ -31,14 +37,4 @@
}
.active{
border-radius: 20%;
width: 65px;
background-color: #009aa873;
}
.icon{
width: 65px;
}

@ -18,59 +18,73 @@ import "../components/style/footerStyle.scss";
const Footer = ({
// title,
nowPage,
totalPage,
viewType,
// onPageMove,
CountPage,
onClickDirection,
onClickViewType,
// totalPage,
//viewType,
// // onPageMove,
// CountPage,
// onClickDirection,
// onClickViewType,
onBookOptionChange,
bookOption,
}: Props) => {
//scroll onepage
//noscoroll onepage
//noscroll twopage
const [scrollToggle, setScrollToggle] = useState(false);
// const [settingIcons, setSettingIcons] = useState({
// scroll: 0,
// onePage: 0,
// twoPage: 0,
// noscroll: 0,
// });
// const changeActiveHandler = () => {
// if (toggleIcon === 1) {
// setSettingIcons({
// ...settingIcons,
// noscroll: 1,
// });
// } else if (toggleIcon === 2) {
// setSettingIcons({
// ...settingIcons,
// scroll: 1,
// });
// }
// };
// const [active, setActive] = useState(1);
// const [toggleIcon, setToggleIcon] = useState(false);
// const onToggle = () => {
// if (active === 1 || 2) {
// setActive(3);
// }
// setToggleIcon(false);
// };
let isMobile = window.innerWidth <= 768
//desctop setting
const [mode, setdesctopIsActive] = useState(2);
//desctop fnc
const desctopTwoPageHandler = () => {
setdesctopIsActive(2);
onBookOptionChange({
...bookOption,
flow: "paginated",
spread: "auto",
});
};
const desctopSinglePageHandler = () => {
setdesctopIsActive(1);
onBookOptionChange({
...bookOption,
flow: "paginated",
spread: "none",
});
};
const desctopScrollPageHandler = () => {
setdesctopIsActive(0);
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
spread: "none",
});
};
//mobile fnc
const mobilePageHandler = () => {
setdesctopIsActive(1);
onBookOptionChange({
...bookOption,
flow: "paginated",
spread: "none",
});
};
const mobileScrollPageHandler = () => {
setdesctopIsActive(0);
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
spread: "none",
});
};
let isMobile = window.innerWidth <= 768;
const color = {
notactive: "#221",
active: "#fff",
};
return (
<nav className="nav-footer"
<nav
className="nav-footer"
// style={{display: isMobile?"":"flex" }}
>
<nav className="footer-item">
<>
<nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${101}`} />
</nav>
@ -78,57 +92,108 @@ const Footer = ({
<ProgressBar value={nowPage} max={100} />
</nav>
{isMobile ? (
// --------- Mobile
<>
<nav className="icon" >
<BookCloseIcon onClick={() => onBookOptionChange({
<nav
onClick={mobilePageHandler}
className={`icon ${mode >= 1 ? "active" : ""} ms-3`}
>
<BookCloseIcon
color={mode >= 1 ? color.active : color.notactive}
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
})
}
/>
</nav>
<nav className="icon" >
<ScrollVerticalIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
<nav
onClick={() => mobileScrollPageHandler()}
className={`icon ${mode == 0 ? "active" : ""}`}
>
<ScrollVerticalIcon
color={mode == 0 ? color.active : color.notactive}
/>
</nav>
</>
) : (
// --------- Desctop
<>
<nav className="icon" >
<BookOpenIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
<nav
onClick={desctopTwoPageHandler}
className={`icon ${mode === 2 ? "active" : ""} ms-3`}
>
<BookOpenIcon
color={mode === 2 ? color.active : color.notactive}
/>
</nav>
<nav className="icon" >
<BookCloseIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
<nav
onClick={desctopSinglePageHandler}
className={`icon ${mode === 1 ? "active" : ""}`}
>
<BookCloseIcon
color={mode === 1 ? color.active : color.notactive}
/>
</nav>
<nav className="icon" >
<ScrollVerticalIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
<nav
onClick={desctopScrollPageHandler}
className={`icon ${mode === 0 ? "active" : ""}`}
>
<ScrollVerticalIcon
color={mode === 0 ? color.active : color.notactive}
/>
</nav>
</>
)}
</>
</nav>
<Button>خرید کتاب</Button>
</nav>
);
};
const Button = styled.button`
width: 100%;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
padding: 2px 2rem;
color: #fff;
font-family: inherit;
background-color: rgb(0, 154, 168);
`;
interface Props {
onBookOptionChange: any;
onClickViewType: any;
onClickDirection: any;
title: string;
nowPage: number;
totalPage: number;
CountPage: number;
bookOption: any;
viewType: any;
color?: any;
onPageMove: (type: "PREV" | "NEXT") => void;
}
export default Footer;
// const WrapperBtn = styled.div`
// position: fixed;
// left: 0;
// top: 60px;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: space-between;
// `;
{/* <nav className="nav-icon">
{
/* <nav className="nav-icon">
<div className="display-icon" style={{ cursor: "pointer" }}>
<nav
@ -183,53 +248,35 @@ const Footer = ({
</div>
</nav>
*/} </>
)}
</>
</nav>
{isMobile ? <Button>خرید کتاب</Button> : null}
</nav>
);
};
const Button = styled.button`
width: 100%;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
padding: 2px 2rem;
color: #fff;
font-family: inherit;
background-color: rgb(0, 154, 168);
`;
interface Props {
onBookOptionChange: any;
onClickViewType: any;
onClickDirection: any;
title: string;
nowPage: number;
totalPage: number;
CountPage: number;
bookOption: any;
viewType: any;
onPageMove: (type: "PREV" | "NEXT") => void;
*/
}
export default Footer;
// const [settingIcons, setSettingIcons] = useState({
// scroll: 0,
// onePage: 0,
// twoPage: 0,
// noscroll: 0,
// });
// const WrapperBtn = styled.div`
// position: fixed;
// left: 0;
// top: 60px;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: space-between;
// `;
// const changeActiveHandler = () => {
// if (toggleIcon === 1) {
// setSettingIcons({
// ...settingIcons,
// noscroll: 1,
// });
// } else if (toggleIcon === 2) {
// setSettingIcons({
// ...settingIcons,
// scroll: 1,
// });
// }
// };
// const [active, setActive] = useState(1);
// const [toggleIcon, setToggleIcon] = useState(false);
// const onToggle = () => {
// if (active === 1 || 2) {
// setActive(3);
// }
// setToggleIcon(false);
// };

@ -36,9 +36,6 @@ const Header = ({
onClick={onLearningToggle as any}
/>
</nav>
<nav>
{window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
</nav>
<nav
style={{
display: "flex",
@ -47,10 +44,14 @@ const Header = ({
}}
>
<Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<span style={{ color: "#fff", marginRight: "10px" }}>
{title ? "|" : ""}
</span>
{/* <BookInfo/> */}
<div>
<p style={{ margin: "0", color: "#fff" , width: '85px' }}>{nameBook}</p>
<p style={{ margin: "0", color: "#fff", width: "85px" }}>
{nameBook}
</p>
</div>
<Logo />
<Img

@ -63,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
resizeOnOrientationChange: true,
spread: "auto",
});
const [pPage, setpPage] = useState(0);
const [navControl, onNavToggle] = useMenu(navRef, 300);
const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
@ -105,6 +105,7 @@ const Reader = ({ url, loadingView }: Props) => {
* @param loc epubCFI or href
*/
const onLocationChange = (loc: string) => {
//console.log("onLocationChange", currentLocation);
if (!viewerRef.current) return;
viewerRef.current.setLocation(loc);
};
@ -116,7 +117,12 @@ const Reader = ({ url, loadingView }: Props) => {
const onPageMove = (type: "NEXT" | "PREV") => {
//loadFont();
const node = viewerRef.current;
if (!node || !node.prevPage || !node.nextPage) return;
if (!node || !node.prevPage || !node.nextPage) {
// console.log("no page found");
return;
}
//console.log("onPageMove", type, currentLocation);
//setpPage(currentLocation.currentPage)
type === "NEXT" && node.nextPage();
type === "PREV" && node.prevPage();
@ -148,7 +154,10 @@ const Reader = ({ url, loadingView }: Props) => {
* Change current page
* @param page Epub page
*/
const onPageChange = (page: Page) => dispatch(updateCurrentPage(page));
const onPageChange = (page: Page) => {
// console.log("onPageChange:", currentLocation, page.currentPage);
dispatch(updateCurrentPage(page));
};
/**
* ContextMenu on

@ -11,9 +11,9 @@ import ControlIconBtn from "components/option/ControlIconBtn";
import { BookStyle, BookFontFamily, BookFlow } from "types/book";
import { MenuControl } from "lib/hooks/useMenu";
import { BookOption } from "types/book";
import * as styles from "lib/styles/styles";
// import * as styles from "lib/styles/styles";
// import palette from 'lib/styles/palette'
import styled from "styled-components";
// import styled from "styled-components";
// import Setting from "components/Setting/setting";
@ -253,50 +253,50 @@ interface Props {
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: 0.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: 0.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;
`;
// const Btn = styled.button`
// position: relative;
// height: 100%;
// padding: 0 12px;
// dispayl: flex;
// align-items: center;
// justify-content: center;
// z-index: 0;
// transition: 0.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: 0.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 =
| "FontSize"
| "LineHeight"
| "MarginHorizontal"
| "MarginVertical";
type ViewType = {
active: boolean;
spread: boolean;
};
// type ViewType = {
// active: boolean;
// spread: boolean;
// };
export default React.forwardRef(Option);

@ -1,12 +1,12 @@
import * as React from "react";
function SvgBookClose(props) {
function SvgBookClose(color,props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
<defs>
<style>
{
".bookClose_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
`.bookClose_svg__cls-3{fill:none;stroke:${color.color};stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}`
}
</style>
</defs>

@ -1,12 +1,12 @@
import * as React from "react";
function SvgBookOpen(props) {
function SvgBookOpen(color,props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
<defs>
<style>
{
".bookOpen_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
`.bookOpen_svg__cls-3{fill:none;stroke:${color.color};stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}`
}
</style>
</defs>

@ -1,13 +1,11 @@
import * as React from "react";
function SvgScrollVertical(props) {
function SvgScrollVertical(color, props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
<defs>
<style>
{
".scrollVertical_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
}
{`.scrollVertical_svg__cls-3{fill:none;stroke:${color.color};stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}`}
</style>
</defs>
<g

@ -1,12 +1,11 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
// types
import Book from 'types/book'
import Page from 'types/page'
import Toc from 'types/toc'
import Highlight, { Color } from 'types/highlight'
import Book from "types/book";
import Page from "types/page";
import Toc from "types/toc";
import Highlight, { Color } from "types/highlight";
// lib
import palette from 'lib/styles/palette'
import palette from "lib/styles/palette";
/*
Initial State
@ -14,35 +13,35 @@ import palette from 'lib/styles/palette'
/** 초기 Book 상태 */
const initialBook: Book = {
coverURL: '',
title: '',
description: '',
published_date: '',
modified_date: '',
author: '',
publisher: '',
language: ''
}
coverURL: "",
title: "",
description: "",
published_date: "",
modified_date: "",
author: "",
publisher: "",
language: "",
};
/** 초기 CurrentPage 상태 */
const initialCurrentLocation: Page = {
chapterName: "-",
currentPage: 0,
totalPage: 0,
startCfi: '',
endCfi: '',
base: ''
}
startCfi: "",
endCfi: "",
base: "",
};
/** 초기 색상표 상태 */
const initialColorList: Color[] = [
{ name: 'قرمز', code: palette.red4 },
{ name: 'نارنجی', code: palette.orange4 },
{ name: 'زرد', code: palette.yellow4 },
{ name: 'سبز', code: palette.green4 },
{ name: 'آبی', code: palette.blue4 },
{ name: 'بنفش', code: palette.purple4 }
]
{ name: "قرمز", code: palette.red4 },
{ name: "نارنجی", code: palette.orange4 },
{ name: "زرد", code: palette.yellow4 },
{ name: "سبز", code: palette.green4 },
{ name: "آبی", code: palette.blue4 },
{ name: "بنفش", code: palette.purple4 },
];
const initialState: BookState = {
book: initialBook,
@ -50,14 +49,13 @@ const initialState: BookState = {
toc: [],
highlights: [],
colorList: initialColorList,
}
};
/*
Slice
*/
const bookSlice = createSlice({
name: 'book',
name: "book",
initialState,
reducers: {
/** Book 갱신 @dispatch */
@ -66,6 +64,16 @@ const bookSlice = createSlice({
},
/** CurrentPage 갱신 @dispatch */
updateCurrentPage(state, action: PayloadAction<Page>) {
if (
state.currentLocation.currentPage == action.payload.currentPage &&
action.payload.chapterName
) {
console.log(JSON.parse(JSON.stringify(state)));
// let c = current(state)
// let x = [...c.toc];
// console.log(x[1]);
alert("فصل بعد");
}
state.currentLocation = action.payload;
},
/** Book 초기화 @dispatch */
@ -82,25 +90,26 @@ const bookSlice = createSlice({
},
/** 하이라이트 추가 */
pushHighlight(state, action: PayloadAction<Highlight>) {
const check = state.highlights.filter(h => h.key === action.payload.key);
const check = state.highlights.filter(
(h) => h.key === action.payload.key
);
if (check.length > 0) return;
state.highlights.push(action.payload);
},
/** 하이라이트 갱신 */
updateHighlight(state, action: PayloadAction<Highlight>) {
const new_idx = action.payload.key;
const old_idx = state.highlights.map(h => h.key).indexOf(new_idx);
const old_idx = state.highlights.map((h) => h.key).indexOf(new_idx);
state.highlights.splice(old_idx, 1, action.payload);
},
/** 하이라이트 삭제 */
popHighlight(state, action: PayloadAction<string>) {
const idx = state.highlights.map(h => h.key).indexOf(action.payload);
const idx = state.highlights.map((h) => h.key).indexOf(action.payload);
state.highlights.splice(idx, 1);
}
}
},
},
});
export interface BookState {
book: Book;
currentLocation: Page;
@ -117,7 +126,7 @@ export const {
clearToc,
pushHighlight,
updateHighlight,
popHighlight
} = bookSlice.actions;
popHighlight,
} = bookSlice.actions;
export default bookSlice.reducer
export default bookSlice.reducer;

Loading…
Cancel
Save