Browse Source

adds a simple publish status UI to show errors

pull/19/head
Aaron Parecki 10 years ago
parent
commit
cb93a9925b
  1. 3
      controllers/editor.php
  2. 2
      lib/helpers.php
  3. 59
      public/editor/editor.js
  4. 47
      public/editor/style.css
  5. 32
      views/editor.php
  6. 2
      views/partials/appcache.php

3
controllers/editor.php

@ -21,7 +21,8 @@ $app->post('/editor/publish', function() use($app) {
$app->response()['Content-type'] = 'application/json';
$app->response()->body(json_encode([
'location' => $r['location']
'location' => $r['location'],
'response' => trim(htmlspecialchars($r['response']))
]));
}
});

2
lib/helpers.php

@ -100,7 +100,7 @@ function micropub_post($endpoint, $params, $access_token) {
$post = http_build_query(array_merge(array(
'h' => 'entry'
), $params));
$post = preg_replace('/%5B[0-9]+%5D/', '%5B%5D', $post);
$post = preg_replace('/%5B[0-9]+%5D/', '%5B%5D', $post); // change [0] to []
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);

59
public/editor/editor.js

@ -31,7 +31,13 @@ $(function () {
});
$.post('/editor/test-login', {}, function(response) {
$('#publish_btn span').text(response.logged_in ? 'Publish' : 'Sign In');
if(response.logged_in) {
$('.publish-dropdown .action-publish').removeClass('hidden');
$('.publish-dropdown .action-signin').addClass('hidden');
} else {
$('.publish-dropdown .action-publish').addClass('hidden');
$('.publish-dropdown .action-signin').removeClass('hidden');
}
});
$('#publish_btn').click(function(){
@ -42,28 +48,43 @@ $(function () {
}
});
$('#--publish_btn').click(function(){
if($('#publish_btn span').text() == 'Publish') {
$.post('/editor/publish', {
name: $("#post-name").val(),
body: editor.serialize().content.value
}, function(response) {
if(response.location) {
reset_page().then(function(){
window.location = response.location;
});
}
});
$('#new_btn').click(function(){
if(confirm('This will discard your current post. Are you sure?')) {
reset_page();
}
});
} else {
var url = prompt("Enter your URL");
window.location = '/auth/start?me=' + encodeURIComponent(url) + '&redirect=/editor';
$('#signin-domain').on('keydown', function(e){
if(e.keyCode == 13) {
$('#signin-btn').click();
}
});
$('#signin-btn').click(function(){
window.location = '/auth/start?me=' + encodeURIComponent($('#signin-domain').val()) + '&redirect=/editor';
});
$('#publish-confirm').click(function(){
$('#publish-help').addClass('hidden');
$('#publish-in-progress').removeClass('hidden');
$('#new_btn').click(function(){
reset_page();
$.post('/editor/publish', {
name: $("#post-name").val(),
body: editor.serialize().content.value
}, function(response) {
if(response.location) {
reset_page().then(function(){
$('#publish-success-url').attr('href', response.location);
$('#publish-in-progress').addClass('hidden');
$('#publish-error-debug').html('').addClass('hidden');
$('#publish-error').addClass('hidden');
$('#publish-success').removeClass('hidden');
});
} else {
$('#publish-in-progress').addClass('hidden');
$('#publish-error-debug').html(response.response).removeClass('hidden');
$('#publish-error').removeClass('hidden');
$('#publish-success').addClass('hidden');
}
});
});
});

47
public/editor/style.css

@ -57,7 +57,7 @@ img { border: 0; }
clear: both;
}
.toolbar .btn {
.btn {
height: 38px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
@ -73,10 +73,35 @@ img { border: 0; }
vertical-align: middle;
cursor: pointer;
}
.toolbar .btn:hover {
.btn:hover {
border-color: #61a7ae;
color: #51a1a8;
}
.btn.btn-medium {
height: 30px;
padding: 0 16px;
font-size: 13px;
}
.btn.btn-small {
height: 26px;
padding: 0 16px;
font-size: 13px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
input.form-field-small {
height: 24px;
margin-top: 1px;
font-size: 13px;
color: #51a1a8;
padding: 0 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px #93dee5 solid;
}
.publish-dropdown {
position: absolute;
@ -86,6 +111,9 @@ img { border: 0; }
background: white;
width: 280px;
min-height: 60px;
font-family: sans-serif;
font-size: 14px;
line-height: 18px;
border: 1px solid #dbdbdb;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
@ -107,6 +135,21 @@ img { border: 0; }
display: block;
border: #dbdbdb 1px solid;
}
.publish-dropdown .dropdown-content {
padding: 9px;
}
.publish-dropdown input {
font-family: sans-serif;
}
.publish-dropdown .helptext {
padding: 8px 4px 12px 4px;
color: #333;
}
pre#publish-error-debug {
overflow: scroll;
font-size: 11px;
line-height: 12px;
}
.hidden {
display: none;

32
views/editor.php

@ -47,7 +47,7 @@
<span class="item text"><span id="draft-status">Draft</span></span>
</div>
<div class="toolbar-right">
<button class="btn" id="publish_btn"><span>Publish</span> <i class="fa fa-caret-down"></i></button>
<button class="btn" id="publish_btn">Publish <i class="fa fa-caret-down"></i></button>
<button class="btn" id="new_btn">New</button>
</div>
<div class="clear"></div>
@ -55,6 +55,36 @@
<div class="publish-dropdown hidden">
<div class="arrow"></div>
<div class="dropdown-content action-publish">
<div style="float:right"><button class="btn btn-medium" id="publish-confirm">Publish Now</button></div>
<div style="clear:right;"></div>
<div class="helptext" id="publish-help">
<div>Clicking "Publish Now" will send a request to your Micropub endpoint.</div><br>
<div>The request will include two fields, "name" and "content", where the content will be the full HTML for this post.</div>
</div>
<div class="helptext hidden" id="publish-in-progress">
Posting... <!-- TODO replace this with a CSS animated spinner -->
</div>
<div class="helptext hidden" id="publish-success">
<div>It worked! The post is on your site!</div><br>
<div><a href="" id="publish-success-url">View your post</a></div>
</div>
<div class="helptext hidden" id="publish-error">
<div>Something went wrong! Below is the response from your Micropub endpoint.</div><br>
<pre id="publish-error-debug"></pre>
</div>
</div>
<div class="dropdown-content action-signin hidden">
<div class="helptext">You need to sign in before you can publish! Don't worry, your draft will still be here when you finish signing in.</div>
<input type="url" class="form-field-small" placeholder="yourdomain.com" id="signin-domain">
<button class="btn btn-small" id="signin-btn">Sign In</button>
</div>
</div>
<div class="container">

2
views/partials/appcache.php

@ -1,6 +1,6 @@
CACHE MANIFEST
# v3
# v15
/editor
/editor/style.css

Loading…
Cancel
Save