Avatar.js #1

/**
 * Perforce Swarm
 *
 * @copyright   2014 Perforce Software. All rights reserved.
 * @license     Please see LICENSE.txt in top-level folder of this distribution.
 * @version     <release>/<patch>
 */
$(document).ready( function() {
    if ($('body').hasClass('route-project')) {
        var url = window.location.pathname;
        if (url.substr(-1, 1) == '/') {
            url = url.slice(0, -1);
        }
        var projectId = url.split('/').pop();

        // fetch current avatar, if available
        $.ajax({
            url:         '/projects/' + projectId + '/image/avatar/256/format/base64',
            type:        "GET",
            global:      false,
            success: function(data) {
                $('.project-sidebar .profile-info').before('<img class="project-avatar" src="' + data + '"/>');
            }
        });

        // fetch current splash, if available
        $.ajax({
            url:         '/projects/' + projectId + '/image/splash/format/base64',
            type:        "GET",
            global:      false,
            success: function(data) {
                $('.route-project .profile-activity table.activity-stream').before('<img class="project-avatar" src="' + data + '"/>');
            }
        });
    }
  if ($('body').hasClass('route-projectEditAvatar')
      || $('body').hasClass('route-projectAddAvatar')) {

    var url = window.location.pathname;
    if (url.substr(-1, 1) == '/') {
      url = url.slice(0, -1);
    }
    var projectId = url.split('/').pop();

    var target = $('.control-group.control-group-owners');
    var avatarInput = '<div class="control-group">'
        + '<label class="control-label" for="project-avatar">Avatar Upload</label>'
        + '<div class="controls">'
        + '<input type="hidden" name="avatar" id="avatar"/>'
        + '<input type="file" name="project-avatar" class="filestyle" />'
        + '<div class="avatar image-placeholder"></div>'
        + '</div>'
      + '</div>';
    var splashInput = '<div class="control-group">'
        + '<label class="control-label" for="project-splash">Splash Image Upload</label>'
        + '<div class="controls">'
        + '<input type="hidden" name="splash" id="splash"/>'
        + '<input type="file" name="project-splash" class="filestyle" />'
        + '<div class="splash image-placeholder"></div>'
        + '</div>'
        + '</div>';

    $(target).before(avatarInput);
    $(target).before(splashInput);

    $(':file').filestyle();
    $('div.bootstrap-filestyle input', $('#avatar').parent()).after('<span class="dimensions">(128px x 128px)</span>');
    $('div.bootstrap-filestyle input', $('#splash').parent()).after('<span class="dimensions">(900px x 255px)</span>');

    // fetch current images, if available
    $.ajax({
        url:         '/projects/' + projectId + '/image/avatar/64/format/base64',
        type:        "GET",
        global:      false,
        success: function(data) {
            $('.avatar.image-placeholder').text('');
            $('.avatar.image-placeholder').append('<img src="' + data + '"/>');
            $('.avatar.image-placeholder').removeClass('empty');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $('.avatar.image-placeholder').text('No avatar.');
            $('.avatar.image-placeholder').addClass('empty');
        }
    });

    $.ajax({
      url:         '/projects/' + projectId + '/image/splash/format/base64',
      type:        "GET",
      global:      false,
      success: function(data) {
          $('.splash.image-placeholder').text('');
          $('.splash.image-placeholder').append('<img src="' + data + '"/>');
          $('.splash.image-placeholder').removeClass('empty');
      },
      error: function (xhr, ajaxOptions, thrownError) {
          $('.splash.image-placeholder').text('No splash image.');
          $('.splash.image-placeholder').addClass('empty');
      }
    });

    $(target).closest('form').attr('enctype', 'multipart/form-data');

      // check file size before uploading, then upload and get a copy
    $('input[type=file]').change(function(event) {
        swarm.form.clearErrors(event.target, true);
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            if (!$(event.target).val()) {
                return false;
            }

            var file      = $(event.target)[0].files[0],
                imageType = $(event.target).attr('name').split('-').pop(),
                fdata     = new FormData();
            fdata.append('file', file);
            fdata.append('_csrf', $('body').attr('data-csrf'));

            var fsize    = file.size; //get file size
            var ftype    = file.type; // get file type
            var messages = [];

            //allow only valid image file types
            switch(ftype)
            {
                case 'image/png': case 'image/jpeg': case 'image/jpeg':
                break;
                default:
                    messages.push('Invalid file type.  File must be jpg or png.');
            }

            //Allowed file size is less than 1 MB (1048576)
            if(fsize>1048576)
            {
                messages.push('Image file size must be less than 1MB.');
            }

            var element   = event.target,
                controls  = $(element).closest('.controls'),
                group     = controls.closest('.control-group'),
                form      = $(element).closest('form');

            if (messages.length > 0) {
                group.addClass('error');

                $.each(messages, function(index, message) {
                    $('<span />').text(message).addClass('help-block help-error').insertBefore($('.' + imageType + '.image-placeholder'));
                });
                form.toggleClass('invalid', true);
                return false;
            } else {
                swarm.form.clearErrors(group);
            }
        }
        else
        {
            //handled in php
        }

        // send to php to evaluate; note that this means projectId can be "add"
        var url = window.location.pathname;
        if (url.substr(-1, 1) == '/') {
            url = url.slice(0, -1);
        }
        var projectId = url.split('/').pop(),
            imageType = $(event.target).attr('name').split('-').pop(),
            uploadURL ='/projects/' + projectId + '/image/' + imageType;

        $.ajax({
            url:         uploadURL,
            type:        "POST",
            contentType: false,
            processData: false,
            cache:       false,
            data:        fdata,
            success: function(data){
//                var placeholder = $('.' + imageType + '.image-placeholder').remove()
//                swarm.form.postHandler($(event.target).closest('form'), null, null, data);
//                $('input[name=project-' + imageType + ']').closest('.controls').append(placeholder);


                if (data.isValid) {
                    $('#' + imageType).val(data.filename);
                    $('.' + imageType + '.image-placeholder').text('');
                    $('.' + imageType + '.image-placeholder').removeClass('empty');
                    if ($('.' + imageType + '.image-placeholder img').length == 0) {
                        $('.' + imageType + '.image-placeholder').append('<img src="' + data.content + '"/>');
                    } else {
                        $('.' + imageType + '.image-placeholder img').attr('src', data.content);
                    }
                } else {
                    var errors      = data.error ? [data.error] : [],
                        form        = $(event.target).closest('form'),
                        errorEvent  = $.Event('form-errors');
                    errorEvent.action = 'error';

                    $.each(data.messages || [], function(key, value) {
                        var element     = swarm.form.getElement(form, key),
                            controls    = element.closest('.controls'),
                            group       = controls.closest('.control-group');

                        group.addClass('error');

                        // clear errors on focus
                        group.one('focusin.swarm.form.error', function() {
                            // swarm.form.clearErrors(this);
                        });

                        $.each(value, function(errorId, message) {
                            // show the message or add it to a general errors if we can't
                            // locate the corresponding form element to attach it to
                            if (!controls.length) {
                                errors.push(message);
                            } else {
                                $('<span />').text(message).addClass('help-block help-error').insertBefore($('.' + imageType + '.image-placeholder'));
                                return false;
                            }
                        });
                    });

                    form.trigger(errorEvent);
                }
            }
        });
     });
  }
});