asset widget inserts into tiny

cms/static/js/html-editor.js

@@ -32,9 +32,8 @@ function initHTMLEditor($editor, $prev) {
             title : 'Add Asset',
             image : '/static/img/visual-editor-image-icon.png',
             onclick : function() {
-              ed.focus();
-              ed.selection.setContent('This should open the studio asset picker.');
               $assetWidget = $($('#asset-library-widget').html());
+              $('.insert-asset-button', $assetWidget).bind('click', { editor: ed }, insertAsset);
               $body.append($assetWidget);
             }
         });
@@ -51,6 +50,13 @@ function initHTMLEditor($editor, $prev) {
   $editor.find('.save-button, .cancel-button').bind('click', updatePreview);
 }
 
+function insertAsset(e) {
+  $assetWidget.remove();
+  var editor = e.data.editor;
+  editor.focus();
+  editor.selection.setContent($(this).attr('data-markup'));
+}
+
 function convertVisualToHTML() {
   htmlEditor.setValue($visualEditor.html());
 }

cms/static/sass/_assets.scss

@@ -111,9 +111,19 @@
 
   &.widget {
     position: absolute;
+    left: 50%;
     width: 900px;
     margin-left: -450px;
     z-index: 99999;
+
+    .thumb-col {
+      width: 50px;
+    }
+
+    .thumb {
+      width: 50px;
+      max-height: 50px;
+    }
   }
 
   table {
@@ -168,6 +178,14 @@
       width: 250px;
     }
 
+    .insert-col {
+      width: 80px;
+    }
+
+    .insert-asset-button {
+      @include blue-button;
+    }
+
     .embeddable-xml-input {
       @include box-shadow(none);
       width: 100%;
@@ -176,6 +194,7 @@
     .thumb {
       width: 100px;
       max-height: 80px;
+      overflow: hidden;
 
       img {
         width: 100%;

cms/templates/unit.html

@@ -61,7 +61,7 @@
             <th class="thumb-col"></th>
             <th class="name-col">Name</th>
             <th class="date-col">Date Added</th>
-            <th class="embed-col">Embed</th>
+            <th class="insert-col"></th>
           </tr>
         </thead>
         <tbody id="asset_table_body">
@@ -72,14 +72,14 @@
               </div>
             </td>
             <td class="name-col">
-              <a href="#" class="filename">asset name</a>
+              <a href="#" class="filename">my-image.jpg</a>
               <div class="embeddable-xml"></div>
             </td>
             <td class="date-col">
               date
             </td>
-            <td class="embed-col">
-              <input type="text" class="embeddable-xml-input" value='<img src="#"/>'>
+            <td class="insert-col">
+              <a href="#" class="insert-asset-button" data-markup="<img src='/c4x/Giannattasio/313/asset/ut-logo-350-150.png'/>">Insert</a>
             </td>
           </tr>
           <tr data-id="id">
@@ -95,8 +95,8 @@
             <td class="date-col">
               date
             </td>
-            <td class="embed-col">
-              <input type="text" class="embeddable-xml-input" value='<img src="#"/>'>
+            <td class="insert-col">
+              <a href="#" class="insert-asset-button">Insert</a>
             </td>
           </tr>
           <tr data-id="id">
@@ -112,8 +112,8 @@
             <td class="date-col">
               date
             </td>
-            <td class="embed-col">
-              <input type="text" class="embeddable-xml-input" value='<img src="#"/>'>
+            <td class="insert-col">
+              <a href="#" class="insert-asset-button">Insert</a>
             </td>
           </tr>
         </tbody>

cms/templates/widgets/asset-library-widget.html

-<article class="asset-library widget">
-  <table>
-    <thead>
-      <tr>
-        <th class="thumb-col"></th>
-        <th class="name-col">Name</th>
-        <th class="date-col">Date Added</th>
-        <th class="embed-col">Embed</th>
-      </tr>
-    </thead>
-    <tbody id="asset_table_body">
-      <tr data-id="id">
-        <td class="thumb-col">
-          <div class="thumb">            
-            <img src="/">
-          </div>
-        </td>
-        <td class="name-col">
-          <a href="#" class="filename">asset name</a>
-          <div class="embeddable-xml"></div>
-        </td>
-        <td class="date-col">
-          date
-        </td>
-        <td class="embed-col">
-          <input type="text" class="embeddable-xml-input" value='<img src="#"/>'>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <nav class="pagination wip-box">
-    Page: 
-    <ol class="pages">
-      <li>1</li>
-      <li><a href="#">2</a></li>
-      <li><a href="#">3</a></li>
-      <li><a href="#">4</a></li>
-      <li><a href="#">5</a></li>
-    </ol>
-    <a href="#" class="next">»</a>
-  </nav>
-</article>
\ No newline at end of file