Krinkle has uploaded a new change for review.
https://gerrit.wikimedia.org/r/183157
Change subject: overlay: Simplify mw-echo-grey-link by using delegate selector
......................................................................
overlay: Simplify mw-echo-grey-link by using delegate selector
Instead of giving the class to each link indivually and running
a query selector on each hover toggling it on each link, apply
it to the parent only and use CSS cascading behaviour to do the
rest natively.
Can't remove JS completely because we need not-hover. This
exists in CSS3 as :not(:hover), and supported since old versions
of Chrome, Firefox and Opera; but only IE9+.
Change-Id: I2e9aa1de171530d76491ea7404edf87e513c2bfc
---
M modules/overlay/ext.echo.overlay.js
M modules/overlay/ext.echo.overlay.less
2 files changed, 13 insertions(+), 24 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/57/183157/1
diff --git a/modules/overlay/ext.echo.overlay.js
b/modules/overlay/ext.echo.overlay.js
index e2c2c20..674d2f2 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -110,7 +110,7 @@
'data-notification-event': data.id,
'data-notification-type': data.type
} )
- .addClass(
'mw-echo-notification' );
+ .addClass(
'mw-echo-notification mw-echo-has-grey-links' );
if ( !data['*'] ) {
return;
@@ -131,17 +131,12 @@
}
}
- // Grey links in the notification title and
footer (except on hover)
- $li.find( '.mw-echo-title a,
.mw-echo-notification-footer a' )
- .addClass( 'mw-echo-grey-link' );
- $li.hover(
- function() {
- $( this ).find( '.mw-echo-title
a' ).removeClass( 'mw-echo-grey-link' );
- },
- function() {
- $( this ).find( '.mw-echo-title
a' ).addClass( 'mw-echo-grey-link' );
- }
- );
+ // Remove grey links in the notification title
and footer on hover
+ // TODO: Use CSS3 ":not(:hover)" once supported
in enough browsers
+ $li.hover( function () {
+ $(this).toggleClass(
'mw-echo-has-grey-links' );
+ } );
+
// 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.
@@ -231,24 +226,18 @@
{ url: $prefLink.attr( 'href' ) +
'#mw-prefsection-echo', text: $prefLink.text(),
className: 'mw-echo-icon-cog' }
],
- $overlayFooter = $( '<div
class="mw-echo-overlay-footer">' );
+ $overlayFooter = $( '<div
class="mw-echo-overlay-footer mw-echo-has-grey-links">' )
+ .hover( function () {
+ $( this ).toggleClass(
'mw-echo-has-grey-links' );
+ } );
$.each( links, function( i, link ) {
- $( '<a class="mw-echo-grey-link">' )
+ $( '<a>' )
.attr( 'href', link.url )
.addClass( link.className )
.text( link.text )
.appendTo( $overlayFooter );
} );
- // add link to notifications archive
- $overlayFooter.find( 'a' ).hover(
- function() {
- $( this ).removeClass(
'mw-echo-grey-link' );
- },
- function() {
- $( this ).addClass( 'mw-echo-grey-link'
);
- }
- );
return $overlayFooter;
},
diff --git a/modules/overlay/ext.echo.overlay.less
b/modules/overlay/ext.echo.overlay.less
index 43b5e80..9571b47 100644
--- a/modules/overlay/ext.echo.overlay.less
+++ b/modules/overlay/ext.echo.overlay.less
@@ -131,7 +131,7 @@
}
}
-.mw-echo-grey-link {
+.mw-echo-has-grey-links a {
color: @colorTextLight;
}
--
To view, visit https://gerrit.wikimedia.org/r/183157
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2e9aa1de171530d76491ea7404edf87e513c2bfc
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Krinkle <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
