added asset library widget template

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

cms/static/sass/_assets.scss

@@ -13,93 +13,6 @@
     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 {
     @include blue-button;
   }
@@ -192,3 +105,98 @@
 		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

cms/templates/unit.html

@@ -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">