Browse Source

Added image previewing.

KrisVos130 9 years ago
parent
commit
e23ff0d06b
2 changed files with 22 additions and 1 deletions
  1. 3 0
      app/client/client.js
  2. 19 1
      app/client/templates/stations.html

+ 3 - 0
app/client/client.js

@@ -807,6 +807,9 @@ Template.stations.events({
     "click .preview-button": function(e){
     "click .preview-button": function(e){
         Session.set("song", this);
         Session.set("song", this);
     },
     },
+    "click #previewImageButton": function() {
+        $("#preview-image").attr("src", Session.get("song").img);
+    },
     "click .edit-queue-button": function(e){
     "click .edit-queue-button": function(e){
         Session.set("song", this);
         Session.set("song", this);
         Session.set("genre", $(e.toElement).data("genre"));
         Session.set("genre", $(e.toElement).data("genre"));

+ 19 - 1
app/client/templates/stations.html

@@ -82,7 +82,7 @@
                               <td>{{id}}</td>
                               <td>{{id}}</td>
                               <td>{{likes}}</td>
                               <td>{{likes}}</td>
                               <td>{{dislikes}}</td>
                               <td>{{dislikes}}</td>
-                              <td class="column-small"><a href="{{img}}" target="_blank"><button class="btn btn-primary preview-button">Preview Image</button></a></td>
+                              <td class="column-small"><button class="btn btn-primary preview-button" id="previewImageButton" data-toggle="modal" data-target="#previewImageModal">Preview Image</button></td>
                               <td class="column-small"><button class="btn btn-primary preview-button" data-toggle="modal" data-target="#previewModal">Preview</button></td>
                               <td class="column-small"><button class="btn btn-primary preview-button" data-toggle="modal" data-target="#previewModal">Preview</button></td>
                               <td class="column-small"><button class="btn btn-primary edit-playlist-button" data-genre="{{../type}}" data-toggle="modal" data-target="#editModal">Edit</button></td>
                               <td class="column-small"><button class="btn btn-primary edit-playlist-button" data-genre="{{../type}}" data-toggle="modal" data-target="#editModal">Edit</button></td>
                               <td class="column-small"><button class="btn btn-danger remove-song-button" data-genre="{{../type}}"><i class="fa fa-ban"></i></button></td>
                               <td class="column-small"><button class="btn btn-danger remove-song-button" data-genre="{{../type}}"><i class="fa fa-ban"></i></button></td>
@@ -153,6 +153,24 @@
           </div>
           </div>
       </div>
       </div>
 
 
+        <div id="previewImageModal" class="modal fade" role="dialog">
+            <div class="modal-dialog">
+                <!-- Modal content-->
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        <h4 class="modal-title">Preview Image</h4>
+                    </div>
+                    <div class="modal-body">
+                        <img id="preview-image" height="210px" width="210px" src=""/>
+                    </div>
+                    <div class="modal-footer">
+                        <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
       <div id="editModal" class="modal fade" role="dialog">
       <div id="editModal" class="modal fade" role="dialog">
           <div class="modal-dialog">
           <div class="modal-dialog">
               <!-- Modal content-->
               <!-- Modal content-->