temp endorse reason

recommender/static/css/recommender.css

@@ -165,16 +165,16 @@
 }
 
 .redTxt {
-  color: red;
+  color: #B4053D;
 }
 
-.recommender_vote_arrow_down, .recommender_vote_arrow_up, .resource_edit_button, .flagResource, .s3info_add_button, .deendorse, .resource_add_button, .hide-show, .paginationCell, .backToViewButton, .checkIcon, .resource_ranking_for_deendorsement_button { cursor: pointer; }
+.recommender_vote_arrow_down, .recommender_vote_arrow_up, .resource_edit_button, .flagResource, .s3info_add_button, .deendorse, .resource_add_button, .hide-show, .paginationCell, .backToViewButton, .endorse, .resource_ranking_for_deendorsement_button { cursor: pointer; }
 
 
 .s3info_add_button { float: right; background-color: rgba(0,0,0,0.05); padding: 0.3em 1em 0.3em 1em;}
 .resource_add_button { float: right; background-color: rgba(0,0,0,0.05); padding: 0.3em 1em 0.3em 1em;}
 .resource_edit_button { float: left; }
-.addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle, .s3InfoBlockTitle, .deendorseBlockTitle {
+.addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle, .s3InfoBlockTitle, .deendorseBlockTitle, .endorseBlockTitle {
     margin-bottom: 1em;
 }
 
@@ -191,9 +191,9 @@
 
 .backToViewButton { color: #1d9dd9; float: left; }
 
-.flag_reason_submit, .edit_submit, .add_submit, .deendorse_resource { margin-top: 0.5em; }
+.flag_reason_submit, .edit_submit, .add_submit, .deendorse_resource, .endorse_resource { margin-top: 0.5em; }
 
-.delete_resource, .endorse_resource, .deendorse_resource { margin-top: 0.5em; float:left; }
+.endorse_resource, .deendorse_resource { margin-top: 0.5em; float:left; }
 
 .ui-icon.problematic {
     background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png);
@@ -204,7 +204,7 @@
   margin-left: 0.5em;
   width:100%;
 }
-.in_url, .edit_url, .flag_reason, .deendorse_reason, .aws_access_key, .aws_secret_key, .bucketName, .uploadedFileUrl,.uploadedFileDir {
+.in_url, .edit_url, .flag_reason, .deendorse_reason, .endorse_reason, .aws_access_key, .aws_secret_key, .bucketName, .uploadedFileUrl, .uploadedFileDir {
   height: 25px;
   margin-left: 0.5em;
   width:100%;
@@ -220,7 +220,7 @@
 
 .recommender_vote_score, .recommender_vote_arrow_up, .recommender_vote_arrow_down { color: #948f8f; }
 .recommender_vote_score.upvoting, .recommender_vote_arrow_up.upvoting { color: rgb(69, 194, 10); }
-.recommender_vote_score.downvoting, .recommender_vote_arrow_down.downvoting { color: red; }
+.recommender_vote_score.downvoting, .recommender_vote_arrow_down.downvoting { color: #B4053D; }
 .recommender_vote_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: #948f8f; }
 
 .resource_ranking_for_deendorsement_button:not(.deendorsement_mode) {
@@ -238,9 +238,9 @@
 .resource_ranking_for_deendorsement_button:not(deendorsement_mode):before { content: 'Ordinary '; }
 .resource_ranking_for_deendorsement_button.deendorsement_mode:before { content: 'De-endorsement '; }
 
-.checkIcon:not(.endorsed) { color: #DFD3D3; display: none; }
-.checkIcon.endorsed { color: rgb(69, 194, 10); }
-.checkIcon:before { content: '✔'; }
+.endorse:not(.endorsed) { color: #DFD3D3; display: none; }
+.endorse.endorsed { color: rgb(69, 194, 10); }
+.endorse:before { content: '✔'; }
 .downArrowIcon:before { content: '▼'; }
 .upArrowIcon:before { content: '▲'; }
 .plusIcon:before { content: '+'; }

recommender/static/html/recommender.html

@@ -50,7 +50,7 @@
 			  <div class="recommender_entryId"></div>
 			  <div class="recommender_problematicReason"></div>
 		    </div>
-            <div class="recommender_endorse"><div class="checkIcon"></div></div>
+            <div class="recommender_endorse"><div class="endorse"></div></div>
 			<div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource "></span></div>
 		  </div>
         </div>
@@ -100,6 +100,14 @@
           placeholder="Reason for why this resource should be removed"/><br/>
         <input type="button" value="Deendorse resource" class="deendorse_resource"/>
       </div>
+      <div class="endorseBlock">
+        <div class="endorseBlockTitle">Endorse this resource and give the reason why you do that.</div>
+        <input type="text" 
+          class="endorse_reason" 
+          name="endorse_rationale"
+          placeholder="Reason for why this resource should be endorsed"/><br/>
+        <input type="button" value="Endorse resource" class="endorse_resource"/>
+      </div>
       <div class="flagSourceBlock">
         <div class="flagSourceBlockTitle">Why would you like to flag this resource? The staff will review all flagged resources, and remove inappropriate ones (spam, incorrect, abusive, etc.). Giving a clear reason will help us do this efficiently. </div>
         <input type="text" 

recommender/static/html/resourcebox.html

@@ -12,6 +12,6 @@
 	  <div class="recommender_entryId">${id}</div>
 	  <div class="recommender_problematicReason">${problematicReason}</div>
     </div>
-    <div class="recommender_endorse"><div class="checkIcon ${endorseMode}"></div></div>
+    <div class="recommender_endorse"><div class="endorse ${endorseMode}"></div></div>
 	<div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource ${isProblematic}"></span></div>
   </div>

recommender/static/js/src/recommender.js

@@ -128,6 +128,7 @@ function RecommenderXBlock(runtime, element) {
 		$('.editSourceBlock', element).hide();
 		$('.recommender_add', element).hide();
 		$('.deendorseBlock', element).hide();
+        $('.endorseBlock', element).hide();
         $('.s3InfoBlock', element).hide();
 		
 		if ($('.recommender_resource', element).length == 0) {
@@ -287,7 +288,7 @@ function RecommenderXBlock(runtime, element) {
 					$(newDiv).find('.recommender_entryId').text(result['id']);
 					$(newDiv).find('.recommender_problematicReason').text('');
 					$(newDiv).find('.flagResource').removeClass('problematic');
-                    $(newDiv).find('.checkIcon').removeClass('endorsed');
+                    $(newDiv).find('.endorse').removeClass('endorsed');
 					bindEvent(newDiv);
 					if (is_user_staff) { addFunctionsForStaffPerResource(newDiv); }
 
@@ -914,12 +915,37 @@ function RecommenderXBlock(runtime, element) {
      */
     function addFunctionsForStaffPerResource(ele) {
         /* Add event for endorsement */
-        $(ele).find('.checkIcon').show();
-        $(ele).find('.checkIcon').click(function() {
+        $(ele).find('.endorse').show();
+        $(ele).find('.endorse').click(function() {
             var data = {};
 			data['id'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
             
-			/* Endorse a selected resource (or undo it) */
+            if ($(ele).hasClass('endorsed')) {
+                $('.endorseBlock', element).show();
+                $('.recommender_content', element).hide();
+                $('.recommender_modify', element).show();
+                $('.recommender_modify_title', element).text('Endorse Resource');
+                $('.endorseBlock', element).find('input[type="text"]').val('');
+                $('.endorse_resource', element).unbind();
+                /* Endorse a selected resource */
+                $('.endorse_resource', element).click(function() {
+                    data['reason'] = $('.endorse_reason', element).val();
+                    /* Endorse a selected resource */
+                    endorse(data);
+                }
+            }
+            else {
+                /* Undo the endorsement of a selected resource */
+                endorse(data)
+            }
+        });
+        
+        /* Handle the student view and ajax calling for endorsement, given the provided data */
+        function endorse(data) {
+            event_log = data;
+            if ('reason' in event_log) { event_log['status'] = 'Endorse resource'; }
+            else { event_log['status'] = 'Un-endorse resource'; }
+            Logger.log('endorseResource.click.event', event_log);
             $.ajax({
                 type: "POST",
                 url: endorseResourceUrl,
@@ -928,13 +954,18 @@ function RecommenderXBlock(runtime, element) {
                     if (result['Success']) {
                         var endorsedResourceIdx = findResourceDiv(result['id']);
                         var endorsedDiv = $('.recommender_resource:eq(' + endorsedResourceIdx.toString() + ')', element);
-                        endorsedDiv.find('.checkIcon').toggleClass('endorsed').show();
+                        endorsedDiv.find('.endorse').toggleClass('endorsed').show();
                         addTooltipPerResource(endorsedDiv);
+                        if ('reason' in result) {
+                            $(endorsedDiv).find('.recommender_endorse_reason').text(result['reason']);
+                            backToView();
+                        }
+                        else { $(endorsedDiv).find('.recommender_endorse_reason').text(''); }
                     }
                     else { alert(result['error']); }
                 }
-			});
-        });
+            });
+        }
         
 		/* Add the button for entering deendorse mode */
 		if ($(ele).find('.deendorse').length == 0) {