API Docs for:
Show:

File: packages/ember-droplet/ember-droplet-view.js

/**
 * @module App
 * @class DropletView
 * @type Ember.View
 * @extends Ember.View
 */
window.DropletView = Ember.View.extend({

    /**
     * @property classNames
     * @type {Array}
     * @default ['droppable']
     */
    classNames: ['droppable'],

    /**
     * @property ImagePreview
     * @type {Ember.View}
     */
    ImagePreview: Ember.View.extend({

        /**
         * @property tagName
         * @type {String}
         * @default "img"
         */
        tagName: 'img',

        /**
         * @property attributeBindings
         * @type {Array}
         * @default ['src']
         */
        attributeBindings: ['src'],

        /**
         * @property src
         * @type {String}
         * @default null
         */
        src: null,

        /**
         * @property image
         * @type {String}
         * @default null
         */
        image: null,

        /**
         * @method didInsertElement
         * Invoked when the view is inserted into the DOM.
         * @return {void}
         */
        didInsertElement: function() {

            // Initialise the FileReader, and find the image that was passed into
            // the view when instantiating it.
            var reader  = new FileReader(),
                image   = Ember.get(this, 'image.file');

            // Ensure that the file we're dealing with is an image.
            if (!image.type.match(/^image\//i)) {

                // If it isn't then we'll need to destroy the view immediately.
                this.destroy();
                return;

            }

            // Invoked when the image preview has been loaded.
            reader.onload = function (event) {

                if (this.get('isDestroyed') === true) {
                    // If the view has already been destroyed, then we can't
                    // load in the image preview.
                    return;
                }

                // Otherwise we're free to set the SRC attribute to the image's data.
                Ember.set(this, 'src', event.target.result);

            }.bind(this);

            // Begin the reading of the image.
            reader.readAsDataURL(image);

        }

    }),

    /**
     * @property MultipleInput
     * @type {Ember.View}
     */
    MultipleInput: Ember.View.extend({

        /**
         * @property tagName
         * @type {String}
         * @default "input"
         */
        tagName: 'input',

        /**
         * @property classNames
         * @type {String}
         * @default "files"
         */
        classNames: 'files',

        /**
         * @property attributeBindings
         * @type {Array}
         */
        attributeBindings: ['type', 'multiple'],

        /**
         * @property file
         * @type {String}
         * @default "file"
         */
        type: 'file',

        /**
         * @property multiple
         * @type {String}
         * @default "multiple"
         */
        multiple: 'multiple',

        /**
         * @method change
         * Invoked when the content of the INPUT changes.
         * @return {Boolean}
         */
        change: function() {
            var files = this.get('element').files;
            return this.get('parentView').traverseFiles(files);
        }

    }),

    /**
     * @method drop
     * @param event {jQuery.Event}
     * @param [files = []] {Array}
     * Invoked when the user drops a file onto the droppable area.
     * @return {Boolean}
     */
    drop: function(event, files) {
        this._preventDefaultBehaviour(event);
        return this.traverseFiles(event.dataTransfer.files || files);
    },

    /**
     * @method traverseFiles
     * @param files {FileList}
     * Accepts a FileList object, and traverses them to determine if they're valid, adding them
     * as either valid or invalid.
     * @return {boolean}
     */
    traverseFiles: function(files) {

        // Find the controller, and the `mimeTypes` property.
        var controller  = Ember.get(this, 'controller'),
            mimeTypes   = Ember.get(controller, 'mimeTypes');

        // Assert that we have the `mineTypes` property, and that it's an array.
        Ember.assert('`mimeTypes` is undefined. Does your controller implement the `EmberDropletController` mixin?', !!mimeTypes);
        Ember.assert('`mimeTypes` is not an array. It should be an array of valid MIME types.', !!Ember.isArray(mimeTypes));

        for (var index = 0, numFiles = files.length; index < numFiles; index++) {

            if (!files.hasOwnProperty(index)) {
                continue;
            }

            var file = files[index];

            // Determine if the file is valid based on its MIME type.
            if ($.inArray(file.type, mimeTypes) === -1) {
                // If it isn't valid, then we'll add it as an invalid file.
                controller.send('addInvalidFile', file);
                continue;
            }

            // Otherwise the file has a valid MIME type, and therefore be added as a good file.
            controller.send('addValidFile', file);

        }

        return true;

    },

    /**
     * @method _preventDefaultBehaviour
     * @param event {jQuery.Event}
     * Prevents default behaviour and propagation on nodes where it's undesirable.
     * @return {void}
     * @private
     */
    _preventDefaultBehaviour: function(event) {
        event.preventDefault();
        event.stopPropagation();
    },

    /**
     * @method dragOver
     * @param event {jQuery.Event}
     * @return {void}
     */
    dragOver: function(event) {
        this._preventDefaultBehaviour(event);
    },

    /**
     * @method dragEnter
     * @param event {jQuery.Event}
     * @return {void}
     */
    dragEnter: function(event) {
        this._preventDefaultBehaviour(event);
    },

    /**
     * @method dragLeave
     * @param event {jQuery.Event}
     * @return {void}
     */
    dragLeave: function(event) {
        this._preventDefaultBehaviour(event);
    }

});