BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 2.0.14

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v2.0.14

betterdocs / admin / assets / js / customizer-gradient-control.js

customizer-gradient-control.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 2.0.14, at admin/assets/js/customizer-gradient-control.js

127 lines 5.4 KB

Raw Download Zip

1	jQuery(document).ready(function($) {
2	"use strict";
3	$(".betterdocs-gradient-color-control").each(function() {
4	let gradient_color = $(this).find('.flexia-gradient-color');
5	let color1 = $(this).find('.gradient-control-color-1');
6	let color1_percent = $(this).find('.gradient-control-color-1-percent');
7	let color2 = $(this).find('.gradient-control-color-2');
8	let color2_percent = $(this).find('.gradient-control-color-2-percent');
9	let color3 = $(this).find('.gradient-control-color-3');
10	let color3_percent = $(this).find('.gradient-control-color-3-percent');
11	let color4 = $(this).find('.gradient-control-color-4');
12	let color4_percent = $(this).find('.gradient-control-color-4-percent');
13	let direction = $(this).find('.gradient-control-direction');
14	let angle = $(this).find('.gradient-control-angle');
15
16	let containerColor1 = $(this).find('.customize-control-gradient-color-1');
17	let containerColor2 = $(this).find('.customize-control-gradient-color-2');
18	let containerColor3 = $(this).find('.customize-control-gradient-color-3');
19	let containerColor4 = $(this).find('.customize-control-gradient-color-4');
20
21	let gradient_result = {
22	color1: color1.val(),
23	color1_percent: color1_percent.val(),
24	color2: color2.val(),
25	color2_percent: color2_percent.val(),
26	color3: color3.val(),
27	color3_percent: color3_percent.val(),
28	color4: color4.val(),
29	color4_percent: color4_percent.val(),
30	direction: direction.val(),
31	angle: parseInt(angle.val()),
32	};
33
34	let color1PickerOptions = {
35	change: function() {
36	let wpColor1 = color1.wpColorPicker( 'color' );
37	gradient_result.color1 = wpColor1;
38	gradient_color.val(JSON.stringify(gradient_result)).change();
39	}
40	}
41	color1.wpColorPicker( color1PickerOptions );
42
43	let color2PickerOptions = {
44	change: function() {
45	let wpColor2 = color2.wpColorPicker( 'color' );
46	gradient_result.color2 = wpColor2;
47	gradient_color.val(JSON.stringify(gradient_result)).change();
48	}
49	}
50	color2.wpColorPicker( color2PickerOptions );
51
52	let color3PickerOptions = {
53	change: function() {
54	let wpColor3 = color3.wpColorPicker( 'color' );
55	gradient_result.color3 = wpColor3;
56	gradient_color.val(JSON.stringify(gradient_result)).change();
57	}
58	}
59	color3.wpColorPicker( color3PickerOptions );
60
61	let color4PickerOptions = {
62	change: function() {
63	let wpColor4 = color4.wpColorPicker( 'color' );
64	gradient_result.color4 = wpColor4;
65	gradient_color.val(JSON.stringify(gradient_result)).change();
66	}
67	}
68	color4.wpColorPicker( color4PickerOptions );
69
70	$(containerColor1).find( '.button.wp-picker-clear' ).on('click', function () {
71	gradient_result.color1 = 'transparent';
72	gradient_color.val(JSON.stringify(gradient_result)).change();
73	})
74
75	$(containerColor2).find( '.button.wp-picker-clear' ).on('click', function () {
76	gradient_result.color2 = 'transparent';
77	gradient_color.val(JSON.stringify(gradient_result)).change();
78	})
79
80	$(containerColor3).find( '.button.wp-picker-clear' ).on('click', function () {
81	gradient_result.color3 = 'transparent';
82	gradient_color.val(JSON.stringify(gradient_result)).change();
83	})
84
85	$(containerColor4).find( '.button.wp-picker-clear' ).on('click', function () {
86	gradient_result.color4 = 'transparent';
87	gradient_color.val(JSON.stringify(gradient_result)).change();
88	})
89
90	$(color1_percent).bind('change onkeyup', function () {
91	let color1_percent_val = color1_percent.val();
92	gradient_result.color1_percent = color1_percent_val;
93	gradient_color.val(JSON.stringify(gradient_result)).change();
94	})
95
96	$(color2_percent).bind('change onkeyup', function () {
97	let color2_percent_val = color2_percent.val();
98	gradient_result.color2_percent = color2_percent_val;
99	gradient_color.val(JSON.stringify(gradient_result)).change();
100	})
101	$(color3_percent).bind('change onkeyup', function () {
102	let color3_percent_val = color3_percent.val();
103	gradient_result.color3_percent = color3_percent_val;
104	gradient_color.val(JSON.stringify(gradient_result)).change();
105	})
106	$(color4_percent).bind('change onkeyup', function () {
107	let color4_percent_val = color4_percent.val();
108	gradient_result.color4_percent = color4_percent_val;
109	gradient_color.val(JSON.stringify(gradient_result)).change();
110	})
111
112	$(direction).on('change', function(){
113	gradient_result.angle = 0;
114	let direction_val = direction.val();
115	gradient_result.direction = direction_val;
116	gradient_color.val(JSON.stringify(gradient_result)).change();
117	})
118
119	$(angle).on('change', function(){
120	let angle_val = parseInt(angle.val());
121	gradient_result.angle = angle_val;
122	gradient_color.val(JSON.stringify(gradient_result)).change();
123	})
124
125	});
126	});
127