Started react implementation

diff --git a/.gitignore b/.gitignore
index 188291eb802c9a515d4899fa7ec1502abee00e92..a01bdcf715a084ba0390e2071c0ddf3e44885af0 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -6,5 +6,6 @@ Homestead.yaml
 .idea
 /public/plugins
 /public/css
+/public/js/all*
 /public/bower
 /storage/images
\ No newline at end of file

diff --git a/app/Http/routes.php b/app/Http/routes.php
index 3065f7eb50b6b85b088e3e24007fc26144c5390a..0b723b98a89d701883f7b7701dcef6742e936081 100644 (file)
--- a/app/Http/routes.php
+++ b/app/Http/routes.php
@@ -78,7 +78,10 @@ Route::group(['middleware' => 'auth'], function() {
     Route::get('/pages/search/all', 'PageController@searchAll');
 
     Route::get('/', function () {
-        return view('base');
+        return view('home');
+    });
+    Route::get('/home', function () {
+        return view('home');
     });
 
 

diff --git a/config/app.php b/config/app.php
index 690d5fb96bb90c405aca3cebe9cf6168f9dc692f..4667c23f36d396b644e69dca13291fd663f20cb5 100644 (file)
--- a/config/app.php
+++ b/config/app.php
@@ -78,7 +78,7 @@ return [
     |
     */
 
-    'key' => env('APP_KEY', 'SomeRandomString'),
+    'key' => env('APP_KEY', 'AbAZchsay4uBTU33RubBzLKw203yqSqr'),
 
     'cipher' => 'AES-256-CBC',
 

diff --git a/gulpfile.js b/gulpfile.js
index f5d59ff8ece161a814f575dabc02dbc51a0c2eb4..654f78d517954a10584b76b60f20750522516d41 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,5 +1,4 @@
 var elixir = require('laravel-elixir');
-//require('laravel-elixir-livereload');
 
 /*
  |--------------------------------------------------------------------------
@@ -13,5 +12,6 @@ var elixir = require('laravel-elixir');
  */
 
 elixir(function(mix) {
-    mix.sass('styles.scss');//.livereload();
+    mix.sass('styles.scss');
+    mix.babel('image-manager.js');
 });

diff --git a/resources/assets/js/image-manager.js b/resources/assets/js/image-manager.js
new file mode 100644 (file)
index 0000000..0bece98
--- /dev/null
+++ b/resources/assets/js/image-manager.js
@@ -0,0 +1,63 @@
+
+class ImageList extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            images: [],
+            hasMore: false,
+            page: 0
+        };
+    }
+
+    componentDidMount() {
+        $.getJSON('/images/all', data => {
+            this.setState({
+                images: data.images,
+                hasMore: data.hasMore
+            });
+        });
+    }
+
+    loadMore() {
+        this.state.page++;
+        $.getJSON('/images/all/' + this.state.page, data => {
+            this.setState({
+                images: this.state.images.concat(data.images),
+                hasMore: data.hasMore
+            });
+        });
+    }
+
+    render() {
+        var images = this.state.images.map(function(image) {
+            return (
+                <div key={image.id}>
+                    <img src={image.thumbnail}/>
+                </div>
+            );
+        });
+        return (
+            <div className="image-list">
+                {images}
+                <div className="load-more" onClick={this.loadMore}>Load More</div>
+            </div>
+        );
+    }
+
+}
+
+class ImageManager extends React.Component {
+    render() {
+        return (
+            <div id="image-manager">
+                <ImageList/>
+            </div>
+        );
+    }
+}
+
+React.render(
+    <ImageManager />,
+    document.getElementById('container')
+);
\ No newline at end of file

diff --git a/resources/assets/sass/image-manager.scss b/resources/assets/sass/image-manager.scss
index d892f83a9bfd6d5be43a8fc5bb17d832b54e9c36..2bff88dd8b45f3e6b6a88b05a075d6488313144a 100644 (file)
--- a/resources/assets/sass/image-manager.scss
+++ b/resources/assets/sass/image-manager.scss
@@ -9,7 +9,7 @@
   border-radius: 4px;
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
   overflow: hidden;
-  .image-manager-display img {
+  .image-list img {
     border-radius: 0;
     float: left;
     margin: 1px;
@@ -36,34 +36,23 @@
     pointer-events: none;
   }
 }
-.image-manager-left {
-  background-color: #FFF;
+.image-manager-display-wrap {
+  height: 100%;
+  padding-top: 87px;
+  position: absolute;
+  top: 0;width: 100%;
+}
+.image-manager-display {
   height: 100%;
   width: 100%;
   text-align: left;
-  position: relative;
-  .image-manager-display-wrap {
-    height: 100%;
-    padding-top: 87px;
-    position: absolute;
-    top: 0;width: 100%;
-  }
-  .image-manager-display {
-    height: 100%;
-    width: 100%;
-    text-align: left;
-    overflow-y: scroll;
-  }
-  .image-manager-header {
-    z-index: 50;
-    position: relative;
-  }
+  overflow-y: scroll;
 }
 
 #image-manager .load-more {
   width: 150px;
   height: 150px;
-  display: none;
+  display: block;
   float: left;
   text-align: center;
   background-color: #888;

diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index f6233132944ad153565231d655a5aa14441c8ff7..d1450f7cf90e957c5418dc4609cc0a354e88b4d8 100644 (file)
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -10,6 +10,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
     <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script>
+    <script src="https://fb.me/react-0.13.3.js"></script>
     <script>
         $.fn.smoothScrollTo = function() {
             if(this.length === 0) return;
@@ -62,5 +63,7 @@
     </section>
 
 @yield('bottom')
+
+    <script src="/js/all.js"></script>
 </body>
 </html>

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
new file mode 100644 (file)
index 0000000..e158087
--- /dev/null
+++ b/resources/views/home.blade.php
@@ -0,0 +1,5 @@
+@extends('base')
+
+@section('content')
+    <div id="container"></div>
+@stop
\ No newline at end of file