Browse Source

adds a "new version available" banner and a dropdown menu for publish

made a nice looking dropdown menu for the publish button
pull/19/head
Aaron Parecki 10 years ago
parent
commit
475175da5f
  1. 23
      public/editor/editor.js
  2. 64
      public/editor/style.css
  3. 12
      views/editor.php

23
public/editor/editor.js

@ -31,11 +31,19 @@ $(function () {
});
$.post('/editor/test-login', {}, function(response) {
$('#publish_btn').text(response.logged_in ? 'Publish' : 'Sign In');
$('#publish_btn span').text(response.logged_in ? 'Publish' : 'Sign In');
});
$('#publish_btn').click(function(){
if($('#publish_btn').text() == 'Publish') {
if($('.publish-dropdown').hasClass('hidden')) {
$('.publish-dropdown').removeClass('hidden');
} else {
$('.publish-dropdown').addClass('hidden');
}
});
$('#--publish_btn').click(function(){
if($('#publish_btn span').text() == 'Publish') {
$.post('/editor/publish', {
name: $("#post-name").val(),
@ -57,6 +65,7 @@ $(function () {
$('#new_btn').click(function(){
reset_page();
});
});
function reset_page() {
@ -66,6 +75,16 @@ function reset_page() {
return localforage.setItem('currentdraft', {});
}
function onUpdateReady() {
// Show the notice that says there is a new version of the app
$("#new_version_available").show();
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();
}
/* ************************************************ */
/* autosave loop */
var autosaveTimeout = false;

64
public/editor/style.css

@ -69,10 +69,72 @@ img { border: 0; }
text-decoration: none;
text-align: center;
border: 1px #93dee5 solid;
color: #60b1b8;
color: #72c1c8;
vertical-align: middle;
cursor: pointer;
}
.toolbar .btn:hover {
border-color: #61a7ae;
color: #51a1a8;
}
.publish-dropdown {
position: absolute;
top: 62px;
right: 110px;
z-index: 1001;
background: white;
width: 280px;
min-height: 60px;
border: 1px solid #dbdbdb;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 0 9px rgba(0,0,0,0.07);
}
.publish-dropdown .arrow {
clip: rect(0 14px 14px -4px);
transform: rotate(45deg);
margin-top: -7px;
position: absolute;
right: 20px;
}
.publish-dropdown .arrow::after {
content: '';
height: 16px;
width: 16px;
background: white;
display: block;
border: #dbdbdb 1px solid;
}
.hidden {
display: none;
}
/* ************************************** */
/* App Cache */
#new_version_available {
display: none;
position: fixed;
z-index: 1000;
bottom: 0;
left: 0;
right: 0;
background: rgba(246,206,217,0.3);
}
#new_version_available .inner {
padding: 10px;
width: 600px;
margin: 0 auto;
text-align: center;
font-weight: bold;
color: #cf224f;
font-size: 14px;
font-family: sans-serif;
}
/* ************************************** */
/* Editor CSS */

12
views/editor.php

@ -47,17 +47,27 @@
<span class="item text"><span id="draft-status">Draft</span></span>
</div>
<div class="toolbar-right">
<button class="btn" id="publish_btn">Publish</button>
<button class="btn" id="publish_btn"><span>Publish</span> <i class="fa fa-caret-down"></i></button>
<button class="btn" id="new_btn">New</button>
</div>
<div class="clear"></div>
</div>
<div class="publish-dropdown hidden">
<div class="arrow"></div>
</div>
<div class="container">
<input id="post-name" type="text" value="" placeholder="Title">
<div id="content" class="editable"><p class="placeholder">Write something nice...</p></div>
</div>
<div id="new_version_available">
<div class="inner">
There is a new version available! Refresh to load the new version.
</div>
</div>
<script src="/editor/editor.js"></script>
</body>
Loading…
Cancel
Save