SAK-29035 caps-lock-checker.js changes styles inline with javascript …

…which is bad practise
yuyilin · Feb 2, 2015 · a2020b8 · a2020b8
1 parent 8182008
commit a2020b8
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 47 deletions.
diff --git a/reference/library/src/webapp/js/caps-lock-checker.js b/reference/library/src/webapp/js/caps-lock-checker.js
@@ -6,65 +6,68 @@ http://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-usi
 var browserDisplaysCapsLock = false;
 
 /*Some browsers on Mac OS X have a caps-lock indicator built in for input fields with type="password" */
-if (navigator.appVersion.indexOf("Mac") != -1)
+if (navigator.appVersion.indexOf("Mac") !== -1)
 {
-        var userAgent = navigator.userAgent.toLowerCase();
-        if (userAgent.indexOf('safari') != -1)
-        {
-                /*covers safari, chromium and chrome*/
-                browserDisplaysCapsLock = true;
-        }
+    var userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.indexOf('safari') !== -1)
+    {
+        /*covers safari, chromium and chrome*/
+        browserDisplaysCapsLock = true;
+    }
 }
 
 if (!browserDisplaysCapsLock)
 {
-	$("input:password").keypress(function(e)
-	{
-	 	if ( isCapslock(e) )
-		{
-			this.style.background = "white url(/library/image/silk/font.png) no-repeat right";
-		}
-		else
-		{
-			this.style.background = "";
-		}
-	});
+    $("input:password").keypress(function(e)
+    {
+        if ( isCapslock(e) )
+        {
+            if (this.className.indexOf("capsLockOnDisplay") === -1)
+            {
+                this.className += " capsLockOnDisplay";
+            }
+        }
+        else
+        {
+            var className = this.className.replace("capsLockOnDisplay", "");
+            this.className = className;
+        }
+    });
 }
 
 function isCapslock(e)
 {
-        e = (e) ? e: window.event;
+    e = (e) ? e: window.event;
 
-        var charCode = false;
-        if (e.which)
-        {
-                charCode = e.which;
-        }
-        else if (e.keyCode)
-        {
-                charCode = e.keyCode;
-        }
+    var charCode = false;
+    if (e.which)
+    {
+        charCode = e.which;
+    }
+    else if (e.keyCode)
+    {
+        charCode = e.keyCode;
+    }
 
-        var shifton = false;
-        if (e.shiftKey)
-        {
-                shifton = e.shiftKey;
-        }
-        else if (e.modifiers)
-        {
-                shifton = !!(e.modifiers & 4);
-        }
+    var shifton = false;
+    if (e.shiftKey)
+    {
+        shifton = e.shiftKey;
+    }
+    else if (e.modifiers)
+    {
+        shifton = !!(e.modifiers & 4);
+    }
 
-        if (charCode >=97 && charCode <= 122 && shifton)
-        {
-                return true;
-        }
+    if (charCode >=97 && charCode <= 122 && shifton)
+    {
+        return true;
+    }
 
-        if (charCode >= 65 && charCode <= 90 && !shifton)
-        {
-                return true;
-        }
+    if (charCode >= 65 && charCode <= 90 && !shifton)
+    {
+        return true;
+    }
 
-        return false;
+    return false;
 }
-
diff --git a/reference/library/src/webapp/skin/neo-default/tool.css b/reference/library/src/webapp/skin/neo-default/tool.css
@@ -1256,6 +1256,11 @@ input[type="checkbox"][disabled="disabled"], input[type="checkbox"][disabled="tr
 #helpSearchForm {
   padding: 6px;
 }
+
+.capsLockOnDisplay {
+    background: #ffffff url("/library/image/silk/font.png") no-repeat right;
+}
+
 #helpSearchForm\\:searchField {
   width: 100px;
   padding-right: 6px;