Refactor hidden to display: none, because hidden has many edge cases and display: none is way more common for devs
This commit is contained in:
parent
83a06924b3
commit
de012758f9
|
@ -14,16 +14,16 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
|
||||||
const confirmButtons = elem.parentElement.querySelectorAll(".modal-confirm");
|
const confirmButtons = elem.parentElement.querySelectorAll(".modal-confirm");
|
||||||
const steps = elem.parentElement.querySelectorAll(".js-step");
|
const steps = elem.parentElement.querySelectorAll(".js-step");
|
||||||
|
|
||||||
overlay.hidden = false;
|
overlay.style.display = "block";
|
||||||
modal.hidden = false;
|
modal.style.display = "block";
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
overlay.hidden = true;
|
overlay.style.display = "none";
|
||||||
modal.hidden = true;
|
modal.style.display = "none";
|
||||||
steps.forEach((step) => {
|
steps.forEach((step) => {
|
||||||
step.hidden = true;
|
step.style.display = "none";
|
||||||
});
|
});
|
||||||
if (steps[0]) steps[0].hidden = false;
|
if (steps[0]) steps[0].style.display = "block";
|
||||||
if (afterClose) afterClose();
|
if (afterClose) afterClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -34,11 +34,11 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
|
||||||
let currentStep;
|
let currentStep;
|
||||||
steps.forEach((step, index) => {
|
steps.forEach((step, index) => {
|
||||||
if (currentStep == index) {
|
if (currentStep == index) {
|
||||||
step.hidden = false;
|
step.style.display = "block";
|
||||||
} else if (!step.hidden) {
|
} else if (step.style.display == "block") {
|
||||||
currentStep = index;
|
currentStep = index;
|
||||||
currentStep++;
|
currentStep++;
|
||||||
if (currentStep < steps.length) step.hidden = true;
|
if (currentStep < steps.length) step.style.display = "none";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (currentStep == steps.length) {
|
if (currentStep == steps.length) {
|
||||||
|
@ -88,9 +88,9 @@ composeButtons.forEach((composeButton) => {
|
||||||
body += "&recipients=" + encodeURIComponent(recipients);
|
body += "&recipients=" + encodeURIComponent(recipients);
|
||||||
}
|
}
|
||||||
|
|
||||||
publishButton.style.display = "none"; // hidden doesn't work on buttons
|
publishButton.style.display = "none";
|
||||||
sendingMessage.innerHTML = "Loading...";
|
sendingMessage.innerHTML = "Loading...";
|
||||||
sendingMessage.hidden = false;
|
sendingMessage.style.display = "block";
|
||||||
|
|
||||||
fetch(url, {
|
fetch(url, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
@ -108,7 +108,7 @@ composeButtons.forEach((composeButton) => {
|
||||||
modal.close();
|
modal.close();
|
||||||
messageInput.value = "";
|
messageInput.value = "";
|
||||||
publishButton.style.display = "block";
|
publishButton.style.display = "block";
|
||||||
sendingMessage.hidden = true;
|
sendingMessage.style.display = "none";
|
||||||
}, 1000);
|
}, 1000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -116,7 +116,7 @@ composeButtons.forEach((composeButton) => {
|
||||||
sendingMessage.innerHTML = "Error";
|
sendingMessage.innerHTML = "Error";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
publishButton.style.display = "block";
|
publishButton.style.display = "block";
|
||||||
sendingMessage.hidden = true;
|
sendingMessage.style.display = "none";
|
||||||
}, 1000);
|
}, 1000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -22,12 +22,12 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
|
||||||
const closeButton = elem.parentElement.querySelector(".js-modal-close");
|
const closeButton = elem.parentElement.querySelector(".js-modal-close");
|
||||||
const backButtons = elem.parentElement.querySelectorAll(".js-modal-back");
|
const backButtons = elem.parentElement.querySelectorAll(".js-modal-back");
|
||||||
|
|
||||||
overlay.hidden = false;
|
overlay.style.display = "block";
|
||||||
modal.hidden = false;
|
modal.style.display = "block";
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
overlay.hidden = true;
|
overlay.style.display = "none";
|
||||||
modal.hidden = true;
|
modal.style.display = "none";
|
||||||
steps.forEach((step) => {
|
steps.forEach((step) => {
|
||||||
step.style.display = "none";
|
step.style.display = "none";
|
||||||
});
|
});
|
||||||
|
@ -113,9 +113,9 @@ composeButtons.forEach((composeButton) => {
|
||||||
body += "&recipients=" + encodeURIComponent(recipients);
|
body += "&recipients=" + encodeURIComponent(recipients);
|
||||||
}
|
}
|
||||||
|
|
||||||
publishButton.style.display = "none"; // hidden doesn't work on buttons
|
publishButton.style.display = "none";
|
||||||
sendingMessage.innerHTML = "Loading...";
|
sendingMessage.innerHTML = "Loading...";
|
||||||
sendingMessage.hidden = false;
|
sendingMessage.style.display = "block";
|
||||||
|
|
||||||
fetch(url, {
|
fetch(url, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
@ -133,7 +133,7 @@ composeButtons.forEach((composeButton) => {
|
||||||
modal.close();
|
modal.close();
|
||||||
messageInput.value = "";
|
messageInput.value = "";
|
||||||
publishButton.style.display = "block";
|
publishButton.style.display = "block";
|
||||||
sendingMessage.hidden = true;
|
sendingMessage.style.display = "none";
|
||||||
}, 1000);
|
}, 1000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -141,7 +141,7 @@ composeButtons.forEach((composeButton) => {
|
||||||
sendingMessage.innerHTML = "Error";
|
sendingMessage.innerHTML = "Error";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
publishButton.style.display = "block";
|
publishButton.style.display = "block";
|
||||||
sendingMessage.hidden = true;
|
sendingMessage.style.display = "none";
|
||||||
}, 1000);
|
}, 1000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -209,6 +209,9 @@ a.compose-new-button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
.open-menu:hover {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-dash {
|
.menu-dash {
|
||||||
width: 25px;
|
width: 25px;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="yellow-background <%= secretMessages.length > 0 ? "" : "no-secrets" %>">
|
<div class="yellow-background <%= secretMessages.length > 0 ? "" : "no-secrets" %>">
|
||||||
<div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0;">
|
<div class="column-side-padding" style="margin: 25px 0 20px 0; <%= secretMessages.length > 0 ? "display: none" : "" %>">
|
||||||
<div style="font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
<div style="font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||||
<div style="font-size: 50px">🤫</div>
|
<div style="font-size: 50px">🤫</div>
|
||||||
<div style="padding-top: 20px; font-size: 16px">You don't have any secret messages yet</div>
|
<div style="padding-top: 20px; font-size: 16px">You don't have any secret messages yet</div>
|
||||||
|
@ -31,8 +31,8 @@
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<div class="overlay" hidden></div>
|
<div class="overlay" style="display: none"></div>
|
||||||
<div class="modal" hidden>
|
<div class="modal" style="display: none">
|
||||||
<% chat.messages.reverse().map((message, index) => { %>
|
<% chat.messages.reverse().map((message, index) => { %>
|
||||||
<div class="modal-group js-step" <%- index > 0 ? 'style="display: none"' : "" %>>
|
<div class="modal-group js-step" <%- index > 0 ? 'style="display: none"' : "" %>>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
<button class="js-compose-secret-message compose-new-button">
|
<button class="js-compose-secret-message compose-new-button">
|
||||||
<div style="font-size: 30px">✍️</div>
|
<div style="font-size: 30px">✍️</div>
|
||||||
</button>
|
</button>
|
||||||
<div class="overlay" hidden></div>
|
<div class="overlay" style="display: none"></div>
|
||||||
<div class="modal" hidden>
|
<div class="modal" style="display: none">
|
||||||
<div class="modal-group js-step">
|
<div class="modal-group js-step">
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="javascript:;" class="js-modal-close" role="button">Close</a>
|
<a href="javascript:;" class="js-modal-close" role="button">Close</a>
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="javascript:;" class="js-modal-back" role="button">⬅ Back</a>
|
<a href="javascript:;" class="js-modal-back" role="button">⬅ Back</a>
|
||||||
<button class="modal-confirm js-secret-publish">Send</button>
|
<button class="modal-confirm js-secret-publish">Send</button>
|
||||||
<div hidden class="js-sending-message"></div>
|
<div style="display: none" class="js-sending-message"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-header">Choose the recipients</div>
|
<div class="modal-header">Choose the recipients</div>
|
||||||
<div class="modal-body js-recipients-list">
|
<div class="modal-body js-recipients-list">
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<div class="overlay" hidden></div>
|
<div class="overlay" style="display: none"></div>
|
||||||
<div class="modal" hidden>
|
<div class="modal" style="display: none">
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="javascript:;" class="js-modal-close" role="button">Close</a>
|
<a href="javascript:;" class="js-modal-close" role="button">Close</a>
|
||||||
<button class="modal-confirm js-secret-publish">Send</button>
|
<button class="modal-confirm js-secret-publish">Send</button>
|
||||||
<div hidden class="js-sending-message"></div>
|
<div style="display: none" class="js-sending-message"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-header">Write a secret message to <%= profile.name %></div>
|
<div class="modal-header">Write a secret message to <%= profile.name %></div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
<button class="secret-button js-compose-secret-message" style="padding: 10px 14px; justify-content: center">
|
<button class="secret-button js-compose-secret-message" style="padding: 10px 14px; justify-content: center">
|
||||||
✍️ Send a Secret
|
✍️ Send a Secret
|
||||||
</button>
|
</button>
|
||||||
<div class="overlay" hidden></div>
|
<div class="overlay" style="display: none"></div>
|
||||||
<div class="modal" hidden>
|
<div class="modal" style="display: none">
|
||||||
<div class="js-step">
|
<div class="js-step">
|
||||||
<div class="modal-header">Write a secret message</div>
|
<div class="modal-header">Write a secret message</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
<button class="modal-confirm">Next</button>
|
<button class="modal-confirm">Next</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="js-step" hidden>
|
<div class="js-step" style="display: none">
|
||||||
<div class="modal-header">Choose the recipients</div>
|
<div class="modal-header">Choose the recipients</div>
|
||||||
<div class="modal-body js-recipients-list">
|
<div class="modal-body js-recipients-list">
|
||||||
<% allFollowing = friends.friends.concat(friends.requestsSent) %>
|
<% allFollowing = friends.friends.concat(friends.requestsSent) %>
|
||||||
|
@ -34,7 +34,7 @@
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
this message will disapear right after being read
|
this message will disapear right after being read
|
||||||
<button class="modal-confirm js-secret-publish">Send</button>
|
<button class="modal-confirm js-secret-publish">Send</button>
|
||||||
<div hidden class="js-sending-message"></div>
|
<div style="display: none" class="js-sending-message"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="overlay" hidden></div>
|
<div class="overlay" style="display: none"></div>
|
||||||
<div class="modal" hidden>
|
<div class="modal" style="display: none">
|
||||||
<div class="modal-header">Write a secret message to <%= profile.name %></div>
|
<div class="modal-header">Write a secret message to <%= profile.name %></div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<textarea name="message" class="compose-post js-secret-message-input" style="margin: 0"></textarea>
|
<textarea name="message" class="compose-post js-secret-message-input" style="margin: 0"></textarea>
|
||||||
|
@ -7,6 +7,6 @@
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
this message will disapear right after being read
|
this message will disapear right after being read
|
||||||
<button class="modal-confirm js-secret-publish">Send</button>
|
<button class="modal-confirm js-secret-publish">Send</button>
|
||||||
<div hidden class="js-sending-message"></div>
|
<div style="display: none" class="js-sending-message"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0; font-size: 14px;">
|
<div class="column-side-padding" style="margin: 25px 0 20px 0; font-size: 14px; <%= secretMessages.length > 0 ? "display: none" : "" %>">
|
||||||
🤫 You don't have any secret messages yet
|
🤫 You don't have any secret messages yet
|
||||||
</div>
|
</div>
|
||||||
<% secretMessages.map(chat => { %>
|
<% secretMessages.map(chat => { %>
|
||||||
|
@ -26,10 +26,10 @@
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<div class="overlay" hidden></div>
|
<div class="overlay" style="display:none"></div>
|
||||||
<div class="modal" hidden>
|
<div class="modal" style="display:none">
|
||||||
<% chat.messages.reverse().map((message, index) => { %>
|
<% chat.messages.reverse().map((message, index) => { %>
|
||||||
<div class="js-step" <%= index > 0 ? "hidden" : "" %>>
|
<div class="js-step" <%- index > 0 ? 'style="display: none"' : "" %>>
|
||||||
<a href="<%= profileUrl(chat.authorProfile.id) %>" class="modal-header">
|
<a href="<%= profileUrl(chat.authorProfile.id) %>" class="modal-header">
|
||||||
<img src="<%= profileImageUrl(chat.authorProfile) %>" class="post-profile-pic" />
|
<img src="<%= profileImageUrl(chat.authorProfile) %>" class="post-profile-pic" />
|
||||||
<div style="padding-left: 10px"><%= chat.authorProfile.name %></div>
|
<div style="padding-left: 10px"><%= chat.authorProfile.name %></div>
|
||||||
|
|
Loading…
Reference in New Issue