Fix the language display scroll sync with regions map

* Remove jquery.viewport which was not able to give correct viewport
relative to container.
* The scroll syncing part is written by Niklas

Change-Id: I1cbeaa2a5c297deab7338f331d8db69c17aa2214

UniversalLanguageSelector.php

@@ -56,15 +56,6 @@ $wgResourceModules['ext.uls.lcd'] = array(
 	'localBasePath' => $dir,
 	'remoteExtPath' => 'UniversalLanguageSelector',
 	'styles' => 'resources/css/ext.uls.lcd.css',
-	'dependencies' => array(
-		'jquery.viewport',
-	),
-);
-
-$wgResourceModules['jquery.viewport'] = array(
-	'scripts' => 'resources/jquery.viewport.js',
-	'localBasePath' => $dir,
-	'remoteExtPath' => 'UniversalLanguageSelector',
 );
 
 $wgResourceModules['ext.uls.core'] = array(

examples/index.html

@@ -19,7 +19,6 @@
 		<!-- Source -->
 		<script src="../data/ext.uls.data.js"></script>
 		<script src="../resources/ext.uls.data.utils.js"></script>
-		<script src="../resources/jquery.viewport.js"></script>
 		<script src="../resources/ext.uls.lcd.js"></script>
 		<script src="../resources/ext.uls.languagefilter.js"></script>
 		<script src="../resources/ext.uls.core.js"></script>

resources/ext.uls.lcd.js

@@ -98,12 +98,24 @@
 		},
 
 		listen: function() {
-			this.$element.scroll( function() {
+			var that = this;
-				var inviewRegion = $( 'div.uls-lcd-region-section:in-viewport:first' ).attr( 'id' );
+			// 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 listtop = that.$element.position().top;
+				$( 'div.uls-lcd-region-section' ).each( function () {
+					var offset = $( this ).position().top - listtop;
+					if ( offset < 0 ) {
+						inviewRegion = $( this ).attr( 'id' );
+					} else {
+						return false;
+					}
+				} );
+
 				var inview = $.uls.data.regiongroups[inviewRegion];
 				$( 'div.uls-region' ).removeClass( 'active' );
 				$( 'div#uls-region-' + inview ).addClass( 'active' );
-			});
+			} );
 		}
 
 	};

resources/jquery.viewport.js

@@ -1,58 +0,0 @@
-/*
- * Viewport - jQuery selectors for finding elements in viewport
- *
- * Copyright (c) 2008-2009 Mika Tuupola
- *
- * Licensed under the MIT license:
- *   http://www.opensource.org/licenses/mit-license.php
- *
- * Project home:
- *  http://www.appelsiini.net/projects/viewport
- *
- */
-(function($) {
-    
-    $.belowthefold = function(element, settings) {
-        var fold = $(window).height() + $(window).scrollTop();
-        return fold <= $(element).offset().top - settings.threshold;
-    };
-
-    $.abovethetop = function(element, settings) {
-        var top = $(window).scrollTop();
-        return top >= $(element).offset().top + $(element).height() - settings.threshold;
-    };
-    
-    $.rightofscreen = function(element, settings) {
-        var fold = $(window).width() + $(window).scrollLeft();
-        return fold <= $(element).offset().left - settings.threshold;
-    };
-    
-    $.leftofscreen = function(element, settings) {
-        var left = $(window).scrollLeft();
-        return left >= $(element).offset().left + $(element).width() - settings.threshold;
-    };
-    
-    $.inviewport = function(element, settings) {
-        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
-    };
-    
-    $.extend($.expr[':'], {
-        "below-the-fold": function(a, i, m) {
-            return $.belowthefold(a, {threshold : 0});
-        },
-        "above-the-top": function(a, i, m) {
-            return $.abovethetop(a, {threshold : 0});
-        },
-        "left-of-screen": function(a, i, m) {
-            return $.leftofscreen(a, {threshold : 0});
-        },
-        "right-of-screen": function(a, i, m) {
-            return $.rightofscreen(a, {threshold : 0});
-        },
-        "in-viewport": function(a, i, m) {
-            return $.inviewport(a, {threshold : 0});
-        }
-    });
-
-    
-})(jQuery);