reduce code duplication, fix parse error, prevent page reload on hitting enter while changing the display name - refs #8085

Author: DeepDiver1975

.jshintrc

@@ -23,6 +23,7 @@
 		"beforeEach": true,
 		"afterEach": true,
 		"sinon": true,
-		"fakeServer": true
+		"fakeServer": true,
+		"_": true
 	}
 }

core/js/core.json

@@ -6,7 +6,8 @@
 		"jquery-showpassword.js",
 		"jquery.infieldlabel.js",
 		"jquery.placeholder.js",
-		"jquery-tipsy.js"
+		"jquery-tipsy.js",
+		"underscore.js"
 	],
 	"modules": [
 		"compatibility.js",

lib/base.php

@@ -305,6 +305,7 @@ public static function initTemplateEngine() {
 		OC_Util::addScript("jquery.placeholder");
 		OC_Util::addScript("jquery-tipsy");
 		OC_Util::addScript("compatibility");
+		OC_Util::addScript("underscore");
 		OC_Util::addScript("jquery.ocdialog");
 		OC_Util::addScript("oc-dialogs");
 		OC_Util::addScript("js");

settings/js/personal.js

@@ -5,6 +5,36 @@
  * See the COPYING-README file.
  */
 
+/* global OC, t */
+
+/**
+ * The callback will be fired as soon as enter is pressed by the
+ * user or 1 second after the last data entry
+ *
+ * @param callback
+ */
+jQuery.fn.keyUpDelayedOrEnter = function(callback){
+	var cb = callback;
+	var that = this;
+	this.keyup(_.debounce(function (event) {
+		// enter is already handled in keypress
+		if(event.keyCode === 13) {
+			return;
+		}
+		if (that.val() !== '') {
+			cb();
+		}
+	}, 1000));
+
+	this.keypress(function () {
+		if (event.keyCode === 13 && that.val() !== '' ){
+			event.preventDefault();
+			cb();
+		}
+	});
+};
+
+
 /**
  * Post the email address change to the server.
  */
@@ -42,13 +72,12 @@ function changeDisplayName(){
             }
             OC.msg.finishedSaving('#displaynameform .msg', data);
         });
-        return false;
     }
 }
 
 function updateAvatar (hidedefault) {
-	$headerdiv = $('#header .avatardiv');
-	$displaydiv = $('#displayavatar .avatardiv');
+	var $headerdiv = $('#header .avatardiv');
+	var $displaydiv = $('#displayavatar .avatardiv');
 
 	if(hidedefault) {
 		$headerdiv.hide();
@@ -65,11 +94,12 @@ function updateAvatar (hidedefault) {
 }
 
 function showAvatarCropper() {
-	$cropper = $('#cropper');
+	var $cropper = $('#cropper');
 	$cropper.prepend("<img>");
-	$cropperImage = $('#cropper img');
+	var $cropperImage = $('#cropper img');
 
-	$cropperImage.attr('src', OC.generateUrl('/avatar/tmp')+'?requesttoken='+oc_requesttoken+'#'+Math.floor(Math.random()*1000));
+	$cropperImage.attr('src',
+		OC.generateUrl('/avatar/tmp')+'?requesttoken='+oc_requesttoken+'#'+Math.floor(Math.random()*1000));
 
 	// Looks weird, but on('load', ...) doesn't work in IE8
 	$cropperImage.ready(function(){
@@ -90,12 +120,12 @@ function showAvatarCropper() {
 function sendCropData() {
 	cleanCropper();
 
-	var cropperdata = $('#cropper').data();
+	var cropperData = $('#cropper').data();
 	var data = {
-		x: cropperdata.x,
-		y: cropperdata.y,
-		w: cropperdata.w,
-		h: cropperdata.h
+		x: cropperData.x,
+		y: cropperData.y,
+		w: cropperData.w,
+		h: cropperData.h
 	};
 	$.post(OC.generateUrl('/avatar/cropped'), {crop: data}, avatarResponseHandler);
 }
@@ -105,7 +135,7 @@ function saveCoords(c) {
 }
 
 function cleanCropper() {
-	$cropper = $('#cropper');
+	var $cropper = $('#cropper');
 	$('#displayavatar').show();
 	$cropper.hide();
 	$('.jcrop-holder').remove();
@@ -114,7 +144,7 @@ function cleanCropper() {
 }
 
 function avatarResponseHandler(data) {
-	$warning = $('#avatar .warning');
+	var $warning = $('#avatar .warning');
 	$warning.hide();
 	if (data.status === "success") {
 		updateAvatar();
@@ -157,41 +187,8 @@ $(document).ready(function(){
 
 	});
 
-    $('#displayName').keyup(function(){
-        if ($('#displayName').val() !== '' ){
-            if(typeof timeout !== 'undefined'){
-                clearTimeout(timeout);
-            }
-            timeout = setTimeout(changeDisplayName, 1000);
-        }
-    });
-
-
-    $('#email').keyup(function(event){
-        if ($('#email').val() !== '' ){
-            // if this is the enter key changeEmailAddress() is already invoked
-            // so it doesn't need to be triggered again
-            if(event.keyCode === 13) {
-                return;
-            }
-            if(typeof timeout !== 'undefined'){
-                clearTimeout(timeout);
-            }
-            timeout = setTimeout(changeEmailAddress, 1000);
-        }
-    });
-
-	$('#email').keypress(function(event){
-		// check for enter key and non empty email
-		if (event.keyCode === 13 && $('#email').val() !== '' ){
-			event.preventDefault()
-			// clear timeout of previous keyup event - prevents duplicate changeEmailAddress call
-			if(typeof timeout !== 'undefined'){
-				clearTimeout(timeout);
-			}
-			changeEmailAddress();
-		}
-	});
+	$('#displayName').keyUpDelayedOrEnter(changeDisplayName);
+	$('#email').keyUpDelayedOrEnter(changeEmailAddress);
 
 	$("#languageinput").change( function(){
 		// Serialize the data
@@ -256,7 +253,7 @@ $(document).ready(function(){
 		$.ajax({
 			type:	'DELETE',
 			url:	OC.generateUrl('/avatar/'),
-			success: function(msg) {
+			success: function() {
 				updateAvatar(true);
 				$('#removeavatar').hide();
 			}
@@ -321,7 +318,7 @@ OC.Encryption.msg={
 	},
 	finishedDecrypting:function(selector, data){
 		if( data.status === "success" ){
-			 $(selector).html( data.data.message )
+			$(selector).html( data.data.message )
 				.addClass('success')
 				.stop(true, true)
 				.delay(3000);