diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..66a729c --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +src/jquery.uls.data.js \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..78bf26e --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,14 @@ +{ + "extends": "wikimedia", + "env": { + "browser": true, + "jquery": true, + "qunit": true + }, + "globals": { + "require": false + }, + "rules": { + "dot-notation": [ "error", { "allowKeywords": true } ] + } +} diff --git a/.jsbeautifyrc b/.jsbeautifyrc deleted file mode 100644 index 0631808..0000000 --- a/.jsbeautifyrc +++ /dev/null @@ -1,17 +0,0 @@ -{ - "preserve_newlines": true, - "jslint_happy": true, - "keep_array_indentation": true, - "space_before_conditional": true, - "max_preserve_newlines": 10, - "brace_style": "collapse", - "keep_function_indentation": false, - "break_chained_methods": false, - "eval_code": false, - "unescape_strings": false, - "wrap_line_length": 0, - "space_in_paren": true, - "space_in_square_bracket": true, - "git_happy": true, - "indent_with_tabs": true -} diff --git a/.jshintignore b/.jshintignore deleted file mode 100644 index 4a4524b..0000000 --- a/.jshintignore +++ /dev/null @@ -1 +0,0 @@ -src/jquery.uls.data.js diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 136fda1..0000000 --- a/.jshintrc +++ /dev/null @@ -1,35 +0,0 @@ -{ - // Enforcing - "bitwise": true, - "camelcase": true, - "curly": true, - "eqeqeq": true, - "forin": false, - "immed": true, - "latedef": "nofunc", - "newcap": true, - "noarg": true, - "noempty": true, - "nonew": true, - "onevar": true, - "quotmark": "single", - "regexp": false, - "strict": true, - "trailing": true, - "undef": true, - "unused": true, - - // Relax - "laxbreak": true, - "multistr": true, - "smarttabs": true, - - // Environment - "browser": true, - - "predef": [ - "_", - "jQuery", - "QUnit" - ] -} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..2c90730 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-wikimedia" +} diff --git a/.travis.yml b/.travis.yml index 0e6d654..6708765 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,4 @@ language: node_js node_js: - - "0.10" + - 8 sudo: false diff --git a/Gruntfile.js b/Gruntfile.js index 7ba38c8..81e0514 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,22 +1,35 @@ -/*jshint node:true */ 'use strict'; + module.exports = function ( grunt ) { - grunt.loadNpmTasks( 'grunt-contrib-jshint' ); + grunt.loadNpmTasks( 'grunt-eslint' ); + grunt.loadNpmTasks( 'grunt-stylelint' ); grunt.loadNpmTasks( 'grunt-contrib-qunit' ); grunt.initConfig( { - jshint: { + eslint: { + all: [ + '**/*.js', + 'src/jquery.uls.data.js', + '!examples/**', + '!node_modules/**', + '!vendor/**' + ] + }, + stylelint: { options: { - jshintrc: true + syntax: 'css' }, - all: ['*.js', 'src/*.js'] + src: [ + '**/*.css', + '!node_modules/**' + ] }, qunit: { all: 'test/index.html' } } ); - grunt.registerTask( 'lint', 'jshint' ); - grunt.registerTask( 'test', ['lint', 'qunit'] ); + grunt.registerTask( 'lint', [ 'eslint' ] ); + grunt.registerTask( 'test', [ 'lint', 'qunit' ] ); grunt.registerTask( 'default', 'test' ); }; diff --git a/README.md b/README.md index 8556101..6be6c27 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,8 @@ -jQuery Universal Language Selector +Universal Language Selector jQuery library ================================== -Universal Language Selector - [](http://travis-ci.org/wikimedia/jquery.uls) -This is a [Wikimedia Foundation Language Engineering team project](https://www.mediawiki.org/wiki/Project_Milkshake). +This is a [Wikimedia Foundation project](https://www.mediawiki.org/wiki/Project_Milkshake).  @@ -19,86 +17,70 @@ git clone https://github.com/wikimedia/jquery.uls.git Documentation ------------- -The quick and easy way to learn usage of jquery.uls is trying out the examples/index.html in some webserver. Try it from here: http://thottingal.in/projects/js/jquery.uls/examples/ +The quick and easy way to learn usage of jquery.uls is trying out the examples/index.html in webserver. Try it online at http://thottingal.in/projects/js/jquery.uls/examples/ -The jQuery.uls provides a jQuery extension ```$.fn.uls``` that can be attached to a trigger element. The expected behavior is, when you click on the trigger, the language selector opens up. +The jquery.uls provides a jQuery extension ```$.fn.uls``` that can be attached to a trigger element. When you click on the trigger element, the language selector is shown. The trigger can be a link, button or any valid jQuery element. Example: ```javascript -$( '.uls-trigger' ).uls( ); +$( '.uls-trigger' ).uls(); ``` -To use the selected language, you need define a selection Handler as shown below +To use the selected language, you need define a selection handler: ```javascript $( '.uls-trigger' ).uls( { - onSelect : function( language ) { - // language is a ISO 639 language code. eg: en, hi, fi, he etc + onSelect: function( language ) { + // language is a IETF language tag in lowercase, for example: en, fi, ku-latn // Your selection handler code goes here. } } ); ``` -In some usecases, you may need to provide a quick list of languages to select before going through all languages. For eg, it can a list of recently selected languages, language suggestions based on Geo IP. -That can be done as follows +You can provide a quick list of likely useful languages, for example based on Geo IP or recently selected languages: ```javascript $( '.uls-trigger' ).uls( { - onSelect : function( language ) { - // language is a ISO 639 language code. eg: en, hi, fi, he etc - // Your selection handler code goes here. - }, - quickList: [ 'en', 'ml', 'hi' ] // An array of language codes. Can be a function that returns this array too. + onSelect: function( language ) { ... }, + quickList: [ 'en', 'ml', 'hi' ] // Can be a function returning an array too. } ); ``` -If the search needs to be more complex(such as cross language search, spelling error tolerating etc), a search API option can be provided. +jquery.uls knows about 500 languages. You can specify a subset of those languages: ```javascript $( '.uls-trigger' ).uls( { - onSelect : function( language ) { - // language is a ISO 639 language code. eg: en, hi, fi, he etc - // Your selection handler code goes here. - }, - searchAPI: apiURL, - quickList: [ 'en', 'ml', 'hi' ] // An array of language codes. Can be a function that returns this array too. + onSelect: function( language ) { ... }, + languages: { languageCode1: languageName, languageCode2: languageName2, .... }, } ); ``` -Example for such an api is used in Wikipedia: http://en.wikipedia.org/w/api.php?action=languagesearch&search=Te - -ULS knows about 500 languages. If you dont want to use that many languages for your usecase, use languages option. - - -```javascript -$( '.uls-trigger' ).uls( { - onSelect : function( language ) { - // language is a ISO 639 language code. eg: en, hi, fi, he etc - // Your selection handler code goes here. - }, - languages: { languageCode1: languageName, languageCode2: languageName2 , .... }, - searchAPI: apiURL, - quickList: [ 'en', 'ml', 'hi' ] // An array of language codes. Can be a function that returns this array too. -} ); -``` - -*Other Options* +*All options* | Option | Description | |-------------|---------------------| -| left | left position of ULS. eg: 100px, 20%| -| top | top position of ULS. eg: 100px, 20%| -| onCancel | function to be handled when language selection is not done. ie. language selector is closed without selecting any | -| showRegions | Regions to be shown in the language selector. Default: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'] | +| left | Left position of ULS dialog. E.g: 100px or 20% | +| top | Top position of ULS dialog. E.g: 100px or 20% | +| onCancel | Callback function when the dialog is closed without selecting a language. | +| onReady | Callback function when ULS has initialized. | +| onVisible | Callback function when ULS dialog is shown. | +| onSelect | Callback function when user selects a language. | +| languages | List of selectable languages. Defaults to all known languages. | +| quicklist | List of suggested languages. Defaults to empty list. | +| searchAPI | API URL. Parameter query with the user query is appened to it. | +| menuWidth | Override the automatic choice of menu width. One of narrow, medium, wide (1, 2, 4 columns respectively). | +| showRegions | Regions to be shown in the language selector. Defaults to [ WW, AM, EU, ME, AF, AS, PA ] | +| groupByRegion | Whether to group languages by the regions: true of false. Default value depends on the menu width. | | itemsPerColumn | Number of languages per column. Default is 8 | | languageDecorator | Callback function to be called when a language link is prepared - for custom decoration. Arguments: (a) the $language - the language link jQuery object (b) languageCode. The function can do any styling, changing properties etc on the passed link. See examples/decorator.html for example usage.| +| noResultsTemplate | A jQuery object or a function that returns a jQuery object. This will be used as the template to display when no results found from the search. The function will receive the current search query as argument| Features -------- -jQuery.uls has an elaborative language information collection and it is based on https://github.com/wikimedia/language-data.git. It knows about +jquery.uls has an elaborative language information collection and it is based on https://github.com/wikimedia/language-data.git. It knows about 1. The script in which a language is written. 2. The script code @@ -107,14 +89,7 @@ jQuery.uls has an elaborative language information collection and it is based on 5. The autonym - language name written in its own script 6. The directionality of the text -With all these information the search becomes very effective. Based on the spoken regions, the UI organize the languages. In side regions -the language is again organized based on scripts. - -A user can search for a language based on script name. - -ULS can autocomplete a language name search. - -An advanced usage of jQuery.uls can be tried out from wikimedia sites. For eg, see the language icon at the top of http://mediawiki.org or the cog icon near to the languages list in wikipedia in any language +With all these information the search becomes very effective. An advanced usage of jquery.uls can be tried out from Wikimedia sites. For example, see the language icon at the top of https://mediawiki.org or the cog icon near to the languages list in Wikipedia in any language. More details ------------ @@ -122,7 +97,7 @@ More details * UX Design https://www.mediawiki.org/wiki/Universal_Language_Selector/Design -How to build and test jQuery ULS +How to build and test jquery.uls ---------------------------------- First, get a copy of the git repo by running: @@ -150,4 +125,4 @@ You can also run the tests in a browser by navigating to the `test/` directory, Coding style ------------- -Please follow [jQuery coding guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines) +Please follow [MediaWiki coding conventions](https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript) diff --git a/css/jquery.uls.css b/css/jquery.uls.css index 5c1e9ca..90a224c 100644 --- a/css/jquery.uls.css +++ b/css/jquery.uls.css @@ -1,11 +1,8 @@ .uls-trigger { + background: url( ../images/language.png ) no-repeat left center; /* @embed */ - background: url('../images/icon-language.png') no-repeat left center; - /* @embed */ - background-image: -webkit-linear-gradient(transparent, transparent), url('../images/icon-language.svg'); - /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg'); - padding-left: 30px; + background-image: linear-gradient( transparent, transparent ), url( ../images/language.svg ); + padding-left: 24px; } .uls-menu { @@ -15,10 +12,10 @@ margin-top: 1px; background-color: #fff; border: 1px solid #ccc; - border-color: rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + border-color: rgba( 0, 0, 0, 0.2 ); + -webkit-box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 ); + -moz-box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 ); + box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 ); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; @@ -68,10 +65,9 @@ } .uls-search-label { - background: url('../images/search.png') no-repeat center center; - background-image: -webkit-linear-gradient(transparent, transparent), url('../images/search.svg'); + background: url( ../images/search.png ) no-repeat center center; /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../images/search.svg'); + background-image: linear-gradient( transparent, transparent ), url( ../images/search.svg ); background-size: 20px; height: 32px; width: 44px; @@ -92,7 +88,7 @@ width: 100%; /* For the custom clear (X) icon */ padding: 6px 25px 6px 0; - outline: none; + outline: 0; border: 0; display: block; position: absolute; @@ -114,10 +110,9 @@ } .uls-languagefilter-clear { - background: url('../images/clear.png') no-repeat left center; - background-image: -webkit-linear-gradient(transparent, transparent), url('../images/clear.svg'); + background: url( ../images/clear.png ) no-repeat left center; /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../images/clear.svg'); + background-image: linear-gradient( transparent, transparent ), url( ../images/clear.svg ); background-size: 15px; cursor: pointer; height: 15px; diff --git a/css/jquery.uls.grid.css b/css/jquery.uls.grid.css index 9caf088..f068a86 100644 --- a/css/jquery.uls.grid.css +++ b/css/jquery.uls.grid.css @@ -32,15 +32,18 @@ } .grid .highlight { - background: #ffff99; + background: #ff9; } /* The Grid ---------------------- */ + .grid .row { width: 100%; max-width: none; min-width: 600px; margin: 0 auto; + /* Nicolas Gallagher's micro clearfix */ + *zoom: 1; } .grid .row .row { @@ -50,30 +53,25 @@ margin: 0 -5px; } +.grid .column, +.grid .columns { + float: left; + min-height: 1px; + padding: 0 5px; + position: relative; +} + .grid .row.collapse .column, .grid .row.collapse .columns { padding: 0; } -.grid .row .row { - width: auto; - max-width: none; - min-width: 0; - margin: 0 -5px; -} - .grid .row .row.collapse { margin: 0; } -.grid .column, .grid .columns { - float: left; - min-height: 1px; - padding: 0 5px; - position: relative; -} - -.grid .column.centered, .grid .columns.centered { +.grid .column.centered, +.grid .columns.centered { float: none; margin: 0 auto; } @@ -238,13 +236,9 @@ right: 83.333%; } -/* Nicolas Gallagher's micro clearfix */ -.grid .row { - *zoom: 1; -} - -.grid .row:before, .grid .row:after { - content: ""; +.grid .row:before, +.grid .row:after { + content: ''; display: table; } diff --git a/css/jquery.uls.lcd.css b/css/jquery.uls.lcd.css index 2e836b6..1f99155 100644 --- a/css/jquery.uls.lcd.css +++ b/css/jquery.uls.lcd.css @@ -17,6 +17,10 @@ padding: 0 16px; } +.uls-lcd--no-quicklist [data-region="all"] .uls-lcd-region-title { + display: none; +} + .uls-lcd-region-section { margin-top: 10px; } @@ -36,6 +40,16 @@ margin: 0; } +.uls-language-block > ul { + /* + * 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. + */ + list-style: none none; +} + /* * Each block should have 16px padding on both sides. But because we already gave * 16px for the whole menu, we need to remove it for first and last items the blocks. @@ -53,17 +67,6 @@ padding-right: 0; } - -.uls-language-block > ul { - /* - * 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. - */ - list-style: none none; -} - .uls-language-block > ul > li { cursor: pointer; margin-left: 20px; @@ -103,16 +106,30 @@ vertical-align: middle; } +.uls-no-results-view { + display: none; +} + +.uls-lcd.uls-no-results > .uls-lcd-region-section { + display: none; +} + +.uls-lcd.uls-no-results > .uls-no-results-view { + display: block; +} + .uls-no-results-found-title { font-size: 16px; padding: 0 16px 0 28px; + margin: 20px 0; border-bottom: 0; - color: #555; + color: #54595d; } .uls-no-found-more { - background: #f8f8f8; - padding: 0 16px 0 44px; + border-top: 1px solid #eaecf0; + color: #54595d; + padding: 12px 16px 12px 44px; font-size: 0.9em; width: 100%; margin-top: 1.6em; diff --git a/css/jquery.uls.mobile.css b/css/jquery.uls.mobile.css index f7dc7b6..f6ba97b 100644 --- a/css/jquery.uls.mobile.css +++ b/css/jquery.uls.mobile.css @@ -1,4 +1,4 @@ -@media only screen and (max-width: 767px) { +@media only screen and ( max-width: 767px ) { .uls-mobile.uls-menu { width: 95%; @@ -40,7 +40,7 @@ float: none; } - .uls-mobile [class*="column"] + [class*="column"]:last-child { + .uls-mobile [ class*='column' ] + [ class*='column' ]:last-child { float: none; } @@ -48,7 +48,7 @@ .uls-mobile .uls-mobile .columns:before, .uls-mobile .column:after, .columns:after { - content: ""; + content: ''; display: table; } @@ -197,11 +197,12 @@ } /* Very large display targeting */ -@media only screen and (min-width: 1441px) { +@media only screen and ( min-width: 1441px ) { .uls-mobile .hide-for-small, .uls-mobile .hide-for-medium, .uls-mobile .hide-for-medium-down, - .hide-for-large, .show-for-large-up, + .hide-for-large, + .show-for-large-up, .show-for-xlarge { display: block !important; } @@ -217,7 +218,7 @@ } /* Medium display targeting */ -@media only screen and (max-width: 1279px) and (min-width: 768px) { +@media only screen and ( max-width: 1279px ) and ( min-width: 768px ) { .uls-mobile .hide-for-small, .uls-mobile .show-for-medium, .uls-mobile .show-for-medium-down, @@ -238,7 +239,7 @@ } /* Small display targeting */ -@media only screen and (max-width: 767px) { +@media only screen and ( max-width: 767px ) { .uls-mobile .show-for-small, .uls-mobile .hide-for-medium, .uls-mobile .show-for-medium-down, @@ -268,7 +269,7 @@ display: none !important; } -@media screen and (orientation: landscape) { +@media screen and ( orientation: landscape ) { .uls-mobile .show-for-landscape, .uls-mobile .hide-for-portrait { display: block !important; @@ -279,7 +280,7 @@ } } -@media screen and (orientation: portrait) { +@media screen and ( orientation: portrait ) { .uls-mobile .show-for-portrait, .uls-mobile .hide-for-landscape { display: block !important; diff --git a/examples/decorator.html b/examples/decorator.html index 1e75b48..95293f6 100644 --- a/examples/decorator.html +++ b/examples/decorator.html @@ -10,7 +10,7 @@ - + diff --git a/examples/index-i18n.html b/examples/index-i18n.html index aebb254..673882c 100644 --- a/examples/index-i18n.html +++ b/examples/index-i18n.html @@ -10,7 +10,7 @@ - + diff --git a/examples/index-mobile.html b/examples/index-mobile.html index c7d06b8..d63426a 100644 --- a/examples/index-mobile.html +++ b/examples/index-mobile.html @@ -21,7 +21,7 @@ - + diff --git a/examples/index-narrow.html b/examples/index-narrow.html index 5a290b4..965beaa 100644 --- a/examples/index-narrow.html +++ b/examples/index-narrow.html @@ -10,7 +10,7 @@ - + diff --git a/examples/index.html b/examples/index.html index 802996b..4f1d211 100644 --- a/examples/index.html +++ b/examples/index.html @@ -20,7 +20,7 @@ - + @@ -30,7 +30,7 @@ + diff --git a/examples/resources/demo.css b/examples/resources/demo.css index 902b400..4fe01f9 100644 --- a/examples/resources/demo.css +++ b/examples/resources/demo.css @@ -1,18 +1,18 @@ body { padding-left: 10%; padding-right: 10%; - font-family: Arial, Helvetica, sans-serif; + font-family: 'Arial', 'Helvetica', sans-serif; } div.navbar { background-color: #333; - color: #FFFFFF; + color: #fff; padding: 20px; } span.uls-trigger { float: right; cursor: pointer; - color: #FFFFFF; + color: #fff; font-weight: bold; } diff --git a/examples/resources/font/Autonym.eot b/examples/resources/font/Autonym.eot deleted file mode 100644 index d88dfe5..0000000 Binary files a/examples/resources/font/Autonym.eot and /dev/null differ diff --git a/examples/resources/font/Autonym.ttf b/examples/resources/font/Autonym.ttf deleted file mode 100644 index 127b84d..0000000 Binary files a/examples/resources/font/Autonym.ttf and /dev/null differ diff --git a/examples/resources/font/Autonym.woff b/examples/resources/font/Autonym.woff deleted file mode 100644 index 041c3a7..0000000 Binary files a/examples/resources/font/Autonym.woff and /dev/null differ diff --git a/examples/index-autonymfont.html b/examples/test-no-results.html similarity index 69% rename from examples/index-autonymfont.html rename to examples/test-no-results.html index 309451d..4d04d0a 100644 --- a/examples/index-autonymfont.html +++ b/examples/test-no-results.html @@ -20,34 +20,23 @@ - + - @@ -55,12 +44,11 @@
-