From c2b68e8cbc4605a3bb61200ee17f2de32d1e399f Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Mon, 2 Jun 2014 11:49:25 +0530 Subject: [PATCH] Remove the region selector feature * Maps removed from UI * From no-results UI, removed the links to navigate by clicking region names * Removed the $.fn.regionSelctor plugin, Retained the RegionSelector class * Removed all related css for the removed UI parts * Reduced the padding for main ULS title so that the top header takes less height * And a dozen of related changes Change-Id: I8ac89ebe380047ca267e5c7720c2eaa3da080e9d --- css/jquery.uls.compact.css | 4 +- css/jquery.uls.css | 70 -------------------- i18n/en.json | 40 ++++++------ i18n/qqq.json | 2 +- src/jquery.uls.core.js | 57 ++++------------ src/jquery.uls.languagefilter.js | 2 +- src/jquery.uls.lcd.js | 57 ++++++++-------- src/jquery.uls.regionfilter.js | 108 ++++++------------------------- 8 files changed, 80 insertions(+), 260 deletions(-) diff --git a/css/jquery.uls.compact.css b/css/jquery.uls.compact.css index f5e6e07..5600410 100644 --- a/css/jquery.uls.compact.css +++ b/css/jquery.uls.compact.css @@ -1,7 +1,5 @@ .uls-compact .uls-icon-close, -.uls-compact .uls-title-region, -.uls-compact .uls-map-block, -.uls-compact #uls-settings-block { +.uls-compact .uls-title-region { display: none !important; } diff --git a/css/jquery.uls.css b/css/jquery.uls.css index bf1a788..b821753 100644 --- a/css/jquery.uls.css +++ b/css/jquery.uls.css @@ -7,7 +7,6 @@ background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg'); padding-left: 30px; } - .uls-menu { position: absolute; z-index: 1000; @@ -25,27 +24,21 @@ -moz-background-clip: padding; background-clip: padding-box; } - .uls-wide { min-width: 715px; width: 45%; } - .uls-title-region a { padding-left: 15px; } - .uls-menu .uls-title { font-weight: normal; border: none; - padding-top: 1.25em; padding-left: 15px; - padding-bottom: 3px; font-size: 18pt; line-height: 1.25em; color: #555; } - .uls-menu .uls-no-results-found-title { font-size: 16pt; font-weight: bold; @@ -57,7 +50,6 @@ border-bottom: none; color: #555; } - .uls-menu .uls-lcd-region-section .uls-lcd-region-title { color: #777; font-size: 14pt; @@ -68,7 +60,6 @@ margin-bottom: 10px; border-bottom: none; } - div.uls-region { cursor: pointer; padding: 0; @@ -92,60 +83,6 @@ div.uls-region { width: 99%; } -.uls-region:hover { - /*Cross-browser background transparency*/ - background: #3366bb; - background: rgba(51, 102, 187, 0.1); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb ); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)"; -} - -<<<<<<< HEAD -.uls-map-block .active { - border-bottom-color: #3366bb; - border-bottom-style: solid; -} - -.uls-menu .row .uls-map-block { - top: 1px; - margin-right: 0; - padding-right: 0; - float: right; - overflow: hidden; - opacity: 0.7; - -moz-transition: opacity 0.2s linear; - -o-transition: opacity 0.2s linear; - -webkit-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; -} - -.uls-map-block a { - color: #333; - opacity: 0; - -moz-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - -webkit-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; -} - -.uls-menu .uls-map-block:hover, -.uls-menu .uls-map-block:hover a { - opacity: 1; - color: #333; -} - -.uls-map-block .uls-region-1 { - border-color: transparent; -} - -.uls-map-block:hover .active { - border-color: #3366bb; -} - -.uls-map-block .active a { - font-weight: bold; -} - .uls-icon-close { /* @embed */ background: transparent url('../images/close.png') no-repeat scroll center center; @@ -171,11 +108,9 @@ div.uls-region { -webkit-transition: border 0.15s linear 0s; transition: border 0.15s linear 0s; } - .uls-menu .uls-languagefilter:focus { border: 1px solid #3366bb; } - .uls-menu .uls-search { position: relative; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB'); @@ -193,7 +128,6 @@ div.uls-region { border-bottom-style: solid; border-bottom-color: #DDD; } - .uls-menu .uls-search-label { /* @embed */ background: transparent url('../images/search.png') no-repeat scroll right center; @@ -206,7 +140,6 @@ div.uls-region { width: 32px; float: right; } - .uls-menu .uls-languagefilter-clear { /* @embed */ background: transparent url('../images/clear.png') no-repeat scroll left center; @@ -220,7 +153,6 @@ div.uls-region { width: 32px; margin-left: -32px; } - .uls-menu .uls-filterinput { position: absolute; top: 0; @@ -230,7 +162,6 @@ div.uls-region { width: 100%; text-align: left; } - .uls-menu .uls-filtersuggestion { padding: 6px; background-color: white; @@ -240,7 +171,6 @@ div.uls-region { box-shadow: 0 1px 2px transparent inset; left: 1px; } - .uls-menu .uls-search-input-block { position: relative; } diff --git a/i18n/en.json b/i18n/en.json index 53ff123..53a50ad 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -1,22 +1,22 @@ { -"@metadata": { - "author": "Santhosh Thottingal ", - "last-updated": "2012-09-21", - "locale": "en", - "message-documentation": "qqq" -}, -"uls-select-language": "Select language", -"uls-region-WW": "Worldwide", -"uls-region-SP": "Special", -"uls-region-AM": "America", -"uls-region-AF": "Africa", -"uls-region-EU": "Europe", -"uls-region-AS": "Asia", -"uls-region-ME": "Middle East", -"uls-region-PA": "Pacific", -"uls-no-results-found": "No results found", -"uls-common-languages": "Common languages", -"uls-no-results-suggestion-title": "You may be interested in:", -"uls-search-help": "You can search by language name, script name, ISO code of language or you can browse by region:", -"uls-search-placeholder": "Language search" + "@metadata": { + "author": "Santhosh Thottingal ", + "last-updated": "2012-09-21", + "locale": "en", + "message-documentation": "qqq" + }, + "uls-select-language": "Select language", + "uls-region-WW": "Worldwide", + "uls-region-SP": "Special", + "uls-region-AM": "America", + "uls-region-AF": "Africa", + "uls-region-EU": "Europe", + "uls-region-AS": "Asia", + "uls-region-ME": "Middle East", + "uls-region-PA": "Pacific", + "uls-no-results-found": "No results found", + "uls-common-languages": "Common languages", + "uls-no-results-suggestion-title": "You may be interested in:", + "uls-search-help": "You can search by language name, script name, ISO code of language or you can browse by region.", + "uls-search-placeholder": "Language search" } diff --git a/i18n/qqq.json b/i18n/qqq.json index 0e213ba..c108c1c 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -18,6 +18,6 @@ "uls-no-results-found": "Title text for 'No results found' section", "uls-common-languages": "The ULS tries to guess the langugages that the user is most likely to pick. They are taken from geolocation (languages of the current country according to the IP address), previously selected languages, and the browser's accept-language. The list of these languages appears at the top of the ULS languages list, above the geographical regions. This is the title of that list.", "uls-no-results-suggestion-title": "Title for language suggestion in 'no results found' screen", - "uls-search-help": "Help text for searching. After this text, there will be a set of links for regions.\n\n\"Script name\" is a name of a writing system, such as \"Latin\", \"Cyrillic\", \"Arabic\" etc.", + "uls-search-help": "Help text for searching.\n\n\"Script name\" is a name of a writing system, such as \"Latin\", \"Cyrillic\", \"Arabic\" etc.", "uls-search-placeholder": "Placeholder text in search box" } diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js index f2811f3..4ce5f66 100644 --- a/src/jquery.uls.core.js +++ b/src/jquery.uls.core.js @@ -33,29 +33,6 @@
\

Select Language

\
\ -
\ -
\ -
\ - Worldwide\ -
\ -
\ -
\ -
\ - America\ -
\ - \ - \ -
\ -
\ -
\ -
\ \ \ @@ -73,26 +66,27 @@ * @return {bool} Whether the language was added. */ append: function ( langCode, regionCode ) { - var lcd = this, i, regions; + var lcd = this, + i, regions; - if ( !this.options.languages[langCode] ) { + if ( !this.options.languages[ langCode ] ) { // Language is unknown or not in the list of languages for this context. return false; } if ( regionCode ) { - regions = [regionCode]; + regions = [ regionCode ]; } else { regions = $.uls.data.getRegions( langCode ); } // Worldwides only displayed once if ( $.inArray( 'WW', regions ) > -1 ) { - regions = ['WW']; + regions = [ 'WW' ]; } for ( i = 0; i < regions.length; i++ ) { - this.regionLanguages[regions[i]].push( langCode ); + this.regionLanguages[ regions[ i ] ].push( langCode ); } // Work around the bad interface, delay rendering until we have got @@ -124,7 +118,7 @@ regions.push( this.buildQuicklist() ); $.each( $.uls.data.regiongroups, function ( regionCode ) { - lcd.regionLanguages[regionCode] = []; + lcd.regionLanguages[ regionCode ] = []; // Don't show the region unless it was enabled if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) { return; @@ -137,8 +131,8 @@ $( '

' ) .attr( 'data-i18n', 'uls-region-' + regionCode ) .addClass( 'eleven columns uls-lcd-region-title' ) - .text( regionNames[regionCode] ) - ); + .text( regionNames[ regionCode ] ) + ); regions.push( $section ); } ); @@ -152,7 +146,8 @@ * Renders a region and displays it if it has content. */ renderRegions: function () { - var lcd = this, languages, + var lcd = this, + languages, items = lcd.options.itemsPerColumn, columns = 4; @@ -167,7 +162,7 @@ $region.children( '.uls-language-block' ).remove(); - languages = lcd.regionLanguages[regionCode]; + languages = lcd.regionLanguages[ regionCode ]; if ( !languages || languages.length === 0 ) { $region.addClass( 'hide' ); return; @@ -176,7 +171,7 @@ lcd.renderRegion( $region, languages, items, columns ); $region.removeClass( 'hide' ); - lcd.regionLanguages[regionCode] = []; + lcd.regionLanguages[ regionCode ] = []; } ); }, @@ -188,7 +183,7 @@ * @param {number} itemsPerColumn How many languages fit in a column. * @param {number} columnsPerRow How many columns fit in a row. */ - renderRegion: function( $region, languages, itemsPerColumn, columnsPerRow ) { + renderRegion: function ( $region, languages, itemsPerColumn, columnsPerRow ) { var i, lastItem, currentScript, nextScript, force, len = languages.length, items = [], @@ -197,18 +192,18 @@ for ( i = 0; i < len; i++ ) { force = false; - nextScript = $.uls.data.getScriptGroupOfLanguage( languages[i+1] ); + nextScript = $.uls.data.getScriptGroupOfLanguage( languages[ i + 1 ] ); lastItem = len - 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] ); + currentScript = $.uls.data.getScriptGroupOfLanguage( languages[ i ] ); } else if ( currentScript !== nextScript && items.length > 1 ) { force = true; } currentScript = nextScript; - items.push( this.renderItem( languages[i] ) ); + items.push( this.renderItem( languages[ i ] ) ); if ( items.length >= itemsPerColumn || lastItem || force ) { columns.push( $( '
    ' ).addClass( 'three columns' ).append( items ) ); @@ -228,10 +223,10 @@ * @param {string} code Language code * @return {Element} */ - renderItem: function( code ) { + renderItem: function ( code ) { var a, name, autonym, li; - name = this.options.languages[code]; + name = this.options.languages[ code ]; autonym = $.uls.data.getAutonym( code ) || name || code; // Not using jQuery as this is performance hotspot @@ -250,7 +245,7 @@ return li; }, - i18n: function ( ) { + i18n: function () { this.$element.find( '[data-i18n]' ).i18n(); }, @@ -358,7 +353,7 @@ } ); // highlight the region visible while scrolling in the map. - inview = $.uls.data.regiongroups[inviewRegion]; + inview = $.uls.data.regiongroups[ inviewRegion ]; if ( !$( '#uls-region-' + inview ).hasClass( 'active' ) ) { $( '.regionselector' ).removeClass( 'active' ); $( '#uls-region-' + inview ).addClass( 'active' ); @@ -377,17 +372,17 @@ $this.data( 'lcd', ( data = new LanguageCategoryDisplay( this, options ) ) ); } - if ( typeof option === 'string') { - data[option](); + if ( typeof option === 'string' ) { + data[ option ](); } } ); }; $.fn.lcd.defaults = { languages: null, - showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'], + showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ], itemsPerColumn: 8 }; $.fn.lcd.Constructor = LanguageCategoryDisplay; -} ( jQuery ) ); +}( jQuery ) ); diff --git a/src/jquery.uls.regionfilter.js b/src/jquery.uls.regionfilter.js index 305e9bb..ffb4c3e 100644 --- a/src/jquery.uls.regionfilter.js +++ b/src/jquery.uls.regionfilter.js @@ -1,5 +1,5 @@ /** - * jQuery region filter plugin. + * Region Filter for ULS * * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris, * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other @@ -20,37 +20,23 @@ ( function ( $ ) { 'use strict'; - /* RegionSelector plugin definition */ - - var RegionSelector; - /** * Region selector is a language selector based on regions. - * Usage: $( 'jqueryselector' ).regionselector( options ); - * The attached element should have data-regiongroup attribute * that defines the regiongroup for the selector. */ - RegionSelector = function ( element, options ) { - this.$element = $( element ); - this.options = $.extend( {}, $.fn.regionselector.defaults, options ); - this.$element.addClass( 'regionselector' ); + var RegionSelector = function ( options ) { + this.options = options; this.regions = []; this.cache = null; - this.regionGroup = this.$element.data( 'regiongroup' ); this.init(); - this.listen(); }; RegionSelector.prototype = { constructor: RegionSelector, init: function () { - var region = this.$element.data( 'region' ); - this.regions = $.uls.data.getRegionsInGroup( this.regionGroup ); - - if ( region ) { - this.regions.push( region ); - } + this.regions = this.options.regions || $.uls.data.getAllRegions(); + this.show(); }, test: function ( langCode ) { @@ -58,11 +44,11 @@ langRegions = $.uls.data.getRegions( langCode ); for ( i = 0; i < this.regions.length; i++ ) { - region = this.regions[i]; + region = this.regions[ i ]; if ( $.inArray( region, langRegions ) >= 0 ) { this.render( langCode, region ); - this.cache[langCode] = region; + this.cache[ langCode ] = region; return; } @@ -71,14 +57,14 @@ show: function () { var result, languagesByScriptGroup, scriptGroup, languages, i, - $element = this.options.$target && this.options.$target.$element, - $parent = $element && $element.parent(), - $prev = $element && $element.prev(); + $target = this.options.$target && this.options.$target.$target, + $parent = $target && $target.parent(), + $prev = $target && $target.prev(); - if ( $element && $parent ) { + if ( $target && $parent ) { // Avoid reflows while adding new elements to the list // Use .detach() to keep jQuery events and data associated with elements - $element.detach(); + $target.detach(); } if ( this.cache ) { @@ -87,7 +73,7 @@ result = null; for ( result in this.cache ) { - this.render( result, this.cache[result] ); + this.render( result, this.cache[ result ] ); } } else { this.cache = {}; @@ -98,7 +84,7 @@ // of script groups for ( scriptGroup in $.uls.data.scriptgroups ) { // Get the languages for the script group - languages = languagesByScriptGroup[scriptGroup]; + languages = languagesByScriptGroup[ scriptGroup ]; // It's possible that some script groups are missing if ( !languages ) { @@ -110,17 +96,17 @@ for ( i = 0; i < languages.length; i++ ) { // Check whether it belongs to the region - this.test( languages[i] ); + this.test( languages[ i ] ); } } } - if ( $element && $parent ) { + if ( $target && $parent ) { // Restore the element to where we removed it from if ( $prev ) { - $prev.after( $element ); + $prev.after( $target ); } else { - $parent.append( $element ); + $parent.append( $target ); } } @@ -138,61 +124,7 @@ $target.append( langCode, region ); }, - - listen: function () { - this.$element.on( 'click', $.proxy( this.click, this ) ); - }, - - click: function () { - var $list, $firstTargetRegion; - - // Don't do anything if a region is selected already - if ( this.$element.hasClass( 'active' ) ) { - return; - } - - $list = this.options.$target.$element; - $firstTargetRegion = $list.find( '#' + this.regions[0] ); - - // Scroll to appropriate area - $list.scrollTop( - $firstTargetRegion.offset().top - $list.offset().top + $list.scrollTop() - ); - - // Make the selected region (and it only) active - $( '.regionselector' ).removeClass( 'active' ); - - if ( this.regionGroup ) { - // if there is a region group, make it active. - this.$element.addClass( 'active' ); - } - } }; - /* RegionSelector plugin definition */ - - $.fn.regionselector = function ( option ) { - return this.each( function () { - var $this = $( this ), - data = $this.data( 'regionselector' ), - options = typeof option === 'object' && option; - - if ( !data ) { - $this.data( 'regionselector', ( data = new RegionSelector( this, options ) ) ); - } - - if ( typeof option === 'string' ) { - data[option](); - } - } ); - }; - - $.fn.regionselector.defaults = { - $target: null, // Where to render the results - success: null, // callback if any results found. - noresults: null, // callback when no results to show - languages: null - }; - - $.fn.regionselector.Constructor = RegionSelector; -} ( jQuery ) ); + $.uls.RegionSelector = RegionSelector; +}( jQuery ) );