[dev] [commit] r967 - patches templates/admin wwwbase/admin wwwbase/js wwwbase/styles
Cătălin Frâncu
cata at francu.com
Fri Aug 30 10:42:07 EEST 2013
Arată bine! Mă bucur că te-ai descurcat cu select2.
Singura întrebare este dacă aveai nevoie de ajax/visualTag.php sau dacă
nu puteai folosi ajax/getLexems.php. Acesta din urmă nu îți dă separat
descrierea, deci nu ai mai avea control la formatare (ca să o pui pe
linia a doua cum faci tu). Dar nu știu cât de important este.
Cătălin
On 2013-08-29 19:49, automailer at dexonline.ro wrote:
> Author: grigoroiualex
> Date: Thu Aug 29 19:49:58 2013
> New Revision: 967
>
> Log:
> Added lexemeId field to Visual table so that it will know what image
> to load for a definition. Now, when a new image is uploaded, it asks
> to fill in the matching word and afterwards it shows the tagging page.
> The matching word can be modified at any time.
>
> Added:
> patches/00099.sql
> Modified:
> templates/admin/visualTag.ihtml
> wwwbase/admin/visualTag.php
> wwwbase/js/visualTag.js
> wwwbase/styles/flex.css
>
> Added: patches/00099.sql
> ==============================================================================
> --- /dev/null 00:00:00 1970 (empty, because file is newly added)
> +++ patches/00099.sql Thu Aug 29 19:49:58 2013 (r967)
> @@ -0,0 +1 @@
> +ALTER TABLE Visual ADD lexemeId INT(11) AFTER path;
>
> Modified: templates/admin/visualTag.ihtml
> ==============================================================================
> --- templates/admin/visualTag.ihtml Thu Aug 29 03:18:44 2013 (r966)
> +++ templates/admin/visualTag.ihtml Thu Aug 29 19:49:58 2013 (r967)
> @@ -1,80 +1,106 @@
> <br/>
> {if $anyUntaggedImages}
> - <div class="visualTagCanvas">
> - <img src="{$imagePath}" id="jcrop"/>
> - <label>Coordonatele centrului selecției:
> - <input id="x" type="text" size="4" name="x"/>
> - <input id="y" type="text" size="4" name="y"/>
> - </label>
> - <button type="button" id="clrSel">Șterge selecția</button>
> - <form action="visualTag.php" method="post">
> - <input type="hidden" value="{$imageId}" name="imageId"/>
> - <button type="submit" name="action" value="finishedTagging">
> - Etichetarea este completă
> - </button>
> - </form>
> - <button type="button" id="toggleHelp">Click pentru Ajutor</button>
> + {if !$imgLexemeId}
> + <div class="visualTagCanvas">
> + <img src="{$imagePath}"/>
> + </div>
> <div>
> - <p id="helpText">
> - Pasul 1: Selectează textul ținând apăsat click stânga și
> modificând selecția.
> - Apoi, apasă primul buton „Setează coordonatele”.<br/>
> - Pasul 2: Click pe imagine în locul în care indică săgeata.
> - Apoi, apasă cel de-al doilea buton „Setează coordonatele”.<br/>
> - Pasul 3: Selectează „Da”, dacă lexemul etichetei reprezintă
> imaginea pe
> - de-a-ntregul, altfel selectează „Nu” (lexemul reprezintă un
> subansamblu
> - al imaginii). Dacă lași neselectat, valoarea implicită va fi
> „Da”.<br/>
> - Pasul 4: Click pe butonul „Salvează eticheta” pentru a salva
> adăugirile
> - în baza de date. Dacă ai uitat vreun câmp necompletat, vei fi
> anunțat.<br/>
> - Pasul 5: După ce ai terminat de adăugat toate etichetele, click
> pe
> - butonul „Etichetarea este completă” și se va încărca următoare
> imagine
> - neetichetată din baza de date, dacă aceasta există.
> - </p>
> + <form action="visualTag.php" method="post" onsubmit="return
> validateLexeme()">
> + <label>Cuvântul care descrie cel mai bine imaginea:<br/>
> + <input type="hidden" value="{$imageId}" name="imageId"/>
> + <input id="selectImgLexeme" type="hidden"/>
> + <input id="imgLexemeId" type="text" size="4"
> name="imgLexemeId"/>
> + </label>
> + <button type="submit" name="action"
> value="setImgLexemeId">Salvează</button>
> + </form>
> </div>
> - </div>
> -
> - <div>
> - <form action="visualTag.php" method="post" onsubmit="return
> validateTag()">
> - <label>Id imagine:
> - <input type="text" size="4" value="{$imageId}"
> name="imageId"/>
> - </label><br/>
> -
> - <label>Cuvânt:
> - <input id="selectLexeme" type="hidden"/>
> - </label><br/>
> -
> - <label>Id lexem
> - <input id="lexemeId" type="text" size="10" name="lexemeId"/>
> - </label><br/>
> -
> - <label>Lexem
> - <input id="lexeme" type="text" size="15" name="lexeme"/>
> - </label><br/>
> -
> - <label>Coordonatele centrului etichetei:
> - <input id="xTag" type="text" size="4" name="xTag"/>
> - <input id="yTag" type="text" size="4" name="yTag"/>
> - <button id="setCoordTag" type="button">Setează
> coordonatele</button>
> - </label><br/>
> -
> - <label>Coordonatele zonei etichetate:
> - <input id="xImg" type="text" size="4" name="xImg"/>
> - <input id="yImg" type="text" size="4" name="yImg"/>
> - <button id="setCoordImg" type="button">Setează
> coordonatele</button>
> - </label><br/>
>
> - <button id="saveSel" type="submit" name="action"
> value="save">Salvează eticheta</button>
> - </form>
> -
> - <h3>Etichete salvate</h3>
> - {foreach from=$savedTags item=tag}
> + {else}
> + <div class="visualTagCanvas">
> + <img src="{$imagePath}" id="jcrop"/>
> + <label>Coordonatele centrului selecției:
> + <input id="x" type="text" size="4" name="x"/>
> + <input id="y" type="text" size="4" name="y"/>
> + </label>
> + <button type="button" id="clrSel">Șterge selecția</button>
> <form action="visualTag.php" method="post">
> - <label>{$tag->label}
> - <input type="hidden" name="savedTagId" value="{$tag->id}"/>
> - <button type="submit" name="action" value="delete">Șterge
> eticheta</button>
> - </label>
> + <input type="hidden" value="{$imageId}" name="imageId"/>
> + <button type="submit" name="action" value="finishedTagging">
> + Etichetarea este completă
> + </button>
> </form>
> - {/foreach}
> - </div>
> + <button type="button" id="toggleHelp">Click pentru
> Ajutor</button>
> + <div id="helpText">
> + <p>
> + Pasul 1: Selectează textul ținând apăsat click stânga și
> modificând selecția.
> + Apoi, apasă primul buton „Setează coordonatele”.<br/>
> + Pasul 2: Click pe imagine în locul în care indică săgeata.
> + Apoi, apasă cel de-al doilea buton „Setează
> coordonatele”.<br/>
> + Pasul 3: Selectează „Da”, dacă lexemul etichetei reprezintă
> imaginea pe
> + de-a-ntregul, altfel selectează „Nu” (lexemul reprezintă un
> subansamblu
> + al imaginii). Dacă lași neselectat, valoarea implicită va fi
> „Da”.<br/>
> + Pasul 4: Click pe butonul „Salvează eticheta” pentru a salva
> adăugirile
> + în baza de date. Dacă ai uitat vreun câmp necompletat, vei fi
> anunțat.<br/>
> + Pasul 5: După ce ai terminat de adăugat toate etichetele,
> click pe
> + butonul „Etichetarea este completă” și se va încărca următoare
> imagine
> + neetichetată din baza de date, dacă aceasta există.
> + </p>
> + </div>
> + </div>
> +
> + <div>
> + <form action="visualTag.php" method="post">
> + <input type="hidden" value="{$imageId}" name="imageId"/>
> + <p>
> + Informații imagine<br/><br/>
> + Imaginea este atribuită cuvântului: {$lexemeName}.
> + </p>
> + <button type="submit" name="action"
> value="resetImgLexemeId">Modifică</button>
> + </form>
> + <form action="visualTag.php" method="post" onsubmit="return
> validateTag()">
> + <input type="hidden" value="{$imageId}" name="imageId"/>
> +
> + <p>Informații etichetă</p>
> +
> + <label>Cuvânt:
> + <input id="selectLexeme" type="hidden"/>
> + </label><br/>
> +
> + <label>Id lexem:
> + <input id="lexemeId" type="text" size="10" name="lexemeId"/>
> + </label><br/>
> +
> + <label>Lexem:
> + <input id="lexeme" type="text" size="15" name="lexeme"/>
> + </label><br/>
> +
> + <label>Coordonatele centrului etichetei:
> + <input id="xTag" type="text" size="4" name="xTag"/>
> + <input id="yTag" type="text" size="4" name="yTag"/>
> + <button id="setCoordTag" type="button">Setează
> coordonatele</button>
> + </label><br/>
> +
> + <label>Coordonatele zonei etichetate:
> + <input id="xImg" type="text" size="4" name="xImg"/>
> + <input id="yImg" type="text" size="4" name="yImg"/>
> + <button id="setCoordImg" type="button">Setează
> coordonatele</button>
> + </label><br/>
> +
> + <button id="saveSel" type="submit" name="action"
> value="save">Salvează eticheta</button>
> + </form>
> +
> + <h3>Etichete salvate</h3>
> + {foreach from=$savedTags item=tag}
> + <form action="visualTag.php" method="post">
> + <label>{$tag->label}
> + <input type="hidden" name="savedTagId"
> value="{$tag->id}"/>
> + <button type="submit" name="action" value="delete">Șterge
> eticheta</button>
> + </label>
> + </form>
> + {/foreach}
> + </div>
> + {/if}
> +
> {else}
> <p>Toate imaginile au fost revizuite. Mulțumim!</p>
> {/if}
>
> Modified: wwwbase/admin/visualTag.php
> ==============================================================================
> --- wwwbase/admin/visualTag.php Thu Aug 29 03:18:44 2013 (r966)
> +++ wwwbase/admin/visualTag.php Thu Aug 29 19:49:58 2013 (r967)
> @@ -7,8 +7,10 @@
>
> $rootPath = util_getImgRoot() . '/';
> $savedTags = '';
> +$action = util_getRequestParameter('action');
>
> -if(util_getRequestParameter('action') == 'save') {
> +
> +if($action == 'save') {
> $imageId = util_getRequestParameter('imageId');
> $lexemeId = util_getrequestParameter('lexemeId');
> $lexeme = util_getRequestParameter('lexeme');
> @@ -30,7 +32,7 @@
>
> util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
>
> -} else if(util_getRequestParameter('action') == 'delete') {
> +} else if($action == 'delete') {
> $tagId = util_getRequestParameter('savedTagId');
>
> $line = VisualTag::get_by_id($tagId);
> @@ -40,12 +42,40 @@
>
> util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
>
> -} else if(util_getRequestParameter('action') == 'finishedTagging') {
> +} else if($action == 'finishedTagging') {
> $imageId = util_getRequestParameter('imageId');
>
> $line = Visual::get_by_id($imageId);
> - $line->revised = 1;
> - $line->save();
> +
> + if(!empty($line)) {
> + $line->revised = 1;
> + $line->save();
> + }
> +
> + util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
> +
> +} else if($action == 'setImgLexemeId') {
> + $imgLexemeId = util_getRequestParameter('imgLexemeId');
> + $imageId = util_getRequestParameter('imageId');
> +
> + $line = Visual::get_by_id($imageId);
> +
> + if(!empty($line)){
> + $line->lexemeId = $imgLexemeId;
> + $line->save();
> + }
> +
> + util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
> +
> +} else if($action == 'resetImgLexemeId') {
> + $imageId = util_getRequestParameter('imageId');
> +
> + $line = Visual::get_by_id($imageId);
> +
> + if(!empty($line)) {
> + $line->lexemeId = '';
> + $line->save();
> + }
>
> util_redirect(util_getWwwRoot() . 'admin/visualTag.php');
> }
> @@ -55,12 +85,19 @@
> if(!empty($line)) {
> $imagePath = $rootPath . $line->path;
> $imageId = $line->id;
> + $imgLexemeId = $line->lexemeId;
> + if($imgLexemeId) {
> + $lexemeName = Lexem::get_by_id($imgLexemeId);
> + $lexemeName = $lexemeName->formUtf8General;
> + SmartyWrap::assign('lexemeName', $lexemeName);
> + }
>
> $tags = VisualTag::get_all_by_imageId($imageId);
>
> SmartyWrap::assign('savedTags', $tags);
> SmartyWrap::assign('imagePath', $imagePath);
> SmartyWrap::assign('imageId', $imageId);
> + SmartyWrap::assign('imgLexemeId', $imgLexemeId);
> }
>
> SmartyWrap::assign('sectionTitle', 'Etichetare imagini pentru
> definiții');
>
> Modified: wwwbase/js/visualTag.js
> ==============================================================================
> --- wwwbase/js/visualTag.js Thu Aug 29 03:18:44 2013 (r966)
> +++ wwwbase/js/visualTag.js Thu Aug 29 19:49:58 2013 (r967)
> @@ -76,7 +76,7 @@
> var data = {id: element.val(), text: element.val()};
> callback(data);
> },
> - placeholder: "Scrie lexemul",
> + placeholder: 'Scrie lexemul',
> allowclear: true,
> minimumInputLength: 1,
> context: this,
> @@ -87,13 +87,7 @@
> results: function(data, page) { return { results: data.results
> }; },
> },
> formatResult: select2Format,
> - /*function(data) {
> - return data.text;
> - },*/
> - formatSelection: select2Format,
> - /*function(data) {
> - return data.text;
> - },*/
> + formatSelection: function(data) { return data.text; },
> width: '200px',
>
> }).on('change', function(e) {
> @@ -103,6 +97,31 @@
> $('#lexemeId').val(id);
> $('#lexeme').val(text);
> });
> +
> + $('#selectImgLexeme').select2({
> + initSelection: function(element, callback) {
> + var data = {id: element.val(), text: element.val()};
> + callback(data);
> + },
> + placeholder: 'Scrie lexemul',
> + allowclear: true,
> + minimumInputLength: 1,
> + context: this,
> + ajax: {
> + url: wwwRoot + 'ajax/visualTag.php',
> + dataType: 'json',
> + data: function(term, page) { return {term: term}; },
> + results: function(data, page) { return { results: data.results
> }; },
> + },
> + formatResult: select2Format,
> + formatSelection: function(data) { return data.text; },
> + width: '200px',
> +
> + }).on('change', function(e) {
> + var id = $(this).select2('data').id;
> +
> + $('#imgLexemeId').val(id);
> + });
> });
>
> function validateTag() {
> @@ -126,6 +145,15 @@
> }
> };
>
> +function validateLexeme() {
> + var lexeme = $('#imgLexemeId').val();
> +
> + if(!lexeme) {
> + alert('Ai uitat să completezi ce lexem descrie cel mai bine
> imaginea');
> + return false;
> + }
> +};
> +
> function select2Format(lex) {
> - return lex.text + ' ' + lex.description;
> -}
> + return lex.text + '<br/><i>' + lex.description + '</i>';
> +};
>
> Modified: wwwbase/styles/flex.css
> ==============================================================================
> --- wwwbase/styles/flex.css Thu Aug 29 03:18:44 2013 (r966)
> +++ wwwbase/styles/flex.css Thu Aug 29 19:49:58 2013 (r967)
> @@ -379,6 +379,12 @@
> .visualTagCanvas {
> float: left;
> width: 500px;
> + height: 500px;
> +}
> +
> +.visualTagCanvas img {
> + max-width: 500px;
> + max-height: 500px;
> }
>
> #helpText {
> _______________________________________________
> Dev mailing list
> Dev at dexonline.ro
> http://list.dexonline.ro/listinfo/dev
More information about the Dev
mailing list