trusty-clipped-extension 1.0.0

data/app/assets/javascripts/admin/prototype_assets.js

@@ -0,0 +1,166 @@
+var Asset = {};
+
+Asset.Upload = Behavior.create({
+  onsubmit: function (e) {
+    if (e) e.stop();
+    var uuid = Asset.GenerateUUID();
+    var ulframe = document.createElement('iframe');
+    ulframe.setAttribute('name', uuid);   // this doesn't work on ie7: will need bodging
+    $('upload_holders').insert(ulframe);
+
+    var form = this.element;
+    var title = form.down('input.textbox').value || form.down('input.file').value;
+    var placeholder = Asset.AddPlaceholder(title);
+
+    form.setAttribute('target', uuid);
+    ulframe.observe('load', function (e) {
+      if (e) e.stop();
+      var response = ulframe.contentDocument.body.innerHTML;
+      if (response && response != "") {
+        placeholder.remove();
+        Asset.AddToList(response);
+        ulframe.remove();
+      }
+    });
+
+    form.submit();
+    $('upload_asset').closePopup();
+
+    // Small delay is required here to let safari assemble the payload
+    // form.down('input').clear().defer();
+    // form.down('input.file').clear().defer();
+  }
+});
+
+
+// this local attachment method works and is much quicker, but it's fragile and doesn't notice radiant configuration changes
+// better to bounce off the server, provided it can be made responsive enough.
+
+// Asset.Attach = Behavior.create({
+//   onclick: function (e) {
+//     if (e) e.stop();
+//     var container = this.element.up('li.asset');
+//     container.addClassName('waiting');
+//     var title = container.down('div.title').innerHTML;
+//     var image = container.down('img');
+//     var uuid = Asset.GenerateUUID();
+//     var asset_id = this.element.getAttribute('rel').split('_').last();
+//     var attachment_field = document.createElement('input');
+//     attachment_field.setAttribute('type', 'hidden');
+//     attachment_field.setAttribute('id', 'page_page_attachments_attributes_' + uuid + '_asset_id');
+//     attachment_field.setAttribute('name', 'page[page_attachments_attributes][' + uuid + '][asset_id]');
+//     attachment_field.value = asset_id;
+//     var placeholder = Asset.AddPlaceholder(title, image, attachment_field);
+//     container.removeClassName('waiting');
+//     placeholder.removeClassName('waiting');
+//   }
+// });
+
+
+
+
+
+
+Asset.Sortable = Behavior.create({
+  initialize: function (e) {
+    this.sorter = Asset.MakeSortable(this.element);
+  }
+});
+
+// Asset-filter and search functions are available wherever the asset_table partial is displayed
+
+Asset.SearchForm = Behavior.create({
+  initialize: function () {
+    this.observer = new Form.Element.Observer(this.element.down('input.search'), 2, Asset.UpdateTable);
+  },
+  onsubmit: function (e) {
+    if (e) e.stop();
+    Asset.UpdateTable(true);
+  }
+});
+
+Asset.MakeSortable = function (element) {
+  var sorter = Sortable.create(element, {
+    overlap: 'horizontal',
+    constraint: false,
+    handle: 'back',
+    onChange: function (e) {
+      Asset.SetPositions();
+      Asset.Notify('Assets reordered. Save page to commit changes.');
+    }
+  });
+  element.addClassName('sortable');
+  Asset.SetPositions();
+  return sorter;
+}
+
+Asset.SetPositions = function () {
+  $('attachment_fields').select('input.pos').each(function (input, index) {
+    input.value = index;
+  });
+}
+
+// originally taken from phpMyAdmin
+Asset.InsertAtCursor = function(field, insertion) {
+  if (document.selection) {  // ie
+    field.focus();
+    var sel = document.selection.createRange();
+    sel.text = insertion;
+  }
+  else if (field.selectionStart || field.selectionStart == '0') {  // moz
+    var startPos = field.selectionStart;
+    var endPos = field.selectionEnd;
+    field.value = field.value.substring(0, startPos) + insertion + field.value.substring(endPos, field.value.length);
+    field.selectionStart = field.selectionEnd = startPos + insertion.length;
+  } else {
+    field.value += value;
+  }
+}
+
+Asset.GenerateUUID = function () {
+  // http://www.ietf.org/rfc/rfc4122.txt
+  var s = [];
+  var hexDigits = "0123456789ABCDEF";
+  for (var i = 0; i < 32; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); }
+  s[12] = "4";                                       // bits 12-15 of the time_hi_and_version field to 0010
+  s[16] = hexDigits.substr((s[16] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
+  return s.join('');
+};
+
+Asset.AddPlaceholder = function (title, image, contents) {
+  var placeholder = document.createElement('li').addClassName('asset').addClassName('waiting');
+  if (contents) placeholder.insert(contents);
+  var front = document.createElement('div').addClassName('front');
+  if (image) front.insert(document.createElement('div').addClassName('thumbnail').insert(image.clone()));
+  placeholder.insert(front);
+  if (!title) title = 'please wait';
+  var back = document.createElement('div').addClassName('back').insert(document.createElement('div').addClassName('title').update(title));
+  placeholder.insert(back);
+  $('attachment_fields').insert(placeholder);
+  Asset.ShowListIfHidden();
+  return placeholder;
+}
+
+Asset.AllWaiting = function (container) {
+  if (!container) container = $('assets_table');
+  container.select('li.asset').each(function (el) { el.addClassName('waiting'); });
+}
+
+
+
+Asset.HideListIfEmpty = function () {
+  var list = $('attachment_fields');
+  if (!list.down('li.asset:not(.detached)')) {
+    list.addClassName('empty');
+    // list.slideUp();
+    Asset.Notify('All assets detached. Save page to commit changes');
+  } else {
+    Asset.Notify('Assets detached. Save page to commit changes');
+  }
+}
+
+Event.addBehavior({
+  'ul#attachment_fields': Asset.Sortable,
+  'form.upload_asset': Asset.Upload,
+  'a.insert_asset': Asset.Insert
+});

data/app/assets/stylesheets/admin/assets.sass

@@ -0,0 +1,224 @@
+@import "compass"
+
+p.asset
+  img.preview
+    border: 5px solid white
+    +box-shadow
+
+.asset_filters
+  float: left
+  padding: 2px 0
+  a
+    +border-radius(100px)
+    color: #555
+    padding: 3px 8px
+    text-decoration: none
+    font-size: 12px
+    &:hover
+      background: #ccc
+    &.pressed
+      background: #888
+      +box-shadow(0, 1px, 1px, #333, inset)
+      color: white
+      text-shadow: 0 1px 0 #333
+      &:hover
+        background: #888
+        +box-shadow(0, 1px, 1px, #333, inset)
+        color: white
+        text-shadow: 0 1px 0 #333
+
+.popup
+  div.toolbar
+    background: white
+    +background-image(linear-gradient(white,#ddd))
+    border-bottom: 1px solid #ccc
+    +single-box-shadow(white, 0, 1px, 0)
+    margin: -20px -20px 0
+    padding: 6px 10px 3px 10px
+    font-size: 95%
+    height: 30px
+    +clearfix
+    .right
+      float: right
+    form.search
+      padding: 4px 2px 0
+      input[type=search]
+        font-size: 12px
+        +border-radius(100px)
+        border: 1px solid #ccc
+        border-top-color: #999
+        border-left-color: #b0b0b0
+        border-right-color: #bbb
+        background: white image_url('admin/search.png') 4px center no-repeat
+        +box-shadow(rgba(black, 0.2), 0, 1px, 0, inset)
+        width: 180px
+        padding: 2px 8px 2px 20px
+
+  #assets_table.assets
+    overflow: auto
+
+
+#upload_holders
+  display: none
+
+#attach_asset
+  .viewport
+    overflow-x: hidden
+    width: 610px
+    height: 310px
+
+.attachment_actions
+  text-align: right
+  margin-bottom: -1em
+  ul
+    +inline-list
+  li
+    padding-left: 1em
+  a
+    color: white !important
+    text-shadow: 1px 1px 0 #888
+
+.assets
+  padding-left: 5px
+  padding-right: 5px
+  ul
+    li.asset
+      display: block
+      float: left
+      margin: 8px 0 0 8px
+      width: 110px
+      height: 110px
+      position: relative
+      line-height: 1.2em
+      .front, .back
+        display: block
+        background: #e6eaed
+        border: 5px solid white
+        position: absolute
+        width: 100px
+        height: 100px
+        text-align: center
+      .front
+        +box-shadow
+        text-align: center
+      .back
+        color: #333
+        overflow: hidden
+        +opacity(0)
+      .title
+        color: #333
+        font-size: 10px
+        overflow: hidden
+        margin: 10px 4px
+        height: 15px
+        line-height: 15px
+        text-overflow: ellipsis
+      .icon
+        height: 63px
+        line-height: 63px
+        img
+          vertical-align: bottom
+      ul.actions
+        li
+          margin: 5px 0
+          padding: 0 10px
+          font-size: 10px
+        a
+          background: #666
+          background: rgba(black, 0.8)
+          +border-radius
+          color: #ddd
+          display: block
+          padding: 2px 10px
+          text-decoration: none
+          &:hover
+            background: #999
+            background: rgba(black, 0.6)
+            color: white
+      &.unsaved
+        .front
+          opacity: 0.4
+      &:hover
+        .back
+          +opacity(1)
+          background: rgba(white, 0.6)
+      &.waiting
+        background-color: #E6EAED
+        .back
+          display: none
+        .front
+          background: transparent url(/images/admin/spinner.gif) no-repeat center center
+          img
+            opacity: 0.2
+
+#attachment_list.assets
+  background: #7e7e7e
+  +border-bottom-radius
+  margin: -1em 0.5em 1em 0.5em
+  overflow-y: hidden
+  overflow-x: auto
+  ul.empty
+    display: none
+  p.note
+    font-size: 80%
+    margin: 0
+    padding: 8px
+    clear: left
+    span.message
+      float: right
+      color: #aaa
+      &.important
+        color: #d99
+  ul.sortable
+    li.asset
+      div.back
+        cursor: move
+
+#assets_table.assets
+  position: relative
+  font-size: 75%
+  p
+    padding: 40px
+      top: 45px
+    color: silver
+    text-align: center
+    font-style: oblique
+  ul
+    clear: both
+    li.asset
+      input
+        display: none
+  div.pagination
+    position: relative
+    overflow: hidden
+    clear: left
+    width: 100%
+    height: 3em
+    padding: 0.5em 0
+    span, a
+      display: block
+      float: left
+      padding: 0.25em
+      margin: 1em 2px 1em 0
+      +border-radius(2px)
+      text-decoration: none
+    span.current
+      color: #000
+      font-weight: bold
+    span.disabled
+      background-color: #eee
+      color: #ccc
+    a
+      background-color: #eee
+      color: #444
+      &:hover
+        background-color: #c00
+        color: #fff
+
+    span
+      color: #888
+    span, a
+      display: block
+      float: left
+      padding: 2px 6px
+      line-height: 1.5em

data/app/controllers/admin/assets_controller.rb

@@ -0,0 +1,67 @@
+class Admin::AssetsController < Admin::ResourceController
+  paginate_models(:per_page => 50)
+  
+  def index
+    assets = Asset.scoped({:order => "created_at DESC"})
+    
+    @term = params[:search] || ''
+    assets = assets.matching(@term) if @term && !@term.blank?
+    
+    @types = params[:filter] ? params[:filter].split(",") : []
+    if @types.include?('all')
+      params[:filter] = nil
+    elsif @types.any?
+      assets = assets.of_types(@types)
+    end
+    
+    @assets = paginated? ? assets.paginate(pagination_parameters) : assets.all
+    respond_to do |format|
+
+      format.js {
+        @page = Page.find_by_id(params[:page_id])
+        render :partial => 'asset_table', :locals => {:with_pagination => true}
+      }
+      format.html { render }
+    end
+  end
+  
+  def create
+    @assets, @page_attachments = [], []
+    params[:asset][:asset].to_a.each do |uploaded_asset|
+      @asset = Asset.create(:asset => uploaded_asset, :title => params[:asset][:title], :caption => params[:asset][:caption])
+      if params[:for_attachment]
+        @page = Page.find_by_id(params[:page_id]) || Page.new
+        @page_attachments << @page_attachment = @asset.page_attachments.build(:page => @page)
+      end
+      @assets << @asset
+    end
+    if params[:for_attachment]
+      render :partial => 'admin/page_attachments/attachment', :collection => @page_attachments
+    else 
+      response_for :create
+    end
+  end
+  
+  def refresh
+    if params[:id]
+      @asset = Asset.find(params[:id])
+      @asset.asset.reprocess!
+      flash[:notice] = t('clipped_extension.thumbnails_refreshed')
+      redirect_to edit_admin_asset_path(@asset)
+    else
+      render
+    end
+  end
+  
+  only_allow_access_to :regenerate,
+    :when => [:admin],
+    :denied_url => { :controller => 'admin/assets', :action => 'index' },
+    :denied_message => 'You must have admin privileges to refresh the whole asset set.'
+
+  def regenerate
+    Asset.all.each { |asset| asset.asset.reprocess! }
+    flash[:notice] = t('clipped_extension.all_thumbnails_refreshed')
+    redirect_to admin_assets_path
+  end
+  
+end