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

made a nice looking dropdown menu for the publish button

3 files changed, 95 insertions, 4 deletions

diff --git a/public/editor/editor.js b/public/editor/editor.js
index 17cc24e..a0873d6 100644
--- a/public/editor/editor.js
+++ b/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;
diff --git a/public/editor/style.css b/public/editor/style.css
index 8b0fae6..2f76cdb 100644
--- a/public/editor/style.css
+++ b/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 */
diff --git a/views/editor.php b/views/editor.php
index 1b82ab4..eeb3c53 100644
--- a/views/editor.php
+++ b/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>