From 8784c7282009b9cd14b166d57617525424ef94a5 Mon Sep 17 00:00:00 2001 From: cash Date: Sun, 19 Dec 2010 21:22:20 +0000 Subject: namespaced the widget code git-svn-id: http://code.elgg.org/elgg/trunk@7693 36083f99-b078-4883-b0ff-0f9b5a30f544 --- js/lib/ui.widgets.js | 154 +++++---------------- views/default/css/screen.php | 46 +++--- views/default/layout/objects/widget.php | 12 +- views/default/layout/objects/widget/controls.php | 14 +- views/default/layout/objects/widget/settings.php | 2 +- views/default/layout/shells/widgets.php | 2 +- views/default/layout/shells/widgets/add_button.php | 15 +- views/default/layout/shells/widgets/add_panel.php | 14 +- 8 files changed, 84 insertions(+), 175 deletions(-) diff --git a/js/lib/ui.widgets.js b/js/lib/ui.widgets.js index 141ea2d31..867b53af5 100644 --- a/js/lib/ui.widgets.js +++ b/js/lib/ui.widgets.js @@ -13,26 +13,21 @@ elgg.ui.widgets.init = function() { } $(".elgg-widgets").sortable({ - items: 'div.widget', + items: 'div.elgg-widget', connectWith: '.elgg-widgets', handle: 'div.drag-handle', forcePlaceholderSize: true, - placeholder: 'widget-placeholder', + placeholder: 'elgg-widget-placeholder', opacity: 0.8, revert: 500, stop: elgg.ui.widgets.move }); - $('#widget-add-button a').bind('click', function(event) { - $('.widgets-add-panel').slideToggle('medium'); - event.preventDefault(); - }); - - $('.widgets-add-panel li.widget-available').click(elgg.ui.widgets.add); - $('a.widget-delete-button').click(elgg.ui.widgets.remove); - $('a.widget-edit-button').click(elgg.ui.widgets.editToggle); - $('.widget-edit > form ').submit(elgg.ui.widgets.saveSettings); - $('a.widget-collapse-button').click(elgg.ui.widgets.collapseToggle); + $('.elgg-widgets-add-panel li.elgg-widget-available').click(elgg.ui.widgets.add); + $('a.elgg-widget-delete-button').click(elgg.ui.widgets.remove); + $('a.elgg-widget-edit-button').click(elgg.ui.widgets.editToggle); + $('.elgg-widget-edit > form ').submit(elgg.ui.widgets.saveSettings); + $('a.elgg-widget-collapse-button').click(elgg.ui.widgets.collapseToggle); elgg.ui.widgets.equalHeight(".elgg-widgets"); }; @@ -46,15 +41,15 @@ elgg.ui.widgets.init = function() { * @return void */ elgg.ui.widgets.add = function(event) { - // widget-type- + // elgg-widget-type- var type = $(this).attr('id'); - type = type.substr(type.indexOf('widget-type-') + "widget-type-".length); + type = type.substr(type.indexOf('elgg-widget-type-') + "elgg-widget-type-".length); // if multiple instances not allow, disable this widget type add button - var multiple = $(this).attr('class').indexOf('widget-multiple') != -1; + var multiple = $(this).attr('class').indexOf('elgg-widget-multiple') != -1; if (multiple == false) { - $(this).addClass('widget-unavailable'); - $(this).removeClass('widget-available'); + $(this).addClass('elgg-widget-unavailable'); + $(this).removeClass('elgg-widget-available'); $(this).unbind('click', elgg.ui.widgets.add); } @@ -62,15 +57,15 @@ elgg.ui.widgets.add = function(event) { data: { handler: type, user_guid: elgg.get_loggedin_userid(), - context: $("input[name='widget-context']").val() + context: $("input[name='widget_context']").val() }, success: function(json) { - $('#widget-col-1').prepend(json.output); - var $widget = $('#widget-col-1').children(":first"); - $widget.find('a.widget-delete-button').click(elgg.ui.widgets.remove); - $widget.find('a.widget-edit-button').click(elgg.ui.widgets.editToggle); - $widget.find('a.widget-collapse-button').click(elgg.ui.widgets.collapseToggle); - $widget.find('.widget-edit > form ').submit(elgg.ui.widgets.saveSettings); + $('#elgg-widget-col-1').prepend(json.output); + var $widget = $('#elgg-widget-col-1').children(":first"); + $widget.find('a.elgg-widget-delete-button').click(elgg.ui.widgets.remove); + $widget.find('a.elgg-widget-edit-button').click(elgg.ui.widgets.editToggle); + $widget.find('a.elgg-widget-collapse-button').click(elgg.ui.widgets.collapseToggle); + $widget.find('.elgg-widget-edit > form ').submit(elgg.ui.widgets.saveSettings); } }); event.preventDefault(); @@ -86,13 +81,13 @@ elgg.ui.widgets.add = function(event) { */ elgg.ui.widgets.move = function(event, ui) { - // widget- + // elgg-widget- var guidString = ui.item.attr('id'); - guidString = guidString.substr(guidString.indexOf('widget-') + "widget-".length); + guidString = guidString.substr(guidString.indexOf('elgg-widget-') + "elgg-widget-".length); - // widget-col- + // elgg-widget-col- var col = ui.item.parent().attr('id'); - col = col.substr(col.indexOf('widget-col-') + "widget-col-".length); + col = col.substr(col.indexOf('elgg-widget-col-') + "elgg-widget-col-".length); elgg.action('widgets/move', { data: { @@ -120,22 +115,22 @@ elgg.ui.widgets.remove = function(event) { // if widget type is single instance type, enable the add buton var type = $widget.attr('class'); - // widget-instance- - type = type.substr(type.indexOf('widget-instance-') + "widget-instance-".length); - $button = $('#widget-type-' + type); - var multiple = $button.attr('class').indexOf('widget-multiple') != -1; + // elgg-widget-instance- + type = type.substr(type.indexOf('elgg-widget-instance-') + "elgg-widget-instance-".length); + $button = $('#elgg-widget-type-' + type); + var multiple = $button.attr('class').indexOf('elgg-widget-multiple') != -1; if (multiple == false) { - $button.addClass('widget-available'); - $button.removeClass('widget-unavailable'); + $button.addClass('elgg-widget-available'); + $button.removeClass('elgg-widget-unavailable'); $button.unbind('click', elgg.ui.widgets.add); // make sure we don't bind twice $button.click(elgg.ui.widgets.add); } $widget.remove(); - // widget-delete-button- + // elgg-widget-delete-button- var id = $(this).attr('id'); - id = id.substr(id.indexOf('widget-delete-button-') + "widget-delete-button-".length); + id = id.substr(id.indexOf('elgg-widget-delete-button-') + "elgg-widget-delete-button-".length); elgg.action('widgets/delete', { data: { @@ -154,7 +149,7 @@ elgg.ui.widgets.remove = function(event) { * @return void */ elgg.ui.widgets.editToggle = function(event) { - $(this).parent().parent().find('.widget-edit').slideToggle('medium'); + $(this).parent().parent().find('.elgg-widget-edit').slideToggle('medium'); event.preventDefault(); } @@ -165,8 +160,8 @@ elgg.ui.widgets.editToggle = function(event) { * @return void */ elgg.ui.widgets.collapseToggle = function(event) { - $(this).toggleClass('widget-collapsed'); - $(this).parent().parent().find('.widget-container').slideToggle('medium'); + $(this).toggleClass('elgg-widget-collapsed'); + $(this).parent().parent().find('.elgg-widget-container').slideToggle('medium'); event.preventDefault(); } @@ -180,7 +175,7 @@ elgg.ui.widgets.collapseToggle = function(event) { */ elgg.ui.widgets.saveSettings = function(event) { $(this).parent().slideToggle('medium'); - var $widgetContent = $(this).parent().parent().children('.widget-content'); + var $widgetContent = $(this).parent().parent().children('.elgg-widget-content'); // @todo - change to ajax loader $widgetContent.html('loading'); elgg.action('widgets/save', { @@ -212,82 +207,3 @@ elgg.ui.widgets.equalHeight = function(selector) { } elgg.register_event_handler('init', 'system', elgg.ui.widgets.init); - - -// @todo look into removing the below functions - maybe a compatibility plugin - -//List active widgets for each page column -elgg.ui.widgets.outputList = function(forElement) { - return $("input[name='handler'], input[name='guid']", forElement).makeDelimitedList("value"); -}; - -//Read each widgets collapsed/expanded state from cookie and apply -elgg.ui.widgets.state = function(forWidget) { - var thisWidgetState = elgg.session.cookie(forWidget); - - if (thisWidgetState === 'collapsed') { - forWidget = "#" + forWidget; - $(forWidget).find("div.collapsable_box_content").hide(); - $(forWidget).find("a.toggle_box_contents").html('+'); - $(forWidget).find("a.toggle_box_edit_panel").fadeOut('medium'); - } -}; - -//More info tooltip in widget gallery edit panel -elgg.ui.widgets.moreinfo = function() { - $("img.more_info").hover(function(e) { - var widgetdescription = $("input[name='description']", this.parentNode.parentNode.parentNode).val(); - $("body").append("

" + widgetdescription + "

"); - - if (e.pageX < 900) { - $("#widget_moreinfo") - .css("top", (e.pageY + 10) + "px") - .css("left", (e.pageX + 10) + "px") - .fadeIn("medium"); - } else { - $("#widget_moreinfo") - .css("top", (e.pageY + 10) + "px") - .css("left", (e.pageX - 210) + "px") - .fadeIn("medium"); - } - }, function() { - $("#widget_moreinfo").remove(); - }); -}; - -//Toggle widgets contents and save to a cookie -elgg.ui.widgets.toggleContent = function(e) { - var thisWidgetName, - targetContent = $('div.collapsable_box_content', this.parentNode.parentNode); - - if (targetContent.css('display') === 'none') { - targetContent.slideDown(400); - $(this).html('-'); - $(this.parentNode).children(".toggle_box_edit_panel").fadeIn('medium'); - - // set cookie for widget panel open-state - thisWidgetName = $(this.parentNode.parentNode.parentNode).attr('id'); - elgg.session.cookie(thisWidgetName, 'expanded', {expires: 365}); - - } else { - targetContent.slideUp(400); - $(this).html('+'); - $(this.parentNode).children(".toggle_box_edit_panel").fadeOut('medium'); - // make sure edit pane is closed - $(this.parentNode.parentNode).children(".collapsable_box_editpanel").hide(); - - // set cookie for widget panel closed-state - thisWidgetName = $(this.parentNode.parentNode.parentNode).attr('id'); - elgg.session.cookie(thisWidgetName, 'collapsed', {expires: 365}); - } - return false; -}; - -/** - * @deprecated Use elgg.ui.widgets.* - */ -var toggleContent = elgg.ui.widgets.toggleContent, - widget_moreinfo = elgg.ui.widgets.moreinfo, - widget_state = elgg.ui.widgets.state, - outputWidgetList = elgg.ui.widgets.outputList; - diff --git a/views/default/css/screen.php b/views/default/css/screen.php index 971b5b734..a96aaaa90 100644 --- a/views/default/css/screen.php +++ b/views/default/css/screen.php @@ -142,22 +142,20 @@ echo elgg_view('css/elements/skin', $vars); float: right; min-height: 30px; } -#widget-add-button { - padding: 0px; +.elgg-widget-add-control { text-align: right; - margin-bottom: 15px; - margin-right: 5px; + margin: 5px 5px 15px; } -.widgets-add-panel { +.elgg-widgets-add-panel { padding: 10px; margin: 0 5px 15px; background: #dedede; } -.widgets-add-panel ul { +.elgg-widgets-add-panel ul { padding: 0; margin: 0; } -.widgets-add-panel li { +.elgg-widgets-add-panel li { float: left; margin: 2px 10px; list-style: none; @@ -165,36 +163,36 @@ echo elgg_view('css/elements/skin', $vars); padding: 4px; background-color: #cccccc; } -.widgets-add-panel li a { +.elgg-widgets-add-panel li a { display: block; } -.widget-available { +.elgg-widget-available { cursor: pointer; } -.widget-unavailable { +.elgg-widget-unavailable { color: #888888; } -.widget { +.elgg-widget { background-color: #dedede; padding: 2px; margin: 0 5px 15px; position: relative; } -.widget:hover { +.elgg-widget:hover { background-color: #cccccc; } -.widget-title { +.elgg-widget-title { background-color: #dedede; height: 30px; line-height: 30px; overflow: hidden; } -.widget-title h3 { +.elgg-widget-title h3 { float: left; padding: 0 45px 0 20px; color: #333333; } -.widget-controls a { +.elgg-widget-controls a { position: absolute; top: 5px; display: block; @@ -202,42 +200,42 @@ echo elgg_view('css/elements/skin', $vars); height: 18px; border: 1px solid transparent; } -a.widget-collapse-button { +a.elgg-widget-collapse-button { left: 5px; background:transparent url(_graphics/elgg_sprites.png) no-repeat 0px -385px; } -.widget-controls a.widget-collapsed { +.elgg-widget-controls a.elgg-widget-collapsed { background-position: 0px -365px; } -a.widget-delete-button { +a.elgg-widget-delete-button { right: 5px; background:transparent url(_graphics/elgg_sprites.png) no-repeat -198px 3px; } -a.widget-edit-button { +a.elgg-widget-edit-button { right: 25px; background:transparent url(_graphics/elgg_sprites.png) no-repeat -300px -1px; } -a.widget-edit-button:hover, a.widget-delete-button:hover { +a.elgg-widget-edit-button:hover, a.elgg-widget-delete-button:hover { border: 1px solid #cccccc; } -.widget-container { +.elgg-widget-container { background-color: white; width: 100%; overflow: hidden; } -.widget-edit { +.elgg-widget-edit { display: none; width: 96%; padding: 2%; border-bottom: 2px solid #dedede; } -.widget-content { +.elgg-widget-content { padding: 10px; } .drag-handle { cursor: move; } -.widget-placeholder { +.elgg-widget-placeholder { border: 2px dashed #dedede; margin-bottom: 15px; } diff --git a/views/default/layout/objects/widget.php b/views/default/layout/objects/widget.php index d109693e1..1ba274aa6 100644 --- a/views/default/layout/objects/widget.php +++ b/views/default/layout/objects/widget.php @@ -19,12 +19,12 @@ $title = $widget->getTitle(); $can_edit = $widget->canEdit(); -$widget_id = "widget-$widget->guid"; -$widget_instance = "widget-instance-$handler"; +$widget_id = "elgg-widget-$widget->guid"; +$widget_instance = "elgg-widget-instance-$handler"; ?> -
-
+
+

$widget)); } ?> -
+
$widget)); } ?> -
+
' ', 'href' => "#", - 'class' => 'widget-collapse-button', - 'internalid' => "widget-collapse-button_$widget->guid" + 'class' => 'elgg-widget-collapse-button', + 'internalid' => "elgg-widget-collapse-button-$widget->guid" ); $collapse_link = elgg_view('output/url', $params); @@ -21,8 +21,8 @@ $params = array( 'title' => elgg_echo('widget:delete', array($widget->getTitle())), 'href' => elgg_get_site_url() . "action/widgets/delete?guid=$widget->guid", 'is_action' => true, - 'class' => 'widget-delete-button', - 'internalid' => "widget-delete-button_$widget->guid" + 'class' => 'elgg-widget-delete-button', + 'internalid' => "elgg-widget-delete-button-$widget->guid" ); $delete_link = elgg_view('output/url', $params); @@ -30,13 +30,13 @@ $params = array( 'text' => ' ', 'title' => elgg_echo('widget:edit'), 'href' => "#", - 'class' => 'widget-edit-button', - 'internalid' => "widget-edit-button_$widget->guid" + 'class' => 'elgg-widget-edit-button', + 'internalid' => "elgg-widget-edit-button-$widget->guid" ); $edit_link = elgg_view('output/url', $params); echo <<<___END -
+
$collapse_link $delete_link $edit_link diff --git a/views/default/layout/objects/widget/settings.php b/views/default/layout/objects/widget/settings.php index 5814e5821..c1e00c3f1 100644 --- a/views/default/layout/objects/widget/settings.php +++ b/views/default/layout/objects/widget/settings.php @@ -33,7 +33,7 @@ $body = <<<___END ___END; ?> -
+
$body, diff --git a/views/default/layout/shells/widgets.php b/views/default/layout/shells/widgets.php index e35e8c6c4..0c21e7042 100644 --- a/views/default/layout/shells/widgets.php +++ b/views/default/layout/shells/widgets.php @@ -34,7 +34,7 @@ $widget_class = "elgg-col-1of{$num_columns}"; for ($column_index = 1; $column_index <= $num_columns; $column_index++) { $column_widgets = $widgets[$column_index]; - echo "
"; + echo "
"; if (is_array($column_widgets) && sizeof($column_widgets) > 0) { foreach ($column_widgets as $widget) { echo elgg_view_entity($widget); diff --git a/views/default/layout/shells/widgets/add_button.php b/views/default/layout/shells/widgets/add_button.php index d281a2ffa..492f0f6fc 100644 --- a/views/default/layout/shells/widgets/add_button.php +++ b/views/default/layout/shells/widgets/add_button.php @@ -1,13 +1,8 @@ -
- '#', - 'text' => elgg_echo('widgets:add'), - 'class' => 'elgg-action-button', -); -echo elgg_view('output/url', $options); +/** + * Button area for showing the add widgets panel + */ ?> +
+
diff --git a/views/default/layout/shells/widgets/add_panel.php b/views/default/layout/shells/widgets/add_panel.php index d9acc5518..1e2dc3bbc 100644 --- a/views/default/layout/shells/widgets/add_panel.php +++ b/views/default/layout/shells/widgets/add_panel.php @@ -13,27 +13,27 @@ foreach ($widgets as $column_widgets) { } ?> -