added photo tagging - but not displaying or deleting tags yet

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',
+));