← All changes | assets/js/mainwp-groups.js +328 -172 5.0 → 6.2.1 View file →

		@@ -1,203 +1,359 @@
1		-jQuery(document).ready(function () {
	1	+jQuery(function () {
2	2
3		- // Init the groups menu
4		- jQuery('#mainwp-groups-menu').find('a.item').on('click', function () {
5		- jQuery(this).addClass('active green');
6		- jQuery(this).siblings().removeClass('active green');
7		- jQuery(this).find('.label').addClass('green');
8		- jQuery(this).siblings().find('.label').removeClass('green');
9		- jQuery('#mainwp-delete-group-button').removeClass('disabled');
10		- jQuery('#mainwp-rename-group-button').removeClass('disabled');
11		- jQuery('#mainwp-save-sites-groups-selection-button').removeClass('disabled');
12		- show_group_items(this);
13		- });
	3	+ // Auto-select newly created group from URL parameter
	4	+ let urlParams = new URLSearchParams(globalThis.location.search);
	5	+ let newGroupId = urlParams.get('new-tag');
14	6
15		- // Trigger the create a new group modal
16		- jQuery(document).on('click', '#mainwp-new-sites-group-button', function () {
17		- jQuery('#mainwp-create-group-modal').modal({
18		- onHide: function () {
19		- window.location.href = location.href;
20		- },
21		- onShow: function () {
22		- jQuery('#mainwp-create-group-modal').find('input#mainwp-group-name').val('');
23		- jQuery('#mainwp-create-group-modal').find('input#mainwp-new-tag-color').val('');
24		- }
25		- }).modal('show');
26		- });
	7	+ jQuery(document).ready(function () {
	8	+ if (newGroupId) {
	9	+ // Find the menu item with the new group ID
	10	+ let newGroupItem = jQuery('#mainwp-groups-menu').find('a.item#' + newGroupId);
27	11
28		- // Trigger the edit group modal
29		- jQuery(document).on('click', '#mainwp-rename-group-button', function () {
30		- jQuery('#mainwp-rename-group-modal').modal({
31		- onHide: function () {
32		- window.location.href = location.href;
33		- },
34		- onShow: function () {
35		- var groupName = jQuery('#mainwp-groups-menu').find('.active').find('#mainwp-hidden-group-name').val();
36		- var groupColor = jQuery('#mainwp-groups-menu').find('.active').find('#mainwp-hidden-group-color').val();
37		- jQuery('#mainwp-rename-group-modal').find('input#mainwp-group-name').val(groupName);
38		- jQuery('#mainwp-rename-group-modal').find('input#mainwp-new-tag-color').val(groupColor);
39		- var $renameColor = jQuery('#mainwp-rename-group-modal .mainwp-tag-color-picker').wpColorPicker({
40		- hide: true,
41		- clear: false,
42		- palettes: ['#18a4e0', '#0253b3', '#7fb100', '#446200', '#ad0000', '#ffd300', '#2d3b44', '#6435c9', '#e03997', '#00b5ad'],
43		- });
44		- $renameColor.wpColorPicker('color', groupColor);
45		- }
46		- }).modal('show');
47		- });
	12	+ if (newGroupItem.length > 0) {
	13	+ // Trigger click on the new group item to select it
	14	+ newGroupItem.trigger('click');
	15	+ // Show success message
	16	+ feedback('mainwp-message-zone', 'Tag created successfully.', 'ui green message');
48	17
49		- // Create a new group
50		- jQuery(document).on('click', '#mainwp-save-new-group-button', function () {
51		- var newName = jQuery('#mainwp-create-group-modal').find('input#mainwp-group-name').val();
52		- var newColor = jQuery('#mainwp-create-group-modal').find('input#mainwp-new-tag-color').val();
	18	+ // Auto-hide message after 5 seconds
	19	+ setTimeout(() => {
	20	+ jQuery('#mainwp-message-zone').fadeOut();
	21	+ }, 5000);
53	22
54		- var data = mainwp_secure_data({
55		- action: 'mainwp_group_add',
56		- newName: newName,
57		- newColor: newColor
	23	+ // Remove the URL parameter without reloading the page
	24	+ let cleanUrl = globalThis.location.pathname + globalThis.location.search.replace(/[?&]new-tag=[^&]+/, '').replace(/^&/, '?');
	25	+ if (cleanUrl.endsWith('?')) {
	26	+ cleanUrl = cleanUrl.slice(0, -1);
	27	+ }
	28	+ globalThis.history.replaceState({}, document.title, cleanUrl);
	29	+ }
	30	+ }
	31	+ })
	32	+
	33	+ // Init the groups menu
	34	+ jQuery('#mainwp-groups-menu').find('a.item').on('click', function () {
	35	+ jQuery(this).addClass('active green');
	36	+ jQuery(this).siblings().removeClass('active green');
	37	+ jQuery(this).find('.label').addClass('green');
	38	+ jQuery(this).siblings().find('.label').removeClass('green');
	39	+ jQuery('#mainwp-delete-group-button').removeClass('disabled');
	40	+ jQuery('#mainwp-rename-group-button').removeClass('disabled');
	41	+ jQuery('#mainwp-save-sites-groups-selection-button').removeClass('disabled');
	42	+ jQuery('#mainwp-message-zone').fadeOut();
	43	+ show_group_items(this);
	44	+ apply_tag_fade_effect(this);
	45	+
58	46	});
59		- jQuery.post(ajaxurl, data, function (response) {
60		- try {
61		- resp = JSON.parse(response);
62	47
63		- if (resp.error != undefined)
64		- return;
65		- } catch (err) {
66		- // to fix js error.
67		- }
68		- jQuery('#mainwp-create-group-modal').modal({
69		- onHide: function () {
70		- window.location.reload();
	48	+
	49	+ // Trigger the create a new group modal
	50	+ jQuery(document).on('click', '#mainwp-new-sites-group-button', function () {
	51	+ jQuery('#mainwp-create-group-modal').modal({
	52	+ onHide: function () {
	53	+ mainwp_forceReload();
	54	+ },
	55	+ onShow: function () {
	56	+ jQuery('#mainwp-create-group-modal').find('input[name="mainwp-group-name"]').val('');
	57	+ jQuery('#mainwp-create-group-modal').find('input#mainwp-new-tag-color').val('');
	58	+ // Disable button initially.
	59	+ jQuery('#mainwp-save-new-group-button').addClass('disabled');
	60	+ }
	61	+ }).modal('show');
	62	+ });
	63	+
	64	+ // Enable/disable create button based on input validation
	65	+ jQuery(document).on('input', '#mainwp-create-group-modal input[name="mainwp-group-name"], #mainwp-rename-group-modal input[name="mainwp-group-name"]', function () {
	66	+ let groupName = jQuery(this).val().trim();
	67	+ if (groupName.length > 0) {
	68	+ jQuery('#mainwp-save-new-group-button').removeClass('disabled');
	69	+ jQuery('#mainwp-update-new-group-button').removeClass('disabled');
	70	+ } else {
	71	+ jQuery('#mainwp-save-new-group-button').addClass('disabled');
	72	+ jQuery('#mainwp-update-new-group-button').addClass('disabled');
71	73	}
72		- }).modal('hide');
73	74	});
74		- return false;
75		- });
76	75
77		- // Delete a group
78		- jQuery(document).on('click', '#mainwp-delete-group-button', function () {
79		- var gruopItem = jQuery('#mainwp-groups-menu').find('.active');
80		- mainwp_confirm('Are you sure you want to delete this group?', function () {
81		- var groupID = gruopItem.attr('id');
82		- var data = mainwp_secure_data({
83		- action: 'mainwp_group_delete',
84		- groupId: groupID
85		- });
86		- jQuery.post(ajaxurl, data, function (gruopItem) {
87		- return function (response) {
88		- response = response.trim();
89		- if (response == 'OK') {
90		- gruopItem.fadeOut(300);
91		- }
	76	+ // Enable update button when color changes in rename modal
	77	+ jQuery(document).on('input change', '#mainwp-rename-group-modal input#mainwp-new-tag-color', function () {
	78	+ let groupName = jQuery('#mainwp-rename-group-modal').find('input[name="mainwp-group-name"]').val().trim();
	79	+ if (groupName.length > 0) {
	80	+ jQuery('#mainwp-update-new-group-button').removeClass('disabled');
92	81	}
93		- }(gruopItem));
94	82	});
95		- return false;
96		- });
97	83
98		- // Update group name
99		- jQuery(document).on('click', '#mainwp-update-new-group-button', function () {
100		- var groupID = jQuery('#mainwp-groups-menu').find('.active').attr('id');
101		- var newName = jQuery('#mainwp-rename-group-modal').find('input#mainwp-group-name').val();
102		- var newColor = jQuery('#mainwp-rename-group-modal').find('input#mainwp-new-tag-color').val();
103		- var data = mainwp_secure_data({
104		- action: 'mainwp_group_rename',
105		- groupId: groupID,
106		- newName: newName,
107		- newColor: newColor
	84	+ // Trigger the edit group modal
	85	+ jQuery(document).on('click', '#mainwp-rename-group-button', function () {
	86	+ jQuery('#mainwp-rename-group-modal').modal({
	87	+ onHide: function () {
	88	+ mainwp_forceReload();
	89	+ },
	90	+ onShow: function () {
	91	+ let groupName = jQuery('#mainwp-groups-menu').find('.active').find('#mainwp-hidden-group-name').val();
	92	+ let groupColor = jQuery('#mainwp-groups-menu').find('.active').find('#mainwp-hidden-group-color').val();
	93	+ jQuery('#mainwp-rename-group-modal').find('input[name="mainwp-group-name"]').val(groupName);
	94	+ jQuery('#mainwp-rename-group-modal').find('input#mainwp-new-tag-color').val(groupColor);
	95	+ // Disable button initially.
	96	+ jQuery('#mainwp-update-new-group-button').addClass('disabled');
	97	+ }
	98	+ }).modal('show');
108	99	});
109		- jQuery.post(ajaxurl, data, function () {
110		- return function (response) {
111		- if (response.error) {
112		- return;
	100	+
	101	+ // Create a new group
	102	+ jQuery(document).on('click', '#mainwp-save-new-group-button', function (e) {
	103	+
	104	+ let $button = jQuery(this);
	105	+ let $modal = jQuery('#mainwp-create-group-modal');
	106	+ let newName = $modal.find('input[name="mainwp-group-name"]').val().trim();
	107	+ let newColor = $modal.find('input#mainwp-new-tag-color').val();
	108	+
	109	+ // Validate input
	110	+ if (newName.length === 0) {
	111	+ return false;
113	112	}
114		- jQuery('#mainwp-create-group-modal').modal({
115		- onHide: function () {
116		- window.location.reload();
	113	+
	114	+ // Check if button is already disabled (loading)
	115	+ if ($button.hasClass('disabled') || $button.data('loading')) {
117	116	return false;
118		- }
119		- }).modal('hide');
120		- }
121		- }(), 'json');
122		- return false;
123		- });
	117	+ }
124	118
125		- // Select all sites
126		- jQuery('#mainwp-manage-groups-sites-table th input[type="checkbox"]').on('change', function () {
127		- var checkboxes = jQuery('#mainwp-manage-groups-sites-table').find(':checkbox');
128		- if (jQuery(this).prop('checked')) {
129		- checkboxes.prop('checked', true);
130		- checkboxes.parents('tr').addClass('active');
131		- } else {
132		- checkboxes.prop('checked', false);
133		- checkboxes.parents('tr').removeClass('active');
134		- }
135		- });
	119	+ let selected_sites = [];
	120	+ jQuery("input[name='sites']:checked").each(function () {
	121	+ selected_sites.push(jQuery(this).val());
	122	+ });
136	123
137		- // Set class 'active' to selected sites table row
138		- jQuery('.mainwp-site-checkbox').on('change', function () {
139		- if (jQuery(this).prop('checked')) {
140		- jQuery(this).parents('tr').addClass('active');
141		- } else {
142		- jQuery(this).parents('tr').removeClass('active');
143		- }
144		- });
	124	+ // Disable button and show loading state.
	125	+ let originalText = $button.html();
	126	+ $button.data('loading', true);
	127	+ $button.addClass('disabled');
	128	+ $button.html('<i class="spinner loading icon"></i> Creating...');
	129	+ $modal.find('input').prop('disabled', true);
145	130
146		- // Save selected sites for a group
147		- jQuery(document).on('click', '#mainwp-save-sites-groups-selection-button', function () {
148		- var groupID = jQuery('#mainwp-groups-menu').find('.active').attr('id');
149		- var sites = jQuery('#mainwp-manage-groups-sites-table').find('input.mainwp-site-checkbox:checked');
150		- var sitesIDs = [];
	131	+ let data = mainwp_secure_data({
	132	+ //action: 'mainwp_group_add',
	133	+ action: 'mainwp_group_sites_add',
	134	+ selected_sites: selected_sites,
	135	+ newName: newName,
	136	+ newColor: newColor
	137	+ });
	138	+ jQuery.post(ajaxurl, data, function (response) {
	139	+ try {
	140	+ let resp = JSON.parse(response);
151	141
152		- for (var i = 0; i < sites.length; i++) {
153		- sitesIDs.push(jQuery(sites[i]).val());
154		- }
	142	+ if (resp.error != undefined) {
	143	+ // Remove loading state on error
	144	+ $button.data("loading", false);
	145	+ $button.removeClass("disabled");
	146	+ $button.html(originalText);
	147	+ $modal.find("input").prop("disabled", false);
	148	+ return;
	149	+ }
155	150
156		- if (groupID == undefined) {
157		- return;
158		- }
	151	+ globalThis.location.href = "admin.php?page=ManageGroups&new-tag=" + resp.success;
	152	+ } catch {
	153	+ // to fix js error.
	154	+ // Remove loading state on error
	155	+ $button.data("loading", false);
	156	+ $button.removeClass("disabled");
	157	+ $button.html(originalText);
	158	+ $modal.find("input").prop("disabled", false);
	159	+ }
	160	+ });
	161	+ e.preventDefault();
	162	+ e.stopPropagation();
	163	+ return true;
	164	+ });
159	165
160		- var data = mainwp_secure_data({
161		- action: 'mainwp_group_updategroup',
162		- groupId: groupID,
163		- websiteIds: sitesIDs
	166	+ // Delete a Tag
	167	+ jQuery(document).on('click', '#mainwp-delete-group-button', function () {
	168	+ let gruopItem = jQuery('#mainwp-groups-menu').find('.active');
	169	+
	170	+ let _deltag_callback = function () {
	171	+ let groupID = gruopItem.attr('id');
	172	+ let data = mainwp_secure_data({
	173	+ action: 'mainwp_group_delete',
	174	+ groupId: groupID
	175	+ });
	176	+ jQuery.post(ajaxurl, data, function (response) {
	177	+ response = response.trim();
	178	+ if (response == 'OK') {
	179	+ mainwp_forceReload();
	180	+ }
	181	+ });
	182	+ };
	183	+
	184	+ mainwp_confirm('Are you sure you want to delete this tag?', _deltag_callback);
	185	+ return false;
164	186	});
165	187
166		- jQuery(this).addClass('disabled');
	188	+ // Update group name
	189	+ jQuery(document).on('click', '#mainwp-update-new-group-button', function () {
	190	+ let $button = jQuery(this);
	191	+ let $modal = jQuery('#mainwp-rename-group-modal');
167	192
168		- jQuery.post(ajaxurl, data, function () {
169		- jQuery(this).removeClass('disabled');
170		- jQuery('#mainwp-message-zone').stop(true, true);
171		- jQuery('#mainwp-message-zone').show();
172		- jQuery('#mainwp-message-zone').fadeOut(3000);
173		- return;
174		- }, 'json');
	193	+ let groupID = jQuery('#mainwp-groups-menu').find('.active').attr('id');
	194	+ let newName = $modal.find('input[name="mainwp-group-name"]').val();
	195	+ let newColor = $modal.find('input#mainwp-new-tag-color').val();
	196	+ let data = mainwp_secure_data({
	197	+ action: 'mainwp_group_rename',
	198	+ groupId: groupID,
	199	+ newName: newName,
	200	+ newColor: newColor
	201	+ });
175	202
176		- });
	203	+ // Disable button and show loading state.
	204	+ let originalText = $button.html();
	205	+ $button.data('loading', true);
	206	+ $button.addClass('disabled');
	207	+ $button.html('<i class="spinner loading icon"></i> Updating...');
	208	+ $modal.find('input').prop('disabled', true);
177	209
178		- // Load group sites
179		- show_group_items = function (group) {
180		- var groupID = jQuery(group).attr('id');
181		- var data = mainwp_secure_data({
182		- action: 'mainwp_group_getsites',
183		- groupId: groupID
	210	+
	211	+ jQuery.post(ajaxurl, data, function (response) {
	212	+ if (response.error) {
	213	+ // Remove loading state on error
	214	+ $button.data("loading", false);
	215	+ $button.removeClass("disabled");
	216	+ $button.html(originalText);
	217	+ $modal.find("input").prop("disabled", false);
	218	+ return;
	219	+ }
	220	+ jQuery('#mainwp-create-group-modal').modal({
	221	+ onHide: function () {
	222	+ mainwp_forceReload();
	223	+ return false;
	224	+ }
	225	+ }).modal('hide');
	226	+ }, 'json');
	227	+
	228	+ return false;
184	229	});
185		- jQuery('.dimmer').addClass('active');
186		- jQuery.post(ajaxurl, data, function (response) {
187		- jQuery('.dimmer').removeClass('active');
188		- response = response.trim();
189		- if (response == 'ERROR') {
190		- return;
191		- }
192		- jQuery('input.mainwp-site-checkbox').prop('checked', false);
193		- jQuery('input.mainwp-site-checkbox').closest('tr').removeClass('active');
194		- var sites = JSON.parse(response);
195		- for (var i = 0; i < sites.length; i++) {
196		- jQuery('input[value="' + sites[i] + '"].mainwp-site-checkbox').prop('checked', true);
197		- jQuery('input[value="' + sites[i] + '"].mainwp-site-checkbox').closest('tr').addClass('active');
198		- }
	230	+
	231	+ // Select all sites
	232	+ jQuery('#mainwp-manage-groups-sites-table th input[type="checkbox"]').on('change', function () {
	233	+ let checkboxes = jQuery('#mainwp-manage-groups-sites-table').find(':checkbox');
	234	+ if (jQuery(this).prop('checked')) {
	235	+ checkboxes.prop('checked', true);
	236	+ checkboxes.parents('tr').addClass('selected active');
	237	+ } else {
	238	+ checkboxes.prop('checked', false);
	239	+ checkboxes.parents('tr').removeClass('selected active');
	240	+ }
199	241	});
200		- return false;
201		- }
	242	+
	243	+ // Set class 'active' to selected sites table row
	244	+ jQuery('.mainwp-site-checkbox').on('change', function () {
	245	+ if (jQuery(this).prop('checked')) {
	246	+ jQuery(this).parents('tr').addClass('selected active');
	247	+ } else {
	248	+ jQuery(this).parents('tr').removeClass('selected active');
	249	+ }
	250	+ });
	251	+
	252	+ // Keep update selected tag site ids.
	253	+ jQuery(document).on('change', '#mainwp-manage-groups-sites-table .mainwp-site-checkbox', function () {
	254	+ let tag_siteids = jQuery('#mainwp-save-sites-groups-selection-button').attr('selected-tag-siteids');
	255	+ if (tag_siteids !== undefined) {
	256	+ tag_siteids = '' == tag_siteids ? [] : JSON.parse(tag_siteids);
	257	+
	258	+ const valSiteId = jQuery(this).val();
	259	+ if (jQuery(this).is(':checked')) {
	260	+ if (!tag_siteids.includes(valSiteId)) {
	261	+ tag_siteids.push(valSiteId);
	262	+ }
	263	+ } else {
	264	+ const index = tag_siteids.indexOf(valSiteId);
	265	+ if (index !== -1) {
	266	+ tag_siteids.splice(index, 1);
	267	+ }
	268	+ }
	269	+
	270	+ jQuery('#mainwp-save-sites-groups-selection-button').attr('selected-tag-siteids', tag_siteids.length ? JSON.stringify(tag_siteids) : '')
	271	+ }
	272	+ });
	273	+
	274	+
	275	+ // Save selected sites for a group
	276	+ jQuery(document).on('click', '#mainwp-save-sites-groups-selection-button', function (e) {
	277	+
	278	+ e.preventDefault();
	279	+
	280	+ let groupID = jQuery('#mainwp-groups-menu').find('.active').attr('id');
	281	+ let tag_siteids = jQuery('#mainwp-save-sites-groups-selection-button').attr('selected-tag-siteids');
	282	+
	283	+ if (groupID == undefined) {
	284	+ return;
	285	+ }
	286	+ let data = mainwp_secure_data({
	287	+ action: 'mainwp_group_updategroup',
	288	+ groupId: groupID,
	289	+ websiteIds: tag_siteids == '' ? [] : JSON.parse(tag_siteids),
	290	+ });
	291	+
	292	+ jQuery(this).addClass('disabled');
	293	+
	294	+ jQuery.post(ajaxurl, data, function (response) {
	295	+ jQuery('#mainwp-save-sites-groups-selection-button').removeClass('disabled');
	296	+ if (response?.result === true) {
	297	+ feedback('mainwp-message-zone', 'Selection saved successfully.', 'ui green message');
	298	+ setTimeout(() => {
	299	+ jQuery('#mainwp-message-zone').fadeOut();
	300	+ }, 5000);
	301	+ } else {
	302	+ feedback('mainwp-message-zone', 'Undefined error occurred. Please try again.', 'ui green message');
	303	+ }
	304	+ }, 'json');
	305	+ });
	306	+
	307	+ // Load group sites
	308	+ let show_group_items = function (group) {
	309	+ let groupID = jQuery(group).attr('id');
	310	+ let data = mainwp_secure_data({
	311	+ action: 'mainwp_group_getsites',
	312	+ groupId: groupID
	313	+ });
	314	+ jQuery('.dimmer').addClass('active');
	315	+ let dtApi = jQuery('#mainwp-manage-groups-sites-table').dataTable().api();
	316	+ let searchValue = dtApi.search();
	317	+ dtApi.search('').draw();
	318	+ jQuery.post(ajaxurl, data, function (response) {
	319	+ jQuery('.dimmer').removeClass('active');
	320	+ response = response.trim();
	321	+ if (response == 'ERROR') {
	322	+ dtApi.search(searchValue).draw();
	323	+ return;
	324	+ }
	325	+ mainwp_datatable_fix_to_update_selected_rows_status(dtApi, 'deselected'); // clear saved state.
	326	+ jQuery('input.mainwp-site-checkbox').prop('checked', false);
	327	+ jQuery('input.mainwp-site-checkbox').closest('tr').removeClass('selected active');
	328	+ let sites = JSON.parse(response);
	329	+ for (let id of sites) {
	330	+ jQuery('input[value="' + id + '"].mainwp-site-checkbox').prop('checked', true);
	331	+ jQuery('input[value="' + id + '"].mainwp-site-checkbox').closest('tr').addClass('selected active');
	332	+ }
	333	+ jQuery('#mainwp-save-sites-groups-selection-button').attr('selected-tag-siteids', sites?.length ? response : '');
	334	+ mainwp_datatable_fix_to_update_selected_rows_status(dtApi, 'selected active'); // clear saved state.
	335	+ dtApi.search(searchValue).draw();
	336	+ });
	337	+
	338	+ return false;
	339	+ }
	340	+
	341	+ // Apply fade effect to tags in the sites table
	342	+ let apply_tag_fade_effect = function (menuItem) {
	343	+ // Get the selected tag ID from the menu item
	344	+ let selectedTagId = jQuery(menuItem).attr('id');
	345	+
	346	+ if (!selectedTagId) {
	347	+ // If no tag is selected, reset all tags to full opacity
	348	+ jQuery('#mainwp-manage-groups-sites-table span.ui.tag.label').css('opacity', '1');
	349	+ return;
	350	+ }
	351	+
	352	+ // Fade all tags to 10% opacity
	353	+ jQuery('#mainwp-manage-groups-sites-table span.ui.tag.label').css('opacity', '0.1');
	354	+
	355	+ // Restore full opacity for the selected tag
	356	+ jQuery('#mainwp-manage-groups-sites-table span.ui.tag.label[tag_id="' + selectedTagId + '"]').css('opacity', '1');
	357	+ }
202	358
203	359	});