bryce/jquery.uls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust styles and code to support custom list bullets

Browse Source 
Tweak specificty of the rule that hides bullets so that it is easy
to override.

Move dir and lang attributes from <li> to <a> so that the bullets
appear on the correct side for reverse directionality scripts.

Change-Id: Ic0d0c5220b0b374c2a3a19023c40d81f3e20007c
This commit is contained in:
Niklas Laxström
2016-06-02 09:24:56 +02:00
committed by Santhosh Thottingal
parent 20eea5de9f
commit 25775dd147
3 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
css/jquery.uls.lcd.css
View File

@@ -18,20 +18,19 @@
margin: 0 0 1.5em; margin: 0 0 1.5em;
} }
.uls-language-list ul li { .uls-language-list ul {
cursor: pointer;
font-weight: normal;
overflow: hidden;
white-space: nowrap;
/* /*
* Some languages have long names for various reasons and we still want * We don't want any visible bullets in this list. Not by default anyway.
* them to appear on one line. * Using very unspecific selector here to allow other classes to override.
* To make it work correctly, the directionality must be set correctly * Bug because overflow: hidden is incompatible with bullets, also render
* on the item level. * the bullets inside the list in case there should be any.
*/ */
text-overflow: ellipsis; list-style-image: none;
list-style-type: none;
}
.uls-language-list li {
cursor: pointer;
/* /*
* The directionality (ltr/rtl) for each list item is set dynamically * The directionality (ltr/rtl) for each list item is set dynamically
* as HTML attributes in JavaScript. Setting directionality also applies * as HTML attributes in JavaScript. Setting directionality also applies
@@ -42,14 +41,9 @@
* is readable. * is readable.
*/ */
text-align: left; text-align: left;
/*
* We don't want any visible bullets in this list.
*/
list-style-image: none;
list-style-type: none;
} }
/* TODO: looks unused */
.uls-language-list strong { .uls-language-list strong {
text-decoration: underline; text-decoration: underline;
} }
@@ -60,6 +54,18 @@
color: #3366bb; color: #3366bb;
font-size: 14px; font-size: 14px;
line-height: 1.6em; line-height: 1.6em;
display: inline-block;
width: 100%;
overflow: hidden;
/*
* Some languages have long names for various reasons and we still want
* them to appear on one line.
* To make it work correctly, the directionality must be set correctly
* on the item level.
*/
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
} }
.uls-language-block { .uls-language-block {

8
examples/decorator.html
View File

@@ -21,11 +21,19 @@
$( document ).ready( function () { $( document ).ready( function () {
$( '.uls-trigger' ).uls( { $( '.uls-trigger' ).uls( {
languageDecorator: function ( $language, languageCode ) { languageDecorator: function ( $language, languageCode ) {
if ( languageCode.indexOf( 'm' ) >= 0 ) {
$language.parent().addClass( 'badge' );
}
$language.prop( 'href', '//' + languageCode + '.wikipedia.org' ); $language.prop( 'href', '//' + languageCode + '.wikipedia.org' );
}, },
} ); } );
} ); } );
</script> </script>
<style>
.badge {
list-style-type: square;
}
</style>
</head> </head>
<body> <body>

5
src/jquery.uls.lcd.js
View File

@@ -273,13 +273,14 @@
// Not using jQuery as this is performance hotspot // Not using jQuery as this is performance hotspot
li = document.createElement( 'li' ); li = document.createElement( 'li' );
li.title = name; li.title = name;
li.lang = code;
li.dir = $.uls.data.getDir( code );
li.setAttribute( 'data-code', code ); li.setAttribute( 'data-code', code );
a = document.createElement( 'a' ); a = document.createElement( 'a' );
a.appendChild( document.createTextNode( autonym ) ); a.appendChild( document.createTextNode( autonym ) );
a.className = 'autonym'; a.className = 'autonym';
a.lang = code;
a.dir = $.uls.data.getDir( code );
li.appendChild( a ); li.appendChild( a );
if ( this.options.languageDecorator ) { if ( this.options.languageDecorator ) {