Use data-id attribute to select loading message, instead of CSS class since that creates a brittle coupling between JS and CSS.

- Formalize this rule in the CSS style guide.
This commit is contained in:
CJ Cenizal 2016-11-29 10:28:48 -07:00
parent 8a528dcd97
commit d5747639cc

View file

@ -110,23 +110,28 @@ block content
opacity: 0.8;
}
.kibanaWelcomeView
.kibanaWelcomeView(
data-id="kibanaWelcomeView"
)
.kibanaLoader
.kibanaLoader__logo
.kibanaWelcomeLogo
.kibanaLoader__content
| Loading Kibana
.kibanaLoadingMessage.
Give me a moment here. I’m loading a whole bunch of code. Don’t worry, all this
good stuff will be cached up for next time!
.kibanaLoadingMessage(
data-id="kibanaLoadingMessage"
)
| Give me a moment here. I’m loading a whole bunch of code. Don’t worry, all this
| good stuff will be cached up for next time!
script.
window.onload = function () {
var hideLoadingMessage = /#.*[?&]embed(&|$|=true)/.test(window.location.href);
if (hideLoadingMessage) {
var loading = document.querySelector('.kibanaWelcomeView');
loading.removeChild(loading.lastChild);
var loadingContainer = document.querySelector('[data-id="kibanaWelcomeView"]');
var loadingMessage = document.querySelector('[data-id="kibanaLoadingMessage"]');
loadingContainer.removeChild(loadingMessage);
}
var buildNum = #{kibanaPayload.buildNum};