WenPai-org/wptag
3
0
Fork 0
mirror of https://github.com/WenPai-org/wptag.git synced 2025-08-03 12:23:41 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Enhance admin UI and UX for WPTag plugin

Browse source 
Improves the admin interface with refined CSS for better layout, accessibility, and responsiveness. Adds robust JS logic for disabling tracking scripts, change tracking, validation, preview, import/export, reset, tooltips, and modal handling. These changes provide a more user-friendly experience, prevent accidental data loss, and ensure tracking scripts do not run in the admin area.
This commit is contained in:
feibisi 2025-07-26 05:47:24 +08:00
parent 3c4c1f8e2e
commit 30e040134d
10 changed files with 3290 additions and 685 deletions
Download patch file Download diff file Expand all files Collapse all files

484
assets/admin.js
View file

@ -1,11 +1,41 @@
jQuery(document).ready(function($) {
if (typeof window.gtag !== 'undefined') {
delete window.gtag;
}
if (typeof window.fbq !== 'undefined') {
delete window.fbq;
}
if (typeof window.dataLayer !== 'undefined') {
delete window.dataLayer;
}
window.gtag = function() {
console.log('WPTag: gtag() calls are disabled in admin area');
};
window.fbq = function() {
console.log('WPTag: fbq() calls are disabled in admin area');
};
WPTagAdmin.init();
$(window).on('load', function() {
setTimeout(function() {
WPTagAdmin.initializing = false;
WPTagAdmin.changeTrackingEnabled = true;
}, 500);
});
});
var WPTagAdmin = {
formChanged: false,
changeTrackingEnabled: false,
initializing: true,
init: function() {
var $ = jQuery;
var self = this;
this.handleServiceToggle();
this.handleCodeTypeToggle();
this.handleValidation();
@ -18,39 +48,72 @@ var WPTagAdmin = {
this.handleTabSwitching();
this.handleAdvancedToggle();
this.handleCodeEditor();
this.initTooltips();
setTimeout(function() {
self.initializing = false;
self.handleFormChangeTracking();
}, 1000);
},
handleServiceToggle: function() {
var $ = jQuery;
var self = this;
$('.wptag-service-card input[name*="[enabled]"]').on('change', function() {
var $card = $(this).closest('.wptag-service-card');
var isEnabled = $(this).is(':checked');
self.changeTrackingEnabled = false;
if (isEnabled) {
$card.removeClass('disabled');
$card.removeClass('disabled').addClass('enabled');
$card.find('.wptag-service-content input, .wptag-service-content select, .wptag-service-content textarea, .wptag-service-content button').prop('disabled', false);
} else {
$card.addClass('disabled');
$card.removeClass('enabled').addClass('disabled');
$card.find('.wptag-service-content input, .wptag-service-content select, .wptag-service-content textarea, .wptag-service-content button').prop('disabled', true);
$card.find('.wptag-validation-result').hide();
}
setTimeout(function() {
self.changeTrackingEnabled = true;
if (!self.initializing) {
self.formChanged = true;
}
}, 100);
});
$('.wptag-service-card input[name*="[enabled]"]').trigger('change');
$('.wptag-service-card input[name*="[enabled]"]').each(function() {
$(this).trigger('change');
});
},
handleCodeTypeToggle: function() {
var $ = jQuery;
var self = this;
$('input[name*="[use_template]"]').on('change', function() {
var $card = $(this).closest('.wptag-service-card');
var useTemplate = $(this).val() === '1' && $(this).is(':checked');
self.changeTrackingEnabled = false;
if (useTemplate) {
$card.find('.wptag-template-fields').show();
$card.find('.wptag-custom-fields').hide();
$card.find('.wptag-template-fields').slideDown(300);
$card.find('.wptag-custom-fields').slideUp(300);
} else {
$card.find('.wptag-template-fields').hide();
$card.find('.wptag-custom-fields').show();
$card.find('.wptag-template-fields').slideUp(300);
$card.find('.wptag-custom-fields').slideDown(300);
}
$card.find('.wptag-validation-result').hide();
setTimeout(function() {
self.changeTrackingEnabled = true;
if (!self.initializing) {
self.formChanged = true;
}
}, 100);
});
$('input[name*="[use_template]"]:checked').trigger('change');
@ -58,18 +121,31 @@ var WPTagAdmin = {
handleValidation: function() {
var $ = jQuery;
$('.wptag-validate-btn').on('click', function() {
$('.wptag-validate-btn').on('click', function(e) {
e.preventDefault();
var $btn = $(this);
var $card = $btn.closest('.wptag-service-card');
var service = $card.data('service');
var $result = $card.find('.wptag-validation-result');
var useTemplate = $card.find('input[name*="[use_template]"]:checked').val() === '1';
var idValue = $card.find('input[type="text"]').first().val();
var customCode = $card.find('textarea').val();
var idValue = $card.find('input[type="text"]').first().val().trim();
var customCode = $card.find('textarea').val().trim();
$btn.prop('disabled', true).text(wptagAdmin.strings.validating);
$result.removeClass('valid invalid').addClass('loading').text(wptagAdmin.strings.validating);
if (useTemplate && !idValue) {
WPTagAdmin.showValidationResult($result, 'invalid', 'Please enter an ID value first');
return;
}
if (!useTemplate && !customCode) {
WPTagAdmin.showValidationResult($result, 'invalid', 'Please enter custom code first');
return;
}
$btn.addClass('wptag-button-loading').prop('disabled', true);
WPTagAdmin.showValidationResult($result, 'loading', wptagAdmin.strings.validating);
$.ajax({
url: wptagAdmin.ajax_url,
@ -84,42 +160,54 @@ var WPTagAdmin = {
},
success: function(response) {
if (response.success) {
$result.removeClass('loading invalid').addClass('valid')
.text('✓ ' + response.data.message);
WPTagAdmin.showValidationResult($result, 'valid', '✓ ' + response.data.message);
} else {
$result.removeClass('loading valid').addClass('invalid')
.text('✗ ' + response.data.message);
WPTagAdmin.showValidationResult($result, 'invalid', '✗ ' + response.data.message);
}
},
error: function() {
$result.removeClass('loading valid').addClass('invalid')
.text('✗ Validation failed');
error: function(xhr, status, error) {
console.error('Validation error:', error);
WPTagAdmin.showValidationResult($result, 'invalid', '✗ Validation failed. Please try again.');
},
complete: function() {
$btn.prop('disabled', false).text('Validate');
$btn.removeClass('wptag-button-loading').prop('disabled', false);
}
});
});
$('input[type="text"], textarea').on('input', function() {
$(this).closest('.wptag-service-card').find('.wptag-validation-result').text('');
$(this).closest('.wptag-service-card').find('.wptag-validation-result').hide();
if (WPTagAdmin.changeTrackingEnabled && !WPTagAdmin.initializing) {
WPTagAdmin.formChanged = true;
}
});
},
showValidationResult: function($result, type, message) {
$result.removeClass('valid invalid loading')
.addClass(type)
.text(message)
.show();
},
handlePreview: function() {
var $ = jQuery;
$('.wptag-preview-btn').on('click', function() {
$('.wptag-preview-btn').on('click', function(e) {
e.preventDefault();
var $btn = $(this);
var $card = $btn.closest('.wptag-service-card');
var service = $card.data('service');
var idValue = $card.find('input[type="text"]').first().val();
var idValue = $card.find('input[type="text"]').first().val().trim();
if (!idValue.trim()) {
if (!idValue) {
alert('Please enter an ID value to preview');
$card.find('input[type="text"]').first().focus();
return;
}
$btn.prop('disabled', true).text(wptagAdmin.strings.loading);
$btn.addClass('wptag-button-loading').prop('disabled', true);
$.ajax({
url: wptagAdmin.ajax_url,
@ -132,17 +220,20 @@ var WPTagAdmin = {
},
success: function(response) {
if (response.success) {
$('#wptag-preview-code').text(response.data.preview);
$('#wptag-preview-modal').show();
var previewCode = response.data.preview;
$('#wptag-preview-code').text(previewCode);
$('#wptag-preview-modal').fadeIn(300);
$('body').addClass('modal-open');
} else {
alert('Error: ' + response.data.message);
WPTagAdmin.showNotice('error', 'Preview Error: ' + response.data.message);
}
},
error: function() {
alert('Failed to generate preview');
error: function(xhr, status, error) {
console.error('Preview error:', error);
WPTagAdmin.showNotice('error', 'Failed to generate preview. Please try again.');
},
complete: function() {
$btn.prop('disabled', false).text(wptagAdmin.strings.preview);
$btn.removeClass('wptag-button-loading').prop('disabled', false);
}
});
});
@ -150,10 +241,12 @@ var WPTagAdmin = {
handleExportImport: function() {
var $ = jQuery;
$('#wptag-export-btn').on('click', function() {
$('#wptag-export-btn').on('click', function(e) {
e.preventDefault();
var $btn = $(this);
var originalText = $btn.text();
$btn.prop('disabled', true).text(wptagAdmin.strings.loading);
$btn.addClass('wptag-button-loading').prop('disabled', true);
$.ajax({
url: wptagAdmin.ajax_url,
@ -167,19 +260,21 @@ var WPTagAdmin = {
WPTagAdmin.downloadFile(response.data.data, response.data.filename);
WPTagAdmin.showNotice('success', wptagAdmin.strings.export_success);
} else {
alert('Export failed: ' + response.data.message);
WPTagAdmin.showNotice('error', 'Export failed: ' + response.data.message);
}
},
error: function() {
alert('Export failed');
error: function(xhr, status, error) {
console.error('Export error:', error);
WPTagAdmin.showNotice('error', 'Export failed. Please try again.');
},
complete: function() {
$btn.prop('disabled', false).text(originalText);
$btn.removeClass('wptag-button-loading').prop('disabled', false);
}
});
});
$('#wptag-import-btn').on('click', function() {
$('#wptag-import-btn').on('click', function(e) {
e.preventDefault();
$('#wptag-import-file').click();
});
@ -187,7 +282,14 @@ var WPTagAdmin = {
var file = this.files[0];
if (!file) return;
if (!file.name.endsWith('.json')) {
WPTagAdmin.showNotice('error', 'Please select a valid JSON file.');
this.value = '';
return;
}
if (!confirm(wptagAdmin.strings.confirm_import)) {
this.value = '';
return;
}
@ -206,34 +308,43 @@ var WPTagAdmin = {
success: function(response) {
if (response.success) {
WPTagAdmin.showNotice('success', wptagAdmin.strings.import_success);
WPTagAdmin.formChanged = false;
WPTagAdmin.initializing = true;
setTimeout(function() {
location.reload();
}, 1000);
}, 1500);
} else {
alert('Import failed: ' + response.data.message);
WPTagAdmin.showNotice('error', 'Import failed: ' + response.data.message);
}
},
error: function() {
alert('Import failed');
error: function(xhr, status, error) {
console.error('Import error:', error);
WPTagAdmin.showNotice('error', 'Import failed. Please try again.');
}
});
};
reader.readAsText(file);
reader.onerror = function() {
WPTagAdmin.showNotice('error', 'Failed to read the file.');
};
reader.readAsText(file);
this.value = '';
});
},
handleReset: function() {
var $ = jQuery;
$('#wptag-reset-btn').on('click', function() {
$('#wptag-reset-btn').on('click', function(e) {
e.preventDefault();
if (!confirm(wptagAdmin.strings.confirm_reset)) {
return;
}
var $btn = $(this);
var originalText = $btn.text();
$btn.prop('disabled', true).text(wptagAdmin.strings.loading);
$btn.addClass('wptag-button-loading').prop('disabled', true);
$.ajax({
url: wptagAdmin.ajax_url,
@ -245,18 +356,21 @@ var WPTagAdmin = {
success: function(response) {
if (response.success) {
WPTagAdmin.showNotice('success', wptagAdmin.strings.reset_success);
WPTagAdmin.formChanged = false;
WPTagAdmin.initializing = true;
setTimeout(function() {
location.reload();
}, 1000);
}, 1500);
} else {
alert('Reset failed: ' + response.data.message);
WPTagAdmin.showNotice('error', 'Reset failed: ' + response.data.message);
}
},
error: function() {
alert('Reset failed');
error: function(xhr, status, error) {
console.error('Reset error:', error);
WPTagAdmin.showNotice('error', 'Reset failed. Please try again.');
},
complete: function() {
$btn.prop('disabled', false).text(originalText);
$btn.removeClass('wptag-button-loading').prop('disabled', false);
}
});
});
@ -264,14 +378,26 @@ var WPTagAdmin = {
handleServicesManagement: function() {
var $ = jQuery;
$('#wptag-enable-all').on('click', function() {
$('input[name="enabled_services[]"]').prop('checked', true);
$('.wptag-service-item').removeClass('disabled');
var self = this;
$('#wptag-enable-all').on('click', function(e) {
e.preventDefault();
self.changeTrackingEnabled = false;
$('input[name="enabled_services[]"]').prop('checked', true).trigger('change');
setTimeout(function() {
self.changeTrackingEnabled = true;
self.formChanged = true;
}, 100);
});
$('#wptag-disable-all').on('click', function() {
$('input[name="enabled_services[]"]').prop('checked', false);
$('.wptag-service-item').addClass('disabled');
$('#wptag-disable-all').on('click', function(e) {
e.preventDefault();
self.changeTrackingEnabled = false;
$('input[name="enabled_services[]"]').prop('checked', false).trigger('change');
setTimeout(function() {
self.changeTrackingEnabled = true;
self.formChanged = true;
}, 100);
});
$('.wptag-service-item input[type="checkbox"]').on('change', function() {
@ -279,9 +405,13 @@ var WPTagAdmin = {
var isChecked = $(this).is(':checked');
if (isChecked) {
$item.removeClass('disabled');
$item.removeClass('disabled').addClass('enabled');
} else {
$item.addClass('disabled');
$item.removeClass('enabled').addClass('disabled');
}
if (self.changeTrackingEnabled && !self.initializing) {
self.formChanged = true;
}
});
@ -290,9 +420,10 @@ var WPTagAdmin = {
handleModal: function() {
var $ = jQuery;
$('.wptag-modal-close, #wptag-preview-modal').on('click', function(e) {
$('.wptag-modal-close, .wptag-modal-backdrop').on('click', function(e) {
if (e.target === this) {
$('#wptag-preview-modal').hide();
WPTagAdmin.closeModal();
}
});
@ -302,39 +433,43 @@ var WPTagAdmin = {
$(document).on('keydown', function(e) {
if (e.keyCode === 27 && $('#wptag-preview-modal').is(':visible')) {
$('#wptag-preview-modal').hide();
WPTagAdmin.closeModal();
}
});
},
closeModal: function() {
var $ = jQuery;
$('#wptag-preview-modal').fadeOut(300, function() {
$('body').removeClass('modal-open');
});
},
handleFormSubmission: function() {
var $ = jQuery;
var self = this;
$('.wptag-settings-form').on('submit', function(e) {
var hasErrors = false;
var $form = $(this);
$('.wptag-service-card').each(function() {
$('.wptag-service-card.enabled').each(function() {
var $card = $(this);
var isEnabled = $card.find('input[name*="[enabled]"]').is(':checked');
if (!isEnabled) {
return;
}
var useTemplate = $card.find('input[name*="[use_template]"]:checked').val() === '1';
if (useTemplate) {
var idInput = $card.find('input[type="text"]').first();
if (idInput.val().trim() === '') {
alert('Please enter an ID for enabled services or disable them.');
idInput.focus();
var $idInput = $card.find('input[type="text"]').first();
if ($idInput.val().trim() === '') {
WPTagAdmin.showNotice('error', 'Please enter an ID for all enabled services or disable them.');
$idInput.focus();
hasErrors = true;
return false;
}
} else {
var customCodeTextarea = $card.find('textarea');
if (customCodeTextarea.val().trim() === '') {
alert('Please enter custom code for enabled services or disable them.');
customCodeTextarea.focus();
var $customCodeTextarea = $card.find('textarea');
if ($customCodeTextarea.val().trim() === '') {
WPTagAdmin.showNotice('error', 'Please enter custom code for all enabled services or disable them.');
$customCodeTextarea.focus();
hasErrors = true;
return false;
}
@ -346,51 +481,69 @@ var WPTagAdmin = {
return false;
}
$(this).find('input[type="submit"]').prop('disabled', true).val('Saving...');
var $saveBtn = $form.find('#wptag-save-btn');
$saveBtn.addClass('wptag-button-loading').prop('disabled', true).val('Saving...');
self.formChanged = false;
});
$('#wptag-services-form').on('submit', function() {
var $saveBtn = $(this).find('input[type="submit"]');
$saveBtn.addClass('wptag-button-loading').prop('disabled', true).val('Saving...');
WPTagAdmin.formChanged = false;
});
},
handleTabSwitching: function() {
var $ = jQuery;
var self = this;
$('.nav-tab').on('click', function(e) {
var href = $(this).attr('href');
if (href && href.indexOf('tab=') !== -1) {
var tab = href.split('tab=')[1];
var currentUrl = window.location.href.split('?')[0];
var newUrl = currentUrl + '?page=wptag-settings&tab=' + tab;
window.location.href = newUrl;
if (self.formChanged && !self.initializing) {
var confirmed = confirm('You have unsaved changes. Do you want to continue without saving?');
if (!confirmed) {
e.preventDefault();
return false;
} else {
self.formChanged = false;
}
}
});
},
handleAdvancedToggle: function() {
var $ = jQuery;
$('.wptag-toggle-advanced').on('click', function(e) {
e.preventDefault();
var $btn = $(this);
var $card = $btn.closest('.wptag-service-card');
var $advanced = $card.find('.wptag-advanced-settings');
var $icon = $btn.find('.dashicons');
if ($advanced.is(':visible')) {
$advanced.slideUp();
$advanced.slideUp(300);
$icon.removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');
$btn.html('<span class="dashicons dashicons-arrow-down-alt2"></span>Advanced Settings');
$btn.html('<span class="dashicons dashicons-arrow-down-alt2"></span>' + wptagAdmin.strings.advanced_settings);
} else {
$advanced.slideDown();
$advanced.slideDown(300);
$icon.removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');
$btn.html('<span class="dashicons dashicons-arrow-up-alt2"></span>Hide Advanced Settings');
$btn.html('<span class="dashicons dashicons-arrow-up-alt2"></span>' + wptagAdmin.strings.hide_advanced);
}
});
},
handleCodeEditor: function() {
var $ = jQuery;
$('.wptag-code-editor').each(function() {
var $editor = $(this);
$editor.on('input', function() {
WPTagAdmin.updateEditorHeight(this);
if (WPTagAdmin.changeTrackingEnabled && !WPTagAdmin.initializing) {
WPTagAdmin.formChanged = true;
}
});
$editor.on('keydown', function(e) {
@ -407,7 +560,9 @@ var WPTagAdmin = {
WPTagAdmin.updateEditorHeight(this);
});
$('.wptag-format-code').on('click', function() {
$('.wptag-format-code').on('click', function(e) {
e.preventDefault();
var $btn = $(this);
var $editor = $btn.closest('.wptag-code-editor-wrapper').find('.wptag-code-editor');
var code = $editor.val();
@ -417,25 +572,88 @@ var WPTagAdmin = {
var formatted = WPTagAdmin.formatCode(code);
$editor.val(formatted);
WPTagAdmin.updateEditorHeight($editor[0]);
if (WPTagAdmin.changeTrackingEnabled && !WPTagAdmin.initializing) {
WPTagAdmin.formChanged = true;
}
WPTagAdmin.showNotice('success', 'Code formatted successfully.');
} catch (e) {
console.log('Code formatting failed:', e);
WPTagAdmin.showNotice('error', 'Code formatting failed. Please check your code syntax.');
}
}
});
$('.wptag-clear-code').on('click', function() {
$('.wptag-clear-code').on('click', function(e) {
e.preventDefault();
if (confirm('Are you sure you want to clear the code?')) {
var $btn = $(this);
var $editor = $btn.closest('.wptag-code-editor-wrapper').find('.wptag-code-editor');
$editor.val('');
$editor.val('').focus();
WPTagAdmin.updateEditorHeight($editor[0]);
if (WPTagAdmin.changeTrackingEnabled && !WPTagAdmin.initializing) {
WPTagAdmin.formChanged = true;
}
}
});
},
handleFormChangeTracking: function() {
var $ = jQuery;
var self = this;
self.changeTrackingEnabled = true;
$(document).on('input keyup', 'input[type="text"], textarea', function() {
if ($(this).closest('.wptag-admin').length > 0 && self.changeTrackingEnabled && !self.initializing) {
self.formChanged = true;
}
});
$(document).on('change', 'select, input[type="radio"], input[type="checkbox"]:not([name*="enabled_services"]):not([name*="[enabled]"]):not([name*="[use_template]"])', function() {
if ($(this).closest('.wptag-admin').length > 0 && self.changeTrackingEnabled && !self.initializing) {
self.formChanged = true;
}
});
window.addEventListener('beforeunload', function(e) {
if (self.formChanged && !self.initializing) {
e.preventDefault();
e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
return e.returnValue;
}
});
},
initTooltips: function() {
var $ = jQuery;
$('[title]').each(function() {
var $el = $(this);
var title = $el.attr('title');
$el.removeAttr('title').on('mouseenter', function() {
$('<div class="wptag-tooltip">' + title + '</div>')
.appendTo('body')
.fadeIn(200);
}).on('mouseleave', function() {
$('.wptag-tooltip').remove();
}).on('mousemove', function(e) {
$('.wptag-tooltip').css({
top: e.pageY + 10,
left: e.pageX + 10
});
});
});
},
updateEditorHeight: function(editor) {
var $ = jQuery;
var $editor = $(editor);
editor.style.height = 'auto';
editor.style.height = Math.max(editor.scrollHeight, 120) + 'px';
var newHeight = Math.max(editor.scrollHeight, 120);
editor.style.height = newHeight + 'px';
},
formatCode: function(code) {
@ -444,11 +662,30 @@ var WPTagAdmin = {
.replace(/></g, '>\n<')
.replace(/^\s+|\s+$/g, '')
.split('\n')
.map(function(line) {
return line.trim();
.map(function(line, index, array) {
line = line.trim();
if (line.length === 0) return '';
var indent = 0;
for (var i = 0; i < index; i++) {
var prevLine = array[i].trim();
if (prevLine.match(/<[^\/][^>]*[^\/]>$/)) {
indent += 2;
}
if (prevLine.match(/<\/[^>]+>$/)) {
indent -= 2;
}
}
if (line.match(/^<\/[^>]+>$/)) {
indent -= 2;
}
indent = Math.max(0, indent);
return ' '.repeat(indent) + line;
})
.filter(function(line) {
return line.length > 0;
return line.trim().length > 0;
})
.join('\n');
} catch (e) {
@ -458,33 +695,54 @@ var WPTagAdmin = {
},
downloadFile: function(data, filename) {
var blob = new Blob([data], { type: 'application/json' });
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
try {
var blob = new Blob([data], { type: 'application/json' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, filename);
return;
}
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
setTimeout(function() {
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}, 100);
} catch (e) {
console.error('Download failed:', e);
WPTagAdmin.showNotice('error', 'Download failed. Please try again.');
}
},
showNotice: function(type, message) {
var $ = jQuery;
var $notice = $('<div class="notice notice-' + type + ' is-dismissible"><p>' + message + '</p></div>');
$('.wptag-admin .notice').remove();
var $notice = $('<div class="notice notice-' + type + ' is-dismissible"><p>' + message + '</p><button type="button" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></div>');
$('.wptag-admin h1').after($notice);
$notice.find('.notice-dismiss').on('click', function() {
$notice.fadeOut(300, function() {
$(this).remove();
});
});
setTimeout(function() {
$notice.fadeOut(function() {
$notice.fadeOut(300, function() {
$(this).remove();
});
}, 5000);
$notice.find('.notice-dismiss').on('click', function() {
$notice.fadeOut(function() {
$(this).remove();
});
});
$('html, body').animate({
scrollTop: $('.wptag-admin').offset().top - 50
}, 500);
}
};