Vendor Plugin

Vendor : Colorpicker

Flat, simple, multi-themed, responsive and hackable Color-Picker library. 


/* 
	:: Vendor Path
	node_modules/@simonwep/pickr/

	:: Installed
	npm install @simonwep/pickr

	:: SOW Controller Init
*/	$.SOW.vendor.colorpicker.init('.colorpicker');


/* 
	:: Plugin Options|Defaults
*/	$.SOW.vendor.colorpicker.init('.datepicker', {

	classic: {

		swatches: [
			'rgba(244, 67, 54, 1)',
			'rgba(233, 30, 99, 0.95)',
			'rgba(156, 39, 176, 0.9)',
			'rgba(103, 58, 183, 0.85)',
			'rgba(63, 81, 181, 0.8)',
			'rgba(33, 150, 243, 0.75)',
			'rgba(3, 169, 244, 0.7)',
			'rgba(0, 188, 212, 0.7)',
			'rgba(0, 150, 136, 0.75)',
			'rgba(76, 175, 80, 0.8)',
			'rgba(139, 195, 74, 0.85)',
			'rgba(205, 220, 57, 0.9)',
			'rgba(255, 235, 59, 0.95)',
			'rgba(255, 193, 7, 1)'
		],

	},

	monolith: {

		swatches: [
			'rgba(244, 67, 54, 1)',
			'rgba(233, 30, 99, 0.95)',
			'rgba(156, 39, 176, 0.9)',
			'rgba(103, 58, 183, 0.85)',
			'rgba(63, 81, 181, 0.8)',
			'rgba(33, 150, 243, 0.75)',
			'rgba(3, 169, 244, 0.7)'
		],

	},


	nano: {

		swatches: [
			'rgba(244, 67, 54, 1)',
			'rgba(233, 30, 99, 0.95)',
			'rgba(156, 39, 176, 0.9)',
			'rgba(103, 58, 183, 0.85)',
			'rgba(63, 81, 181, 0.8)',
			'rgba(33, 150, 243, 0.75)',
			'rgba(3, 169, 244, 0.7)'
		],

	},

	// overwritten via attributes (ex: data-hex="false")
	interaction: {
		hex: true,
		rgba: true,
		hsla: false,
		hsva: false,
		cmyk: false,

		input: true,
		clear: true,
		save: true
	}

});

									

// Ajax attributes
data-id="1" 
data-ajax-url="../demo.files/php/demo.ajax_request.php" 
data-ajax-params="['action','color_change']['section','customer_invoice']" 
data-ajax-method="POST" 
data-toast-success="Sucessfully Updated!"
data-toast-position="top-center"

									

<input readonly autocomplete="off" type="text" name="my_picker" class="form-control bg-transparent pick_inline">

<!-- instead of input (or both) -->
<!-- <span class="pick_inline"></span> -->

<div class="fs--20 ml--6 mr--6 z-index-1 text-success">
	<div class="colorpicker"
		data-theme="classic" 
		data-target=".pick_inline" 
		data-color="#42445a" 
		data-live-update="true" 

		data-hex="true" 
		data-rgba="true" 
		data-hsla="true" 
		data-hsva="true" 
		data-cmyk="true" 

		data-save="false" 
		data-clear="true" 

		data-lng-save="Save" 
		data-lng-clear="Clear" 
		
		data-inline="true" 
		data-use-as-button="true" 
		data-default="HEXA"></div>
</div>
Classic
Monolith
Nano
<!-- 
	data-theme="classic|monolith|nano" 
	data-color="#ff0000"  - default start color
 -->
<div class="input-group-over position-realtive z-index-1 bg-white">

	<input autocomplete="off" type="text" class="form-control bg-transparent colorpicker"
		data-theme="classic" 
		data-color="#ff0000" 

		data-lng-save="Save" 
		data-lng-clear="Clear" 
		
		data-position="bottom-middle" 
		data-show-always="false" 
		data-use-as-button="true" 
		data-default="HEXA">

	<!-- optional icon -->
	<span class="fs--20 ml-3 mr-3 fi mdi-format_color_fill z-index-n1 text-muted"></span>

</div>
Ajax Save
<!-- 
data-id="1"  is not required but might be an id from the database. 
You can instead to add to data-ajax-params ["id","1"]

Read about data-ajax-params if you are not yet familiarized.
 -->
<div class="input-group-over position-realtive z-index-1 bg-white">

	<input autocomplete="off" type="text" class="form-control bg-transparent colorpicker"
		data-theme="classic" 
		data-color="#ff0000" 

		data-id="1" 
		data-ajax-url="../demo.files/php/demo.ajax_request.php" 
		data-ajax-params="['action','color_change']['section','customer_invoice']" 
		data-ajax-method="POST" 
		data-toast-success="Sucessfully Updated!"
		data-toast-position="top-center"

		data-lng-save="Save" 
		data-lng-clear="Clear" 
		
		data-position="bottom-middle" 
		data-show-always="false" 
		data-use-as-button="true" 
		data-default="HEXA">

	<!-- optional icon -->
	<span class="fs--20 ml-3 mr-3 fi mdi-format_color_fill z-index-n1 text-muted"></span>

</div>
											

<div class="input-group-over position-realtive bg-white mb-4">

	<input id="pick2" autocomplete="off" type="text" name="my_picker" class="form-control bg-transparent">

	<span class="fs--20 ml--6 mr--6 z-index-1 text-success border d-inline-block rounded">

		<span class="colorpicker"
			data-theme="classic" 
			data-target="#pick2" 
			data-color="#42445a" 

			data-lng-save="Save" 
			data-lng-clear="Clear" 
			
			data-position="bottom-middle" 
			data-show-always="false" 
			data-use-as-button="false" 
			data-default="HEXA"></span>

	</span>
</div>
											

<div class="input-group-over position-realtive bg-white form-control-pill mb-4">

	<input id="pick3" autocomplete="off" type="text" name="my_picker" class="form-control bg-transparent">

	<span class="fs--20 ml--6 mr--6 z-index-1 text-success border d-inline-block rounded-circle">
		<span class="colorpicker"
			data-theme="classic" 
			data-target="#pick3" 
			data-color="#42445a" 

			data-lng-save="Save" 
			data-lng-clear="Clear" 
			
			data-position="bottom-middle" 
			data-show-always="false" 
			data-use-as-button="false" 
			data-default="HEXA"></span>
	</span>
</div>
Jump To