public/javascripts/media-panel.js
(function($) {
"use strict";
var file_id = 1;
$('.view-all-media').on('click', '.pagination a', function(event) {
$.ajax({
url: this.href,
beforeSend: function(){$('.view-all-media').addClass('fetching')},
complete: function() {$('.view-all-media').removeClass('fetching')},
dataType: 'script'
});
return false;
});
$('#file, #crop_file').fileupload({
add: function(e, data){
data.files[0].id = file_id;
file_id++;
data.context = $(tmpl("template-upload", data.files[0]));
$('#media-upload-form').append(data.context);
if(e.target.id == 'crop_file') {
$('#confirm-crop-image').die('click.submit').live('click.submit', function() {
data.submit()
})
} else {
data.submit();
}
},
progress: function (e, data) {
if ($('#hide-uploads').data('bootstraped') == false) {
$('#hide-uploads').show();
$('#hide-uploads').data('bootstraped', true);
}
if (data.context) {
var progress = parseInt(data.loaded / data.total * 100, 10);
data.context.find('.bar').css('width', progress + '%');
data.context.find('.percentage').text(progress + '%');
}
},
fail: function(e, data){
var file_id = '#file-'+data.files[0].id;
var progress_bar = $(file_id).find('.progress .bar')
progress_bar.addClass('error')
progress_bar.width('100%')
$(file_id).append("<div class='error-message'>" + data.jqXHR.responseText + "</div>")
}
});
$('#hide-uploads').click(function(){
$('#hide-uploads').hide();
$('#show-uploads').show();
$('.upload').slideUp();
return false;
});
$('#show-uploads').click(function(){
$('#hide-uploads').show();
$('#show-uploads').hide();
$('.upload').slideDown();
return false;
});
function loadPublishedMedia() {
var parent_id = $('#published-media #parent_id').val();
var q = $('#published-media #q').val();
var url = $('#published-media').data('url');
$('#published-media .items').addClass('fetching');
$.ajax({
url: url,
data: {'parent_id': parent_id, 'q': q},
dataType: 'html',
success: function(response) {
$("#published-media .items").html(response);
$('#published-media .items').removeClass('fetching');
updateViewAllLinks();
},
error: function(response, textStatus, xhr) {
console.log(response);
console.log(textStatus);
}
});
}
// make it global for usage in media_upload.js.erb
window.loadPublishedMedia = loadPublishedMedia;
function updateViewAllLinks() {
var parent_id = $('#published-media #parent_id').val();
var q = $('#published-media #q').val();
$('#published-media .view-all').each(function(){
var key = $(this).data('key');
var params = {parent_id: parent_id, q: q, key: key}
var href = $(this).attr('href');
href = href.replace(/\?.*/, '?'+$.param(params));
$(this).attr('href', href);
});
}
$('#published-media #parent_id').change(function(){
loadPublishedMedia()
});
// Using a immediate function to make timer variable only visible for the keyup event
(function() {
var timer = null;
$("#published-media #q").keyup(function() {
if(this.value.length > 2) {
timer = setTimeout(loadPublishedMedia, 750);
}
}).keydown(function() {
clearTimeout(timer);
});
}) ();
$("#published-media #q").bind('notext', function(){
loadPublishedMedia()
});
$("#new-folder-dialog").submit(function( event ) {
var name = $('#new_folder').val();
var parent_id = $("#new-folder-dialog #parent_id").val();
$.ajax({
url: this.action,
type: 'POST',
data: {
'parent_id': parent_id,
'article': {'name': name, 'published': true},
'type': $('input[name=folder_type]:checked').val() },
dataType: 'json',
beforeSend: function(){$("#new-folder-dialog").addClass('fetching')},
success: function(response) {
var option_selected = "<option value='"+ response.id +"' selected='selected'>"+ response.full_name +"</options>"
var option = "<option value='"+ response.id +"'>"+ response.full_name +"</options>"
$('#media-upload-form #parent_id').append(option_selected);
$('#published-media #parent_id').append(option);
$('#new_folder').val('');
},
error: function(response, textStatus, xhr) {
console.log(response);
console.log(textStatus);
},
complete: function(response){
$("#new-folder-dialog").removeClass('fetching');
$("#new-folder-dialog").dialog('close');
}
});
return false;
});
$('#media-panel-button').click(function(){
$('#content').toggleClass('show-media-panel');
return false;
});
$('#new-folder-button').click(function(){
$('#new-folder-dialog').dialog({modal: true});
return false;
});
}) (jQuery);