Paste by Write.as

9 years ago · f6f7a8dd54
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
 *~
--- a/icon.png
+++ b/icon.png
--- a/icon128.png
+++ b/icon128.png
--- a/icon48.png
+++ b/icon48.png
--- a/manifest.json
+++ b/manifest.json
@@ -0,0 +1,23 @@
 {
  "manifest_version": 2,

  "name": "Paste by Write.as",
  "description": "Effortlessly share text online.",
  "version": "1.0",

  "icons": {
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Publish this"
  },
  "permissions": [
    "activeTab",
    "webRequest",
    "*://*.write.as/",
    "https://fonts.googleapis.com/"
  ]
 }
--- a/popup.html
+++ b/popup.html
@@ -0,0 +1,84 @@
 <!doctype html>
 <html>
  <head>
    <title>Paste by Write.as</title>
    <style>
    body, input[type=submit], label[for=norm], textarea.norm {
        font-family: Lora, serif;
    }
    #url, #result-holder, label[for=sans], textarea.sans {
    	font-family: 'Open Sans', sans-serif;
    }
    body {
        font-size: 100%;
        padding: 0.5em;
    }
    textarea, textarea:focus {
 		border: 1px solid #dfdfdf;
 	}
 	textarea, textarea:focus, input {
 		outline: 0;
 	}
 	textarea {
 		margin-bottom: 0.5em;
 		width: 38em;
 		height: 20em;
 		padding: 1em;
 		font-size: 1em;
 		box-sizing: border-box;
 		resize: none;
 	}
 	input {
 		padding: 0.5em;
 	}
 	input[type=submit] {
 	    border: 1px solid rgb(114, 120, 191);
 	    background: rgb(114, 120, 191);
 	    color: white;
 	    text-align: right;
 	    margin-left: 0.5em;
 	}
 	input[type=submit].disabled {
 		background: #ddd;
 		color: #999;
 		border-color: #eee;
 	}
 	#publish-holder, #result-holder {
 		text-align: right;
 	}
 	#result-holder {
 		display: none;
 	}
 	#url {
 		width: 18em;
 		margin-right: 0.5em;
 	}
 	label[for=mono], label[for=code], textarea.mono, textarea.code {
 		font-family: monospace, monospace;
 		font-size: 1em;
 	}
    </style>

    <script src="popup.js"></script>
  </head>
  <body>
    <form name="postForm" method="post">
      <textarea id="content" placeholder="Paste..."></textarea>
      <div id="result-holder">
        <input id="url" type="url" readonly />
        <a id="url-link" target="_blank">Open</a>
      </div>
      <div id="publish-holder">
        <input type="radio" name="font" value="mono" id="mono" checked="checked" /><label for="mono"> Monospace</label>
        <input type="radio" name="font" value="code" id="code" /><label for="code"> Code</label>
        <input type="radio" name="font" value="sans" id="sans" /><label for="sans"> Sans</label>
        <input type="radio" name="font" value="norm" id="norm" /><label for="norm"> Serif</label>
        <input id="publish" type="submit" value="Publish" />
      </div>
    </form>
    
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  </body>
 </html>

--- a/popup.js
+++ b/popup.js
@@ -0,0 +1,115 @@
 var $content;
 var $publish;
 var $url;

 function publish(content, font) {
 	if (content.trim() == "") {
 		return;
 	}
 	
 	$publish.classList.add('disabled');
 	$publish.value = "Publishing...";
 	$publish.disabled = true;
 		
 	var http = new XMLHttpRequest();
 	var url = "https://write.as/api/";
 	var params = "w=" + encodeURIComponent(content) + "&font=" + font;
 	http.open("POST", url, true);
 	
 	//Send the proper header information along with the request
 	http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 	http.setRequestHeader("User-Agent", "Write.as Chrome Extension v1.0");
 	http.setRequestHeader("Content-length", params.length);
 	http.setRequestHeader("Connection", "close");

 	http.onreadystatechange = function() { //Call a function when the state changes.
 		if (http.readyState == 4) {
 			$publish.classList.remove('disabled');
 			$publish.value = "Publish";
 			$publish.disabled = false;
 			
 			if (http.status == 200) {
 				$publish.style.display = 'none';

 				data = http.responseText.split("\n");
 				// Pull out data parts
 				url = data[0];
 				id = url.substr(url.lastIndexOf("/")+1);
 				editToken = data[1];

 				document.getElementById("publish-holder").style.display = 'none';
 				document.getElementById("result-holder").style.display = 'inline';
 								
 				$url = document.getElementById("url");
 				$url.value = url;
 				var $urlLink = document.getElementById("url-link");
 				$urlLink.href = url;
 				
 				console.log("writeas add " + id + " " + editToken);
 			} else {
 				alert("Failed to post. Please try again.");
 			}
 		}
 	}
 	http.send(params);
 }

 var H = {
 	save: function($el, key) {
 		localStorage.setItem(key, $el.value);
 	},
 	load: function($el, key) {
 		$el.value = localStorage.getItem(key);
 	},
 };

 document.addEventListener('DOMContentLoaded', function() {
 	$content = document.getElementById("content");
 	$publish = document.getElementById("publish");
 	$url = document.getElementById("url");
 	var fontRadios = document.postForm.font;
 	
 	chrome.tabs.executeScript({
 	  code: "window.getSelection().toString();"
 	}, function(selection) {
 	  if (typeof selection !== 'undefined') {
 	    $content.value = selection[0];
 	  }
 	  // load previous draft
 	  if ($content.value == "") {
 	    H.load($content, 'ext-draft');
 	  }
 	});
 	
 	// focus on the paste field
 	$content.focus();
 	
 	// bind publish action
 	$publish.addEventListener('click', function(e) {
 		e.preventDefault();
 		publish($content.value, fontRadios.value);
 	});
 	$content.addEventListener('keydown', function(e){
 		if (e.ctrlKey && e.keyCode == 13) {
 			e.preventDefault();
 			publish($content.value, fontRadios.value);
 		}
 	});
 	
 	// bind URL select-all action
 	$url.addEventListener('focus', function(e) {
 		e.preventDefault();
 		this.select();
 	});
 	
 	// load font setting
 	H.load(fontRadios, 'font');
 	$content.className = fontRadios.value;
 	// bind font changing action
 	for(var i = 0; i < fontRadios.length; i++) {
 		fontRadios[i].onclick = function() {
 		    $content.className = this.value;
 		    H.save(fontRadios, 'font');
 		};
 	}
 });