clones/friendica
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
rabuzarus 2017-04-05 11:46:42 +02:00
parent dd919b7f80
commit 0542cd6a14
5 changed files with 83 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
view/theme/frio/js/filebrowser.js
View File

@ -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');

35
view/theme/frio/js/modal.js
View File

@ -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

21
view/theme/frio/js/theme.js
View File

@ -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;
}

41
view/theme/frio/templates/jot-header.tpl
View File

@ -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();});
}
</script>

46
view/theme/frio/templates/jot.tpl
View File

@ -12,48 +12,48 @@
<button type="button" class="close hidden-xs" data-dismiss="modal" style="float: right;">&times;</button>
{{* 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
the modal. Changing of the activity status is done by js in jot.tpl-header *}}
<li class="active" role="menuitem">
<a href="#profile-jot-wrapper" class="jot-text-lnk" id="jot-text-lnk" onclick="jotActive(); return false;">{{$message}}</a>
<li class="active" role="presentation">
<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>
{{if $acl}}
<li role="menuitem">
<a href="#profile-jot-acl-wrapper" class="jot-perms-lnk" id="jot-perms-lnk" onclick="aclActive(); return false;">{{$shortpermset}}</a>
<li role="presentation">
<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>
{{/if}}
{{if $preview}}
<li role="menuitem">
<a href="#jot-preview-content" class="jot-preview-lnk" id="jot-preview-lnk" onclick="previewActive(); return false;">{{$preview}}</a>
<li role="presentation">
<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>
{{/if}}
<li role="menuitem">
<a href="#jot-fbrowser-wrapper" class="jot-browser-lnk" id="jot-browser-link" onclick="fbrowserActive(); return false;">{{$browser}}</a>
<li role="presentation">
<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>
</ul>
{{* 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;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{$message}}&nbsp;<span class="caret"></span></button>
<ul class="dropdown-menu nav nav-pills">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">{{$message}}&nbsp;<span class="caret"></span></button>
<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
the modal. Changing of the activity status is done by js in jot.tpl-header *}}
<li role="menuitem" style="display: none;">
<button class="jot-text-lnk btn-link" id="jot-text-lnk-mobile" onclick="jotActive(); return false;">{{$message}}</button>
<li role="presentation" style="display: none;">
<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>
{{if $acl}}
<li role="menuitem">
<button class="jot-perms-lnk btn-link" id="jot-perms-lnk-mobile" onclick="aclActive(); return false;">{{$shortpermset}}</button>
<li role="presentation">
<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>
{{/if}}
{{if $preview}}
<li role="menuitem">
<button class="jot-preview-lnk btn-link" id="jot-preview-lnk-mobile" onclick="previewActive(); return false;">{{$preview}}</button>
<li role="presentation">
<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>
{{/if}}
<li role="menuitem">
<button class="jot-browser-lnk-mobile btn-link" id="jot-browser-lnk-mobile" onclick="fbrowserActive(); return false;">{{$browser}}</button>
<li role="presentation">
<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>
</ul>
</div>
@ -62,7 +62,7 @@
<div id="jot-modal-body" class="modal-body">
<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 id="profile-jot-desc" class="jothidden pull-right">&nbsp;</div>-->
</div>
@ -112,14 +112,14 @@
</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}}
</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>
<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}}
</div>