(function() {
+ var ImageManager = new Vue({
- class ImageManager extends React.Component {
+ el: '#image-manager',
- constructor(props) {
- super(props);
- this.state = {
- images: [],
- hasMore: false,
- page: 0
- };
- }
+ data: {
+ images: [],
+ hasMore: false,
+ page: 0,
+ cClickTime: 0
+ },
- show(callback) {
- $(React.findDOMNode(this)).show();
- this.callback = callback;
- }
+ created: function() {
+ // Get initial images
+ this.fetchData(this.page);
+ },
- hide() {
- console.log('test');
- $(React.findDOMNode(this)).hide();
- }
-
- selectImage(image) {
- if(this.callback) {
- this.callback(image);
- }
- this.hide();
- }
-
- componentDidMount() {
- var _this = this;
- // Set initial images
- $.getJSON('/images/all', data => {
- this.setState({
- images: data.images,
- hasMore: data.hasMore
- });
- });
+ ready: function() {
// Create dropzone
- this.dropZone = new Dropzone(React.findDOMNode(this.refs.dropZone), {
- url: '/upload/image',
- init: function() {
- var dz = this;
- this.on("sending", function(file, xhr, data) {
- data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
- });
- this.on("success", function(file, data) {
- _this.state.images.unshift(data);
- _this.setState({
- images: _this.state.images
+ this.setupDropZone();
+ },
+
+ methods: {
+ fetchData: function() {
+ var _this = this;
+ $.getJSON('/images/all/' + _this.page, function(data) {
+ _this.images = _this.images.concat(data.images);
+ _this.hasMore = data.hasMore;
+ _this.page++;
+ });
+ },
+
+ setupDropZone: function() {
+ var _this = this;
+ var dropZone = new Dropzone(_this.$$.dropZone, {
+ url: '/upload/image',
+ init: function() {
+ var dz = this;
+ this.on("sending", function(file, xhr, data) {
+ data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
});
- //$(file.previewElement).fadeOut(400, function() {
- // dz.removeFile(file);
- //})
- });
- }
- });
- }
-
- loadMore() {
- this.state.page++;
- $.getJSON('/images/all/' + this.state.page, data => {
- this.setState({
- images: this.state.images.concat(data.images),
- hasMore: data.hasMore
+ this.on("success", function(file, data) {
+ _this.images.unshift(data);
+ $(file.previewElement).fadeOut(400, function() {
+ dz.removeFile(file);
+ });
+ });
+ }
});
- });
- }
-
- overlayClick(e) {
- if(e.target.className === 'overlay') {
- this.hide();
- }
- }
-
- render() {
- var loadMore = this.loadMore.bind(this);
- var selectImage = this.selectImage.bind(this);
- var overlayClick = this.overlayClick.bind(this);
- var hide = this.hide.bind(this);
- return (
- <div className="overlay" onClick={overlayClick}>
- <div id="image-manager">
- <div className="image-manager-content">
- <div className="dropzone-container" ref="dropZone">
- <div className="dz-message">Drop files or click here to upload</div>
- </div>
- <ImageList data={this.state.images} loadMore={loadMore} selectImage={selectImage} hasMore={this.state.hasMore}/>
- </div>
- <div className="image-manager-sidebar">
- <button className="neg button image-manager-close" onClick={hide}>x</button>
- <h2>Images</h2>
- </div>
- </div>
- </div>
- );
- }
-
- }
-
- class ImageList extends React.Component {
-
- render() {
- var selectImage = this.props.selectImage;
- var images = this.props.data.map(function(image) {
- return (
- <Image key={image.id} image={image} selectImage={selectImage} />
- );
- });
- return (
- <div className="image-manager-list clearfix">
- {images}
- { this.props.hasMore ? <div className="load-more" onClick={this.props.loadMore}>Load More</div> : null }
- </div>
- );
- }
-
- }
-
- class Image extends React.Component {
+ },
+
+ imageClick: function(image) {
+ var dblClickTime = 380;
+ var cTime = (new Date()).getTime();
+ var timeDiff = cTime - this.cClickTime;
+ if(this.cClickTime !== 0 && timeDiff < dblClickTime) {
+ // DoubleClick
+ if(this.callback) {
+ this.callback(image);
+ }
+ this.hide();
+ } else {
+ // Single Click
+ }
+ this.cClickTime = cTime;
+ },
- constructor(){
- super();
- this._dblClickTime = 350;
- this._cClickTime = 0;
- }
+ show: function(callback) {
+ this.callback = callback;
+ this.$$.overlay.style.display = 'block';
+ },
- setImage() {
- 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
+ hide: function() {
+ this.$$.overlay.style.display = 'none';
}
- this._cClickTime = cTime;
- }
-
- render() {
- var imageClick = this.imageClick.bind(this);
- return (
- <div>
- <img onClick={imageClick} src={this.props.image.thumbnail}/>
- </div>
- );
- }
-
- }
-
- class ImageInfoPage extends React.Component {
-
- render() {
}
- }
-
- if(document.getElementById('image-manager-container')) {
- window.ImageManager = React.render(
- <ImageManager />,
- document.getElementById('image-manager-container')
- );
- }
+ });
-})();
+ window.ImageManager = ImageManager;
+})();
\ No newline at end of file
projects / bookstack / blobdiff