Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Got basics working using vue.js

Browse Source
This commit is contained in:
Dan Brown 2015-08-13 22:15:56 +01:00
parent b269b3bb3e
commit 6e4764cde5
7 changed files with 91 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

@ -13,5 +13,5 @@ var elixir = require('laravel-elixir');
elixir(function(mix) { elixir(function(mix) {
mix.sass('styles.scss'); mix.sass('styles.scss');
mix.babel('image-manager.js', 'public/js/image-manager.js'); mix.scripts('image-manager.js', 'public/js/image-manager.js');
}); });

190
resources/assets/js/image-manager.js
View File

@ -1,46 +1,40 @@
(function() { (function() {
var ImageManager = new Vue({
class ImageManager extends React.Component { el: '#image-manager',
constructor(props) { data: {
super(props);
this.state = {
images: [], images: [],
hasMore: false, hasMore: false,
page: 0 page: 0,
}; cClickTime: 0
} },
show(callback) { created: function() {
$(React.findDOMNode(this)).show(); // Get initial images
this.callback = callback; this.fetchData(this.page);
} },
hide() { ready: function() {
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
});
});
// Create dropzone // 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', url: '/upload/image',
init: function() { init: function() {
var dz = this; var dz = this;
@ -48,129 +42,45 @@
data.append("_token", document.querySelector('meta[name=token]').getAttribute('content')); data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
}); });
this.on("success", function(file, data) { this.on("success", function(file, data) {
_this.state.images.unshift(data); _this.images.unshift(data);
_this.setState({ $(file.previewElement).fadeOut(400, function() {
images: _this.state.images dz.removeFile(file);
});
//$(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
}); });
}); });
} }
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>
);
}
} imageClick: function(image) {
var dblClickTime = 380;
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 cTime = (new Date()).getTime();
var timeDiff = cTime - this._cClickTime; var timeDiff = cTime - this.cClickTime;
console.log(timeDiff); if(this.cClickTime !== 0 && timeDiff < dblClickTime) {
if(this._cClickTime !== 0 && timeDiff < this._dblClickTime) {
// DoubleClick // DoubleClick
this.setImage(); if(this.callback) {
this.callback(image);
}
this.hide();
} else { } else {
// Single Click // Single Click
} }
this._cClickTime = cTime; this.cClickTime = cTime;
} },
render() { show: function(callback) {
var imageClick = this.imageClick.bind(this); this.callback = callback;
return ( this.$$.overlay.style.display = 'block';
<div> },
<img onClick={imageClick} src={this.props.image.thumbnail}/>
</div> 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')
);
}
})(); })();

2
resources/assets/sass/image-manager.scss
View File

@ -1,4 +1,4 @@
#image-manager { .image-manager-body {
background-color: rgb(37, 37, 37); background-color: rgb(37, 37, 37);
max-width: 90%; max-width: 90%;
max-height: 90%; max-height: 90%;

2
resources/views/base.blade.php
View File

@ -12,7 +12,7 @@
<script src="/bower/bootstrap/dist/js/bootstrap.js"></script> <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower/jquery-sortable/source/js/jquery-sortable.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="/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> <script>
$.fn.smoothScrollTo = function() { $.fn.smoothScrollTo = function() {
if(this.length === 0) return; if(this.length === 0) return;

3
resources/views/home.blade.php
View File

@ -6,9 +6,10 @@
@section('bottom') @section('bottom')
@include('pages/image-manager')
<div id="image-manager-container"></div> <div id="image-manager-container"></div>
<script src="/js/image-manager.js"></script> <script src="/js/image-manager.js"></script>
<script> <script>
window.ImageManager.show(); //window.ImageManager.show();
</script> </script>
@stop @stop

1
resources/views/pages/edit.blade.php
View File

@ -14,6 +14,7 @@
@stop @stop
@section('bottom') @section('bottom')
@include('pages/image-manager')
<div id="image-manager-container"></div> <div id="image-manager-container"></div>
<script src="/js/image-manager.js"></script> <script src="/js/image-manager.js"></script>
@stop @stop

45
resources/views/pages/image-manager.blade.php
View File

@ -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>
<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> </div>
</section>