3 botton in footer finished

demo
taha12322 3 years ago
parent d5922b785e
commit 741b12261b
  1. 4
      src/components/style/footerStyle.scss
  2. 65
      src/containers/Footer.tsx
  3. 41
      src/containers/Reader.tsx
  4. 4
      src/containers/menu/Option.tsx

@ -0,0 +1,4 @@
.icons-disable {
opacity: 0.3;
cursor: auto;
}

@ -5,9 +5,15 @@ 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"; import ProgressBar from "../components/footer/progressBar";
import onePage from "../components/image/Document.svg"; import {
import twoPage from "../components/image/Pages.svg"; BookCloseIcon,
import { BookCloseIcon, BookOpenIcon, ScrollVerticalIcon } from "lib/svg"; BookOpenIcon,
ScrollVerticalIcon,
ScrollHorizontalIcon,
} from "lib/svg";
// import style
import "../components/style/footerStyle.scss";
const Footer = ({ const Footer = ({
// title, // title,
@ -15,12 +21,19 @@ const Footer = ({
totalPage, totalPage,
// onPageMove, // onPageMove,
CountPage, CountPage,
onClickDirection,
onClickViewType,
onBookOptionChange,
bookOption,
}: Props) => { }: Props) => {
const [Icon, setIcon] = useState(false); const [Icon, setIcon] = useState(false);
const changeIcone = () => { const changeIcone = () => {
setIcon(!Icon); setIcon(!Icon);
}; };
const [toggleIcon, setToggleIcon] = useState(true);
return ( return (
<> <>
<Wrapper> <Wrapper>
@ -39,10 +52,44 @@ const Footer = ({
<nav onClick={() => changeIcone()} className="nav-icon "> <nav onClick={() => changeIcone()} className="nav-icon ">
{window.innerWidth > 768 ? ( {window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}> <div className="display-icon" style={{ cursor: "pointer" }}>
<nav style={{ width: "65px" , display: 'flex' }}> <nav style={{ width: "65px", display: "flex" }}>
<BookOpenIcon /> <BookOpenIcon
<BookCloseIcon /> className={`${toggleIcon ? "icons-disable" : ""}`}
<ScrollVerticalIcon /> onClick={() => onClickViewType(true)}
/>
<BookCloseIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={() => onClickViewType(false)}
/>
{toggleIcon === true ? (
<nav
style={{ width: "65px" }}
onClick={() => setToggleIcon(false)}
>
<ScrollVerticalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "paginated",
})
}
/>
</nav>
) : (
<nav
style={{ width: "65px" }}
onClick={() => setToggleIcon(true)}
>
<ScrollHorizontalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
})
}
/>
</nav>
)}
</nav> </nav>
</div> </div>
) : null} ) : null}
@ -79,10 +126,14 @@ const Button = styled.button`
`; `;
interface Props { interface Props {
onBookOptionChange: any;
onClickViewType: any;
onClickDirection: any;
title: string; title: string;
nowPage: number; nowPage: number;
totalPage: number; totalPage: number;
CountPage: number; CountPage: number;
bookOption: any;
onPageMove: (type: "PREV" | "NEXT") => void; onPageMove: (type: "PREV" | "NEXT") => void;
} }

@ -93,7 +93,6 @@ const Reader = ({ url, loadingView }: Props) => {
const node = const node =
iframe && iframe.contentWindow && iframe.contentWindow.document; iframe && iframe.contentWindow && iframe.contentWindow.document;
// node && node.head && node.head.appendChild(new_style_element); // node && node.head && node.head.appendChild(new_style_element);
console.log(node);
}; };
const onBookInfoChange = (book: Book) => { const onBookInfoChange = (book: Book) => {
loadFont(); loadFont();
@ -168,6 +167,41 @@ const Reader = ({ url, loadingView }: Props) => {
// setsettingicon(!settingicon); // setsettingicon(!settingicon);
// }; // };
const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
const onClickDirection = (type: "Horizontal" | "Vertical") => {
if (type === "Horizontal") {
onBookOptionChange({
...bookOption,
flow: "paginated",
});
} else if (type === "Vertical") {
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
});
}
};
console.log(isScrollHorizontal)
const [viewType, setViewType] = useState({
spread: true,
});
const onClickViewType = (isSpread: boolean) => {
if (isSpread) {
setViewType({ ...viewType, spread: true });
onBookOptionChange({
...bookOption,
spread: "auto",
});
} else {
setViewType({ ...viewType, spread: false });
onBookOptionChange({
...bookOption,
spread: "none",
});
}
};
const [CountPage, setCountPage] = useState(0); const [CountPage, setCountPage] = useState(0);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -276,6 +310,10 @@ const Reader = ({ url, loadingView }: Props) => {
</nav> </nav>
<Footer <Footer
bookOption={bookOption}
onBookOptionChange={onBookOptionChange}
onClickViewType={onClickViewType}
onClickDirection={onClickDirection}
CountPage={CountPage} CountPage={CountPage}
title={currentLocation.chapterName} title={currentLocation.chapterName}
nowPage={currentLocation.currentPage} nowPage={currentLocation.currentPage}
@ -342,6 +380,7 @@ interface Props {
loadingView?: React.ReactNode; loadingView?: React.ReactNode;
isOpen?: any; isOpen?: any;
setIsOpen?: any; setIsOpen?: any;
setIsScrollHorizontal?: any;
} }
export default ReaderWrapper; export default ReaderWrapper;

@ -41,8 +41,8 @@ const Option = (
const [marginVertical, setMarginVertical] = useState<number>( const [marginVertical, setMarginVertical] = useState<number>(
bookStyle.marginVertical bookStyle.marginVertical
); );
const [isScrollHorizontal, setIsScrollHorizontal] = useState<boolean>(true); const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
const [viewType, setViewType] = useState<ViewType>({ const [viewType, setViewType] = useState({
active: true, active: true,
spread: true, spread: true,
}); });

Loading…
Cancel
Save