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() {
  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         overlayClick(e) {
  74             if(e.target.className === 'overlay') {
  75                 this.hide();
  76             }
  77         }
  78
  79         render() {
  80             var loadMore = this.loadMore.bind(this);
  81             var selectImage = this.selectImage.bind(this);
  82             var overlayClick = this.overlayClick.bind(this);
  83             var hide = this.hide.bind(this);
  84             return (
  85                 <div className="overlay" onClick={overlayClick}>
  86                     <div id="image-manager">
  87                         <div className="image-manager-content">
  88                             <div className="dropzone-container" ref="dropZone">
  89                                 <div className="dz-message">Drop files or click here to upload</div>
  90                             </div>
  91                             <ImageList data={this.state.images} loadMore={loadMore} selectImage={selectImage} hasMore={this.state.hasMore}/>
  92                         </div>
  93                         <div className="image-manager-sidebar">
  94                             <button className="neg button image-manager-close" onClick={hide}>x</button>
  95                             <h2>Images</h2>
  96                         </div>
  97                     </div>
  98                 </div>
  99             );
 100         }
 101
 102     }
 103
 104     class ImageList extends React.Component {
 105
 106         render() {
 107             var selectImage = this.props.selectImage;
 108             var images = this.props.data.map(function(image) {
 109                 return (
 110                     <Image key={image.id} image={image} selectImage={selectImage} />
 111                 );
 112             });
 113             return (
 114                 <div className="image-manager-list clearfix">
 115                     {images}
 116                     { this.props.hasMore ? <div className="load-more" onClick={this.props.loadMore}>Load More</div> : null }
 117                 </div>
 118             );
 119         }
 120
 121     }
 122
 123     class Image extends React.Component {
 124
 125         constructor(){
 126             super();
 127             this._dblClickTime = 350;
 128             this._cClickTime = 0;
 129         }
 130
 131         setImage() {
 132             this.props.selectImage(this.props.image);
 133         }
 134
 135         imageClick() {
 136             var cTime = (new Date()).getTime();
 137             var timeDiff = cTime - this._cClickTime;
 138             console.log(timeDiff);
 139             if(this._cClickTime !== 0 && timeDiff < this._dblClickTime) {
 140                 // DoubleClick
 141                 this.setImage();
 142             } else {
 143                 // Single Click
 144             }
 145             this._cClickTime = cTime;
 146         }
 147
 148         render() {
 149             var imageClick = this.imageClick.bind(this);
 150             return (
 151                 <div>
 152                     <img onClick={imageClick} src={this.props.image.thumbnail}/>
 153                 </div>
 154             );
 155         }
 156
 157     }
 158
 159     class ImageInfoPage extends React.Component {
 160
 161         render() {
 162
 163         }
 164
 165     }
 166
 167     if(document.getElementById('image-manager-container')) {
 168         window.ImageManager = React.render(
 169             <ImageManager />,
 170             document.getElementById('image-manager-container')
 171         );
 172     }
 173
 174 })();
 175
 176