SOW : Core Plugins

Overview:

• load modal content via ajax
• callback support
• lightweight, 3Kb minified (1.6Kb gzipped)

/* 
	:: Plugin File
	src/js/sow.core/sow.ajax_modal.js

	:: Plugin Init
*/	$.SOW.core.ajax_modal.init('.js-ajax-modal');



/* 
	:: Plugin Options|Defaults

*/	$.SOW.core.ajax_modal.init('.js-ajax-modal' {
		method 						: 'GET',
		contentType 					: '', 	// jQuery params
		dataType 					: '', 	// jQuery params
		headers 					: '', 	// jQuery params
		crossDomain 					: '', 	// jQuery params
		data_params 					: {ajax:'true'},

		modal_container 				: '#sow_ajax_modal',
		modal_size 					: '', // modal-sm|modal-lg|modal-xl|modal-full (empty = modal-md)
		modal_centered 					: 'false',

		/* 
			callback_example = function(modal_container) {
				// modal_container = modal container id  	(string:#sow_ajax_modal)
			}
		*/
		callback_function 				: ''
});
									

/* 
	:: Overwriting the defaults:

		* data-ajax-modal-backdrop="static"	= don't close modal on backdrop/overlay click
*/

	data-ajax-modal-size="modal-sm|modal-lg|modal-xl|modal-full" 
	data-ajax-modal-container="#my_custom"
	data-ajax-modal-backdrop="static" 
	data-ajax-modal-centered="true"
	data-ajax-callback-function="" 


	// Programtically Create Modal 	: 		      url , 'modal-md', 'true' (centered), 'backdrop' (optional), callback (optional)
	$.SOW.core.ajax_modal.createFromThinAir(modalUrl, 'modal-lg', 'true', 'static', 'callback');
	// Modal URL is required only!


	// Programtically Attach Element/Link ( $('.selector') or '.selector' )
	// If already bind, will rebind (keep in mind, .off() si used -only- if is already binded)
	$.SOW.core.ajax_modal.attach(selector);

	// JS example : instant attach & open
	// Added attributes are optional (styling pourpose), 
	// code used by Smarty in Photoswiper Controller to load videos!
	$('.selector').addClass('js-onload')
		.attr('data-ajax-modal-delay', '0')
		.attr('data-ajax-modal-type', 'video')
		.attr('data-ajax-modal-size', 'modal-xl')
		.attr('data-ajax-modal-centered', 'true');
	$.SOW.core.ajax_modal.attach('.selector');


									

<!--
	Note: data-href is used instead of href.
	href can also be used but is crawlable by search engines 
	and users can "open link in new tab".

	data-href is always used as primary, if present.
	Can be used both like this:
		     href="url-to-full-page.html"
		data-href="url-to-modal.html"
-->
<a 	href="#"
	data-href="_ajax/modal_contact_md.html" 
	data-ajax-modal-size="" 
	data-ajax-modal-centered="true" 
	data-ajax-modal-callback-function=""
	class="js-ajax-modal btn btn-primary btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax Modal
</a>
											

<!-- 

	external modal content, 
	loaded by ajax 

-->
<!-- header -->
<div class="modal-header">
	<h2 class="modal-title fs--18 m-0">
		Modal Title
	</h2>

	<button type="button" class="close pointer" data-dismiss="modal" aria-label="Close">
		<span class="fi fi-close fs--18" aria-hidden="true"></span>
	</button>
</div>

<!-- body -->
<div class="modal-body"> 
....
</div>

<!-- footer -->
<div class="modal-footer">
	<button type="button" class="btn btn-primary">
		<i class="fi fi-check"></i> 
		Save
	</button>
	<button type="button" class="btn btn-secondary" data-dismiss="modal">
		<i class="fi fi-close"></i> 
		Close
	</button>
</div>
											

<!--
	Note: data-href is used instead of href.
	href can also be used but is crawlable by search engines 
	and users can "open link in new tab".

	data-href is always used as primary, if present.
	Can be used both like this:
		     href="url-to-full-page.html"
		data-href="url-to-modal.html"
-->
<a 	href="#"
	data-href="_ajax/modal_contact_md.html" 
	data-ajax-modal-container="#my_custom"
	data-ajax-modal-size="" 
	data-ajax-modal-centered="true" 
	data-ajax-modal-callback-function=""
	class="js-ajax-modal btn btn-primary btn-soft">
		<i class="fi fi-heart-slim"></i>
	Ajax Modal
</a>


<!-- 

	Modal inline structure 

	The only purpose of this version is to have control 
	over your modal markup. 

	.modal-content cannot be cut/moved out of here because 
	the plugin is looking for it to push data.

-->
<div id="my_custom" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-md" role="document">

		<div class="modal-content"><!-- content added by ajax --></div>

	</div>
</div>
											

<!-- 

	external modal content, 
	loaded by ajax 

-->
<!-- header -->
<div class="modal-header">
	<h2 class="modal-title fs--18 m-0">
		Modal Title
	</h2>

	<button type="button" class="close pointer" data-dismiss="modal" aria-label="Close">
		<span class="fi fi-close fs--18" aria-hidden="true"></span>
	</button>
</div>

<!-- body -->
<div class="modal-body"> 
....
</div>

<!-- footer -->
<div class="modal-footer">
	<button type="button" class="btn btn-primary">
		<i class="fi fi-check"></i> 
		Save
	</button>
	<button type="button" class="btn btn-secondary" data-dismiss="modal">
		<i class="fi fi-close"></i> 
		Close
	</button>
</div>
											

Modal on page load

<!-- 

	AJAX MODAL : ON LOAD 
	Place it anywhere!

-->
<div class="hide js-onload js-ajax-modal" 
    data-href="_ajax/modal_signin_md.html" 
    data-ajax-modal-delay="3000" 
    data-ajax-modal-size="modal-md" 
    data-ajax-modal-centered="false" 
    data-ajax-modal-backdrop="static"></div>