Skip to content

@ryanjm /gist:9796b4ecfc567864cc9d secret
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Uploadify
<script>
<% key = Rails.application.config.session_options[:key] %>
var uploadify_script_data = {};
var csrf_param = $('meta[name=csrf-param]').attr('content');
var csrf_token = $('meta[name=csrf-token]').attr('content');
uploadify_script_data[csrf_param] = encodeURI(encodeURIComponent(csrf_token));
uploadify_script_data['<%= key %>'] = '<%= cookies[key] %>';
// Image Upload / Management
// There is a div which contains the images + a form to upload
// - the outside form has an id of #photo-classes
// - the inside divs have a class of .photo-class-#{id}
// Uploaded images are inserted just before the form (which has an id of #photo-form)
// There is also a form which contains a hidden field for each image, in order to pass that info along
// - this has an id of #listing_photos_form
// When a file is uploaded
// - Change the thumb
// - Add to listing_photos_form (to get passed to the next section)
// there is buttonImg attribute you can set to an image
// http://www.uploadify.com/documentation/
$('#uploadify').uploadify({
uploader : '/assets/uploadify.swf',
script : '/photos',
cancelImg : '/assets/cancel.png',
buttonImg : '<%= image_path "btn-add-photo.png" %>',
height : 175,
width : 222,
auto : true,
multi : false,
removeCompleted : true,
wmode : 'transparent',
scriptData : uploadify_script_data,
onComplete : function(event, ID, fileObj, response, data) {
var image = $.parseJSON(response);
var special_class = "photo-class-"+image.id;
insertThumbImage(image, special_class);
// addToListingPhotosForm(image, special_class);
}
});
function insertThumbImage(image, special_class){
// if it is the first image set to be the default
var c = ($(".image-exists").length == 0) ? 'btn default btn-primary' : 'btn btn-info default'
var imageDiv = "<li class='uploaded-image-container "+special_class+"'><div class='image-exists'>"+
"<img src='"+image.image.size260x160.url+"' width='260' height='160' class='img bor' />"+
"<a href='#' class='remove ir x-icon one' data-content='"+special_class+"'>Remove</a>"+
"<textarea rows='3' cols='20' class='img-description' data-object-id='"+image.id+"'></textarea>"+
"<a href='#' class='"+c+"' data-object-id='"+image.id+"'>Make Default</a>"+
"</div></li>"
// insert image before form
$(imageDiv).insertBefore(".photo-form-container");
}
function addToListingPhotosForm(image, special_class){
var hiddenField = '<%= hidden_field_tag "photo_ids[]" %>'
// add the hidden field to the beginning of the form (before the submit button)
$("#listing_photos_form").prepend(hiddenField);
// update the attributes for the hidden field
// - id needs to be changed just so we don't select it in the future
// - set the value to image id
// - add special_class as a class so it gets removed with the remove button
$("#photo_ids_").attr('id','image_'+image.id).attr('value',"["+image.id+", 'test']").addClass(special_class);
}
$(function() {
/* Toggle the Default Image */
$('.default').live('click',function(){
if ( $(this).hasClass('btn-primary') ) {
console.log('Currently Active');
} else {
$('.default.btn-primary').removeClass('btn-primary').text('Make Default');
$(this).removeClass('btn-info').addClass('btn-primary').text('Default Image');
}
return false;
});
// if it is removed, then set the next one
$(".remove").live('click',function(){
// if there is no default image and images exist
if($(".default.btn-primary").length == 0 && $(".image-exists").length > 0){
$(".image-exists:first .btn-info").removeClass('btn-info').addClass('btn-primary').text('Default Image');
}
});
$("#listing_photos_form").submit(function(e){
// validation
// need to have at least one image
if($(".image-exists").length === 0){
alert("Need at least one image");
return false;
}
// need to have at least one default
if($(".default.btn-primary").length === 0){
alert("need a default image set");
return false;
}
// set the default value
$("#listing_photo_id").attr('value',$('.default.btn-primary').attr('data-object-id'));
// add each image to the form
$(".img-description").each(function(){
var hiddenField = '<%= hidden_field_tag "photo_ids[]" %>'
// add the hidden field to the beginning of the form (before the submit button)
$("#listing_photos_form").prepend(hiddenField);
// update the attributes for the hidden field
// - id needs to be changed just so we don't select it in the future
// - set the value to image id
// - add special_class as a class so it gets removed with the remove button
// alert("new field being added ["+$(this).attr('data-object-id')+","+$(this).val()+"]");
$("#photo_ids_").attr('value',"["+$(this).attr('data-object-id')+", \""+$(this).val()+"\"]");
});
// return false;
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.