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

For narrow ULS show one column without separators

Browse Source
This commit is contained in:
Amir E. Aharoni
2014-12-09 16:35:16 +02:00
committed by Santhosh Thottingal
parent 94e867f62e
commit f44302106b
3 changed files with 109 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/jquery.uls.css
View File

@@ -242,7 +242,7 @@ div.uls-region {
} }
.uls-menu.uls-narrow .uls-search-label { .uls-menu.uls-narrow .uls-search-label {
background-size: 20px; background-size: 18px;
} }
.uls-menu .uls-languagefilter-clear { .uls-menu .uls-languagefilter-clear {

53
examples/index-narrow.html Normal file
View 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
src/jquery.uls.lcd.js
View File

@@ -80,10 +80,21 @@
return false; return false;
} }
if ( regionCode ) { // Show everything in one region when there is only one column
regions = [regionCode]; 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 { } else {
regions = $.uls.data.getRegions( langCode ); if ( regionCode ) {
regions = [regionCode];
} else {
regions = $.uls.data.getRegions( langCode );
}
} }
// Worldwides only displayed once // Worldwides only displayed once
@@ -124,7 +135,10 @@
regions.push( this.buildQuicklist() ); regions.push( this.buildQuicklist() );
$.each( $.uls.data.regiongroups, function ( regionCode ) { $.each( $.uls.data.regiongroups, function ( regionCode ) {
var $regionTitle;
lcd.regionLanguages[regionCode] = []; lcd.regionLanguages[regionCode] = [];
// Don't show the region unless it was enabled // Don't show the region unless it was enabled
if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) { if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) {
return; return;
@@ -132,13 +146,16 @@
$section = $( '<div>' ) $section = $( '<div>' )
.addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' ) .addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' )
.attr( 'id', regionCode ) .attr( 'id', regionCode );
.append(
$( '<h3>' ) // 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 ) .attr( 'data-i18n', 'uls-region-' + regionCode )
.addClass( 'eleven columns uls-lcd-region-title' ) .addClass( 'eleven columns uls-lcd-region-title' )
.text( regionNames[regionCode] ) .text( regionNames[regionCode] )
); );
};
regions.push( $section ); regions.push( $section );
} ); } );
@@ -194,7 +211,7 @@
*/ */
renderRegion: function( $region, languages, itemsPerColumn, columnsPerRow ) { renderRegion: function( $region, languages, itemsPerColumn, columnsPerRow ) {
var columnsClasses, i, lastItem, currentScript, nextScript, force, var columnsClasses, i, lastItem, currentScript, nextScript, force,
len = languages.length, languagesCount = languages.length,
items = [], items = [],
columns = [], columns = [],
rows = []; rows = [];
@@ -207,27 +224,40 @@
columnsClasses = 'three columns'; columnsClasses = 'three columns';
} }
for ( i = 0; i < len; i++ ) { if ( this.options.columns === 1 ) {
force = false; // For one-column narrow ULS, just render all the languages
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[i+1] ); // in one simple list without separators or script groups
for ( i = 0; i < languagesCount; i++ ) {
lastItem = len - i === 1; items.push( this.renderItem( languages[i] ) );
// Force column break if script changes and column has more than one row already
if ( i === 0 ) {
currentScript = $.uls.data.getScriptGroupOfLanguage( languages[i] );
} else if ( currentScript !== nextScript && items.length > 1 ) {
force = true;
} }
currentScript = nextScript;
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] );
if ( items.length >= itemsPerColumn || lastItem || force ) { lastItem = languagesCount - i === 1;
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) ); // Force column break if script changes and column has more than one row already
items = []; if ( i === 0 ) {
if ( columns.length >= columnsPerRow || lastItem ) { currentScript = $.uls.data.getScriptGroupOfLanguage( languages[i] );
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) ); } else if ( currentScript !== nextScript && items.length > 1 ) {
columns = []; force = true;
}
currentScript = nextScript;
items.push( this.renderItem( languages[i] ) );
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 = [];
}
} }
} }
} }