Skip to content

Commit

Permalink
Refactor dashboard script. Addresses #2496.
Browse files Browse the repository at this point in the history
  • Loading branch information
@JakePT
JakePT committed Dec 8, 2021
1 parent 4f01012 commit 060e823
Show file tree
Hide file tree
Showing 14 changed files with 254 additions and 270 deletions.
10 changes: 5 additions & 5 deletions assets/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,12 +174,15 @@ h2.ep-list-features {

.ep-feature .postbox .hndle .settings-button {
background-color: #efefef;
border: none;
border-radius: 4px;
color: inherit;
cursor: pointer;
display: inline-block;
float: right;
font-size: 13px;
font-weight: 400;
line-height: inherit;
margin-top: -4px;
padding: 4px 7px;
padding-left: 23px;
Expand Down Expand Up @@ -431,11 +434,6 @@ h2.ep-list-features {
display: block;
}

.ep-feature .learn-more,
.ep-feature .collapse {
cursor: pointer;
}

.ep-feature.show-full .learn-more {
display: none;
}
Expand All @@ -444,6 +442,7 @@ h2.ep-list-features {
content: "\f140";
font-family: dashicons;
font-size: 1.5em;
line-height: 1;
position: relative;
top: -0.07em;
vertical-align: middle;
Expand All @@ -453,6 +452,7 @@ h2.ep-list-features {
content: "\f142";
font-family: dashicons;
font-size: 1.5em;
line-height: 1;
position: relative;
top: -0.07em;
vertical-align: middle;
Expand Down
253 changes: 99 additions & 154 deletions assets/js/dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,44 @@
/* eslint-disable camelcase, no-use-before-define */
/**
* WordPress dependencies.
*/
import { __ } from '@wordpress/i18n';
import jQuery from 'jquery';

const { ajaxurl, epDash } = window;

const $features = jQuery(document.getElementsByClassName('ep-features'));
const $epCredentialsTab = jQuery(document.getElementsByClassName('ep-credentials-tab'));
const $epCredentialsHostLabel = jQuery('.ep-host-row label');
const $epCredentialsHostLegend = jQuery(document.getElementsByClassName('ep-host-legend'));
const $epCredentialsAdditionalFields = jQuery(
document.getElementsByClassName('ep-additional-fields'),
);
const epHostField = document.getElementById('ep_host');
const epHost = epHostField ? epHostField.value : null;
let epHostNewValue = '';

$features.on('click', '.learn-more, .collapse', function () {
jQuery(this).parents('.ep-feature').toggleClass('show-full');
});

$features.on('click', '.settings-button', function () {
jQuery(this).parents('.ep-feature').toggleClass('show-settings');
});

$features.on('click', '.save-settings', function (event) {
event.preventDefault();

if (jQuery(this).hasClass('disabled')) {
return;
}

const { feature, requiresReindex, wasActive } = event.target.dataset;
const $feature = $features.find(`.ep-feature-${feature}`);
const settings = {};
const $settings = $feature.find('.setting-field');

$settings.each(function () {
const $this = jQuery(this);
const type = $this.attr('type');
const name = $this.attr('data-field-name');
const value = $this.val();

if (type === 'radio') {
if ($this.is(':checked')) {
settings[name] = value;
}
} else {
settings[name] = value;
}
});
/**
* Window dependencies.
*/
const {
ajaxurl,
epDash: { syncUrl },
} = window;

/**
* Determine whether a Feature's new settings will require a reindex.
*
* @param {FormData} data Form data.
* @return {boolean} Whether a reindex will need to occur when saved.
*/
const willChangeTriggerReindex = (data) => {
return (
data.get('requires_reindex') === '1' &&
data.get('was_active') === '0' &&
data.get('settings[active]') === '1'
);
};

/**
* Handle Feature settings being submitted.
*
* @param {Event} event Submit event.
*/
const onSubmit = async (event) => {
event.preventDefault();

const requiresConfirmation = requiresReindex && wasActive === '0' && settings.active === '1';
const form = event.target;
const data = new FormData(form);
const requiresConfirmation = willChangeTriggerReindex(data);

if (requiresConfirmation) {
// eslint-disable-next-line no-alert
/* eslint-disable no-alert */
const isConfirmed = window.confirm(
__(
'Enabling this feature will begin re-indexing your content. Do you wish to proceed?',
Expand All @@ -66,113 +51,73 @@ $features.on('click', '.save-settings', function (event) {
}
}

$feature.addClass('saving');

jQuery
.ajax({
method: 'post',
url: ajaxurl,
data: {
action: 'ep_save_feature',
feature,
nonce: epDash.nonce,
settings,
},
})
.done((response) => {
setTimeout(() => {
$feature.removeClass('saving');

if (settings.active === '1') {
$feature.addClass('feature-active');
} else {
$feature.removeClass('feature-active');
}

event.target.dataset.wasActive = settings.active;
event.target
.closest('.settings')
.querySelector('.js-toggle-feature').dataset.wasActive = settings.active;

if (response.data.reindex) {
window.location = epDash.sync_url;

/*
syncStatus = 'initialsync';
updateSyncDash();
// On initial sync, remove dashboard warnings that dont make sense
jQuery(
'[data-ep-notice="no-sync"], [data-ep-notice="auto-activate-sync"], [data-ep-notice="upgrade-sync"]',
).remove();
syncStatus = 'sync';
$feature.addClass('feature-syncing');
featureSync = feature;
sync();
*/
}
}, 700);
})
.error(() => {
setTimeout(() => {
$feature.removeClass('saving');
$feature.removeClass('feature-active');
$feature.removeClass('feature-syncing');
}, 700);
});
});

if (epHostField) {
epHostField.addEventListener('input', (e) => {
epHostNewValue = e.target.value;
});
}

$epCredentialsTab.on('click', (e) => {
const epio = e.currentTarget.getAttribute('data-epio') !== null;
const $target = jQuery(e.currentTarget);
const initial = $target.hasClass('initial');

e.preventDefault();

if (initial && !epHostField.disabled) {
epHostField.value = epHost;
} else {
epHostField.value = epHostNewValue;
}
const feature = form.closest('.ep-feature');

$epCredentialsTab.removeClass('nav-tab-active');
$target.addClass('nav-tab-active');
feature.classList.add('saving');
form.submit.disabled = true;

if (epio) {
$epCredentialsHostLabel.text('ElasticPress.io Host URL');
$epCredentialsHostLegend.text('Plug in your ElasticPress.io server here!');
$epCredentialsAdditionalFields.show();
$epCredentialsAdditionalFields.attr('aria-hidden', 'false');
const request = await fetch(ajaxurl, { method: 'POST', body: data });
const response = await request.json();

feature.classList.toggle('feature-active', response.data.active);

if (response.data.reindex) {
window.location = syncUrl;
} else {
$epCredentialsHostLabel.text('Elasticsearch Host URL');
$epCredentialsHostLegend.text('Plug in your Elasticsearch server here!');
$epCredentialsAdditionalFields.hide();
$epCredentialsAdditionalFields.attr('aria-hidden', 'true');
feature.classList.remove('saving');
form.submit.disabled = false;
form.was_active.value = response.data.active ? '1' : '0';
}
};

/**
* Handle a Feature being set to be turned on or off.
*
* @param {Event} event Change event.
*/
const onToggle = (event) => {
const { form } = event.target;
const data = new FormData(form);

const notice = form.querySelector('.requirements-status-notice--reindex');
const requiresConfirmation = willChangeTriggerReindex(data);

if (notice) {
notice.style.display = requiresConfirmation ? 'block' : null;
}
};

/**
* Handle click events within a Feature.
*
* @param {Event} event Click event.
*/
const onClick = (event) => {
const { target } = event;

/**
* Handle toggling settings.
*/
if (target.classList.contains('settings-button')) {
const feature = target.closest('.ep-feature');

feature.classList.toggle('show-settings');
target.setAttribute('aria-expanded', feature.classList.contains('show-settings'));
}
});

$features.on('change', '.js-toggle-feature', function (event) {
const container = event.currentTarget
.closest('.settings')
.querySelector('.requirements-status-notice--reindex');
/**
* Handle toggling description.
*/
if (target.classList.contains('learn-more') || target.classList.contains('collapse')) {
target.closest('.ep-feature').classList.toggle('show-full');
}
};

const { value } = event.target;
const { requiresReindex, wasActive } = event.currentTarget.dataset;
/**
* Bind events.
*/
const featuresEl = document.querySelector('.ep-features');

if (requiresReindex && wasActive === '0' && value === '1') {
container.style.display = 'block';
} else {
container.style.display = null;
}
});
featuresEl.addEventListener('change', onToggle);
featuresEl.addEventListener('submit', onSubmit);
featuresEl.addEventListener('click', onClick);
2 changes: 2 additions & 0 deletions assets/js/instant-results/admin/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
className,
dataset: { fieldName },
id,
name,
value,
} = input;

Expand All @@ -25,6 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
data-field-name={fieldName}
defaultValue={value}
id={id}
name={name}
/>,
input.parentElement,
);
Expand Down
46 changes: 46 additions & 0 deletions assets/js/settings.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import jQuery from 'jquery';

const $epCredentialsTab = jQuery(document.getElementsByClassName('ep-credentials-tab'));
const $epCredentialsHostLabel = jQuery('.ep-host-row label');
const $epCredentialsHostLegend = jQuery(document.getElementsByClassName('ep-host-legend'));
const $epCredentialsAdditionalFields = jQuery(
document.getElementsByClassName('ep-additional-fields'),
);
const epHostField = document.getElementById('ep_host');
const epHost = epHostField ? epHostField.value : null;
let epHostNewValue = '';

if (epHostField) {
epHostField.addEventListener('input', (e) => {
epHostNewValue = e.target.value;
});
}

$epCredentialsTab.on('click', (e) => {
const epio = e.currentTarget.getAttribute('data-epio') !== null;
const $target = jQuery(e.currentTarget);
const initial = $target.hasClass('initial');

e.preventDefault();

if (initial && !epHostField.disabled) {
epHostField.value = epHost;
} else {
epHostField.value = epHostNewValue;
}

$epCredentialsTab.removeClass('nav-tab-active');
$target.addClass('nav-tab-active');

if (epio) {
$epCredentialsHostLabel.text('ElasticPress.io Host URL');
$epCredentialsHostLegend.text('Plug in your ElasticPress.io server here!');
$epCredentialsAdditionalFields.show();
$epCredentialsAdditionalFields.attr('aria-hidden', 'false');
} else {
$epCredentialsHostLabel.text('Elasticsearch Host URL');
$epCredentialsHostLegend.text('Plug in your Elasticsearch server here!');
$epCredentialsAdditionalFields.hide();
$epCredentialsAdditionalFields.attr('aria-hidden', 'true');
}
});
Loading

0 comments on commit 060e823

Please sign in to comment.