Browse Source
Move Sync prompt into the extension
On OS X, the confirm dialog appearing would cause the extension to lose focus and close. This fixes that.develop
Matt Baer
7 years ago
2 changed files with 49 additions and 17 deletions
Split View
Diff Options
-
+27 -7popup.html
-
+22 -10popup.js
+ 27
- 7
popup.html
View File
| @@ -3,7 +3,7 @@ | |||
| <head> | |||
| <title>Write.as</title> | |||
| <style> | |||
| body, input[type=submit], label[for=norm], textarea.norm { | |||
| body, input[type=submit], button, label[for=norm], textarea.norm { | |||
| font-family: Lora, serif; | |||
| } | |||
| #url, #result-holder, label[for=sans], textarea.sans { | |||
| @@ -32,7 +32,7 @@ | |||
| input { | |||
| padding: 0.5em; | |||
| } | |||
| input[type=submit] { | |||
| input[type=submit], button { | |||
| border: 1px solid rgb(114, 120, 191); | |||
| background: rgb(114, 120, 191); | |||
| color: white; | |||
| @@ -43,9 +43,19 @@ | |||
| transition: all .2s ease-out; | |||
| border-radius: .25em; | |||
| } | |||
| input[type=submit]:hover { | |||
| button.secondary { | |||
| background: #aaa; | |||
| border: 1px solid #aaa; | |||
| } | |||
| #buttons { | |||
| text-align: right; | |||
| } | |||
| input[type=submit]:hover, button.primary:hover { | |||
| background-color: #7d82c4; | |||
| } | |||
| button.secondary:hover { | |||
| background-color: #afafaf; | |||
| } | |||
| input[type=submit].disabled, input[type=submit].disabled:hover { | |||
| background: #ddd; | |||
| color: #999; | |||
| @@ -54,7 +64,7 @@ | |||
| #publish-holder, #result-holder { | |||
| text-align: right; | |||
| } | |||
| #result-holder, #account-tools { | |||
| body.popout a#popout, #result-holder, #account-tools, #modal { | |||
| display: none; | |||
| } | |||
| #url { | |||
| @@ -105,9 +115,6 @@ | |||
| a#popout img { | |||
| vertical-align: middle; | |||
| } | |||
| body.popout a#popout { | |||
| display: none; | |||
| } | |||
| #username { | |||
| font-weight: bold; | |||
| } | |||
| @@ -117,6 +124,13 @@ | |||
| font-style: italic; | |||
| text-decoration: none; | |||
| } | |||
| #modal { | |||
| position: absolute; | |||
| top: 0; | |||
| background: white; | |||
| padding: 0.5em 2em 2em; | |||
| border-bottom: 1px solid #dfdfdf; | |||
| } | |||
| </style> | |||
| <script src="H.js"></script> | |||
| @@ -127,6 +141,12 @@ | |||
| <div id="account-tools"> | |||
| Writing as <span id="username">write.as</span>. <a id="sync" href="#">Sync...</a> | |||
| </div> | |||
| <div style="position: relative"> | |||
| <div id="modal"> | |||
| <div id="modal-body"></div> | |||
| <div id="buttons"><button class="secondary">Cancel</button> <button class="primary">Sync</button></div> | |||
| </div> | |||
| </div> | |||
| <textarea id="content" placeholder="Write..."></textarea> | |||
| <div id="result-holder"> | |||
| <input id="url" type="url" readonly /> | |||
+ 22
- 10
popup.js
View File
| @@ -76,6 +76,8 @@ document.addEventListener('DOMContentLoaded', function() { | |||
| $content = document.getElementById("content"); | |||
| $publish = document.getElementById("publish"); | |||
| $url = document.getElementById("url"); | |||
| var $sync = document.getElementById('sync'); | |||
| var $modal = document.getElementById('modal'); | |||
| var fontRadios = document.postForm.font; | |||
| var isPopout = window.location.search.substring(1) == "popout"; | |||
| @@ -116,19 +118,29 @@ document.addEventListener('DOMContentLoaded', function() { | |||
| }); | |||
| }); | |||
| document.getElementById('sync').addEventListener('click', function(e) { | |||
| document.querySelector('#modal .secondary').addEventListener('click', function(e) { | |||
| e.preventDefault(); | |||
| $modal.style.display = 'none'; | |||
| }); | |||
| $sync.addEventListener('click', function(e) { | |||
| e.preventDefault(); | |||
| var posts = JSON.parse(H.get('posts', '[]')); | |||
| var p = "There "; | |||
| p += ((posts.length==1?'is ':'are ') + posts.length + " post" + (posts.length==1?'':'s')); | |||
| var thePosts = posts.length == 1 ? 'it' : 'them'; | |||
| p += " saved on this computer.\n\nSyncing "+thePosts+" to your account gives you access to "+thePosts+" from anywhere. Sync now?"; | |||
| if (!confirm(p)) { | |||
| if (posts.length == 0) { | |||
| return; | |||
| } | |||
| var p = "<p>There "; | |||
| p += ((posts.length==1?'is':'are') + ' <strong>' + posts.length + " post" + (posts.length==1?'':'s')); | |||
| var thePosts = posts.length == 1 ? 'it' : 'them'; | |||
| p += "</strong> saved on this computer.</p><p>Syncing "+thePosts+" to your account will give you access to "+thePosts+" from anywhere. Sync now?</p>"; | |||
| $modal.style.display = 'block'; | |||
| document.getElementById('modal-body').innerHTML = p; | |||
| }); | |||
| document.querySelector('#modal .primary').addEventListener('click', function(e) { | |||
| e.preventDefault(); | |||
| $modal.style.display = 'none'; | |||
| var $sync = this; | |||
| var posts = JSON.parse(H.get('posts', '[]')); | |||
| $sync.innerText = "Syncing now..."; | |||
| $sync.className = 'disabled'; | |||
| @@ -234,9 +246,9 @@ document.addEventListener('DOMContentLoaded', function() { | |||
| $accTools.style.display = 'block'; | |||
| var posts = JSON.parse(H.get('posts', '[]')); | |||
| if (posts.length > 0) { | |||
| document.getElementById('sync').style.display = 'inline'; | |||
| $sync.style.display = 'inline'; | |||
| } else { | |||
| document.getElementById('sync').style.display = 'none'; | |||
| $sync.style.display = 'none'; | |||
| } | |||
| //document.getElementById("sync-count").innerText = posts.length + " post" + (posts.length==1?'':'s'); | |||
| document.getElementById("username").innerText = data.username; | |||