assetable 0.1.2

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    MDE0MDczY2NjOGI4Njk3MTZjNDMxMjAwNzFjMDhjYmQxNDUxY2JjMQ==
+  data.tar.gz: !binary |-
+    ZWU0OTBhNzFkNTJjOTczNzEyN2I3OTMwYjkxNWU2MmNhNDNjYmI5YQ==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    YWNlOGVmMzU3M2NiZjhmOGIxMzg4N2Y5ZjYwYjNmOWIyYWFjNWU5ZjBlMmVm
+    NzUwZTNlMzkzNjI4MTRkMTVlMjljOWQ3YTI5ODkwYjk3ZmVlZDk2ZDg0MmM5
+    OWRmNzJiMTFhYzI4NDRiNjFmZjc3MDkxYTFkMmM1MjNkODFmYjA=
+  data.tar.gz: !binary |-
+    ODc2NTJjNjM3YzczYjY4ZDQ3M2Y1YTkwODdkMjhmNDM4YjhhYjg3MjU3N2U3
+    Y2E1ZDgzNWFmYWM0NDJmMWM4ZTg1ZGNhNTM4YzBlMWE0YjQzZjY1ZWQ1Y2Jk
+    NGY4NWE3MmI1ZWJhYzM3OWZlNTk4Mjk0ZWUxOTdjNjBiZGYyODQ=

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2013 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,181 @@
+= Assetable
+
+Easily add Assets to your Active Record models, including images, videos and almost any kind of documents. Includes an uploader, media gallery and much more.
+
+=== Installation
+
+==== Add the Gem
+
+Add this line to your application's Gemfile:
+
+    gem 'bootstrap_sass_rails'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install bootstrap_sass_rails
+    
+    
+==== Migrations    
+Run the migrations
+
+    $ rake db:migrate
+    
+
+==== Assets for the uploader and UI
+
+Add the Stylesheet and Javascripts to your project:
+    
+    # Sass syntax
+    @import assetable
+    
+    # Assetable uses some of bootstrap's UI. You can import the partial bootstrap
+    # library to add some extra styles to the uploader
+    # @import bootstrap
+    
+Javascript:
+
+    //= import uploader
+
+
+==== Configuration
+
+If you want to use fog, you can easily add the two initializers:
+
+    # initializers/assetable.rb
+    Assetable.configure do |config|
+      config.storage = :fog
+    end
+    
+    # initializers/carrierwave.rb
+    # Checkout carrierwave's documentation for more options and details
+    CarrierWave.configure do |config|
+      config.fog_credentials = {
+        :provider               => 'AWS',
+        :aws_access_key_id      => AWS_ACCESS_KEY_ID,
+        :aws_secret_access_key  => AWS_SECRET_ACCESS_KEY,
+        :region                 => S3_REGION,
+      }
+      config.fog_directory  = S3_NAMESPACE
+      config.fog_public     = true
+      config.fog_attributes = {'Cache-Control'=>'max-age=315576000'}
+      config.asset_host = S3_CLOUDFRONT_DOMAIN
+    end
+
+This is only required if you're using Fog. Otherwise, Assetable will default to uploading locally.
+
+
+== Usage
+
+Using assetable is incredibly easy. 
+
+=== Asset Attachments
+
+Assetable allows you to easily attach and asset to a resource. This creates a join between your record and an asset through an asset_attachment table. You can add as many as you would like to any given model.
+
+==== Single Asset Attachment 
+
+For a single image or asset, simply add: "assetable" to your model:
+
+    class User < ActiveRecord::Base
+      assetable :avatar
+    end
+    
+You can name the asset attachment whatever you would like, in this case I used "avatar" but you can replace that with whatever you want.
+
+On the frontend, you can simple call @user.avatar to access the file. Note that @user.avatar will be a ActiveRecord object for Asset. The file itself will be accessible through @user.avatar.filename and since we're using carrierwave, you can access the different version as you normally would, e.g. @user.avatar.filename.thumbnail, etc.
+
+==== Multiple Asset Attachments
+
+For multiple attachments, simple pass more attributes to assetable. In theory, you can pass unlimited attributes to assetable and this will create an attachment for each.
+
+    def User < ActiveRecord::Base
+      assetable :avatar, :background, :hero
+    end
+  
+This will create multiple attachments to the user model, you can easily call them by:
+
+    @user.avatar #=> Asset Object
+    @user.avatar.filename #=> "/path/to/filename.extension"
+    # note this is a carrierwave uploader object, so you can access all of your versions
+    @user.avatar.filename.thumbnail
+    
+    @user.background
+    @user.hero
+
+
+=== Gallery Attachments
+Assetable allows you to attach galleries to any object. A gallery is a collection of assets grouped together for a specific record. 
+
+==== Single Gallery
+
+You can easily add a gallery to your object:
+    
+    class Project < ActiveRecord::Base
+      galleryable
+    end
+
+That is all you need to do to attach a gallery to your object. On the front-end, you can easily access your gallery and the attached assets:
+
+    # in your view or controller
+    @project.gallery #=> Gallery Object
+    @project.gallery.assets #=> Collection of Assets
+
+
+==== Multiple Galleries
+
+You can add numerous galleries to a single object. Just as we did with assets, you can declare as many galleries through the galleryable:
+
+    class Project < ActiveRecord::Base
+      galleryable :another_gallery, :one_more_gallery
+    end
+    
+By default, galleryable will create a default :gallery. So you don't have to every pass :gallery or any arguments if you only want one gallery. This is great for multiple gallery records.
+
+You can easily call these galleries:
+
+    @project.another_gallery #=> Gallery object
+    @project.another_gallery.assets #=> Asset collection
+    
+    @project.one_more_gallery
+    @project.one_more_gallery.assets
+    
+
+=== Adding the Uploader
+
+In order to start uploading assets, you'll need to add the uploader to your form. You can easily add an uploader or gallery using a simple form helper.
+
+==== Single Asset Uploader
+
+    = form_for @user do |f|
+      ...
+      = f.uploader :avatar
+      ...
+
+    # You can also pass typical params to the uploader
+    = form_for @user do |f|
+      = f.uploader :avatar, class: "classname", id: "something-else"
+      
+Make sure the assetable uploader javascript is added.
+
+
+==== Gallery Uploader
+
+    = form_for @user do |f|
+      ...
+      = f.gallery :gallery
+      ...
+      
+It's that easy!
+
+
+=== Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1,23 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Assetable'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+

data/app/assets/javascripts/assetable/asset_gallery.js.coffee

@@ -0,0 +1,74 @@
+(($) ->
+  $.fn.asset_gallery = (options) ->
+    
+    # Defaults variables
+    defaults =
+      base_path: "/assetable/assets"
+      fieldname: null
+      gallery_open: false
+      gallery: null
+      
+    
+    asset_gallery = this
+
+    init = ->
+      console.log "init!!"
+      # merge the options with the defaults
+      asset_gallery.options = jQuery.extend({}, defaults, options)
+      asset_gallery.load_page(1)
+
+
+    template = (html)->
+      backdrop = '<div class="assetable-gallery-backdrop"></div>'
+      wrapper = '<div class="assetable-gallery-wrapper">' + html + '</div>'
+      asset_gallery.gallery = $(wrapper)
+      return backdrop + wrapper
+
+
+    asset_gallery.load_page = (page)->
+      console.log "page:: ", page
+      if page > 1 then path = (asset_gallery.options.base_path + "/page/" + path) else path = asset_gallery.options.base_path
+
+      $.get path, {fieldname: asset_gallery.options.fieldname}, (data) ->
+        console.log "data:: ", data
+        if page > 1
+          $('.assetable-gallery', asset_gallery).html(data.html)
+        else
+          $('body').append(template(data.html))
+
+        bind_pagination(asset_gallery.gallery)
+        asset_gallery.bind_close_button()
+
+
+    bind_pagination = (gallery)->
+      console.log "bind pagination!!...", gallery
+      console.log $('.assetable-gallery-paginate a', gallery)
+
+      $('.assetable-gallery-paginate a', gallery).on "ajax:beforeSend", (event, xhr, settings) ->
+        console.log "event:: ", event
+        console.log "before send!!"
+
+      $('.assetable-gallery-paginate a', gallery).on "ajax:success", (data, status, xhr) ->
+        console.log "ajax success!!"
+        console.log "data:: ", data
+        console.log "status:: ", status
+
+
+    asset_gallery.bind_close_button = ()->
+      console.log "bound close button::, ", $(asset_gallery.gallery)
+      $('.btn-close-assetable-gallery', $(asset_gallery.gallery)).remove()
+      $(asset_gallery.gallery).on "click", '.btn-close-assetable-gallery', (e) ->
+        alert "fuck!"
+        console.log "close button clicked!"
+        e.preventDefault()
+        asset_gallery.close()
+
+
+    asset_gallery.close = ()->
+      $(asset_gallery.gallery).fadeOut()
+
+
+
+    init()
+
+) jQuery

data/app/assets/javascripts/assetable/assetable_uploader.js.coffee

@@ -0,0 +1,204 @@
+(($) ->
+  $.fn.assetable_uploader = (options) ->
+    
+    # Defaults variables
+    defaults =
+      allow_select_mg: true
+      authenticity_token: null
+      drag_drop: true
+      fieldname: null
+      FileUploaded: options.onUploaded
+      fileRemoved: options.fileRemoved
+      gallery: false
+      id: null
+      max_file_size: "10mb"
+      multiple_queues: true
+      multi_selection: true
+      max_file_count: 0
+      unique_names: true
+      url: null
+    
+    assetable_uploader = this
+
+    init = ->
+      # merge the options with the defaults
+      assetable_uploader.options = jQuery.extend({}, defaults, options)
+      assetable_uploader.id = assetable_uploader.attr('id')
+      bind_uploader()
+
+    
+    bind_uploader = ->
+
+      # Create our extra HTML for the copy and queu
+      # upload_directions = '<div class="uploader-directions" id="' + assetable_uploader.id + '-drop-area"><div class="uploader-directions-image"></div><div class="uploader-directions-copy">Drag and drop files or <a href="#" class="browse-btn" id="' + assetable_uploader.id + '-browse-btn">add them manually</a></div></div>'
+      # upload_directions = '<div class="uploader-directions" id="' + assetable_uploader.id + '-drop-area"><div class="uploader-directions-image"></div><div class="uploader-directions-copy"><a href="#" class="browse-btn" id="' + assetable_uploader.id + '-browse-btn">select file</a> or <a href="#" class="btn-open-asset-gallery">open gallery</a></div></div>'
+      upload_directions = '<div class="uploader-directions" id="' + assetable_uploader.id + '-drop-area"><div class="uploader-directions-image"></div><div class="uploader-directions-copy"><a href="#" class="browse-btn" id="' + assetable_uploader.id + '-browse-btn">select file</a> or <a href="/assetable/external_services/new" class="btn-third-party-service">add third party service</a></div></div>'
+      upload_queue = '<ul class="upload-queue"></ul>'
+      # Add to the uploader
+      $(assetable_uploader).append(upload_directions)
+      $(assetable_uploader).append(upload_queue)
+
+
+      # Instantiate the uploader
+      uploader = new plupload.Uploader(
+        runtimes: "html5"
+        browse_button: "#{assetable_uploader.id}-browse-btn"
+        url: assetable_uploader.options.url
+        max_file_size: assetable_uploader.options.max_file_size
+        unique_names: assetable_uploader.options.unique_names
+        dragdrop: assetable_uploader.options.drag_drop
+        drop_element: assetable_uploader.id
+        multiple_queues: assetable_uploader.options.multiple_queues
+        multi_selection: assetable_uploader.options.multi_selection
+        max_file_count: assetable_uploader.options.max_file_count
+        multipart: true
+        multipart_params:
+          authenticity_token: assetable_uploader.options.authenticity_token
+          fieldname: assetable_uploader.options.fieldname
+
+        # Filter file types
+        # filter: [
+        #   title: "Image files"
+        #   extensions: "jpg,gif,png"
+        # ,
+        #   title: "Video files"
+        #   extensions: "mov,mp4,mpeg4"
+        # ]
+      )  
+      
+      
+  
+      # # Uploader Template
+      # template = "<div class=\"current_preview current_" + uploader_id + "\">" + content + "</div>" + "<div class=\"koh_pluploader\" id=\"" + uploader_id + "_drop_area\">" + "<a id=\"" + uploader_id + "_browse_btn\" href=\"#\"><span class=\"link_color\">Attach files by dragging & dropping them here</span> or add them manually</a>" + "<ul class=\"upload_queue\"></ul>" + "</div>" + ((if allow_select_mg then "<a href=\"#\" class=\"attach_image\" uid=\"" + uploader_id + "\" target=\"" + container + "\">select from media gallery</a>" else ""))
+      
+      # # Initialize binding
+      # uploader.bind "Init", (up, params) ->
+      #   $("#" + container).html template
+
+      
+      # # Initiate the uploader
+      uploader.init()
+      
+      # Bind to file added function
+      uploader.bind "FilesAdded", (up, files) ->
+        $.each files, (i, file) ->
+          $("ul.upload-queue", assetable_uploader).append '<li id="' + file.id + '"><span class="uploader-file-name">' + file.name + '</span><div class="progress progress"><div class="progress-bar progress-bar-success"></div></div></li>'
+
+          
+      # Update the progress bars
+      uploader.bind "UploadProgress", (up, file) ->
+        $("li#" + file.id + " .progress .progress-bar", assetable_uploader).width file.percent + "%"
+
+      
+      # Listen for upload complete
+      uploader.bind "FileUploaded", (up, file, info) ->
+        if assetable_uploader.options.FileUploaded
+          json = jQuery.parseJSON(info.response)
+          assetable_uploader.options.FileUploaded json
+        $("li#" + file.id, assetable_uploader).fadeOut().remove()
+
+      
+      # Listen for queue changes
+      uploader.bind "QueueChanged", (up, files) ->
+        uploader.start()
+        up.refresh()
+      # # Listen for errors
+      # uploader.bind "Error", (up, err) ->
+      #   $("#" + container).append "<div class=\"notice error\">" + "<span class=\"block\">Error: " + err.code + "</div>" + "<span class=\"block\">Message: " + err.message + "</div>" + ((if err.file then "<span clas=\"block\">" + err.file.name + "</span>" else "")) + "</div>"
+      #   up.refresh() # Reposition Flash/Silverlight
+
+      draggable_selector = (if assetable_uploader.options.gallery then $('.uploader-directions', assetable_uploader) else $(assetable_uploader))
+
+      # Handle the drag over effect, adds a class to the container
+      $(draggable_selector).bind "dragover", ->
+        $(this).addClass "droppable" unless $(this).hasClass("droppable")
+
+      # Handles drag leave 
+      $(draggable_selector).on "dragleave", ->
+        $(this).removeClass "droppable" if $(this).hasClass("droppable")
+
+      $(draggable_selector).on "dragend", ->
+        $(this).removeClass "droppable" if $(this).hasClass("droppable")
+
+      $(draggable_selector).on "drop", ->
+        $(this).removeClass "droppable" if $(this).hasClass("droppable")
+
+
+
+
+      # Remove asset link handler
+      $(assetable_uploader).on "click", ".btn-uploader-remove-asset", (e)->
+        e.preventDefault()
+        if assetable_uploader.options.fileRemoved
+          assetable_uploader.options.fileRemoved this, assetable_uploader
+
+
+      $(assetable_uploader).on "click", ".btn-open-asset-gallery", (e)->
+        e.preventDefault()
+        $(assetable_uploader).asset_gallery({fieldname: assetable_uploader.options.fieldname})
+        # if assetable_uploader.options.openAssetGallery
+        #   assetable_uploader.options.openAssetGallery this, assetable_uploader
+      
+      # $(assetable_uploader).on "click", ".btn-third-party-service", (e)->
+      #   e.preventDefault()
+      #   console.log "boom"
+
+
+      # Add a third party service
+      $(assetable_uploader).on "click", ".btn-third-party-service", (e)->
+        e.preventDefault()
+        $.ajax
+          url: $(this).attr('href')
+          data: {fieldname: assetable_uploader.options.fieldname}
+          type: 'GET'
+
+          success: (response)->
+            $response = $(response)
+            $response.modal()
+
+            $('form#new_external_service').on 'ajax:beforeSend', ()->
+                # console.log "form submitting..."                
+
+            $('form#new_external_service').on 'ajax:success', (data, status, xhr)->
+              if status.success
+                $response.modal('hide').remove()
+                assetable_uploader.options.FileUploaded status
+                
+
+
+
+
+    init()
+
+) jQuery
+
+
+$(document).ready ->
+
+  # Bind the koh uploader and galleries to a page
+  $(".uploader").each ->
+    
+    # Check that it's not already bound
+    unless $(this).hasClass("uploadable")
+      $(this).addClass "uploadable"
+      $this = $(this)
+      $this.removeClass "uploader"
+      
+      field = $this.attr("data-uploader-input-name")
+
+      $this.assetable_uploader
+        multi_selection: false
+        url: "/assetable/assets"
+        fieldname: field
+        authenticity_token: $("meta[name=\"csrf-token\"]").attr("content")
+        onUploaded: (resp) ->
+          $this.find('.uploader-data-wrapper').html(resp.html)
+          $this.addClass("uploader-has-asset")
+        fileRemoved: (button, item) ->
+          return false unless $(item).hasClass("uploader-has-asset")
+          $('.uploader-preview', item).html('<input type="hidden" name="' + field + '" />')
+          $(item).removeClass("uploader-has-asset")
+        # openAssetGallery: (button, item) ->
+
+          
+