From f16e7b2ede0e78342010511041a2b99515b463c9 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Fri, 16 Nov 2012 13:30:56 -0500
Subject: [PATCH] added asset library widget template

---
 cms/static/js/html-editor.js |   3 +
 cms/static/sass/_assets.scss | 184 ++++++++++++++++++-----------------
 cms/templates/unit.html      |  85 +++++++++++++++-
 3 files changed, 181 insertions(+), 91 deletions(-)

diff --git a/cms/static/js/html-editor.js b/cms/static/js/html-editor.js
index 20f2949e62..2a562e7966 100644
--- a/cms/static/js/html-editor.js
+++ b/cms/static/js/html-editor.js
@@ -2,6 +2,7 @@ var $body;
 var $htmlPreview;
 var $htmlEditor;
 var $visualEditor;
+var $assetWidget;
 var visualEditor;
 var htmlEditor;
 
@@ -33,6 +34,8 @@ function initHTMLEditor($editor, $prev) {
             onclick : function() {
               ed.focus();
               ed.selection.setContent('This should open the studio asset picker.');
+              $assetWidget = $($('#asset-library-widget').html());
+              $body.append($assetWidget);
             }
         });
       }
diff --git a/cms/static/sass/_assets.scss b/cms/static/sass/_assets.scss
index 29c3d4000d..224353ba3b 100644
--- a/cms/static/sass/_assets.scss
+++ b/cms/static/sass/_assets.scss
@@ -13,94 +13,7 @@
     font-size: 12px;
   }
 
-  .asset-library {
-    @include clearfix;
-
-    table {
-      width: 100%;
-      border-radius: 3px 3px 0 0;
-      border: 1px solid #c5cad4;
-
-      td,
-      th {
-        padding: 10px 20px;
-        text-align: left;
-        vertical-align: middle;
-      }
-
-      thead th {
-        @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
-        background-color: #ced2db;
-        font-size: 12px;
-        font-weight: 700;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-      }
-
-      tbody {
-        background: #fff;
-
-        tr {
-          border-top: 1px solid #c5cad4;
-
-          &:first-child {
-            border-top: none;
-          }
-        }
-
-        .name-col {
-          font-size: 14px;
-        }
-
-        .date-col {
-          font-size: 12px;
-        }
-      }
-
-      .thumb-col {
-        width: 100px;
-      }
-
-      .date-col {
-        width: 220px;
-      }
-
-      .embed-col {
-        width: 250px;
-      }
-
-      .embeddable-xml-input {
-        @include box-shadow(none);
-        width: 100%;
-      }
-
-      .thumb {
-        width: 100px;
-        max-height: 80px;
-
-        img {
-          width: 100%;
-        }
-      }
-    }
-
-    .pagination {
-      float: right;
-      margin: 15px 10px;
-
-      ol, li {
-        display: inline;
-      }
-
-      a {
-        display: inline-block;
-        height: 25px;
-        padding: 0 4px;
-        text-align: center;
-        line-height: 25px;
-      }
-    }
-  }
-    .show-xml {
+  .show-xml {
     @include blue-button;
   }
 }
@@ -191,4 +104,99 @@
 		display: none;
 		margin-bottom: 100px;
 	}
+}
+
+.asset-library {
+  @include clearfix;
+
+  &.widget {
+    position: absolute;
+    width: 900px;
+    margin-left: -450px;
+    z-index: 99999;
+  }
+
+  table {
+    width: 100%;
+    border-radius: 3px 3px 0 0;
+    border: 1px solid #c5cad4;
+
+    td,
+    th {
+      padding: 10px 20px;
+      text-align: left;
+      vertical-align: middle;
+    }
+
+    thead th {
+      @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
+      background-color: #ced2db;
+      font-size: 12px;
+      font-weight: 700;
+      text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+    }
+
+    tbody {
+      background: #fff;
+
+      tr {
+        border-top: 1px solid #c5cad4;
+
+        &:first-child {
+          border-top: none;
+        }
+      }
+
+      .name-col {
+        font-size: 14px;
+      }
+
+      .date-col {
+        font-size: 12px;
+      }
+    }
+
+    .thumb-col {
+      width: 100px;
+    }
+
+    .date-col {
+      width: 220px;
+    }
+
+    .embed-col {
+      width: 250px;
+    }
+
+    .embeddable-xml-input {
+      @include box-shadow(none);
+      width: 100%;
+    }
+
+    .thumb {
+      width: 100px;
+      max-height: 80px;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .pagination {
+    float: right;
+    margin: 15px 10px;
+
+    ol, li {
+      display: inline;
+    }
+
+    a {
+      display: inline-block;
+      height: 25px;
+      padding: 0 4px;
+      text-align: center;
+      line-height: 25px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index d5b86b97e4..c0b67f8448 100644
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -23,7 +23,7 @@
       switch($(this).attr('data-tab')) {
         case 'simple':
           currentEditor = simpleEditor;
-          $(simpleEditor.getWrapperElement()).show();          
+          $(simpleEditor.getWrapperElement()).show();
           $(xmlEditor.getWrapperElement()).hide();
           $(simpleEditor).focus();
           break;
@@ -53,6 +53,85 @@
   <script src="/static/js/tiny_mce/tiny_mce.js"></script>
   <script src="/static/js/tiny_mce/jquery.tinymce.js"></script>
 
+  <script type="text/template" id="asset-library-widget">
+    <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>
+          <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>
+          <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>
+  </script>
+
   <script type="text/template" id="simple-editor-cheatsheet">
     <article class="simple-editor-cheatsheet">
       <div class="cheatsheet-wrapper">
@@ -112,7 +191,7 @@
   <script type="text/template" id="component-actions">
     <div class="component-actions">
       <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
-      <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>  
+      <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>
     </div>
     <a href="#" class="drag-handle"></a>
   </script>
@@ -355,7 +434,7 @@
                   </li>
                 </ol>
               </li>
-            </ol>            
+            </ol>
           </div>
         </div>
       </div>