From 6087e0511126842a48bbfc6f3077fb62d008ec1b Mon Sep 17 00:00:00 2001 From: pete Date: Wed, 18 Jun 2008 22:41:53 +0000 Subject: widget description popups added git-svn-id: https://code.elgg.org/elgg/trunk@983 36083f99-b078-4883-b0ff-0f9b5a30f544 --- javascript/initialise_elgg.js | 73 ++++++++++++++++++++++++++------ views/default/canvas/layouts/widgets.php | 10 ++--- views/default/css.php | 18 +++++++- 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("

"+ widgetdescription +"
and there is room for a slightly
longer description spanning
several lines.

"); + + $("#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 @@ - + -
+ @@ -145,7 +143,8 @@ - + + @@ -193,7 +192,6 @@ ?> -

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 -- cgit v1.2.3