Added image selection

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';
             }

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;

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

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>