Browse Source

add char counter for bluesky and mastodon. add published field to note interface

main
Aaron Parecki 8 months ago
parent
commit
4392fdde95
3 changed files with 46 additions and 2 deletions
  1. BIN
      public/images/bluesky.png
  2. BIN
      public/images/mastodon.ico
  3. +46
    -2
      views/new-post.php

BIN
public/images/bluesky.png View File

Before After
Width: 32  |  Height: 32  |  Size: 769 B

BIN
public/images/mastodon.ico View File

Before After

+ 46
- 2
views/new-post.php View File

@ -46,11 +46,18 @@
</div>
<div class="form-group">
<div id="mastodon_content_remaining" class="mcheck500"><img src="/images/mastodon.ico" width="16"> <span>500</span></div>
<div id="note_content_remaining" class="pcheck206"><img src="/images/twitter.ico"> <span>280</span></div>
<div id="bluesky_content_remaining" class="bcheck256"><img src="/images/bluesky.png" width="16"> <span>256</span></div>
<label for="note_content">Content</label>
<textarea id="note_content" value="" class="form-control" style="height: 4em;"></textarea>
</div>
<div class="form-group hidden" id="published-field">
<label for="note_published_date">Published</label>
<input type="text" placeholder="YYYY-MM-DD hh:mm:ss +zz:zz" pattern="\d{4}-\d{2}-\d{2}[ T]\d\d:\d\d:\d\d[ ]?[+\-]\d\d:?\d\d" class="form-control" id="note_published_date">
</div>
<div class="form-group hidden" id="content-type-selection">
<label for="note_content_type">Content Type</label>
<select class="form-control" id="note_content_type">
@ -215,10 +222,11 @@
margin-bottom: 1em;
}
#note_content_remaining {
#note_content_remaining, #mastodon_content_remaining, #bluesky_content_remaining {
float: right;
font-size: 0.8em;
font-weight: bold;
margin-left: 10px;
}
#modal_photo_preview {
@ -260,6 +268,10 @@
.pcheck200,.pcheck208 { color: #59cb3a; } /* exactly fits 280 chars, both with or without RT */
.pcheck413 { color: #a73b3b; } /* over max tweet length */
.lengthOK { color: #6ba15c; }
.lengthWARN { color: #c4b404; }
.lengthOVER { color: #a73b3b; }
.reply-context {
display: flex;
flex-direction: row;
@ -470,12 +482,25 @@ $(function(){
refreshPhotoPreviews();
saveNoteState();
});
$("#note_published_date").bind('keyup', function(e) {
const valid = document.getElementById("note_published_date").validity;
if(valid.patternMismatch) {
$("#published-field").addClass("has-error");
} else {
$("#published-field").removeClass("has-error");
}
});
$(document).bind('keydown', function(e){
// Easter egg: press ctrl+shift+c to reveal a content type selection
if(e.keyCode == 67 && e.ctrlKey && e.shiftKey) {
$("#content-type-selection").removeClass("hidden");
}
// Easter egg: press ctrl+shift+d to reveal a datetime field
if(e.keyCode == 68 && e.ctrlKey && e.shiftKey) {
$("#published-field").removeClass("hidden");
}
// Easter egg: press ctrl+shift+m to switch to markdown
if(e.keyCode == 77 && e.ctrlKey && e.shiftKey) {
switchToMarkdown();
@ -599,10 +624,24 @@ $(function(){
var tweet_length = tw_text_proxy(text).length;
var tweet_check = tw_length_check(text, 280, "<?= $this->user->twitter_username ?>");
var remaining = 280 - tweet_length;
$("#note_content_remaining span").html(remaining);
$("#note_content_remaining span").text(remaining);
$("#note_content_remaining").removeClass("pcheck200 pcheck206 pcheck207 pcheck208 pcheck413");
$("#note_content_remaining").addClass("pcheck"+tweet_check);
$("#mastodon_content_remaining span").text(500 - text.length);
$("#mastodon_content_remaining").removeClass("lengthOK lengthWARN lengthOVER");
mastodonLengthCheck = "lengthOK";
if(text.length > 490) { mastodonLengthCheck = "lengthWARN"; }
if(text.length > 500) { mastodonLengthCheck = "lengthOVER"; }
$("#mastodon_content_remaining").addClass(mastodonLengthCheck);
$("#bluesky_content_remaining span").text(256 - text.length);
$("#bluesky_content_remaining").removeClass("lengthOK lengthWARN lengthOVER");
blueskyLengthCheck = "lengthOK";
if(text.length > 240) { blueskyLengthCheck = "lengthWARN"; }
if(text.length > 256) { blueskyLengthCheck = "lengthOVER"; }
$("#bluesky_content_remaining").addClass(blueskyLengthCheck);
// If the user didn't enter any categories, add them from the post
// if(!userHasSetCategory) {
// var tags = $("#note_content").val().match(/#[a-z][a-z0-9]+/ig);
@ -803,6 +842,11 @@ $(function(){
formData.append('p3k-content-type', $("#note_content_type").val());
}
if(!$("#published-field").hasClass("hidden")) {
entry['published'] = $("#note_published_date").val();
formData.append('published', $("#note_published_date").val());
}
// Need to append a placeholder field because if the file size max is hit, $_POST will
// be empty, so the server needs to be able to recognize a post with only a file vs a failed one.
// This will be stripped by Quill before it's sent to the Micropub endpoint

Loading…
Cancel
Save