4 files changed, 57 insertions, 36 deletions

diff --git a/data/js/application.js b/data/js/application.js
index 3118f96bb..2ae412051 100644
--- a/data/js/application.js
+++ b/data/js/application.js
@@ -5,9 +5,10 @@ define(
 		'require',
 		'util',
 		'lexer-input',
+		'tabwidth-input',
 		'vendor'
 	],
-	function (require, Util, LexerInput) {
+	function (require, Util, LexerInput, TabwidthInput) {
 		require(['script']);
 		var App = {
 			 // Gets called for every request (before page load)
@@ -21,6 +22,8 @@ define(
 			 */
 			onPageLoaded: function (config) {
 				Util.highlightLineFromHash();
+				Util.setTabwidthFromLocalStorage();
+				TabwidthInput.initialize();
 				LexerInput.initialize(config.lexers);
 			},
 
diff --git a/data/js/script.js b/data/js/script.js
index 242456971..242cf74de 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -1,40 +1,5 @@
 (function($) {
 	$(function() {
-		$('a.tabwidth-toggle').on('click', function (event) {
-			setTimeout(function () {
-				$(event.target).siblings('.dropdown-menu').find('input').trigger('focus');
-			}, 0);
-		});
-
-		var setTabwidth = function (value) {
-			value = value || 8;
-			$('span.tabwidth-value').html(value);
-			$('.tabwidth-form input').val(value);
-			$('.highlight pre').css('tab-size', value);
-			localStorage.setItem('tabwidth', value);
-		};
-
-		$(document).ready(function () {
-			setTabwidth(localStorage.getItem('tabwidth'));
-		});
-		
-		$('form.tabwidth-form').on('submit', function (event) {
-			var value = $(event.target).find('input').val();
-			setTabwidth(value);
-			$(event.target).parents('.open').removeClass('open');
-			event.preventDefault();
-		});
-
-		$('form.tabwidth-form input').on('change', function (event) {
-			var value = $(event.target).val();
-			setTabwidth(value);
-			event.preventDefault();
-		});
-
-		$('form.tabwidth-form input').on('click', function (event) {
-			event.stopImmediatePropagation();
-		});
-
 		$('[rel="tooltip"]').tooltip({
 			placement: 'bottom',
 			container: 'body',
diff --git a/data/js/tabwidth-input.js b/data/js/tabwidth-input.js
new file mode 100644
index 000000000..62e2bb3f2
--- /dev/null
+++ b/data/js/tabwidth-input.js
@@ -0,0 +1,37 @@
+(function () {
+'use strict';
+define(['jquery', 'util'], function ($, Util) {
+	var PrivateFunctions = {
+		setupEvents: function () {
+			$('.tabwidth-toggle').on('click', _.bind(function (event) {
+				Util.focusDropdownInput(event.target);
+			}, Util));
+
+			$('form.tabwidth-form input').on('click', function (event) {
+				// Suppress blur event on dropdown toggle
+				event.stopImmediatePropagation();
+			});
+
+			$('form.tabwidth-form').on('submit', function (event) {
+				var value = $(event.target).find('input').val();
+				Util.setTabwidth(value);
+				$(event.target).parents('.open').removeClass('open');
+				event.preventDefault();
+			});
+
+			$('form.tabwidth-form input').on('change', function (event) {
+				var value = $(event.target).val();
+				Util.setTabwidth(value);
+				event.preventDefault();
+			});
+		}
+	};
+	var TabwidthInput = {
+		initialize: function () {
+			PrivateFunctions.setupEvents();
+		}
+	};
+
+	return TabwidthInput;
+});
+})();
diff --git a/data/js/util.js b/data/js/util.js
index 810bc4167..6c88edb2d 100644
--- a/data/js/util.js
+++ b/data/js/util.js
@@ -27,6 +27,22 @@ define(['jquery'], function () {
 			}
 
 			PrivateFunctions.highlightLine(hash);
+		},
+		focusDropdownInput: function (target) {
+			setTimeout(function () {
+				var dropDown = $(target).siblings('.dropdown-menu');
+				dropDown.find('input').trigger('focus');
+			}, 0);
+		},
+		setTabwidth: function (value) {
+			value = value || 8;
+			$('span.tabwidth-value').html(value);
+			$('.tabwidth-form input').val(value);
+			$('.highlight pre').css('tab-size', value);
+			localStorage.setItem('tabwidth', value);
+		},
+		setTabwidthFromLocalStorage: function () {
+			this.setTabwidth(localStorage.getItem('tabwidth'));
 		}
 	};
 	return Util;