From 25775dd14791d6fa0303b348fc6bdea15749c3a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niklas=20Laxstr=C3=B6m?= Date: Thu, 2 Jun 2016 09:24:56 +0200 Subject: [PATCH] Adjust styles and code to support custom list bullets Tweak specificty of the rule that hides bullets so that it is easy to override. Move dir and lang attributes from
  • to so that the bullets appear on the correct side for reverse directionality scripts. Change-Id: Ic0d0c5220b0b374c2a3a19023c40d81f3e20007c --- css/jquery.uls.lcd.css | 40 +++++++++++++++++++++++----------------- examples/decorator.html | 8 ++++++++ src/jquery.uls.lcd.js | 5 +++-- 3 files changed, 34 insertions(+), 19 deletions(-) diff --git a/css/jquery.uls.lcd.css b/css/jquery.uls.lcd.css index 2a46526..0750927 100644 --- a/css/jquery.uls.lcd.css +++ b/css/jquery.uls.lcd.css @@ -18,20 +18,19 @@ margin: 0 0 1.5em; } -.uls-language-list ul li { - cursor: pointer; - font-weight: normal; - overflow: hidden; - white-space: nowrap; - +.uls-language-list ul { /* - * 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. + * We don't want any visible bullets in this list. Not by default anyway. + * Using very unspecific selector here to allow other classes to override. + * Bug because overflow: hidden is incompatible with bullets, also render + * 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 * as HTML attributes in JavaScript. Setting directionality also applies @@ -42,14 +41,9 @@ * is readable. */ 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 { text-decoration: underline; } @@ -60,6 +54,18 @@ color: #3366bb; font-size: 14px; 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 { diff --git a/examples/decorator.html b/examples/decorator.html index faa264c..eafa96a 100644 --- a/examples/decorator.html +++ b/examples/decorator.html @@ -21,11 +21,19 @@ $( document ).ready( function () { $( '.uls-trigger' ).uls( { languageDecorator: function ( $language, languageCode ) { + if ( languageCode.indexOf( 'm' ) >= 0 ) { + $language.parent().addClass( 'badge' ); + } $language.prop( 'href', '//' + languageCode + '.wikipedia.org' ); }, } ); } ); + diff --git a/src/jquery.uls.lcd.js b/src/jquery.uls.lcd.js index 60754d4..8065c91 100644 --- a/src/jquery.uls.lcd.js +++ b/src/jquery.uls.lcd.js @@ -273,13 +273,14 @@ // Not using jQuery as this is performance hotspot li = document.createElement( 'li' ); li.title = name; - li.lang = code; - li.dir = $.uls.data.getDir( code ); li.setAttribute( 'data-code', code ); a = document.createElement( 'a' ); a.appendChild( document.createTextNode( autonym ) ); a.className = 'autonym'; + a.lang = code; + a.dir = $.uls.data.getDir( code ); + li.appendChild( a ); if ( this.options.languageDecorator ) {