Make alarms dialog accessible and operable with keyboard

This commit is contained in:
Thomas Bruederli 2014-07-03 15:16:51 +02:00
parent dddb045c1d
commit d0a7c81347
2 changed files with 18 additions and 7 deletions

View file

@ -454,7 +454,7 @@ function rcube_libcalendaring(settings)
me.dismiss_alarm(me.dismiss_link.data('id'), 0); me.dismiss_alarm(me.dismiss_link.data('id'), 0);
}); });
asnooze = $('<a href="#" class="alarm-action-snooze"></a>').html(rcmail.gettext('snooze','libcalendaring')).click(function(e){ asnooze = $('<a href="#" class="alarm-action-snooze"></a>').html(rcmail.gettext('snooze','libcalendaring')).click(function(e){
me.snooze_dropdown($(this)); me.snooze_dropdown($(this), e);
e.stopPropagation(); e.stopPropagation();
return false; return false;
}); });
@ -463,6 +463,10 @@ function rcube_libcalendaring(settings)
$('<div>').addClass('alarm-item').html(html).append(actions).appendTo(this.alarm_dialog); $('<div>').addClass('alarm-item').html(html).append(actions).appendTo(this.alarm_dialog);
} }
buttons[rcmail.gettext('close')] = function() {
$(this).dialog('close');
};
buttons[rcmail.gettext('dismissall','libcalendaring')] = function() { buttons[rcmail.gettext('dismissall','libcalendaring')] = function() {
// submit dismissed event_ids to server // submit dismissed event_ids to server
me.dismiss_alarm(me.alarm_ids.join(','), 0); me.dismiss_alarm(me.alarm_ids.join(','), 0);
@ -476,6 +480,11 @@ function rcube_libcalendaring(settings)
dialogClass: 'alarms', dialogClass: 'alarms',
title: rcmail.gettext('alarmtitle','libcalendaring'), title: rcmail.gettext('alarmtitle','libcalendaring'),
buttons: buttons, buttons: buttons,
open: function() {
setTimeout(function() {
me.alarm_dialog.parent().find('.ui-button:not(.ui-dialog-titlebar-close)').first().focus();
}, 5);
},
close: function() { close: function() {
$('#alarm-snooze-dropdown').hide(); $('#alarm-snooze-dropdown').hide();
$(this).dialog('destroy').remove(); $(this).dialog('destroy').remove();
@ -487,13 +496,15 @@ function rcube_libcalendaring(settings)
} }
}); });
this.alarm_dialog.closest('div[role=dialog]').attr('role', 'alertdialog');
this.alarm_ids = event_ids; this.alarm_ids = event_ids;
}; };
/** /**
* Show a drop-down menu with a selection of snooze times * Show a drop-down menu with a selection of snooze times
*/ */
this.snooze_dropdown = function(link) this.snooze_dropdown = function(link, event)
{ {
if (!this.snooze_popup) { if (!this.snooze_popup) {
this.snooze_popup = $('#alarm-snooze-dropdown'); this.snooze_popup = $('#alarm-snooze-dropdown');
@ -511,13 +522,12 @@ function rcube_libcalendaring(settings)
// hide visible popup // hide visible popup
if (this.snooze_popup.is(':visible') && this.snooze_popup.data('id') == link.data('id')) { if (this.snooze_popup.is(':visible') && this.snooze_popup.data('id') == link.data('id')) {
this.snooze_popup.hide(); rcmail.command('menu-close', 'alarm-snooze-dropdown');
this.dismiss_link = null; this.dismiss_link = null;
} }
else { // open popup below the clicked link else { // open popup below the clicked link
var pos = link.offset(); rcmail.command('menu-open', 'alarm-snooze-dropdown', link.get(0), event);
pos.top += link.height() + 2; this.snooze_popup.data('id', link.data('id'));
this.snooze_popup.data('id', link.data('id')).css({ top:Math.floor(pos.top)+'px', left:Math.floor(pos.left)+'px' }).show();
this.dismiss_link = link; this.dismiss_link = link;
} }
}; };
@ -527,7 +537,7 @@ function rcube_libcalendaring(settings)
*/ */
this.dismiss_alarm = function(id, snooze) this.dismiss_alarm = function(id, snooze)
{ {
$('#alarm-snooze-dropdown').hide(); rcmail.command('menu-close', 'alarm-snooze-dropdown');
rcmail.http_post('utils/plugin.alarms', { action:'dismiss', data:{ id:id, snooze:snooze } }); rcmail.http_post('utils/plugin.alarms', { action:'dismiss', data:{ id:id, snooze:snooze } });
// remove dismissed alarm from list // remove dismissed alarm from list

View file

@ -580,6 +580,7 @@ class libcalendaring extends rcube_plugin
if (!$plugin['abort'] && !empty($plugin['alarms'])) { if (!$plugin['abort'] && !empty($plugin['alarms'])) {
// make sure texts and env vars are available on client // make sure texts and env vars are available on client
$this->add_texts('localization/', true); $this->add_texts('localization/', true);
$this->rc->output->add_label('close');
$this->rc->output->set_env('snooze_select', $this->snooze_select()); $this->rc->output->set_env('snooze_select', $this->snooze_select());
$this->rc->output->command('plugin.display_alarms', $this->_alarms_output($plugin['alarms'])); $this->rc->output->command('plugin.display_alarms', $this->_alarms_output($plugin['alarms']));
} }