effective_assets 0.1 → 1.0.0

data/app/assets/javascripts/effective_assets/s3_uploader.js.coffee

@@ -0,0 +1,268 @@
+$ = jQuery
+
+$.fn.S3Uploader = (options) ->
+
+  # support multiple elements
+  if @length > 1
+    @each -> $(this).S3Uploader options
+    return this
+
+  $uploadForm = this  # the .asset-box-uploader div    .asset-box-input > [.attachments, .uploads, .asset-box-uploader]
+
+  settings =
+    url: ''
+    remove_completed_progress_bar: true
+    remove_failed_progress_bar: true
+    progress_bar_target: null
+    progress_bar_template: null
+    allow_multiple_files: true
+    valid_s3_keys: ['key', 'acl', 'AWSAccessKeyId', 'policy', 'signature', 'success_action_status', 'X-Requested-With', 'content-type']
+    create_asset_url: null
+    update_asset_url: null
+    file_types: 'any'
+
+  $.extend settings, options
+
+  current_files = []
+
+  setUploadForm = ->
+    $uploadForm.fileupload
+      url: settings.url
+
+      add: (e, data) ->
+        file = data.files[0]
+
+        # Check File Type
+        if settings.file_types != 'any'
+          types = new RegExp("(\.|\/)(#{settings.file_types})$")
+          unless types.test(file.type) || types.test(file.name.toLowerCase())
+            alert("Unable to add #{file.name}.\n\nOnly #{settings.file_types.replace(/\|/g, ', ')} files allowed.")
+            return false
+
+        # We're all good. Let's go ahead and add this
+        current_files.push data
+        $uploadForm.trigger("s3_file_added", [e, file])
+
+        template = settings.progress_bar_template
+        data.context = $($.trim(tmpl(template.html(), file)))
+        $(data.context).appendTo(settings.progress_bar_target)
+        data.submit()
+
+      start: (e) ->
+        $uploadForm.trigger("s3_uploads_start", [e])
+        disable_submit()
+
+      progress: (e, data) ->
+        if data.context
+          progress = parseInt(data.loaded / data.total * 100, 10)
+          data.context.find('.bar').css('width', progress + '%').html(format_bitrate(data.bitrate))
+          data.context.find('.progress > span').remove()
+
+      done: (e, data) ->
+        content = build_content_object($uploadForm, data.files[0], data.result)
+
+        if settings.update_asset_url
+          update_asset_and_load_attachment(content)
+
+        data.context.fadeOut('slow', -> $(this).remove()) if data.context && settings.remove_completed_progress_bar # remove progress bar
+        $uploadForm.trigger("s3_upload_complete", [$uploadForm, content])
+
+        current_files.splice($.inArray(data, current_files), 1) # remove that element from the array
+
+        unless current_files.length
+          $uploadForm.trigger("s3_uploads_complete", [$uploadForm, content])
+          enable_submit()
+
+      fail: (e, data) ->
+        content = build_content_object($uploadForm, data.files[0], data.result)
+        content.error_thrown = data.errorThrown
+
+        data.context.fadeOut('slow', -> $(this).remove()) if data.context && settings.remove_failed_progress_bar # remove progress bar
+        $uploadForm.trigger("s3_upload_failed", [$uploadForm, content])
+        enable_submit()
+
+      formData: (form) ->
+        inputs = form.find($uploadForm).children('input')
+        inputs.each -> $(this).prop('disabled', false)
+        data = inputs.serializeArray()
+
+        inputs = form.find($uploadForm).children("input:not([name='file'])")
+        inputs.each -> $(this).prop('disabled', true)
+
+        fileType = ""
+        if "type" of @files[0]
+          fileType = @files[0].type
+        data.push
+          name: "content-type"
+          value: fileType
+
+        # Remove anything we can't submit to S3
+        for item in data
+          data.splice(data.indexOf(data), 1) unless item.name in settings.valid_s3_keys
+
+        # Ask our server for a unique ID for this Asset
+        asset = create_asset(@files[0])
+        @files[0].asset_id = asset.id
+        key = asset.s3_key
+
+        # substitute upload timestamp and unique_id into key
+        key_field = $.grep data, (n) ->
+          n if n.name == "key"
+
+        if key_field.length > 0
+          key_field[0].value = key
+
+        # IE <= 9 doesn't have XHR2 hence it can't use formData
+        # replace 'key' field to submit form
+        unless 'FormData' of window
+          $uploadForm.find("input[name='key']").val(key)
+        data
+
+  build_content_object = ($uploadForm, file, result) ->
+    content = {}
+    if result # Use the S3 response to set the URL to avoid character encodings bugs
+      content.url            = $(result).find("Location").text()
+      content.filepath       = $('<a />').attr('href', content.url)[0].pathname
+    else # IE <= 9 return a null result object so we use the file object instead
+      domain                 = settings.url
+      content.filepath       = $uploadForm.find('input[name=key]').val().replace('/${filename}', '')
+      content.url            = domain + content.filepath + '/' + encodeURIComponent(file.name)
+
+    content.url              = s3urlDecode(content.url)
+    content.filepath         = s3urlDecode(content.filepath)
+
+    content.filename         = file.name
+    content.filesize         = file.size if 'size' of file
+    content.lastModifiedDate = file.lastModifiedDate if 'lastModifiedDate' of file
+    content.filetype         = file.type if 'type' of file
+    content.asset_id         = file.asset_id if 'asset_id' of file
+    content.relativePath     = build_relativePath(file) if has_relativePath(file)
+    content
+
+  has_relativePath = (file) ->
+    file.relativePath || file.webkitRelativePath
+
+  build_relativePath = (file) ->
+    file.relativePath || (file.webkitRelativePath.split("/")[0..-2].join("/") + "/" if file.webkitRelativePath)
+
+  s3urlDecode = (url) -> url.replace(/%2F/g, "/").replace(/\+/g, '%20')
+
+  extra_fields_for_asset = ->
+    # Any field in our form that shares our name like effective_asset[#{box}][something2] should be gotten
+    # And we return something2 => something2.value
+    box = $uploadForm.closest('.asset-box-input').data('box')
+    fields = $uploadForm.closest('form').find(":input[name*='[#{box}]']").serializeArray()
+
+    extra = {}
+
+    $.each fields, (i, field) ->
+      pieces = field.name.split('[').map (piece) -> piece.replace(']', '')
+
+      if (index_of_box = pieces.indexOf(box)) == -1
+        name = pieces.join()
+      else
+        name = pieces.slice(index_of_box+1, pieces.length).join()
+
+      extra[name] = field.value if name.length > 0
+
+    extra
+
+  create_asset = (file) ->
+    asset = 'false'
+
+    $.ajax
+      url: settings.create_asset_url
+      type: 'POST'
+      dataType: 'json'
+      data:
+        title: file.name
+        content_type: file.type
+        data_size: file.size
+        extra: extra_fields_for_asset()
+      async: false
+      success: (data) -> asset = data
+
+    asset
+
+  update_asset_and_load_attachment = (file) ->
+    asset_box = $uploadForm.closest('.asset-box-input')
+
+    $.ajax
+      url: settings.update_asset_url.replace(':id', file.asset_id)
+      type: 'PUT'
+      data:
+        upload_file: file.url
+        data_size: file.filesize
+        content_type: file.filetype
+        title: file.filename
+        attachable_type: asset_box.data('attachable-type')
+        attachable_id: asset_box.data('attachable-id')
+        attachable_object_name: asset_box.data('attachable-object-name')
+        attachment_style: asset_box.data('attachment-style')
+        attachment_actions: asset_box.data('attachment-actions')
+        aws_acl: asset_box.data('aws-acl')
+        box: asset_box.data('box')
+      async: true
+      success: (data) ->
+        limit = asset_box.data('limit')
+
+        if limit == 10000 # Guard value for no limit
+          asset_box.find('.attachments').append($(data))
+        else
+          asset_box.find('.attachments').prepend($(data))
+
+        asset_box.find("input.asset-box-remove").each (index) ->
+          if "#{$(this).val()}" == '1'  # If we're going to delete it...
+            $(this).closest('.attachment').hide()
+            limit = limit + 1
+            return
+
+          if index >= limit
+            $(this).closest('.attachment').hide()
+          else
+            $(this).closest('.attachment').show()
+
+
+  disable_submit = ->
+    $uploadForm.data('effective-assets-uploading', true)
+
+    $uploadForm.closest('form').find('input[type=submit]').each ->
+      submit = $(this)
+      submit.data('effective-assets-original-label', submit.val()) if submit.data('effective-assets-original-label') == undefined
+      submit.prop('disabled', true)
+      submit.val('Uploading...')
+
+  enable_submit = ->
+    $uploadForm.data('effective-assets-uploading', false)
+
+    anyUploading = false
+    $uploadForm.closest('form').find('.asset-box-uploader').each ->
+      anyUploading = true if $(this).data('effective-assets-uploading') == true
+
+    unless anyUploading
+      $uploadForm.closest('form').find('input[type=submit]').each ->
+        submit = $(this)
+        submit.val(submit.data('effective-assets-original-label') || 'Submit')
+        submit.prop('disabled', false)
+        submit.removeData('effective-assets-original-label')
+
+  format_bitrate = (bits) ->
+    if typeof bits != 'number'
+      ''
+    else if (bits >= 1000000000)
+      (bits / 1000000000).toFixed(2) + ' Gbit/s'
+    else if (bits >= 1000000)
+      (bits / 1000000).toFixed(2) + ' Mbit/s'
+    else if (bits >= 1000)
+      (bits / 1000).toFixed(2) + ' kbit/s'
+    else
+      bits.toFixed(2) + ' bit/s'
+
+  #public methods
+  @initialize = ->
+    # Save key for IE9 Fix
+    $uploadForm.data("key", $uploadForm.find("input[name='key']").val())
+    setUploadForm()
+    this
+
+  @initialize()

data/app/assets/javascripts/effective_assets_iframe.js.coffee

@@ -0,0 +1,28 @@
+getCkEditorFuncNum = ->
+  reParam = new RegExp( '(?:[\?&]|&)' + 'CKEditorFuncNum' + '=([^&]+)', 'i' )
+  match = window.location.search.match(reParam)
+
+  if match && match.length > 0
+    match[1]
+
+$(document).on 'click', 'a.attachment-insert', (event) ->
+  ckeditor = getCkEditorFuncNum()
+
+  if ckeditor && window.opener && window.opener.CKEDITOR
+    event.preventDefault()
+
+    obj = $(event.currentTarget)
+    asset = $(obj.data('asset'))
+
+    url = asset.attr('src') || asset.attr('href')
+    alt = asset.attr('alt') || ''
+
+    window.opener.CKEDITOR.tools.callFunction(ckeditor, url, ->
+      dialog = this.getDialog()
+
+      if dialog && dialog.getName() == 'image2'
+        dialog.getContentElement('info', 'alt').setValue(alt)
+    )
+
+    window.close()
+

data/app/assets/stylesheets/active_admin/effective_assets.css.scss

@@ -0,0 +1,57 @@
+body.active_admin {
+  .asset-box-input {
+    @import "effective_assets/input_bootstrap";
+    margin-left: 20%;
+
+    .thumbnails { // This was added for active_admin
+      margin-left: 0px;
+      position: relative;
+      left: -20px;
+    }
+  }
+
+  @import "effective_assets/asset_box_input";
+
+  // This is for the ActiveAdmin Attach... functionality
+  .effective-assets-overlay {
+    background-color: rgba(0, 0, 0, 0.7);
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 1.0;
+    z-index: 2000;
+  }
+
+  .effective-assets-dialog {
+    position: fixed !important;
+    top: 40px !important;
+    z-index: 2001;
+
+    .ui-dialog-titlebar { display: none; }
+
+    .ui-dialog-buttonpane {
+      -moz-border-bottom-colors: none;
+      -moz-border-left-colors: none;
+      -moz-border-right-colors: none;
+      -moz-border-top-colors: none;
+      background: -moz-linear-gradient(-90deg, #EFEFEF, #DFE1E2) repeat scroll 0 0 rgba(0, 0, 0, 0);
+      border-color: #E6E6E6 #D4D4D4 #EEEEEE;
+      border-image: none;
+      border-style: solid;
+      border-width: 1px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
+      color: #5E6469;
+      font-size: 1em;
+      font-weight: bold;
+      line-height: 18px;
+      margin-bottom: 0.5em;
+      padding: 5px 10px 3px;
+      text-shadow: 0 1px 0 #FFFFFF;
+
+      button { margin: 2px; }
+    }
+  }
+
+}

data/app/assets/stylesheets/effective_assets/_asset_box_input.scss

@@ -1,8 +1,3 @@
-@mixin clearfix {
-  display: block;
-  &:after { content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden; }
-}
-
 @mixin border-radius ($radius) {
   position: relative;
   -webkit-border-radius: $radius;
@@ -12,195 +7,79 @@
           border-radius: $radius;
 }
 
-.asset_box_uploader {
-  width: 800px;
-  margin: 0px auto;
-  text-align: left;
+.asset-box-input {
+  width: 100%;
+  height: 100%;
 
-  .file_lists {
-    border: 1px solid #B7B9BB;
-    height: 300px;
-    margin-bottom: 10px;
-    overflow-y: scroll;
+  // asset_box_input/attachment_as_table
+  tbody.attachments {
+    .attachment-image img {
+      max-height: 48px;
+    }
   }
 
-  .file_list {
-    border-width: 0 0 1px 0;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-      border: 1px solid #B7B9BB;
-      height: 60px;
-      line-height: 45px;
+  // asset_box_input/attachment_as_list
+  ul.attachments {
+    .attachment {
       position: relative;
-      padding: 0 0 25px 0;
-    }
-
-    .progress {
-      display: block;
-      height: 85px;
-      text-align: right;
-      background: #EFEFEF;
-      background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#DFE1E2));
-      background: -moz-linear-gradient(-90deg, #EFEFEF, #DFE1E2);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#efefef, endColorstr=#dfe1e2);
-      -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#efefef, endColorstr=#dfe1e2);
 
-      .amount {
-        position: absolute;
-        right: 10px;
-        top: 15px;
-        color: #666;
-        text-shadow: 1px 1px #fff;
+      .attachment-title {
+        overflow: hidden;
+        word-break: keep-all;
+        text-align: left;
       }
-    }
-
-    .file_name {
-      display: block;
-      position: absolute;
-      font-weight: bold;
-      margin: 0 0 15px 10px;
-    }
-
-    .file_size {
-      display: block;
-      position: absolute;
-      right: 10px;
-      bottom: 0;
-      line-height: 2;
-      color: #AEAEAE;
-    }
 
-    .properties {
-      position: absolute;
-      left: 10px;
-      bottom: 10px;
-      display: block;
-
-      label {
-        float: left !important;
-        line-height: 2 !important;
-        margin-right: 4px !important;
-      }
-
-      input[type="text"] {
-        float: left !important;
-        margin-right: 30px !important;
-        width: 130px !important;
+      .attachment-remove {
+        position: absolute;
+        top: 0px;
+        right: 7px;
       }
     }
   }
 
-  .file_todo_list {
-    .progress { display: none; }
-  }
-
-  .file_done_list {
-    .progress { width: 100%; }
-  }
-
-  .overall {
-    border: 1px solid #B7B9BB;
-    height: 35px;
-    line-height: 35px;
-    position: relative;
-    font-size: 130%;
-    margin-bottom: 10px;
+  // asset_box_input/attachment_as_thumbnail
+  div.attachments {
+    .attachment {
+      position: relative;
 
-    .progress {
-      display: block;
-      height: 35px;
-      background: #6A7176;
-      background: -webkit-gradient(linear, left top, left bottom, from(#6A7176), to(#4D5256));
-      background: -moz-linear-gradient(-90deg, #6A7176, #4D5256);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6a7176, endColorstr=#4d5256);
-      -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6a7176, endColorstr=#4d5256);
+      .attachment-title {
+        overflow: hidden;
+        word-break: keep-all;
+        text-align: center;
+      }
 
-      .amount {
-        padding-right: 0px;
-        color: #eaeaea;
-        text-shadow: 1px 1px #333;
+      .attachment-remove {
         position: absolute;
-        right: 10px;
+        top: 7px;
+        right: 22px;
       }
     }
-
-    .status {
-      text-align: center;
-      display: block;
-      width: 100%;
-      font-weight: bold;
-      color: #aaa;
-      position: absolute;
-    }
-
   }
 
-  .progress {
-    display: block;
-    position: absolute;
-    text-align: right;
-  }
-
-  input[type="submit"] {
-    margin-left: 0 !important;
-
-    &.StopButton, &.ResetButton {
-      float: right;
-      margin-left: 10px !important;
+  .uploads {
+    .upload {
+      border-top: solid 1px #CCC;
+      width: 100%;
+      min-width: 400px;
+      padding-top: 10px;
+      margin-top: 10px;
+
+      .progress {
+        margin-top: 8px;
+        border: solid 1px #555;
+        @include border-radius(3px);
+
+        .spinner {
+          height: 20px;
+          width: 20px;
+        }
+
+        .bar {
+          height: 100%;
+          background: #3EC144;
+        }
+      }
     }
   }
-
-  label {
-    float: none;
-    width: auto !important;
-    text-align: left;
-    margin: 0 !important;
-  }
-}
-
-.asset-box-attachment {
-  position: relative;
-  width: 128px;
-  float: left;
-  margin-right: 20px;
-  height: 190px;
-
-  p.title {
-    font-size: 14px;
-    color: #818181;
-    padding: 10px;
-    margin: 0;
-  }
-}
-
-.asset-box-spinner {
-  height: 128px;
-  width: 128px;
-  background: rgba(255,255,255,0.8) image-url('effective_assets/spinner.gif') no-repeat center center;
-  display: block;
-  margin-bottom: 6px;
 }
 
-.attachments {
-  @include clearfix;
-}
-
-.file_to_upload .delete, .asset-box-remove {
-  @include border-radius(3px);
-  display: block;
-  position: absolute;
-  background: rgba(255,255,255,0.8) image-url('effective_assets/icon_close.png') no-repeat center center;
-  text-indent: -99999px !important;
-  height: 20px;
-  width: 20px;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-}
-
-.assets {
-  clear: both;
-}