diff --git a/gulpfile.js b/gulpfile.js index 6358835a7..f6a86d4c9 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,5 +13,5 @@ var elixir = require('laravel-elixir'); elixir(function(mix) { mix.sass('styles.scss'); - mix.babel('image-manager.js', 'public/js/image-manager.js'); + mix.scripts('image-manager.js', 'public/js/image-manager.js'); }); diff --git a/resources/assets/js/image-manager.js b/resources/assets/js/image-manager.js index 4d24e35c8..3fa72c5bd 100644 --- a/resources/assets/js/image-manager.js +++ b/resources/assets/js/image-manager.js @@ -1,176 +1,86 @@ (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 - }); - //$(file.previewElement).fadeOut(400, function() { - // dz.removeFile(file); - //}) - }); - } - }); - } + this.setupDropZone(); + }, - loadMore() { - this.state.page++; - $.getJSON('/images/all/' + this.state.page, data => { - this.setState({ - images: this.state.images.concat(data.images), - hasMore: data.hasMore + 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++; }); - }); - } + }, - overlayClick(e) { - if(e.target.className === 'overlay') { - this.hide(); + 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')); + }); + this.on("success", function(file, data) { + _this.images.unshift(data); + $(file.previewElement).fadeOut(400, function() { + dz.removeFile(file); + }); + }); + } + }); + }, + + 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; + }, + + show: function(callback) { + this.callback = callback; + this.$$.overlay.style.display = 'block'; + }, + + hide: function() { + this.$$.overlay.style.display = 'none'; } - } - - 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 ( -
-
-
-
-
Drop files or click here to upload
-
- -
-
- -

Images

-
-
-
- ); - } - - } - - class ImageList extends React.Component { - - render() { - var selectImage = this.props.selectImage; - var images = this.props.data.map(function(image) { - return ( - - ); - }); - return ( -
- {images} - { this.props.hasMore ?
Load More
: null } -
- ); - } - - } - - class Image extends React.Component { - - constructor(){ - super(); - this._dblClickTime = 350; - this._cClickTime = 0; - } - - 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 - } - this._cClickTime = cTime; - } - - render() { - var imageClick = this.imageClick.bind(this); - return ( -
- -
- ); - } - - } - - class ImageInfoPage extends React.Component { - - render() { } - } + }); - if(document.getElementById('image-manager-container')) { - window.ImageManager = React.render( - , - document.getElementById('image-manager-container') - ); - } - -})(); + window.ImageManager = ImageManager; +})(); \ No newline at end of file diff --git a/resources/assets/sass/image-manager.scss b/resources/assets/sass/image-manager.scss index 1c6220fda..456a7a8c3 100644 --- a/resources/assets/sass/image-manager.scss +++ b/resources/assets/sass/image-manager.scss @@ -1,4 +1,4 @@ -#image-manager { +.image-manager-body { background-color: rgb(37, 37, 37); max-width: 90%; max-height: 90%; diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php index bf913c144..8e102e3d3 100644 --- a/resources/views/base.blade.php +++ b/resources/views/base.blade.php @@ -12,7 +12,7 @@ - + @stop \ No newline at end of file diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php index 9806c9232..421344774 100644 --- a/resources/views/pages/edit.blade.php +++ b/resources/views/pages/edit.blade.php @@ -14,6 +14,7 @@ @stop @section('bottom') + @include('pages/image-manager')
@stop \ No newline at end of file diff --git a/resources/views/pages/image-manager.blade.php b/resources/views/pages/image-manager.blade.php index ef52a43d7..5a8dc20ae 100644 --- a/resources/views/pages/image-manager.blade.php +++ b/resources/views/pages/image-manager.blade.php @@ -1,27 +1,22 @@ -