For narrow ULS show one column without separators
This commit is contained in:
Amir E. Aharoni
committed by
Santhosh Thottingal
Santhosh Thottingal
parent
94e867f62e
commit
f44302106b
@@ -242,7 +242,7 @@ div.uls-region {
|
||||
}
|
||||
|
||||
.uls-menu.uls-narrow .uls-search-label {
|
||||
background-size: 20px;
|
||||
background-size: 18px;
|
||||
}
|
||||
|
||||
.uls-menu .uls-languagefilter-clear {
|
||||
|
||||
53
examples/index-narrow.html
Normal file
53
examples/index-narrow.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Universal Language Selector</title>
|
||||
<link href="../css/jquery.uls.css" rel="stylesheet">
|
||||
<link href="../css/jquery.uls.grid.css" rel="stylesheet">
|
||||
<link href="../css/jquery.uls.lcd.css" rel="stylesheet">
|
||||
<link href="../css/jquery.uls.compact.css" rel="stylesheet">
|
||||
<!-- demo -->
|
||||
<link href="resources/demo.css" rel="stylesheet">
|
||||
<!-- Libs -->
|
||||
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
<!-- Source -->
|
||||
<script src="../src/jquery.uls.data.js"></script>
|
||||
<script src="../src/jquery.uls.data.utils.js"></script>
|
||||
<script src="../src/jquery.uls.lcd.js"></script>
|
||||
<script src="../src/jquery.uls.languagefilter.js"></script>
|
||||
<script src="../src/jquery.uls.regionfilter.js"></script>
|
||||
<script src="../src/jquery.uls.core.js"></script>
|
||||
<script>
|
||||
$( document ).ready( function () {
|
||||
$( '.uls-trigger' ).uls( {
|
||||
languages: {
|
||||
ca: 'català',
|
||||
es: 'español',
|
||||
he: 'עברית',
|
||||
ml: 'മലയാളം',
|
||||
ru: 'русский'
|
||||
},
|
||||
onSelect: function ( language ) {
|
||||
var languageName = $.uls.data.getAutonym( language );
|
||||
$( '.uls-trigger' ).text( languageName );
|
||||
},
|
||||
menuWidth: 'narrow',
|
||||
compact: true
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<span class="active uls-trigger">Select Language</span>
|
||||
<h1>Universal Language Selector</h1>
|
||||
<p>
|
||||
Demonstration of jQuery plugin - In compact mode
|
||||
</p>
|
||||
</div>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -80,11 +80,22 @@
|
||||
return false;
|
||||
}
|
||||
|
||||
// Show everything in one region when there is only one column
|
||||
if ( lcd.options.columns === 1 ) {
|
||||
regions = ['WW'];
|
||||
|
||||
// Languages are expected to be repeated in this case,
|
||||
// and we only want to show them once
|
||||
if ( $.inArray( langCode, this.regionLanguages['WW'] ) > -1 ) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
if ( regionCode ) {
|
||||
regions = [regionCode];
|
||||
} else {
|
||||
regions = $.uls.data.getRegions( langCode );
|
||||
}
|
||||
}
|
||||
|
||||
// Worldwides only displayed once
|
||||
if ( $.inArray( 'WW', regions ) > -1 ) {
|
||||
@@ -124,7 +135,10 @@
|
||||
regions.push( this.buildQuicklist() );
|
||||
|
||||
$.each( $.uls.data.regiongroups, function ( regionCode ) {
|
||||
var $regionTitle;
|
||||
|
||||
lcd.regionLanguages[regionCode] = [];
|
||||
|
||||
// Don't show the region unless it was enabled
|
||||
if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) {
|
||||
return;
|
||||
@@ -132,13 +146,16 @@
|
||||
|
||||
$section = $( '<div>' )
|
||||
.addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' )
|
||||
.attr( 'id', regionCode )
|
||||
.append(
|
||||
$( '<h3>' )
|
||||
.attr( 'id', regionCode );
|
||||
|
||||
// Show a region heading, unless we are using a narrow ULS
|
||||
if ( lcd.options.columns !== 1 ) {
|
||||
$section.append( $( '<h3>' )
|
||||
.attr( 'data-i18n', 'uls-region-' + regionCode )
|
||||
.addClass( 'eleven columns uls-lcd-region-title' )
|
||||
.text( regionNames[regionCode] )
|
||||
);
|
||||
};
|
||||
|
||||
regions.push( $section );
|
||||
} );
|
||||
@@ -194,7 +211,7 @@
|
||||
*/
|
||||
renderRegion: function( $region, languages, itemsPerColumn, columnsPerRow ) {
|
||||
var columnsClasses, i, lastItem, currentScript, nextScript, force,
|
||||
len = languages.length,
|
||||
languagesCount = languages.length,
|
||||
items = [],
|
||||
columns = [],
|
||||
rows = [];
|
||||
@@ -207,11 +224,22 @@
|
||||
columnsClasses = 'three columns';
|
||||
}
|
||||
|
||||
for ( i = 0; i < len; i++ ) {
|
||||
if ( this.options.columns === 1 ) {
|
||||
// For one-column narrow ULS, just render all the languages
|
||||
// in one simple list without separators or script groups
|
||||
for ( i = 0; i < languagesCount; i++ ) {
|
||||
items.push( this.renderItem( languages[i] ) );
|
||||
}
|
||||
|
||||
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
|
||||
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
|
||||
} else {
|
||||
// For medium and wide ULS, clever column placement
|
||||
for ( i = 0; i < languagesCount; i++ ) {
|
||||
force = false;
|
||||
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[i+1] );
|
||||
|
||||
lastItem = len - i === 1;
|
||||
lastItem = languagesCount - i === 1;
|
||||
// Force column break if script changes and column has more than one row already
|
||||
if ( i === 0 ) {
|
||||
currentScript = $.uls.data.getScriptGroupOfLanguage( languages[i] );
|
||||
@@ -225,12 +253,14 @@
|
||||
if ( items.length >= itemsPerColumn || lastItem || force ) {
|
||||
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
|
||||
items = [];
|
||||
|
||||
if ( columns.length >= columnsPerRow || lastItem ) {
|
||||
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
|
||||
columns = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$region.append( rows );
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user