asset_host_core 2.0.0.beta

data/app/assets/javascripts/asset_host_core/templates/after_upload_button.jst.eco

@@ -0,0 +1,3 @@
+<a id="afterUpload" class="btn btn-success" style="margin-top: 10px;" href="#">
+    <%= @text %>
+</a>

data/app/assets/javascripts/asset_host_core/templates/asset_drop_asset.jst.eco

@@ -0,0 +1,4 @@
+<button class="btn btn-danger delete">x</button>
+<%- if @asset.tags then @asset.tags[ AssetHost.SIZES.thumb ] else "INVALID" %>
+<%= @asset.title %>
+<small style="display:block;"><%= @chop %></small>

data/app/assets/javascripts/asset_host_core/templates/asset_modal.jst.eco

@@ -0,0 +1,13 @@
+<div class="ah_asset_browse modal-body">
+    <%- @asset.tags[ AssetHost.SIZES.modal ] %>
+    <h1><%= @asset.title %></h1>
+    <h2><%= @asset.owner %></h2>
+    <h2><%= @asset.size %></h2>
+    <p><%= @asset.caption %></p>
+    <br style="clear:both;"/>
+</div>
+<div class="modal-footer">
+    <a href="#" class="btn close">Close</a>
+    <% if @admin: %><a class="admin btn">View in Admin</a><% end %>
+    <% if @select:%><a class="select btn btn-primary">Select Asset</a><% end %>
+</div>

data/app/assets/javascripts/asset_host_core/templates/asset_preview.jst.eco

@@ -0,0 +1,35 @@
+<h4><%= @asset.title || @asset.id %></h4>
+
+<div class="row">
+    <div class="span6 asset-preview">
+        <div class="asset-wrapper">
+            <%- @asset.tags[@tag] %>
+        </div>
+        <table style="margin-top: 10px;">
+            <tr><td style="width:100px;"><strong style="margin-right:10px;">Asset ID</strong></td><td><%= @asset.id %></td></tr>
+            <tr>
+                <td><strong style="margin-right:10px;">Size</strong></td>
+                <td><%= @asset.sizes[@tag].width %> x <%= @asset.sizes[@tag].height %></td>
+            </tr>
+
+            <tr>
+                <td><strong style="margin-right:10px;">URL</strong></td>
+                <td><input type="text" value="<%= @asset.urls[@tag] %>" style="margin-right:10px;width:300px;" />(<a href="<%= @asset.urls[@tag] %>" target="_blank">link</a>)</td>
+            </tr>
+
+            <tr>
+                <td><strong style="margin-right:10px;">Tag</strong></td>
+                <td><input type="text" value="<%= @asset.tags[@tag] %>" style="width:300px;" /></td>
+            </tr>
+        </table>
+    </div>
+
+    <div class="span2">
+        <h4>Sizes</h4>
+        <ul class="asset_sizes">
+        <% for code, size of @asset.sizes: %>
+            <li data-size="<%= code %>" <% if (@tag == code): %>class="selected"<% end %>><%= code %></li>
+        <% end %>
+        </ul>
+    </div>
+</div>

data/app/assets/javascripts/asset_host_core/templates/asset_search.jst.eco

@@ -0,0 +1,2 @@
+<input type="text" style="width: 200px" value="<%= @query %>"/>
+<button class="btn">Search</button>

data/app/assets/javascripts/asset_host_core/templates/browser_asset.jst.eco

@@ -0,0 +1 @@
+<button data-asset-url="<%= @url %>" draggable="true"><%- @tags[ AssetHost.SIZES.thumb ] %></button>

data/app/assets/javascripts/asset_host_core/templates/browser_asset_tip.jst.eco

@@ -0,0 +1,3 @@
+<b><%= @title || "No Title"%></b>
+<br/><%= @owner || "No Credit" %>
+<br/><%= @size %>

data/app/assets/javascripts/asset_host_core/templates/edit_modal.jst.eco

@@ -0,0 +1,40 @@
+<div class="" style="display:inline;float:left;width: 324px;margin-right: 12px">
+    <%- @tags[ AssetHost.SIZES.modal ] %>
+    <br/><i>Uploaded at <%= @size %></i>
+</div>
+<div class="formtastic">
+    <button class="admin btn">View in Admin</button>
+
+    <fieldset>
+        <h3>Asset Metadata (Global)</h3>
+        <ol>
+            <li class="input stringish">
+                <label for="title" class="label">Title</label>
+                <input id="title" name="title" value="<%= @title %>">
+            </li>
+            <li class="input stringish">
+                <label for="owner" class="label">Credit</label>
+                <input id="owner" name="owner" value="<%= @owner %>">
+            </li>
+            <li class="input text">
+                <label for="notes" class="label">Notes</label>
+                <textarea id="notes" name="notes" rows=4><%= @notes %></textarea>
+            </li>
+        </ol>
+    </fieldset>
+</div>
+<br style="clear:both;line-height: 0"/>
+
+<h3 style="margin-top: 0">Story Caption:</h3>
+<textarea rows="4" style="width: 98%" id="caption"><%= @caption %></textarea>
+
+<div class="notice save_caption">
+    <input type="checkbox" id="save_caption_check"/> Also save caption back to AssetHost for future uses?
+</div>
+
+<div class="alert meta_dirty">
+    <strong>Note:</strong> Metadata (title, credit, notes) has been changed and will be saved to AssetHost.
+</div>
+
+<button class="save btn btn-primary">Save Caption</button>
+

data/app/assets/javascripts/asset_host_core/templates/import_help.jst.eco

@@ -0,0 +1,59 @@
+<div id="importHelp" class="modal hide fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Import Help</h3>
+  </div>
+  <div class="modal-body">
+    To import an Asset, you can:
+    <ul>
+      <li>Drag an image file into the Drop area.</li>
+      <li>Paste in a URL/Key:
+        <table class="table table-condensed table-striped" style="font-size:12px;">
+          <thead>
+            <tr>
+              <th>Service</th>
+              <th>Type</th>
+              <th>Examples</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>YouTube</td>
+              <td>URL</td>
+              <td>http://www.youtube.com/watch?v=a1Y73sPHKxw<br />
+                <strong>Note:</strong> Poster images for YouTube videos are trimmed of any black letterboxing. Add <code>?ah-noTrim</code> to the URL to bypass this.</td>
+            </tr>
+            <tr>
+              <td>Vimeo</td>
+              <td>URL</td>
+              <td>http://vimeo.com/29695463</td>
+            </tr>
+            <tr>
+              <td>Flickr</td>
+              <td>URL</td>
+              <td><ul><li>http://www.flickr.com/photos/scpr/6098495440/</li><li>http://farm7.staticflickr.com/6191/6098495440_aff9c9b793_o.jpg</li></ul></td>
+            </tr>
+            <tr>
+              <td>AssetHost</td>
+              <td>URL</td>
+              <td>http://a.scpr.org/i/b2186724bb63bfd1af85de5354d1ecc0/60623-small.jpg</td>
+            </tr>
+            <tr>
+              <td>Brightcove</td>
+              <td>KEY</td>
+              <td>brightcove:2104029225001<br /><i>Format:</i> brightcove:videoid</td>
+            </tr>
+            <tr>
+              <td>Image File</td>
+              <td>URL</td>
+              <td>http://i.imgur.com/z843Gtu.jpg</td>
+            </tr>
+          </tbody>
+        </table>
+      </li>
+    </ul>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn" data-dismiss="modal">Close</a>
+  </div>
+</div>

data/app/assets/javascripts/asset_host_core/templates/pagination_link.jst.eco

@@ -0,0 +1 @@
+<li data-page="<%= @page %>" <% if @current: %>class="active"<% end %> ><a href="#"><%= @page %></a></li>

data/app/assets/javascripts/asset_host_core/templates/pagination_links.jst.eco

@@ -0,0 +1,13 @@
+<br style="clear: both;"/>
+
+<ul>
+<% if @current > 1: %>
+    <li data-page="<%= @current - 1 %>" class="prev"><a href="#"><%- @options.prev_label %></a></li>
+<% end %>
+
+<%- @links %>
+
+<% if @current + 1 <= @pages: %>
+    <li data-page="<%= @current + 1 %>" class="next"><a href="#"><%- @options.next_label %></a></li>
+<% end %>
+</ul>

data/app/assets/javascripts/asset_host_core/templates/queued_file.jst.eco

@@ -0,0 +1,11 @@
+<% if !@xhr: %>
+    <button class="btn btn-danger remove">x</button>
+    <button class="btn btn-primary upload">Upload</button>
+<% end %>
+
+<% if @STATUS == 'uploading': %>
+    <b>(<%= @PERCENT %>%)</b>
+    <br/>
+<% end %>
+
+<%= @name %>: <%= @size %>

data/app/assets/javascripts/asset_host_core/templates/save_and_close_view.jst.eco

@@ -0,0 +1,4 @@
+<button id="saveAndClose" class="btn btn-large btn-primary">
+    Save and Close
+    <% if @count: %>(<%= @count %> Assets)<% end %>
+</button>

data/app/assets/javascripts/asset_host_core/templates/upload_all_button.jst.eco

@@ -0,0 +1,4 @@
+<button id="uploadAll" class="btn btn-large btn-warning">
+    Upload All
+    <% if @count: %>(<%= @count %> Images)<% end %>
+</button>

data/app/assets/javascripts/asset_host_core/templates/url_input.jst.eco

@@ -0,0 +1,8 @@
+<h6>Import via URL/Key</h6>
+<input type="text" name="url_input" id="urlInput" style="display:inline-block;" /><a class="add btn" href="#" style="display:inline-block;">Import</a>
+<a href="#importHelp" role="button" class="btn btn-primary" data-toggle="modal" style="margin-top:10px;">Importing Help</a>
+
+<div id="importError" class="alert alert-error importNotification" style="display:none; margin-top: 10px"></div>
+<div id="importSuccess" class="alert alert-success importNotification" style="display:none; margin-top: 10px"></div>
+
+<%- JST['asset_host_core/templates/import_help']() %>

data/app/assets/stylesheets/asset_host_core/application.css.scss

@@ -0,0 +1,384 @@
+@import "bootstrap";
+
+body {
+  background: #ccc;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar {
+    margin-bottom: 0;
+}
+
+#content {
+    background: #fff;
+    padding: $gridGutterWidth;
+}
+
+br.clear {
+    clear: both;
+    line-height: 0;
+}
+
+hr.tight {
+  margin: 0 0 12px 0;
+}
+
+
+.blocks.blockcaps, .blocks .blockcaps {
+  text-transform: uppercase;
+}
+
+.b_right {
+  text-align: right;
+}
+
+.greyed {
+  color: #666;
+}
+
+/* admin */
+
+ul.asset_sizes {
+  list-style-type: none;
+
+    li {
+      @extend .btn;
+      display: block;
+    }
+
+    li.selected {
+        @extend .btn-primary;
+    }
+}
+
+.asset-wrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* 16/9 ratio */
+  height: 0;
+  overflow: hidden;
+  margin-bottom: 1.3em;
+
+  iframe, object, embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-height: 260px;
+  }
+
+  img {
+    max-width: 100%;
+    width: auto;
+  }
+}
+
+.assetbox {
+  margin-right: -12px;
+
+  ul {
+    list-style-type: none;
+    margin-right: -12px;
+    padding: 0;
+
+    li {
+      display: inline;
+      float: left;
+      width: 88px;
+      height: 88px;
+      margin-right: 9px;
+      margin-bottom: 9px;
+      background: #eee;
+
+      button {
+          padding: 0;
+          border: 1px solid #ddd;
+
+          img {
+
+          }
+      }
+
+      button:hover {
+          cursor: pointer;
+        }
+
+
+      a {
+        color: inherit;
+
+        :hover {
+          text-decoration: none;
+        }
+      }
+
+      span {
+          display: none;
+      }
+    }
+  }
+}
+
+.tooltip {
+  h3 {
+      margin-top: 0;
+      margin-bottom: 2px;
+      font: normal 12px Arial, Helvetica, sans-serif;
+      color: #fff;
+  }
+}
+
+#replacedrop, #filedrop {
+    background: #ffe;
+    border: 1px solid darken(#ffc,40%);
+    min-height: 100px;
+    padding-bottom: 50px;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    background: #ffc;
+
+    li {
+      display: block;
+      padding: 2px;
+      margin-bottom: 2px;
+      border: 1px solid #aaa;
+      overflow: auto;
+      background: #fff;
+
+      button {
+         display: inline;
+         float: right;
+      }
+
+      img {
+          display: inline;
+          float: left;
+          margin: -2px 4px 0 -2px;
+      }
+    }
+
+
+    li.help {
+        font-size: 16px;
+        color: #aaa;
+        text-align: center;
+        padding: 12px;
+    }
+
+    .ready {
+      background: #efc;
+    }
+
+    .uploading {
+      background: #cfc;
+    }
+
+    .complete {
+      background: #afa;
+    }
+
+  }
+
+  ul.uploads li {
+           min-height: 32px;
+    }
+
+
+  p.ahUp_upbutton {
+     display: block;
+     margin: 0;
+     padding: 4px;
+     border: 1px solid #aaa;
+     background: #fff;
+     text-align: center;
+     font-weight: bold;
+  }
+
+}
+
+.search_box {
+    input {
+       padding: 4px;
+       font-size: 14px;
+       margin-bottom: 0;
+    }
+}
+
+form.formtastic, div.formtastic {
+    ol {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .help-inline {
+        color: #999;
+    }
+
+  .input {
+        margin-bottom: 4px;
+
+      .inline-hints {
+        color: #777 !important;
+        font-size: 12px;
+        margin-top: 2px;
+        margin-bottom: 2px;
+      }
+    }
+
+  textarea, input {
+      width: 96%;
+  }
+
+  .checkbox input {
+      width: inherit;
+  }
+
+  label {
+    font-size: 14px;
+  }
+
+  ol ol {
+      background: inherit;
+      padding: inherit;
+  }
+
+  li fieldset legend {
+      font: inherit;
+      color: inherit;
+  }
+
+  .required label {
+    font-weight: bold;
+  }
+
+}
+
+
+/*
+ public
+*/
+
+#saveAndClose {
+    margin: 0 auto 5px auto;
+}
+
+#assets_loading {
+    position: absolute;
+    height: 490px;
+    width: 620px;
+    background: #fcc;
+}
+
+ul.assets, ul.uploads li {
+    overflow: auto;
+
+    p {
+       margin: 2px 0;
+    }
+
+    img {
+        max-width: 80px;
+    }
+}
+
+#my_assets {
+    min-height: 200px;
+    background: #ffc;
+    padding-bottom: 40px;
+
+    ul {
+       margin: 0;
+       list-style-type: none;
+
+       li {
+           clear: both;
+           background: #eee;
+           border: 1px solid #aaa;
+           padding: 2px;
+           margin-bottom: 4px;
+
+           button {
+              display: inline;
+              float: right;
+           }
+
+           img {
+               display: inline;
+               float: left;
+               margin: -2px 4px 0 -2px;
+           }
+       }
+   }
+
+   ul.assets li {
+       min-height: 86px;
+   }
+
+   ul.uploads li {
+       min-height: 32px;
+   }
+
+   ul.uploads li.uploading {
+       background: #cfc;
+   }
+
+   ul.uploads li.pending {
+       background: #afc;
+   }
+
+   ul.uploads li.complete {
+       background: #afa;
+   }
+}
+
+span.asset_tip {
+    background: #fff;
+    padding: 12px;
+    min-width: 200px;
+}
+
+.ah_asset_browse {
+    margin: 12px;
+
+    img {
+        display: inline;
+        float: right;
+        padding-left: 8px;
+        padding-bottom: 8px;
+        max-width: 200px;
+    }
+
+    h1 {
+        font: 18px/24px normal Arial, Helvetica, sans-serif;
+    }
+
+    h2 {
+        font: 14px/18px normal Arial, Helvetica, sans-serif;
+        color: #444;
+        margin: 0;
+    }
+
+    h3 {
+        color:#84b8d9;
+    }
+}
+
+
+.ah_chooser_url_input {
+  margin-top: 10px;
+  input { margin: 0 5px 0 0; } // Override bootstrap style
+}
+
+.ah_asset_edit {
+    width: 660px;
+    padding: 12px;
+    max-height: inherit;
+}
+
+.replace-asset input {
+  width: 95%;
+}