Reza_ashrafi
3 years ago
parent
01e6d2e755
commit
1f83de3b97
32 changed files with 917 additions and 227 deletions
@ -1,55 +1,80 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> |
||||||
|
<meta |
||||||
|
name="viewport" |
||||||
|
content="width=device-width, initial-scale=1" |
||||||
|
user-scalable="false" |
||||||
|
/> |
||||||
|
<meta name="theme-color" content="#000000" /> |
||||||
|
<meta name="description" content="دانوین" /> |
||||||
|
<link |
||||||
|
href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" |
||||||
|
rel="stylesheet" |
||||||
|
/> |
||||||
|
<meta name="mobile-web-app-capable" content="yes" /> |
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> |
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" /> |
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> |
||||||
|
|
||||||
<head> |
<title>دانوین</title> |
||||||
<meta charset="utf-8" /> |
<!-- Google Tag Manager --> |
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> |
<script> |
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" /> |
// const arJson = require("./ar1.json"); |
||||||
<meta name="theme-color" content="#000000" /> |
// console.log(JSON.parse(arJson)); |
||||||
<meta name="description" content="دانوین" /> |
function t(val) { |
||||||
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" /> |
return val; |
||||||
<meta name="mobile-web-app-capable" content="yes" /> |
} |
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> |
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" /> |
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> |
|
||||||
|
|
||||||
<title>دانوین</title> |
(function (w, d, s, l, i) { |
||||||
<!-- Google Tag Manager --> |
w[l] = w[l] || []; |
||||||
<script>(function (w, d, s, l, i) { |
w[l].push({ |
||||||
w[l] = w[l] || []; w[l].push({ |
"gtm.start": new Date().getTime(), |
||||||
'gtm.start': |
event: "gtm.js", |
||||||
new Date().getTime(), event: 'gtm.js' |
}); |
||||||
}); var f = d.getElementsByTagName(s)[0], |
var f = d.getElementsByTagName(s)[0], |
||||||
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = |
j = d.createElement(s), |
||||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); |
dl = l != "dataLayer" ? "&l=" + l : ""; |
||||||
})(window, document, 'script', 'dataLayer', 'GTM-WVV8H9L');</script> |
j.async = true; |
||||||
<!-- End Google Tag Manager --> |
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; |
||||||
</head> |
f.parentNode.insertBefore(j, f); |
||||||
|
})(window, document, "script", "dataLayer", "GTM-WVV8H9L"); |
||||||
<body> |
</script> |
||||||
<!-- Google Tag Manager (noscript) --> |
<!-- End Google Tag Manager --> |
||||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVV8H9L" height="0" width="0" |
</head> |
||||||
style="display:none;visibility:hidden"></iframe></noscript> |
|
||||||
<!-- End Google Tag Manager (noscript) --> |
|
||||||
<div id="root"></div> |
|
||||||
<script> |
|
||||||
if ("serviceWorker" in navigator) { |
|
||||||
window.addEventListener("load", function () { |
|
||||||
navigator.serviceWorker |
|
||||||
.register("./serviceworker.js") |
|
||||||
.then((registration) => { |
|
||||||
// Registration was successful |
|
||||||
console.log( |
|
||||||
"ServiceWorker registration successful with scope: ", |
|
||||||
registration.scope |
|
||||||
); |
|
||||||
}) |
|
||||||
.catch((err) => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
}); |
|
||||||
} |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
|
|
||||||
|
<body> |
||||||
|
<!-- Google Tag Manager (noscript) --> |
||||||
|
<noscript |
||||||
|
><iframe |
||||||
|
src="https://www.googletagmanager.com/ns.html?id=GTM-WVV8H9L" |
||||||
|
height="0" |
||||||
|
width="0" |
||||||
|
style="display: none; visibility: hidden" |
||||||
|
></iframe |
||||||
|
></noscript> |
||||||
|
<!-- End Google Tag Manager (noscript) --> |
||||||
|
<div id="root"></div> |
||||||
|
<script> |
||||||
|
if ("serviceWorker" in navigator) { |
||||||
|
window.addEventListener("load", function () { |
||||||
|
navigator.serviceWorker |
||||||
|
.register("./serviceworker.js") |
||||||
|
.then((registration) => { |
||||||
|
// Registration was successful |
||||||
|
console.log( |
||||||
|
"ServiceWorker registration successful with scope: ", |
||||||
|
registration.scope |
||||||
|
); |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
const lang = localStorage.getItem("language"); |
||||||
|
</script> |
||||||
|
</body> |
||||||
</html> |
</html> |
||||||
@ -1,68 +1,68 @@ |
|||||||
import React, {useState} from 'react'; |
import React, { useState } from "react"; |
||||||
import Carousel from 'react-elastic-carousel'; |
import Carousel from "react-elastic-carousel"; |
||||||
import Video from '../../../QR/VideoBox/React-video-js-player/index'; |
import Video from "../../../QR/VideoBox/React-video-js-player/index"; |
||||||
import exit from '../../../../assets/icons/exit.svg'; |
import exit from "../../../../assets/icons/exit.svg"; |
||||||
|
|
||||||
import './index.scss'; |
import "./index.scss"; |
||||||
const Modal = (props) => { |
const Modal = (props) => { |
||||||
const [displayed, setDisplayed] = useState(props.first ? props.first : props.gallery[0]) |
const [displayed, setDisplayed] = useState( |
||||||
const {gallery, setModal} = props; |
props.first ? props.first : props.gallery[0] |
||||||
return( |
); |
||||||
|
const { gallery, setModal } = props; |
||||||
|
return ( |
||||||
<> |
<> |
||||||
{ |
{window.innerWidth > 1000 ? ( |
||||||
window.innerWidth > 1000 ? |
|
||||||
<section className="modal d-flex flex-column align-items-center justify-content-center"> |
<section className="modal d-flex flex-column align-items-center justify-content-center"> |
||||||
<img className="modal__exit" src={exit} alt="خروح" onClick={() => setModal(null)} /> |
<img |
||||||
|
className="modal__exit" |
||||||
|
src={exit} |
||||||
|
alt="خروح" |
||||||
|
onClick={() => setModal(null)} |
||||||
|
/> |
||||||
<div className="modal__display"> |
<div className="modal__display"> |
||||||
{ |
{displayed.type === "image" ? ( |
||||||
displayed.type === 'image' ? |
<img src={displayed.value} alt={window.t("عکس")} /> |
||||||
<img src={displayed.value} alt=window.t("عکس") /> : null |
) : null} |
||||||
} |
{displayed.type === "film" ? <Video /> : null} |
||||||
{ |
|
||||||
displayed.type === 'film' ? |
|
||||||
<Video /> : null |
|
||||||
} |
|
||||||
</div> |
</div> |
||||||
<footer className="modal__footer d-flex"> |
<footer className="modal__footer d-flex"> |
||||||
<Carousel |
<Carousel |
||||||
itemsToShow={4} |
itemsToShow={4} |
||||||
isRTL={true} |
isRTL={true} |
||||||
enableTilt={false} |
enableTilt={false} |
||||||
showArrows={true} |
showArrows={true} |
||||||
pagination={false} |
pagination={false} |
||||||
> |
> |
||||||
{gallery.map((item, i) => ( |
{gallery.map((item, i) => ( |
||||||
<Item |
<Item |
||||||
data={item} |
data={item} |
||||||
key={i} |
key={i} |
||||||
setDisplayed={setDisplayed} |
setDisplayed={setDisplayed} |
||||||
active={item === displayed} |
active={item === displayed} |
||||||
/> |
/> |
||||||
))} |
))} |
||||||
</Carousel> |
</Carousel> |
||||||
</footer> |
</footer> |
||||||
</section> : null |
</section> |
||||||
} |
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
}; |
||||||
|
|
||||||
export default Modal; |
export default Modal; |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
return( |
return ( |
||||||
<div className="modal-carousel-item"> |
<div className="modal-carousel-item"> |
||||||
{ |
{props.data.type === "image" ? ( |
||||||
props.data.type === 'image' ? |
<img src={props.data.value} alt={window.t("عکس")} /> |
||||||
<img src={props.data.value} alt=window.t("عکس") /> : null |
) : null} |
||||||
} |
{props.data.type === "film" ? <Video /> : null} |
||||||
{ |
<div |
||||||
props.data.type === 'film' ? |
style={{ border: props.active ? "4px solid #1BBC6E" : "" }} |
||||||
<Video /> : null |
className="modal-carousel-item__cover" |
||||||
} |
onClick={() => props.setDisplayed(props.data)} |
||||||
<div style={{ border: props.active ? '4px solid #1BBC6E' : '' }} className="modal-carousel-item__cover" onClick={() => props.setDisplayed(props.data)}> |
></div> |
||||||
|
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}
|
}; |
||||||
|
|||||||
Loading…
Reference in new issue