Got basics working using vue.js

diff --git a/gulpfile.js b/gulpfile.js
index 6358835a7e69d7ae9146d6021d7434efe8c7d22d..f6a86d4c983029100a52f0db8ed60927a858b398 100644 (file)
--- 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 4d24e35c8e9c66a1dd87a3a9508da4ffcd46ce15..3fa72c5bd85d75cf9a03e4749b63fe363ec976bd 100644 (file)
--- 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
+            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

diff --git a/resources/assets/sass/image-manager.scss b/resources/assets/sass/image-manager.scss
index 1c6220fda3dd8fc584a94d2707e9c7fa76401eb9..456a7a8c3df64575a876ca006273da9a931d3b27 100644 (file)
--- 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 bf913c1446158dd1cda6b0876708df7e6096b5a6..8e102e3d34095a2a07dbd8add7701ca1e5848942 100644 (file)
--- 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 8466c6d8874af01ed6e01483e71b6be1c6e71067..a2e283482fb9b8b88dbe43f16d6fe5030c8714e3 100644 (file)
--- 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 9806c9232db938042fcac787991d215338abbfea..4213447746d94da474f955a99f07bd7622e3e2b9 100644 (file)
--- 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 ef52a43d721036d034b895dce612a49721d5d8ae..5a8dc20ae924c016164d9c983592105650cdedd1 100644 (file)
--- 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>