Added tabs to options.

Closes bakape#154
Closes bakape#42

client/options.js

@@ -107,8 +107,14 @@ options.on('change', function () {
 	catch (e) {}
 });
 
-/* LAST N CONFIG */
+var tabs = Object.freeze({
+	General: "General",
+	Style: "Style",
+	Fun: "Fun",
+	Shortcuts: "Shortcuts",
+});
 
+/* LAST N CONFIG */
 function option_last_n(n) {
 	if (!reasonable_last_n(n))
 		return;
@@ -119,6 +125,7 @@ option_last_n.id = 'lastn';
 option_last_n.label = '[Last #]';
 option_last_n.type = 'positive';
 option_last_n.tooltip = 'Number of posts to display with the "Last n" thread expansion link';
+option_last_n.tab = tabs.General;
 
 oneeSama.lastN = options.get('lastn');
 options.on('change:lastn', function (model, lastN) {
@@ -135,6 +142,7 @@ option_postUnloading.type = 'checkbox';
 option_postUnloading.tooltip = 'Improves thread responsiveness by unloading posts from the'+
 		' top of the thread, so that post count stays within the Last # value. Only applies to '+
 		'Last # enabled threads';
+option_postUnloading.tab = tabs.General;
 
 /* LOCK TO BOTTOM EVEN WHEN DOCUMENT HIDDEN*/
 
@@ -144,6 +152,7 @@ option_alwaysLock.id = 'alwaysLock';
 option_alwaysLock.label = 'Always Lock to Bottom';
 option_alwaysLock.type = 'checkbox';
 option_alwaysLock.tooltip = 'Lock scrolling to page bottom even when tab is hidden';
+option_alwaysLock.tab = tabs.General;
 
 /* THEMES */
 
@@ -175,6 +184,7 @@ option_theme.id = 'board.$BOARD.theme';
 option_theme.label = 'Theme';
 option_theme.type = themes;
 option_theme.tooltip = 'Select CSS theme';
+option_theme.tab = tabs.Style;
 
 /* THUMBNAIL OPTIONS */
 
@@ -192,6 +202,7 @@ option_thumbs.tooltip = 'Set thumbnail type: ' +
 	'Small: 125x125, small file size; ' +
 	'Sharp: 125x125, more detailed; ' +
 	'Hide: hide all images;';
+option_thumbs.tab = tabs.Style;
 
 /* REPLY AT RIGHT */
 
@@ -208,6 +219,7 @@ option_reply_at_right.id = 'replyright';
 option_reply_at_right.label = '[Reply] at Right';
 option_reply_at_right.type = 'checkbox';
 option_reply_at_right.tooltip = 'Move Reply button to the right side of the page';
+option_reply_at_right.tab = tabs.Style;
 
 /* BACKLINKS */
 
@@ -221,6 +233,7 @@ option_backlinks.id = 'nobacklinks';
 option_backlinks.label = 'Backlinks';
 option_backlinks.type = 'revcheckbox';
 option_backlinks.tooltip = 'Links to replies of current post';
+option_backlinks.tab = tabs.General;
 
 function show_backlinks() {
 	if (load_thread_backlinks) {
@@ -271,6 +284,7 @@ option_linkify.id = 'linkify';
 option_linkify.label = 'Linkify URLs';
 option_linkify.type = 'checkbox';
 option_linkify.tooltip = 'Convert in-post text URLs to clickable links. WARNING: Potential security hazard (XSS). Requires page refresh.';
+option_linkify.tab = tabs.General;
 
 /* RELATIVE POST TIMESTAMPS */
 
@@ -282,6 +296,7 @@ option_relative_time.id = 'relativeTime';
 option_relative_time.label = 'Relative Timestamps';
 option_relative_time.type = 'checkbox';
 option_relative_time.tooltip = 'Relative post timestamps. Ex.: "1 hour ago." Requires page refresh';
+option_relative_time.tab = tabs.Style;
 
 
 /* SAUCE TOGGLE */
@@ -294,6 +309,7 @@ option_sauce.id = 'nosaucetoggle';
 option_sauce.label = 'Sauce Links';
 option_sauce.type = 'checkbox';
 option_sauce.tooltip = "Replace 'Image' with sauce links. Requires page refresh";
+option_sauce.tab = tabs.General;
 
 
 /* SPOILER TOGGLE */
@@ -307,6 +323,8 @@ option_spoiler.id = 'noSpoilers';
 option_spoiler.label = 'Image Spoilers';
 option_spoiler.type = 'revcheckbox';
 option_spoiler.tooltip = "Don't spoiler images";
+option_spoiler.tab = tabs.Style;
+
 
 /* AUTOGIF TOGGLE */
 
@@ -319,6 +337,7 @@ option_autogif.id = 'autogif';
 option_autogif.label = 'Animated GIF Thumbnails';
 option_autogif.type = 'checkbox';
 option_autogif.tooltip = 'Animate GIF thumbnails';
+option_autogif.tab = tabs.General;
 
 /* TOP BANNER TOGGLE */
 
@@ -381,6 +400,7 @@ option_topbanner.id = 'notopbannertoggle';
 option_topbanner.label = 'Top Banner';
 option_topbanner.type = 'revcheckbox';
 option_topbanner.tooltip = 'Toggle the banner at the top'
+option_topbanner.tab = tabs.General;
 
 /* NOTIFICATIONS */
 
@@ -393,6 +413,24 @@ option_notification.id = 'notification';
 option_notification.label = 'Desktop Notifications';
 option_notification.type = 'checkbox';
 option_notification.tooltip = 'Get desktop notifications when quoted or a syncwatch is about to start';
+option_notification.tab = tabs.General;
+
+
+/* HORIZONTAL POSTING */
+
+function option_horizontal(toggle){
+	var style = '<style id="horizontal">article,aside{display:inline-block;}</style>';
+	if (toggle)
+		$('head').append(style);
+	else
+		$('#horizontal').remove();
+}
+
+option_horizontal.id = 'horizontalPosting';
+option_horizontal.label = 'Horizontal Posting';
+option_horizontal.type = 'checkbox';
+option_horizontal.tooltip = '38chan nostalgia';
+option_horizontal.tab = tabs.Fun;
 
 
 /* CUSTOM USER-SET BACKGROUND */
@@ -417,6 +455,7 @@ option_user_bg.id = 'board.$BOARD.userBG';
 option_user_bg.label = 'Custom Background';
 option_user_bg.type = 'checkbox';
 option_user_bg.tooltip = 'Toggle custom page background';
+option_user_bg.tab = tabs.Style;
 
 
 function option_user_bg_image(target){
@@ -469,6 +508,7 @@ option_user_bg_image.id = 'userBGimage';
 option_user_bg_image.label = '';
 option_user_bg_image.type = 'image';
 option_user_bg_image.tooltip = "Image to use as the background";
+option_user_bg_image.tab = tabs.Style;
 
 /* IMAGE HOVER EXPANSION */
 
@@ -532,28 +572,18 @@ option_image_hover.id = 'imageHover';
 option_image_hover.label = 'Image Hover Expansion';
 option_image_hover.type = 'checkbox';
 option_image_hover.tooltip = 'Display image previews on hover';
+option_image_hover.tab = tabs.General;
 
 // Toogle hover expansion of WebM
+
 function option_webm_hover(){}
 
 option_webm_hover.id = 'webmHover';
 option_webm_hover.label = 'WebM Hover Expansion';
 option_webm_hover.type = 'checkbox';
 option_webm_hover.tooltip = 'Display WebM previews on hover. Requires Image Hover Expansion enabled.';
+option_webm_hover.tab = tabs.General;
 
-/* HORIZONTAL POSTING */
-
-function option_horizontal(toggle){
-	var style = '<style id="horizontal">article,aside{display:inline-block;}</style>';
-	if (toggle)
-		$('body').append(style);
-	else
-		$('#horizontal').remove();
-}
-
-option_horizontal.id = 'horizontalPosting';
-option_horizontal.label = 'Horizontal Posting';
-option_horizontal.type = 'checkbox';
 
 /* INLINE EXPANSION */
 
@@ -565,6 +595,8 @@ option_inline_expansion.type = ['none', 'full', 'width', 'height', 'both'];
 option_inline_expansion.labels = ['none', 'full-size', 'fit to width',
 		'fit to height', 'fit to both'];
 option_inline_expansion.tooltip = "Expand images inside the parent post and resize according to setting";
+option_inline_expansion.tab = tabs.Style;
+
 
 /* Clear LocalStorage */
 
@@ -575,6 +607,7 @@ option_clean_ls.label = 'Restore Default Options';
 option_clean_ls.type = 'button';
 option_clean_ls.tooltip = 'Last resort to fix options.';
 option_clean_ls.click = "localStorage.removeItem('options');";
+option_clean_ls.tab = tabs.General;
 
 /* SHORTCUT KEYS */
 
@@ -585,28 +618,6 @@ var shortcuts = [
 	{label: 'Finish Post', name: 'done', which: 83},
 ];
 
-function toggle_shortcuts(event) {
-	event.preventDefault();
-	var $shortcuts = $('#shortcuts');
-	if ($shortcuts.length)
-		return $shortcuts.remove();
-	$shortcuts = $('<div/>', {
-		id: 'shortcuts',
-		click: select_shortcut,
-		keyup: change_shortcut,
-	});
-	shortcuts.forEach(function (s) {
-		var value = String.fromCharCode(shortcutKeys[s.name]);
-		var $label = $('<label>', {text: s.label});
-		$('<input>', {
-			id: s.name, maxlength: 1, val: value,
-		}).prependTo($label);
-		$label.prepend(document.createTextNode('Alt+'));
-		$shortcuts.append($label, '<br>');
-	});
-	$shortcuts.appendTo('#options-panel');
-}
-
 function select_shortcut(event) {
 	if ($(event.target).is('input'))
 		$(event.target).val('');
@@ -747,6 +758,7 @@ function make_options_panel() {
 			spec(val);
 		});
 	});
+	var tabCont= {}	//will contain the html for the content of each tab
 	optSpecs.forEach(function (spec) {
 		var id = spec.id;
 		if (nashi.opts.indexOf(id) >= 0)
@@ -787,14 +799,69 @@ function make_options_panel() {
 				$input.val(val);
 		}
 		var $label = $('<label/>').attr('for', id).attr('title', spec.tooltip).text(spec.label);
-		$opts.append($input.attr('id', id).attr('title', spec.tooltip), ' ', (spec.type == 'button' ? '' : $label), '<br>');
+		if(tabCont[spec.tab]==undefined)
+			tabCont[spec.tab]=[];
+		tabCont[spec.tab].push($input.attr('id', id).attr('title', spec.tooltip), ' ', (spec.type == 'button' ? '' : $label), '<br>');
 	});
 	if (!nashi.shortcuts) {
-		$opts.append($('<a/>', {
-			href: '#', text: 'Keyboard Shortcuts',
-			click: toggle_shortcuts,
-		}));
+		var $shortcuts;
+		$shortcuts = $('<div/>', {
+			id: 'shortcuts',
+			click: select_shortcut,
+			keyup: change_shortcut,
+		});
+		shortcuts.forEach(function (s) {
+			var value = String.fromCharCode(shortcutKeys[s.name]);
+			var $label = $('<label>', {text: s.label});
+			$('<input>', {
+				id: s.name, maxlength: 1, val: value,
+			}).prependTo($label);
+			$label.prepend(document.createTextNode('Alt+'));
+			$shortcuts.append($label, '<br>');
+		});
+		tabCont[tabs.Shortcuts] = $shortcuts;
+	}
+	var $tabSel = $('<ul/>', {"class": 'option_tab_sel'});
+	var $tabCont = $('<ul/>',{"class": 'option_tab_cont'});
+	for(var tab in tabs){
+		if(tabs[tab].length>0){
+			$tabSel.append($('<li>').append($('<a>', { 	//tab selector
+				'data-content':tab,
+				href: ('#'+tab),
+				text: tab,
+			})));
+			$tabCont.append($("<li\>",{					//tab content
+				'data-content':tab
+			}).append(tabCont[tabs[tab]]));
+		}
 	}
+	var tabButts = $tabSel.children().children(); 	//tab buttons
+	tabButts.on('click',function(event){
+		event.preventDefault();
+		var sel=$(this);
+		if(!sel.hasClass('tab_sel')){
+			tabButts.removeClass('tab_sel');
+			var selCont =$tabCont.find('li[data-content="'+sel.data('content')+'"]');
+			sel.addClass('tab_sel');
+			selCont.siblings('li').removeClass('tab_sel');
+			if(!isMobile)
+				$tabCont.animate({
+					'height': selCont.height(),
+				},{
+					complete: function(){ selCont.addClass('tab_sel'); },
+					duration: 150
+				});
+			else selCont.addClass('tab_sel');
+		}
+	});
+
+	$opts.append($tabSel);
+	$opts.append($tabCont);
+
+	var clickEvent = document.createEvent('MouseEvent');
+	clickEvent.initEvent('click',true,true);
+	tabButts[0].dispatchEvent(clickEvent); //tabButts[0].click() doesn't work in mobiles
+
 	oneeSama.trigger('initOptions', $opts);
 	return $opts.hide();
 }

www/css/ashita.css

@@ -90,3 +90,6 @@ hr {
 .themed {
 	color: #999;
 }
+.option_tab_sel a.tab_sel{
+	color: #add8e6;
+}

www/css/base.css

@@ -268,7 +268,35 @@ body > #navTop {
 	text-align: center;
 	white-space: nowrap;
 }
-/* Proper fixed element renderring with dynamic animated backgrounds */
+.option_tab_sel {
+	display: inline;
+	-webkit-padding-start: 0px;
+	-moz-padding-start: 0px;
+}
+.option_tab_sel li{
+	list-style-type: none;
+	float:left;
+}
+.option_tab_sel a{
+	display: inline-block;
+	padding: 7px;
+	text-decoration: none;
+	border-bottom: 1px solid;
+}
+.option_tab_cont{
+	padding-top: 10px;
+	padding-left: 5px;
+	margin-bottom: 0px;
+}
+.option_tab_cont li{
+	display: none;
+	float: left;
+}
+.option_tab_cont li.tab_sel{
+	display: inline-block;
+	padding-top: 5px;
+}
+/* Proper fixed element rendering with dynamic animated backgrounds */
 #banner, .bmodal, .modal {
 	-webkit-backface-visibility: hidden;
 	-webkit-transform: translateZ(0);
@@ -455,9 +483,6 @@ body > #options-panel {
 	padding-left: 1em;
 	text-decoration: none;
 }
-#shortcuts {
-	margin-top: 1em;
-}
 #shortcuts input {
 	border: none;
 	width: 2em;

www/css/console.css

@@ -173,3 +173,6 @@ small a.referenced {
 		margin-right: 0;
 	}
 }
+.option_tab_sel a.tab_sel{
+	outline: double;
+}

www/css/gar.css

@@ -85,6 +85,9 @@ hr {
 	border-right: 1px solid #eee;
 	border-bottom: 1px solid #eee;
 }
+.option_tab_sel a.tab_sel{
+	color: red;
+}
 .preview {
 	background-color: #f9f0d9;
 	border-right: 1px solid #e9e0c9;