SOW : Core Plugins

SOW = Step Of Web (Smarty author).
SOW plugins are part of Smarty Core, written from scratch!

SOW : Dropdown

We have 3 total dropdown plugins for different functions.
2 of them are used by main header navigation.


/* 
	:: Plugin File
	src/js/sow.dropdown.js
	src/js/sow.dropdown_click_ignore.js
	src/js/sow.dropdown_ajax.js

	:: Plugin Init
*/	$.SOW.core.dropdown.init('.dropdown-menu.dropdown-menu-hover');
	$.SOW.core.dropdown_click_ignore.init('.dropdown-menu.dropdown-click-ignore');
	$.SOW.core.dropdown_ajax.init('a[data-toggle="dropdown"]');

/*

	NOTE:
		sow.dropdown.js & sow.dropdown_ajax.js
		require: sow.dropdown_click_ignore.js

		dropdown_click_ignore = do not close dropdown on self click.
*/
									

Examples

Dropdown Click Ignore

<div class="dropdown">
	<a href="#" class="btn btn-primary" data-toggle="dropdown">
		With .dropdown-click-ignore
	</a>


	<div class="dropdown-menu dropdown-click-ignore">
		<div class="p--15">
			Click Me!
		</div>
	</div>
</div>
											

Dropdown Click Update
<
Note: .js-trigger-text is required for both: 
	- dropdown trigger button
	- dropdown link

.dropdown-menu-click-update
	is the key class on activating this function!
-->
<div class="dropdown d-inline-block mb-3">
	
	<a href="#" class="btn btn-warning" data-toggle="dropdown">
		<span class="js-trigger-text">Item #1</span>
	</a>


	<div class="dropdown-menu dropdown-menu-click-update">
		<a href="#!" class="dropdown-item active">
			<span class="js-trigger-text">Item #1</span>
		</a>
		<a href="#!" class="dropdown-item">
			<span class="js-trigger-text">Item #2</span>
		</a>
		<a href="#!" class="dropdown-item">
			<span class="js-trigger-text">Item #3</span>
		</a>
	</div>
</div>


<!--

A callback is also available by adding to .dropdown-menu div:
	data-dropdown-callback="myCallbackFunction"

And your function is called by passing also the href of the clicked link:
var myCallbackFunction = function(href) {
	// your code
}

-->
											

view code

<!-- Ajax : html -->
<div class="dropdown d-inline-block">

	<!--
			
		Required Plugins:
			SOW : Dropdown
			SOW : Dropdown Ajax
			SOW : Dropdown Click Ignore
			* If SOW : Ajax Navigation used (like right now in the demo), 
			ajax links will be active inside dropdown. Just add .js-ajax to the valid links.

		Optional:
			data-dropdown-ajax-reload-always="true"
				Each time a dropdown is clicked, an ajax request is sent to reload the dropdown content.
				If .dropdown-menu has .dropdown-menu-hover class (dropdown is open on mouse over), is ignored (except on mobile)

		Refresh cache interval - dropdown content refreshed on hover after specified time 
		(60000 = 1 min. (formula: 1000 * 60)). Default is set to 1 min.
			data-dropdown-ajax-refresh-interval="60000" 

		Using localstorage cache - useful for header main menu (auto repopulate on page load)
		Cache lifetime is 30 min! Cache is set by URL so by adding to URL: ?v=xxx will invalidate cache!
			data-dropdown-ajax-cache="true" 

		More optional params if needed:
			data-dropdown-ajax-method="GET|POST"	(default is "GET")
			data-dropdown-ajax-contentType=""		(jQuery default)
			data-dropdown-ajax-dataType=""			(jQuery default)
			data-dropdown-ajax-loadicon=""			(default: "fi fi-circle-spin fi-spin")

	-->
	<a 	href="#" id="ddAjax_demo1" 
		data-dropdown-ajax-source="_ajax/dropdown_ajax.html"
		data-toggle="dropdown" 
		aria-expanded="false" 
		aria-haspopup="true" 
		class="btn btn-sm btn-danger btn-soft btn-pill">

		<span class="group-icon">
			<i class="fi fi-arrow-end-slim"></i>
			<i class="fi fi-arrow-down"></i>
		</span>
		<span>Ajax : Html</span>

	</a>

	<!--
		Required: 
			.dropdown-menu-block-md added to .dropdown-menu (mobile, if dropdown has multilevel)

		Optional:
			.dropdown-menu-hover
	-->
	<div aria-labelledby="ddAjax_demo1" class="dropdown-menu dropdown-menu-clean dropdown-menu-block-md max-w-200">
		
		<!-- ajax content -->

	</div>

</div>
												

view code

<!-- Ajax : json -->
<div class="dropdown d-inline-block">

	<!--
			
		1. Ajax Dropdown Content
			The dropdown content is loaded on user interaction only:
				- on mouse over (if dropdown is opening on mouse over (click on mobile device))
				- on mouse click
			++ ++ ++
			Curently is set by config to work for links: a[data-toggle="dropdown"]
			You can add to config for buttons (separated by comma): button[data-toggle="dropdown"]
			Or simply by using a class. 
			Instead of autoinit by config, the plugin can also be called alone like this: 
				$.SOW.core.dropdown_ajax.init('a[data-toggle="dropdown"]');


	-->
	<a 	href="#" id="ddAjax_demo2" 
		data-dropdown-ajax-source="_ajax/dropdown_ajax.json"
		data-dropdown-ajax-mode="json"
		data-toggle="dropdown" 
		aria-expanded="false" 
		aria-haspopup="true" 
		class="btn btn-sm btn-danger btn-soft btn-pill">

		<span class="group-icon">
			<i class="fi fi-arrow-end-slim"></i>
			<i class="fi fi-arrow-down"></i>
		</span>
		<span>Ajax : Json</span>

	</a>

	<!--

		Required Plugins:
			SOW : Dropdown
			SOW : Dropdown Ajax
			SOW : Dropdown Click Ignore
			* If SOW : Ajax Navigation used (like right now in the demo), 
			ajax links will be active inside dropdown. Just add .js-ajax to dropdown links.

		Optional:
			data-dropdown-ajax-reload-always="true"
				Each time a dropdown is clicked, an ajax request is sent to reload the dropdown content.
				If .dropdown-menu has .dropdown-menu-hover class (dropdown is open on mouse over), is ignored (except on mobile)

		Refresh cache interval - dropdown content refreshed on hover after specified time 
		(60000 = 1 min. (formula: 1000 * 60)). Default is set to 1 min.
			data-dropdown-ajax-refresh-interval="60000" 

		Using localstorage cache - useful for header main menu (auto repopulate on page load)
		Cache lifetime is 30 min! Cache is set by URL so by adding to URL: ?v=xxx will invalidate cache!
			data-dropdown-ajax-cache="true" 

		More optional params if needed:
			data-dropdown-ajax-method="GET|POST"	(default is "GET")
			data-dropdown-ajax-contentType=""		(jQuery|config default)
			data-dropdown-ajax-dataType=""			(jQuery|config default)
			data-dropdown-ajax-loadicon=""			(default: "fi fi-circle-spin fi-spin")

			data-dropdown-ajax-mode="html|json" 			html|json ; json = Build dropdown from json data
									html structure: _ajax/dropdown_ajax.html
									json structure: _ajax/dropdown_ajax.json
									see also _ajax/dropdown_ajax.php (for a php example)


		Working examples
			data-dropdown-ajax-source="_ajax/dropdown_ajax.html"
			data-dropdown-ajax-mode="html"

			data-dropdown-ajax-source="_ajax/dropdown_ajax.json"
			data-dropdown-ajax-mode="json"

			data-dropdown-ajax-source="_ajax/dropdown_ajax.php"
			data-dropdown-ajax-mode="json"

	-->
	<div aria-labelledby="ddAjax_demo2" class="dropdown-menu dropdown-menu-clean dropdown-menu-block-md max-w-200">
		
		<!-- ajax content -->

	</div>

</div>
												

Ajax Image Switcher
view json
view code

<!-- 
	Ajax : Image Switcher 

		1. Load images from a json (ajax)
			(images are loaded ONLY on click)

		2. Update on image click (ajax)

		GET -or- POST : both supported

		++ Cache
		data-ddimg-cache="true" 
			+ Used if possible, to avoid multiple server request
			  on exact same URL (and params). Set "false" to disable!


	++ ++
	AJAX UPDATE PARAMS SENT TO SERVER (data-ddimg-ajax-update-url="....")

		{ ajax:'true', img_src:img_src, img_id:img_id }
		(including custom params from data-ddimg-ajax-update-params="...")
-->



<div class="dropdown"><!-- dropup|dropdown -->
	
	<!-- trigger -->
	<label data-toggle="dropdown" class="dropdown-image-list rounded text-center position-relative bg-light d-block cursor-pointer mb-0 w--100 h--100 rounded">

		<!-- icon (no image) -->
		<span class="absolute-full d-middle z-index-1">
			<i class="fi fi-image fs--30 text-muted"></i>
		</span>

		<!-- image (default image: style="background-image:url(...)" -->
		<span class="dropdown-image-container d-block position-relative z-index-2 absolute-full bg-cover rounded overlow-hidden"><!-- image --></span>

	</label>

	<!-- dropdown container -->
	<div class="dropdown-menu dropdown-menu-click-update p-1 w--280" 
			data-ddimg-ajax-populate-url="_ajax/dropdown_ajax_image_switcher.json" 
			data-ddimg-ajax-populate-params="['action','image_list']['param2','value2']" 
			data-ddimg-ajax-populate-method="GET" 

			data-ddimg-ajax-update-url="../demo.files/php/demo.ajax_request.php" 
			data-ddimg-ajax-update-params="['action','image_update']['product_id','1']" 
			data-ddimg-ajax-update-method="GET" 
			
			data-ddimg-cache="true" 

			data-ddimg-toast-success="Successfully Updated!" 
			data-ddimg-toast-position="top-center" 
			data-ddimg-noimg-text="No Images">

		<h6 class="px-1 pt-1">
			Select Image
		</h6>

		<div class="scrollable-vertical scrollable-styled-dark max-h-300">

			<!-- remove button -->
			<a href="#!" class="dropdown-image-reset position-relative bg-light float-start w--80 h--80 m-1 p-0 d-middle text-decoration-none rounded overflow-hidden">
				<i class="fi fi-close fs--50 text-gray-500"></i>
			</a>

			<div class="dropdown-ajax-container"><!-- populated by ajax --></div>

		</div>

	</div>

</div>
												

Without Ajax Update
view json
view code

<!-- 
	Ajax : Image Switcher 


		1. Load images from a json (ajax)
			(images are loaded ONLY on click)

		2. On image click update hidden inputs only
			(inpus can also be added to ajax update (above example))

		++ Cache
		data-ddimg-cache="true" 
			+ Used if possible, to avoid multiple server request
			  on exact same URL (and params). Set "false" to disable!

-->



<div class="dropdown"><!-- dropup|dropdown -->
	
	<!-- trigger -->
	<label data-toggle="dropdown" class="dropdown-image-list rounded text-center position-relative bg-light d-block cursor-pointer mb-0 w--100 h--100 rounded">

		<!-- icon (no image) -->
		<span class="absolute-full d-middle z-index-1">
			<i class="fi fi-image fs--30 text-muted"></i>
		</span>

		<!-- image (default image: style="background-image:url(...)" -->
		<span class="dropdown-image-container d-block position-relative z-index-2 absolute-full bg-cover rounded overlow-hidden"><!-- image --></span>

		<!-- hidden inputs : updated by JS -->
		<input type="hidden" class="dropdown-ddimg-img-id" name="img_id[]" value="0"><!-- database image id -->
		<input type="hidden" class="dropdown-ddimg-img-src" name="img_src[]" value="">

	</label>

	<!-- dropdown container -->
	<div class="dropdown-menu dropdown-menu-click-update p-1 w--280" 
			data-ddimg-ajax-populate-url="_ajax/dropdown_ajax_image_switcher.json" 
			data-ddimg-ajax-populate-params="['action','image_list']['param2','value2']" 
			data-ddimg-ajax-populate-method="GET"
			data-ddimg-cache="true" 
			data-ddimg-noimg-text="No Images">

		<h6 class="px-1 pt-1">
			Select Image
		</h6>

		<div class="scrollable-vertical scrollable-styled-dark max-h-300">

			<!-- remove button -->
			<a href="#!" class="dropdown-image-reset position-relative bg-light float-start w--80 h--80 m-1 p-0 d-middle text-decoration-none rounded overflow-hidden">
				<i class="fi fi-close fs--50 text-gray-500"></i>
			</a>

			<div class="dropdown-ajax-container"><!-- populated by ajax --></div>

		</div>

	</div>

</div>