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.
hace 7 años · e0056a73b4
--- a/popup.html
+++ b/popup.html
@@ -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 />
--- a/popup.js
+++ b/popup.js
@@ -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;