2019-02-18 00:05:37 +00:00
|
|
|
import React from 'react';
|
2022-12-29 04:21:47 +00:00
|
|
|
import ReactDom from 'react-dom';
|
2019-03-28 02:59:43 +00:00
|
|
|
import SharedFileView from './components/shared-file-view/shared-file-view';
|
|
|
|
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
|
2019-04-10 09:57:58 +00:00
|
|
|
import { gettext } from './utils/constants';
|
2019-02-18 00:05:37 +00:00
|
|
|
|
|
|
|
import './css/image-file-view.css';
|
|
|
|
|
2019-04-10 09:57:58 +00:00
|
|
|
const { fileName, rawPath, err, prevImgPath, nextImgPath } = window.shared.pageOptions;
|
|
|
|
|
|
|
|
const prevImgURL = `?p=${encodeURIComponent(prevImgPath)}`;
|
|
|
|
const nextImgURL = `?p=${encodeURIComponent(nextImgPath)}`;
|
2019-02-18 00:05:37 +00:00
|
|
|
|
|
|
|
class SharedFileViewImage extends React.Component {
|
2019-03-28 02:59:43 +00:00
|
|
|
render() {
|
|
|
|
return <SharedFileView content={<FileContent />} />;
|
2019-02-18 00:05:37 +00:00
|
|
|
}
|
2019-03-28 02:59:43 +00:00
|
|
|
}
|
2019-02-18 00:05:37 +00:00
|
|
|
|
2019-03-28 02:59:43 +00:00
|
|
|
class FileContent extends React.Component {
|
2019-04-10 09:57:58 +00:00
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
|
|
if (prevImgPath && e.keyCode == 37) { // press '<-'
|
|
|
|
location.href = prevImgURL;
|
|
|
|
}
|
|
|
|
if (nextImgPath && e.keyCode == 39) { // press '->'
|
|
|
|
location.href = nextImgURL;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-03-28 02:59:43 +00:00
|
|
|
render() {
|
2019-02-18 00:05:37 +00:00
|
|
|
if (err) {
|
2019-03-28 02:59:43 +00:00
|
|
|
return <SharedFileViewTip />;
|
2019-02-18 00:05:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2019-03-28 02:59:43 +00:00
|
|
|
<div className="shared-file-view-body d-flex text-center">
|
|
|
|
<div className="image-file-view flex-1">
|
2019-04-10 09:57:58 +00:00
|
|
|
{prevImgPath && (
|
|
|
|
<a href={prevImgURL} id="img-prev" title={gettext('you can also press ← ')}><span className="fas fa-chevron-left"></span></a>
|
|
|
|
)}
|
|
|
|
{nextImgPath && (
|
|
|
|
<a href={nextImgURL} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
|
|
|
|
)}
|
2019-03-28 02:59:43 +00:00
|
|
|
<img src={rawPath} alt={fileName} id="image-view" />
|
2019-02-18 00:05:37 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-12-29 04:21:47 +00:00
|
|
|
ReactDom.render(<SharedFileViewImage />, document.getElementById('wrapper'));
|