BookStack Code Mirror - bookstack/blob - resources/assets/js/image-manager.js

   1
   2 (function() {
   3
   4
   5     class ImageManager extends React.Component {
   6
   7         constructor(props) {
   8             super(props);
   9             this.state = {
  10                 images: [],
  11                 hasMore: false,
  12                 page: 0
  13             };
  14         }
  15
  16         show(callback) {
  17             $(React.findDOMNode(this)).show();
  18             this.callback = callback;
  19         }
  20
  21         hide(e) {
  22             console.log('test');
  23             $(React.findDOMNode(this)).hide();
  24         }
  25
  26         selectImage(image) {
  27             if(this.callback) {
  28                 this.callback(image);
  29             }
  30             this.hide();
  31         }
  32
  33         componentDidMount() {
  34             var _this = this;
  35             // Set initial images
  36             $.getJSON('/images/all', data => {
  37                 this.setState({
  38                     images: data.images,
  39                     hasMore: data.hasMore
  40                 });
  41             });
  42             // Create dropzone
  43             this.dropZone = new Dropzone(React.findDOMNode(this.refs.dropZone), {
  44                 url: '/upload/image',
  45                 init: function() {
  46                     var dz = this;
  47                     this.on("sending", function(file, xhr, data) {
  48                         data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
  49                     });
  50                     this.on("success", function(file, data) {
  51                         _this.state.images.unshift(data);
  52                         _this.setState({
  53                             images: _this.state.images
  54                         });
  55                         //$(file.previewElement).fadeOut(400, function() {
  56                         //    dz.removeFile(file);
  57                         //})
  58                     });
  59                 }
  60             });
  61         }
  62
  63         loadMore() {
  64             this.state.page++;
  65             $.getJSON('/images/all/' + this.state.page, data => {
  66                 this.setState({
  67                     images: this.state.images.concat(data.images),
  68                     hasMore: data.hasMore
  69                 });
  70             });
  71         }
  72
  73         render() {
  74             var loadMore = this.loadMore.bind(this);
  75             var selectImage = this.selectImage.bind(this);
  76             var hide = this.hide.bind(this);
  77             return (
  78                 <div className="overlay" onClick={hide}>
  79                     <div id="image-manager">
  80                         <div className="image-manager-content">
  81                             <div className="dropzone-container" ref="dropZone">
  82                                 <div className="dz-message">Drop files or click here to upload</div>
  83                             </div>
  84                             <ImageList data={this.state.images} loadMore={loadMore} selectImage={selectImage} hasMore={this.state.hasMore}/>
  85                         </div>
  86                         <div className="image-manager-sidebar">
  87                             <button className="neg button image-manager-close" onClick={hide}>x</button>
  88                             <h2>Images</h2>
  89                         </div>
  90                     </div>
  91                 </div>
  92             );
  93         }
  94
  95     }
  96
  97     class ImageList extends React.Component {
  98
  99         render() {
 100             var selectImage = this.props.selectImage;
 101             var images = this.props.data.map(function(image) {
 102                 return (
 103                     <Image key={image.id} image={image} selectImage={selectImage} />
 104                 );
 105             });
 106             return (
 107                 <div className="image-manager-list clearfix">
 108                     {images}
 109                     { this.props.hasMore ? <div className="load-more" onClick={this.props.loadMore}>Load More</div> : null }
 110                 </div>
 111             );
 112         }
 113
 114     }
 115
 116     class Image extends React.Component {
 117
 118         constructor(){
 119             super();
 120             this._dblClickTime = 160;
 121             this._cClickTime = 0;
 122         }
 123
 124         setImage() {
 125             this.props.selectImage(this.props.image);
 126         }
 127
 128         imageClick() {
 129             var cTime = (new Date()).getTime();
 130             var timeDiff = cTime - this._cClickTime;
 131             console.log(timeDiff);
 132             if(this._cClickTime !== 0 && timeDiff < this._dblClickTime) {
 133                 // DoubleClick
 134                 this.setImage();
 135             } else {
 136                 // Single Click
 137             }
 138             this._cClickTime = cTime;
 139         }
 140
 141         render() {
 142             var imageClick = this.imageClick.bind(this);
 143             return (
 144                 <div>
 145                     <img onDoubleClick={imageClick} src={this.props.image.thumbnail}/>
 146                 </div>
 147             );
 148         }
 149
 150     }
 151
 152     class ImageInfoPage extends React.Component {
 153
 154         render() {
 155
 156         }
 157
 158     }
 159
 160     if(document.getElementById('image-manager-container')) {
 161         window.ImageManager = React.render(
 162             <ImageManager />,
 163             document.getElementById('image-manager-container')
 164         );
 165     }
 166
 167 })();
 168
 169