add aria attributes + restructure some js to change the aria attributes

view/theme/frio/js/filebrowser.js

@@ -81,13 +81,13 @@ var FileBrowser = {
 			var destination = h.split("-")[0];
 			FileBrowser.id = h.split("-")[1];
 			FileBrowser.event = FileBrowser.event + "." + destination;
-			if (destination == "comment") {
+			if (destination === "comment") {
 				// Get the comment textimput field
 				var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);
 			}
 		};
 
-		console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id);
+		console.log("FileBrowser: " + nickname,  type, FileBrowser.event, FileBrowser.id);
 
 		FileBrowser.postLoad();
 
@@ -110,10 +110,10 @@ var FileBrowser = {
 			e.preventDefault();
 
 			var embed = "";
-			if (FileBrowser.type == "image") {
+			if (FileBrowser.type === "image") {
 				embed = "[url=" + this.dataset.link + "][img]" + this.dataset.img + "[/img][/url]";
 			}
-			if (FileBrowser.type == "file") {
+			if (FileBrowser.type === "file") {
 				// attachment links are "baseurl/attach/id"; we need id
 				embed = "[attachment]" + this.dataset.link.split("/").pop() + "[/attachment]";
 			}
@@ -123,7 +123,7 @@ var FileBrowser = {
 			// work as expected (we need a way to wait until commentOpenUI would be finished).
 			// As for now we insert pieces of this function here
 			if ((commentElm !== null) && (typeof commentElm !== "undefined")) {
-				if (commentElm.value == "") {
+				if (commentElm.value === "") {
 					$("#comment-edit-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
 					$("#comment-edit-submit-wrapper-" + FileBrowser.id).show();
 					$("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9');

view/theme/frio/js/modal.js

@@ -59,7 +59,7 @@ $(document).ready(function(){
 	});
 
 	// Jot nav menu.
-	$("body").on("click", "#jot-modal .jot-nav li a", function(e){
+	$("body").on("click", "#jot-modal .jot-nav li .jot-nav-lnk", function(e){
 		e.preventDefault();
 		toggleJotNav(this);
 	});
@@ -306,10 +306,37 @@ function jotreset() {
 
 // Give the active "jot-nav" list element the class "active"
 function toggleJotNav (elm) {
-	// select all li of jot-nav and remove the active class
-	$(".jot-nav li").removeClass("active");
-	// add the active class to the parent of the link which was selected
+	// Get the ID of the tab panel which should be activated
+	var tabpanel = elm.getAttribute("aria-controls");
+	var cls = hasClass(elm, "jot-nav-lnk-mobile");
+
+	// Select all li of jot-nav and remove the active class
+	$(elm).parent("li").siblings("li").removeClass("active");
+	// Add the active class to the parent of the link which was selected
 	$(elm).parent("li").addClass("active");
+
+	// Minimize all tab content wrapper and activate only the selected
+	// tab panel
+	$('#jot-modal [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true");
+	$('#jot-modal #' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false");
+
+	// Set the aria-selected states
+	$("#jot-modal .nav-tabs .jot-nav-lnk").attr("aria-selected", "false");
+	elm.setAttribute("aria-selected", "true");
+
+	// For some some tab panels we need to execute other js functions
+	if (tabpanel === "jot-preview-content") {
+		preview_post();
+	} else if (tabpanel === "jot-fbrowser-wrapper") {
+		$(function() {
+			Dialog.showJot();
+		});
+	}
+
+	// If element is a mobile dropdown nav menu we need to change the botton text
+	if (cls) {
+		toggleDropdownText(elm);
+	}
 }
 
 // Wall Message needs a special handling because in some cases

view/theme/frio/js/theme.js

@@ -208,11 +208,8 @@ $(document).ready(function(){
 
 	// Dropdown menus with the class "dropdown-head" will display the active tab
 	// as button text
-	$("body").on('click', '.dropdown-head .dropdown-menu li a', function(){
-		$(this).closest(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
-		$(this).closest(".dropdown").find('.btn').val($(this).data('value'));
-		$(this).closest("ul").children("li").show();
-		$(this).parent("li").hide();
+	$("body").on('click', '.dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button', function(){
+		toggleDropdownText(this);
 	});
 
 	/* setup onoff widgets */
@@ -688,3 +685,17 @@ function bin2hex (s) {
 
 	return o;
 }
+
+// Dropdown menus with the class "dropdown-head" will display the active tab
+// as button text
+function toggleDropdownText(elm) {
+		$(elm).closest(".dropdown").find('.btn').html($(elm).text() + ' <span class="caret"></span>');
+		$(elm).closest(".dropdown").find('.btn').val($(elm).data('value'));
+		$(elm).closest("ul").children("li").show();
+		$(elm).parent("li").hide();
+}
+
+// Check if element does have a specific class
+function hasClass(elem, cls) {
+	return (" " + elem.className + " " ).indexOf( " "+cls+" " ) > -1;
+}