forked from Gitlink/forgeplus-react
88 lines
3.1 KiB
JavaScript
88 lines
3.1 KiB
JavaScript
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();
|
|
const parentNodeUrl = event.target.parentNode && event.target.parentNode.getAttribute('href');
|
|
if(parentNodeUrl){
|
|
window.location.href = parentNodeUrl;
|
|
}else{
|
|
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()
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.wrappedComponentRef && this.props.wrappedComponentRef(this.refs['wrappedComponentRef'])
|
|
setTimeout(() => {
|
|
$(options.parentSelector || ".commentsDelegateParent")
|
|
.delegate(options.imgSelector || ".J_Comment_Reply .comment_content img, .J_Comment_Reply .childrenCommentsView img", "click", this.onDelegateClick);
|
|
}, 1200)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (__CLIENT__) {
|
|
$(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>
|
|
)
|
|
}
|
|
}
|
|
}
|
|
} |