aboutsummaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorcash <cash.costello@gmail.com>2012-01-02 12:45:16 -0500
committercash <cash.costello@gmail.com>2012-01-02 12:45:16 -0500
commit20ab73de5248b3418bbbad27850e3d3e093c473c (patch)
treecf15a58ad857fbaa4f9b2521c5a7d17ed619f303 /views
parent86535f77d6b32a2c8a403609ded299a76c73bba0 (diff)
downloadelgg-20ab73de5248b3418bbbad27850e3d3e093c473c.tar.gz
elgg-20ab73de5248b3418bbbad27850e3d3e093c473c.tar.bz2
added photo tagging - but not displaying or deleting tags yet
Diffstat (limited to 'views')
-rw-r--r--views/default/forms/photos/image/tag.php33
-rw-r--r--views/default/js/photos/tagging.php73
-rw-r--r--views/default/object/image/full.php4
-rw-r--r--views/default/photos/css.php56
-rw-r--r--views/default/photos/tagging/help.php19
-rw-r--r--views/default/photos/tagging/select.php16
6 files changed, 196 insertions, 5 deletions
diff --git a/views/default/forms/photos/image/tag.php b/views/default/forms/photos/image/tag.php
new file mode 100644
index 000000000..31869be9e
--- /dev/null
+++ b/views/default/forms/photos/image/tag.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Tag select form body
+ *
+ * @uses $vars['entity']
+ *
+ * @author Cash Costello
+ * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2
+ */
+
+echo '<div class="elgg-col elgg-col-4of5">';
+
+echo elgg_view('input/autocomplete', array(
+ 'name' => 'username',
+ 'match_on' => 'friends',
+));
+
+echo elgg_view('input/hidden', array(
+ 'name' => 'guid',
+ 'value' => $vars['entity']->getGUID(),
+));
+
+echo elgg_view('input/hidden', array(
+ 'name' => 'coordinates',
+));
+
+echo '</div>';
+
+echo '<div class="elgg-col elgg-col-1of5 center">';
+echo elgg_view('input/submit', array(
+ 'value' => elgg_echo('tidypics:actiontag'),
+));
+echo '</div>';
diff --git a/views/default/js/photos/tagging.php b/views/default/js/photos/tagging.php
new file mode 100644
index 000000000..f831200e7
--- /dev/null
+++ b/views/default/js/photos/tagging.php
@@ -0,0 +1,73 @@
+<?php
+/**
+ * Photo tagging JavaScript
+ *
+ * @author Cash Costello
+ * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2
+ */
+
+?>
+
+elgg.provide('elgg.tidypics.tagging');
+
+elgg.tidypics.tagging.init = function() {
+ $('[rel=photo-tagging]').click(elgg.tidypics.tagging.start);
+
+ $('#tidypics-tagging-quit').click(elgg.tidypics.tagging.stop);
+}
+
+/**
+ * Start a tagging session
+ */
+elgg.tidypics.tagging.start = function(event) {
+
+ $('.tidypics-photo').imgAreaSelect({
+ disable : false,
+ hide : false,
+ classPrefix : 'tidypics-tagging',
+ onSelectEnd : elgg.tidypics.tagging.startSelect,
+ onSelectStart: function() {
+ $('#tidypics-tagging-select').hide();
+ }
+ });
+
+ $('.tidypics-photo').css({"cursor" : "crosshair"});
+
+ $('#tidypics-tagging-help').toggle();
+
+ event.preventDefault();
+}
+
+/**
+ * Stop tagging
+ *
+ * A tagging session could be completed or the user could have quit.
+ */
+elgg.tidypics.tagging.stop = function(event) {
+ $('#tidypics-tagging-help').toggle();
+ $('#tidypics-tagging-select').hide();
+
+ $('.tidypics-photo').imgAreaSelect({hide: true, disable: true});
+ $('.tidypics-photo').css({"cursor" : "pointer"});
+
+ event.preventDefault();
+}
+
+/**
+ * Start the selection stage of tagging
+ */
+elgg.tidypics.tagging.startSelect = function(img, selection) {
+
+ var coords = '"x1":"' + selection.x1 + '",';
+ coords += '"y1":"' + selection.y1 + '",';
+ coords += '"width":"' + selection.width + '",';
+ coords += '"height":"' + selection.height + '"';
+ $("input[name=coordinates]").val(coords);
+
+ $('#tidypics-tagging-select').show().css({
+ 'top' : selection.y2 + 10,
+ 'left' : selection.x2
+ });
+}
+
+elgg.register_hook_handler('init', 'system', elgg.tidypics.tagging.init);
diff --git a/views/default/object/image/full.php b/views/default/object/image/full.php
index e3a2c7003..33ba49739 100644
--- a/views/default/object/image/full.php
+++ b/views/default/object/image/full.php
@@ -51,8 +51,8 @@ echo $summary;
echo '<div class="tidypics-wrapper-photo">';
echo elgg_view('object/image/navigation', $vars);
-//echo elgg_view('tidypics/tagging/help');
-//echo elgg_view('tidypics/tagging/select', array('photo' => $photo));
+echo elgg_view('photos/tagging/help', $vars);
+echo elgg_view('photos/tagging/select', $vars);
echo $img;
echo '</div>';
diff --git a/views/default/photos/css.php b/views/default/photos/css.php
index 18f225131..31e3d9b53 100644
--- a/views/default/photos/css.php
+++ b/views/default/photos/css.php
@@ -1,9 +1,15 @@
<?php
- /**
- * tidypics CSS extender
- */
+/**
+ * Tidypics CSS
+ *
+ * @author Cash Costello
+ * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2
+ */
?>
+/* ***************************************
+ TIDYPICS
+*************************************** */
.elgg-module-tidypics-album,
.elgg-module-tidypics-image {
width: 161px;
@@ -23,6 +29,10 @@
display: block;
}
+.tidypics-wrapper-photo {
+ position: relative;
+}
+
.tidypics-heading {
color: #0054A7;
}
@@ -66,6 +76,46 @@
vertical-align: top;
}
+/* ***************************************
+ Tagging
+*************************************** */
+.tidypics-tagging-border1 {
+ border: solid 2px white;
+}
+
+.tidypics-tagging-border1, .tidypics-tagging-border2,
+.tidypics-tagging-border3, .tidypics-tagging-border4 {
+ filter: alpha(opacity=50);
+ opacity: 0.5;
+}
+
+.tidypics-tagging-handle {
+ background-color: #fff;
+ border: solid 1px #000;
+ filter: alpha(opacity=50);
+ opacity: 0.5;
+}
+
+.tidypics-tagging-outer {
+ background-color: #000;
+ filter: alpha(opacity=50);
+ opacity: 0.5;
+}
+
+.tidypics-tagging-help {
+ position: absolute;
+ left: 50%;
+ top: -25px;
+ width: 250px;
+ margin-left: -125px;
+ text-align: center;
+}
+
+.tidypics-tagging-select {
+ position: absolute;
+ max-width: 300px;
+}
+
<?php
return true;
?>
diff --git a/views/default/photos/tagging/help.php b/views/default/photos/tagging/help.php
new file mode 100644
index 000000000..a7f437e51
--- /dev/null
+++ b/views/default/photos/tagging/help.php
@@ -0,0 +1,19 @@
+<?php
+/**
+ * Instructions on how to peform photo tagging
+ *
+ * @author Cash Costello
+ * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2
+ */
+
+$button = elgg_view('output/url', array(
+ 'text' => elgg_echo('quit'),
+ 'href' => '#',
+ 'id' => 'tidypics-tagging-quit',
+));
+
+$instructions = elgg_echo('tidypics:taginstruct', array($button));
+?>
+<div id="tidypics-tagging-help" class="elgg-module elgg-module-popup tidypics-tagging-help pam hidden">
+ <?php echo $instructions; ?>
+</div>
diff --git a/views/default/photos/tagging/select.php b/views/default/photos/tagging/select.php
new file mode 100644
index 000000000..8894af63a
--- /dev/null
+++ b/views/default/photos/tagging/select.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * Tag select view
+ *
+ * @uses $vars['entity']
+ *
+ * @author Cash Costello
+ * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2
+ */
+
+$body = elgg_view_form('photos/image/tag', array(), $vars);
+
+echo elgg_view_module('popup', elgg_echo('tidypics:tagthisphoto'), $body, array(
+ 'class' => 'tidypics-tagging-select pam hidden',
+ 'id' => 'tidypics-tagging-select',
+));