Add functionality for choosing tab width in frontend

2 files changed, 42 insertions, 1 deletions

diff --git a/data/css/style.css b/data/css/style.css
index 4af58e9c4..f59344f6f 100644
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -322,6 +322,13 @@ body {
 	opacity: 0.4;
 }
 
+.tabwidth-dropdown { padding: 15px; }
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+input[type="number"] { 	-moz-appearance: textfield; }
 
 /* highlighting theme */
 .hll { background-color: #ffffcc }
diff --git a/data/js/script.js b/data/js/script.js
index c96bdb5b7..9b8319b14 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -4,7 +4,6 @@ function fixedEncodeURIComponent (str) {
 
 (function($) {
 	$(function() {
-
 		$(window).bind('hashchange', function(e) {
 			var hash = window.location.hash;
 
@@ -33,6 +32,41 @@ function fixedEncodeURIComponent (str) {
 			}
 		});
 
+		$('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();
+		});
+
 		$(document).on("keyup", "[id^=language-]", function(event) {
 			if (event.keyCode == 13) {
 				event.preventDefault();