[dev] [commit] r1002 - in wwwbase: . js styles

[automailer at dexonline.ro]

Author: grigoroiualex
Date: Sun Sep 22 16:51:22 2013
New Revision: 1002

Log:
Added some comments to the code and also made some minor changes.

Modified:
   wwwbase/js/dexGallery.js
   wwwbase/js/visualTag.js
   wwwbase/search.php
   wwwbase/styles/flex.css

Modified: wwwbase/js/dexGallery.js
==============================================================================
--- wwwbase/js/dexGallery.js	Sun Sep 22 14:57:07 2013	(r1001)
+++ wwwbase/js/dexGallery.js	Sun Sep 22 16:51:22 2013	(r1002)
@@ -12,7 +12,9 @@
   });
 });
 
-/* Once the plugin is loaded, it clones the canvas element and prepares it for display */
+/* Once the plugin is loaded, it clones the canvas element and prepares it for display.
+   The canvas element is overlayed on the element with .cboxPhoto class, and thus it
+   has to have its dimensions. It also adds a button to toggle the tags visibility. */
 function addCanvas() {
   var canvas = $('#prototypeCanvas'), parent = $('#cboxLoadedContent'),
       img = $('.cboxPhoto'), tagsToggle = $('#prototypeTagsToggleButton');
@@ -34,17 +36,32 @@
 
 function drawOnCanvas() {
   var canvas = $('#activeCanvas');
+  // The colorbox plugin title is made up of two parts, separated by a space character:
+  // 1. the unique id of the image from the Visual table
+  // 2. the name of the lexeme corresponding to the image
   var title = $('#cboxTitle').html();
+  // In the tagsInfo div, all the tags corresponding to one image are nested
+  // in a div element whose id is the the unique id of that image in the Visual table.
+  // Thus the title is parsed, the id extracted and the div element with that specific id selected.
   var tags = $('#' + parseInt(title)).children();
-
+  // As we want the title to show the lexeme, the id is removed.
   $('#cboxTitle').html(title.match(/[^\d]+$/));
 
   if(tags.length){
     var data = new Array();
+    // Image information is parsed
     var dim = JSON.parse('[' + tags[0].innerHTML + ']');
+    // and the scales are calculated.
     var widthScale = parseInt(canvas.attr('width')) / dim[0];
     var heightScale = parseInt(canvas.attr('height')) / dim[1];
 
+    // Tags are parsed one by one. One tag information is:
+    // data[0] is x coordinate for tag label and line start (int)
+    // data[1] is y coordinate for tag label and line start (int)
+    // data[2] is x coordinate for line end (int)
+    // data[3] is y coordinate for line end (int)
+    // data[4] is tag label text (string)
+    // data[5] is the lexeme to which to redirect on click (string)
     for(var i = 1; i < tags.length; i++){
       var data = JSON.parse('[' + tags[i].innerHTML + ']');
 

Modified: wwwbase/js/visualTag.js
==============================================================================
--- wwwbase/js/visualTag.js	Sun Sep 22 14:57:07 2013	(r1001)
+++ wwwbase/js/visualTag.js	Sun Sep 22 16:51:22 2013	(r1002)
@@ -10,36 +10,23 @@
     $('#jcrop').Jcrop({
       boxHeight: 500,
       boxWidth: 500,
-      onSelect: showCoords,
-      onChange: showCoords
+      onSelect: setCoords,
+      onChange: setCoords
     }, function() {
       jcrop_api = this;
     });
   };
 
-  /** Shows centre of the selection coordinates */
-  function showCoords(c) {
-    setCoords(c);
+  function setCoords(c) {
+    calculateCentre(c);
 
     $('#x').val(coords.cx);
     $('#y').val(coords.cy);
   };
 
-  function setCoords(c) {
-    var q = new Array();
-    q = calculateCentre(c);
-
-    coords.cx = q[0];
-    coords.cy = q[1];
-  };
-
   function calculateCentre(c) {
-    var centre = new Array();
-
-    centre[0] = Math.round((2 * c.x + c.w) / 2);
-    centre[1] = Math.round((2 * c.y + c.h) / 2);
-
-    return centre;
+    coords.cx = Math.round((2 * c.x + c.w) / 2);
+    coords.cy = Math.round((2 * c.y + c.h) / 2);
   };
 
   /** Clears the actual selection */

Modified: wwwbase/search.php
==============================================================================
--- wwwbase/search.php	Sun Sep 22 14:57:07 2013	(r1001)
+++ wwwbase/search.php	Sun Sep 22 16:51:22 2013	(r1002)
@@ -311,7 +311,7 @@
       if(!empty($line)) {
         $imgTags = array();
 
-        // For every lexeme, it fetches the image and thumb paths from the database
+        // For every lexeme, it fetches images and thumbs paths from the database
         $image = Visual::getImageWww($line->path);
         $thumb = Visual::getThumbWww($line->path);
 

Modified: wwwbase/styles/flex.css
==============================================================================
--- wwwbase/styles/flex.css	Sun Sep 22 14:57:07 2013	(r1001)
+++ wwwbase/styles/flex.css	Sun Sep 22 16:51:22 2013	(r1002)
@@ -381,6 +381,9 @@
   float: left;
   width: 500px;
   height: 500px;
+}
+
+.jcrop-holder {
   border: 1px solid black;
 }