[dev] [commit] r1013 - templates/common templates/common/bits wwwbase wwwbase/ajax wwwbase/js
automailer at dexonline.ro
automailer at dexonline.ro
Tue Oct 1 18:05:02 EEST 2013
Author: grigoroiualex
Date: Tue Oct 1 18:05:02 2013
New Revision: 1013
Log:
Tags information is now pulled with an AJAX request rather than stored on the displayed page.
Added:
wwwbase/ajax/getImageTags.php
Deleted:
templates/common/bits/tagsInfo.ihtml
Modified:
templates/common/search.ihtml
wwwbase/js/dexGallery.js
wwwbase/search.php
Deleted: templates/common/bits/tagsInfo.ihtml
==============================================================================
--- templates/common/bits/tagsInfo.ihtml Tue Oct 1 18:05:02 2013 (r1012)
+++ /dev/null 00:00:00 1970 (deleted)
@@ -1,10 +0,0 @@
-<div id="tagsInfo">
-{foreach from=$tags item=img}
- <div id="tagsInfo_{$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
Modified: templates/common/search.ihtml
==============================================================================
--- templates/common/search.ihtml Tue Oct 1 16:32:43 2013 (r1012)
+++ templates/common/search.ihtml Tue Oct 1 18:05:02 2013 (r1013)
@@ -194,8 +194,4 @@
</script>
{/literal}
{/if}
-
- {if count($tags)}
- {include file="common/bits/tagsInfo.ihtml" tags=$tags size=$size}
- {/if}
</div>
Added: wwwbase/ajax/getImageTags.php
==============================================================================
--- /dev/null 00:00:00 1970 (empty, because file is newly added)
+++ wwwbase/ajax/getImageTags.php Tue Oct 1 18:05:02 2013 (r1013)
@@ -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);
+?>
Modified: wwwbase/js/dexGallery.js
==============================================================================
--- wwwbase/js/dexGallery.js Tue Oct 1 16:32:43 2013 (r1012)
+++ wwwbase/js/dexGallery.js Tue Oct 1 18:05:02 2013 (r1013)
@@ -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 = $('#tagsInfo_' + 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];
-
- // 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 + ']');
-
- data[0] *= widthScale; data[2] *= widthScale;
- data[1] *= heightScale; data[3] *= heightScale;
- drawTag(canvas, i, data);
+ $.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;
+
+ 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;
+
+ 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');
}
});
}
Modified: wwwbase/search.php
==============================================================================
--- wwwbase/search.php Tue Oct 1 16:32:43 2013 (r1012)
+++ wwwbase/search.php Tue Oct 1 18:05:02 2013 (r1013)
@@ -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);
- }
}
}
}
More information about the Dev
mailing list