Started on hiding manager on request

This commit is contained in:
Dan Brown
2015-08-13 07:44:10 +01:00
parent 83c653fc32
commit 59184fa6a9
3 changed files with 50 additions and 6 deletions

View File

@ -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 />,

View File

@ -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;

View File

@ -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