wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-09-24 02:39:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make items on notifications flyout behave like links

Browse source 
We want the notifications in the flyout to behave just like links,
including standard middle-click and Ctrl-click behavior. The simplest
way to do that would be to actually make them links - but the area can
contain a few other links, so we can't do that and have to resort to
ugly hacks.

Or do we?

Turns out that while browsers won't accept HTML containing nested <a>
tags[1], such a structure is valid XHTML, and it's possible to create
such structure in HTML mode using DOM manipulation. It works like one
would expect: the entire thing is clickable, but inner <a> tags' hrefs
override outer ones.

Firefox even had a request to make that work[2] which was happily
fulfilled.

Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15
(which uses the Blink engine like Chrome), IE 8 and IE 6 and it works
the same on all of them. Tested the XHTML variant [see below] on all
of the above except for the IEs which don't grok XHTML and it exhibits
the same behavior.

[1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is
    "1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one
    might expect.
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959

----

The test cases used are below. When trying out the XHTML one make sure
that the browser uses application/xhtml+xml MIME type; saving the file
with .xhtml extension should be enough.

XHTML:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
  <div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div>
  </body>
  </html>

HTML:
  <!DOCTYPE html>
  <html>
  <body>
  <script type="text/javascript">
  var div = document.createElement('div');
  var a1 = document.createElement('a');
  a1.href = "http://google.com/";
  var a2 = document.createElement('a');
  a2.href = "http://example.com/";

  div.appendChild( document.createTextNode('1') );
  div.appendChild( a1 );
  a1.appendChild( document.createTextNode('2') );
  a1.appendChild( a2 );
  a2.appendChild( document.createTextNode('3') );
  a1.appendChild( document.createTextNode('4') );
  div.appendChild( document.createTextNode('5') );

  document.body.appendChild(div);
  </script>
  </body>
  </html>

----

Bug: 52319
Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
This commit is contained in:
MatmaRex 2013-08-05 23:10:08 +02:00 committed by Matmarex
parent ac59d1344f
commit 6cade7eba3
2 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
modules/overlay/ext.echo.overlay.css
View file

@ -29,26 +29,33 @@
overflow: auto;
}
#p-personal .mw-echo-overlay li.mw-echo-notification {
background-color: #F1F1F1;
display: block;
float: none;
margin: 0;
padding: 0;
}
#p-personal .mw-echo-overlay li.mw-echo-notification .mw-echo-notification-wrapper {
display: block;
background-color: #F1F1F1;
border-bottom: 1px solid #DDDDDD;
padding: 15px 40px 10px 10px;
margin: 0;
white-space: normal;
font-size: 13px;
line-height: 16px;
/* Suppress standard links styles */
color: inherit;
text-decoration: inherit;
}
#p-personal .mw-echo-overlay li.mw-echo-notification:hover {
#p-personal .mw-echo-overlay li.mw-echo-notification:hover .mw-echo-notification-wrapper {
background-color: #F9F9F9;
}
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread {
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread .mw-echo-notification-wrapper {
background-color: white;
}
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread:hover {
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread:hover .mw-echo-notification-wrapper {
background-color: #F9F9F9;
}
#p-personal .mw-echo-overlay li.mw-echo-notification:last-child {
#p-personal .mw-echo-overlay li.mw-echo-notification:last-child .mw-echo-notification-wrapper {
border-bottom: none;
}
#p-personal .mw-echo-title a {

26
modules/overlay/ext.echo.overlay.js
View file

@ -56,7 +56,8 @@
}
$ul.css( 'max-height', notificationLimit * 95 + 'px' );
$.each( notifications.index, function ( index, id ) {
var data = notifications.list[id],
var $wrapper,
data = notifications.list[id],
$li = $( '<li></li>' )
.data( 'details', data )
.data( 'id', id )
@ -81,17 +82,24 @@
}
);
// If there is a primary link, make the entire notification clickable.
// Yes, it is possible to nest <a> tags via DOM manipulation,
// and it works like one would expect.
if ( $li.find( '.mw-echo-notification-primary-link' ).length ) {
$li.css( 'cursor', 'pointer' );
$li.click( function() {
if ( mw.echo.clickThroughEnabled ) {
// Log the clickthrough
mw.echo.logInteraction( 'notification-link-click', 'flyout', +data.id, data.type );
}
window.location.href = $li.find( '.mw-echo-notification-primary-link' ).attr( 'href' );
} );
$wrapper = $( '<a>' )
.addClass( 'mw-echo-notification-wrapper' )
.attr( 'href', $li.find( '.mw-echo-notification-primary-link' ).attr( 'href' ) )
.click( function() {
if ( mw.echo.clickThroughEnabled ) {
// Log the clickthrough
mw.echo.logInteraction( 'notification-link-click', 'flyout', +data.id, data.type );
}
} );
} else {
$wrapper = $('<div>').addClass( 'mw-echo-notification-wrapper' );
}
$li.wrapInner( $wrapper );
mw.echo.setupNotificationLogging( $li, 'flyout' );
if ( !data.read ) {