Added abstract class for UserPanel items
authorAlexander Ebert <ebert@woltlab.com>
Mon, 26 Nov 2012 16:30:39 +0000 (17:30 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 26 Nov 2012 16:30:39 +0000 (17:30 +0100)
WCF.UserPanel supports the dynamic conversion from a static link into a dynamic dropdown menu with AJAX support. Using this class ensures that every menu item remains usable even if someone decides to cripple their browser with disabled JavaScript support.

wcfsetup/install/files/js/WCF.js

index 6bb288df19ac6a4f7cb390b76f2566281266427a..4d3f1b592867db9e7e0a3ea0c3771b07fd900192 100755 (executable)
@@ -7030,6 +7030,139 @@ WCF.Style.Chooser = Class.extend({
        }
 });
 
+/**
+ * Converts static user panel items into interactive dropdowns.
+ * 
+ * @param      string          containerID
+ */
+WCF.UserPanel = Class.extend({
+       /**
+        * target container
+        * @var jQuery
+        */
+       _container: null,
+       
+       /**
+        * initialization state
+        * @var boolean
+        */
+       _didLoad: false,
+       
+       /**
+        * original link element
+        * @var jQuery
+        */
+       _link: null,
+       
+       /**
+        * reverts to original link if return values are empty
+        * @var boolean
+        */
+       _revertOnEmpty: true,
+       
+       /**
+        * Initialites the WCF.UserPanel class.
+        * 
+        * @param       string          containerID
+        */
+       init: function(containerID) {
+               this._container = $('#' + containerID);
+               this._didLoad = false;
+               this._revertOnEmpty = true;
+               
+               if (this._container.length != 1) {
+                       console.debug("[WCF.UserPanel] Unable to find container identfied by '" + containerID + "', aborting.");
+                       return;
+               }
+               
+               if (this._container.data('count')) {
+                       this._convert();
+               }
+       },
+       
+       /**
+        * Converts link into an interactive dropdown menu.
+        */
+       _convert: function() {
+               WCF.DOMNodeInsertedHandler.enable();
+               
+               this._container.addClass('dropdown');
+               this._link = this._container.children('a').remove();
+               
+               $('<a class="dropdownToggle jsTooltip" title="' + this._container.data('title') + '">' + this._link.html() + '</a>').appendTo(this._container).click($.proxy(this._click, this));
+               var $dropdownMenu = $('<ul class="dropdownMenu" />').appendTo(this._container);
+               $('<li class="jsDropdownPlaceholder"><span>' + WCF.Language.get('wcf.global.loading') + '</span></li>').appendTo($dropdownMenu);
+               
+               this._addDefaultItems($dropdownMenu);
+               
+               WCF.DOMNodeInsertedHandler.disable();
+       },
+       
+       /**
+        * Adds default items to dropdown menu.
+        * 
+        * @param       jQuery          dropdownMenu
+        */
+       _addDefaultItems: function(dropdownMenu) { },
+       
+       /**
+        * Adds a dropdown divider.
+        * 
+        * @param       jQuery          dropdownMenu
+        */
+       _addDivider: function(dropdownMenu) {
+               $('<li class="dropdownDivider" />').appendTo(dropdownMenu);
+       },
+       
+       /**
+        * Handles clicks on the dropdown item.
+        */
+       _click: function() {
+               if (this._didLoad) {
+                       return;
+               }
+               
+               new WCF.Action.Proxy({
+                       autoSend: true,
+                       data: this._getParameters(),
+                       success: $.proxy(this._success, this)
+               });
+               
+               this._didLoad = true;
+       },
+       
+       /**
+        * Returns a list of parameters for AJAX request.
+        * 
+        * @return      object
+        */
+       _getParameters: function() {
+               return { };
+       },
+       
+       /**
+        * Handles successful AJAX requests.
+        * 
+        * @param       object          data
+        * @param       string          textStatus
+        * @param       jQuery          jqXHR
+        */
+       _success: function(data, textStatus, jqXHR) {
+               if (data.returnValues && data.returnValues.template) {
+                       var $dropdownMenu = this._container.children('.dropdownMenu');
+                       $dropdownMenu.children('.jsDropdownPlaceholder').remove();
+                       $('' + data.returnValues.template).prependTo($dropdownMenu);
+               }
+               else {
+                       this._container.removeClass('dropdown').empty();
+                       this._link.appendTo(this._container);
+                       
+                       // remove badge
+                       this._container.find('.badge').remove();
+               }
+       }
+});
+
 /**
  * WCF implementation for nested sortables.
  */