diff --git a/examples/index.html b/examples/index.html index 74252ee..e14935b 100644 --- a/examples/index.html +++ b/examples/index.html @@ -47,74 +47,6 @@ Demonstration of jquery plugin

-
-
-
- -
-
-
-

Select language

-
-
- -
- - -
-
-

No results found for "Esapnol"

-
-
-

- You can search by language name, script name, ISO code of language or you can browse by region: America, Europe, Middle East, Africa, Asia, Pacific or Worldwide languages. -

-
-
-
-
-
+
diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js index 4897eb5..d58ae7c 100644 --- a/src/jquery.uls.core.js +++ b/src/jquery.uls.core.js @@ -1,5 +1,6 @@ /** - * . + * Universal Language Selector + * ULS core component. * * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris, * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other @@ -20,10 +21,83 @@ (function ( $ ) { "use strict"; + var template = '\ +
\ +
\ + \ +
\ +
\ +
\ +

Select language

\ +
\ +
\ +
\ +
\ +
\ + Worldwide\ +
\ +
\ +
\ +
\ + America\ +
\ + \ + \ +
\ +
\ +
\ +
\ +
\ + \ +
\ +
\ +

\ + No results found\ +

\ +
\ +
\ +

\ + You can search by language name, script name, ISO code of language or you can browse by\ + region: America, Europe, Middle East, Africa, Asia, Pacific or Worldwide languages.\ +

\ +
\ +
\ +
\ +
'; + + /** + * ULS Public class definition + */ var ULS = function( element, options ) { this.$element = $( element ); this.options = $.extend( {}, $.fn.uls.defaults, options ); - this.$menu = $( this.options.menu ); + this.$menu = $( template ); this.languages = this.options.languages; for ( var code in this.languages ) { if ( $.uls.data.languages[code] === undefined ) { @@ -33,9 +107,9 @@ } this.shown = false; this.initialized = false; - this.$languageFilter = $( 'input#languagefilter' ); - this.$noResultsView = $( 'div.uls-no-results-view' ); - this.$resultsView = $( 'div.uls-language-list' ); + this.$languageFilter = this.$menu.find( 'input#languagefilter' ); + this.$noResultsView = this.$menu.find( 'div.uls-no-results-view' ); + this.$resultsView = this.$menu.find( 'div.uls-language-list' ); this.$noResultsView.hide(); this.render(); this.listen(); @@ -63,6 +137,10 @@ left: '25%' }; }, + + /** + * Show the ULS window + */ show: function() { var pos = this.position(); this.$menu.css( { @@ -71,6 +149,7 @@ } ); if ( !this.initialized ) { + $( 'body' ).prepend( this.$menu ); // Initialize with a full search. // This happens on first time click of uls trigger. this.$languageFilter.languagefilter( 'clear' ); @@ -90,7 +169,8 @@ }, /** - * Render the UI elements. Can be used for customization + * Render the UI elements. + * Does nothing by default. Can be used for customization. */ render: function() { // Rendering stuff here @@ -125,7 +205,7 @@ that.$element.on( 'click', $.proxy( that.click, that ) ); // Handle click on close button - $( "#uls-close" ).on( 'click', $.proxy( that.click, that ) ); + this.$menu.find( "#uls-close" ).on( 'click', $.proxy( that.click, that ) ); // Handle key press events on the menu that.$menu.on('keypress', $.proxy(this.keypress, this) ) @@ -155,12 +235,13 @@ } ); // Create region selectors, one per region - $( '.uls-region, .uls-region-link' ).regionselector( { + this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( { $target: lcd, languages: that.languages, success: function() { // Deactivate search filtering that.$languageFilter.languagefilter( 'deactivate' ); + // Show 'results view' if we are in no results mode that.success(); }, @@ -237,7 +318,7 @@ }; $.fn.uls.defaults = { - menu: '.uls-menu', + menu: template, onSelect: null, // Callback function to be called when a language is selected searchAPI: null, // Language search API languages: $.uls.data.autonyms() // Languages to be used for ULS, default is all languages diff --git a/src/jquery.uls.languagefilter.js b/src/jquery.uls.languagefilter.js index 68e0291..05f9f19 100644 --- a/src/jquery.uls.languagefilter.js +++ b/src/jquery.uls.languagefilter.js @@ -31,8 +31,8 @@ this.options = $.extend( {}, $.fn.regionselector.defaults, options ); this.$element.addClass( 'languagefilter' ); this.resultCount = 0; - this.$suggestion = $( '#' + this.$element.data( 'suggestion' ) ); - this.$clear = $( '#'+ this.$element.data( 'clear' ) ); + this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) ); + this.$clear = this.$element.parents().find( '#'+ this.$element.data( 'clear' ) ); this.selectedLanguage = null; this.listen(); }; diff --git a/src/jquery.uls.lcd.js b/src/jquery.uls.lcd.js index 328b6b9..43d6bdd 100644 --- a/src/jquery.uls.lcd.js +++ b/src/jquery.uls.lcd.js @@ -1,5 +1,7 @@ /** - * . + * Universal Language Selector + * Language category display component - Used for showing the search results, + * grouped by regions, scripts * * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris, * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other @@ -97,7 +99,7 @@ var $divRegionCode, $rowDiv, $ul; forceNew = forceNew || false; - $divRegionCode = $( 'div#' + regionCode ); + $divRegionCode = this.$element.find( 'div#' + regionCode ); $rowDiv = $divRegionCode.find( 'div.row:last' ); $ul = $divRegionCode.find( 'ul:last' ); @@ -144,9 +146,9 @@ var that = this; // The region section need to be in sync with the map filter. that.$element.scroll( function () { - var inviewRegion = $( 'div.uls-lcd-region-section:first' ).attr( 'id' ); + var inviewRegion = that.$element.find( 'div.uls-lcd-region-section:first' ).attr( 'id' ); var listtop = that.$element.position().top; - $( 'div.uls-lcd-region-section' ).each( function () { + that.$element.find( 'div.uls-lcd-region-section' ).each( function () { var offset = $( this ).position().top - listtop; if ( offset < 0 ) { inviewRegion = $( this ).attr( 'id' ); @@ -156,8 +158,8 @@ } ); var inview = $.uls.data.regiongroups[inviewRegion]; - $( 'div.uls-region' ).removeClass( 'active' ); - $( 'div#uls-region-' + inview ).addClass( 'active' ); + that.$element.find( 'div.uls-region' ).removeClass( 'active' ); + that.$element.find( 'div#uls-region-' + inview ).addClass( 'active' ); } ); }