| 1 |
/** |
| 2 |
* WordPress dependencies. |
| 3 |
*/ |
| 4 |
import domReady from '@wordpress/dom-ready'; |
| 5 |
import { __ } from '@wordpress/i18n'; |
| 6 |
|
| 7 |
/** |
| 8 |
* Initialize. |
| 9 |
* |
| 10 |
* @returns {void} |
| 11 |
*/ |
| 12 |
const init = () => { |
| 13 |
const tabs = document.querySelectorAll('.ep-credentials-tab'); |
| 14 |
const host = document.getElementById('ep_host'); |
| 15 |
const hostLabel = host.labels[0]; |
| 16 |
const hostDescription = host.nextElementSibling; |
| 17 |
const additionalFields = document.getElementsByClassName('ep-additional-fields'); |
| 18 |
|
| 19 |
let activeTab = document.querySelector('.nav-tab-active'); |
| 20 |
|
| 21 |
/** |
| 22 |
* Is the current tab the ElasticPress.io tab? |
| 23 |
* |
| 24 |
* @returns {boolean} Whether the current tab is for ElasticPress.io. |
| 25 |
*/ |
| 26 |
const isEpio = () => { |
| 27 |
return 'epio' in activeTab.dataset; |
| 28 |
}; |
| 29 |
|
| 30 |
let epioHost = isEpio() ? host.value : ''; |
| 31 |
let esHost = isEpio() ? '' : host.value; |
| 32 |
|
| 33 |
/** |
| 34 |
* Handle input on the host field. |
| 35 |
* |
| 36 |
* @param {Event} event Input event. |
| 37 |
* @returns {void} |
| 38 |
*/ |
| 39 |
const onInput = (event) => { |
| 40 |
if (isEpio()) { |
| 41 |
epioHost = event.currentTarget.value; |
| 42 |
} else { |
| 43 |
esHost = event.currentTarget.value; |
| 44 |
} |
| 45 |
}; |
| 46 |
|
| 47 |
/** |
| 48 |
* Handle clicking on a tab. |
| 49 |
* |
| 50 |
* @param {Event} event Click event. |
| 51 |
* @returns {void} |
| 52 |
*/ |
| 53 |
const onClick = (event) => { |
| 54 |
activeTab = event.currentTarget; |
| 55 |
|
| 56 |
/** |
| 57 |
* Set active tab. |
| 58 |
*/ |
| 59 |
for (const tab of tabs) { |
| 60 |
tab.classList.toggle('nav-tab-active', tab === activeTab); |
| 61 |
} |
| 62 |
|
| 63 |
/** |
| 64 |
* Hide or show additional fields. |
| 65 |
*/ |
| 66 |
for (const additionalField of additionalFields) { |
| 67 |
additionalField.classList.toggle('hidden', !isEpio()); |
| 68 |
} |
| 69 |
|
| 70 |
/** |
| 71 |
* Update field label. |
| 72 |
*/ |
| 73 |
hostLabel.innerText = isEpio() |
| 74 |
? __('ElasticPress.io Host URL', 'elasticpress') |
| 75 |
: __('Elasticsearch Host URL', 'elasticpress'); |
| 76 |
|
| 77 |
/** |
| 78 |
* If the host field is disabled, we're done. |
| 79 |
*/ |
| 80 |
if (host.disabled) { |
| 81 |
return; |
| 82 |
} |
| 83 |
|
| 84 |
/** |
| 85 |
* Restore field value for the current tab. |
| 86 |
*/ |
| 87 |
host.value = isEpio() ? epioHost : esHost; |
| 88 |
|
| 89 |
/** |
| 90 |
* Update host field description. |
| 91 |
*/ |
| 92 |
hostDescription.innerText = isEpio() |
| 93 |
? __('Plug in your ElasticPress.io server here!', 'elasticpress') |
| 94 |
: __('Plug in your Elasticsearch server here!', 'elasticpress'); |
| 95 |
}; |
| 96 |
|
| 97 |
/** |
| 98 |
* Bind input event to host field. |
| 99 |
*/ |
| 100 |
if (host) { |
| 101 |
host.addEventListener('input', onInput); |
| 102 |
} |
| 103 |
|
| 104 |
/** |
| 105 |
* Bind click events to tabs. |
| 106 |
*/ |
| 107 |
for (const tab of tabs) { |
| 108 |
tab.addEventListener('click', onClick); |
| 109 |
} |
| 110 |
}; |
| 111 |
|
| 112 |
/** |
| 113 |
* Initialize. |
| 114 |
*/ |
| 115 |
domReady(init); |
| 116 |
|
