mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-13 07:13:32 +08:00
Started on hiding manager on request
This commit is contained in:
@ -18,7 +18,8 @@
|
|||||||
this.callback = callback;
|
this.callback = callback;
|
||||||
}
|
}
|
||||||
|
|
||||||
hide() {
|
hide(e) {
|
||||||
|
console.log('test');
|
||||||
$(React.findDOMNode(this)).hide();
|
$(React.findDOMNode(this)).hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,8 +73,9 @@
|
|||||||
render() {
|
render() {
|
||||||
var loadMore = this.loadMore.bind(this);
|
var loadMore = this.loadMore.bind(this);
|
||||||
var selectImage = this.selectImage.bind(this);
|
var selectImage = this.selectImage.bind(this);
|
||||||
|
var hide = this.hide.bind(this);
|
||||||
return (
|
return (
|
||||||
<div className="overlay">
|
<div className="overlay" onClick={hide}>
|
||||||
<div id="image-manager">
|
<div id="image-manager">
|
||||||
<div className="image-manager-content">
|
<div className="image-manager-content">
|
||||||
<div className="dropzone-container" ref="dropZone">
|
<div className="dropzone-container" ref="dropZone">
|
||||||
@ -82,6 +84,7 @@
|
|||||||
<ImageList data={this.state.images} loadMore={loadMore} selectImage={selectImage} hasMore={this.state.hasMore}/>
|
<ImageList data={this.state.images} loadMore={loadMore} selectImage={selectImage} hasMore={this.state.hasMore}/>
|
||||||
</div>
|
</div>
|
||||||
<div className="image-manager-sidebar">
|
<div className="image-manager-sidebar">
|
||||||
|
<button className="neg button image-manager-close" onClick={hide}>x</button>
|
||||||
<h2>Images</h2>
|
<h2>Images</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -90,7 +93,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
window.ImageManager = new ImageManager();
|
|
||||||
|
|
||||||
class ImageList extends React.Component {
|
class ImageList extends React.Component {
|
||||||
|
|
||||||
@ -113,21 +115,48 @@
|
|||||||
|
|
||||||
class Image extends React.Component {
|
class Image extends React.Component {
|
||||||
|
|
||||||
|
constructor(){
|
||||||
|
super();
|
||||||
|
this._dblClickTime = 160;
|
||||||
|
this._cClickTime = 0;
|
||||||
|
}
|
||||||
|
|
||||||
setImage() {
|
setImage() {
|
||||||
this.props.selectImage(this.props.image);
|
this.props.selectImage(this.props.image);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
imageClick() {
|
||||||
|
var cTime = (new Date()).getTime();
|
||||||
|
var timeDiff = cTime - this._cClickTime;
|
||||||
|
console.log(timeDiff);
|
||||||
|
if(this._cClickTime !== 0 && timeDiff < this._dblClickTime) {
|
||||||
|
// DoubleClick
|
||||||
|
this.setImage();
|
||||||
|
} else {
|
||||||
|
// Single Click
|
||||||
|
}
|
||||||
|
this._cClickTime = cTime;
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
var setImage = this.setImage.bind(this);
|
var imageClick = this.imageClick.bind(this);
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<img onDoubleClick={setImage} src={this.props.image.thumbnail}/>
|
<img onDoubleClick={imageClick} src={this.props.image.thumbnail}/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class ImageInfoPage extends React.Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
if(document.getElementById('image-manager-container')) {
|
if(document.getElementById('image-manager-container')) {
|
||||||
window.ImageManager = React.render(
|
window.ImageManager = React.render(
|
||||||
<ImageManager />,
|
<ImageManager />,
|
||||||
|
@ -53,7 +53,13 @@
|
|||||||
padding: 0 $-l;
|
padding: 0 $-l;
|
||||||
border-left: 1px solid #DDD;
|
border-left: 1px solid #DDD;
|
||||||
}
|
}
|
||||||
|
.image-manager-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
.image-manager-list {
|
.image-manager-list {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@ -2,4 +2,13 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div id="container"></div>
|
<div id="container"></div>
|
||||||
|
@stop
|
||||||
|
|
||||||
|
|
||||||
|
@section('bottom')
|
||||||
|
<div id="image-manager-container"></div>
|
||||||
|
<script src="/js/image-manager.js"></script>
|
||||||
|
<script>
|
||||||
|
window.ImageManager.show();
|
||||||
|
</script>
|
||||||
@stop
|
@stop
|
Reference in New Issue
Block a user