add aria attributes + restructure some js to change the aria attributes
This commit is contained in:
parent
dd919b7f80
commit
0542cd6a14
|
@ -81,13 +81,13 @@ var FileBrowser = {
|
||||||
var destination = h.split("-")[0];
|
var destination = h.split("-")[0];
|
||||||
FileBrowser.id = h.split("-")[1];
|
FileBrowser.id = h.split("-")[1];
|
||||||
FileBrowser.event = FileBrowser.event + "." + destination;
|
FileBrowser.event = FileBrowser.event + "." + destination;
|
||||||
if (destination == "comment") {
|
if (destination === "comment") {
|
||||||
// Get the comment textimput field
|
// Get the comment textimput field
|
||||||
var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);
|
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();
|
FileBrowser.postLoad();
|
||||||
|
|
||||||
|
@ -110,10 +110,10 @@ var FileBrowser = {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var embed = "";
|
var embed = "";
|
||||||
if (FileBrowser.type == "image") {
|
if (FileBrowser.type === "image") {
|
||||||
embed = "[url=" + this.dataset.link + "][img]" + this.dataset.img + "[/img][/url]";
|
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
|
// attachment links are "baseurl/attach/id"; we need id
|
||||||
embed = "[attachment]" + this.dataset.link.split("/").pop() + "[/attachment]";
|
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).
|
// work as expected (we need a way to wait until commentOpenUI would be finished).
|
||||||
// As for now we insert pieces of this function here
|
// As for now we insert pieces of this function here
|
||||||
if ((commentElm !== null) && (typeof commentElm !== "undefined")) {
|
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-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
|
||||||
$("#comment-edit-submit-wrapper-" + FileBrowser.id).show();
|
$("#comment-edit-submit-wrapper-" + FileBrowser.id).show();
|
||||||
$("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9');
|
$("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9');
|
||||||
|
|
|
@ -59,7 +59,7 @@ $(document).ready(function(){
|
||||||
});
|
});
|
||||||
|
|
||||||
// Jot nav menu.
|
// 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();
|
e.preventDefault();
|
||||||
toggleJotNav(this);
|
toggleJotNav(this);
|
||||||
});
|
});
|
||||||
|
@ -306,10 +306,37 @@ function jotreset() {
|
||||||
|
|
||||||
// Give the active "jot-nav" list element the class "active"
|
// Give the active "jot-nav" list element the class "active"
|
||||||
function toggleJotNav (elm) {
|
function toggleJotNav (elm) {
|
||||||
// select all li of jot-nav and remove the active class
|
// Get the ID of the tab panel which should be activated
|
||||||
$(".jot-nav li").removeClass("active");
|
var tabpanel = elm.getAttribute("aria-controls");
|
||||||
// add the active class to the parent of the link which was selected
|
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");
|
$(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
|
// Wall Message needs a special handling because in some cases
|
||||||
|
|
|
@ -208,11 +208,8 @@ $(document).ready(function(){
|
||||||
|
|
||||||
// Dropdown menus with the class "dropdown-head" will display the active tab
|
// Dropdown menus with the class "dropdown-head" will display the active tab
|
||||||
// as button text
|
// as button text
|
||||||
$("body").on('click', '.dropdown-head .dropdown-menu li a', function(){
|
$("body").on('click', '.dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button', function(){
|
||||||
$(this).closest(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
|
toggleDropdownText(this);
|
||||||
$(this).closest(".dropdown").find('.btn').val($(this).data('value'));
|
|
||||||
$(this).closest("ul").children("li").show();
|
|
||||||
$(this).parent("li").hide();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
/* setup onoff widgets */
|
/* setup onoff widgets */
|
||||||
|
@ -688,3 +685,17 @@ function bin2hex (s) {
|
||||||
|
|
||||||
return o;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -280,39 +280,14 @@
|
||||||
.modal.show;
|
.modal.show;
|
||||||
}
|
}
|
||||||
|
|
||||||
// the following functions show/hide the specific jot content
|
// Activate the jot text section in the jot modal
|
||||||
// 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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function jotActive() {
|
function jotActive() {
|
||||||
$(".modal-body #profile-jot-acl-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").addClass("minimize");
|
// Make sure jot text does have really the active class (we do this because there are some
|
||||||
$(".modal-body #profile-jot-wrapper").removeClass("minimize");
|
// other events which trigger jot text (we need to do this for the desktop and mobile
|
||||||
|
// jot nav
|
||||||
//make sure jot text does have really the active class (we do this because there are some
|
var elem = $("#jot-modal .jot-nav #jot-text-lnk");
|
||||||
// other events which trigger jot text
|
var elemMobile = $("#jot-modal .jot-nav #jot-text-lnk-mobile")
|
||||||
toggleJotNav($("#jot-modal .jot-nav #jot-text-lnk"));
|
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();});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -12,48 +12,48 @@
|
||||||
<button type="button" class="close hidden-xs" data-dismiss="modal" style="float: right;">×</button>
|
<button type="button" class="close hidden-xs" data-dismiss="modal" style="float: right;">×</button>
|
||||||
|
|
||||||
{{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}}
|
{{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}}
|
||||||
<ul class="nav nav-tabs hidden-xs jot-nav" role="menubar" data-tabs="tabs">
|
<ul class="nav nav-tabs hidden-xs jot-nav" role="tablist" data-tabs="tabs">
|
||||||
{{* Mark the first list entry as active because it is the first which is active after opening
|
{{* Mark the first list entry as active because it is the first which is active after opening
|
||||||
the modal. Changing of the activity status is done by js in jot.tpl-header *}}
|
the modal. Changing of the activity status is done by js in jot.tpl-header *}}
|
||||||
<li class="active" role="menuitem">
|
<li class="active" role="presentation">
|
||||||
<a href="#profile-jot-wrapper" class="jot-text-lnk" id="jot-text-lnk" onclick="jotActive(); return false;">{{$message}}</a>
|
<a href="#profile-jot-wrapper" class="jot-text-lnk jot-nav-lnk" id="jot-text-lnk" role="tab" aria-controls="profile-jot-wrapper" aria-selected="true">{{$message}}</a>
|
||||||
</li>
|
</li>
|
||||||
{{if $acl}}
|
{{if $acl}}
|
||||||
<li role="menuitem">
|
<li role="presentation">
|
||||||
<a href="#profile-jot-acl-wrapper" class="jot-perms-lnk" id="jot-perms-lnk" onclick="aclActive(); return false;">{{$shortpermset}}</a>
|
<a href="#profile-jot-acl-wrapper" class="jot-perms-lnk jot-nav-lnk" id="jot-perms-lnk" role="tab" aria-controls="profile-jot-acl-wrapper" aria-selected="false">{{$shortpermset}}</a>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{if $preview}}
|
{{if $preview}}
|
||||||
<li role="menuitem">
|
<li role="presentation">
|
||||||
<a href="#jot-preview-content" class="jot-preview-lnk" id="jot-preview-lnk" onclick="previewActive(); return false;">{{$preview}}</a>
|
<a href="#jot-preview-content" class="jot-preview-lnk jot-nav-lnk" id="jot-preview-lnk" role="tab" aria-controls="jot-preview-content" aria-selected="false">{{$preview}}</a>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<li role="menuitem">
|
<li role="presentation">
|
||||||
<a href="#jot-fbrowser-wrapper" class="jot-browser-lnk" id="jot-browser-link" onclick="fbrowserActive(); return false;">{{$browser}}</a>
|
<a href="#jot-fbrowser-wrapper" class="jot-browser-lnk jot-nav-lnk" id="jot-browser-link" role="tab" aria-controls="jot-fbrowser-wrapper" aria-selected="false">{{$browser}}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{{* The Jot navigation menu for small displays (text input, permissions, preview, filebrowser) *}}
|
{{* The Jot navigation menu for small displays (text input, permissions, preview, filebrowser) *}}
|
||||||
<div class="dropdown dropdown-head dropdown-mobile-jot jot-nav hidden-lg hidden-md hidden-sm" role="menubar" data-tabs="tabs" style="float: left;">
|
<div class="dropdown dropdown-head dropdown-mobile-jot jot-nav hidden-lg hidden-md hidden-sm" role="menubar" data-tabs="tabs" style="float: left;">
|
||||||
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{$message}} <span class="caret"></span></button>
|
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">{{$message}} <span class="caret"></span></button>
|
||||||
<ul class="dropdown-menu nav nav-pills">
|
<ul class="dropdown-menu nav nav-pills" aria-label="submenu">
|
||||||
{{* mark the first list entry as active because it is the first which is active after opening
|
{{* mark the first list entry as active because it is the first which is active after opening
|
||||||
the modal. Changing of the activity status is done by js in jot.tpl-header *}}
|
the modal. Changing of the activity status is done by js in jot.tpl-header *}}
|
||||||
<li role="menuitem" style="display: none;">
|
<li role="presentation" style="display: none;">
|
||||||
<button class="jot-text-lnk btn-link" id="jot-text-lnk-mobile" onclick="jotActive(); return false;">{{$message}}</button>
|
<button class="jot-text-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-text-lnk-mobile" aria-controls="profile-jot-wrapper" role="menuitem" aria-selected="true">{{$message}}</button>
|
||||||
</li>
|
</li>
|
||||||
{{if $acl}}
|
{{if $acl}}
|
||||||
<li role="menuitem">
|
<li role="presentation">
|
||||||
<button class="jot-perms-lnk btn-link" id="jot-perms-lnk-mobile" onclick="aclActive(); return false;">{{$shortpermset}}</button>
|
<button class="jot-perms-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-perms-lnk-mobile" aria-controls="profile-jot-acl-wrapper" role="menuitem" aria-selected="false">{{$shortpermset}}</button>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{if $preview}}
|
{{if $preview}}
|
||||||
<li role="menuitem">
|
<li role="presentation">
|
||||||
<button class="jot-preview-lnk btn-link" id="jot-preview-lnk-mobile" onclick="previewActive(); return false;">{{$preview}}</button>
|
<button class="jot-preview-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-preview-lnk-mobile" aria-controls="jot-preview-content" role="menuitem" aria-selected="false">{{$preview}}</button>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<li role="menuitem">
|
<li role="presentation">
|
||||||
<button class="jot-browser-lnk-mobile btn-link" id="jot-browser-lnk-mobile" onclick="fbrowserActive(); return false;">{{$browser}}</button>
|
<button class="jot-browser-lnk-mobile btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-browser-lnk-mobile" aria-controls="jot-fbrowser-wrapper" role="menuitem" aria-selected="false">{{$browser}}</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -62,7 +62,7 @@
|
||||||
|
|
||||||
<div id="jot-modal-body" class="modal-body">
|
<div id="jot-modal-body" class="modal-body">
|
||||||
<form id="profile-jot-form" action="{{$action}}" method="post">
|
<form id="profile-jot-form" action="{{$action}}" method="post">
|
||||||
<div id="profile-jot-wrapper">
|
<div id="profile-jot-wrapper" aria-labelledby="jot-text-lnk" role="tabpanel" aria-hidden="false">
|
||||||
<div>
|
<div>
|
||||||
<!--<div id="profile-jot-desc" class="jothidden pull-right"> </div>-->
|
<!--<div id="profile-jot-desc" class="jothidden pull-right"> </div>-->
|
||||||
</div>
|
</div>
|
||||||
|
@ -112,14 +112,14 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="profile-jot-acl-wrapper" class="minimize">
|
<div id="profile-jot-acl-wrapper" class="minimize" aria-labelledby="jot-perms-lnk" role="tabpanel" aria-hidden="true">
|
||||||
{{$acl}}
|
{{$acl}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="jot-preview-content" class="minimize"></div>
|
<div id="jot-preview-content" class="minimize" aria-labelledby="jot-preview-lnk" role="tabpanel" aria-hidden="true"></div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div id="jot-fbrowser-wrapper" class="minimize"></div>
|
<div id="jot-fbrowser-wrapper" class="minimize" aria-labelledby="jot-browser-link" role="tabpanel" aria-hidden="true"></div>
|
||||||
|
|
||||||
{{if $content}}<script>initEditor();</script>{{/if}}
|
{{if $content}}<script>initEditor();</script>{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user