Got basics working using vue.js
This commit is contained in:
Dan Brown
parent
b269b3bb3e
commit
6e4764cde5
7 changed files with 91 additions and 184 deletions
|
|
@ -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');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,46 +1,40 @@
|
|||
|
||||
(function() {
|
||||
|
||||
var ImageManager = new Vue({
|
||||
|
||||
class ImageManager extends React.Component {
|
||||
el: '#image-manager',
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: {
|
||||
images: [],
|
||||
hasMore: false,
|
||||
page: 0
|
||||
};
|
||||
}
|
||||
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), {
|
||||
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;
|
||||
|
|
@ -48,129 +42,45 @@
|
|||
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);
|
||||
//})
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadMore() {
|
||||
this.state.page++;
|
||||
$.getJSON('/images/all/' + this.state.page, data => {
|
||||
this.setState({
|
||||
images: this.state.images.concat(data.images),
|
||||
hasMore: data.hasMore
|
||||
_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 {
|
||||
|
||||
constructor(){
|
||||
super();
|
||||
this._dblClickTime = 350;
|
||||
this._cClickTime = 0;
|
||||
}
|
||||
|
||||
setImage() {
|
||||
this.props.selectImage(this.props.image);
|
||||
}
|
||||
|
||||
imageClick() {
|
||||
imageClick: function(image) {
|
||||
var dblClickTime = 380;
|
||||
var cTime = (new Date()).getTime();
|
||||
var timeDiff = cTime - this._cClickTime;
|
||||
console.log(timeDiff);
|
||||
if(this._cClickTime !== 0 && timeDiff < this._dblClickTime) {
|
||||
var timeDiff = cTime - this.cClickTime;
|
||||
if(this.cClickTime !== 0 && timeDiff < dblClickTime) {
|
||||
// DoubleClick
|
||||
this.setImage();
|
||||
if(this.callback) {
|
||||
this.callback(image);
|
||||
}
|
||||
this.hide();
|
||||
} else {
|
||||
// Single Click
|
||||
}
|
||||
this._cClickTime = cTime;
|
||||
}
|
||||
this.cClickTime = cTime;
|
||||
},
|
||||
|
||||
render() {
|
||||
var imageClick = this.imageClick.bind(this);
|
||||
return (
|
||||
<div>
|
||||
<img onClick={imageClick} src={this.props.image.thumbnail}/>
|
||||
</div>
|
||||
);
|
||||
show: function(callback) {
|
||||
this.callback = callback;
|
||||
this.$$.overlay.style.display = 'block';
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.$$.overlay.style.display = 'none';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class ImageInfoPage extends React.Component {
|
||||
});
|
||||
|
||||
render() {
|
||||
window.ImageManager = ImageManager;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(document.getElementById('image-manager-container')) {
|
||||
window.ImageManager = React.render(
|
||||
<ImageManager />,
|
||||
document.getElementById('image-manager-container')
|
||||
);
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#image-manager {
|
||||
.image-manager-body {
|
||||
background-color: rgb(37, 37, 37);
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
|
||||
<script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script>
|
||||
<script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
|
||||
<script src="https://fb.me/react-0.13.3.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.10/vue.min.js"></script>
|
||||
<script>
|
||||
$.fn.smoothScrollTo = function() {
|
||||
if(this.length === 0) return;
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@
|
|||
|
||||
|
||||
@section('bottom')
|
||||
@include('pages/image-manager')
|
||||
<div id="image-manager-container"></div>
|
||||
<script src="/js/image-manager.js"></script>
|
||||
<script>
|
||||
window.ImageManager.show();
|
||||
//window.ImageManager.show();
|
||||
</script>
|
||||
@stop
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
@stop
|
||||
|
||||
@section('bottom')
|
||||
@include('pages/image-manager')
|
||||
<div id="image-manager-container"></div>
|
||||
<script src="/js/image-manager.js"></script>
|
||||
@stop
|
||||
|
|
@ -1,27 +1,22 @@
|
|||
<section class="overlay" style="display:none;">
|
||||
{{--<section class="overlay">--}}
|
||||
<div id="image-manager">
|
||||
<div class="image-manager-left">
|
||||
<div class="image-manager-header">
|
||||
<button type="button" class="button neg float right" data-action="close">Close</button>
|
||||
<div class="image-manager-title">Image Library</div>
|
||||
</div>
|
||||
<div class="image-manager-display-wrap">
|
||||
<div class="image-manager-display">
|
||||
<div class="uploads"></div>
|
||||
<div class="images">
|
||||
<div class="load-more">Load More</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form action="/upload/image"
|
||||
class="dropzone"
|
||||
id="image-upload-dropzone">
|
||||
{!! csrf_field() !!}
|
||||
</form>
|
||||
</div>
|
||||
{{--<div class="sidebar">--}}
|
||||
|
||||
{{--</div>--}}
|
||||
<div id="image-manager">
|
||||
<div class="overlay" v-el="overlay" style="display:none;">
|
||||
<div class="image-manager-body">
|
||||
<div class="image-manager-content">
|
||||
<div class="dropzone-container" v-el="dropZone">
|
||||
<div class="dz-message">Drop files or click here to upload</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="image-manager-list">
|
||||
<div v-repeat="image: images">
|
||||
<img v-attr="src: image.thumbnail" v-on="click: imageClick(image)" alt="@{{image.name}}">
|
||||
</div>
|
||||
<div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-manager-sidebar">
|
||||
<button class="neg button image-manager-close">x</button>
|
||||
<h2>Images</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue