Got basics working using vue.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');
 });

 
 (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

-#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
\ No newline at end of file

@@ -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

-<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>