diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/new-post.php | 164 | ||||
| -rw-r--r-- | views/settings.php | 28 |
2 files changed, 141 insertions, 51 deletions
diff --git a/views/new-post.php b/views/new-post.php index 21571ec..68460d0 100644 --- a/views/new-post.php +++ b/views/new-post.php @@ -3,29 +3,45 @@ <form role="form" style="margin-top: 20px;" id="note_form"> - <div class="form-group"> - <div id="note_content_remaining" class="pcheck206"><img src="/images/twitter.ico"> <span>140</span></div> - <label for="note_content"><code>content</code></label> - <textarea id="note_content" value="" class="form-control" style="height: 4em;"></textarea> + <div id="reply"> + <div class="reply-section hidden"> + <div class="form-group has-feedback"> + <label for="note_in_reply_to">Reply To (a URL you are replying to)</label> + <input type="text" id="note_in_reply_to" value="<?= $this->in_reply_to ?>" class="form-control"> + <span class="loading hidden glyphicon glyphicon-refresh glyphicon-spin form-control-feedback"></span> + </div> + <div class="reply-context hidden"> + <div> + <img src="" width="48" class="author-img"> + </div> + <div> + <img src="" class="post-img hidden"> + <div class="author"><span class="name"></span> <span class="url"></span></div> + <span class="content"></span> + </div> + </div> + </div> + <a href="" id="expand-reply" class="btn btn-xs btn-info">Reply</a> </div> <div class="form-group"> - <label for="note_in_reply_to"><code>in-reply-to</code> (a URL you are replying to)</label> - <input type="text" id="note_in_reply_to" value="<?= $this->in_reply_to ?>" class="form-control"> + <div id="note_content_remaining" class="pcheck206"><img src="/images/twitter.ico"> <span>140</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"> - <label for="note_category"><code>category</code> (comma-separated list of tags, will be posted as an array)</label> + <div class="form-group" id="form_tags"> + <label for="note_category">Tags (comma-separated list)</label> <input type="text" id="note_category" value="" class="form-control" placeholder="e.g. web, personal"> </div> - <div class="form-group"> - <label for="note_slug"><code>slug</code></label> + <div class="form-group" id="form_slug"> + <label for="note_slug">Slug</label> <input type="text" id="note_slug" value="" class="form-control"> </div> <div class="form-group"> - <label for="note_photo"><code>photo</code></label> + <label for="note_photo">Photo</label> <input type="file" name="note_photo" id="note_photo" accept="image/*"> <a href="javascript:switchToManualPhotoURL();" id="note_manual_photo">enter photo url</a> <a href="javascript:addPhotoURL();" class="hidden" id="add_photo">add photo</a> @@ -39,7 +55,7 @@ </div> <div class="form-group"> - <label for="note_syndicate-to"><code>syndicate-to</code> <a href="javascript:reload_syndications()">(refresh)</a></label> + <label for="note_syndicate-to">Syndicate <a href="javascript:reload_syndications()">(refresh list)</a></label> <div id="syndication-container"> <?php if($this->syndication_targets) { @@ -62,7 +78,7 @@ </div> <div class="form-group"> - <label for="note_location"><code>location</code></label> + <label for="note_location">Location</label> <input type="checkbox" id="note_location_chk" value=""> <img src="/images/spinner.gif" id="note_location_loading" style="display: none;"> @@ -93,36 +109,6 @@ <?php endif; ?> <pre id="test_response" class="<?= $this->test_response ? '' : 'hidden' ?>" style="width: 100%; min-height: 240px;"><?= htmlspecialchars($this->test_response) ?></pre> - - <div class="callout"> - <p>Clicking "Post" will post this note to your Micropub endpoint. Below is some information about the request that will be made.</p> - - <table class="table table-condensed"> - <tr> - <td>me</td> - <td><code><?= session('me') ?></code> (should be your URL)</td> - </tr> - <tr> - <td>scope</td> - <td><code><?= $this->micropub_scope ?></code> (should be a space-separated list of permissions including "post")</td> - </tr> - <tr> - <td>micropub endpoint</td> - <td><code><?= $this->micropub_endpoint ?></code> (should be a URL)</td> - </tr> - <?php if($this->media_endpoint): ?> - <tr> - <td>media endpoint</td> - <td><code><?= $this->media_endpoint ?></code> (should be a URL)</td> - </tr> - <?php endif; ?> - <tr> - <td>access token</td> - <td>String of length <b><?= strlen($this->micropub_access_token) ?></b><?= (strlen($this->micropub_access_token) > 0) ? (', ending in <code>' . substr($this->micropub_access_token, -7) . '</code>') : '' ?> (should be greater than length 0)</td> - </tr> - </table> - </div> - <hr> <div style="text-align: right;"> <a href="/add-to-home?start">Add to Home Screen</a> @@ -131,6 +117,10 @@ <style type="text/css"> +#reply { + margin-bottom: 1em; +} + #note_content_remaining { float: right; font-size: 0.8em; @@ -142,6 +132,33 @@ .pcheck200,.pcheck208 { color: #59cb3a; } /* exactly fits 140 chars, both with or without RT */ .pcheck413 { color: #a73b3b; } /* over max tweet length */ +.reply-context { + display: flex; + flex-direction: row; + padding: 4px; + margin: 0 3em; + border: 1px #ccc solid; + border-radius: 4px; + background: #f4f4f4; +} +.reply-context img.author-img { + border-radius: 4px; + width: 48px; + margin-right: 4px; +} +.reply-context .author { + color: #777; + font-weight: bold; + font-size: 0.9em; +} +.reply-context .author .url { + color: #aaa; +} +.reply-context img.post-img { + float: right; + width: 200px; +} + </style> <script> @@ -170,7 +187,9 @@ function restoreNoteState() { if(note.photo) { replacePhotoWithPhotoURL(note.photo); } - console.log(note.syndications) + if(note.inReplyTo) { + expandReplySection(); + } $("#syndication-container button").each(function(i,btn){ if($(btn).data('syndicate-to') in note.syndications) { $(btn).addClass('btn-info'); @@ -208,6 +227,11 @@ function addPhotoURL() { } } +function expandReplySection() { + $("#expand-reply").click(); + $("#note_in_reply_to").change(); +} + $(function(){ var userHasSetCategory = false; @@ -218,6 +242,12 @@ $(function(){ saveNoteState(); }) + $("#expand-reply").click(function(){ + $('.reply-section').removeClass('hidden'); + $(this).addClass('hidden'); + return false; + }); + // Preview the photo when one is chosen $("#photo_preview_container").addClass("hidden"); $("#note_photo").on("change", function(e){ @@ -279,9 +309,43 @@ $(function(){ }); $("#note_in_reply_to").on('change', function(){ - if(match=$("#note_in_reply_to").val().match(/twitter\.com\/([^\/]+)\/status/)) { - $("#note_content").val( "@"+match[1]+" "+$("#note_content").val() ); - } + var reply_to = $("#note_in_reply_to").val(); + $(".reply-section .loading").removeClass("hidden"); + $.get("/reply/preview", {url:reply_to}, function(data){ + + if(data.canonical_reply_url != reply_to) { + $("#note_in_reply_to").val(data.canonical_reply_url); + } + var category = csv_to_array($("#note_category").val()); + for(var i in data.entry.category) { + if($.inArray(data.entry.category[i], category) == -1) { + category.push(data.entry.category[i]); + } + } + $("#note_category").val(category.join(", ")); + + if($("#note_content").val() == "" && data.mentions) { + var mentions = ''; + for(var i in data.mentions) { + mentions += '@'+data.mentions[i]+' '; + } + console.log(mentions); + $("#note_content").val(mentions); + } + + $(".reply-context .content").text(data.entry.content.text); + $(".reply-context .name").text(data.entry.author.name); + $(".reply-context .url").text(data.entry.author.url); + $(".reply-context img.author-img").attr('src', data.entry.author.photo); + if(data.entry.photo) { + $(".reply-context img.post-img").attr('src', data.entry.photo[0]).removeClass('hidden'); + } else { + $(".reply-context img.post-img").addClass('hidden'); + } + + $(".reply-section .loading").addClass("hidden"); + $(".reply-context").removeClass("hidden"); + }); }); $("#note_category").on('keydown keyup', function(){ @@ -293,6 +357,12 @@ $(function(){ } }); + // When the reply URL is in the query string, or loads from localstorage, make sure + // to run the event handlers to expand the reply section + if($("#note_in_reply_to").val() != "") { + expandReplySection(); + } + $("#btn_post").click(function(){ // Collect all the syndication buttons that are pressed diff --git a/views/settings.php b/views/settings.php index 46df0bf..5acc7dd 100644 --- a/views/settings.php +++ b/views/settings.php @@ -2,13 +2,33 @@ <?= partial('partials/header') ?> <h2>Signed In As</h2> - <code><?= session('me') ?></code> - <h3>Access Token</h3> - <input type="text" class="form-control" readonly="readonly" value="<?= $this->user->micropub_access_token ?>"> + <table class="table table-condensed"> + <tr> + <td>me</td> + <td><code><?= $this->user->url; ?></code> (should be your URL)</td> + </tr> + <tr> + <td>scope</td> + <td><code><?= $this->user->micropub_scope ?></code> (should be a space-separated list of permissions including "create")</td> + </tr> + <tr> + <td>micropub endpoint</td> + <td><code><?= $this->user->micropub_endpoint ?></code> (should be a URL)</td> + </tr> + <tr> + <td>media endpoint</td> + <td><?= $this->user->media_endpoint ? '<code>'.$this->user->media_endpoint.'</code>' : '<a href="https://www.w3.org/TR/micropub/#media-endpoint">no media endpoint</a>' ?></td> + </tr> + <tr> + <td width="140">access token</td> + <td><code style="word-break: break-word; white-space: pre-wrap;"><?= $this->user->micropub_access_token ?></code></td> + </tr> + </table> + <h3>Twitter</h3> - <p>Connecting a Twitter account will automatically "favorite" tweets on Twitter when you favorite a Twitter URL in Quill.</p> + <p>Connecting a Twitter account will automatically "favorite" and "retweet" tweets on Twitter when you favorite and retweet a Twitter URL in Quill.</p> <input type="button" id="twitter-button" value="Checking" class="btn"> </div> |