Display 140 limit on home and profile posts
This commit is contained in:
parent
ea2ed6f814
commit
e0f602ade7
|
@ -5,8 +5,10 @@
|
||||||
const composePost = document.querySelector(".js-compose-post");
|
const composePost = document.querySelector(".js-compose-post");
|
||||||
if (composePost) {
|
if (composePost) {
|
||||||
const composeButton = document.querySelector(".js-publish-button");
|
const composeButton = document.querySelector(".js-publish-button");
|
||||||
|
const letterCounter = document.querySelector(".js-letter-count");
|
||||||
composePost.addEventListener("focus", () => {
|
composePost.addEventListener("focus", () => {
|
||||||
composeButton.style.display = "block";
|
composeButton.style.display = "block";
|
||||||
|
letterCounter.style.display = "block";
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -58,3 +58,26 @@ window.onerror = (message, _url, _lineNo, _columnNo, error) => {
|
||||||
encodeURIComponent(error.stack),
|
encodeURIComponent(error.stack),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Letter counter
|
||||||
|
*/
|
||||||
|
|
||||||
|
const letterCounter = document.querySelector(".js-letter-count");
|
||||||
|
if (letterCounter) {
|
||||||
|
let parent = letterCounter.parentElement;
|
||||||
|
if (parent.tagName != "FORM") parent = parent.parentElement;
|
||||||
|
const textarea = parent.querySelector("textarea");
|
||||||
|
const submit = parent.querySelector("input[type=submit]");
|
||||||
|
const countLetters = () => {
|
||||||
|
const left = 140 - textarea.value.length;
|
||||||
|
letterCounter.textContent = left.toString();
|
||||||
|
if (left < 0) {
|
||||||
|
submit.setAttribute("disabled", "disabled");
|
||||||
|
} else {
|
||||||
|
submit.removeAttribute("disabled");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
textarea.addEventListener("keyup", countLetters);
|
||||||
|
countLetters();
|
||||||
|
}
|
||||||
|
|
|
@ -57,6 +57,12 @@ button.button-yellow {
|
||||||
button.button-yellow:hover {
|
button.button-yellow:hover {
|
||||||
background: #ddb904;
|
background: #ddb904;
|
||||||
}
|
}
|
||||||
|
button[disabled],
|
||||||
|
input[type="submit"][disabled] {
|
||||||
|
background: #eee;
|
||||||
|
border: 1px solid #999;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="email"],
|
input[type="email"],
|
||||||
|
@ -382,3 +388,10 @@ h2 {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.letter-count {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
|
@ -19,7 +19,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form action="/publish" method="POST" style="padding-top: 20px;">
|
<form action="/publish" method="POST">
|
||||||
|
<div class="letter-count js-letter-count">140</div>
|
||||||
<textarea name="message" class="compose-post" placeholder="Post something on your wall..."></textarea>
|
<textarea name="message" class="compose-post" placeholder="Post something on your wall..."></textarea>
|
||||||
<div class="reverse-columns" style="margin-top: 10px">
|
<div class="reverse-columns" style="margin-top: 10px">
|
||||||
<input type="submit" value="Publish" />
|
<input type="submit" value="Publish" />
|
||||||
|
|
|
@ -32,7 +32,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form action="<%= profileUrl(profile.id, "/publish") %>" method="POST" style="padding-top: 20px;">
|
<form action="<%= profileUrl(profile.id, "/publish") %>" method="POST">
|
||||||
|
<div class="letter-count js-letter-count">140</div>
|
||||||
<textarea name="message" class="compose-post" placeholder="Write something to <%= profile.name %>..."></textarea>
|
<textarea name="message" class="compose-post" placeholder="Write something to <%= profile.name %>..."></textarea>
|
||||||
<div class="reverse-columns" style="margin-top: 10px">
|
<div class="reverse-columns" style="margin-top: 10px">
|
||||||
<input type="submit" value="Publish" />
|
<input type="submit" value="Publish" />
|
||||||
|
|
|
@ -10,7 +10,8 @@
|
||||||
<% if (posts.length > 0) { %>
|
<% if (posts.length > 0) { %>
|
||||||
<form action="/publish" method="POST" style="padding: 0px 8px 5px 8px;">
|
<form action="/publish" method="POST" style="padding: 0px 8px 5px 8px;">
|
||||||
<textarea name="message" class="compose-post js-compose-post" placeholder="Post something on your wall..."></textarea>
|
<textarea name="message" class="compose-post js-compose-post" placeholder="Post something on your wall..."></textarea>
|
||||||
<div class="reverse-columns">
|
<div class="columns" style="justify-content: space-between; align-items: center;">
|
||||||
|
<div class="letter-count js-letter-count" style="display: none">140</div>
|
||||||
<input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
|
<input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -38,7 +38,8 @@
|
||||||
<% if (posts.length > 0) { %>
|
<% if (posts.length > 0) { %>
|
||||||
<form action="<%= profileUrl(profile.id, "/publish") %>" method="POST" style="padding: 0px 8px 5px 8px;">
|
<form action="<%= profileUrl(profile.id, "/publish") %>" method="POST" style="padding: 0px 8px 5px 8px;">
|
||||||
<textarea name="message" class="compose-post js-compose-post" placeholder="Write something to <%= profile.name %>..."></textarea>
|
<textarea name="message" class="compose-post js-compose-post" placeholder="Write something to <%= profile.name %>..."></textarea>
|
||||||
<div class="reverse-columns">
|
<div class="columns" style="justify-content: space-between; align-items: center;">
|
||||||
|
<div class="letter-count js-letter-count" style="display: none">140</div>
|
||||||
<input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
|
<input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
Loading…
Reference in New Issue