- bug fix list of projects

- improving resizing the screenshot
- clean option

background.js

@@ -1,19 +1,20 @@
+var id = 1;
 chrome.browserAction.onClicked.addListener(function(tab) {
-    chrome.tabs.captureVisibleTab(null, function(img) {
-        var screenshotUrl = img;
-        var viewTabUrl = chrome.extension.getURL('pivotate.html');
+    chrome.tabs.captureVisibleTab(null, function(screenshotUrl) {
+        var viewTabUrl = chrome.extension.getURL('pivotate.html?id=' + (id++));
         chrome.tabs.create({url: viewTabUrl}, function(tab) {
             var targetId = tab.id;
             var addSnapshotImageToTab = function(tabId, changedProps) {
                 if (tabId != targetId || changedProps.status != "complete") {
-                    return;
+                        return;
                 }
+
                 chrome.tabs.onUpdated.removeListener(addSnapshotImageToTab);
                 var views = chrome.extension.getViews();
                 for (var i = 0; i < views.length; i++) {
                     var view = views[i];
                     if (view.location.href == viewTabUrl) {
-                        view.pivotate.init(screenshotUrl);
+                        view.pivotate.setScreenShot(screenshotUrl);
                         break;
                     }
                 }

canvas.js

@@ -24,16 +24,17 @@ var ImgCanvas = function(canvas) {
     this.canvas.addEventListener('mouseup',  mouseEvt, false);
 }
 
-
 ImgCanvas.prototype = {
+
     setBackground : function(background) {
 
         var self = this;
 
         if (!background) {
-            return;
+            background = this.canvas.toDataURL("image/png");
         }
 
+        self.background = background;
         var image = new Image();
         image.src = background;
         image.onload = function() {
@@ -42,7 +43,7 @@ ImgCanvas.prototype = {
                 0, 
                 0, 
                 self.canvas.getAttribute("width").replace("px", ""), 
-                self.canvas.getAttribute("height").replace("px", "")
+                self.canvas.getAttribute("width").replace("px", "") * image.height / image.width
             );
         }
     },
@@ -89,5 +90,8 @@ ImgCanvas.prototype = {
     getImg : function() {
         var dataURL = this.canvas.toDataURL("image/png");
         return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
+    },
+    getDataUrl : function() {
+        return this.canvas.toDataURL("image/png");
     }
 }

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Pivotate",
-  "version": "1.1",
+  "version": "1.3",
   "description": "Submit to Pivotal Tracker with screenshot",
   "background": {
     "persistent": false,

pivotate.css

@@ -12,13 +12,21 @@ body {
 }
 
 #set-token {
-    margin-left:220px;
+    margin-left:180px;
     cursor:pointer;
     font-weight: bold;
     color:#222222;
     text-decoration:none;
 }
 
+#clean {
+    margin-left:10px;
+    cursor:pointer;
+    font-weight: bold;
+    color:#222222;
+    text-decoration:none;  
+}
+
 #panel {
     background-color: #F1F2F3;
     position:absolute; 

pivotate.html

@@ -13,6 +13,8 @@ <h1>
                 <span class="name">Pivotate</span>
             </h1>
 
+            <a href="#" id="clean"> Clean</a>
+
             <a href="#" id="set-token"> Set Token</a>
             <form class="form" action="#">
 
@@ -35,11 +37,13 @@ <h1>
                     </ul>
                 </div>
                 <input type="hidden" id="story_type" name="story_type"/>
-                
+
                 <button class="btn" type="button" id="action">
                     <span class="btn-text"> Create Story</span> 
                     <span class="btn-icon-right"><span></span></span>
                 </button>
+
+
             </form>
         </div>
 

pivotate.js

@@ -1,8 +1,20 @@
+window.addEventListener("load", function() {
+
+    var urlParams = {};
+    location.search.slice(1).split("&").forEach(function(param) {
+	current = param.split("=", 2);
+	urlParams[decodeURIComponent(current[0])] = decodeURIComponent(current[1]);
+    });
+
+    pivotate.load(urlParams);
+
+}, false);
+
 var pivotate = {
-    init : function( img ) {
+    load : function(params) {
 
 	var self = this
-      
+
 	var project = document.querySelector( "#project" ),
 	    icons = document.querySelectorAll( '.story .icons > li' ),
 	    canvas = document.querySelector( "#canvas-background" ),
@@ -12,11 +24,11 @@ var pivotate = {
 	    description = document.querySelector("#description");
 
 	canvas.setAttribute( "height",  (window.innerHeight - 125) + "px" );
-	canvas.setAttribute( "width", ( window.innerWidth - 225 ) + "px" );
+	canvas.setAttribute( "width", ( window.innerWidth - 305 ) + "px" );
+
+	self.formatIMG = new ImgCanvas(canvas);
+	self.params = params || {};
 
-	var format = new ImgCanvas(canvas);
-	format.setBackground(img);
-
 	document.querySelector( "#panel" ).setAttribute(
 	    'style',
 	    "width: 300px; height: " + ( window.innerHeight - 22 ) + "px"
@@ -30,6 +42,13 @@ var pivotate = {
 	document.querySelector("#set-token").addEventListener('click', function() {
 	   self.token.form();
 	});
+
+	document.querySelector("#clean").addEventListener('click', function() {
+	    var screenshot = window.sessionStorage.getItem("img-" + self.params.id);
+	    if (screenshot) {
+		self.formatIMG.setBackground(screenshot);
+	    }
+	});
 
 	for ( var i = 0, max = icons.length; i < max; i++ ) {
 	    icons[i].addEventListener( 'click', function() {
@@ -45,7 +64,7 @@ var pivotate = {
 	};
 
        action.addEventListener('click', function() {
-	    
+
 	    if (name.value == "" || description.value == "" || storyType.value == "") {
 		alert('All fields are required');
 		return;
@@ -66,7 +85,7 @@ var pivotate = {
 			storyid : result.childNodes[0].getElementsByTagName("id")[0].textContent,
 			name    : "screen.png",
 			type    : "image/png",
-			content :  atob(format.getImg())
+			content :  atob(self.formatIMG.getImg())
 		    }, {
 			done: function() {
 			    alert("The story has been successfully registered.");
@@ -75,7 +94,11 @@ var pivotate = {
 			fail: function() {
 			    action.className = "btn";
 			    action.setAttribute("disabled", false);
-			    alert("An unexpected error occurred, sorry");
+				if (status == 401) {
+				    self.token.form(null, "enter a valid token");
+				} else {
+				    alert("An unexpected error occurred, sorry");
+				}
 			}
 		    });
 		},
@@ -88,18 +111,38 @@ var pivotate = {
 		}
 	    });
 	});
+
+	var screenshot = window.sessionStorage.getItem("img-" + this.params.id);
+	if (screenshot) {
+	    this.formatIMG.setBackground(screenshot);
+	}
+
+	window.onresize = function() {
+	    var currentImg = self.formatIMG.getDataUrl();
+	    canvas.setAttribute( "height",  (window.innerHeight - 125) + "px" );
+	    canvas.setAttribute( "width", ( window.innerWidth - 305 ) + "px" );
+	    self.formatIMG.setBackground(currentImg);
+	}
     },
 
+    setScreenShot: function(img) {
+	window.sessionStorage.setItem("img-" + this.params.id, img);
+	this.formatIMG.setBackground(img);
+    },
 
     loadProjects: function() {
-	var self = this;
-	var project = document.querySelector( "#project" );
+
+	var self = this,
+	    project = document.querySelector( "#project" );
+
 	this.pivotal.getProjects({
 	    done: function(result) {
-		for ( var i = 0, max = result.childNodes.length; i < max; i++ ) {
+
+		result = result.childNodes[0].getElementsByTagName("project");
+		for ( var i = 0, max = result.length; i < max; i++ ) {
 		    var option = document.createElement('option');
-		    option.text = result.childNodes[i].getElementsByTagName("name")[0].textContent;
-		    option.value = result.childNodes[i].getElementsByTagName("id")[0].textContent;
+		    option.text = result[i].getElementsByTagName("name")[0].textContent;
+		    option.value = result[i].getElementsByTagName("id")[0].textContent;
 		    project.add(
 			option,
 			project.options[project.selectedIndex]
@@ -108,7 +151,10 @@ var pivotate = {
 	    },
 	    fail : function(status, e) {
 		if (status == 401) {
-		    self.token.form(null, "enter a valid token");
+		    self.token.form(function(token) {
+			self.pivotal.setToken(token);
+			self.loadProjects();
+		    }, "enter a valid token");
 		} else {
 		    alert("An unexpected error occurred, sorry");
 		}