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.
90 lines
3.0 KiB
90 lines
3.0 KiB
import React, { Component } from 'react';
|
|
import ImageLayer from './ImageLayer'
|
|
import { isImageExtension } from 'educoder'
|
|
const $ = window.$;
|
|
export function ImageLayerOfCommentHOC(options = {}) {
|
|
return function wrap(WrappedComponent) {
|
|
return class Wrapper extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
|
|
this.state = {
|
|
showImage: false,
|
|
imageSrc: ''
|
|
}
|
|
}
|
|
|
|
onDelegateClick = (event) => {
|
|
const imageSrc = event.target.src || event.target.getAttribute('src') || event.target.getAttribute('href')
|
|
// 判断imageSrc是否是图片
|
|
const fileName = event.target.innerHTML.trim()
|
|
if (isImageExtension(imageSrc.trim()) || isImageExtension(fileName) || event.target.tagName == 'IMG') {
|
|
// 非回复里的头像图片; 非emoticons
|
|
if (imageSrc.indexOf('/images/avatars/User') === -1 &&
|
|
imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) {
|
|
this.setState({
|
|
showImage: true,
|
|
imageSrc,
|
|
})
|
|
}
|
|
event.stopPropagation()
|
|
event.preventDefault && event.preventDefault()
|
|
event.originalEvent.preventDefault()
|
|
// event.originalEvent.stopPropagation()
|
|
// event.originalEvent.cancelBubble = true
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// jQuery._data( $('.newMain')[0], "events" )
|
|
componentDidMount() {
|
|
this.props.wrappedComponentRef && this.props.wrappedComponentRef(this.refs['wrappedComponentRef'])
|
|
|
|
// commentsDelegateParent #game_left_contents #tab_con_4
|
|
setTimeout(() => {
|
|
$(options.parentSelector || ".commentsDelegateParent")
|
|
.delegate(options.imgSelector || ".J_Comment_Reply .comment_content img, .J_Comment_Reply .childrenCommentsView img","click", this.onDelegateClick);
|
|
}, 1200)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
$(options.parentSelector || ".commentsDelegateParent", 'click', this.onDelegateClick)
|
|
}
|
|
|
|
onImageLayerClose = () => {
|
|
this.setState({
|
|
showImage: false,
|
|
imageSrc: '',
|
|
})
|
|
}
|
|
|
|
MdifHasAnchorJustScorll=()=>{
|
|
//mdhash滚动
|
|
let anchor = decodeURI(this.props.location.hash).replace('#', '');
|
|
// 对应id的话, 滚动到相应位置
|
|
if (!!anchor) {
|
|
let anchorElement = document.getElementsByName(anchor);
|
|
if (anchorElement) {
|
|
if (anchorElement.length!=0) {
|
|
anchorElement[anchorElement.length-1].scrollIntoView();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
this.MdifHasAnchorJustScorll();
|
|
return (
|
|
<React.Fragment>
|
|
<ImageLayer {...this.state} onImageLayerClose={this.onImageLayerClose}></ImageLayer>
|
|
|
|
<WrappedComponent {...this.props} ref="wrappedComponentRef">
|
|
</WrappedComponent>
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
}
|
|
}
|
|
} |