diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 19f2d6bbb3..c4b3ac7022 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -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; @@ -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; } @@ -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; @@ -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; diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js index 8a081321b2..4a80e95996 100644 --- a/assets/js/dashboard.js +++ b/assets/js/dashboard.js @@ -1,60 +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 === '1' && 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?', @@ -67,115 +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'); + + feature.classList.add('saving'); + form.submit.disabled = true; - $epCredentialsTab.removeClass('nav-tab-active'); - $target.addClass('nav-tab-active'); + const request = await fetch(ajaxurl, { method: 'POST', body: data }); + const response = await request.json(); - if (epio) { - $epCredentialsHostLabel.text('ElasticPress.io Host URL'); - $epCredentialsHostLegend.text('Plug in your ElasticPress.io server here!'); - $epCredentialsAdditionalFields.show(); - $epCredentialsAdditionalFields.attr('aria-hidden', 'false'); + 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'); - if (!container) return; + /** + * 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 === '1' && 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); diff --git a/assets/js/instant-results/admin/index.js b/assets/js/instant-results/admin/index.js index 08340f7414..781fb57dcb 100644 --- a/assets/js/instant-results/admin/index.js +++ b/assets/js/instant-results/admin/index.js @@ -15,6 +15,7 @@ document.addEventListener('DOMContentLoaded', () => { className, dataset: { fieldName }, id, + name, value, } = input; @@ -24,6 +25,7 @@ document.addEventListener('DOMContentLoaded', () => { data-field-name={fieldName} defaultValue={value} id={id} + name={name} />, input.parentElement, ); diff --git a/assets/js/settings.js b/assets/js/settings.js new file mode 100644 index 0000000000..5fd35919fe --- /dev/null +++ b/assets/js/settings.js @@ -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'); + } +}); diff --git a/includes/classes/Feature.php b/includes/classes/Feature.php index cf97cae81b..e0ed2cf8ac 100644 --- a/includes/classes/Feature.php +++ b/includes/classes/Feature.php @@ -211,12 +211,12 @@ public function output_feature_box() { do_action( 'ep_feature_box_summary', $this->slug, $this ); ?> - +
output_feature_box_long(); ?> -

+

requirements_status(); ?> - message ) ) : - $messages = (array) $requirements_status->message; - ?> - -
- +
+ message ) ) : + $messages = (array) $requirements_status->message; + ?> + +
+ +
+ + + + requires_install_reindex ) : ?> +
+
- - + - requires_install_reindex ) : ?> -
- -
- - -

+

-
-
-
-
-
- +
+
+
+
+
+ +
+ + output_feature_box_settings(); + ?>
- output_feature_box_settings(); - ?> -
+
+ + + -
- - - + + + + + - +
+ +
+ + default_settings = [ 'endpoint_url' => '', 'autosuggest_selector' => '', - 'trigger_ga_event' => false, + 'trigger_ga_event' => '0', ]; parent::__construct(); @@ -114,19 +114,19 @@ public function output_feature_box_settings() { $settings = wp_parse_args( $settings, $this->default_settings ); ?> -
+
- +

-
+
-
- +
+

@@ -140,27 +140,20 @@ public function output_feature_box_settings() { $endpoint_url = ( defined( 'EP_AUTOSUGGEST_ENDPOINT' ) && EP_AUTOSUGGEST_ENDPOINT ) ? EP_AUTOSUGGEST_ENDPOINT : $settings['endpoint_url']; ?> -
+
- - disabled value="" type="text" data-field-name="endpoint_url" class="setting-field" id="feature_autosuggest_endpoint_url"> - + value="" type="text" name="settings[endpoint_url]" id="feature_autosuggest_endpoint_url"> + +

- -

+ +

- default_settings ); ?> -
+
-
- +
+

diff --git a/includes/classes/Feature/InstantResults/InstantResults.php b/includes/classes/Feature/InstantResults/InstantResults.php index 6b6cd218bc..a03c0fe587 100644 --- a/includes/classes/Feature/InstantResults/InstantResults.php +++ b/includes/classes/Feature/InstantResults/InstantResults.php @@ -137,10 +137,10 @@ public function output_feature_box_settings() { $highlight_tags = array( 'mark', 'span', 'strong', 'em', 'i' ); ?> -
+
-

-
-
+
+
- +
-
+
-