From 0542cd6a14735e0a4dd7270ad5b6986c5f5dff55 Mon Sep 17 00:00:00 2001 From: rabuzarus <> Date: Wed, 5 Apr 2017 11:46:42 +0200 Subject: [PATCH] add aria attributes + restructure some js to change the aria attributes --- view/theme/frio/js/filebrowser.js | 10 +++--- view/theme/frio/js/modal.js | 35 +++++++++++++++--- view/theme/frio/js/theme.js | 21 ++++++++--- view/theme/frio/templates/jot-header.tpl | 41 +++++---------------- view/theme/frio/templates/jot.tpl | 46 ++++++++++++------------ 5 files changed, 83 insertions(+), 70 deletions(-) diff --git a/view/theme/frio/js/filebrowser.js b/view/theme/frio/js/filebrowser.js index 468188b35..77e9e5088 100644 --- a/view/theme/frio/js/filebrowser.js +++ b/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'); diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js index b77f62161..1fd03ddfa 100644 --- a/view/theme/frio/js/modal.js +++ b/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 diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 8a3bd4110..00f969101 100644 --- a/view/theme/frio/js/theme.js +++ b/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() + ' '); - $(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() + ' '); + $(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; +} diff --git a/view/theme/frio/templates/jot-header.tpl b/view/theme/frio/templates/jot-header.tpl index 6aad9889d..d52f4b98d 100644 --- a/view/theme/frio/templates/jot-header.tpl +++ b/view/theme/frio/templates/jot-header.tpl @@ -280,39 +280,14 @@ .modal.show; } - // the following functions show/hide the specific jot content - // in dependence of the selected nav - function aclActive() { - $(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").addClass("minimize"); - $(".modal-body #profile-jot-acl-wrapper").removeClass("minimize"); - } - - - function previewActive() { - $(".modal-body #profile-jot-wrapper, .modal-body #profile-jot-acl-wrapper,.modal-body #jot-fbrowser-wrapper").addClass("minimize"); - var postPreview = preview_post(); - if (postPreview && typeof postPreview !== "undefined") { - $(".modal-body #jot-preview-content").removeClass("minimize"); - } - } - + // Activate the jot text section in the jot modal function jotActive() { - $(".modal-body #profile-jot-acl-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").addClass("minimize"); - $(".modal-body #profile-jot-wrapper").removeClass("minimize"); - - //make sure jot text does have really the active class (we do this because there are some - // other events which trigger jot text - toggleJotNav($("#jot-modal .jot-nav #jot-text-lnk")); + // Make sure jot text does have really the active class (we do this because there are some + // other events which trigger jot text (we need to do this for the desktop and mobile + // jot nav + var elem = $("#jot-modal .jot-nav #jot-text-lnk"); + var elemMobile = $("#jot-modal .jot-nav #jot-text-lnk-mobile") + toggleJotNav(elem[0]); + toggleJotNav(elemMobile[0]); } - - function fbrowserActive() { - $(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content, .modal-body #profile-jot-acl-wrapper").addClass("minimize"); - - $(".modal-body #jot-fbrowser-wrapper").removeClass("minimize"); - - $(function() {Dialog.showJot();}); - } - - - diff --git a/view/theme/frio/templates/jot.tpl b/view/theme/frio/templates/jot.tpl index 36e0f7797..2ebd1c1dd 100644 --- a/view/theme/frio/templates/jot.tpl +++ b/view/theme/frio/templates/jot.tpl @@ -12,48 +12,48 @@ {{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}} -