From a9ea0333fa16c96377952ac5129a6871455181f8 Mon Sep 17 00:00:00 2001 From: Cash Costello Date: Sat, 4 Apr 2009 19:18:48 +0000 Subject: better core code for tags --- views/default/object/image.php | 206 ++++++++++++++++++++++++++++++----------- views/default/tidypics/css.php | 26 +++++- 2 files changed, 176 insertions(+), 56 deletions(-) (limited to 'views/default') diff --git a/views/default/object/image.php b/views/default/object/image.php index 7cb1f00c2..e4cd4d067 100644 --- a/views/default/object/image.php +++ b/views/default/object/image.php @@ -125,13 +125,46 @@ echo elgg_view('input/form', array('internalid' => 'quicksearch', 'internalname' => 'form-phototagging', 'class' => 'quicksearch', 'action' => "{$vars['url']}action/tidypics/addtag", 'body' => $content)); ?> - + +value); + $data_tag->type = 'word'; + $data_tag->value = 'Test tag'; + $data_tag->id = 32; + $data_tag->x1 = 73; + $data_tag->y1 = 56; + $data_tag->width = 100; + $data_tag->height = 32; + + if($data_tag->type == 'user') + $data_tag->data = get_entity($data_tag->value); + else + $data_tag->data = $data_tag->value; + + echo "
"; + + if($data_tag->type == 'user') + echo "{$data_tag->data->name}"; + else + echo "{$data_tag->data}"; + + echo ""; + echo "
"; +// } +//} +?> +
@@ -152,7 +185,7 @@
- + @@ -178,7 +211,7 @@ var coordinates = ""; var user_id = 0; - + // add to DOM as soon as ready $(document).ready(function () { $('ul#phototagging-menu li').quicksearch({ position: 'before', @@ -193,80 +226,132 @@ } ); -/* - jQuery(document).ready(function(){ - - jQuery('#cont-menu ul li').quicksearch({ - position: 'before', - attached: '#cont-menu ul', - loaderText: '', - inputClass: 'input-filtro', - labelText:"

", - delay: 100 - }) - - jQuery('#cont-menu ul').before("

o escoge a una persona:

"); - - //avoid submit - jQuery('#quicksearch').submit( function () { addTag()}); - - - setTimeout("fixContImage()",1000); - - //fix position - jQuery('#cont-image .phototag em').height() - - //Este evento lo que hace es que cuando hace foco en el input se desmarcan todos - jQuery('.input-filtro').focus(function(){jQuery("#cont-menu li a[class*='selected']").removeClass('selected');}) + // images are loaded so process tags + $(window).load(function () { + $('#tidypics_image').setupTags(); + } + ); - }); - - - jQuery('#cont-menu li a').click(function(){ - //Limpiamos todos - jQuery("#cont-menu li a[class*='selected']").removeClass('selected'); + // get tags over image ready for mouseover + $.fn.setupTags = function() + { - jQuery(this).toggleClass('selected'); - }) - + image = this; + + imgOffset = $(image).offset(); + + // hard coded for testing + tags = [{"x1":"10","y1":"10","height":"150","width":"50","text":"George"}, {"x1":"25","y1":"25","height":"70","width":"80","text":"Ed"}]; + + $(tags).each(function(){ + appendTag(imgOffset, this); + }); - + $(image).hover( + function(){ + $('.tidypics_tag').show(); + }, + function(){ + $('.tidypics_tag').hide(); + } + ); + + addTagEvents(); + + + // make sure we catch and handle when the browser is resized + $(window).resize(function () { + $('.tidypics_tag').remove(); + + imgOffset = $(image).offset(); + + $(tags).each(function(){ + appendTag(imgOffset, this); + }); + + addTagEvents(); + }); + } + + function appendTag(offset, tag) + { + tag_top = parseInt(imgOffset.top) + parseInt(tag.y1); + tag_left = parseInt(imgOffset.left) + parseInt(tag.x1); + + tag_div = $('
').css({ left: tag_left + 'px', top: tag_top + 'px', width: tag.width + 'px', height: tag.height + 'px' }); + + tag_text_div = $('
'+tag.text+'
').css({ left: tag_left + 'px', top: tag_top + 'px', width: tag.width + 'px', height: 20 + 'px' }); + + $('body').append(tag_div); + $('body').append(tag_text_div); + } + + function addTagEvents() + { + $('.tidypics_tag').hover( + function(){ + $('.tidypics_tag').show(); + $(this).next('.tidypics_tag_text').show(); + $(this).next('.tidypics_tag_text').css("z-index", 10000); + }, + function(){ + $('.tidypics_tag').show(); + $(this).next('.tidypics_tag_text').hide(); + $(this).next('.tidypics_tag_text').css("z-index", 0); + } + ); + } + -*/ function selectUser(id, name) { user_id = id; $("input.input-filter").val(name); } - function showInfoTag() + function startTagging() { if ( $('#tagging_instructions').is(':hidden') ) { $('#tagging_instructions').show(); - activeTagSystem(); + + $('#tidypics_image').hover( + function(){ + $('.tidypics_tag').hide(); + }, + function(){ + $('.tidypics_tag').hide(); + } + ); + + $('img#tidypics_image').imgAreaSelect( { + borderWidth: 2, + borderColor1: 'white', + borderColor2: 'white', + onSelectEnd: showMenu, + onSelectStart: hideMenu + } + ); } } - function closeInfoTag() + function stopTagging() { $('#tagging_instructions').hide(); $('#tag_menu').hide(); $('img#tidypics_image').imgAreaSelect( {hide: true} ); - } - function activeTagSystem() - { - $('img#tidypics_image').imgAreaSelect( { - borderWidth: 2, - borderColor1: 'white', - borderColor2: 'white', - onSelectEnd: showMenu, - onSelectStart: hideMenu + $('#tidypics_image').hover( + function(){ + $('.tidypics_tag').show(); + }, + function(){ + $('.tidypics_tag').hide(); } ); } + function hideMenu() { $('#tag_menu').hide(); @@ -313,11 +398,22 @@ } /* - jQuery(".phototag span").hover(function() { - jQuery(this).prev("em").stop(true, true).animate({opacity: "show"}, "fast").css({'display':'block','-moz-border-radius-topleft':'2px','-moz-border-radius-topright':'2px','-moz-border-radius-bottomleft':'2px','-moz-border-radius-bottomright':'2px'}); + $(".phototag span").hover( function() { + + jQuery(this).prev("em").stop(true, true).animate({opacity: "show"}, "fast").css( + { 'display':'block', + '-moz-border-radius-topleft':'2px', + '-moz-border-radius-topright':'2px', + '-moz-border-radius-bottomleft':'2px', + '-moz-border-radius-bottomright':'2px'} + ); + jQuery(this).css({'border':'1px solid black','border-top':'none'} ); }, function() { jQuery(this).prev("em").animate({opacity: "hide"}, "fast"); - }); + } + ); +*/ +/* function fixContImage() { diff --git a/views/default/tidypics/css.php b/views/default/tidypics/css.php index 9b2b76b54..83421de74 100644 --- a/views/default/tidypics/css.php +++ b/views/default/tidypics/css.php @@ -208,4 +208,28 @@ background:#fff; padding:5px; font-size:12px; text-align:left; -} \ No newline at end of file +} + +div.phototag {height:140px; position:absolute; text-align:center;} +div.phototag span {margin:0px; display:block;} +div.phototag em {background:#EFFEFF; border:none; color: #61A6DF; opacity:0.8;position: relative;text-align: center; z-index: 2; display: none; font-size:10px; font-style:normal; padding:3px 0px; margin:-20px auto 0px; font-weight:bolder; -moz-border-radius:2px;} + +.tidypics_tag { + display: none; + background: url(spacer.gif); + border: 2px solid rgb(255, 255, 255); + overflow: hidden; + position: absolute; + z-index: 0; + cursor: text; +} + +.tidypics_tag_text { + display: none; + background: url(spacer.gif); + border: 2px solid rgb(255, 255, 255); + overflow: hidden; + position: absolute; + z-index: 0; + cursor: text; +} -- cgit v1.2.3