adds removing of single areas

montera34 · Jul 4, 2018 · 3110cdb · 3110cdb
1 parent 7d6034b
commit 3110cdb
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 26 deletions.
diff --git a/app/assets/images/icon-close.png b/app/assets/images/icon-close.png
diff --git a/app/assets/javascripts/coding.js b/app/assets/javascripts/coding.js
@@ -1,7 +1,7 @@
 $(document).ready(function () {
     // initializing the image slider "carousel" plugin
     carousel = $('.carousel').carousel();
-    
+
     // checks if the user is owner, if so, it will initialize the imgAreaSelect plugin which is used for highlighting
     if (pageData.allowedToCode) {
         // initializing imgAreaSelect plugin for the current active (displayed image)
@@ -15,22 +15,22 @@ $(document).ready(function () {
     $("#newspaper_name").text($("#images_section div.active img").attr("media")).attr("href",media_url);
     $("#original_image_url").text("Link to original image").attr("href",source_url);
     $("#source_of_image").attr("value",$("#images_section div.active img").attr('url')).tooltip({placement:'bottom'})
-    
+
     // attaching a callback for the slide event on the carousel, so it will clear all the highlighted areas when the user slide
     // "This event fires immediately when the slide instance method is invoked." from bootstrap documentation
     carousel.on('slide',function () {
         // reset the highlighted areas values
         clearHighlightedAreas();
     });
-    
+
     //hides alert message "first image of this thread". Prevents from appearing in the first image that is being coded.
     $('#youHaveLoopedAlert').hide();
 
     // "This event is fired when the carousel has completed its slide transition." from bootstrap documentation
     carousel.on('slid',function(){
         // set the current image to the current active(displayed) image in the carousel
         var current_img = $("#images_section div.active img")
-        
+
         renderHighlightedAreas();
 
         // after we slide for the next image, we normally initialize the imgAreaSelect for the new image, but before that, we also check if the user have a premonition
@@ -74,16 +74,16 @@ $(document).ready(function () {
         setCodeOnHighlightedArea(pageData.currentHighlightedArea);
     });
 
-    // it will set the highlighted areas to zero 
+    // it will set the highlighted areas to zero
     $(".clear_highlighting").click(function () {
         HighlightedAreas.removeAllForImage(getCurrentImageId());
         renderHighlightedAreas();
         progressBarPercentage();
-    })  
+    });
 
     // this used to for "nothing to code here"
     $(".skip_coding").click(markAsNothingToCode)
-    
+
     // render the highlighted areas after loading all the images
     window.onload = function() {
         renderHighlightedAreas();
@@ -98,6 +98,16 @@ $(document).ready(function () {
 
 });
 
+function addCloseAreaBehaviors(){
+    if (pageData.allowedToCode) {
+        $(".ha-close-icon").on("click",function() {
+            ha_id = $(this).parent('div').attr("id");
+            $('#' + ha_id).hide();
+            HighlightedAreas.removeOne(ha_id);
+        });
+    }
+}
+
 function setMissingImageInfoFromImg(imgElem){
     if(imgElem.attr('data-missing')=='true' || imgElem.attr('src')=="/assets/404.jpg"){
         $('#missing_image_id').val(imgElem.attr('data-id'));
@@ -107,7 +117,7 @@ function setMissingImageInfoFromImg(imgElem){
     }
 }
 
-function markAsNothingToCode(){ 
+function markAsNothingToCode(){
     var current_img = getCurrentImage();
     // Clear existing areas
     HighlightedAreas.removeAllForImage(getCurrentImageId());
@@ -175,6 +185,7 @@ function renderHighlightedAreas () {
         }
     }
     renderNothingToCode();
+    addCloseAreaBehaviors();
 }
 
 // API for tracking modified status
@@ -199,7 +210,7 @@ function nothingToCode (img_id) {
 }
 function hasNothingToCode (img_id) {
     var nothing_to_code = $('[name="nothing_to_code_' + img_id + '"]');
-    return (nothing_to_code.val() == '1');    
+    return (nothing_to_code.val() == '1');
 }
 
 function clearHighlightedAreas () {
@@ -216,6 +227,12 @@ function renderHighlightedArea(ha) {
     var ha_elt = $('#high_area_template').clone();
     var icon = $('<div class="user-id"><img class="avatar-icon" src="http://gravatar.com/avatar/' + ha.hash + '?s=20&d=identicon"/> <span class="ha-user-name">' +  ha.username + '</span></div>');
     icon.appendTo(ha_elt);
+
+    if (pageData.allowedToCode) {
+        var close_icon = $('<div id="close_' + ha.cssid + '" class="ha-close-icon"><img id="close_img_' + ha.cssid + '" src="/assets/icon-close.png" title="Remove area" alt="Remove area icon"/></div>');
+        close_icon.appendTo(ha_elt);
+    }
+
     ha_elt.attr('id', 'ha_' + ha.cssid);
     ha_elt.addClass('clone');
     $('#high_area_template').after(ha_elt);
@@ -286,12 +303,12 @@ function highlighting_done() {
     currentImgSelectArea.cancelSelection()
 };
 
-// calculate the percentage of progress bar 
+// calculate the percentage of progress bar
 function progressBarPercentage () {
     // set the total number of images
     $("#total").text( pageData.totalImageCount );
     var coded_count = 0;
-    
+
     // Go through each image div
     $("#images_section div.item").each(function () {
         img_id = $(this).find('img').attr('name');

diff --git a/app/assets/javascripts/highlighted_area.js b/app/assets/javascripts/highlighted_area.js
@@ -4,6 +4,7 @@
 // HighlightedAreas.add() - Add a single highlighted area to the current page
 // HighlightedAreas.save() - Save a highlighted area
 // HighlightedAreas.removeAllForImage() - Delete all highlighted areas for the current page
+// HighlightedAreas.removeOne() - Delete a specific highlighted area
 // HighlightedAreas.getByCssId() - Get data for a single highlighted area
 // HighlightedAreas.getAllForImage() - Get a list of highlighted areas
 
@@ -22,6 +23,7 @@ var HighlightedAreas = {
     },
 
     add: function(username, hash, img_id, code_id, selection) {
+
         // Get div containing highlighted area info for the specified image
         var ha_group = $("#ha_group_" + img_id);
         var count = ha_group.children().length;
@@ -74,6 +76,13 @@ var HighlightedAreas = {
         setModified();
     },
 
+    removeOne: function(area_id) {
+        //id for hidden inputs container of the area with id=ha_ha_47 is ha_47
+        ha_removed = HighlightedAreas.getByCssId(area_id.replace("ha_", ''));
+        ha_removed.deleted = '1';
+        HighlightedAreas.save(ha_removed);
+    },
+
     getByCssId: function(cssid) {
         ha = {}
         ha.cssid = cssid;

diff --git a/app/assets/stylesheets/coding.css.scss b/app/assets/stylesheets/coding.css.scss
@@ -33,7 +33,7 @@ h1 {
 }
 
 #aboveImageToolbar {
-  margin-bottom: 10px;  
+  margin-bottom: 10px;
 }
 
 .above-image-alert {
@@ -57,7 +57,7 @@ h1 {
 #topics {
 	padding-left:0px;
 }
-//Carrousel pointer 
+//Carrousel pointer
 #myCarousel{
 	cursor:crosshair;
 }
@@ -96,7 +96,7 @@ ul.thread-coposite-labels {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
-  display: block;  
+  display: block;
 }
 ul.thread-coposite-labels li {
   display: block;
@@ -125,6 +125,13 @@ ul.thread-coposite-labels li.inactive {
 .user-id img:hover + span {
   display: block !important;
 }
+.ha-close-icon {
+  cursor:pointer;
+  width: 20px;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
 #embedded_footer{
 	position: absolute;
 	right: 0px;

diff --git a/app/views/coding/process_images.html.erb b/app/views/coding/process_images.html.erb
@@ -82,11 +82,11 @@
                 <div class="item <%= 'active' if ic==0%> ">
 
                     <% if use_local_images %>
-                        <%= image_tag @images[ic].local_path, 
-                                    :id => "image#{ic+1}", :style => "width: 670px", 
+                        <%= image_tag @images[ic].local_path,
+                                    :id => "image#{ic+1}", :style => "width: 670px",
                                     :media=>@images[ic].media.display_name, :name=>@images[ic].id,
                                     :image_size=>@images[ic].size, :pub_date=>@images[ic].publication_date,
-                                    :url=>@images[ic].source_url, :media_url=>@images[ic].media.url, 
+                                    :url=>@images[ic].source_url, :media_url=>@images[ic].media.url,
                                     'data-id'=>@images[ic].id , 'data-missing'=>@images[ic].missing
                         %>
                     <% else %>
@@ -111,7 +111,7 @@
 
         <div id="high_area_template" style="opacity: 0.5;position: absolute; overflow: hidden; z-index: 0; left: 0px; top: 0px; width: 0px; height: 0px; display: block; " class="high_area"></div>
 
-        
+
 
         <div class="modal hide" id="coding_topics" style="width: 265px;">
           <div class="modal-header">
@@ -165,14 +165,14 @@
             				<%= hidden_field_tag "deleted_ha_#{image.id}_#{index}" %>
         			    </div>
                         <% end %>
-                    </div> 
+                    </div>
                <% end %>
             </div>
             <%= hidden_field_tag "status", "0" %>
             <% if @allowed_to_code %>
                 <div class="form-actions" style="text-align:center">
                     <div class="pull-left btn-group">
-                        <a id="" class="btn  btn-danger clear_highlighting">Clear Highlighted Areas</a>
+                        <a id="" class="btn btn-danger clear_highlighting">Clear Highlighted Areas</a>
                         <a id="" class="btn btn-inverse skip_coding">Nothing to Code</a>
                     </div>
 
@@ -182,7 +182,7 @@
             		            <%= submit_tag "Save and Display", class: "save btn btn-info"%>
             			<a href="/" class="btn ">Cancel</a>
             			</div>
-                        
+
                     </div>
                 </div>
             <% else %>
@@ -193,13 +193,13 @@
             <% end %>
             <br>
         <% end %>
-        
+
     </div>
-    
+
     <div class="alert alert-info span2" style="margin-left: 78px;">
       <a id="close_help" type="button" class="close" data-dismiss="alert">×</a>
       <h3>How coding works</h3>
-      <br>    
+      <br>
       <h4>Steps</h4>
       <ol>
           <li>Drag the mouse over the related article.</li>
@@ -214,7 +214,7 @@
 	<li>If an image is missing, it might be because it was not available when we tried to scrape it. Try the button "try to download it".</li>
       </ul>
     </div>
-    
+
 </div>
 
 <%= hidden_field_tag "help_closed" %>
@@ -259,7 +259,7 @@ $(function() {
 
 // make sure the user doesn't lose their work by making sure they want to close the page
 window.onbeforeunload = function(e,s) {
-    if (isModified()) { 
+    if (isModified()) {
         return "If you leave this page without saving you will lose your work";
     };
 }