You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
8.8 KiB
256 lines
8.8 KiB
import React, { Component } from "react"; |
|
import Navbar from "../Home/Navbar/index"; |
|
import Footer from "../Home/Footer/index"; |
|
import VoiceBox from "./VoiceBox/index.js"; |
|
import VideoBox from "./VideoBox/index"; |
|
import PDF from "./PDF/index"; |
|
import PowerPoint from "./PowerPoint/index"; |
|
import Links from "./Links/index"; |
|
import SubjectsDropdown from "./SubjectsDropdown/index"; |
|
import BookContent from "./BookContent/index"; |
|
import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined"; |
|
|
|
import { connect } from "react-redux"; |
|
import { qr } from "~/Redux/actions"; |
|
|
|
import exit from "../../assets/icons/exit.svg"; |
|
import sciense_7 from "../../assets/images/sciense-7.png"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
|
|
class QR extends Component { |
|
state = { |
|
theme: true, |
|
zoom: [10, 10], |
|
}; |
|
|
|
handleZoom = (type) => { |
|
if (type === "increase") { |
|
this.setState((prevState) => ({ |
|
zoom: |
|
prevState.zoom[0] === 18 |
|
? prevState.zoom |
|
: [prevState.zoom[0] + 2, prevState.zoom[1] - 2], |
|
})); |
|
} else { |
|
this.setState((prevState) => ({ |
|
zoom: |
|
prevState.zoom[0] === 6 |
|
? prevState.zoom |
|
: [prevState.zoom[0] - 2, prevState.zoom[1] + 2], |
|
})); |
|
} |
|
}; |
|
render() { |
|
const { QR, qrList } = this.props; |
|
const fontSize = { |
|
desktop: { |
|
sidebar: { |
|
h1: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, |
|
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, |
|
div: |
|
window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, |
|
}, |
|
content: { |
|
h1: |
|
window.innerWidth > maxDesktopSize |
|
? this.state.zoom[0] * 2 |
|
: window.innerWidth / (this.state.zoom[1] * 7), |
|
p: |
|
window.innerWidth > maxDesktopSize |
|
? this.state.zoom[0] * 1.4 |
|
: window.innerWidth / (this.state.zoom[1] * 12), |
|
h2: |
|
window.innerWidth > maxDesktopSize |
|
? this.state.zoom[0] * 1.2 |
|
: (window.innerWidth / this.state.zoom[1]) * 12, |
|
}, |
|
}, |
|
}; |
|
|
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<> |
|
<div className="qr d-flex flex-column"> |
|
<Navbar /> |
|
<div className="d-flex"> |
|
<section className="qr__sidebar d-flex flex-column p-2"> |
|
<header className="qr__sidebar--header d-flex"> |
|
<div className="qr__sidebar--header__right d-flex"> |
|
<img src={QR.image} alt={QR.title} /> |
|
</div> |
|
<div className="qr__sidebar--header__left d-flex flex-column"> |
|
<h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}> |
|
{QR.title} |
|
</h1> |
|
<h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}> |
|
{QR.subTitle} |
|
</h2> |
|
<div style={{ fontSize: fontSize.desktop.sidebar.div }}> |
|
شما در حال مطالعه <strong>صفحه {QR.sample.page}</strong>{" "} |
|
هستید. |
|
</div> |
|
<div style={{ fontSize: fontSize.desktop.sidebar.div }}> |
|
پیشرفت شما در مطالعه کتاب به{" "} |
|
<span>{QR.sample.percent} درصد</span> رسیده است. |
|
</div> |
|
</div> |
|
</header> |
|
<SubjectsDropdown /> |
|
<BookContent data={QR.data} /> |
|
</section> |
|
<section className="qr__content d-flex flex-column"> |
|
<header className="qr__content--header d-flex justify-content-end"> |
|
<div className="qr__content--header__tools d-flex"> |
|
<span |
|
className="d-flex justify-content-center align-items-center" |
|
onClick={() => |
|
this.setState({ theme: !this.state.theme }) |
|
} |
|
> |
|
<NightsStayOutlinedIcon |
|
style={{ |
|
fontSize: 20, |
|
color: this.state.theme ? "#7dc241" : "white", |
|
}} |
|
/> |
|
</span> |
|
<span |
|
className="d-flex justify-content-center align-items-center" |
|
onClick={() => this.handleZoom("increase")} |
|
> |
|
+ |
|
</span> |
|
<span |
|
className="d-flex justify-content-center align-items-center" |
|
onClick={() => this.handleZoom("decrease")} |
|
> |
|
- |
|
</span> |
|
</div> |
|
</header> |
|
{QR.data.map((item, i) => ( |
|
<Identifier fontSize={fontSize} data={item} key={i} /> |
|
))} |
|
</section> |
|
</div> |
|
</div> |
|
<Footer /> |
|
</> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<> |
|
<div className="mobile-qr d-flex flex-column"> |
|
<Navbar /> |
|
{qrList.length === 0 && qrList !== null ? ( |
|
<div className="d-flex flex-column"> |
|
<div className="d-flex justify-content-end">بازگشت</div> |
|
<h1>فایلی در این صفحه موجود نیست.</h1> |
|
</div> |
|
) : null} |
|
{qrList !== null ? ( |
|
<div className="d-flex pt-3"> |
|
<div className="mobile-qr__buttons d-flex flex-column align-items-center"> |
|
<img src={exit} alt="خروج" /> |
|
<button>نمایش تمامی محتواها</button> |
|
<a |
|
href="#voice" |
|
className="mobile-qr__buttons--voice mobile-qr__buttons--media" |
|
></a> |
|
<a |
|
href="#video" |
|
className="mobile-qr__buttons--video mobile-qr__buttons--media" |
|
></a> |
|
<a |
|
href="#ppt" |
|
className="mobile-qr__buttons--ppt mobile-qr__buttons--media" |
|
></a> |
|
<a |
|
href="#pdf" |
|
className="mobile-qr__buttons--pdf mobile-qr__buttons--media" |
|
></a> |
|
<a |
|
href="#links" |
|
className="mobile-qr__buttons--attachment mobile-qr__buttons--media" |
|
></a> |
|
</div> |
|
<div className="mobile-qr__content d-flex flex-column"> |
|
{qrList.map((item, i) => ( |
|
<Identifier data={item} key={i} /> |
|
))} |
|
</div> |
|
</div> |
|
) : null} |
|
{qrList === null ? ( |
|
<div className="d-flex flex-column align-items-center"> |
|
<div className="d-flex justify-content-end">بازگشت</div> |
|
<h1 className="align-center">404</h1> |
|
</div> |
|
) : null} |
|
</div> |
|
</> |
|
) : null} |
|
</> |
|
); |
|
} |
|
} |
|
|
|
export default connect( |
|
(state) => ({ |
|
qrList: state.qr.list, |
|
}), |
|
{} |
|
)(QR); |
|
|
|
QR.defaultProps = { |
|
QR: { |
|
id: 1, |
|
image: sciense_7, |
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
subTitle: "پایه ششم ابتدایی", |
|
date: new Date(), |
|
sample: { |
|
page: 67, |
|
percent: 60, |
|
}, |
|
}, |
|
}; |
|
|
|
const Identifier = (props) => { |
|
return ( |
|
<> |
|
{props.data.type === "p" ? ( |
|
<p |
|
style={{ |
|
fontSize: |
|
window.innerWidth > 1250 ? props.fontSize.desktop.content.p : "", |
|
}} |
|
> |
|
{props.data.text} |
|
</p> |
|
) : null} |
|
{props.data.type === "h1" ? ( |
|
<h1 |
|
style={{ |
|
fontSize: |
|
window.innerWidth > 1250 ? props.fontSize.desktop.content.h1 : "", |
|
}} |
|
> |
|
{props.data.text} |
|
</h1> |
|
) : null} |
|
{props.data.type === "voice" ? ( |
|
<VoiceBox fontSize={props.fontSize} data={props.data} /> |
|
) : null} |
|
{props.data.type === "video" ? ( |
|
<VideoBox fontSize={props.fontSize} data={props.data} /> |
|
) : null} |
|
{props.data.type === "pdf" ? <PDF data={props.data} /> : null} |
|
{props.data.type === "ppt" ? <PowerPoint data={props.data} /> : null} |
|
{props.data.type === "links" ? <Links data={props.data} /> : null} |
|
</> |
|
); |
|
};
|
|
|