From b0808a1c24b8f6f7dee0002eeded07521960b6cf Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 15 Aug 2015 11:54:46 +0100
Subject: [PATCH] Added image selection

---
 resources/assets/js/image-manager.js          | 11 +++++++++--
 resources/assets/sass/image-manager.scss      |  8 +++++++-
 resources/views/home.blade.php                |  2 +-
 resources/views/pages/image-manager.blade.php |  6 +++---
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/resources/assets/js/image-manager.js b/resources/assets/js/image-manager.js
index 3fa72c5bd..27deed51e 100644
--- a/resources/assets/js/image-manager.js
+++ b/resources/assets/js/image-manager.js
@@ -9,7 +9,8 @@
             images: [],
             hasMore: false,
             page: 0,
-            cClickTime: 0
+            cClickTime: 0,
+            selectedImage: false
         },
 
         created: function() {
@@ -62,7 +63,7 @@
                     }
                     this.hide();
                 } else {
-                    // Single Click
+                    this.selectedImage = (this.selectedImage===image) ? false : image;
                 }
                 this.cClickTime = cTime;
             },
@@ -72,6 +73,12 @@
                 this.$$.overlay.style.display = 'block';
             },
 
+            overlayClick: function(e) {
+              if(e.target.className==='overlay') {
+                  this.hide();
+              }
+            },
+
             hide: function() {
               this.$$.overlay.style.display = 'none';
             }
diff --git a/resources/assets/sass/image-manager.scss b/resources/assets/sass/image-manager.scss
index 456a7a8c3..15976e733 100644
--- a/resources/assets/sass/image-manager.scss
+++ b/resources/assets/sass/image-manager.scss
@@ -12,8 +12,14 @@
   .image-manager-list img {
     border-radius: 0;
     float: left;
-    margin: 1px;
+    margin: 0;
     cursor: pointer;
+    width: 150px;
+    height: 150px;
+    border: 1px solid transparent;
+    &.selected {
+      border: 3px solid #EEE;
+    }
   }
   position: fixed;
   top: 0;
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index a2e283482..f3195b059 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -10,6 +10,6 @@
     <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/image-manager.blade.php b/resources/views/pages/image-manager.blade.php
index 5a8dc20ae..c68434d7b 100644
--- a/resources/views/pages/image-manager.blade.php
+++ b/resources/views/pages/image-manager.blade.php
@@ -1,6 +1,6 @@
 
 <div id="image-manager">
-    <div class="overlay" v-el="overlay" style="display:none;">
+    <div class="overlay" v-el="overlay" v-on="click: overlayClick" style="display:none;">
         <div class="image-manager-body">
             <div class="image-manager-content">
                 <div class="dropzone-container" v-el="dropZone">
@@ -8,13 +8,13 @@
                 </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}}">
+                        <img v-class="selected: (image==selectedImage)" 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>
+                <button class="neg button image-manager-close" v-on="click: hide()">x</button>
                 <h2>Images</h2>
             </div>
         </div>