releaf-core/app/assets/javascripts/releaf/include/ajaxbox.js
/* global UrlBuilder */
jQuery(document).ready( function()
{
var ajaxbox_link_selector = 'a.ajaxbox';
var xhr;
var body = jQuery('body');
var open_ajax_box = function( params )
{
var magnific_popup_params =
{
showCloseBtn : false,
modal : params.modal,
callbacks : {
open : function()
{
this.contentContainer.trigger('ajaxboxaftershow', [this, params]);
},
beforeClose : function()
{
this.contentContainer.trigger('ajaxboxbeforeclose');
}
}
};
if (params.type === 'image')
{
magnific_popup_params.items = {src: params.url};
magnific_popup_params.type = "image";
}
else
{
magnific_popup_params.items = {src: params.content, type: "inline"};
}
jQuery.magnificPopup.open(magnific_popup_params);
return;
};
var close_ajax_box = function()
{
jQuery.magnificPopup.close();
};
body.on('ajaxboxaftershow', function(e, ajaxbox, params)
{
ajaxbox.contentContainer.addClass('ajaxbox-inner');
// enable drag with header
if( ajaxbox.wrap.draggable !== undefined )
{
ajaxbox.wrap.draggable({ handle: ajaxbox.contentContainer.find('section header').first() });
}
// insert close button if header exists and box is not modal
if (!params.modal)
{
var close_container = ajaxbox.contentContainer.first();
if (params.type !== 'image')
{
close_container = ajaxbox.contentContainer.find('section header').first();
}
if (close_container.length > 0)
{
var close_icon = jQuery('<i />').addClass('fa fa-times');
var close_button = jQuery('<button />').attr('type', 'button').addClass('button secondary close only-icon').append(close_icon);
close_button.on('click', function()
{
close_ajax_box();
});
close_container.append( close_button );
}
}
// focus on cancel button in footer if found
var cancel_button = ajaxbox.contentContainer.find('section footer .button[data-type="cancel"]').first();
if (cancel_button.length > 0)
{
cancel_button.bind('click', function()
{
body.trigger('ajaxboxclose');
return false;
});
cancel_button.focus();
}
ajaxbox.contentContainer.trigger('contentloaded');
ajaxbox.contentContainer.trigger('ajaxboxdone', params);
});
body.on('ajaxboxinit', function(e)
{
var target = jQuery(e.target);
// init links
var links = (target.is(ajaxbox_link_selector)) ? target : target.find(ajaxbox_link_selector);
links.on('click', function()
{
var link = jQuery(this);
var params =
{
url : new UrlBuilder( link.attr('href') ).add( { ajax: 1 } ).getUrl(),
modal : link.is('[data-modal]'),
trigger : link
};
if (link.attr('rel') === 'image')
{
params.type = 'image';
}
link.trigger('ajaxboxopen', params);
return false;
});
});
body.on('ajaxboxopen', function(e, params)
{
// params expects either url or content
if ('content' in params)
{
open_ajax_box( params );
}
else if ('url' in params)
{
if ('trigger' in params)
{
params.trigger.trigger('loadingstart');
}
if (xhr)
{
xhr.abort();
}
xhr = jQuery.ajax(
{
url: params.url,
type: 'get',
success: function( data )
{
params.content = data;
open_ajax_box( params );
}
});
}
});
body.on('ajaxboxdone', function(e, params)
{
if (params && ('trigger' in params))
{
params.trigger.trigger('loadingend');
}
jQuery(e.target).find('.dialog').trigger('contentdone');
});
body.on('ajaxboxclose', function()
{
close_ajax_box();
});
// attach ajaxboxinit to all loaded content
body.on('contentloaded', function(e)
{
// reinit ajaxbox for all content that gets replaced via ajax
jQuery(e.target).trigger('ajaxboxinit');
});
});