diff options
Diffstat (limited to 'views')
-rw-r--r-- | views/default/object/image.php | 309 | ||||
-rw-r--r-- | views/default/tidypics/css.php | 43 |
2 files changed, 342 insertions, 10 deletions
diff --git a/views/default/object/image.php b/views/default/object/image.php index 3aa9bab8e..e4401a950 100644 --- a/views/default/object/image.php +++ b/views/default/object/image.php @@ -81,16 +81,147 @@ echo '<div id="tidypics_desc">' . autop($desc) . '</div>'; echo '<div id="tidypics_image_full">'; echo '<div id="tidypics_image_nav">' . $back . $next . '</div>'; - if ($next) echo '<a href="' . $vars['url'] . 'pg/photos/view/' . $_SESSION['image_sort'][$current+1] . '">'; - echo '<img src="' . $vars['url'] . 'mod/tidypics/thumbnail.php?file_guid=' . $file_guid . '&size=large" border="0" alt="' . $title . '"/>'; - if ($next) echo '</a>'; - echo '</div>'; ?> - <div id="tidypics_controls"> -<div class="tidypics_download"><p><a href="<?php echo $vars['url']; ?>action/tidypics/download?file_guid=<?php echo $file_guid; ?>"><?php echo elgg_echo("image:download"); ?></a></p></div> - </div> +<div id='tagging_instructions'> + <table> + <tbody> + <tr> + <td width='375' align='center'><div id='instructions_default_message'><?php echo elgg_echo('image:doclickfortag'); ?></div></td> + <td valign='middle'><button class='submit_button' onclick='closeInfoTag()'><?php echo elgg_echo('image:finish_tagging'); ?></button></td> + </tr> + </tbody> + </table> +</div> + +<?php + $viewer = get_loggedin_user(); + $friends = get_entities_from_relationship('friend', $viewer->getGUID(), false, 'user', '', 0); - <div id="tidypics_info"> +?> +<div id='cont-image'> + <div id="cont-menu"> +<?php + $content = "<input type='hidden' name='entity_guid' value='$file_guid' />"; + $content .= "<ul id='phototagging-menu'>"; + $content .= "<li class='owner'><a href='#' rel='{$viewer->getGUID()}'> {$viewer->name} (" . elgg_echo('me') . ")</a></li>"; + + if($friends) foreach($friends as $friend) + { + $content .= "<li><a href='#' rel='{$friend->getGUID()}'>{$friend->name}</a></li>"; + } + + $content .= "</ul>"; + + $content .= " + <fieldset> + <button class='submit_button' type='submit'>" . elgg_echo('image:actiontag') . "</button> + </fieldset>"; + + echo elgg_view('input/form', array('internalid' => 'quicksearch', 'internalname' => 'form-phototagging', 'class' => 'quicksearch', 'action' => "{$vars['url']}action/tidypics/phototagging", 'body' => $content)) +?> + </div> +<?php + $photo_tags = get_annotations($file_guid,'object','image','phototag'); + +if ($photo_tags) foreach ($photo_tags as $photo_tag) +{ + $data_tag = unserialize($photo_tag->value); + + + if($data_tag->type == 'user') + $data_tag->data = get_entity($data_tag->value); + else + $data_tag->data = $data_tag->value; + + echo "<div class='phototag' rel='{$photo_tag->id}' style='margin-left:{$data_tag->x1}px; margin-top:{$data_tag->y1}px; width:{$data_tag->width}px;'>"; + if($data_tag->type == 'user') + echo "<em>{$data_tag->data->name}</em>"; + else + echo "<em>{$data_tag->data}</em>"; + echo "<span style='width:" . ((int)$data_tag->width - 2) . "px; height:" . ((int)$data_tag->height - 2) . "px;'></span>"; + echo "</div>"; +}else +{ + echo "<div class='phototag'></div>"; +} + + if ($next) + $click = "onclick='toggleLink()'"; + + echo '<img ' . $click . ' src="' . $vars['url'] . 'mod/tidypics/thumbnail.php?file_guid=' . $file_guid . '&size=large" border="0" alt="' . $title . '"/>'; + +?> +</div> + +</div> + +<div id="tidypics_controls"> +<ul> + <li><a href="javascript:void(0)" onclick="showInfoTag()"><?= elgg_echo('image:tagthisphoto') ?></a></li> + <li><a href="<?php echo $vars['url']; ?>action/tidypics/download?file_guid=<?php echo $file_guid; ?>"><?php echo elgg_echo("image:download"); ?></a></li> +</ul> +</div> + +<?php + $photo_tags = get_annotations($entity_guid,'object','image','phototag','',0,20,0); + + if ($photo_tags) + { +?> + <div id="tidypics_phototags"> + <h3> <?= elgg_echo('image:inthisphoto') ?></h3> + <ul> +<?php + $users = array(); + $objects = array(); + + if ($photo_tags) foreach ($photo_tags as $photo_tag) + { + $data_tag = unserialize($photo_tag->value); + + $name = ""; + + $object = new stdClass(); + + if($data_tag->type == 'user') + { + $data_tag->data = get_entity($data_tag->value); + $object->img = elgg_view("profile/icon",array('entity' => $data_tag->data, 'size' => 'topbar', 'override' => true)); + $object->name = $data_tag->data->name; + $object->rel = $data_tag->data->getUrl(); + }else + { + $data_tag->data = $data_tag->value; + $object->img = "<img border='0' title='object' src='{$vars['url']}mod/tidypics/graphics/tag_yellow.png' />"; + $object->name = $data_tag->data; + $object->rel = "#"; + } + + $object->html = "<li><a class='phototag-links' href='{$object->rel}' rel='{$photo_tag->id}'>$object->img<span>{$object->name}</span></a></li>"; + + if($data_tag->type == 'user') + $users[] = $object; + + else + $objects[] = $object; + } + + if(!empty($users)) foreach ($users as $user) + echo $user->html; + + if(!empty($objects)) foreach ($objects as $object) + echo $object->html; + +?> + </ul> + </div> +<?php + } + +?> + + +<div id="tidypics_info"> <?php if (!is_null($tags)) { ?> @@ -107,4 +238,164 @@ } } // end of tidypics image display -?>
\ No newline at end of file +?> + <script type="text/javascript" src="<?= $vars['url'] ?>/mod/tidypics/vendors/jquery.imgareaselect-0.6.2.js"></script> + <script type="text/javascript" src="<?= $vars['url'] ?>/mod/tidypics/vendors/jquery.quicksearch.js"></script> + + <script type="text/javascript"> + + var coordinates; + + jQuery(document).ready(function(){ + + jQuery('#cont-menu ul li').quicksearch({ + position: 'before', + attached: '#cont-menu ul', + loaderText: '', + inputClass: 'input-filtro', + labelText:"<p><?= elgg_echo('image:inserttag') ?></p>", + delay: 100 + }) + + jQuery('#cont-menu ul').before("<p> o escoge a una persona:</p>"); + + //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');}) + + }); + + + jQuery('#cont-menu li a').click(function(){ + //Limpiamos todos + jQuery("#cont-menu li a[class*='selected']").removeClass('selected'); + + jQuery(this).toggleClass('selected'); + }) + + + + + + var sUrl = "<?= $vars['url'] . 'pg/photos/view/' . $_SESSION['image_sort'][$current+1] ?>"; + + function toggleLink() + { + if(jQuery('#tagging_instructions:hidden').length) + location.href = sUrl; + } + + function showInfoTag() + { + if(jQuery('#tagging_instructions:hidden').length) + { + jQuery('#tagging_instructions').show(); + activeTagSystem(); + } + } + + function closeInfoTag() + { + jQuery('#tagging_instructions').hide(); + jQuery('div[class*=imgareaselect]').remove(); + jQuery('#cont-menu').hide(); + jQuery('#cont-image img').unbind('mousedown'); + } + + function activeTagSystem() + { + jQuery('#image_full img').imgAreaSelect({selectionColor: 'white', + maxWidth: 200, + maxHeight: 200, + minWidth: 60, + minHeight: 60, + borderWidth: 2, + onSelectEnd: mostrarMenu, + onSelectStart: ocultarMenu}); + } + + function ocultarMenu() + { + jQuery('#cont-menu').hide(); + coordinates = ""; + } + + function mostrarMenu(oObject, oCoordenates) + { + constX = -70; + constY = 1; + //console.log(oCoordenates); + //Mostramos el menu + if (oCoordenates.width != 0 && oCoordenates.height != 0) { + coordinates = oCoordenates; + jQuery('#cont-menu').show().css({ + "margin-top": oCoordenates.y2+constY + "px", + "margin-left": oCoordenates.x2+constX + "px" + }); + jQuery(".input-filtro").focus(); + } + } + + function addTag() + { + jQuery('#phototagging-menu li:hidden').find('a').removeClass('selected'); + oForm = jQuery('#quicksearch'); + oEl = jQuery('#quicksearch ul li:has(.selected)'); + if(jQuery('#quicksearch ul li:has(.selected)').length == 1) + oForm.append("<input type='hidden' name='user_id' value='" + oEl.find('a').attr('rel') + "'") + else + oForm.append("<input type='hidden' name='word' value='" + oForm.find('input.input-filtro').val() + "'") + + if(coordinates.x1!=0) + { + sStr = ""; + for (x in coordinates) + sStr += x + ':' + coordinates[x] + '/'; + + oForm.append("<input type='hidden' name='coordinates' value='" + sStr + "' />"); + + } + + //Show loading + jQuery("#cont-menu label, #cont-menu input, #cont-menu p, #cont-menu span, #cont-menu button, #cont-menu ul, #cont-menu fieldset").hide(); + jQuery("#cont-menu ").append('<div align="center" class="ajax_loader"></div>'); + + + return false; + //oForm.submit(); + + } + + 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'}); + }, function() { + jQuery(this).prev("em").animate({opacity: "hide"}, "fast"); + }); + + function fixContImage() + { + jQuery('#cont-image').width(jQuery('#cont-image img').width()); + jQuery('#cont-image').height(jQuery('#cont-image img').height()); + setTimeout("if(jQuery('#cont-image').width() < jQuery('#cont-image img').width()) setTimeout(\"fixContImage()\",500);",300); + } + + jQuery('a.phototag-links').hover(function() { + iRel = jQuery(this).attr('rel'); + jQuery('div.phototag[rel*='+ iRel + ']').find("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':'0px','-moz-border-radius-bottomright':'0px'}); + jQuery('div.phototag[rel*='+ iRel + ']').find("span").css({'border':'1px solid white','border-top':'none'} ); + }, function() { + iRel = jQuery(this).attr('rel'); + jQuery('div.phototag[rel*='+ iRel + ']').find("em").animate({opacity: "hide"}, "fast"); + jQuery('div.phototag[rel*='+ iRel + ']').find("span").css("border","none"); + + }); + + </script>
\ No newline at end of file diff --git a/views/default/tidypics/css.php b/views/default/tidypics/css.php index 6559ec5be..0f5b8baeb 100644 --- a/views/default/tidypics/css.php +++ b/views/default/tidypics/css.php @@ -23,6 +23,18 @@ margin-bottom:10px; margin:10px; } +#tidypics_controls ul { +list-style:none; +margin:0px; +padding:8px; +} + +#tidypics_controls ul li { +padding:2px 10px 2px 22px; +margin:2px 0px; +display:inline; +} +/* .tidypics_download a { font:12px/100% Arial, Helvetica, sans-serif; font-weight:bold; @@ -43,7 +55,7 @@ background:#0054a7; color:white; text-decoration:none; } - +*/ .tidypics_album_images { float:left; width:153px; @@ -147,4 +159,33 @@ padding:0 0 5px; } .river_object_album_comment { background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px; +} + +/* ----------- tagging ---------------- */ +#tagging_instructions { +background:#FFFBE2 none repeat scroll 0 0; +border:1px solid #FFE222; +margin:10px; +padding:10px; +display:none; +} + +#cont-image { +margin:0px auto; +background:white none repeat scroll 0 0; +border:1px solid #DDDDDD; +padding:10px; +overflow:hidden; +} + +#cont-menu { +border:1px solid #3B5999; +width:200px; +position:absolute; +z-index:10000; +display:none; +background:#fff; +padding:5px; +font-size:12px; +text-align:left; }
\ No newline at end of file |