widget description popups added

git-svn-id: https://code.elgg.org/elgg/trunk@983 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 82 insertions, 19 deletions

diff --git a/javascript/initialise_elgg.js b/javascript/initialise_elgg.js
index a8905a162..f31b9f9a5 100644
--- a/javascript/initialise_elgg.js
+++ b/javascript/initialise_elgg.js
@@ -1,31 +1,39 @@
 $(document).ready(function () {
 
-	// close all drawer elements
+	// elggtoolbar - close all drawer elements on pageload
 	$('li.drawer ul').hide();
 	
-	// register click handler for elggtoolbar and define onclick function
+	// elggtoolbar
 	$('h2.drawer-handle').click(function () {	
 		$('li.drawer ul:visible').slideUp('medium').prev().removeClass('open');
 		$(this).addClass('open').next().slideDown('fast');
 	return false;
 	});
 	
-	// register click function for toggling box contents
+	// toggle widget box contents
 	$('a.toggle_box_contents').bind('click', toggleContent);
 	
-	// click function for box contents edit panel
+	// toggle widget box edit panel
 	$('a.toggle_box_edit_panel').click(function () {
 		$(this.parentNode.parentNode).children("[class=collapsable_box_editpanel]").slideToggle("fast");
 		return false;
     });
+
     
-	// click function for customise edit panel
+	// toggle customise edit panel
 	$('a.toggle_customise_edit_panel').click(function () {
 		$('div#customise_editpanel').slideToggle("fast");
 		return false;
-    });     
+    }); 
+    
+    
+    // more info buttons
+    setupMoreInfoButton();
     
-	// click function for customise panel - remove widget
+    widget_moreinfo();
+       
+    
+	// remove widget button
 	$('img.remove_me').click(function () {
 		$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium", function () {
 			$(this).remove();
@@ -87,6 +95,7 @@ $(document).ready(function () {
 		drop: function(ev, ui) {
 			$(this).append($(ui.draggable).clone() ); 
 			$(this).droppable("disable");
+			
 			$('img.remove_me').click(function () {
 					$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium", function () {
 					$(this).remove();
@@ -96,6 +105,9 @@ $(document).ready(function () {
 				});
 			return false;
 			});
+			
+			setupMoreInfoButton(); 
+			
 			$els.sortable( "refresh" );
 			
 			var widgetNameRight = outputWidgetList('#rightsidebar_widgets');
@@ -108,6 +120,7 @@ $(document).ready(function () {
 		drop: function(ev, ui) {
 			$(this).append($(ui.draggable).clone() ); 
 			$(this).droppable("disable");
+			
 			$('img.remove_me').click(function () {
 					$(this.parentNode.parentNode.parentNode.parentNode.parentNode).fadeOut("medium", function () {
 					$(this).remove();
@@ -116,8 +129,10 @@ $(document).ready(function () {
 					document.getElementById('debugField1').value = widgetNameMain;
 				});
 			return false;
-				
 			});
+			
+			setupMoreInfoButton();
+			
 			$els.sortable( "refresh" );
 			
 			var widgetNameMain = outputWidgetList('#main_widgets');
@@ -150,13 +165,11 @@ jQuery.fn.makeDelimitedList = function(elementAttribute) {
 
 
 function outputWidgetList(forElement) {
-	//return( $("input[@name='handler']", forElement ).makeDelimitedList("value") );	
-	return( $("input[@name='handler'], input[@name='guid']", forElement ).makeDelimitedList("value") );
-	
+	return( $("input[@name='handler'], input[@name='guid']", forElement ).makeDelimitedList("value") );	
 }
 
 
-// toggle box content
+// toggle widget box contents
 var toggleContent = function(e) {
 	var targetContent = $('div.collapsable_box_content', this.parentNode.parentNode);
 		if (targetContent.css('display') == 'none') {
@@ -175,4 +188,40 @@ var toggleContent = function(e) {
 };
 
 
+// widget more info button
+function setupMoreInfoButton() {
+	$('img.more_info').click(function () {			
+		// grab widget description from hidden field			
+		//var widgetdescription = $("input[@name='description']", this.parentNode.parentNode.parentNode ).attr('value');
+		
+		//document.getElementById('debugField3').value = widgetdescription;
+													
+	return false;
+	}); 	
+}
+
+
+function widget_moreinfo() {			
+
+	$("img.more_info").hover(function(e){											  
+		
+		var widgetdescription = $("input[@name='description']", this.parentNode.parentNode.parentNode ).attr('value');
+
+		$("body").append("<p id='widget_moreinfo'><b>"+ widgetdescription +" </b><br />and there is room for a slightly <br />longer description spanning <br />several lines.</p>");
+
+		$("#widget_moreinfo")
+			.css("top",(e.pageY + 10) + "px")
+			.css("left",(e.pageX + 10) + "px")
+			.fadeIn("fast");		
+    },
+	function(){
+		$("#widget_moreinfo").remove();
+    });	
+	$("img.more_info").mousemove(function(e){
+		$("#widget_moreinfo")
+			.css("top",(e.pageY + 10) + "px")
+			.css("left",(e.pageX + 10) + "px");
+	});			
+};
+
 
diff --git a/views/default/canvas/layouts/widgets.php b/views/default/canvas/layouts/widgets.php
index 2c9783148..b6d8bcbf3 100644
--- a/views/default/canvas/layouts/widgets.php
+++ b/views/default/canvas/layouts/widgets.php
@@ -43,16 +43,14 @@
 	</h3>
 </td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif" class="remove_me" /></a></td>
-<td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
+<td width="17px" align="right"><a href="javascript:void(0);"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_info.gif" class="more_info" /></a></td>
 <td width="17px" align="right"><a href="#"><img src="<?php echo $vars['url']; ?>_graphics/icon_customise_drag.gif" class="drag_handle" /></a></td>
 </tr></table>
 
 <?php
-
 	}
-
 ?>
-<br />
+
 </div>
 
 
@@ -145,7 +143,8 @@
 <textarea type="textarea" value="Right widgets" style="display:none" name="debugField2" id="debugField2" /><?php echo $sidebarwidgetstring; ?></textarea>
 <input type="hidden" name="context" value="<?php echo get_context(); ?>" />
 <input type="hidden" name="owner" value="<?php echo page_owner(); ?>" />
-<input type="submit" value="Save changes" class="submit_button" />
+<input type="submit" value="Save changes" class="submit_button" onclick="$('a.toggle_customise_edit_panel').click();" />
+
 </form>
 </div><!-- /customise_editpanel -->
 
@@ -193,7 +192,6 @@
 	
 	?>
 	
-	
 </div><!-- /#wrapper_maincontent -->
 <p></p><!-- necessary to avoid an ie7 bug? -->
 </div><!-- /#layout_maincontent -->	
diff --git a/views/default/css.php b/views/default/css.php
index 38249c0af..ea7fef5e5 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -255,7 +255,7 @@ h6 { font-size: 0.8em; }
   CUSTOMISE PANEL (PROFILE & DASHBOARD)
 *************************************** */
 #customise_editpanel {
-	/* display:none;*/
+	display:none;
 	margin: -20px 0 20px 20px;
 	padding:20px;
 	background: #dedede;
@@ -329,6 +329,14 @@ h6 { font-size: 0.8em; }
 #customise_editpanel img.more_info {
 	padding-top: 4px;
 }
+#widget_moreinfo {
+	position:absolute;
+	border:1px solid #333333;
+	background:#e4ecf5;
+	color:#333333;
+	padding:5px;
+	display:none;
+}
 .droppable-active {
 		
 }
@@ -680,3 +688,11 @@ input[type="submit"] {
 *************************************** */
 
 
+	
+	
+	
+	
+	
+	
+	
+	
\ No newline at end of file