From: Seth Woodworth <seth@sethish.com>
Date: Thu, 21 Mar 2013 18:15:02 +0000 (-0400)
Subject: updating more js functionality for adding notes
X-Git-Tag: release-20150131~474^2~7
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=cdacf9889f1d38edefd1d1f3d6813b6e19e92d6c;p=oweals%2Fkarmaworld.git

updating more js functionality for adding notes
---

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index e322658..c343f48 100644
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -527,6 +527,12 @@ a.activity_target:hover
   /* transition: ease-out ? ? ? */
 }
 
+.disabled
+{
+  color: #afafaf;
+  cursor: auto;
+}
+
 #add-note-form, #add-course
 {
   display: none;
diff --git a/karmaworld/assets/js/lightboxupload.js b/karmaworld/assets/js/lightboxupload.js
index d988e4b..582d30c 100644
--- a/karmaworld/assets/js/lightboxupload.js
+++ b/karmaworld/assets/js/lightboxupload.js
@@ -6,17 +6,17 @@ $(function(){
   // Show the upload lightbox on upload button click
 
   $('#add-note-btn').click(function(){
+    // show the add note form
     // TODO: rewrite to .show the form with a slide transition
     $('#add-note-form').show();
+    // Bring up the file picker automatically
     $('input#file_upload_input').click();
-  });
-
-  // Submit the add-note form
-  $('#save-btn').click(function(){
-    $('#add-note-form').submit();
+    // hide the add a note button
+    $('#add-note-btn').hide()
   });
 
   // Dismiss x click
+  // FIXME:
   $(".lightbox_close").click(function() {
     $(".modal_content").hide();
   });
@@ -25,11 +25,20 @@ $(function(){
       action: ajax_upload_url, // added to page via template var
       element: $('#file-uploader')[0],
       multiple: false,
+
       onComplete: function( id, fileName, responseJSON ) {
         if( responseJSON.success ) {
-          //console.log( "success!" ) ;
+          // activate the form for submitting
           $('form#upload_form').attr('action', responseJSON.note_url);
-          $('input.submit_upload').show();
+          // inform the user of success
+          $('#add-note-status').text('Uploaded');
+          // TODO: activate the save button
+          $('#save-btn').removeClass('disabled');
+          // add a click handler to submit the add-note form
+          $('#save-btn').click(function(){
+            $('form#add-note').submit();
+          });
+
         }
       },
       onAllComplete: function( uploads ) {
@@ -41,8 +50,11 @@ $(function(){
       onProgress: function(id, fileName, loaded, total) {
         console.log("running onProgress " + fileName + " " + loaded);
         console.log(String((100*loaded/total)+'%'));
+        // Animate the progress bar
         $('#progress-fill').animate({
           width: String((100*loaded/total)+'%')}, 5000);
+        // fill out the filename
+        $('#filename').text(fileName);
       },
       params: {
         'csrf_token': csrf_token,
diff --git a/karmaworld/templates/partial/add_note.html b/karmaworld/templates/partial/add_note.html
index 25a1b65..3e93632 100644
--- a/karmaworld/templates/partial/add_note.html
+++ b/karmaworld/templates/partial/add_note.html
@@ -10,7 +10,7 @@
     {% csrf_token %}
     <div class="row">
       <div class="four columns offset-by-one">
-        <legend>Title of Note <small class="form">* Required</small></legend>
+        <legend><span id=add-note-status>Uploading</span> <span id=filename>note</span>...</legend>
         <div class=progress> <div id="progress-fill"></div> </div>
       </div>
       <div class="one columns offset-by-five end">