namespaced the widget code

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

diff --git a/js/lib/ui.widgets.js b/js/lib/ui.widgets.js
index 141ea2d311ddc0df5329711692a4bb844b4d20e0..867b53af5fb9050e97f791f5efb3ec723b44f96f 100644 (file)
--- a/js/lib/ui.widgets.js
+++ b/js/lib/ui.widgets.js
@@ -13,26 +13,21 @@ elgg.ui.widgets.init = function() {
        }\r
 \r
        $(".elgg-widgets").sortable({\r
-               items:                'div.widget',\r
+               items:                'div.elgg-widget',\r
                connectWith:          '.elgg-widgets',\r
                handle:               'div.drag-handle',\r
                forcePlaceholderSize: true,\r
-               placeholder:          'widget-placeholder',\r
+               placeholder:          'elgg-widget-placeholder',\r
                opacity:              0.8,\r
                revert:               500,\r
                stop:                 elgg.ui.widgets.move\r
        });\r
 \r
-       $('#widget-add-button a').bind('click', function(event) {\r
-               $('.widgets-add-panel').slideToggle('medium');\r
-               event.preventDefault();\r
-       });\r
-\r
-       $('.widgets-add-panel li.widget-available').click(elgg.ui.widgets.add);\r
-       $('a.widget-delete-button').click(elgg.ui.widgets.remove);\r
-       $('a.widget-edit-button').click(elgg.ui.widgets.editToggle);\r
-       $('.widget-edit > form ').submit(elgg.ui.widgets.saveSettings);\r
-       $('a.widget-collapse-button').click(elgg.ui.widgets.collapseToggle);\r
+       $('.elgg-widgets-add-panel li.elgg-widget-available').click(elgg.ui.widgets.add);\r
+       $('a.elgg-widget-delete-button').click(elgg.ui.widgets.remove);\r
+       $('a.elgg-widget-edit-button').click(elgg.ui.widgets.editToggle);\r
+       $('.elgg-widget-edit > form ').submit(elgg.ui.widgets.saveSettings);\r
+       $('a.elgg-widget-collapse-button').click(elgg.ui.widgets.collapseToggle);\r
 \r
        elgg.ui.widgets.equalHeight(".elgg-widgets");\r
 };\r
@@ -46,15 +41,15 @@ elgg.ui.widgets.init = function() {
  * @return void\r
  */\r
 elgg.ui.widgets.add = function(event) {\r
-       // widget-type-<type>\r
+       // elgg-widget-type-<type>\r
        var type = $(this).attr('id');\r
-       type = type.substr(type.indexOf('widget-type-') + "widget-type-".length);\r
+       type = type.substr(type.indexOf('elgg-widget-type-') + "elgg-widget-type-".length);\r
 \r
        // if multiple instances not allow, disable this widget type add button\r
-       var multiple = $(this).attr('class').indexOf('widget-multiple') != -1;\r
+       var multiple = $(this).attr('class').indexOf('elgg-widget-multiple') != -1;\r
        if (multiple == false) {\r
-               $(this).addClass('widget-unavailable');\r
-               $(this).removeClass('widget-available');\r
+               $(this).addClass('elgg-widget-unavailable');\r
+               $(this).removeClass('elgg-widget-available');\r
                $(this).unbind('click', elgg.ui.widgets.add);\r
        }\r
 \r
@@ -62,15 +57,15 @@ elgg.ui.widgets.add = function(event) {
                data: {\r
                        handler: type,\r
                        user_guid: elgg.get_loggedin_userid(),\r
-                       context: $("input[name='widget-context']").val()\r
+                       context: $("input[name='widget_context']").val()\r
                },\r
                success: function(json) {\r
-                       $('#widget-col-1').prepend(json.output);\r
-                       var $widget = $('#widget-col-1').children(":first");\r
-                       $widget.find('a.widget-delete-button').click(elgg.ui.widgets.remove);\r
-                       $widget.find('a.widget-edit-button').click(elgg.ui.widgets.editToggle);\r
-                       $widget.find('a.widget-collapse-button').click(elgg.ui.widgets.collapseToggle);\r
-                       $widget.find('.widget-edit > form ').submit(elgg.ui.widgets.saveSettings);\r
+                       $('#elgg-widget-col-1').prepend(json.output);\r
+                       var $widget = $('#elgg-widget-col-1').children(":first");\r
+                       $widget.find('a.elgg-widget-delete-button').click(elgg.ui.widgets.remove);\r
+                       $widget.find('a.elgg-widget-edit-button').click(elgg.ui.widgets.editToggle);\r
+                       $widget.find('a.elgg-widget-collapse-button').click(elgg.ui.widgets.collapseToggle);\r
+                       $widget.find('.elgg-widget-edit > form ').submit(elgg.ui.widgets.saveSettings);\r
                }\r
        });\r
        event.preventDefault();\r
@@ -86,13 +81,13 @@ elgg.ui.widgets.add = function(event) {
  */\r
 elgg.ui.widgets.move = function(event, ui) {\r
 \r
-       // widget-<guid>\r
+       // elgg-widget-<guid>\r
        var guidString = ui.item.attr('id');\r
-       guidString = guidString.substr(guidString.indexOf('widget-') + "widget-".length);\r
+       guidString = guidString.substr(guidString.indexOf('elgg-widget-') + "elgg-widget-".length);\r
 \r
-       // widget-col-<column>\r
+       // elgg-widget-col-<column>\r
        var col = ui.item.parent().attr('id');\r
-       col = col.substr(col.indexOf('widget-col-') + "widget-col-".length);\r
+       col = col.substr(col.indexOf('elgg-widget-col-') + "elgg-widget-col-".length);\r
 \r
        elgg.action('widgets/move', {\r
                data: {\r
@@ -120,22 +115,22 @@ elgg.ui.widgets.remove = function(event) {
 \r
        // if widget type is single instance type, enable the add buton\r
        var type = $widget.attr('class');\r
-       // widget-instance-<type>\r
-       type = type.substr(type.indexOf('widget-instance-') + "widget-instance-".length);\r
-       $button = $('#widget-type-' + type);\r
-       var multiple = $button.attr('class').indexOf('widget-multiple') != -1;\r
+       // elgg-widget-instance-<type>\r
+       type = type.substr(type.indexOf('elgg-widget-instance-') + "elgg-widget-instance-".length);\r
+       $button = $('#elgg-widget-type-' + type);\r
+       var multiple = $button.attr('class').indexOf('elgg-widget-multiple') != -1;\r
        if (multiple == false) {\r
-               $button.addClass('widget-available');\r
-               $button.removeClass('widget-unavailable');\r
+               $button.addClass('elgg-widget-available');\r
+               $button.removeClass('elgg-widget-unavailable');\r
                $button.unbind('click', elgg.ui.widgets.add); // make sure we don't bind twice\r
                $button.click(elgg.ui.widgets.add);\r
        }\r
 \r
        $widget.remove();\r
 \r
-       // widget-delete-button-<guid>\r
+       // elgg-widget-delete-button-<guid>\r
        var id = $(this).attr('id');\r
-       id = id.substr(id.indexOf('widget-delete-button-') + "widget-delete-button-".length);\r
+       id = id.substr(id.indexOf('elgg-widget-delete-button-') + "elgg-widget-delete-button-".length);\r
 \r
        elgg.action('widgets/delete', {\r
                data: {\r
@@ -154,7 +149,7 @@ elgg.ui.widgets.remove = function(event) {
  * @return void\r
  */\r
 elgg.ui.widgets.editToggle = function(event) {\r
-       $(this).parent().parent().find('.widget-edit').slideToggle('medium');\r
+       $(this).parent().parent().find('.elgg-widget-edit').slideToggle('medium');\r
        event.preventDefault();\r
 }\r
 \r
@@ -165,8 +160,8 @@ elgg.ui.widgets.editToggle = function(event) {
  * @return void\r
  */\r
 elgg.ui.widgets.collapseToggle = function(event) {\r
-       $(this).toggleClass('widget-collapsed');\r
-       $(this).parent().parent().find('.widget-container').slideToggle('medium');\r
+       $(this).toggleClass('elgg-widget-collapsed');\r
+       $(this).parent().parent().find('.elgg-widget-container').slideToggle('medium');\r
        event.preventDefault();\r
 }\r
 \r
@@ -180,7 +175,7 @@ elgg.ui.widgets.collapseToggle = function(event) {
  */\r
 elgg.ui.widgets.saveSettings = function(event) {\r
        $(this).parent().slideToggle('medium');\r
-       var $widgetContent = $(this).parent().parent().children('.widget-content');\r
+       var $widgetContent = $(this).parent().parent().children('.elgg-widget-content');\r
        // @todo - change to ajax loader\r
        $widgetContent.html('loading');\r
        elgg.action('widgets/save', {\r
@@ -212,82 +207,3 @@ elgg.ui.widgets.equalHeight = function(selector) {
 }\r
 \r
 elgg.register_event_handler('init', 'system', elgg.ui.widgets.init);\r
-\r
-\r
-// @todo look into removing the below functions - maybe a compatibility plugin\r
-\r
-//List active widgets for each page column\r
-elgg.ui.widgets.outputList = function(forElement) {\r
-       return $("input[name='handler'], input[name='guid']", forElement).makeDelimitedList("value");\r
-};\r
-\r
-//Read each widgets collapsed/expanded state from cookie and apply\r
-elgg.ui.widgets.state = function(forWidget) {\r
-       var thisWidgetState = elgg.session.cookie(forWidget);\r
-\r
-       if (thisWidgetState === 'collapsed') {\r
-               forWidget = "#" + forWidget;\r
-               $(forWidget).find("div.collapsable_box_content").hide();\r
-               $(forWidget).find("a.toggle_box_contents").html('+');\r
-               $(forWidget).find("a.toggle_box_edit_panel").fadeOut('medium');\r
-       }\r
-};\r
-\r
-//More info tooltip in widget gallery edit panel\r
-elgg.ui.widgets.moreinfo = function() {\r
-       $("img.more_info").hover(function(e) {\r
-               var widgetdescription = $("input[name='description']", this.parentNode.parentNode.parentNode).val();\r
-               $("body").append("<p id='widget_moreinfo'><b>" + widgetdescription + " </b></p>");\r
-\r
-               if (e.pageX < 900) {\r
-                       $("#widget_moreinfo")\r
-                               .css("top", (e.pageY + 10) + "px")\r
-                               .css("left", (e.pageX + 10) + "px")\r
-                               .fadeIn("medium");\r
-               } else {\r
-                       $("#widget_moreinfo")\r
-                               .css("top", (e.pageY + 10) + "px")\r
-                               .css("left", (e.pageX - 210) + "px")\r
-                               .fadeIn("medium");\r
-               }\r
-       }, function() {\r
-               $("#widget_moreinfo").remove();\r
-       });\r
-};\r
-\r
-//Toggle widgets contents and save to a cookie\r
-elgg.ui.widgets.toggleContent = function(e) {\r
-       var thisWidgetName,\r
-               targetContent = $('div.collapsable_box_content', this.parentNode.parentNode);\r
-       \r
-       if (targetContent.css('display') === 'none') {\r
-               targetContent.slideDown(400);\r
-               $(this).html('-');\r
-               $(this.parentNode).children(".toggle_box_edit_panel").fadeIn('medium');\r
-\r
-               // set cookie for widget panel open-state\r
-               thisWidgetName = $(this.parentNode.parentNode.parentNode).attr('id');\r
-               elgg.session.cookie(thisWidgetName, 'expanded', {expires: 365});\r
-\r
-       } else {\r
-               targetContent.slideUp(400);\r
-               $(this).html('+');\r
-               $(this.parentNode).children(".toggle_box_edit_panel").fadeOut('medium');\r
-               // make sure edit pane is closed\r
-               $(this.parentNode.parentNode).children(".collapsable_box_editpanel").hide();\r
-\r
-               // set cookie for widget panel closed-state\r
-               thisWidgetName = $(this.parentNode.parentNode.parentNode).attr('id');\r
-               elgg.session.cookie(thisWidgetName, 'collapsed', {expires: 365});\r
-       }\r
-       return false;\r
-};\r
-\r
-/**\r
- * @deprecated Use elgg.ui.widgets.*\r
- */\r
-var toggleContent =    elgg.ui.widgets.toggleContent,\r
-    widget_moreinfo =  elgg.ui.widgets.moreinfo,\r
-    widget_state =     elgg.ui.widgets.state,\r
-    outputWidgetList = elgg.ui.widgets.outputList;\r
-\r

diff --git a/views/default/css/screen.php b/views/default/css/screen.php
index 971b5b7341b4fc8c685b55c33cc7c8d00fa4009b..a96aaaa9008f1d4db8765433746850b19bf32c0d 100644 (file)
--- 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(<?php echo elgg_get_site_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(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -198px 3px;
 }
-a.widget-edit-button {
+a.elgg-widget-edit-button {
        right: 25px;
        background:transparent url(<?php echo elgg_get_site_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 d109693e107859fef6ae1aad902806ae256c8344..1ba274aa6960e7fa17189955d12b1e7e8d40274b 100644 (file)
--- 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";
 
 ?>
-<div class="widget draggable <?php echo $widget_instance?>" id="<?php echo $widget_id; ?>">
-       <div class="widget-title drag-handle">
+<div class="elgg-widget draggable <?php echo $widget_instance?>" id="<?php echo $widget_id; ?>">
+       <div class="elgg-widget-title drag-handle">
                <h3><?php echo $title; ?></h3>
        </div>
        <?php
@@ -32,13 +32,13 @@ $widget_instance = "widget-instance-$handler";
                echo elgg_view('layout/objects/widget/controls', array('widget' => $widget));
        }
        ?>
-       <div class="widget-container">
+       <div class="elgg-widget-container">
                <?php
                if ($can_edit) {
                        echo elgg_view('layout/objects/widget/settings', array('widget' => $widget));
                }
                ?>
-               <div class="widget-content">
+               <div class="elgg-widget-content">
                        <?php
                        if (elgg_view_exists("widgets/$handler/content")) {
                                echo elgg_view("widgets/$handler/content", $vars);

diff --git a/views/default/layout/objects/widget/controls.php b/views/default/layout/objects/widget/controls.php
index 5e6aaf193c7856e201fb0a573c89080c95d6562d..b07a42e22337d4543fe30f6f48317b01168ad4e1 100644 (file)
--- a/views/default/layout/objects/widget/controls.php
+++ b/views/default/layout/objects/widget/controls.php
@@ -11,8 +11,8 @@ $widget = $vars['widget'];
 $params = array(
        'text' => ' ',
        '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
-<div class="widget-controls">
+<div class="elgg-widget-controls">
        $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 5814e5821facdb731149cc03bae84a85ebd22607..c1e00c3f1d3836ac40a152191022dfe67b2d76df 100644 (file)
--- a/views/default/layout/objects/widget/settings.php
+++ b/views/default/layout/objects/widget/settings.php
@@ -33,7 +33,7 @@ $body = <<<___END
 ___END;
 
 ?>
-<div class="widget-edit">
+<div class="elgg-widget-edit">
 <?php
 $params = array(
        'body' => $body,

diff --git a/views/default/layout/shells/widgets.php b/views/default/layout/shells/widgets.php
index e35e8c6c48a45348dbabae51d53609841f677eb0..0c21e7042faacb67faaed60d3aebac290de7fa52 100644 (file)
--- 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 "<div class=\"$widget_class elgg-widgets\" id=\"widget-col-$column_index\">";
+       echo "<div class=\"$widget_class elgg-widgets\" id=\"elgg-widget-col-$column_index\">";
        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 d281a2ffadff868d6d5c36dbf41d756d154ab9f5..492f0f6fc29eee97245b3eed2d515fa2ba86d24b 100644 (file)
--- a/views/default/layout/shells/widgets/add_button.php
+++ b/views/default/layout/shells/widgets/add_button.php
@@ -1,13 +1,8 @@
 <?php
-
-?>
-<div id="widget-add-button">
-<?php
-$options = array(
-       'href' => '#',
-       'text' => elgg_echo('widgets:add'),
-       'class' => 'elgg-action-button',
-);
-echo elgg_view('output/url', $options);
+/**
+ * Button area for showing the add widgets panel
+ */
 ?>
+<div class="elgg-widget-add-control elgg-toggle" id="elgg-toggler-add-widgets">
+       <a class="elgg-action-button"><?php echo elgg_echo('widgets:add'); ?></a>
 </div>

diff --git a/views/default/layout/shells/widgets/add_panel.php b/views/default/layout/shells/widgets/add_panel.php
index d9acc55189e82bb8c6489fd846629efa6a77aaab..1e2dc3bbc716b69a0124436876c5d37385711731 100644 (file)
--- 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) {
 }
 
 ?>
-<div class="widgets-add-panel hidden">
+<div class="elgg-widgets-add-panel hidden" id="elgg-togglee-add-widgets">
        <p>
                <?php echo elgg_echo('widgets:add:description'); ?>
        </p>
        <ul>
 <?php
                foreach ($widget_types as $handler => $widget_type) {
-                       $id = "widget-type-$handler";
+                       $id = "elgg-widget-type-$handler";
                        // check if widget added and only one instance allowed
                        if ($widget_type->multiple == false && in_array($handler, $current_handlers)) {
-                               $class = 'widget-unavailable';
+                               $class = 'elgg-widget-unavailable';
                                $tooltip = elgg_echo('widget:unavailable');
                        } else {
-                               $class = 'widget-available';
+                               $class = 'elgg-widget-available';
                                $tooltip = $widget_type->description;
                        }
 
                        if ($widget_type->multiple) {
-                               $class .= ' widget-multiple';
+                               $class .= ' elgg-widget-multiple';
                        } else {
-                               $class .= ' widget-single';
+                               $class .= ' elgg-widget-single';
                        }
 
                        echo "<li title=\"$tooltip\" id=\"$id\" class=\"$class\">$widget_type->name</li>";
@@ -42,7 +42,7 @@ foreach ($widgets as $column_widgets) {
        </ul>
 <?php
        $params = array(
-               'internalname' => 'widget-context',
+               'internalname' => 'widget_context',
                'value' => $context
        );
        echo elgg_view('input/hidden', $params);