Merge pull request #1290 from cryptpad/toolbar
Toolbar accessibility improvements
This commit is contained in:
commit
16b5539ba8
19 changed files with 627 additions and 394 deletions
|
@ -128,9 +128,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
//div:focus {
|
||||
// outline: none;
|
||||
//}
|
||||
|
||||
.fa {
|
||||
font-family: FontAwesome;
|
||||
|
@ -507,6 +507,9 @@
|
|||
}
|
||||
}
|
||||
#cp-app-drive-content {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
background: @cp_sidebar-right-bg;
|
||||
color: @cp_sidebar-right-fg;
|
||||
|
@ -547,7 +550,7 @@
|
|||
}
|
||||
li {
|
||||
cursor: default;
|
||||
&:not(.cp-app-drive-element-header) {
|
||||
&:not(.cp-app-drive-element-header):not([role="menuitem"]) {
|
||||
&:hover {
|
||||
&:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
|
||||
background-color: @cp_drive-icon-hover;
|
||||
|
|
|
@ -77,66 +77,72 @@
|
|||
|
||||
&.cp-dropdown-left {
|
||||
right: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > a, & > span {
|
||||
color: @cp_dropdown-fg;
|
||||
border-radius: @variables_radius;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
float: none;
|
||||
text-align: left;
|
||||
line-height: 1em;
|
||||
align-items: center;
|
||||
li:not([class]) {
|
||||
padding: 0;
|
||||
& > a, & > span {
|
||||
color: @cp_dropdown-fg;
|
||||
border-radius: @variables_radius;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
float: none;
|
||||
text-align: left;
|
||||
line-height: 1em;
|
||||
align-items: center;
|
||||
|
||||
&:not(.fa) {
|
||||
font: @dropdown_font;
|
||||
}
|
||||
&.fa, &.cptools {
|
||||
font-size: 18px;
|
||||
&::before {
|
||||
width: 40px;
|
||||
margin-left: -10px;
|
||||
text-align: center;
|
||||
}
|
||||
* {
|
||||
&:not(.fa) {
|
||||
font: @dropdown_font;
|
||||
}
|
||||
}
|
||||
&.fa, &.cptools {
|
||||
font-size: 18px;
|
||||
&::before {
|
||||
width: 40px;
|
||||
margin-left: -10px;
|
||||
text-align: center;
|
||||
}
|
||||
* {
|
||||
font: @dropdown_font;
|
||||
}
|
||||
}
|
||||
|
||||
.fa, .cptools {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
.fa, .cptools {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @cp_dropdown-bg-hover;
|
||||
&.cp-dropdown-element-active {
|
||||
background-color: @cp_dropdown-bg-active;
|
||||
color: @cp_dropdown-fg;
|
||||
}
|
||||
|
||||
&.cp-app-hidden {
|
||||
display: none;
|
||||
}
|
||||
&.cp-app-disabled {
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
li[role="menuitem"] {
|
||||
border-radius: @variables_radius;
|
||||
&:hover, &:focus {
|
||||
background-color: @cp_dropdown-bg-hover !important;
|
||||
color: @cp_dropdown-fg;
|
||||
}
|
||||
|
||||
&.cp-dropdown-element-active {
|
||||
background-color: @cp_dropdown-bg-active;
|
||||
color: @cp_dropdown-fg;
|
||||
}
|
||||
|
||||
&.cp-app-hidden {
|
||||
display: none;
|
||||
}
|
||||
&.cp-app-disabled {
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
&> span {
|
||||
box-sizing: border-box;
|
||||
|
@ -173,6 +179,9 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
[role="separator"] + [role="separator"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
min-width: 160px;
|
||||
|
|
|
@ -17,8 +17,9 @@
|
|||
width: 300px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding-left: 0;
|
||||
& hr {
|
||||
margin: 0px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.cp-notification {
|
||||
min-height: @notif-height;
|
||||
|
@ -71,10 +72,13 @@
|
|||
}
|
||||
}
|
||||
.cp-notifications-gotoapp {
|
||||
padding: 0 !important;
|
||||
justify-content: center !important;
|
||||
p {
|
||||
padding: 10px 0 !important;
|
||||
text-align: center !important;
|
||||
font-weight: bold;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold !important;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: @cp_dropdown-bg-hover;
|
||||
|
|
|
@ -367,12 +367,14 @@
|
|||
* {
|
||||
outline-width: 0;
|
||||
&:focus {
|
||||
outline-width: 0;
|
||||
outline-width: 1rem;
|
||||
// color shows on chrome/edge, but not firefox
|
||||
outline-color: grey; // XXX temporary color to change
|
||||
}
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
@ -443,13 +445,6 @@
|
|||
screen and (max-height: 500px) {
|
||||
flex-wrap: wrap;
|
||||
height: @toolbar_line-height;
|
||||
.cp-pad-not-pinned {
|
||||
line-height: 32px;
|
||||
flex: unset;
|
||||
padding: 0;
|
||||
align-self: auto;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.cp-toolbar-top-filler {
|
||||
height: 32px;
|
||||
}
|
||||
|
@ -582,41 +577,6 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.cp-pad-not-pinned {
|
||||
order: 4;
|
||||
flex: 1;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
line-height: @toolbar_top-height;
|
||||
padding: 0;
|
||||
margin: 0 5px;
|
||||
font-size: @colortheme_app-font-size;
|
||||
color: @cp_toolbar-warn;
|
||||
.cp-pnp-msg {
|
||||
padding-left: 5px;
|
||||
font-family: @colortheme_font;
|
||||
font-size: @colortheme_app-font-size;
|
||||
a {
|
||||
font-size: @colortheme_app-font-size;
|
||||
font-family: @colortheme_font;
|
||||
font-weight: bold;
|
||||
color: @cp_toolbar-warn;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: (@browser_media-not-big)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: (@browser_media-not-big)) {
|
||||
overflow: visible;
|
||||
max-width: 20px;
|
||||
}
|
||||
}
|
||||
.cp-toolbar-top-filler {
|
||||
height: @toolbar_top-height;
|
||||
display: inline-block;
|
||||
|
@ -795,6 +755,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.cp-toolbar-notifications {
|
||||
.cp-notifications-container {
|
||||
padding: 0 5px;;
|
||||
li {
|
||||
margin: 0 -5px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-toolbar-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
@ -867,7 +836,6 @@
|
|||
text-align: center;
|
||||
|
||||
.cp-dropdown-content {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
& > button {
|
||||
|
@ -913,14 +881,22 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
p.cp-toolbar-account {
|
||||
div.cp-toolbar-account {
|
||||
&> span {
|
||||
font-weight: bold;
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
min-width: 160px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
color: @cryptpad_text_col;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cp-toolbar-backup {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
@ -1265,3 +1241,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -3447,6 +3447,7 @@ Example
|
|||
icon = h('span', { class: iconClass });
|
||||
}
|
||||
var $category = $(h('div', {
|
||||
'tabindex': 0,
|
||||
'class': 'cp-sidebarlayout-category'
|
||||
}, [
|
||||
icon,
|
||||
|
@ -3456,16 +3457,18 @@ Example
|
|||
$category.addClass('cp-leftside-active');
|
||||
}
|
||||
|
||||
$category.click(function () {
|
||||
if (!Array.isArray(categories[key]) && categories[key].onClick) {
|
||||
categories[key].onClick();
|
||||
return;
|
||||
$category.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
if (!Array.isArray(categories[key]) && categories[key].onClick) {
|
||||
categories[key].onClick();
|
||||
return;
|
||||
}
|
||||
active = key;
|
||||
common.setHash(key);
|
||||
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
|
||||
$category.addClass('cp-leftside-active');
|
||||
showCategories(categories[key]);
|
||||
}
|
||||
active = key;
|
||||
common.setHash(key);
|
||||
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
|
||||
$category.addClass('cp-leftside-active');
|
||||
showCategories(categories[key]);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -767,8 +767,8 @@ define([
|
|||
options: options, // Entries displayed in the menu
|
||||
common: common,
|
||||
buttonCls: 'btn btn-default fa fa-gear small cp-calendar-actions',
|
||||
ariaLabel: Messages.calendar_settings,
|
||||
};
|
||||
buttonTitle: Messages.calendar_settings,
|
||||
};
|
||||
return UIElements.createDropdown(dropdownConfig)[0];
|
||||
};
|
||||
var makeCalendarEntry = function (id, teamId) {
|
||||
|
@ -1270,9 +1270,7 @@ ICS ==> create a new event with the same UID and a RECURRENCE-ID field (with a v
|
|||
};
|
||||
var $block = UIElements.createDropdown(dropdownConfig);
|
||||
$block.setValue(view || 'week');
|
||||
var $views = $block.find('a');
|
||||
$views.click(function () {
|
||||
var mode = $(this).attr('data-value');
|
||||
$block.onChange.reg((name, mode) => {
|
||||
cal.changeView(mode);
|
||||
updateDateRange();
|
||||
updateRecurring();
|
||||
|
@ -1973,9 +1971,7 @@ APP.recurrenceRule = {
|
|||
|
||||
var $block = UIElements.createDropdown(dropdownConfig);
|
||||
$block.setValue('minutes');
|
||||
var $types = $block.find('a');
|
||||
$types.click(function () {
|
||||
var mode = $(this).attr('data-value');
|
||||
$block.onChange.reg((name, mode) => {
|
||||
var max = mode === "minutes" ? 60 : 24;
|
||||
$number.attr('max', max);
|
||||
if ($number.val() > max) { $number.val(max); }
|
||||
|
|
|
@ -573,9 +573,7 @@ define([
|
|||
if (!$blockContainer || !$blockContainer.length) {
|
||||
var id = '';
|
||||
if (cfg.id) { id = '#'+cfg.id; }
|
||||
$blockContainer = $(h('div.cp-modal-container'+id, {
|
||||
tabindex: 1
|
||||
}));
|
||||
$blockContainer = $(h('div.cp-modal-container'+id, {}));
|
||||
}
|
||||
var deleted = false;
|
||||
var hide = function () {
|
||||
|
@ -877,6 +875,7 @@ define([
|
|||
opts = opts || {};
|
||||
var attributes = merge({
|
||||
type: 'password',
|
||||
tabindex: '1',
|
||||
autocomplete: 'one-time-code', // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
|
||||
}, opts);
|
||||
|
||||
|
|
|
@ -24,18 +24,17 @@ define([
|
|||
};
|
||||
|
||||
Msg.initSelector = function ($select, sfcommon) {
|
||||
var selector = $select || $('#cp-language-selector');
|
||||
var $selector = $select || $('#cp-language-selector');
|
||||
|
||||
if (!selector.length) { return; }
|
||||
if (!$selector.length) { return; }
|
||||
|
||||
var language = Messages._getLanguage();
|
||||
|
||||
// Select the current language in the list
|
||||
selector.setValue(language || 'en');
|
||||
$selector.setValue(language || 'en');
|
||||
|
||||
// Listen for language change
|
||||
$(selector).find('a.cp-language-value').on('click', function () {
|
||||
var newLanguage = $(this).attr('data-value');
|
||||
$selector.onChange.reg((prettyName, newLanguage) => {
|
||||
Msg.setLanguage(newLanguage, sfcommon && sfcommon.getSframeChannel(), function () {
|
||||
if (newLanguage !== language) {
|
||||
if (sfcommon) {
|
||||
|
@ -46,6 +45,7 @@ define([
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
Msg.applyTranslation = function () {
|
||||
|
|
|
@ -1497,14 +1497,20 @@ define([
|
|||
if (config.buttonContent) {
|
||||
$button = $(h('button', {
|
||||
class: config.buttonCls || '',
|
||||
'aria-label': config.ariaLabel || '',
|
||||
'aria-haspopup': 'menu',
|
||||
'aria-expanded': 'false',
|
||||
'title': config.buttonTitle || '',
|
||||
'aria-label': config.buttonTitle || '',
|
||||
}, [
|
||||
h('span.cp-dropdown-button-title', config.buttonContent),
|
||||
]));
|
||||
} else {
|
||||
$button = $('<button>', {
|
||||
'class': config.buttonCls || '',
|
||||
'aria-label': config.ariaLabel || '',
|
||||
'aria-haspopup': 'menu',
|
||||
'aria-expanded': 'false',
|
||||
'title': config.buttonTitle || '',
|
||||
'aria-label': config.buttonTitle || '',
|
||||
}).append($('<span>', {'class': 'cp-dropdown-button-title'}).text(config.text || ""));
|
||||
}
|
||||
|
||||
|
@ -1521,19 +1527,30 @@ define([
|
|||
}
|
||||
|
||||
// Menu
|
||||
var $innerblock = $('<div>', {'class': 'cp-dropdown-content'});
|
||||
var $innerblock = $('<ul>', {'class': 'cp-dropdown-content', 'role': 'menu'});
|
||||
if (config.left) { $innerblock.addClass('cp-dropdown-left'); }
|
||||
|
||||
var hide = function () {
|
||||
window.setTimeout(function () { $innerblock.hide(); }, 0);
|
||||
};
|
||||
|
||||
// When the menu is collapsed, update aria-expanded
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
mutations.forEach(function (mutation) {
|
||||
if (mutation.attributeName !== 'style') { return; }
|
||||
if ($innerblock[0].style.display === 'none') {
|
||||
$button.attr('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
observer.observe($innerblock[0], { attributes: true });
|
||||
|
||||
// Add the dropdown content
|
||||
var setOptions = function (options) {
|
||||
options.forEach(function (o) {
|
||||
if (!isValidOption(o)) { return; }
|
||||
if (isElement(o)) { return $innerblock.append(o); }
|
||||
if (isElement(o)) { return void $innerblock.append(o); }
|
||||
var $el = $(h(o.tag, (o.attributes || {})));
|
||||
|
||||
if (typeof(o.content) === 'string' || (o.content instanceof Element)) {
|
||||
o.content = [o.content];
|
||||
}
|
||||
|
@ -1546,16 +1563,49 @@ define([
|
|||
$el[0].appendChild(document.createTextNode(item));
|
||||
}
|
||||
});
|
||||
// array of elements or text nodes
|
||||
}
|
||||
|
||||
$el.appendTo($innerblock);
|
||||
if (typeof(o.action) === 'function') {
|
||||
$el.click(function (e) {
|
||||
var close = o.action(e);
|
||||
if (close) { hide(); }
|
||||
});
|
||||
// Everything is added as an "li" tag
|
||||
// Links and items with action are focusable
|
||||
// Add correct "role" attribute
|
||||
var $li = $(h('li'));
|
||||
if (o.tag === 'a') {
|
||||
$el.attr('tabindex', '-1');
|
||||
$li.attr('role', 'menuitem');
|
||||
$li.attr('tabindex', '0');
|
||||
} else if (o.tag === 'li') {
|
||||
$li = $el;
|
||||
$li.attr('role', 'menuitem');
|
||||
$li.attr('tabindex', '0');
|
||||
} else if (o.tag === 'hr') {
|
||||
$li.attr('role', 'separator');
|
||||
} else {
|
||||
$li.attr('role', 'none');
|
||||
}
|
||||
$li.append($el);
|
||||
$li.appendTo($innerblock);
|
||||
|
||||
// Action can be triggered with a click or keyboard event
|
||||
if (o.tag !== 'a' && o.tag !== 'li') { return; }
|
||||
|
||||
$li.on('mouseenter', (e) => {
|
||||
e.stopPropagation();
|
||||
$li.focus();
|
||||
});
|
||||
var onAction = function (e) {
|
||||
if (config.isSelect) { return; }
|
||||
if (e.type === 'click' || (e.type === 'keydown' && e.keyCode === 13) || (e.type === 'keydown' && e.keyCode === 32)) {
|
||||
e.stopPropagation();
|
||||
if (typeof(o.action) === "function") {
|
||||
var close = o.action(e);
|
||||
if (close) { hide(); }
|
||||
} else {
|
||||
// Click on <a> with an href
|
||||
if (e.type === 'keydown'){ $el.get(0).click(); }
|
||||
}
|
||||
}
|
||||
};
|
||||
$li.on('click keydown', onAction);
|
||||
});
|
||||
};
|
||||
setOptions(config.options);
|
||||
|
@ -1572,6 +1622,11 @@ define([
|
|||
if ($el.length !== 1) { return; }
|
||||
$innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
|
||||
$el.addClass('cp-dropdown-element-active');
|
||||
$el.closest('li').focus();
|
||||
};
|
||||
var setFocus = function ($el) {
|
||||
if ($el.length !== 1) { return; }
|
||||
$el.focus();
|
||||
var scroll = $el.position().top + $innerblock.scrollTop();
|
||||
if (scroll < $innerblock.scrollTop()) {
|
||||
$innerblock.scrollTop(scroll);
|
||||
|
@ -1584,6 +1639,7 @@ define([
|
|||
var wh = $(window).height();
|
||||
var button = $button[0].getBoundingClientRect();
|
||||
var topPos = button.bottom;
|
||||
$button.attr('aria-expanded', 'true');
|
||||
$innerblock.css('bottom', '');
|
||||
if (config.noscroll) {
|
||||
var h = $innerblock.outerHeight();
|
||||
|
@ -1595,15 +1651,19 @@ define([
|
|||
}
|
||||
$innerblock.show();
|
||||
$innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
|
||||
if (config.isSelect && value) {
|
||||
// We use JSON.stringify here to escape quotes
|
||||
if (typeof(value) === "object") { value = JSON.stringify(value); }
|
||||
var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');
|
||||
setActive($val);
|
||||
try {
|
||||
$innerblock.scrollTop($val.position().top + $innerblock.scrollTop());
|
||||
} catch (e) {}
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (config.isSelect && value) {
|
||||
// We use JSON.stringify here to escape quotes
|
||||
if (typeof(value) === "object") { value = JSON.stringify(value); }
|
||||
var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');
|
||||
setActive($val);
|
||||
try {
|
||||
$innerblock.scrollTop($val.position().top + $innerblock.scrollTop());
|
||||
} catch (e) {}
|
||||
} else {
|
||||
setFocus($innerblock.find('[role="menuitem"]').first());
|
||||
}
|
||||
});
|
||||
if (config.feedback) { Feedback.send(config.feedback); }
|
||||
};
|
||||
|
||||
|
@ -1614,7 +1674,9 @@ define([
|
|||
|
||||
var $c = $container.closest('.cp-toolbar-drawer-content');
|
||||
$c.removeClass('cp-dropdown-visible');
|
||||
if (!state) { $c.addClass('cp-dropdown-visible'); }
|
||||
if (!state) {
|
||||
$c.addClass('cp-dropdown-visible');
|
||||
}
|
||||
|
||||
try {
|
||||
$('iframe').each(function (idx, ifrw) {
|
||||
|
@ -1631,71 +1693,14 @@ define([
|
|||
});
|
||||
|
||||
if (config.isSelect) {
|
||||
var pressed = '';
|
||||
var to;
|
||||
$container.onChange = Util.mkEvent();
|
||||
$container.on('click', 'a', function () {
|
||||
value = $(this).data('value');
|
||||
var $val = $(this);
|
||||
$container.on('click', 'li', function () {
|
||||
var $val = $(this).find('a');
|
||||
value = $val.data('value');
|
||||
var textValue = $val.text() || value;
|
||||
$button.find('.cp-dropdown-button-title').text(textValue);
|
||||
$container.onChange.fire(textValue, value);
|
||||
});
|
||||
$container.keydown(function (e) {
|
||||
var $value = $innerblock.find('[data-value].cp-dropdown-element-active:visible');
|
||||
if (!$value.length) {
|
||||
$value = $innerblock.find('[data-value]').first();
|
||||
}
|
||||
if (e.which === 38) { // Up
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if ($value.length) {
|
||||
$value.mouseleave();
|
||||
var $prev = $value.prev();
|
||||
$prev.mouseenter();
|
||||
setActive($prev);
|
||||
}
|
||||
}
|
||||
if (e.which === 40) { // Down
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if ($value.length) {
|
||||
$value.mouseleave();
|
||||
var $next = $value.next();
|
||||
$next.mouseenter();
|
||||
setActive($next);
|
||||
}
|
||||
}
|
||||
if (e.which === 13) { //Enter
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if ($value.length) {
|
||||
$value.click();
|
||||
hide();
|
||||
}
|
||||
}
|
||||
if (e.which === 27) { // Esc
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$value.mouseleave();
|
||||
hide();
|
||||
}
|
||||
});
|
||||
$container.keypress(function (e) {
|
||||
window.clearTimeout(to);
|
||||
var c = String.fromCharCode(e.which);
|
||||
pressed += c;
|
||||
// We use JSON.stringify here to escape quotes
|
||||
var $value = $innerblock.find('[data-value^='+JSON.stringify(pressed)+']:first');
|
||||
if ($value.length) {
|
||||
setActive($value);
|
||||
$innerblock.scrollTop($value.position().top + $innerblock.scrollTop());
|
||||
}
|
||||
to = window.setTimeout(function () {
|
||||
pressed = '';
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
$container.setValue = function (val, name, sync) {
|
||||
value = val;
|
||||
// We use JSON.stringify here to escape quotes
|
||||
|
@ -1713,6 +1718,130 @@ define([
|
|||
};
|
||||
}
|
||||
|
||||
var pressed = '';
|
||||
var to;
|
||||
var findItem = function () {
|
||||
var $value = $();
|
||||
$innerblock.find('[role="menuitem"]').each((i, el) => {
|
||||
var $el = $(el);
|
||||
var $item = $el.find('> *');
|
||||
if ($item.length && !$item.is(':visible')) { return false; }
|
||||
var text = $el.text().toLowerCase();
|
||||
var p = pressed.toLowerCase();
|
||||
if (text.indexOf(p) === 0) {
|
||||
$value = $el;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return $value;
|
||||
};
|
||||
var getAll = () => {
|
||||
return $innerblock.find('[role="menuitem"]').filter((i, el) => {
|
||||
var $item = $(el).find('> *');
|
||||
return !$item.length || $item.is(':visible');
|
||||
});
|
||||
};
|
||||
var getPrev = ($el) => {
|
||||
var $all = getAll();
|
||||
if (!$all.length) { return $(); }
|
||||
var idx = $all.index($el[0]);
|
||||
if (idx === -1) { return $(); }
|
||||
var prev = (idx - 1 + $all.length) % $all.length;
|
||||
return $($all.get(prev));
|
||||
};
|
||||
var getNext = ($el) => {
|
||||
var $all = getAll();
|
||||
if (!$all.length) { return $(); }
|
||||
var idx = $all.index($el[0]);
|
||||
if (idx === -1) { return $(); }
|
||||
var next = (idx + 1) % $all.length;
|
||||
return $($all.get(next));
|
||||
};
|
||||
$container.keydown(function (e) {
|
||||
e.stopPropagation(); // don't propagate event to window if the dropdown is focused
|
||||
|
||||
var visible = $innerblock.is(':visible');
|
||||
var $value = $innerblock.find('li:focus');
|
||||
if (!visible && [38,40].includes(e.which) && !config.isSelect) {
|
||||
$container.click();
|
||||
visible = true;
|
||||
}
|
||||
if (!visible) { return; }
|
||||
if (e.which === 38) { // Up
|
||||
e.preventDefault();
|
||||
var $prev;
|
||||
if (!$value.length) {
|
||||
$prev = getAll().last();
|
||||
} else {
|
||||
$prev = getPrev($value);
|
||||
}
|
||||
$value.mouseleave();
|
||||
$prev.mouseenter();
|
||||
setTimeout(() => {
|
||||
setFocus($prev);
|
||||
});
|
||||
}
|
||||
if (e.which === 40) { // Down
|
||||
e.preventDefault();
|
||||
var $next;
|
||||
if (!$value.length) {
|
||||
$next = getAll().first();
|
||||
} else {
|
||||
$next = getNext($value);
|
||||
}
|
||||
$value.mouseleave();
|
||||
$next.mouseenter();
|
||||
setTimeout(() => {
|
||||
setFocus($next);
|
||||
});
|
||||
}
|
||||
if (e.which === 13 || e.which === 32) { //Enter or space
|
||||
e.preventDefault();
|
||||
if ($value.length) {
|
||||
$value.click();
|
||||
hide();
|
||||
$button.focus();
|
||||
} else {
|
||||
setFocus(getAll().first());
|
||||
}
|
||||
}
|
||||
if (e.which === 27) { // Esc
|
||||
e.preventDefault();
|
||||
$value.mouseleave();
|
||||
hide();
|
||||
$button.focus();
|
||||
}
|
||||
if (e.which === 9) { // Tab
|
||||
hide();
|
||||
if (e.shiftKey) {
|
||||
$button.focus();
|
||||
} else {
|
||||
$innerblock.find('[role="menuitem"]').last().focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
$container.keypress(function (e) {
|
||||
e.stopPropagation(); // Don't propagate to window
|
||||
window.clearTimeout(to);
|
||||
var c = String.fromCharCode(e.which);
|
||||
pressed += c;
|
||||
// We use JSON.stringify here to escape quotes
|
||||
var $value;
|
||||
if (config.isSelect) {
|
||||
$value = $innerblock.find('[data-value^='+JSON.stringify(pressed)+']:first').closest('li');
|
||||
} else {
|
||||
$value = findItem();
|
||||
}
|
||||
if ($value.length) {
|
||||
setFocus($value);
|
||||
$innerblock.scrollTop($value.position().top + $innerblock.scrollTop());
|
||||
}
|
||||
to = window.setTimeout(function () {
|
||||
pressed = '';
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
|
||||
return $container;
|
||||
};
|
||||
|
||||
|
@ -1825,7 +1954,7 @@ define([
|
|||
]));
|
||||
}
|
||||
options.push({
|
||||
tag: 'p',
|
||||
tag: 'div',
|
||||
attributes: {'class': 'cp-toolbar-account'},
|
||||
content: userAdminContent,
|
||||
});
|
||||
|
@ -1849,7 +1978,7 @@ define([
|
|||
options.push({
|
||||
tag: 'a',
|
||||
attributes: {
|
||||
'class': 'fa fa-hdd-o'
|
||||
'class': 'fa fa-hdd-o',
|
||||
},
|
||||
content: h('span', Messages.type.drive),
|
||||
action: function () {
|
||||
|
@ -1861,7 +1990,7 @@ define([
|
|||
options.push({
|
||||
tag: 'a',
|
||||
attributes: {
|
||||
'class': 'fa fa-users'
|
||||
'class': 'fa fa-users',
|
||||
},
|
||||
content: h('span', Messages.type.teams),
|
||||
action: function () {
|
||||
|
@ -1885,7 +2014,7 @@ define([
|
|||
options.push({
|
||||
tag: 'a',
|
||||
attributes: {
|
||||
'class': 'fa fa-address-book'
|
||||
'class': 'fa fa-address-book',
|
||||
},
|
||||
content: h('span', Messages.type.contacts),
|
||||
action: function () {
|
||||
|
@ -1930,7 +2059,7 @@ define([
|
|||
'target': '_blank',
|
||||
'rel': 'noopener',
|
||||
'href': 'https://docs.cryptpad.org',
|
||||
'class': 'fa fa-book'
|
||||
'class': 'fa fa-book',
|
||||
},
|
||||
content: h('span', Messages.docs_link)
|
||||
});
|
||||
|
@ -1963,7 +2092,7 @@ define([
|
|||
options.push({
|
||||
tag: 'a',
|
||||
attributes: {
|
||||
'class': 'fa fa-home'
|
||||
'class': 'fa fa-home',
|
||||
},
|
||||
content: h('span', Messages.homePage),
|
||||
action: function () {
|
||||
|
@ -2004,7 +2133,7 @@ define([
|
|||
options.push({
|
||||
tag: 'a',
|
||||
attributes: {
|
||||
'class': 'fa fa-gift'
|
||||
'class': 'fa fa-gift',
|
||||
},
|
||||
content: h('span', Messages.crowdfunding_button2),
|
||||
action: function () {
|
||||
|
@ -2101,6 +2230,7 @@ define([
|
|||
options: options, // Entries displayed in the menu
|
||||
left: true, // Open to the left of the button
|
||||
container: config.$initBlock, // optional
|
||||
buttonTitle: config.buttonTitle,
|
||||
feedback: "USER_ADMIN",
|
||||
common: Common
|
||||
};
|
||||
|
|
|
@ -646,7 +646,7 @@ define([
|
|||
var $trashTreeContextMenu = $("#cp-app-drive-context-trashtree");
|
||||
var $trashContextMenu = $("#cp-app-drive-context-trash");
|
||||
|
||||
|
||||
$content.attr("tabindex", "0");
|
||||
var splitter = h('div.cp-splitter', [
|
||||
h('i.fa.fa-ellipsis-v')
|
||||
]);
|
||||
|
@ -2814,7 +2814,7 @@ define([
|
|||
var content = h('div', [
|
||||
h('h4', Messages.sharedFolders_create),
|
||||
h('label', {for: 'cp-app-drive-sf-name'}, Messages.sharedFolders_create_name),
|
||||
h('input#cp-app-drive-sf-name', {type: 'text', placeholder: Messages.fm_newFolder}),
|
||||
h('input#cp-app-drive-sf-name', {type: 'text', placeholder: Messages.fm_newFolder,tabindex:'1'}),
|
||||
h('label', {for: 'cp-app-drive-sf-password'}, Messages.fm_shareFolderPassword),
|
||||
UI.passwordInput({id: 'cp-app-drive-sf-password'}),
|
||||
h('span', {
|
||||
|
@ -2884,9 +2884,9 @@ define([
|
|||
]);
|
||||
var content = h('p', [
|
||||
h('label', {for: 'cp-app-drive-link-name'}, Messages.fm_link_name),
|
||||
name = h('input#cp-app-drive-link-name', { autocomplete: 'off', placeholder: Messages.fm_link_name_placeholder }),
|
||||
name = h('input#cp-app-drive-link-name', { autocomplete: 'off', placeholder: Messages.fm_link_name_placeholder, tabindex:'1'}),
|
||||
h('label', {for: 'cp-app-drive-link-url'}, Messages.fm_link_url),
|
||||
url = h('input#cp-app-drive-link-url', { type: 'url', autocomplete: 'off', placeholder: Messages.form_input_ph_url }),
|
||||
url = h('input#cp-app-drive-link-url', { type: 'url', autocomplete: 'off', placeholder: Messages.form_input_ph_url,tabindex:'1'}),
|
||||
warning,
|
||||
]);
|
||||
|
||||
|
@ -2959,29 +2959,56 @@ define([
|
|||
refresh();
|
||||
};
|
||||
$block.find('a.cp-app-drive-new-folder, li.cp-app-drive-new-folder')
|
||||
.click(function () {
|
||||
manager.addFolder(currentPath, null, onCreated);
|
||||
});
|
||||
.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
event.preventDefault();
|
||||
manager.addFolder(currentPath, null, onCreated);
|
||||
}
|
||||
});
|
||||
if (!APP.disableSF && !manager.isInSharedFolder(currentPath)) {
|
||||
$block.find('a.cp-app-drive-new-shared-folder, li.cp-app-drive-new-shared-folder')
|
||||
.click(function () {
|
||||
addSharedFolderModal(function (obj) {
|
||||
if (!obj) { return; }
|
||||
manager.addSharedFolder(currentPath, obj, refresh);
|
||||
.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
event.preventDefault();
|
||||
addSharedFolderModal(function (obj) {
|
||||
if (!obj) { return; }
|
||||
manager.addSharedFolder(currentPath, obj, refresh);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
$block.find('a.cp-app-drive-new-fileupload, li.cp-app-drive-new-fileupload').click(showUploadFilesModal);
|
||||
$block.find('a.cp-app-drive-new-folderupload, li.cp-app-drive-new-folderupload').click(showUploadFolderModal);
|
||||
$block.find('a.cp-app-drive-new-link, li.cp-app-drive-new-link').click(showLinkModal);
|
||||
$block.find('a.cp-app-drive-new-fileupload, li.cp-app-drive-new-fileupload')
|
||||
.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
event.preventDefault();
|
||||
showUploadFilesModal();
|
||||
}
|
||||
});
|
||||
$block.find('a.cp-app-drive-new-folderupload, li.cp-app-drive-new-folderupload')
|
||||
.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
event.preventDefault();
|
||||
showUploadFolderModal();
|
||||
}
|
||||
});
|
||||
$block.find('a.cp-app-drive-new-link, li.cp-app-drive-new-link')
|
||||
.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
event.preventDefault();
|
||||
showLinkModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
$block.find('a.cp-app-drive-new-doc, li.cp-app-drive-new-doc')
|
||||
.on('click auxclick', function (e) {
|
||||
e.preventDefault();
|
||||
var type = $(this).attr('data-type') || 'pad';
|
||||
var path = manager.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
|
||||
openIn(type, path, APP.team);
|
||||
});
|
||||
.on('click auxclick keypress', function (event) {
|
||||
if (event.type === 'click' || event.type === 'auxclick' || (event.type === 'keypress' && event.which === 13))
|
||||
{
|
||||
event.preventDefault();
|
||||
var type = $(this).attr('data-type') || 'pad';
|
||||
var path = manager.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
|
||||
openIn(type, path, APP.team);
|
||||
}
|
||||
});
|
||||
};
|
||||
var getNewPadOptions = function (isInRoot) {
|
||||
var options = [];
|
||||
|
@ -3064,18 +3091,24 @@ define([
|
|||
|
||||
// Create dropdown
|
||||
var options = getNewPadOptions(isInRoot).map(function (obj) {
|
||||
if (obj.separator) { return { tag: 'hr' }; }
|
||||
if (obj.separator) {
|
||||
return { tag: 'hr', };
|
||||
}
|
||||
|
||||
var newObj = {
|
||||
tag: 'a',
|
||||
attributes: { 'class': obj.class },
|
||||
content: [ obj.icon, obj.name ]
|
||||
attributes: { 'class': obj.class, href: '#' },
|
||||
content: [obj.icon, obj.name]
|
||||
};
|
||||
|
||||
if (obj.type) {
|
||||
newObj.attributes['data-type'] = obj.type;
|
||||
newObj.attributes['href'] = APP.origin + Hash.hashToHref('', obj.type);
|
||||
}
|
||||
|
||||
return newObj;
|
||||
});
|
||||
|
||||
var dropdownConfig = {
|
||||
buttonContent: [
|
||||
h('i.fa.fa-plus'),
|
||||
|
@ -3089,13 +3122,13 @@ define([
|
|||
var $block = UIElements.createDropdown(dropdownConfig);
|
||||
|
||||
// Custom style:
|
||||
$block.find('button').addClass('cp-app-drive-toolbar-new');
|
||||
|
||||
// actions for +New menu button
|
||||
var menuButton = $block.find('button');
|
||||
menuButton.addClass('cp-app-drive-toolbar-new');
|
||||
addNewPadHandlers($block, isInRoot);
|
||||
|
||||
$container.append($block);
|
||||
};
|
||||
|
||||
var createFilterButton = function (isTemplate, $container) {
|
||||
if (!APP.loggedIn) { return; }
|
||||
|
||||
|
@ -3106,6 +3139,7 @@ define([
|
|||
tag: 'a',
|
||||
attributes: {
|
||||
'class': 'cp-app-drive-rm-filter',
|
||||
'href': '#'
|
||||
},
|
||||
content: [
|
||||
h('i.fa.fa-times'),
|
||||
|
@ -3133,7 +3167,7 @@ define([
|
|||
attributes: attributes,
|
||||
content: [
|
||||
getIcon(type)[0],
|
||||
Messages.type[type],
|
||||
Messages.type[type]
|
||||
],
|
||||
});
|
||||
});
|
||||
|
@ -3143,11 +3177,12 @@ define([
|
|||
tag: 'a',
|
||||
attributes: {
|
||||
'class': 'cp-app-drive-filter-doc',
|
||||
'data-type': 'link'
|
||||
'data-type': 'link',
|
||||
'href': '#'
|
||||
},
|
||||
content: [
|
||||
getIcon('link')[0],
|
||||
Messages.fm_link_type,
|
||||
Messages.fm_link_type
|
||||
],
|
||||
});
|
||||
options.push({
|
||||
|
@ -3159,7 +3194,7 @@ define([
|
|||
},
|
||||
content: [
|
||||
getIcon('file')[0],
|
||||
Messages.type['file'],
|
||||
Messages.type['file']
|
||||
],
|
||||
});
|
||||
}
|
||||
|
@ -3277,6 +3312,7 @@ define([
|
|||
h('i.fa.fa-minus'),
|
||||
Messages.fm_type,
|
||||
],
|
||||
action: function (e) { onSortByClick.call($(e.target).find('a')[0]); }
|
||||
},{
|
||||
tag: 'a',
|
||||
attributes: {'class': 'cp-app-drive-element-atime'},
|
||||
|
@ -3284,6 +3320,7 @@ define([
|
|||
h('i.fa.fa-minus'),
|
||||
Messages.fm_lastAccess,
|
||||
],
|
||||
action: function (e) { onSortByClick.call($(e.target).find('a')[0]); }
|
||||
},{
|
||||
tag: 'a',
|
||||
attributes: {'class': 'cp-app-drive-element-ctime'},
|
||||
|
@ -3291,6 +3328,7 @@ define([
|
|||
h('i.fa.fa-minus'),
|
||||
Messages.fm_creation,
|
||||
],
|
||||
action: function (e) { onSortByClick.call($(e.target).find('a')[0]); }
|
||||
}];
|
||||
var dropdownConfig = {
|
||||
text: '', // Button initial text
|
||||
|
@ -3302,7 +3340,6 @@ define([
|
|||
};
|
||||
var $sortBlock = UIElements.createDropdown(dropdownConfig);
|
||||
$sortBlock.find('button').append(h('span.fa.fa-sort-amount-desc')).append(h('span', Messages.fm_sort));
|
||||
$sortBlock.on('click', 'a', onSortByClick);
|
||||
return $fhSort;
|
||||
};
|
||||
var getFolderListHeader = function (clickable, small) {
|
||||
|
@ -3482,16 +3519,16 @@ define([
|
|||
|
||||
// Create the ghost icon to add pads/folders
|
||||
var createNewPadIcons = function ($block, isInRoot) {
|
||||
var $container = $('<div>');
|
||||
var $container = $('<ul>');
|
||||
getNewPadOptions(isInRoot).forEach(function (obj) {
|
||||
if (obj.separator) { return; }
|
||||
|
||||
var $element = $('<li>', {
|
||||
'class': obj.class + ' cp-app-drive-element-row ' +
|
||||
'cp-app-drive-element-grid'
|
||||
'cp-app-drive-element-grid',
|
||||
'tabindex': 1
|
||||
}).prepend(obj.icon).appendTo($container);
|
||||
$element.append($('<span>', { 'class': 'cp-app-drive-new-name' })
|
||||
.text(obj.name));
|
||||
$element.append($('<span>', { 'class': 'cp-app-drive-new-name' }).text(obj.name));
|
||||
|
||||
if (obj.type) {
|
||||
$element.attr('data-type', obj.type);
|
||||
|
@ -4318,9 +4355,12 @@ define([
|
|||
$icon.css("color", isSharedFolder ? getFolderColor(path.slice(0, -1)) : getFolderColor(path));
|
||||
var $collapse;
|
||||
if (collapsable) {
|
||||
$collapse = $expandIcon.clone();
|
||||
$collapse = $expandIcon.clone().attr('tabindex', 0);
|
||||
}
|
||||
var $elementRow = $('<span>', {'class': 'cp-app-drive-element-row'}).append($collapse).append($icon).append($name).click(function (e) {
|
||||
var $elementRow = $('<span>', {'class': 'cp-app-drive-element-row', 'tabindex': 0}).append($collapse).append($icon).append($name).on('click keypress', function (e) {
|
||||
if (e.type === 'keypress' && e.which !== 13) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
if (isSharedFolder && !manager.folders[isSharedFolder]) {
|
||||
UI.warn(Messages.fm_deletedFolder);
|
||||
|
@ -4343,7 +4383,10 @@ define([
|
|||
if (draggable) { $elementRow.attr('draggable', true); }
|
||||
if (collapsable) {
|
||||
$element.addClass('cp-app-drive-element-collapsed');
|
||||
$collapse.click(function(e) {
|
||||
$collapse.on('click keypress', function(e) {
|
||||
if (e.type === 'keypress' && e.which !== 13) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
if ($element.hasClass('cp-app-drive-element-collapsed')) {
|
||||
// It is closed, open it
|
||||
|
|
|
@ -74,7 +74,7 @@ define([
|
|||
h('div.cp-app-contacts-category-content')
|
||||
]),
|
||||
h('div.cp-app-contacts-friends.cp-app-contacts-category', [
|
||||
h('button.cp-app-contacts-muted-button',[
|
||||
h('button.cp-app-contacts-muted-button', {tabindex:0},[
|
||||
h('i.fa.fa-bell-slash'),
|
||||
Messages.contacts_manageMuted
|
||||
]),
|
||||
|
@ -520,6 +520,7 @@ define([
|
|||
|
||||
markup.room = function (id, room, userlist) {
|
||||
var roomEl = h('div.cp-app-contacts-friend.cp-avatar', {
|
||||
'tabindex': '0',
|
||||
'data-key': id,
|
||||
'data-user': room.isFriendChat ? userlist[0].curvePublic : '',
|
||||
});
|
||||
|
@ -561,8 +562,10 @@ define([
|
|||
|
||||
var friendData = room.isFriendChat ? userlist[0] : {};
|
||||
|
||||
var $room = $(roomEl).click(function () {
|
||||
display(id);
|
||||
var $room = $(roomEl).on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
display(id);
|
||||
}
|
||||
}).dblclick(function () {
|
||||
if (friendData.profile) { window.open(origin + '/profile/#' + friendData.profile); }
|
||||
});
|
||||
|
|
|
@ -757,6 +757,7 @@ define([
|
|||
Util.fixFileName(suggestion), function (filename)
|
||||
{
|
||||
if (!(typeof(filename) === 'string' && filename)) { return; }
|
||||
console.error(filename);
|
||||
var ext = $select.getValue();
|
||||
filename = filename + ext;
|
||||
if (async) {
|
||||
|
|
|
@ -373,10 +373,10 @@ define([
|
|||
$block.find('button').attr('title', Messages.languageButtonTitle);
|
||||
|
||||
var isHovering = false;
|
||||
var $aLanguages = $block.find('a');
|
||||
var $aLanguages = $block.find('li');
|
||||
$aLanguages.mouseenter(function () {
|
||||
isHovering = true;
|
||||
setMode($(this).attr('data-value'));
|
||||
setMode($(this).find('a').attr('data-value'));
|
||||
});
|
||||
$aLanguages.mouseleave(function () {
|
||||
if (isHovering) {
|
||||
|
@ -385,7 +385,7 @@ define([
|
|||
});
|
||||
$aLanguages.click(function () {
|
||||
isHovering = false;
|
||||
var mode = $(this).attr('data-value');
|
||||
var mode = $(this).find('a').attr('data-value');
|
||||
setMode(mode, onModeChanged);
|
||||
onLocal();
|
||||
});
|
||||
|
@ -435,10 +435,10 @@ define([
|
|||
setTheme(lastTheme, $block);
|
||||
|
||||
var isHovering = false;
|
||||
var $aThemes = $block.find('a');
|
||||
var $aThemes = $block.find('li');
|
||||
$aThemes.mouseenter(function () {
|
||||
isHovering = true;
|
||||
var theme = $(this).attr('data-value');
|
||||
var theme = $(this).find('a').attr('data-value');
|
||||
setTheme(theme, $block);
|
||||
});
|
||||
$aThemes.mouseleave(function () {
|
||||
|
@ -449,7 +449,7 @@ define([
|
|||
});
|
||||
$aThemes.click(function () {
|
||||
isHovering = false;
|
||||
var theme = $(this).attr('data-value');
|
||||
var theme = $(this).find('a').attr('data-value');
|
||||
setTheme(theme, $block);
|
||||
Common.setAttribute(themeKey, theme);
|
||||
});
|
||||
|
|
|
@ -89,13 +89,19 @@ define([
|
|||
});
|
||||
}
|
||||
var order = -Math.floor((Util.find(data, ['content', 'msg', 'ctime']) || 0) / 1000);
|
||||
notif = h('div.cp-notification', {
|
||||
const tabIndexValue = undefined;//data.content.isDismissible ? undefined : '0';
|
||||
notif = h('li.cp-notification', {
|
||||
role: 'menuitem',
|
||||
tabindex: '0',
|
||||
style: 'order:'+order+';',
|
||||
'data-hash': data.content.hash
|
||||
}, [
|
||||
avatar,
|
||||
h('div.cp-notification-content',
|
||||
h('p', formatData(data)))
|
||||
h('div.cp-notification-content', {
|
||||
tabindex: tabIndexValue
|
||||
}, [
|
||||
h('p', formatData(data))
|
||||
])
|
||||
]);
|
||||
|
||||
if (typeof(data.content.getFormatText) === "function") {
|
||||
|
@ -111,17 +117,29 @@ define([
|
|||
}
|
||||
}
|
||||
|
||||
$(notif).mouseenter((e) => {
|
||||
e.stopPropagation();
|
||||
$(notif).focus();
|
||||
});
|
||||
|
||||
if (data.content.isClickable) {
|
||||
$(notif).find('.cp-notification-content').addClass("cp-clickable")
|
||||
.click(data.content.handler);
|
||||
$(notif).find('.cp-notification-content').addClass("cp-clickable").on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
data.content.handler();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (data.content.isDismissible) {
|
||||
var dismissIcon = h('span.fa.fa-times');
|
||||
var dismiss = h('div.cp-notification-dismiss', {
|
||||
title: Messages.notifications_dismiss
|
||||
title: Messages.notifications_dismiss,
|
||||
}, dismissIcon);
|
||||
$(dismiss).addClass("cp-clickable")
|
||||
.click(data.content.dismissHandler);
|
||||
.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
data.content.dismissHandler();
|
||||
}
|
||||
});
|
||||
$(notif).append(dismiss);
|
||||
}
|
||||
return notif;
|
||||
|
|
|
@ -65,6 +65,51 @@ MessengerUI, Messages, Pages) {
|
|||
return 'cp-toolbar-uid-' + String(Math.random()).substring(2);
|
||||
};
|
||||
|
||||
var observeChildren = function ($content) {
|
||||
var reorderDOM = Util.throttle(function ($content, observer) {
|
||||
if (!$content.length) { return; }
|
||||
|
||||
// List all children based on their "order" property
|
||||
var map = {};
|
||||
$content[0].childNodes.forEach((node) => {
|
||||
try {
|
||||
if (!node.attributes) { return; }
|
||||
var order = getComputedStyle(node).getPropertyValue("order");
|
||||
var a = map[order] = map[order] || [];
|
||||
a.push(node);
|
||||
} catch (e) { console.error(e, node); }
|
||||
});
|
||||
|
||||
// Disconnect the observer while we're reordering to avoid infinite loop
|
||||
observer.disconnect();
|
||||
Object.keys(map).sort(function (a, b) {
|
||||
return Number(a) - Number(b);
|
||||
}).forEach(function (k) {
|
||||
var arr = map[k];
|
||||
if (!Number(k)) { return; } // No need to "append" if order is 0
|
||||
// Reorder
|
||||
arr.forEach(function (node) {
|
||||
$content.append(node);
|
||||
});
|
||||
});
|
||||
observer.start();
|
||||
}, 100);
|
||||
|
||||
let observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.addedNodes.length) {
|
||||
reorderDOM($content, observer);
|
||||
}
|
||||
});
|
||||
});
|
||||
observer.start = function () {
|
||||
observer.observe($content[0], {
|
||||
childList: true
|
||||
});
|
||||
};
|
||||
observer.start();
|
||||
};
|
||||
|
||||
var createRealtimeToolbar = function (config) {
|
||||
if (!config.$container) { return; }
|
||||
var $container = config.$container;
|
||||
|
@ -107,10 +152,7 @@ MessengerUI, Messages, Pages) {
|
|||
h('i.fa.fa-file-o'),
|
||||
h('span.cp-button-name', Messages.toolbar_file)
|
||||
])).appendTo($file).hide();
|
||||
var $drawerContent = $('<div>', {
|
||||
'class': DRAWER_CLS,
|
||||
'tabindex': 1
|
||||
}).hide();
|
||||
var $drawerContent = $(h('div.'+ DRAWER_CLS, {tabindex: 1})).hide();
|
||||
UI.createDrawer($drawer, $drawerContent);
|
||||
}
|
||||
|
||||
|
@ -684,7 +726,8 @@ MessengerUI, Messages, Pages) {
|
|||
|
||||
// Buttons
|
||||
var $text = $('<span>', {
|
||||
'class': 'cp-toolbar-title-value'
|
||||
'class': 'cp-toolbar-title-value',
|
||||
tabindex: 0
|
||||
}).appendTo($hoverable);
|
||||
var $pencilIcon = $('<span>', {
|
||||
'class': 'cp-toolbar-title-edit',
|
||||
|
@ -703,7 +746,7 @@ MessengerUI, Messages, Pages) {
|
|||
.text('('+Messages.readonly+')'));
|
||||
var $input = $('<input>', {
|
||||
type: 'text',
|
||||
placeholder: placeholder
|
||||
placeholder: placeholder,
|
||||
}).appendTo($hoverable).hide();
|
||||
if (config.readOnly !== 1) {
|
||||
$text.attr("title", Messages.clickToEdit);
|
||||
|
@ -775,63 +818,19 @@ MessengerUI, Messages, Pages) {
|
|||
$pencilIcon.hide();
|
||||
$saveIcon.show();
|
||||
};
|
||||
$text.on('click', displayInput);
|
||||
$pencilIcon.on('click', displayInput);
|
||||
$text.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
displayInput();
|
||||
}
|
||||
});
|
||||
$pencilIcon.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
displayInput();
|
||||
}
|
||||
});
|
||||
return $titleContainer;
|
||||
};
|
||||
|
||||
var createUnpinnedWarning0 = function (toolbar, config) {
|
||||
if (true) { return; } // stub this call since it won't make it into the next release
|
||||
if (Common.isLoggedIn()) { return; }
|
||||
var pd = config.metadataMgr.getPrivateData();
|
||||
var o = pd.origin;
|
||||
var cid = pd.channel;
|
||||
Common.sendAnonRpcMsg('IS_CHANNEL_PINNED', cid, function (x) {
|
||||
if (x.error || !Array.isArray(x.response)) { return void console.log(x); }
|
||||
if (x.response[0] === true) {
|
||||
$('.cp-pad-not-pinned').remove();
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof(ApiConfig.inactiveTime) !== 'number') {
|
||||
$('.cp-pad-not-pinned').remove();
|
||||
return;
|
||||
}
|
||||
|
||||
if ($('.cp-pad-not-pinned').length) { return; }
|
||||
var pnpTitle = Messages._getKey('padNotPinnedVariable', ['','','','', ApiConfig.inactiveTime]);
|
||||
var pnpMsg = Messages._getKey('padNotPinnedVariable', [
|
||||
'<a href="' + o + '/login" class="cp-pnp-login" target="blank" title>',
|
||||
'</a>',
|
||||
'<a href="' + o + '/register" class="cp-pnp-register" target="blank" title>',
|
||||
'</a>',
|
||||
ApiConfig.inactiveTime
|
||||
]);
|
||||
var $msg = $('<span>', {
|
||||
'class': 'cp-pad-not-pinned'
|
||||
}).append([
|
||||
$('<span>', {'class': 'fa fa-exclamation-triangle', 'title': pnpTitle}),
|
||||
$('<span>', {'class': 'cp-pnp-msg'}).append(pnpMsg)
|
||||
]);
|
||||
$msg.find('a.cp-pnp-login').click(function (ev) {
|
||||
ev.preventDefault();
|
||||
Common.setLoginRedirect('login');
|
||||
});
|
||||
$msg.find('a.cp-pnp-register').click(function (ev) {
|
||||
ev.preventDefault();
|
||||
Common.setLoginRedirect('register');
|
||||
});
|
||||
$('.cp-toolbar-top').append($msg);
|
||||
//UI.addTooltips();
|
||||
});
|
||||
};
|
||||
|
||||
var createUnpinnedWarning = function (toolbar, config) {
|
||||
config.metadataMgr.onChange(function () {
|
||||
createUnpinnedWarning0(toolbar, config);
|
||||
});
|
||||
createUnpinnedWarning0(toolbar, config);
|
||||
};
|
||||
|
||||
var createPageTitle = function (toolbar, config) {
|
||||
if (!config.pageTitle) { return; }
|
||||
|
@ -844,9 +843,13 @@ MessengerUI, Messages, Pages) {
|
|||
var $hoverable = $('<span>', {'class': 'cp-toolbar-title-hoverable'}).appendTo($titleContainer);
|
||||
|
||||
// Buttons
|
||||
$('<span>', {
|
||||
var $b = $('<span>', {
|
||||
'class': 'cp-toolbar-title-value cp-toolbar-title-value-page'
|
||||
}).appendTo($hoverable).text(config.pageTitle);
|
||||
|
||||
toolbar.updatePageTitle = function (title) {
|
||||
$b.text(title);
|
||||
};
|
||||
};
|
||||
|
||||
var createLinkToMain = function (toolbar, config) {
|
||||
|
@ -870,7 +873,8 @@ MessengerUI, Messages, Pages) {
|
|||
href: href,
|
||||
title: buttonTitle,
|
||||
'class': "cp-toolbar-link-logo",
|
||||
'aria-label': buttonTitle,
|
||||
'role': 'button',
|
||||
'aria-label': buttonTitle
|
||||
}).append(UI.getIcon(privateData.app));
|
||||
|
||||
var onClick = function (e) {
|
||||
|
@ -1008,6 +1012,7 @@ MessengerUI, Messages, Pages) {
|
|||
var $userAdmin = toolbar.$userAdmin.find('.'+USERADMIN_CLS).show();
|
||||
var userMenuCfg = {
|
||||
$initBlock: $userAdmin,
|
||||
buttonTitle: Messages.userAccountButton,
|
||||
};
|
||||
if (!config.hideDisplayName) {
|
||||
$.extend(true, userMenuCfg, {
|
||||
|
@ -1020,12 +1025,6 @@ MessengerUI, Messages, Pages) {
|
|||
userMenuCfg.displayChangeName = 1;
|
||||
}
|
||||
Common.createUserAdminMenu(userMenuCfg);
|
||||
$userAdmin.find('> button').attr({
|
||||
title: Messages.userAccountButton,
|
||||
alt: Messages.userAccountButton,
|
||||
'aria-label': Messages.userAccountButton,
|
||||
});
|
||||
|
||||
return $userAdmin;
|
||||
};
|
||||
|
||||
|
@ -1079,44 +1078,59 @@ MessengerUI, Messages, Pages) {
|
|||
|
||||
var createNotifications = function (toolbar, config) {
|
||||
var $notif = toolbar.$top.find('.'+NOTIFICATIONS_CLS).show();
|
||||
var openNotifsApp = h('div.cp-notifications-gotoapp', h('p', Messages.openNotificationsApp || "Open notifications App"));
|
||||
$(openNotifsApp).click(function () {
|
||||
Common.openURL("/notifications/");
|
||||
});
|
||||
var div = h('div.cp-notifications-container', [
|
||||
h('div.cp-notifications-empty', Messages.notifications_empty)
|
||||
]);
|
||||
var pads_options = [div];
|
||||
|
||||
var options = [];
|
||||
|
||||
if (Common.isLoggedIn()) {
|
||||
options.push({
|
||||
tag: 'a',
|
||||
attributes: { 'class':'cp-notifications-gotoapp' },
|
||||
content: h('p', Messages.openNotificationsApp),
|
||||
action: () => {
|
||||
Common.openURL("/notifications/");
|
||||
}
|
||||
});
|
||||
options.push({ tag: 'hr' });
|
||||
}
|
||||
|
||||
var metadataMgr = config.metadataMgr;
|
||||
var privateData = metadataMgr.getPrivateData();
|
||||
if (!privateData.notifications) {
|
||||
var allowNotif = h('div.cp-notifications-gotoapp', h('p', Messages.allowNotifications));
|
||||
pads_options.unshift(h("hr"));
|
||||
pads_options.unshift(allowNotif);
|
||||
var $allow = $(allowNotif).click(function () {
|
||||
Common.getSframeChannel().event('Q_ASK_NOTIFICATION', null, function (e, allow) {
|
||||
if (!allow) { return; }
|
||||
$(allowNotif).remove();
|
||||
});
|
||||
options.push({
|
||||
tag: 'a',
|
||||
attributes: { 'class':'cp-notifications-gotoapp cp-notifications-allow' },
|
||||
content: h('p', Messages.allowNotifications),
|
||||
action: function (ev) {
|
||||
Common.getSframeChannel().query('Q_ASK_NOTIFICATION', null, function (e, allow) {
|
||||
console.error(e, allow);
|
||||
if (!allow) { return; }
|
||||
$(ev.target).closest('li').remove();
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
options.push({ tag: 'hr' });
|
||||
|
||||
var onChange = function () {
|
||||
var privateData = metadataMgr.getPrivateData();
|
||||
if (!privateData.notifications) { return; }
|
||||
$allow.remove();
|
||||
$('.cp-notifications-allow').closest('li').remove();
|
||||
metadataMgr.off('change', onChange);
|
||||
};
|
||||
metadataMgr.onChange(onChange);
|
||||
}
|
||||
|
||||
var div = h('ul.cp-notifications-container', [
|
||||
h('li.cp-notifications-empty', Messages.notifications_empty)
|
||||
]);
|
||||
options.push({
|
||||
tag: 'div',
|
||||
content: div
|
||||
});
|
||||
|
||||
if (Common.isLoggedIn()) {
|
||||
pads_options.unshift(h("hr"));
|
||||
pads_options.unshift(openNotifsApp);
|
||||
}
|
||||
var dropdownConfig = {
|
||||
text: '', // Button initial text
|
||||
options: pads_options, // Entries displayed in the menu
|
||||
options: options, // Entries displayed in the menu
|
||||
container: $notif,
|
||||
left: true,
|
||||
common: Common
|
||||
|
@ -1124,11 +1138,21 @@ MessengerUI, Messages, Pages) {
|
|||
var $newPadBlock = UIElements.createDropdown(dropdownConfig);
|
||||
var $button = $newPadBlock.find('button');
|
||||
$button.attr('title', Messages.notificationsPage);
|
||||
$button.attr('aria-haspopup', 'menu');
|
||||
$button.attr("aria-expanded", "false");
|
||||
$button.click(function() {
|
||||
if ($button.attr("aria-expanded") === "true") {
|
||||
$button.attr("aria-expanded", "false");
|
||||
} else {
|
||||
$button.attr("aria-expanded", "true");
|
||||
}
|
||||
});
|
||||
$button.addClass('fa fa-bell-o cp-notifications-bell');
|
||||
$button.addClass('fa fa-bell-o cp-notifications-bell');
|
||||
$button.attr('aria-label', Messages.notificationsPage);
|
||||
var $n = $button.find('.cp-dropdown-button-title').hide();
|
||||
var $empty = $(div).find('.cp-notifications-empty');
|
||||
observeChildren($(div));
|
||||
|
||||
var refresh = function () {
|
||||
updateUserList(toolbar, config);
|
||||
|
@ -1157,6 +1181,14 @@ MessengerUI, Messages, Pages) {
|
|||
if (el) {
|
||||
$(div).prepend(el);
|
||||
}
|
||||
$(el).on('keydown', function (e) {
|
||||
if (![13,32,46].includes(e.which)) { return; }
|
||||
e.stopPropagation();
|
||||
if (e.which === 46) {
|
||||
return $(el).find('.cp-notification-dismiss').click();
|
||||
}
|
||||
$(el).find('.cp-notification-content').click();
|
||||
});
|
||||
refresh();
|
||||
},
|
||||
onViewed: function () {
|
||||
|
@ -1335,6 +1367,17 @@ MessengerUI, Messages, Pages) {
|
|||
toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);
|
||||
toolbar.$top = $toolbar.find('.'+Bar.constants.top);
|
||||
toolbar.$history = $toolbar.find('.'+Bar.constants.history);
|
||||
toolbar.$user = $toolbar.find('.'+Bar.constants.userAdmin);
|
||||
|
||||
observeChildren(toolbar.$drawer);
|
||||
observeChildren(toolbar.$bottomL);
|
||||
observeChildren(toolbar.$bottomM);
|
||||
observeChildren(toolbar.$bottomR);
|
||||
observeChildren(toolbar.$top);
|
||||
observeChildren(toolbar.$user);
|
||||
if (config.$contentContainer) {
|
||||
observeChildren(config.$contentContainer);
|
||||
}
|
||||
|
||||
toolbar.$userAdmin = $toolbar.find('.'+Bar.constants.userAdmin);
|
||||
|
||||
|
@ -1349,14 +1392,10 @@ MessengerUI, Messages, Pages) {
|
|||
tb['title'] = createTitle;
|
||||
tb['pageTitle'] = createPageTitle;
|
||||
//tb['request'] = createRequest;
|
||||
tb['lag'] = $.noop;
|
||||
tb['spinner'] = createSpinner;
|
||||
tb['state'] = $.noop;
|
||||
tb['limit'] = createLimit; // TODO
|
||||
tb['upgrade'] = $.noop;
|
||||
tb['newpad'] = createNewPad;
|
||||
tb['useradmin'] = createUserAdmin;
|
||||
tb['unpinnedWarning'] = createUnpinnedWarning;
|
||||
tb['notifications'] = createNotifications;
|
||||
tb['maintenance'] = createMaintenance;
|
||||
|
||||
|
@ -1366,7 +1405,7 @@ MessengerUI, Messages, Pages) {
|
|||
'chat',
|
||||
'collapse',
|
||||
'userlist', 'title', 'useradmin', 'spinner',
|
||||
'newpad', 'share', 'access', 'limit', 'unpinnedWarning',
|
||||
'newpad', 'share', 'access', 'limit',
|
||||
'notifications'
|
||||
], {});
|
||||
};
|
||||
|
|
|
@ -59,7 +59,7 @@ define([
|
|||
}
|
||||
|
||||
var Title = common.createTitle({});
|
||||
var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'notifications'];
|
||||
var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'notifications', 'pageTitle'];
|
||||
if (!uploadMode) {
|
||||
displayed.push('fileshare');
|
||||
displayed.push('access');
|
||||
|
@ -68,12 +68,9 @@ define([
|
|||
displayed: displayed,
|
||||
$container: $bar,
|
||||
metadataMgr: metadataMgr,
|
||||
pageTitle: Messages.upload_title,
|
||||
sfCommon: common,
|
||||
};
|
||||
if (uploadMode) {
|
||||
displayed.push('pageTitle');
|
||||
configTb.pageTitle = Messages.upload_title;
|
||||
}
|
||||
var toolbar = APP.toolbar = Toolbar.create(configTb);
|
||||
|
||||
if (!uploadMode) {
|
||||
|
@ -140,10 +137,9 @@ define([
|
|||
common.setPadAttribute('fileType', metadata.type);
|
||||
}
|
||||
|
||||
toolbar.addElement(['pageTitle'], {
|
||||
pageTitle: title,
|
||||
title: Title.getTitleConfig(),
|
||||
});
|
||||
if (toolbar.updatePageTitle) {
|
||||
toolbar.updatePageTitle(title);
|
||||
}
|
||||
toolbar.$drawer.append(common.createButton('forget', true));
|
||||
toolbar.$drawer.append(common.createButton('properties', true));
|
||||
if (common.isLoggedIn()) {
|
||||
|
|
|
@ -71,7 +71,7 @@ define([
|
|||
var notifsPanel, notifsList, dismissAll;
|
||||
notifsPanel = h("div.cp-app-notifications-panel", [
|
||||
h('div.cp-app-notifications-panel-titlebar', [
|
||||
h("span.cp-app-notifications-panel-title",
|
||||
h("h5.cp-app-notifications-panel-title",
|
||||
(Messages.notificationsPage || "Notifications") + " - " + categoryName),
|
||||
h("div.cp-app-notifications-panel-titlebar-buttons", [
|
||||
dismissAll = h("div.cp-app-notifications-dismissall.cp-clickable", { title: Messages.notifications_dismissAll || "Dismiss All" }, h("span.fa.fa-trash")),
|
||||
|
|
|
@ -2189,6 +2189,7 @@ define([
|
|||
}
|
||||
|
||||
var $category = $(h('div.cp-sidebarlayout-category', {
|
||||
'tabindex': 0,
|
||||
'data-category': key
|
||||
}, [
|
||||
icon,
|
||||
|
@ -2200,16 +2201,18 @@ define([
|
|||
$category.addClass('cp-leftside-active');
|
||||
}
|
||||
|
||||
$category.click(function() {
|
||||
if (!Array.isArray(categories[key]) && categories[key].onClick) {
|
||||
categories[key].onClick();
|
||||
return;
|
||||
$category.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
if (!Array.isArray(categories[key]) && categories[key].onClick) {
|
||||
categories[key].onClick();
|
||||
return;
|
||||
}
|
||||
active = key;
|
||||
common.setHash(key);
|
||||
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
|
||||
$category.addClass('cp-leftside-active');
|
||||
showCategories(categories[key]);
|
||||
}
|
||||
active = key;
|
||||
common.setHash(key);
|
||||
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
|
||||
$category.addClass('cp-leftside-active');
|
||||
showCategories(categories[key]);
|
||||
});
|
||||
});
|
||||
showCategories(categories[active]);
|
||||
|
|
|
@ -241,7 +241,7 @@ define([
|
|||
Object.keys(categories).forEach(function (key) {
|
||||
if (key === 'admin' && !teamAdmin) { return; }
|
||||
|
||||
var $category = $('<div>', {'class': 'cp-sidebarlayout-category cp-team-cat-'+key}).appendTo($categories);
|
||||
var $category = $('<div>', {'class': 'cp-sidebarlayout-category cp-team-cat-'+key, 'tabindex': 0}).appendTo($categories);
|
||||
if (key === 'general') { $category.append($('<span>', {'class': 'fa fa-info-circle'})); }
|
||||
if (key === 'list') { $category.append($('<span>', {'class': 'fa fa-list cp-team-cat-list'})); }
|
||||
if (key === 'create') { $category.append($('<span>', {'class': 'fa fa-plus-circle'})); }
|
||||
|
@ -256,7 +256,8 @@ define([
|
|||
$category.addClass('cp-leftside-active');
|
||||
}
|
||||
|
||||
$category.click(function () {
|
||||
$category.on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
if (!Array.isArray(categories[key]) && categories[key].onClick) {
|
||||
categories[key].onClick(common);
|
||||
return;
|
||||
|
@ -277,7 +278,7 @@ define([
|
|||
$categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
|
||||
$category.addClass('cp-leftside-active');
|
||||
showCategories(categories[key]);
|
||||
});
|
||||
}});
|
||||
|
||||
$category.append(h('span.cp-sidebarlayout-category-name', Messages['team_cat_'+key] || key));
|
||||
});
|
||||
|
@ -473,20 +474,26 @@ define([
|
|||
created++;
|
||||
}
|
||||
if (team.empty) {
|
||||
var createTeamDiv = h('div.cp-team-list-team.empty'+createCls, [
|
||||
var createTeamDiv = h('div.cp-team-list-team.empty'+createCls,{
|
||||
tabindex: '0'
|
||||
}, [
|
||||
h('span.cp-team-list-name.empty', Messages.team_listSlot),
|
||||
createBtn
|
||||
]);
|
||||
list.push(createTeamDiv);
|
||||
if (createCls) {
|
||||
$(createTeamDiv).click(function () {
|
||||
$('div.cp-team-cat-create').click();
|
||||
$(createTeamDiv).on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
$('div.cp-team-cat-create').click();
|
||||
}
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
var avatar = h('span.cp-avatar');
|
||||
var teamDiv = h('div.cp-team-list-team', [
|
||||
var teamDiv = h('div.cp-team-list-team',{
|
||||
tabindex: '0'
|
||||
}, [
|
||||
h('span.cp-team-list-avatar', avatar),
|
||||
h('span.cp-team-list-name', {
|
||||
title: team.metadata.name
|
||||
|
@ -494,12 +501,14 @@ define([
|
|||
]);
|
||||
list.push(teamDiv);
|
||||
common.displayAvatar($(avatar), team.metadata.avatar, team.metadata.name);
|
||||
$(teamDiv).click(function () {
|
||||
if (team.error) {
|
||||
UI.warn(Messages.error); // FIXME better error message - roster bug, can't load the team for now
|
||||
return;
|
||||
$(teamDiv).on('click keypress', function (event) {
|
||||
if (event.type === 'click' || (event.type === 'keypress' && event.which === 13)) {
|
||||
if (team.error) {
|
||||
UI.warn(Messages.error); // FIXME better error message - roster bug, can't load the team for now
|
||||
return;
|
||||
}
|
||||
openTeam(common, id, team);
|
||||
}
|
||||
openTeam(common, id, team);
|
||||
});
|
||||
});
|
||||
content.push(h('div.cp-team-list-container', list));
|
||||
|
|
Loading…
Reference in a new issue