File indexing completed on 2025-01-26 05:27:58

0001 import "core-js/shim";
0002 import "regenerator-runtime/runtime";
0003 import React , {useEffect, useState, useContext} from 'react'
0004 import MobileLeftMenu from './MobileLeftMenu';
0005 import DomainsMenu from './DomainsMenu';
0006 import UserMenu from './UserMenu';
0007 import SearchForm from "./SearchForm";
0008 import Axios from 'axios';
0009 import {MetaheaderContext} from '../contexts/MetaheaderContext';
0010 
0011 const MetaHeaderComponent = (props) => {
0012   
0013   const {state, setState} = useContext(MetaheaderContext);
0014   console.log(state);
0015   const [device, setDevice] = useState('large');
0016   const initialMetaMenuThemeValue = state.metamenuTheme ? state.metamenuTheme : '';
0017   const [metamenuTheme, setMetamenuTheme] = useState(initialMetaMenuThemeValue);
0018   const initialSiteThemeValue = state.contentTheme ? state.contentTheme : '';
0019   const [siteTheme, setSiteTheme ] = useState(initialSiteThemeValue);
0020 
0021   useEffect(() => {   
0022     updateDimensions(); 
0023     window.addEventListener("resize", updateDimensions);
0024     window.addEventListener("orientationchange",updateDimensions);
0025     //$( "body" ).addClass( "theme" );
0026     document.body.classList.add("theme");
0027 
0028     if (state.contentTheme === 'content-theme-dark'){
0029       //$( "body" ).addClass( "dark-theme" );
0030       document.body.classList.add("dark-theme");
0031     } else {
0032       //$( "body" ).removeClass( "dark-theme" );
0033       document.body.classList.remove("dark-theme");
0034     }
0035     return () => {
0036       window.removeEventListener("resize", updateDimensions);
0037       window.removeEventListener("orientationchange", updateDimensions);
0038     };
0039   }, []);
0040 
0041   const updateDimensions = e => {
0042     
0043     const width = window.innerWidth;
0044     let device;
0045     if (width >= 1015) {
0046       device = "large";
0047       // } else if (width < 1015 && width >= 730) {
0048       //  device = "mid";
0049       // } else if (width < 730) {
0050     } else {
0051       device = "tablet";
0052     }
0053     
0054     setDevice(device);    
0055   }
0056 
0057   const onSwitchStyle = evt => {    
0058 
0059     let url = "https://" + window.location.hostname  +"/membersetting/setsettings/itemid/2/itemvalue/"+ (evt.target.checked ? '1' : '0');    
0060     
0061     const isChecked = evt.target.checked;    
0062     Axios.get(url)
0063       .then(result => {
0064     
0065         const newSiteTheme = isChecked ? 'content-theme-dark': '';
0066         setSiteTheme(newSiteTheme);
0067         if (newSiteTheme === 'content-theme-dark'){
0068           document.body.classList.add("dark-theme");
0069           //$( "body" ).addClass( "dark-theme" );
0070         } else {
0071           //$( "body" ).removeClass( "dark-theme" );
0072           document.body.classList.remove("dark-theme");
0073         }
0074     })
0075   }
0076 
0077   const onSwitchMetaHeaderStyle = evt => {     
0078     let url =  "https://" + window.location.hostname +"/membersetting/setsettings/itemid/1/itemvalue/"+ (evt.target.checked ? '1' : '0');    
0079     const isChecked = evt.target.checked;    
0080     Axios.get(url)
0081       .then(result => {               
0082         setMetamenuTheme(isChecked?'metamenu-theme-dark':'');
0083       })
0084   }
0085 
0086   let domainsMenuDisplay;
0087     if (device === "tablet") {
0088       domainsMenuDisplay = (
0089         <MobileLeftMenu />
0090       )
0091     } else {
0092 
0093       domainsMenuDisplay = (
0094         <DomainsMenu
0095           device={device}
0096           onSwitchStyle={onSwitchStyle}
0097           onSwitchMetaHeaderStyle={onSwitchMetaHeaderStyle}
0098           onSwitchStyleChecked={metamenuTheme?true:false}
0099           siteTheme={siteTheme}
0100           metamenuTheme={metamenuTheme}
0101           config={props.config}
0102         />
0103       )
0104     }
0105     const metamenuCls = `metamenu ${metamenuTheme}`;
0106     let paraChecked = false;
0107     if (metamenuTheme) {
0108       paraChecked = true;
0109     }
0110   return (    
0111     
0112        <nav id="metaheader-nav" className="metaheader">
0113           <div style={{ "display": "block" }} className={metamenuCls}>
0114             {domainsMenuDisplay}
0115             <UserMenu
0116               device={device}              
0117               onSwitchStyle={onSwitchStyle}
0118               onSwitchStyleChecked={paraChecked}
0119               onSwitchMetaHeaderStyle={onSwitchMetaHeaderStyle}
0120               siteTheme={siteTheme}
0121               metamenuTheme={metamenuTheme}
0122             />
0123             <SearchForm />
0124           </div>
0125         </nav>
0126       
0127   )
0128 }
0129 
0130 export default MetaHeaderComponent