Added edit-toggle to profile

2 files changed, 78 insertions, 62 deletions

diff --git a/static/js/pichat.js b/static/js/pichat.js
index 071e8e6..d348d93 100755
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -240,18 +240,12 @@ function initChat() {
     setTimeout(refresh, 1000);
 }
 
-function initProfile() {
-    jQuery(".linkify").each(function() {
-        var text = jQuery(this).text();
-        jQuery(this).html(linkify(text));
-    });
-
-
-    $('.logged-dump .content').each(function() {
-        var t = $(this);
-        t.html(buildMsgContent(t.text()));
-    });    
+function makePlainText() {
+    var j = $(this);
+    j.text(j.text());
+}
 
+function enableProfileEdit() {
     var onSubmit = function(attr, newVal, oldVal) {
         newVal = $.trim(newVal);
         if (newVal == oldVal) { return oldVal };
@@ -273,22 +267,43 @@ function initProfile() {
         return escapeHtml(newVal);
     };
 
+    $('#avatar-editing').show();
+
     var avatarOpts = { 'default_text': 'Enter here!',
                        'callback': onSubmit,
                        'field_type': 'text',
                        'callbackShowErrors': false };
     $('#avatar.editable').editInPlace(avatarOpts);
 
+    if ($('#upload').length > 0) {
+        setupUploadAvatar('upload');
+    }
+
     var textareaOpts = { 'default_text': 'Enter here!',
                          'callback': onSubmit,
                          'field_type': 'textarea',
-                         'callbackShowErrors': false };
-    $('#contact.editable, #bio.editable').editInPlace(textareaOpts);
+                         'callbackShowErrors': false };    
+    $('#contact, #bio')
+        .addClass('editable')
+        .editInPlace(textareaOpts)
+        .each(makePlainText);
 
-    if ($('#upload').length > 0) {
-        setupUploadAvatar('upload');
-    }
+    var resetPage = function() { location.reload() };
+    $('#edit-toggle a').text('--> Done editing <--').click(resetPage);
+}
 
+function initProfile() {
+    $(".linkify").each(function() {
+        var text = jQuery(this).text();
+        jQuery(this).html(linkify(text));
+    });    
+
+    $('#edit-toggle').click(enableProfileEdit);
+
+    $('.logged-dump .content').each(function() {
+        var t = $(this);
+        t.html(buildMsgContent(t.text()));
+    });
 };
 
 function initLog() {
@@ -331,9 +346,9 @@ function setupUploadAvatar(elementId) {
     var onComplete = function(file, resp) {
         $('#spinner').hide();
         if (resp == 'INVALID_REQUEST') {
-            location.href = location.href;
+            location.reload();
         } else if (resp == 'NOT_LOGGED_IN') {
-            location.href = location.href;
+            location.reload();
         } else if (resp == 'INVALID_IMAGE') {
             alert("Sorry, dump.fm can't deal with your image. Pick another :(");
             return;
diff --git a/template/profile.st b/template/profile.st
index b5d3f38..52b745c 100755
--- a/template/profile.st
+++ b/template/profile.st
@@ -34,59 +34,60 @@
             $dumps:{ d | $logged_dump(dump=d)$ }$
             
             
-        <div id="profile">
-
-          <h2>$nick$</h2>
-
-          $if(avatar)$
-          <img id="avatarPic" src="$avatar$" width="150px"/>
-          $else$
-          <b id="avatarPic"><img src="/static/noinfo.png"></b>
-          $endif$
-
-          $if(is_home)$
-          <div id="avatar" class="editable">$avatar$</div>
-          <input id="upload" value="Upload" type="submit">
-          <img id="spinner" src="/static/spinner.gif" style="display: none" />
-          $endif$
-
-
-	$if(is_home)$
-	<h3>contact info</h3>
-	<div id="contact" class="editable">$contact$</div>
-       $elseif(contact)$
-	<h3>contact info</h3>
-	<div id="contact" class="linkify">$contact$</div>
-	$else$
-	<br><br>
-	<div><img src="/static/noinfo.png"></div>
-	$endif$
+          <div id="profile">
 
+            <h2>$nick$</h2>
+            $if(avatar)$
+            <img id="avatarPic" src="$avatar$" width="150px"/>
+            $else$
+            <b id="avatarPic"><img src="/static/noinfo.png"></b>
+            $endif$
+            
+            $if(is_home)$
+            <div id="avatar-editing" style="display: none">
+              <div id="avatar" class="editable">$avatar$</div>
+              <input id="upload" value="Upload" type="submit">
+              <img id="spinner" src="/static/spinner.gif" style="display: none" />
+            </div>
+            $endif$
 
-	<br>
+            $endif$
+            
+	    <h3>contact info</h3>
+            $if(contact)$
+	    <div id="contact" class="linkify">$contact$</div>
+	    $else$
+	    <br><br>
+	    <div><img src="/static/noinfo.png"></div>
+	    $endif$            
+	    <br>
+            
+	    <h3>bio</h3>
+            $if(bio)$
+	    <div id="bio" class="linkify">$bio$</div>
+	    $else$
+	    <div><img src="/static/noinfo.png"></div>
+	    $endif$
 
-	$if(is_home)$
-	<h3>bio</h3>
-	<div id="bio" class="editable">$bio$</div>
-       $elseif(bio)$
-	<h3>bio</h3>
-	<div id="bio" class="linkify">$bio$</div>
-	$else$
-	<div><img src="/static/noinfo.png"></div>
-	$endif$
+            $if(is_home)$
+            <br>
+            <div id="edit-toggle"><a href="#">--> Edit your information <--</a></div>
+            $endif$
 
 
-          <br>
-          <div id="date">
-            <div type="text" id="datepicker"></div></div>
-	</div>
+            <br>
+            <div id="date">
+              <div type="text" id="datepicker"></div></div>
+	  </div>
 	  $else$
 	  <h3>&nbsp;</h3>
 	  <h3>&nbsp;</h3>
-	  <h3>&nbsp;</h3>	  <h3>&nbsp;</h3>
 	  <h3>&nbsp;</h3>
-	  <h3>&nbsp;</h3><div id="newuser">
-<h2>&#x263A;&#x270C; Welcome to dump.fm &#x270C;&#x263A;</h2>
+          <h3>&nbsp;</h3>
+	  <h3>&nbsp;</h3>
+	  <h3>&nbsp;</h3>
+          <div id="newuser">
+            <h2>&#x263A;&#x270C; Welcome to dump.fm &#x270C;&#x263A;</h2>
 
 <br><br>