Add publishing new vanishing message
This commit is contained in:
Rogerio Chaves
parent
80ee04782d
commit
074ad788cc
|
|
@ -364,30 +364,33 @@ router.post("/vanish", async (req, res) => {
|
|||
|
||||
router.post("/profile/:id(*)/publish", async (req, res) => {
|
||||
const id = req.params.id;
|
||||
const visibility = req.body.visibility;
|
||||
|
||||
if (visibility == "vanishing") {
|
||||
await ssbServer.identities.publishAs({
|
||||
id: req.context.profile.id,
|
||||
private: true,
|
||||
content: {
|
||||
type: "post",
|
||||
text: req.body.message,
|
||||
root: id,
|
||||
recps: [id],
|
||||
},
|
||||
});
|
||||
} else {
|
||||
await ssbServer.identities.publishAs({
|
||||
id: req.context.profile.id,
|
||||
private: false,
|
||||
content: {
|
||||
type: "post",
|
||||
text: req.body.message,
|
||||
root: id,
|
||||
},
|
||||
});
|
||||
}
|
||||
await ssbServer.identities.publishAs({
|
||||
id: req.context.profile.id,
|
||||
private: false,
|
||||
content: {
|
||||
type: "post",
|
||||
text: req.body.message,
|
||||
root: id,
|
||||
},
|
||||
});
|
||||
|
||||
res.redirect(profileUrl(id));
|
||||
});
|
||||
|
||||
router.post("/profile/:id(*)/publish_vanishing", async (req, res) => {
|
||||
const id = req.params.id;
|
||||
|
||||
await ssbServer.identities.publishAs({
|
||||
id: req.context.profile.id,
|
||||
private: true,
|
||||
content: {
|
||||
type: "post",
|
||||
text: req.body.message,
|
||||
root: id,
|
||||
recps: [id],
|
||||
},
|
||||
});
|
||||
|
||||
res.redirect(profileUrl(id));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,27 +4,79 @@ document.onkeydown = (e) => {
|
|||
if (isEsc) escCallback();
|
||||
};
|
||||
|
||||
const openModalFor = (elem, onConfirm, afterClose = null) => {
|
||||
const overlay = elem.parentElement.querySelector(".overlay");
|
||||
const modal = elem.parentElement.querySelector(".modal");
|
||||
const confirmButton = elem.parentElement.querySelector(".modal-confirm");
|
||||
|
||||
overlay.style.display = "block";
|
||||
modal.style.display = "block";
|
||||
|
||||
const onClose = () => {
|
||||
overlay.style.display = "none";
|
||||
modal.style.display = "none";
|
||||
if (afterClose) afterClose();
|
||||
};
|
||||
|
||||
overlay.addEventListener("click", onClose);
|
||||
confirmButton.addEventListener("click", onConfirm);
|
||||
escCallback = onClose;
|
||||
|
||||
return { close: onClose };
|
||||
};
|
||||
|
||||
const composeButton = document.querySelector(".js-compose-vanishing-message");
|
||||
const publishButton = document.querySelector(".js-secret-publish");
|
||||
const sendingMessage = document.querySelector(".js-sending-message");
|
||||
const messageInput = document.querySelector(".js-secret-message-input");
|
||||
if (composeButton) {
|
||||
composeButton.addEventListener("click", () => {
|
||||
const onPublish = () => {
|
||||
if (messageInput.value.length == 0) return;
|
||||
|
||||
publishButton.style.display = "none";
|
||||
sendingMessage.innerHTML = "Loading...";
|
||||
sendingMessage.style.display = "block";
|
||||
|
||||
fetch(composeButton.dataset.url, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: "message=" + encodeURIComponent(messageInput.value),
|
||||
})
|
||||
.then(() => {
|
||||
sendingMessage.innerHTML = "✅ Sent";
|
||||
|
||||
setTimeout(() => {
|
||||
modal.close();
|
||||
messageInput.value = "";
|
||||
publishButton.style.display = "block";
|
||||
sendingMessage.style.display = "none";
|
||||
}, 1000);
|
||||
})
|
||||
.catch(() => {
|
||||
sendingMessage.innerHTML = "Error";
|
||||
setTimeout(() => {
|
||||
publishButton.style.display = "block";
|
||||
sendingMessage.style.display = "none";
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
const modal = openModalFor(composeButton, onPublish);
|
||||
});
|
||||
}
|
||||
|
||||
const messages = document.querySelectorAll(".js-vanishing-message");
|
||||
messages.forEach((message) => {
|
||||
message.addEventListener("click", () => {
|
||||
const overlay = message.parentElement.querySelector(".overlay");
|
||||
const modal = message.parentElement.querySelector(".modal");
|
||||
const closeButton = message.parentElement.querySelector(".modal-close");
|
||||
|
||||
overlay.style.display = "block";
|
||||
modal.style.display = "block";
|
||||
|
||||
const onClose = () => {
|
||||
const parent = modal.parentElement;
|
||||
const afterClose = () => {
|
||||
const parent = message.parentElement;
|
||||
parent.parentElement.removeChild(parent);
|
||||
if (document.querySelectorAll(".js-vanishing-message").length == 0) {
|
||||
document.querySelector(".js-vanishing-messages").style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
overlay.addEventListener("click", onClose);
|
||||
closeButton.addEventListener("click", onClose);
|
||||
escCallback = onClose;
|
||||
const modal = openModalFor(message, () => modal.close(), afterClose);
|
||||
|
||||
fetch("/vanish", {
|
||||
method: "POST",
|
||||
|
|
@ -53,19 +105,6 @@ if (profilePicUpload) {
|
|||
previewImage();
|
||||
}
|
||||
|
||||
const jsPublicOption = document.querySelector(".js-public-option");
|
||||
const jsVanishingOption = document.querySelector(".js-vanishing-option");
|
||||
const jsVanishingMessage = document.querySelector(".js-vanishing-message");
|
||||
if (jsVanishingOption) {
|
||||
const onVisibilityChange = () => {
|
||||
const vanishing = jsVanishingOption.checked;
|
||||
jsVanishingMessage.style.display = vanishing ? "block" : "none";
|
||||
};
|
||||
jsPublicOption.addEventListener("change", onVisibilityChange);
|
||||
jsVanishingOption.addEventListener("change", onVisibilityChange);
|
||||
onVisibilityChange();
|
||||
}
|
||||
|
||||
const jsSyncing = document.querySelector(".js-syncing");
|
||||
if (jsSyncing) {
|
||||
let checkSyncInterval;
|
||||
|
|
|
|||
|
|
@ -17,14 +17,20 @@ button,
|
|||
a.button,
|
||||
input[type="submit"] {
|
||||
font-size: 14px;
|
||||
background: #08d;
|
||||
color: #fff;
|
||||
background: #e7e7e7;
|
||||
border: 1px solid #5f5f5f;
|
||||
color: #555;
|
||||
border-radius: 3px;
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
height: 33px;
|
||||
}
|
||||
button:hover,
|
||||
a.button:hover,
|
||||
input[type="submit"]:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
button.button-big,
|
||||
a.button.button-big,
|
||||
|
|
@ -32,17 +38,24 @@ input[type="submit"].button-big {
|
|||
padding: 16px 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
button.button-secondary,
|
||||
a.button.button-secondary,
|
||||
input[type="submit"].button-secondary {
|
||||
background: #ddd;
|
||||
color: #5f5f5f;
|
||||
button.button-blue,
|
||||
a.button.button-blue,
|
||||
input[type="submit"].button-blue {
|
||||
background: #7fe7e7;
|
||||
color: #044;
|
||||
}
|
||||
button.button-secondary:hover,
|
||||
a.button.button-secondary:hover,
|
||||
input[type="submit"].button-secondary:hover {
|
||||
background: #959eab;
|
||||
color: #fff;
|
||||
button.button-blue:hover,
|
||||
a.button.button-blue:hover,
|
||||
input[type="submit"].button-blue:hover {
|
||||
background: #6bc4c4;
|
||||
}
|
||||
button.button-yellow {
|
||||
background: #fcd204;
|
||||
color: #540;
|
||||
margin-left: 5px;
|
||||
}
|
||||
button.button-yellow:hover {
|
||||
background: #ddb904;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
|
|
@ -65,6 +78,7 @@ nav {
|
|||
background: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
header a {
|
||||
text-decoration: none;
|
||||
|
|
@ -76,6 +90,7 @@ header a:hover {
|
|||
}
|
||||
header .logo a:hover {
|
||||
background: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.logo {
|
||||
font-weight: bold;
|
||||
|
|
@ -105,6 +120,11 @@ header .logo a:hover {
|
|||
}
|
||||
|
||||
.screen-center {
|
||||
margin: 0 auto;
|
||||
max-width: 792px;
|
||||
}
|
||||
|
||||
.home-page .screen-center {
|
||||
margin: 0 auto;
|
||||
max-width: 992px;
|
||||
}
|
||||
|
|
@ -146,8 +166,9 @@ h2 {
|
|||
}
|
||||
|
||||
.post-profile-pic {
|
||||
width: 64px;
|
||||
width: 48px;
|
||||
max-height: 200px;
|
||||
border: 1px solid #044;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
|
|
@ -155,6 +176,7 @@ h2 {
|
|||
}
|
||||
|
||||
.wall {
|
||||
max-width: 592px;
|
||||
padding: 14px;
|
||||
flex-grow: 1;
|
||||
background: #fff;
|
||||
|
|
@ -192,6 +214,12 @@ h2 {
|
|||
|
||||
.profile-pic {
|
||||
width: 128px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #044;
|
||||
}
|
||||
|
||||
.profile-actions form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
@ -229,6 +257,7 @@ h2 {
|
|||
|
||||
.modal-body {
|
||||
padding: 10px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
|
|
@ -306,6 +335,8 @@ h2 {
|
|||
padding: 5px 14px;
|
||||
background: none;
|
||||
color: #000;
|
||||
height: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vanishing-button:hover {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<%- include('_header', { main_class: "screen-center" }) %>
|
||||
<%- include('_header', { main_class: "screen-center", body_class: "home-page" }) %>
|
||||
|
||||
<div class="columns">
|
||||
<div class="vanishing-chat">
|
||||
|
||||
<% if (vanishingMessages.length == 0) { %>
|
||||
You don't have any vanishing messages yet
|
||||
<div class="column-side-padding">You don't have any vanishing messages yet</div>
|
||||
<% } else { %>
|
||||
<div class="js-vanishing-messages">
|
||||
<h2 class="column-side-padding">Vanishing Messages</h2>
|
||||
|
|
@ -20,15 +20,15 @@
|
|||
<div class="overlay"></div>
|
||||
<div class="modal">
|
||||
<a href="<%= profileUrl(message.value.authorProfile.id) %>" class="modal-header">
|
||||
<img src="<%= profileImageUrl(message.value.authorProfile) %>" class="post-profile-pic" style="padding-right: 10px" />
|
||||
<%= message.value.authorProfile.name %>
|
||||
<img src="<%= profileImageUrl(message.value.authorProfile) %>" class="post-profile-pic" />
|
||||
<div style="padding-left: 10px"><%= message.value.authorProfile.name %></div>
|
||||
</a>
|
||||
<div class="modal-body">
|
||||
<%= message.value.content.text %>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
after you close this box the message will be gone forever
|
||||
<button class="modal-close">Close</button>
|
||||
<button class="modal-confirm">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,31 +5,34 @@
|
|||
<div class="columns">
|
||||
<img class="profile-pic" src="<%= profileImageUrl(profile) %>" />
|
||||
<div style="padding-left: 20px">
|
||||
<h1><%= profile.name %></h1>
|
||||
|
||||
<div class="columns" style="align-items: center;">
|
||||
<h1><%= profile.name %></h1>
|
||||
<% if (friendshipStatus == "friends") { %>
|
||||
<div style="margin-left: 14px">✅ Friends</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<%= profile.description %>
|
||||
|
||||
<div style="margin-top: 20px">
|
||||
<div class="columns profile-actions" style="margin-top: 20px">
|
||||
<% if (friendshipStatus == "no_relation") { %>
|
||||
<form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
|
||||
<input type="submit" value="Add as friend" />
|
||||
<input type="submit" class="button-blue" value="Add as friend" />
|
||||
</form>
|
||||
<% } else if (friendshipStatus == "friends") { %>
|
||||
✅ Friends
|
||||
<form action="<%= profileUrl(profile.id, "/reject_friend") %>" style="display:inline; margin-left: 15px" method="POST">
|
||||
<input type="submit" class="button-secondary" value="unfriend" />
|
||||
<form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
|
||||
<input type="submit" value="Undo Friendship" />
|
||||
</form>
|
||||
<% } else if (friendshipStatus == "request_sent") { %>
|
||||
<form action="<%= profileUrl(profile.id, "/reject_friend") %>" style="display:inline" method="POST">
|
||||
<form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
|
||||
<button class="button-secondary undo-request">Request sent</button>
|
||||
</form>
|
||||
<% } else if (friendshipStatus == "request_received") { %>
|
||||
<p><%= profile.name %> sent you a friendship request</p>
|
||||
<form action="<%= profileUrl(profile.id, "/add_friend") %>" style="display:inline" method="POST">
|
||||
<input type="submit" value="Accept" />
|
||||
<form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
|
||||
<input type="submit" class="button-blue" value="Accept" />
|
||||
</form>
|
||||
<form action="<%= profileUrl(profile.id, "/reject_friend") %>" style="display:inline" method="POST">
|
||||
<input type="submit" class="button-secondary" value="Reject" />
|
||||
<form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
|
||||
<input type="submit" value="Reject" />
|
||||
</form>
|
||||
<% } else if (friendshipStatus == "request_rejected") { %>
|
||||
<p>You rejected <%= profile.name %> friendship request</p>
|
||||
|
|
@ -37,25 +40,29 @@
|
|||
<input type="submit" value="Add as friend" />
|
||||
</form>
|
||||
<% } %>
|
||||
|
||||
<button class="button-yellow js-compose-vanishing-message" data-url="<%= profileUrl(profile.id, "/publish_vanishing") %>">
|
||||
👻 Secret Message
|
||||
</button>
|
||||
|
||||
<div class="overlay"></div>
|
||||
<div class="modal">
|
||||
<div class="modal-header">Write a secret message to <%= profile.name %></div>
|
||||
<div class="modal-body">
|
||||
<textarea name="message" class="compose-post js-secret-message-input" style="margin: 0"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
this message will disapear right after being read
|
||||
<button class="modal-confirm js-secret-publish">Publish</button>
|
||||
<div style="display: none" class="js-sending-message"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Leave <%= profile.name %> a message</h2>
|
||||
<form action="<%= profileUrl(profile.id, "/publish") %>" method="POST">
|
||||
<div>
|
||||
<label>
|
||||
<input type="radio" name="visibility" value="public" checked="checked" class="js-public-option">
|
||||
Public
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="visibility" value="vanishing" class="js-vanishing-option">
|
||||
Vanishing
|
||||
</label>
|
||||
</div>
|
||||
<div style="display: none; padding-top: 20px; font-size: 13px; color: #666" class="js-vanishing-message">
|
||||
Vanishing messages are private and disapear right after being read
|
||||
</div>
|
||||
<form action="<%= profileUrl(profile.id, "/publish") %>" method="POST" style="padding-top: 20px;">
|
||||
<textarea name="message" class="compose-post"></textarea>
|
||||
<div class="reverse-columns" style="margin-top: 10px">
|
||||
<input type="submit" value="Publish" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue