From dff15dbb5afdf7824b61f70182cb2c98ae76e0e8 Mon Sep 17 00:00:00 2001 From: "Amir E. Aharoni" Date: Thu, 4 Dec 2014 11:25:40 +0200 Subject: [PATCH] Update from upstream jquery.uls Allow configurable panel width instead of hardcoded 4 columns of languages. Change-Id: I163d7501598bdf6098a00432f53d56babe10a1a9 --- lib/jquery.uls/css/jquery.uls.css | 24 +++++++++++++++++++ lib/jquery.uls/src/jquery.uls.core.js | 24 ++++++++++++++++--- lib/jquery.uls/src/jquery.uls.lcd.js | 34 +++++++++++++++++++++------ 3 files changed, 72 insertions(+), 10 deletions(-) diff --git a/lib/jquery.uls/css/jquery.uls.css b/lib/jquery.uls/css/jquery.uls.css index 4e80c6bf..6074e608 100644 --- a/lib/jquery.uls/css/jquery.uls.css +++ b/lib/jquery.uls/css/jquery.uls.css @@ -31,6 +31,26 @@ width: 45%; } +.uls-medium { + min-width: 360px; + width: 30%; +} + +/* Override the grid */ +.uls-medium.grid .row { + min-width: 300px; +} + +.uls-narrow { + min-width: 180px; + width: 20%; +} + +/* Override the grid */ +.uls-narrow.grid .row { + min-width: 150px; +} + .uls-title-region a { padding-left: 15px; } @@ -221,6 +241,10 @@ div.uls-region { float: right; } +.uls-menu.uls-narrow .uls-search-label { + background-size: 20px; +} + .uls-menu .uls-languagefilter-clear { /* @embed */ background: transparent url('../images/clear.png') no-repeat scroll left center; diff --git a/lib/jquery.uls/src/jquery.uls.core.js b/lib/jquery.uls/src/jquery.uls.core.js index 8852d59e..e2597284 100644 --- a/lib/jquery.uls/src/jquery.uls.core.js +++ b/lib/jquery.uls/src/jquery.uls.core.js @@ -25,7 +25,7 @@ // Region numbers in id attributes also appear in the langdb. /*jshint multistr:true */ - template = '
\ + template = '
\
\ \
\ @@ -144,9 +144,12 @@ * @returns {Object} */ position: function () { - var pos = $.extend( {}, this.$element.offset(), { + var pos; + + pos = $.extend( {}, this.$element.offset(), { height: this.$element[0].offsetHeight } ); + return { top: this.top !== undefined ? this.top : pos.top + pos.height, left: this.left !== undefined ? this.left : '25%' @@ -157,6 +160,13 @@ * Show the ULS window */ show: function () { + var widthClasses = { + wide: 'uls-wide', + medium: 'uls-medium', + narrow: 'uls-narrow' + }; + + this.$menu.addClass( widthClasses[this.options.menuWidth] ); this.$menu.css( this.position() ); if ( this.options.compact ) { @@ -237,9 +247,15 @@ * Bind the UI elements with their event listeners */ listen: function () { - var lcd, + var lcd, columnsOptions, uls = this; + columnsOptions = { + wide: 4, + medium: 2, + narrow: 1 + }; + // Register all event listeners to the ULS here. this.$element.on( 'click', $.proxy( this.click, this ) ); @@ -264,6 +280,7 @@ lcd = this.$resultsView.lcd( { languages: this.languages, + columns: columnsOptions[this.options.menuWidth], quickList: this.options.quickList, clickhandler: $.proxy( this.select, this ), source: this.$languageFilter, @@ -401,6 +418,7 @@ languages: $.uls.data.getAutonyms(), // Languages to be used for ULS, default is all languages quickList: null, // Array of language codes or function that returns such compact: false, // Show ULS in compact mode + menuWidth: 'wide', // The options are wide (4 columns), medium (2 columns), and narrow (1 column) showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ], languageDecorator: null // Callback function to be called when a language link is prepared - for custom decoration. }; diff --git a/lib/jquery.uls/src/jquery.uls.lcd.js b/lib/jquery.uls/src/jquery.uls.lcd.js index 8ae56388..3c072490 100644 --- a/lib/jquery.uls/src/jquery.uls.lcd.js +++ b/lib/jquery.uls/src/jquery.uls.lcd.js @@ -152,9 +152,8 @@ * Renders a region and displays it if it has content. */ renderRegions: function () { - var lcd = this, languages, - items = lcd.options.itemsPerColumn, - columns = 4; + var languages, + lcd = this; this.$noResults.addClass( 'hide' ); this.$element.find( '.uls-lcd-region-section' ).each( function () { @@ -173,7 +172,12 @@ return; } - lcd.renderRegion( $region, languages, items, columns ); + lcd.renderRegion( + $region, + languages, + lcd.options.itemsPerColumn, + lcd.options.columns + ); $region.removeClass( 'hide' ); lcd.regionLanguages[regionCode] = []; @@ -189,12 +193,20 @@ * @param {number} columnsPerRow How many columns fit in a row. */ renderRegion: function( $region, languages, itemsPerColumn, columnsPerRow ) { - var i, lastItem, currentScript, nextScript, force, + var columnsClasses, i, lastItem, currentScript, nextScript, force, len = languages.length, items = [], columns = [], rows = []; + if ( columnsPerRow === 1 ) { + columnsClasses = 'twelve columns'; + } else if ( columnsPerRow === 2 ) { + columnsClasses = 'six columns'; + } else { + columnsClasses = 'three columns'; + } + for ( i = 0; i < len; i++ ) { force = false; nextScript = $.uls.data.getScriptGroupOfLanguage( languages[i+1] ); @@ -211,7 +223,7 @@ items.push( this.renderItem( languages[i] ) ); if ( items.length >= itemsPerColumn || lastItem || force ) { - columns.push( $( '
    ' ).addClass( 'three columns' ).append( items ) ); + columns.push( $( '
      ' ).addClass( columnsClasses ).append( items ) ); items = []; if ( columns.length >= columnsPerRow || lastItem ) { rows.push( $( '
      ' ).addClass( 'row uls-language-block' ).append( columns ) ); @@ -294,7 +306,12 @@ .text( 'Common languages' ); // This is placeholder text if jquery.i18n not present $quickListSection.append( $quickListSectionTitle ); - this.renderRegion( $quickListSection, quickList, 4, 4 ); + this.renderRegion( + $quickListSection, + quickList, + this.options.itemsPerColumn, + this.options.columns + ); $quickListSectionTitle.i18n(); @@ -389,6 +406,9 @@ languages: null, showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'], itemsPerColumn: 8, + // Other supported values are 1 and 2. + // Other values will have rendering issues. + columns: 4, languageDecorator: null };