Question

I am making my first file uploader jquery plugin (in coffeescript):

    $.fn.uploadable = (opts={}) ->
      console.log $(@).attr('type') # undefined
      event = if $(@).attr('type') is 'file' then 'change' else 'drop'
      @
      .on event, (evt) ->
        # do something
        off
      .on 'dragover', (evt) -> off


    $('#files_input, #drop_zone').uploadable

So you can see, in the first .on(), I am determining whether the element of the event is a browse file button or not ;if YES, then this element will be listened for “change” event when the user selects the file, if NO, then I assume it’s some plain old div or something for an HTML5 drag and drop action.

So I am using the plugin on one INPUT element and one DIV element. As you can see from my console.log logged ‘undefined’

So far I only know that calling method like attr(), you will only get the result from one of the listed selectors’ elements. But I need to set the .on(event)’s event variable individually for each of the matched element. How can I do this?

Thank you

Answer 1

The usual plugin pattern looks something like this:

$.fn.plugin = function(options) {
    options = $.extend({ }, $.fn.plugin.defaults, options || { });
    return this.each(function() {
        // Do things to $(this) to set up your plugin.
    });
};
$.fn.plugin.defaults = { ... };

The CoffeeScript version would be:

$.fn.plugin = (options = { }) ->
    options = $.extend({ }, $.fn.plugin.defaults, options)
    @.each ->
        # Do things to $(@) to set up your plugin
$.fn.plugin.defaults = { ... }

The return part of return this.each is what gives you the usual chaining, the this.each part is what allows the plugin to bind to several things at once.

Applying this your case would give you:

$.fn.uploadable = (opts = { }) ->
  @.each ->
    event = if $(@).attr('type') is 'file' then 'change' else 'drop'
    $(@)
      .on event, (evt) ->
        # do something
        off
      .on 'dragover', (evt) -> off