Going wild with pointer-events
authorAlexander Ebert <ebert@woltlab.com>
Mon, 24 Nov 2014 21:58:39 +0000 (22:58 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 24 Nov 2014 21:58:39 +0000 (22:58 +0100)
wcfsetup/install/files/js/WCF.User.js
wcfsetup/install/files/style/dropdown.less

index b02e8a5aa47a8094507d399e7eef3fc93c245041..d409f7184615d9af35c5c40f4a0ec661f61d2a5d 100644 (file)
@@ -1352,18 +1352,18 @@ WCF.Notification.UserPanel = WCF.UserPanel.extend({
         * @see WCF.UserPanel._after()
         */
        _after: function(dropdownMenu) {
-               WCF.Dropdown.getDropdownMenu(this._container.wcfIdentify()).children('li.jsNotificationItem').click(function(event) {
-                       if (event.target.tagName !== 'A') {
-                               var $item = $(this);
-                               if ($item.data('link')) {
+               var $items = WCF.Dropdown.getDropdownMenu(this._container.wcfIdentify()).children('li.jsNotificationItem');
+               
+               $items.each(function(index, item) {
+                       var $item = $(item);
+                       
+                       $('<a href="' + $item.data('link') + '" class="notificationItemLink" />').appendTo($item);
+                       
+                       $item.click(function(event) {
+                               if (event.target.tagName !== 'A') {
                                        window.location = $item.data('link');
-                                       
-                                       return false;
                                }
-                               
-                               event.stopPropagation();
-                               return false;
-                       }
+                       });
                });
        },
        
index ea2e9dacaa2753590d2941fa6248c51a037c22b2..035237e725a436ff739a036253c37814abac4768 100644 (file)
                }
                
                &.notificationItem {
+                       position: relative;
+                       
                        &.groupedNotificationItem > span {
                                > div:first-child {
                                        padding: 4px 2px 2px;
                        }
                        
                        > span {
-                               cursor: pointer;
+                               pointer-events: none;
+                               position: relative;
                                white-space: normal;
+                               z-index: 10;
+                               
+                               a {
+                                       pointer-events: all;
+                               }
+                       }
+                       
+                       > a.notificationItemLink {
+                               bottom: 0;
+                               left: 0;
+                               position: absolute;
+                               right: 0;
+                               top: 0;
+                               z-index: 1;
                        }
                }
        }