Merge pull request #931 from MITx/feature/cas/tomg/embed-links

Feature/cas/tomg/embed links

cms/static/js/base.js

@@ -21,12 +21,12 @@ $(document).ready(function() {
     $('.unit-history ol a').bind('click', showHistoryModal);
     $modal.bind('click', hideModal);
     $modalCover.bind('click', hideHistoryModal);
+    $modalCover.bind('click', hideModal);
     $('.assets .upload-button').bind('click', showUploadModal);
     $('.upload-modal .close-button').bind('click', hideModal);
 
-    $('a.show-xml').toggle(showEmbeddableXML, hideEmbeddableXML);
+    $body.on('click', '.embeddable-xml-input', function(){ $(this).select(); });
 
-    $('a.copy-button').toggle(showEmbeddableXML, hideEmbeddableXML);
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
     $('.save-subsection').bind('click', saveSubsection);
@@ -127,18 +127,6 @@ function removePolicyMetadata(e) {
         _parent_el.appendTo("#policy-to-delete");
 }
 
-function showEmbeddableXML(e) {
-    $ceiling = $(this).parents('tr');
-    if ($ceiling.length === 0) $ceiling = $(this).parents('.upload-modal');
-    $ceiling.find('.embeddable-xml').html('<img src="'+$(this).attr('href')+'"/>');
-}
-function hideEmbeddableXML(e) {
-    $ceiling = $(this).parents('tr');
-    console.log($ceiling.length)
-    if ($ceiling.length === 0) $ceiling = $(this).parents('.upload-modal');
-    $ceiling.find('.embeddable-xml').html("");
-}
-
 
 // This method only changes the ordering of the child objects in a subsection
 function onUnitReordered() {
@@ -354,8 +342,11 @@ function displayFinishedUpload(xhr) {
     if(xhr.status = 200){
         markAsLoaded();
     }
+
     var resp = JSON.parse(xhr.responseText);
-    $('.upload-modal .copy-button').attr('href', xhr.getResponseHeader('asset_url'));
+    $('.upload-modal .embeddable-xml-input').val('<img src="' + xhr.getResponseHeader('asset_url') + '"/>');
+    $('.upload-modal .embeddable').show();
+    $('.upload-modal .file-name').hide();
     $('.upload-modal .progress-fill').html(resp.msg);
     $('.upload-modal .choose-file-button').html('Load Another File').show();
     $('.upload-modal .progress-fill').width('100%');

cms/static/sass/_assets.scss

@@ -9,6 +9,7 @@
     @include blue-button;
     float: left;
     margin-right: 20px;
+    padding: 8px 30px 10px;
     font-size: 12px;
   }
 
@@ -45,6 +46,14 @@
             border-top: none;
           }
         }
+
+        .name-col {
+          font-size: 14px;
+        }
+
+        .date-col {
+          font-size: 12px;
+        }
       }
 
       .thumb-col {
@@ -52,11 +61,16 @@
       }
 
       .date-col {
-        width: 200px;
+        width: 220px;
       }
 
       .embed-col {
-        width: 70px;
+        width: 250px;
+      }
+
+      .embeddable-xml-input {
+        @include box-shadow(none);
+        width: 100%;
       }
 
       .thumb {
@@ -156,6 +170,22 @@
 		text-align: center;
 	}
 
+  .embeddable {
+    display: none;
+    margin: 30px 0 130px;
+
+    label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 700;
+    }
+  }
+
+  .embeddable-xml-input {
+    @include box-shadow(none);
+    width: 400px;
+  }
+
 	.copy-button {
 		@include white-button;
 		display: none;

cms/templates/asset_index.html

@@ -28,7 +28,7 @@
         {{uploadDate}}
       </td>
       <td class="embed-col">
-        <a class="show-xml" href="{{url}}">XML</a>
+        <input type="text" class="embeddable-xml-input" value='<img src="{{url}}"/>'>
       </td>
     </tr>
   </script>
@@ -68,7 +68,7 @@
                 ${asset['uploadDate']}
               </td>
               <td class="embed-col">
-                <a class="show-xml" href="${asset['url']}">XML</a>
+                <input type="text" class="embeddable-xml-input" value='<img src="${asset['url']}"/>'>
               </td>
             </tr>
           % endfor
@@ -97,8 +97,10 @@
 			<div class="progress-bar">
 				<div class="progress-fill"></div>
 			</div>
-      <div class="embeddable-xml"></div>
-      <a href="#" class="copy-button">Show Embeddable XML</a>
+      <div class="embeddable">
+        <label>Embeddable XML:</label>
+        <input type="text" class="embeddable-xml-input" value='<img src="${asset['url']}"/>'>
+      </div>
 			<form class="file-chooser" action="${upload_asset_callback_url}"
                                 method="post" enctype="multipart/form-data">
 				<a href="#" class="choose-file-button">Choose File</a>