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 (
- <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() {
- 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 (
- <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
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 @@
<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;
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 8466c6d88..a2e283482 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -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
\ 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')
<div id="image-manager-container"></div>
<script src="/js/image-manager.js"></script>
@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 @@
-<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 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>
- <form action="/upload/image"
- class="dropzone"
- id="image-upload-dropzone">
- {!! csrf_field() !!}
- </form>
+ <div class="image-manager-sidebar">
+ <button class="neg button image-manager-close">x</button>
+ <h2>Images</h2>
+ </div>
</div>
- {{--<div class="sidebar">--}}
-
- {{--</div>--}}
</div>
-</section>
\ No newline at end of file
+</div>