[dev] Code review ajax request pentru etichete
Grigoroiu Marian Alexandru
grigoroiualexandru at gmail.com
Tue Sep 24 09:00:02 EEST 2013
Salutare,
Am încercat o implementare diferită pentru preluarea informațiilor despre
etichete din baza de date. Momentan, toate informațiile le preiau în
search.php și le pun pe pagina de căutare sub forma:
*<div id="tagsInfo"> (display: none)*
* <div id="idImagine">*
* <p>lățime, înălțime</p>*
* <p>textX, textY, imgX, imgY>*
*..........*
La pornirea colorboxului citesc informațiile din divul corespunzător și
afișez etichetele.
Acum am eliminat informațiile suplimentare de pe pagină și la fiecare
afișare fac un request pentru informațiile imaginii corespunzătoare.
--
Toate cele bune,
Grigoroiu Marian Alexandru
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://list.dexonline.ro/pipermail/dev/attachments/20130924/ace9cdff/attachment.html>
-------------- next part --------------
Index: templates/common/bits/tagsInfo.ihtml
===================================================================
--- templates/common/bits/tagsInfo.ihtml (revision 1004)
+++ templates/common/bits/tagsInfo.ihtml (working copy)
@@ -1,10 +0,0 @@
-<div id="tagsInfo">
-{foreach from=$tags item=img}
- <div id="{$img.id}">
- <p>{$img.width}, {$img.height}</p>
- {foreach from=$img.tags item=tag}
- <p>{$tag.textX}, {$tag.textY}, {$tag.imgX}, {$tag.imgY}, "{$tag.label}", "{$tag.lexeme}"</p>
- {/foreach}
- </div>
-{/foreach}
-</div>
\ No newline at end of file
Index: templates/common/search.ihtml
===================================================================
--- templates/common/search.ihtml (revision 1004)
+++ templates/common/search.ihtml (working copy)
@@ -194,8 +194,4 @@
</script>
{/literal}
{/if}
-
- {if count($tags)}
- {include file="common/bits/tagsInfo.ihtml" tags=$tags size=$size}
- {/if}
</div>
Index: wwwbase/search.php
===================================================================
--- wwwbase/search.php (revision 1004)
+++ wwwbase/search.php (working copy)
@@ -318,31 +318,6 @@
// and stores them in the $images array.
$images[] = array('img' => $image, 'tmb' => $thumb, 'name' => $lexeme->formUtf8General,
'id' => $line->id);
-
- if($line->revised) {
- // Also stores the size for every image, useful for scaling.
- $size[] = array('width' => $line->width, 'height' => $line->height);
-
- // Checks if each image, respectively, has tags.
- $rows = VisualTag::get_all_by_imageId($line->id);
-
- if(!empty($rows)) {
- foreach($rows as $row) {
- // If so, each tag information is stored as an entry in the $tagInfo array
- $word = Lexem::get_by_id($row->lexemeId);
- $tagInfo = array('label' => $row->label, 'textX' => $row->textXCoord,
- 'textY' => $row->textYCoord, 'imgX' => $row->imgXCoord,
- 'imgY' => $row->imgYCoord,
- 'lexeme' => !empty($word) ? $word->formUtf8General : '');
- // and every tag represents an entry in the $imgTags array.
- $imgTags[] = $tagInfo;
- }
- }
-
- // Finally, all the tags for one image are stored as an entry in the $allTags array
- $allTags[] = array('tags' => $imgTags, 'width' => $line->width, 'height' => $line->height,
- 'id' => $line->id);
- }
}
}
}
Index: wwwbase/js/dexGallery.js
===================================================================
--- wwwbase/js/dexGallery.js (revision 1004)
+++ wwwbase/js/dexGallery.js (working copy)
@@ -36,43 +36,34 @@
function drawOnCanvas() {
var canvas = $('#activeCanvas');
- // The colorbox plugin title is made up of two parts, separated by a space character:
+ // The colorbox plugin title is made up of two parts:
// 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]+$/));
+ var imageId = parseInt(title);
- 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];
+ $.ajax({
+ type: 'POST',
+ url: wwwRoot + 'ajax/getImageTags.php',
+ data: {imageId: imageId}
+ }).done(function(data) {
+ data = JSON.parse(data);
+ var widthScale = parseInt(canvas.attr('width')) / data.dims.width,
+ heightScale = parseInt(canvas.attr('height')) / data.dims.height;
- // 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 + ']');
+ for(var i = 0; i < data.tags.length; i++) {
+ data.tags[i].textX *= widthScale;
+ data.tags[i].imgX *= widthScale;
+ data.tags[i].textY *= heightScale;
+ data.tags[i].imgY *= heightScale;
- data[0] *= widthScale; data[2] *= widthScale;
- data[1] *= heightScale; data[3] *= heightScale;
- drawTag(canvas, i, data);
+ drawTag(canvas, i, data.tags[i]);
}
+ });
// Removes only the dummy text layer, used only for getting dimensions
canvas.removeLayerGroup('DummyText');
- }
}
function drawTag(canvas, tagNo, tagData) {
@@ -89,9 +80,9 @@
strokeWidth: 2,
fontSize: 12,
fontFamily: 'Arial',
- text: tagData[4],
+ text: tagData.label,
maxWidth: tagNameMaxWidth,
- x: tagData[0], y: tagData[1],
+ x: tagData.textX, y: tagData.textY
})
// Draws the line between the two points
@@ -101,8 +92,8 @@
groups: ['Tags'],
strokeStyle: '#000',
strokeWidth: 1,
- x1: tagData[0], y1: tagData[1],
- x2: tagData[2], y2: tagData[3]
+ x1: tagData.textX, y1: tagData.textY,
+ x2: tagData.imgX, y2: tagData.imgY
})
// Draws a rectangle that has the dimensions of the dummy text + tagNamePadding
@@ -112,7 +103,7 @@
groups: ['TagsBackground'],
fromCenter: true,
fillStyle: '#fff',
- x: tagData[0], y: tagData[1],
+ x: tagData.textX, y: tagData.textY,
width: canvas.measureText('dummyText' + tagNo).width + tagNamePadding,
height: canvas.measureText('dummyText' + tagNo).height + tagNamePadding
})
@@ -127,14 +118,14 @@
strokeWidth: 2,
fontSize: 12,
fontFamily: 'Arial',
- text: tagData[4],
+ text: tagData.label,
maxWidth: tagNameMaxWidth,
- x: tagData[0], y: tagData[1],
+ x: tagData.textX, y: tagData.textY,
cursors: {
mouseover: 'pointer'
},
click: function() {
- window.open('http://www.dexonline.ro/definitie/' + tagData[5], '_self');
+ window.open('http://www.dexonline.ro/definitie/' + tagData.lexeme, '_self');
}
});
}
Index: wwwbase/ajax/getImageTags.php
===================================================================
--- wwwbase/ajax/getImageTags.php (revision 0)
+++ wwwbase/ajax/getImageTags.php (revision 0)
@@ -0,0 +1,30 @@
+<?php
+include('../../phplib/util.php');
+
+$resp = array();
+$tags = array();
+$dims = array();
+
+$imageId = util_getRequestParameter('imageId');
+
+$line = Visual::get_by_id($imageId);
+
+if(!empty($line)) {
+ $dims = array('width' => (int)$line->width, 'height' => (int)$line->height);
+}
+
+$lines = VisualTag::get_all_by_imageId($imageId);
+
+if(!empty($lines)) {
+ foreach($lines as $line) {
+ $row = Lexem::get_by_id($line->lexemeId);
+ $tags[] = array('textX' => (int)$line->textXCoord, 'textY' => (int)$line->textYCoord,
+ 'imgX' => (int)$line->imgXCoord, 'imgY' => (int)$line->imgYCoord,
+ 'label' => $line->label, 'lexeme' => $row->formUtf8General);
+ }
+}
+
+$resp = array('dims' => $dims, 'tags' => $tags);
+
+echo json_encode($resp);
+?>
More information about the Dev
mailing list