1 files changed, 97 insertions, 33 deletions

diff --git a/js/lib/ui.js b/js/lib/ui.js
index 030390823..413078b4f 100644
--- a/js/lib/ui.js
+++ b/js/lib/ui.js
@@ -1,6 +1,7 @@
 elgg.provide('elgg.ui');
 
 elgg.ui.init = function () {
+	// add user hover menus
 	elgg.ui.initHoverMenu();
 
 	//if the user clicks a system message, make it disappear
@@ -9,26 +10,24 @@ elgg.ui.init = function () {
 	});
 
 	$('.elgg-system-messages li').animate({opacity: 0.9}, 6000);
-	$('.elgg-system-messages li').fadeOut('slow');
+	$('.elgg-system-messages li.elgg-state-success').fadeOut('slow');
 
-	$('.elgg-toggler').live('click', elgg.ui.toggles);
+	$('[rel=toggle]').live('click', elgg.ui.toggles);
 
-	$('[rel=popup]').live('click', elgg.ui.popsUp);
+	$('[rel=popup]').live('click', elgg.ui.popupOpen);
 
 	$('.elgg-menu-page .elgg-menu-parent').live('click', elgg.ui.toggleMenu);
 
 	$('.elgg-requires-confirmation').live('click', elgg.ui.requiresConfirmation);
 
-	if ($('.elgg-input-date').length) {
-		$('.elgg-input-date').datepicker();
-	}
-}
+	$('.elgg-autofocus').focus();
+};
 
 /**
  * Toggles an element based on clicking a separate element
  *
- * Use .elgg-toggler on the toggler element
- * Set the href to target the item you want to toggle (<a class="elgg-toggler" href="#id-of-target">)
+ * Use rel="toggle" on the toggler element
+ * Set the href to target the item you want to toggle (<a rel="toggle" href="#id-of-target">)
  *
  * @param {Object} event
  * @return void
@@ -36,10 +35,11 @@ elgg.ui.init = function () {
 elgg.ui.toggles = function(event) {
 	event.preventDefault();
 
+	// @todo might want to switch this to elgg.getSelectorFromUrlFragment().
 	var target = $(this).toggleClass('elgg-state-active').attr('href');
 
 	$(target).slideToggle('medium');
-}
+};
 
 /**
  * Pops up an element based on clicking a separate element
@@ -52,18 +52,18 @@ elgg.ui.toggles = function(event) {
  *	targetSelector: The selector used to find the popup
  *	target:         The popup jQuery element as found by the selector
  *	source:         The jquery element whose click event initiated a popup.
- *	
+ *
  * The return value of the function is used as the options object to .position().
  * Handles can also return false to abort the default behvior and override it with their own.
  *
  * @param {Object} event
  * @return void
  */
-elgg.ui.popsUp = function(event) {
+elgg.ui.popupOpen = function(event) {
 	event.preventDefault();
 	event.stopPropagation();
 
-	var target = elgg.getUrlFragment($(this).toggleClass('elgg-state-active').attr('href'));
+	var target = elgg.getSelectorFromUrlFragment($(this).toggleClass('elgg-state-active').attr('href'));
 	var $target = $(target);
 
 	// emit a hook to allow plugins to position and control popups
@@ -76,7 +76,8 @@ elgg.ui.popsUp = function(event) {
 	var options = {
 		my: 'center top',
 		at: 'center bottom',
-		of: $(this)
+		of: $(this),
+		collision: 'fit fit'
 	}
 
 	options = elgg.trigger_hook('getOptions', 'ui.popup', params, options);
@@ -85,7 +86,7 @@ elgg.ui.popsUp = function(event) {
 	if (!options) {
 		return;
 	}
-	
+
 	// hide if already open
 	if ($target.is(':visible')) {
 		$target.fadeOut();
@@ -100,26 +101,45 @@ elgg.ui.popsUp = function(event) {
 	$('body')
 		.die('click', elgg.ui.popupClose)
 		.live('click', elgg.ui.popupClose);
-}
+};
 
 /**
  * Catches clicks that aren't in a popup and closes all popups.
  */
 elgg.ui.popupClose = function(event) {
 	$eventTarget = $(event.target);
+	var inTarget = false;
 	var $popups = $('[rel=popup]');
 
+	// if the click event target isn't in a popup target, fade all of them out.
 	$popups.each(function(i, e) {
-		var $e = $(e);
-		var $target = $(elgg.getUrlFragment($e.attr('href')) + ':visible');
-		if ($target.length > 0) {
-			$target.fadeOut();
-			$e.removeClass('elgg-state-active');
+		var target = elgg.getSelectorFromUrlFragment($(e).attr('href')) + ':visible';
+		var $target = $(target);
+
+		if (!$target.is(':visible')) {
+			return;
+		}
+
+		// didn't click inside the target
+		if ($eventTarget.closest(target).length > 0) {
+			inTarget = true;
+			return false;
 		}
 	});
 
-	$('body').die('click', elgg.ui.popClose);
-}
+	if (!inTarget) {
+		$popups.each(function(i, e) {
+			var $e = $(e);
+			var $target = $(elgg.getSelectorFromUrlFragment($e.attr('href')) + ':visible');
+			if ($target.length > 0) {
+				$target.fadeOut();
+				$e.removeClass('elgg-state-active');
+			}
+		});
+
+		$('body').die('click', elgg.ui.popClose);
+	}
+};
 
 /**
  * Toggles a child menu when the parent is clicked
@@ -131,7 +151,7 @@ elgg.ui.toggleMenu = function(event) {
 	$(this).siblings().slideToggle('medium');
 	$(this).toggleClass('elgg-menu-closed elgg-menu-opened');
 	event.preventDefault();
-}
+};
 
 /**
  * Initialize the hover menu
@@ -159,7 +179,7 @@ elgg.ui.initHoverMenu = function(parent) {
 		var $hovermenu = $(this).data('hovermenu') || null;
 
 		if (!$hovermenu) {
-			var $hovermenu = $(this).parent().find(".elgg-menu-hover");
+			$hovermenu = $(this).parent().find(".elgg-menu-hover");
 			$(this).data('hovermenu', $hovermenu);
 		}
 
@@ -191,7 +211,7 @@ elgg.ui.initHoverMenu = function(parent) {
 			$(".elgg-menu-hover").fadeOut();
 		}
 	});
-}
+};
 
 /**
  * Calls a confirm() and prevents default if denied.
@@ -200,14 +220,14 @@ elgg.ui.initHoverMenu = function(parent) {
  * @return void
  */
 elgg.ui.requiresConfirmation = function(e) {
-	var confirmText = $(this).attr('title') || elgg.echo('question:areyousure');
+	var confirmText = $(this).attr('rel') || elgg.echo('question:areyousure');
 	if (!confirm(confirmText)) {
 		e.preventDefault();
 	}
 };
 
 /**
- * Repositions the likes popup
+ * Repositions the login popup
  *
  * @param {String} hook    'getOptions'
  * @param {String} type    'ui.popup'
@@ -216,14 +236,58 @@ elgg.ui.requiresConfirmation = function(e) {
  *
  * @return {Object}
  */
-elgg.ui.likesPopupHandler = function(hook, type, params, options) {
-	if (params.target.hasClass('elgg-likes-list')) {
-		options.my = 'right bottom';
-		options.at = 'left top';
+elgg.ui.loginHandler = function(hook, type, params, options) {
+	if (params.target.attr('id') == 'login-dropdown-box') {
+		options.my = 'right top';
+		options.at = 'right bottom';
 		return options;
 	}
 	return null;
 };
 
+/**
+ * Initialize the date picker
+ *
+ * Uses the class .elgg-input-date as the selector.
+ *
+ * If the class .elgg-input-timestamp is set on the input element, the onSelect
+ * method converts the date text to a unix timestamp in seconds. That value is
+ * stored in a hidden element indicated by the id on the input field.
+ *
+ * @return void
+ */
+elgg.ui.initDatePicker = function() {
+	var loadDatePicker = function() {
+		$('.elgg-input-date').datepicker({
+			// ISO-8601
+			dateFormat: 'yy-mm-dd',
+			onSelect: function(dateText) {
+				if ($(this).is('.elgg-input-timestamp')) {
+					// convert to unix timestamp
+					var dateParts = dateText.split("-");
+					var timestamp = Date.UTC(dateParts[0], dateParts[1] - 1, dateParts[2]);
+					timestamp = timestamp / 1000;
+
+					var id = $(this).attr('id');
+					$('input[name="' + id + '"]').val(timestamp);
+				}
+			}
+		});
+	};
+	
+	if ($('.elgg-input-date').length && elgg.get_language() == 'en') {
+		loadDatePicker();
+	} else if ($('.elgg-input-date').length) {
+		elgg.get({
+			url: elgg.config.wwwroot + 'vendors/jquery/i18n/jquery.ui.datepicker-'+ elgg.get_language() +'.js',
+			dataType: "script",
+			cache: true,
+			success: loadDatePicker,
+			error: loadDatePicker // english language is already loaded.
+		});
+	}
+};
+
 elgg.register_hook_handler('init', 'system', elgg.ui.init);
-elgg.register_hook_handler('getOptions', 'ui.popup', elgg.ui.likesPopupHandler);
\ No newline at end of file
+elgg.register_hook_handler('init', 'system', elgg.ui.initDatePicker);
+elgg.register_hook_handler('getOptions', 'ui.popup', elgg.ui.loginHandler);