forked from Gitlink/forgeplus-react
570 lines
17 KiB
JavaScript
570 lines
17 KiB
JavaScript
import React, { Component } from 'react';
|
|
import AccountProfile from "../../modules/user/AccountProfile";
|
|
import { getImageUrl , openNewWindow } from 'educoder';
|
|
import axios from 'axios';
|
|
import { Input , notification , Dropdown , Menu } from 'antd';
|
|
|
|
import LoginDialog from '../../modules/login/LoginDialog';
|
|
import HeadSearch from '../Component/HeadSearch';
|
|
|
|
import AddProjectModal from './AddProjectModal';
|
|
import '../../modules/tpm/TPMIndex.css';
|
|
import CheckProfile from '../Component/ProfileModal/Profile';
|
|
|
|
import './header.scss';
|
|
import Engineer from './Engineer';
|
|
const $ = window.$
|
|
// TODO 这部分脚本从公共脚本中直接调用
|
|
const { Search } = Input;
|
|
let old_url;
|
|
|
|
window._header_componentHandler = null;
|
|
const isPath= window.location.hostname ==='code.educoder.net' || window.location.hostname==='testforgeplus.educoder.net';
|
|
// 非trustie链接则新开页跳转
|
|
const str = ['www.trustie.net','forgeplus.trustie.net','forum.trustie.net','testforgeplus.trustie.net']
|
|
class NewHeader extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
Addcoursestypes: false,
|
|
tojoinitemtype: false,
|
|
tojoinclasstitle: undefined,
|
|
rolearr: ["", ""],
|
|
Checkboxteacherchecked: false,
|
|
Checkboxstudentchecked: false,
|
|
Checkboxteachingchecked: false,
|
|
Checkboxteachertype: false,
|
|
Checkboxteachingtype: false,
|
|
code_notice: false,
|
|
RadioGroupvalue: undefined,
|
|
submitapplications: false,
|
|
isRender: false,
|
|
showTrial: false,
|
|
setevaluatinghides: false,
|
|
occupation: 0,
|
|
mydisplay: false,
|
|
headtypesonClickbool: false,
|
|
headtypess: "/",
|
|
settings: null,
|
|
visiblemyss: false,
|
|
openSearch:false,
|
|
visible:false, //浮动消息框展示控制
|
|
QQVisible:false
|
|
}
|
|
}
|
|
componentDidMount() {
|
|
this.geturlsdata();
|
|
window._header_componentHandler = this;
|
|
|
|
//下拉框的显示隐藏
|
|
var hoverTimeout;
|
|
var hoveredPanel;
|
|
$(".edu-menu-panel").hover(function () {
|
|
if (hoverTimeout) { // 一次只显示一个panel
|
|
if (hoveredPanel && hoveredPanel !== this) {
|
|
$(hoveredPanel).find(".edu-menu-list").hide()
|
|
}
|
|
clearTimeout(hoverTimeout);
|
|
hoverTimeout = null;
|
|
}
|
|
hoveredPanel = this;
|
|
$(this).find(".edu-menu-list").show();
|
|
}, function () {
|
|
var that = this;
|
|
// 延迟hide
|
|
hoverTimeout = setTimeout(function () {
|
|
$(that).find(".edu-menu-list").hide();
|
|
}, 800)
|
|
|
|
});
|
|
//获取游览器地址
|
|
try {
|
|
window.sessionStorage.setItem("yslgeturls", JSON.stringify(window.location.href))
|
|
} catch (e) {}
|
|
}
|
|
|
|
SearchInput = (open,item)=>{
|
|
if(open){
|
|
return(
|
|
<div
|
|
onBlur={() => {
|
|
setTimeout(() => {
|
|
this.setState({
|
|
openSearch:false
|
|
})
|
|
}, 300)
|
|
}}
|
|
>
|
|
<Search placeholder="实践课程/教学课堂/实践项目/交流问答"
|
|
className={`search-input mr20`}
|
|
onSearch={(value)=>this.onGlobalSearch(value,item)}
|
|
autoFocus={true}
|
|
/>
|
|
</div>
|
|
)
|
|
}else{
|
|
return <i className="iconfont icon-sousuo font-18 color-white ml30" onClick={() => {
|
|
this.setState({openSearch:true})
|
|
}} />
|
|
}
|
|
}
|
|
|
|
onGlobalSearch=(value,item)=>{
|
|
window.location.href=`${item}?value=` + value;
|
|
}
|
|
|
|
openNotification = (messge) => {
|
|
notification.open({
|
|
message: "提示",
|
|
description:
|
|
messge,
|
|
});
|
|
};
|
|
|
|
componentWillReceiveProps(newProps, oldProps) {
|
|
this.setState({
|
|
user: newProps.user
|
|
})
|
|
}
|
|
|
|
submitsubmitapplications = () => {
|
|
let {
|
|
submitapplicationssum,
|
|
submitapplicationsvaluedata
|
|
} = this.state;
|
|
this.setState({
|
|
submitapplications: false,
|
|
RadioGroupvalue: undefined
|
|
})
|
|
if (submitapplicationssum === 0) {
|
|
if (submitapplicationsvaluedata !== undefined) {
|
|
window.location.href = "/courses/" + submitapplicationsvaluedata;
|
|
}
|
|
} else if (submitapplicationssum === 1) {
|
|
if (submitapplicationsvaluedata !== undefined) {
|
|
window.location.href = "/projects/" + submitapplicationsvaluedata;
|
|
}
|
|
}
|
|
}
|
|
|
|
educoderlogin = () => {
|
|
//登录账号
|
|
this.setState({
|
|
isRender: true
|
|
})
|
|
}
|
|
educoderloginysl = () => {
|
|
//退出账号
|
|
var url = `/accounts/logout.json`;
|
|
axios.get((url)).then((result) => {
|
|
if (result !== undefined) {
|
|
window.location.href = "/";
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
hideAddcoursestypes = () => {
|
|
this.setState({
|
|
Addcoursestypes: false
|
|
})
|
|
};
|
|
HideAddcoursestypess = (i) => {
|
|
this.setState({
|
|
Addcoursestypes: false,
|
|
mydisplay: true,
|
|
occupation: i,
|
|
})
|
|
};
|
|
ModalCancelsy = () => {
|
|
this.setState({
|
|
mydisplay: false,
|
|
})
|
|
};
|
|
|
|
|
|
hidetojoinclass = () => {
|
|
this.setState({
|
|
tojoinclasstype: false,
|
|
tojoinitemtype: false,
|
|
tojoinclasstitle: undefined,
|
|
rolearr: ["", ""],
|
|
Checkboxteacherchecked: false,
|
|
Checkboxstudentchecked: false,
|
|
Checkboxteachingchecked: false,
|
|
Checkboxteachertype: false,
|
|
Checkboxteachingtype: false,
|
|
code_notice: false,
|
|
checked_notice: false,
|
|
RadioGroupvalue: undefined
|
|
})
|
|
}
|
|
|
|
// 关闭
|
|
cancelModulationModels = () => {
|
|
this.setState({ isRenders: false })
|
|
}
|
|
|
|
setevaluatinghides = () => {
|
|
this.setState({
|
|
setevaluatinghides: true
|
|
})
|
|
}
|
|
//修改登录方法
|
|
Modifyloginvalue = () => {
|
|
this.setState({
|
|
isRender: false,
|
|
})
|
|
}
|
|
|
|
hideAccountProfile = () => {
|
|
this.setState({
|
|
AccountProfiletype: false
|
|
})
|
|
};
|
|
headtypesonClick = (url, bool) => {
|
|
this.setState({
|
|
headtypess: url,
|
|
headtypesonClickbool: bool,
|
|
})
|
|
}
|
|
//获取数据为空的时候
|
|
gettablogourlnull = () => {
|
|
this.setState({
|
|
settings: undefined
|
|
});
|
|
var link = document.createElement('link'),
|
|
oldLink = document.getElementById('dynamic-favicon');
|
|
link.id = 'dynamic-favicon';
|
|
link.rel = 'shortcut icon';
|
|
link.href = "/react/build/./favicon.ico";
|
|
if (oldLink) {
|
|
document.head.removeChild(oldLink);
|
|
}
|
|
document.head.appendChild(link);
|
|
};
|
|
|
|
//获取数据的时候
|
|
gettablogourldata = (response) => {
|
|
document.title = response.data.setting.name;
|
|
var link = document.createElement('link'),
|
|
oldLink = document.getElementById('dynamic-favicon');
|
|
link.id = 'dynamic-favicon';
|
|
link.rel = 'shortcut icon';
|
|
link.href = '/' + response.data.setting.tab_logo_url;
|
|
if (oldLink) {
|
|
document.head.removeChild(oldLink);
|
|
}
|
|
document.head.appendChild(link);
|
|
}
|
|
|
|
handleVisibleChanges = (boll) => {
|
|
this.setState({
|
|
visiblemyss: boll,
|
|
})
|
|
}
|
|
|
|
geturlsdata = () => {
|
|
let url = "/setting.json";
|
|
axios.get(url).then((response) => {
|
|
if (response && response.data) {
|
|
this.setState({ settings: response.data.setting });
|
|
localStorage.setItem('chromesetting', JSON.stringify(response.data.setting));
|
|
localStorage.setItem('chromesettingresponse', JSON.stringify(response));
|
|
} else {
|
|
this.gettablogourlnull();
|
|
}
|
|
}).catch((error) => {
|
|
this.gettablogourlnull();
|
|
});
|
|
}
|
|
|
|
matchpaths = (url) => {
|
|
const { match } = this.props;
|
|
if(url){
|
|
if (match.path.indexOf(url) > -1) {
|
|
return true
|
|
}else {
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
|
|
checkProfile=(url)=>{
|
|
const { showCompeleteDialog , completeProfile } = this.props;
|
|
if(!completeProfile){
|
|
showCompeleteDialog && showCompeleteDialog();
|
|
}else{
|
|
window.location.href(url);
|
|
}
|
|
}
|
|
|
|
addMenu=(list)=>{
|
|
return(
|
|
list && list.length >0 &&
|
|
<div className="dropdownFlex">
|
|
<Menu>
|
|
{
|
|
list.map((item,key)=>{
|
|
return(
|
|
(item.name !=="加入课堂" && item.name !=="加入开发项目") &&
|
|
<Menu.Item key={item.name+key}>
|
|
<CheckProfile {...this.props} sureFunc={()=>{window.location.href=item.url}}>{item.name}</CheckProfile>
|
|
</Menu.Item>
|
|
)
|
|
})
|
|
}
|
|
<Menu.Item>
|
|
<AddProjectModal {...this.props} showNotification={this.props.showNotification}/>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
renderMenu=(personal)=>{
|
|
const { current_user } = this.props;
|
|
return(
|
|
<Menu className="currentMenu">
|
|
<Menu.Item>
|
|
<span className="currentName" title={current_user && current_user.username}>{current_user && current_user.username}</span>
|
|
</Menu.Item>
|
|
{
|
|
personal && personal.length > 0 && personal.map((item,key)=>{
|
|
return(
|
|
<li key={key}><a href={item.url} target="_blank">{item.name}</a></li>
|
|
)
|
|
})
|
|
}
|
|
{/* <li><Link to={`/settings/profile`}>设置</Link></li> */}
|
|
<Menu.Item><a onClick={() => this.educoderloginysl()}>退出</a></Menu.Item>
|
|
</Menu>
|
|
)
|
|
}
|
|
|
|
handleVisibleChange = visible => {
|
|
this.setState({ visible });
|
|
};
|
|
|
|
turntoEngineer=(url)=>{
|
|
const { current_user } = this.props;
|
|
if(current_user && current_user.login){
|
|
if(url){
|
|
window.location.href=url;
|
|
}else{
|
|
this.setState({
|
|
QQVisible:true
|
|
})
|
|
}
|
|
}else{
|
|
this.educoderlogin();
|
|
}
|
|
}
|
|
|
|
setQQVisible=()=>{
|
|
this.setState({
|
|
QQVisible:false
|
|
})
|
|
}
|
|
|
|
render() {
|
|
const { match } = this.props;
|
|
let current_user = this.props.user;
|
|
let {
|
|
QQVisible,
|
|
AccountProfiletype,
|
|
user,
|
|
isRender,
|
|
headtypesonClickbool,
|
|
headtypess,
|
|
settings,
|
|
visible,
|
|
} = this.state;
|
|
/*用户名称 用户头像url*/
|
|
let activeIndex = false;
|
|
let activeForums = false;
|
|
let activeShixuns = false;
|
|
let activePaths = false;
|
|
let coursestype = false;
|
|
let activePackages = false;
|
|
let activeMoopCases = false;
|
|
let activeCompetitions = false;
|
|
|
|
if (match.path === '/forums') {
|
|
activeForums = true;
|
|
} else if (match.path.startsWith('/shixuns')) {
|
|
activeShixuns = true;
|
|
} else if (match.path.startsWith('/paths')) {
|
|
activePaths = true;
|
|
} else if (match.path.startsWith('/courses')) {
|
|
coursestype = true;
|
|
} else if (match.path.startsWith('/crowdsourcing')) {
|
|
activePackages = true;
|
|
} else if (match.path.startsWith('/moop_cases')) {
|
|
activeMoopCases = true;
|
|
} else if (match.path.startsWith('/competitions')) {
|
|
activeCompetitions = true;
|
|
} else {
|
|
activeIndex = true;
|
|
}
|
|
|
|
let headtypes = '/';
|
|
if (settings) {
|
|
if (settings.navbar) {
|
|
if (settings.navbar.length > 0) {
|
|
if (match.path === '/') {
|
|
if (headtypesonClickbool === false) {
|
|
headtypes = undefined;
|
|
} else {
|
|
headtypes = headtypess;
|
|
}
|
|
} else {
|
|
for (var i = 0; i < settings.navbar.length; i++) {
|
|
if (match.path === settings.navbar[i].link) {
|
|
headtypes = settings.navbar[i].link;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let shixuntype = false;
|
|
let pathstype = false;
|
|
let coursestypes = false;
|
|
if (this.props && this.props.mygetHelmetapi != null) {
|
|
let shixun = "/shixuns";
|
|
let paths = "/paths";
|
|
let courses = "/courses";
|
|
this.props.mygetHelmetapi && this.props.mygetHelmetapi.navbar && this.props.mygetHelmetapi.navbar.map((item, key) => {
|
|
var reg = RegExp(item.link);
|
|
if (shixun.match(reg)) {
|
|
if (item.hidden === true) {
|
|
shixuntype = true
|
|
}
|
|
}
|
|
if (paths.match(reg)) {
|
|
if (item.hidden === true) {
|
|
pathstype = true
|
|
}
|
|
}
|
|
if (courses.match(reg)) {
|
|
if (item.hidden === true) {
|
|
coursestypes = true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
let search_url = settings && settings.common && settings.common.search;
|
|
return (
|
|
<div className="newHeaders" id="nHeader">
|
|
<Engineer QQVisible={QQVisible} setQQVisible={this.setQQVisible}/>
|
|
<div className="headerContent">
|
|
{isRender === true ?
|
|
<LoginDialog
|
|
{...this.props}
|
|
{...this.state}
|
|
Modifyloginvalue={() => this.Modifyloginvalue()}
|
|
/> : ""}
|
|
|
|
{AccountProfiletype === true ?
|
|
<AccountProfile
|
|
hideAccountProfile={() => this.hideAccountProfile()}
|
|
{...this.props}
|
|
{...this.state}
|
|
/> : ""}
|
|
{
|
|
settings && settings.nav_logo_url ?
|
|
<a href={settings && settings.new_course.default_url} className={"fl mr50"} style={{minWidth:"45px"}}>
|
|
<img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={getImageUrl(`/${settings.nav_logo_url}`)}></img>
|
|
</a>
|
|
:
|
|
""
|
|
}
|
|
<div className="head-nav pr" id={"head-navpre1"}>
|
|
{
|
|
settings && settings.navbar && settings.navbar.length > 0 ?
|
|
<ul id="header-nav">
|
|
{
|
|
settings.navbar && settings.navbar.map((item, key) => {
|
|
var new_link = item.link;
|
|
var user_login = current_user && current_user.login;
|
|
var is_hidden = item.hidden
|
|
if (new_link && (new_link.indexOf("courses") > -1 || new_link.indexOf("contests") > -1)) {
|
|
if (user_login) {
|
|
if (new_link.indexOf("courses") > -1) {
|
|
new_link = new_link.replace(/courses/g, user_login + "/courses")
|
|
} else if (new_link.indexOf("contests") > -1) {
|
|
new_link = new_link.replace(/contests/g, user_login + "/contests")
|
|
}
|
|
} else {
|
|
is_hidden = true
|
|
}
|
|
}
|
|
if (user_login && (new_link && new_link.indexOf("homes") > -1)) {
|
|
new_link = new_link.replace(/homes/g, user_login + "/user_activities")
|
|
}
|
|
|
|
var waiLian = (new_link && str.filter(item=>new_link.indexOf(item)>-1) );
|
|
var wl = waiLian && waiLian.length>0;
|
|
return (
|
|
<li key={key} onClick={() => this.headtypesonClick(item.link, true)} className={`${((isPath && item.name === "大学开源") || this.matchpaths(item.link) === true) ? 'pr active' : 'pr'}`} style={!is_hidden ? { display: 'flex' } : { display: 'none' }}>
|
|
<a href={new_link} target={wl ? "_self":"_blank"}><div dangerouslySetInnerHTML={{ __html: item.name }}></div></a>
|
|
</li>
|
|
)
|
|
})
|
|
}
|
|
{
|
|
settings && settings.engineer_url !== undefined ?
|
|
<li>
|
|
<a onClick={()=>this.turntoEngineer(settings.engineer_url)}>工程认证</a>
|
|
</li>
|
|
:""
|
|
}
|
|
</ul>
|
|
: ""
|
|
}
|
|
</div>
|
|
<div className="head-right">
|
|
{ search_url && <HeadSearch {...this.props}/>}
|
|
{
|
|
current_user && (current_user.main_site || current_user.login) && (settings && settings.add && settings.add.length>0)?
|
|
<Dropdown overlay={this.addMenu(settings && settings.add)} placement="bottomRight">
|
|
<i className="iconfont icon-tianjiafangda color-grey-6 ml30 mr15"></i>
|
|
</Dropdown>:""
|
|
}
|
|
|
|
{ (settings && settings.common && settings.common.notice) && (current_user && current_user.login)?
|
|
<a href={settings.common.notice} className="message-icon">
|
|
{current_user &&
|
|
<i className="iconfont icon-xiaoxilingdang color-grey-6 ml15 mr15"></i>
|
|
}
|
|
</a>
|
|
: ""
|
|
}
|
|
</div>
|
|
{!user || (user && !user.login) ?
|
|
<span className="font-15 ml30">
|
|
<a onClick={() => this.educoderlogin()} className="mr5 color-white">登录</a>
|
|
{
|
|
settings && settings.common && settings.common.register &&
|
|
<span><em className="vertical-line"></em><a className="ml5 color-white" href={`${settings.common.register}`} target="_blank">注册</a></span>
|
|
}
|
|
</span>
|
|
:
|
|
<Dropdown placement={`bottomRight`} overlay={this.renderMenu(settings && settings.personal)}>
|
|
<a href={`/${this.props.current_user && this.props.current_user.login}`}>
|
|
<img alt="头像" src={getImageUrl(`/${user.image_url}`)} className="currentImg"></img>
|
|
</a>
|
|
</Dropdown>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default NewHeader;
|