parent
							
								
									01e6d2e755
								
							
						
					
					
						commit
						1f83de3b97
					
				
				 32 changed files with 917 additions and 227 deletions
			
			
		@ -1,55 +1,80 @@ | 
				
			||||
<!DOCTYPE html> | 
				
			||||
<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> | 
				
			||||
  <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" /> | 
				
			||||
    <title>دانوین</title> | 
				
			||||
    <!-- Google Tag Manager --> | 
				
			||||
    <script> | 
				
			||||
      // const arJson = require("./ar1.json"); | 
				
			||||
      // console.log(JSON.parse(arJson)); | 
				
			||||
      function t(val) { | 
				
			||||
        return val; | 
				
			||||
      } | 
				
			||||
 | 
				
			||||
  <title>دانوین</title> | 
				
			||||
  <!-- Google Tag Manager --> | 
				
			||||
  <script>(function (w, d, s, l, i) { | 
				
			||||
      w[l] = w[l] || []; w[l].push({ | 
				
			||||
        'gtm.start': | 
				
			||||
          new Date().getTime(), event: 'gtm.js' | 
				
			||||
      }); var f = d.getElementsByTagName(s)[0], | 
				
			||||
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = | 
				
			||||
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); | 
				
			||||
    })(window, document, 'script', 'dataLayer', 'GTM-WVV8H9L');</script> | 
				
			||||
  <!-- End Google Tag Manager --> | 
				
			||||
</head> | 
				
			||||
      (function (w, d, s, l, i) { | 
				
			||||
        w[l] = w[l] || []; | 
				
			||||
        w[l].push({ | 
				
			||||
          "gtm.start": new Date().getTime(), | 
				
			||||
          event: "gtm.js", | 
				
			||||
        }); | 
				
			||||
        var f = d.getElementsByTagName(s)[0], | 
				
			||||
          j = d.createElement(s), | 
				
			||||
          dl = l != "dataLayer" ? "&l=" + l : ""; | 
				
			||||
        j.async = true; | 
				
			||||
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; | 
				
			||||
        f.parentNode.insertBefore(j, f); | 
				
			||||
      })(window, document, "script", "dataLayer", "GTM-WVV8H9L"); | 
				
			||||
    </script> | 
				
			||||
    <!-- End Google Tag Manager --> | 
				
			||||
  </head> | 
				
			||||
 | 
				
			||||
<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); | 
				
			||||
          }); | 
				
			||||
      }); | 
				
			||||
    } | 
				
			||||
  </script> | 
				
			||||
</body> | 
				
			||||
 | 
				
			||||
</html> | 
				
			||||
  <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> | 
				
			||||
 | 
				
			||||
@ -1,68 +1,68 @@ | 
				
			||||
import React, {useState} from 'react'; | 
				
			||||
import Carousel from 'react-elastic-carousel'; | 
				
			||||
import Video from '../../../QR/VideoBox/React-video-js-player/index'; | 
				
			||||
import exit from '../../../../assets/icons/exit.svg'; | 
				
			||||
import React, { useState } from "react"; | 
				
			||||
import Carousel from "react-elastic-carousel"; | 
				
			||||
import Video from "../../../QR/VideoBox/React-video-js-player/index"; | 
				
			||||
import exit from "../../../../assets/icons/exit.svg"; | 
				
			||||
 | 
				
			||||
import './index.scss'; | 
				
			||||
import "./index.scss"; | 
				
			||||
const Modal = (props) => { | 
				
			||||
  const [displayed, setDisplayed] = useState(props.first ? props.first : props.gallery[0]) | 
				
			||||
  const {gallery, setModal} = props; | 
				
			||||
  return( | 
				
			||||
  const [displayed, setDisplayed] = useState( | 
				
			||||
    props.first ? props.first : props.gallery[0] | 
				
			||||
  ); | 
				
			||||
  const { gallery, setModal } = props; | 
				
			||||
  return ( | 
				
			||||
    <> | 
				
			||||
      { | 
				
			||||
        window.innerWidth > 1000 ? | 
				
			||||
      {window.innerWidth > 1000 ? ( | 
				
			||||
        <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"> | 
				
			||||
            { | 
				
			||||
              displayed.type === 'image' ? | 
				
			||||
              <img src={displayed.value} alt=window.t("عکس") /> : null | 
				
			||||
            } | 
				
			||||
            { | 
				
			||||
              displayed.type === 'film' ? | 
				
			||||
              <Video /> : null | 
				
			||||
            } | 
				
			||||
            {displayed.type === "image" ? ( | 
				
			||||
              <img src={displayed.value} alt={window.t("عکس")} /> | 
				
			||||
            ) : null} | 
				
			||||
            {displayed.type === "film" ? <Video /> : null} | 
				
			||||
          </div> | 
				
			||||
          <footer className="modal__footer d-flex"> | 
				
			||||
            <Carousel | 
				
			||||
                itemsToShow={4} | 
				
			||||
                isRTL={true} | 
				
			||||
                enableTilt={false} | 
				
			||||
                showArrows={true} | 
				
			||||
                pagination={false} | 
				
			||||
              > | 
				
			||||
                {gallery.map((item, i) => ( | 
				
			||||
                  <Item | 
				
			||||
                    data={item} | 
				
			||||
                    key={i} | 
				
			||||
                    setDisplayed={setDisplayed} | 
				
			||||
                    active={item === displayed} | 
				
			||||
                  /> | 
				
			||||
                ))} | 
				
			||||
              </Carousel> | 
				
			||||
              itemsToShow={4} | 
				
			||||
              isRTL={true} | 
				
			||||
              enableTilt={false} | 
				
			||||
              showArrows={true} | 
				
			||||
              pagination={false} | 
				
			||||
            > | 
				
			||||
              {gallery.map((item, i) => ( | 
				
			||||
                <Item | 
				
			||||
                  data={item} | 
				
			||||
                  key={i} | 
				
			||||
                  setDisplayed={setDisplayed} | 
				
			||||
                  active={item === displayed} | 
				
			||||
                /> | 
				
			||||
              ))} | 
				
			||||
            </Carousel> | 
				
			||||
          </footer> | 
				
			||||
        </section> : null | 
				
			||||
      } | 
				
			||||
        </section> | 
				
			||||
      ) : null} | 
				
			||||
    </> | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
}; | 
				
			||||
 | 
				
			||||
export default Modal; | 
				
			||||
 | 
				
			||||
const Item = (props) => { | 
				
			||||
  return( | 
				
			||||
  return ( | 
				
			||||
    <div className="modal-carousel-item"> | 
				
			||||
      { | 
				
			||||
        props.data.type === 'image' ? | 
				
			||||
        <img src={props.data.value} alt=window.t("عکس") /> : null | 
				
			||||
      } | 
				
			||||
      { | 
				
			||||
        props.data.type === 'film' ? | 
				
			||||
        <Video /> : null | 
				
			||||
      } | 
				
			||||
      <div style={{ border: props.active ? '4px solid #1BBC6E' : '' }} className="modal-carousel-item__cover" onClick={() => props.setDisplayed(props.data)}> | 
				
			||||
 | 
				
			||||
      </div> | 
				
			||||
      {props.data.type === "image" ? ( | 
				
			||||
        <img src={props.data.value} alt={window.t("عکس")} /> | 
				
			||||
      ) : null} | 
				
			||||
      {props.data.type === "film" ? <Video /> : null} | 
				
			||||
      <div | 
				
			||||
        style={{ border: props.active ? "4px solid #1BBC6E" : "" }} | 
				
			||||
        className="modal-carousel-item__cover" | 
				
			||||
        onClick={() => props.setDisplayed(props.data)} | 
				
			||||
      ></div> | 
				
			||||
    </div> | 
				
			||||
  ); | 
				
			||||
} 
 | 
				
			||||
}; | 
				
			||||
 | 
				
			||||
					Loading…
					
					
				
		Reference in new issue