From 6789bf1f4dfd32cd54a0fbe520ff3e1a6f6afb8a Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Thu, 08 May 2014 12:19:20 -0400
Subject: [PATCH] Moved popup-menu functions to Roundcube core for seamless integration of (stackable) skin and core menus
---
skins/larry/templates/mail.html | 6
skins/larry/includes/mailtoolbar.html | 4
program/js/common.js | 6
plugins/zipdownload/zipdownload.js | 25 --
program/js/app.js | 293 +++++++++++++++++++++++++----
skins/larry/templates/compose.html | 5
skins/larry/ui.js | 247 ++++++------------------
7 files changed, 331 insertions(+), 255 deletions(-)
diff --git a/plugins/zipdownload/zipdownload.js b/plugins/zipdownload/zipdownload.js
index 644c1e0..af9136c 100644
--- a/plugins/zipdownload/zipdownload.js
+++ b/plugins/zipdownload/zipdownload.js
@@ -43,21 +43,10 @@
link.html('').append(span);
}
- span.addClass('folder-selector-link').text(rcmail.gettext('zipdownload.download'));
-
+ span.text(rcmail.gettext('zipdownload.download'));
rcmail.env.download_link = link;
});
-
- // hide menu on click out of menu element
- var fn = function(e) {
- var menu = $('#zipdownload-menu');
- if (e.target != menu.get(0))
- menu.hide();
- };
- $(document.body).on('mouseup', fn);
- $('iframe').contents().on('mouseup', fn)
- .load(function(e) { try { $(this).contents().on('mouseup', fn); } catch(e) {}; });
-});
+ });
function rcmail_zipdownload(mode)
@@ -100,14 +89,10 @@
}
// display download options menu
-function rcmail_zipdownload_menu()
+function rcmail_zipdownload_menu(e)
{
- // fix menu style and display menu
- var z_index = rcmail.env.download_link.parents('.popupmenu').css('z-index'),
- menu = $('#zipdownload-menu').css({'max-height': 'none', 'z-index': z_index + 1}).show();
-
- // position menu on the screen
- rcmail.element_position(menu, rcmail.env.download_link);
+ // show (sub)menu for download selection
+ rcmail.command('menu-open', 'zipdownload-menu', e && e.target ? e.target : rcmail.env.download_link, e);
// abort default download action
return false;
diff --git a/program/js/app.js b/program/js/app.js
index 4c9462a..dd172cd 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -46,6 +46,7 @@
this.messages = {};
this.group2expand = {};
this.http_request_jobs = {};
+ this.menu_stack = new Array();
// webmail client settings
this.dblclick_time = 500;
@@ -235,7 +236,6 @@
return ref.command('sort', $(this).attr('rel'), this);
});
- document.onmouseup = function(e){ return ref.doc_mouse_up(e); };
this.gui_objects.messagelist.parentNode.onclick = function(e){ return ref.click_on_list(e || window.event); };
this.enable_command('toggle_status', 'toggle_flag', 'sort', true);
@@ -279,7 +279,7 @@
this.env.address_group_stack = [];
this.env.compose_commands = ['send-attachment', 'remove-attachment', 'send', 'cancel',
'toggle-editor', 'list-adresses', 'pushgroup', 'search', 'reset-search', 'extwin',
- 'insert-response', 'save-response'];
+ 'insert-response', 'save-response', 'menu-open', 'menu-close'];
if (this.env.drafts_mailbox)
this.env.compose_commands.push('savedraft')
@@ -313,8 +313,6 @@
$('#'+this.buttons['save-response'][i].id).mousedown(function(e){ return rcube_event.cancel(e); })
}
}
-
- document.onmouseup = function(e){ return ref.doc_mouse_up(e); };
// init message compose form
this.init_messageform();
@@ -395,7 +393,6 @@
this.contact_list.highlight_row(this.env.cid);
this.gui_objects.contactslist.parentNode.onmousedown = function(e){ return ref.click_on_list(e); };
- document.onmouseup = function(e){ return ref.doc_mouse_up(e); };
$(this.gui_objects.qsearchbox).focusin(function() { ref.contact_list.blur(); });
@@ -561,6 +558,18 @@
.get(0).addEventListener('drop', function(e){ return ref.file_dropped(e); }, false);
}
+ // catch document (and iframe) mouse clicks
+ var body_mouseup = function(e){ return ref.doc_mouse_up(e); };
+ $(document.body)
+ .bind('mouseup', body_mouseup)
+ .bind('keydown', function(e){ return ref.doc_keypress(e); });
+
+ $('iframe').load(function(e) {
+ try { $(this.contentDocument || this.contentWindow).on('mouseup', body_mouseup); }
+ catch (e) {/* catch possible "Permission denied" error in IE */ }
+ })
+ .contents().on('mouseup', body_mouseup);
+
// trigger init event hook
this.triggerEvent('init', { task:this.task, action:this.env.action });
@@ -636,8 +645,8 @@
}
// trigger plugin hooks
- this.triggerEvent('actionbefore', {props:props, action:command});
- ret = this.triggerEvent('before'+command, props);
+ this.triggerEvent('actionbefore', {props:props, action:command, originalEvent:event});
+ ret = this.triggerEvent('before'+command, props || event);
if (ret !== undefined) {
// abort if one of the handlers returned false
if (ret === false)
@@ -712,9 +721,14 @@
var mimetype = this.env.attachments[props.id];
this.enable_command('open-attachment', mimetype && this.env.mimetypes && $.inArray(mimetype, this.env.mimetypes) >= 0);
}
+ this.show_menu(props, props.show || undefined, event);
+ break;
+
+ case 'menu-close':
+ this.hide_menu(props, event);
+ break;
case 'menu-save':
- case 'menu-close':
this.triggerEvent(command, {props:props, originalEvent:event});
return false;
@@ -900,14 +914,14 @@
case 'move':
case 'moveto': // deprecated
if (this.task == 'mail')
- this.move_messages(props, obj);
+ this.move_messages(props, event);
else if (this.task == 'addressbook')
this.move_contacts(props);
break;
case 'copy':
if (this.task == 'mail')
- this.copy_messages(props, obj);
+ this.copy_messages(props, event);
else if (this.task == 'addressbook')
this.copy_contacts(props);
break;
@@ -1469,7 +1483,8 @@
if (menu && modkey == SHIFT_KEY && this.commands['copy']) {
var pos = rcube_event.get_mouse_pos(e);
this.env.drag_target = target;
- $(menu).css({top: (pos.y-10)+'px', left: (pos.x-10)+'px'}).show();
+ this.show_menu(this.gui_objects.dragmenu.id, true, e);
+ $(menu).css({top: (pos.y-10)+'px', left: (pos.x-10)+'px'});
return true;
}
@@ -1585,12 +1600,13 @@
}
};
+ // global mouse-click handler to cleanup some UI elements
this.doc_mouse_up = function(e)
{
- var list, id;
+ var list, id, target = rcube_event.get_target(e);
// ignore event if jquery UI dialog is open
- if ($(rcube_event.get_target(e)).closest('.ui-dialog, .ui-widget-overlay').length)
+ if ($(target).closest('.ui-dialog, .ui-widget-overlay').length)
return;
list = this.message_list || this.contact_list;
@@ -1604,7 +1620,73 @@
this.button_out(this.buttons_sel[id], id);
this.buttons_sel = {};
}
+
+ // reset popup menus; delayed to have updated menu_stack data
+ window.setTimeout(function(e){
+ var obj, skip, config, id, i;
+ for (i = ref.menu_stack.length - 1; i >= 0; i--) {
+ id = ref.menu_stack[i];
+ obj = $('#' + id);
+
+ if (obj.is(':visible')
+ && target != obj.data('opener')
+ && target != obj.get(0) // check if scroll bar was clicked (#1489832)
+ && id != skip
+ && (obj.attr('data-editable') != 'true' || !$(target).parents('#' + id).length)
+ && (obj.attr('data-sticky') != 'true' || !rcube_mouse_is_over(e, obj.get(0)))
+ ) {
+ ref.hide_menu(id, e);
+ }
+ skip = obj.data('parent');
+ }
+ }, 10);
};
+
+ // global keypress event handler
+ this.doc_keypress = function(e)
+ {
+ // Helper method to move focus to the next/prev active menu item
+ var focus_menu_item = function(dir) {
+ var obj, mod = dir < 0 ? 'prevAll' : 'nextAll', limit = dir < 0 ? 'last' : 'first';
+ if (ref.focused_menu && (obj = $('#'+ref.focused_menu))) {
+ return obj.find(':focus').closest('li')[mod](':has(:not([aria-disabled=true]))').find('a,input')[limit]().focus().length;
+ }
+
+ return 0;
+ };
+
+ var target = e.target || {},
+ keyCode = rcube_event.get_keycode(e);
+
+ if (e.keyCode != 27 && (!this.menu_keyboard_active || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')) {
+ return true;
+ }
+
+ switch (keyCode) {
+ case 38:
+ case 40:
+ case 63232: // "up", in safari keypress
+ case 63233: // "down", in safari keypress
+ focus_menu_item(mod = keyCode == 38 || keyCode == 63232 ? -1 : 1);
+ break;
+
+ case 9: // tab
+ if (this.focused_menu) {
+ var mod = rcube_event.get_modifier(e);
+ if (!focus_menu_item(mod == SHIFT_KEY ? -1 : 1)) {
+ this.hide_menu(this.focused_menu, e);
+ }
+ }
+ return rcube_event.cancel(e);
+
+ case 27: // esc
+ if (this.menu_stack.length)
+ this.hide_menu(this.menu_stack[this.menu_stack.length-1], e);
+ break;
+ }
+
+ return true;
+ }
this.click_on_list = function(e)
{
@@ -2707,12 +2789,12 @@
};
// copy selected messages to the specified mailbox
- this.copy_messages = function(mbox, obj)
+ this.copy_messages = function(mbox, event)
{
if (mbox && typeof mbox === 'object')
mbox = mbox.id;
else if (!mbox)
- return this.folder_selector(obj, function(folder) { ref.command('copy', folder); });
+ return this.folder_selector(event, function(folder) { ref.command('copy', folder); });
// exit if current or no mailbox specified
if (!mbox || mbox == this.env.mailbox)
@@ -2729,12 +2811,12 @@
};
// move selected messages to the specified mailbox
- this.move_messages = function(mbox, obj)
+ this.move_messages = function(mbox, event)
{
if (mbox && typeof mbox === 'object')
mbox = mbox.id;
else if (!mbox)
- return this.folder_selector(obj, function(folder) { ref.command('move', folder); });
+ return this.folder_selector(event, function(folder) { ref.command('move', folder); });
// exit if current or no mailbox specified
if (!mbox || (mbox == this.env.mailbox && !this.is_multifolder_listing()))
@@ -3938,7 +4020,7 @@
// cleanup
rx = new RegExp(rx_delim + '\\s*' + rx_delim, 'g');
- input_val = input_val.replace(rx, delim);
+ input_val = String(input_val).replace(rx, delim);
rx = new RegExp('^[\\s' + rx_delim + ']+');
input_val = input_val.replace(rx, '');
@@ -6736,17 +6818,15 @@
};
// create folder selector popup, position and display it
- this.folder_selector = function(obj, callback)
+ this.folder_selector = function(event, callback)
{
var container = this.folder_selector_element;
if (!container) {
var rows = [],
delim = this.env.delimiter,
- ul = $('<ul class="toolbarmenu iconized">'),
- li = document.createElement('li'),
- link = document.createElement('a'),
- span = document.createElement('span');
+ ul = $('<ul class="toolbarmenu">'),
+ link = document.createElement('a');
container = $('<div id="folder-selector" class="popupmenu"></div>');
link.href = '#';
@@ -6754,33 +6834,30 @@
// loop over sorted folders list
$.each(this.env.mailboxes_list, function() {
- var tmp, n = 0, s = 0,
+ var n = 0, s = 0,
folder = ref.env.mailboxes[this],
id = folder.id,
- a = link.cloneNode(false), row = li.cloneNode(false);
+ a = $(link.cloneNode(false)),
+ row = $('<li>');
if (folder.virtual)
- a.className += ' virtual';
- else {
- a.className += ' active';
- a.onclick = function() { container.hide().data('callback')(folder.id); };
- }
+ a.addClass('virtual').attr('aria-disabled', 'true').attr('tabindex', '-1');
+ else
+ a.addClass('active').data('id', folder.id);
if (folder['class'])
- a.className += ' ' + folder['class'];
+ a.addClass(folder['class']);
// calculate/set indentation level
while ((s = id.indexOf(delim, s)) >= 0) {
n++; s++;
}
- a.style.paddingLeft = n ? (n * 16) + 'px' : 0;
+ a.css('padding-left', n ? (n * 16) + 'px' : 0);
// add folder name element
- tmp = span.cloneNode(false);
- $(tmp).text(folder.name);
- a.appendChild(tmp);
+ a.append($('<span>').text(folder.name));
- row.appendChild(a);
+ row.append(a);
rows.push(row);
});
@@ -6792,23 +6869,157 @@
// set max-height if the list is long
if (rows.length > 10)
- container.css('max-height', $('li', container)[0].offsetHeight * 10 + 9)
+ container.css('max-height', $('li', container)[0].offsetHeight * 10 + 9);
+ // register delegate event handler for folder item clicks
+ container.on('click', 'a.active', function(e){
+ container.data('callback')($(this).data('id'));
+ return false;
+ });
+/*
// hide selector on click out of selector element
var fn = function(e) { if (e.target != container.get(0)) container.hide(); };
$(document.body).on('mouseup', fn);
$('iframe').contents().on('mouseup', fn)
.load(function(e) { try { $(this).contents().on('mouseup', fn); } catch(e) {}; });
-
+*/
this.folder_selector_element = container;
}
- // position menu on the screen
- this.element_position(container, obj);
+ container.data('callback', callback);
- container.show().data('callback', callback);
+ // position menu on the screen
+ this.show_menu('folder-selector', true, event);
};
+
+ /***********************************************/
+ /********* popup menu functions *********/
+ /***********************************************/
+
+ // Show/hide a specific popup menu
+ this.show_menu = function(prop, show, event)
+ {
+ var name = typeof prop == 'object' ? prop.menu : prop,
+ obj = $('#'+name),
+ ref = event && event.target ? $(event.target) : $(obj.attr('rel') || '#'+name+'link'),
+ keyboard = rcube_event.is_keyboard(event),
+ align = obj.attr('data-align') || '',
+ stack = false;
+
+ if (typeof prop == 'string')
+ prop = { menu:name };
+
+ // let plugins or skins provide the menu element
+ if (!obj.length) {
+ obj = this.triggerEvent('menu-get', { name:name, props:prop, originalEvent:event });
+ }
+
+ if (!obj || !obj.length) {
+ // just delegate the action to subscribers
+ return this.triggerEvent(show === false ? 'menu-close' : 'menu-open', { name:name, props:prop, originalEvent:event });
+ }
+
+ // move element to top for proper absolute positioning
+ obj.appendTo(document.body);
+
+ if (typeof show == 'undefined')
+ show = obj.is(':visible') ? false : true;
+
+ if (show && ref.length) {
+ var win = $(window),
+ pos = ref.offset(),
+ above = align.indexOf('bottom') >= 0;
+
+ stack = ref.attr('role') == 'menuitem' || ref.closest('[role=menuitem]').length > 0;
+
+ ref.offsetWidth = ref.outerWidth();
+ ref.offsetHeight = ref.outerHeight();
+ if (!above && pos.top + ref.offsetHeight + obj.height() > win.height()) {
+ above = true;
+ }
+ if (align.indexOf('right') >= 0) {
+ pos.left = pos.left + ref.outerWidth() - obj.width();
+ }
+ else if (stack) {
+ pos.left = pos.left + ref.offsetWidth - 5;
+ pos.top -= ref.offsetHeight;
+ }
+ if (pos.left + obj.width() > win.width()) {
+ pos.left = win.width() - obj.width() - 12;
+ }
+ pos.top = Math.max(0, pos.top + (above ? -obj.height() : ref.offsetHeight));
+ obj.css({ left:pos.left+'px', top:pos.top+'px' });
+ }
+
+ // add menu to stack
+ if (show) {
+ // truncate stack down to the one containing the ref link
+ for (var i = this.menu_stack.length - 1; stack && i >= 0; i--) {
+ if (!$(ref).parents('#'+this.menu_stack[i]).length)
+ this.hide_menu(this.menu_stack[i]);
+ }
+ if (stack && this.menu_stack.length) {
+ obj.data('parent', this.menu_stack.last());
+ obj.css('z-index', ($('#'+this.menu_stack.last()).css('z-index') || 0) + 1);
+ }
+ else if (!stack && this.menu_stack.length) {
+ this.hide_menu(this.menu_stack[0], event);
+ }
+
+ obj.show().attr('aria-hidden', 'false').data('opener', ref.get(0));
+ this.triggerEvent('menu-open', { name:name, obj:obj, props:prop, originalEvent:event });
+ this.menu_stack.push(name);
+
+ this.menu_keyboard_active = show && keyboard;
+ if (this.menu_keyboard_active) {
+ this.focused_menu = name;
+ obj.find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus();
+ }
+ }
+ else { // close menu
+ this.hide_menu(name, event);
+ }
+
+ return show;
+ };
+
+ // hide the given popup menu (and it's childs)
+ this.hide_menu = function(name, event)
+ {
+ if (!this.menu_stack.length) {
+ // delegate to subscribers
+ this.triggerEvent('menu-close', { name:name, props:{ menu:name }, originalEvent:event });
+ return;
+ }
+
+ var obj, keyboard = rcube_event.is_keyboard(event);
+ for (var j=this.menu_stack.length-1; j >= 0; j--) {
+ obj = $('#' + this.menu_stack[j]).hide().attr('aria-hidden', 'true').data('parent', false);
+ this.triggerEvent('menu-close', { name:this.menu_stack[j], obj:obj, props:{ menu:this.menu_stack[j] }, originalEvent:event });
+ if (this.menu_stack[j] == name) {
+ j = -1; // stop loop
+ if (keyboard && obj.data('opener')) {
+ obj.data('opener').focus();
+ }
+ }
+ this.menu_stack.pop();
+ }
+
+ // focus previous menu in stack
+ if (this.menu_stack.length && keyboard) {
+ this.menu_keyboard_active = true;
+ this.focused_menu = this.menu_stack.last();
+ if (!obj || !obj.data('opener'))
+ $('#'+this.focused_menu).find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus();
+ }
+ else {
+ this.focused_menu = null;
+ this.menu_keyboard_active = false;
+ }
+ }
+
+
// position a menu element on the screen in relation to other object
this.element_position = function(element, obj)
{
diff --git a/program/js/common.js b/program/js/common.js
index e15c34a..b532c36 100644
--- a/program/js/common.js
+++ b/program/js/common.js
@@ -297,7 +297,6 @@
*/
keyboard_only: function(e)
{
- console.log(e);
return rcube_event.is_keyboard(e) ? true : rcube_event.cancel(e);
},
@@ -607,6 +606,11 @@
};
}
+// array utility function
+Array.prototype.last = function() {
+ return this[this.length-1];
+}
+
// jQuery plugin to emulate HTML5 placeholder attributes on input elements
jQuery.fn.placeholder = function(text) {
return this.each(function() {
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index ac93d47..6af114a 100644
--- a/skins/larry/includes/mailtoolbar.html
+++ b/skins/larry/includes/mailtoolbar.html
@@ -20,7 +20,7 @@
<div id="forwardmenu" class="popupmenu" aria-hidden="true">
<h3 id="aria-label-forwardmenu" class="voice">Forwarding options</h3>
- <ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu">
+ <ul id="forwardmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu">
<li role="menuitem"><roundcube:button command="forward-inline" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /></li>
<li role="menuitem"><roundcube:button command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachmentlink active" class="forwardattachmentlink" /></li>
<roundcube:container name="forwardmenu" id="forwardmenu" />
@@ -29,7 +29,7 @@
<div id="replyallmenu" class="popupmenu" aria-hidden="true">
<h3 id="aria-label-replyallmenu" class="voice">Reply-all options</h3>
- <ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu">
+ <ul id="replyallmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu">
<li role="menuitem"><roundcube:button command="reply-all" label="replyall" prop="sub" class="replyalllink" classAct="replyalllink active" /></li>
<li role="menuitem"><roundcube:button command="reply-list" label="replylist" prop="sub" class="replylistlink" classAct="replylistlink active" /></li>
<roundcube:container name="replyallmenu" id="replyallmenu" />
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index 5eedca2..14f5a6d 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -27,7 +27,7 @@
<roundcube:if condition="config:enable_spellcheck" />
<span class="dropbutton">
<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" tabindex="2" />
- <a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true" tabindex="2"></a>
+ <a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true" tabindex="2">Select Spell Language</a>
</span>
<roundcube:endif />
<roundcube:button name="addattachment" type="link" class="button attach" label="attach" title="addattachment" onclick="UI.show_uploadform(event);return false" aria-haspopup="true" tabindex="2" />
@@ -77,7 +77,7 @@
<div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders">
<h2 id="aria-label-composeheaders" class="voice">Message headers</h2>
-<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='options' />"></span></a>
+<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle" title="<roundcube:label name='options' />"><span class="iconlink"></span></a>
<table class="headers-table compose-headers">
<tbody>
@@ -167,6 +167,7 @@
<!-- message compose body -->
<div id="composeview-bottom">
<div id="composebodycontainer">
+ <label for="composebody" class="voice">Message Body</label>
<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="1" />
</div>
<div id="compose-attachments" class="rightcol" role="region">
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index b41e4b9..1e360b4 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -39,10 +39,10 @@
<h2 id="aria-label-searchform" class="voice">Email message search form</h2>
<label for="quicksearchbox" class="voice">Email search input</label>
<roundcube:object name="searchform" id="quicksearchbox" />
-<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.toggle_popup('searchmenu',event);return false" title="searchmod" label="options" aria-haspopup="true" aria-owns="searchmenu-menu" />
+<roundcube:button command="menu-open" prop="searchmenu" id="searchmenulink" class="iconbutton searchoptions" title="searchmod" label="options" aria-haspopup="true" aria-owns="searchmenu-menu" />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content="Reset" />
-<div id="searchmenu" class="popupmenu">
+<div id="searchmenu" class="popupmenu" data-editable="true">
<h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
<ul class="toolbarmenu" id="searchmenu-menu" role="menu" aria-labelledby="aria-label-searchmenu">
<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
@@ -237,7 +237,7 @@
<br style="clear:both" />
<div class="formbuttons">
<roundcube:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" />
- <roundcube:button command="menu-close" id="listmenucancel" type="input" class="button" label="cancel" />
+ <roundcube:button command="menu-close" prop="messagelistmenu" id="listmenucancel" type="input" class="button" label="cancel" />
</div>
</div>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 1d38cea..5df2ea1 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -20,21 +20,16 @@
searchmenu: { editable:1, callback:searchmenu },
attachmentmenu: { },
listoptions: { editable:1 },
- dragmenu: { sticky:1 },
groupmenu: { above:1 },
mailboxmenu: { above:1 },
spellmenu: { callback: spellmenu },
- // toggle: #1486823, #1486930
- 'attachment-form': { editable:1, above:1, toggle:!bw.ie&&!bw.linux },
- 'upload-form': { editable:1, toggle:!bw.ie&&!bw.linux }
+ 'folder-selector': { iconized:1 }
};
var me = this;
var mailviewsplit;
var compose_headers = {};
var prefs;
- var focused_popup;
- var popup_keyboard_active = false;
// export public methods
this.set = setenv;
@@ -358,53 +353,9 @@
screen.css('min-width', $('.toolbar').width() + $('#quicksearchbar').width() + $('#searchfilter').width() + 30);
}
- $(document.body)
- .bind('mouseup', body_mouseup)
- .bind('keydown', popup_keypress);
-
- $('iframe').load(function(e){
- // this = iframe
- try {
- var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null;
- $(doc).mouseup(body_mouseup);
- }
- catch (e) {
- // catch possible "Permission denied" error in IE
- };
- })
- .contents().mouseup(body_mouseup);
-
// don't use $(window).resize() due to some unwanted side-effects
window.onresize = resize;
resize();
- }
-
- /**
- * Handler for mouse-up events on the document body.
- * This will close all open popup menus
- */
- function body_mouseup(e)
- {
- var config, obj, target = e.target;
-
- if (target.className == 'inner')
- target = e.target.parentNode;
-
- for (var id in popups) {
- obj = popups[id];
- config = popupconfig[id];
- if (obj.is(':visible')
- && target.id != id+'link'
- && target != obj.get(0) // check if scroll bar was clicked (#1489832)
- && !config.toggle
- && (!config.editable || !target_overlaps(target, obj.get(0)))
- && (!config.sticky || !rcube_mouse_is_over(e, obj.get(0)))
- && !$(target).is('.folder-selector-link')
- ) {
- var myid = id+'';
- window.setTimeout(function() { show_popupmenu(myid, false); }, 10);
- }
- }
}
/**
@@ -600,145 +551,33 @@
*/
function toggle_popup(popup, e, config)
{
- show_popup(popup, undefined, config, rcube_event.is_keyboard(e));
+ // auto-register menu object
+ if (config || !popupconfig[popup])
+ add_popup(popup, config);
+
+ return rcmail.command('menu-open', popup, e.target, e);
}
/**
* (Deprecated) trigger for popup menus
*/
- function show_popup(popup, show, config, keyboard)
+ function show_popup(popup, show, config)
{
// auto-register menu object
if (config || !popupconfig[popup])
add_popup(popup, config);
- var visible = show_popupmenu(popup, show, keyboard),
- config = popupconfig[popup];
- if (typeof config.callback == 'function')
- config.callback(visible);
- }
-
- /**
- * Show/hide a specific popup menu
- */
- function show_popupmenu(popup, show, keyboard)
- {
- var obj = popups[popup],
- config = popupconfig[popup],
- ref = $(config.link ? config.link : '#'+popup+'link'),
- above = config.above;
-
- if (!obj) {
- obj = popups[popup] = $('#'+popup);
- obj.appendTo(document.body); // move them to top for proper absolute positioning
- }
-
- if (!obj || !obj.length)
- return false;
-
- if (typeof show == 'undefined')
- show = obj.is(':visible') ? false : true;
- else if (config.toggle && show && obj.is(':visible'))
- show = false;
-
- if (show && ref.length) {
- var parent = ref.parent(),
- win = $(window),
- pos;
-
- if (parent.hasClass('dropbutton'))
- ref = parent;
-
+ config = popupconfig[popup] || {};
+ var ref = $(config.link ? config.link : '#'+popup+'link'),
pos = ref.offset();
- ref.offsetHeight = ref.outerHeight();
- if (!above && pos.top + ref.offsetHeight + obj.height() > win.height())
- above = true;
- if (pos.left + obj.width() > win.width())
- pos.left = win.width() - obj.width() - 12;
+ if (ref.has('.inner'))
+ ref = ref.children('.inner');
- obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) });
- }
- else if (!show && keyboard && ref.length) {
- ref.focus();
- }
-
- obj[show?'show':'hide']().attr('aria-hidden', show?'false':'true');
-
- popup_keyboard_active = show && keyboard;
- if (popup_keyboard_active) {
- focused_popup = popup;
- obj.find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus();
- }
- else {
- focused_popup = null;
- }
-
- return show;
- }
-
- /**
- * Handler for keyboard events on active popups
- */
- function popup_keypress(e)
- {
- var target = e.target || {},
- keyCode = rcube_event.get_keycode(e);
-
- if (e.keyCode != 27 && (!popup_keyboard_active || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT'))
- return true;
-
- switch (keyCode) {
- case 38:
- case 40:
- case 63232: // "up", in safari keypress
- case 63233: // "down", in safari keypress
- popup_focus_item(mod = keyCode == 38 || keyCode == 63232 ? -1 : 1);
- break;
-
- case 9: // tab
- if (focused_popup) {
- var mod = rcube_event.get_modifier(e);
- if (!popup_focus_item(mod == SHIFT_KEY ? -1 : 1)) {
- show_popup(focused_popup, false, undefined, true);
- }
- }
- return rcube_event.cancel(e);
-
- case 27: // esc
- for (var id in popups) {
- if (popups[id].is(':visible'))
- show_popup(id, false, undefined, true);
- }
- break;
- }
-
- return true;
- }
-
- /**
- * Helper method to move focus to the next/prev popup menu item
- */
- function popup_focus_item(dir)
- {
- var obj, mod = dir < 0 ? 'prevAll' : 'nextAll', limit = dir < 0 ? 'last' : 'first';
- if (focused_popup && (obj = popups[focused_popup])) {
- return obj.find(':focus').closest('li')[mod](':has(:not([aria-disabled=true]))').find('a,input')[limit]().focus().length;
- }
-
- return 0;
- }
-
- /**
- *
- */
- function target_overlaps(target, elem)
- {
- while (target.parentNode) {
- if (target.parentNode == elem)
- return true;
- target = target.parentNode;
- }
- return false;
+ // fire command with simulated mouse click event
+ return rcmail.command('menu-open',
+ { menu:popup, show:show },
+ ref.get(0),
+ $.Event('click', { target:ref.get(0), pageX:pos.left, pageY:pos.top, clientX:pos.left, clientY:pos.top }));
}
@@ -824,14 +663,51 @@
}
- /**** popup callbacks ****/
+ /**** popup menu callbacks ****/
+ /**
+ * Handler for menu-open and menu-close events
+ */
function menu_toggle(p)
{
- if (p && p.props && p.props.menu == 'attachmentmenu')
- show_popupmenu('attachmentmenu', undefined, rcube_event.is_keyboard(p.originalEvent));
- else
+ if (p && p.name == 'messagelistmenu') {
show_listoptions(p);
+ }
+ else if (p) {
+ // adjust menu position according to config
+ var config = popupconfig[p.name] || {},
+ ref = $(config.link || '#'+p.name+'link'),
+ visible = p.obj && p.obj.is(':visible'),
+ above = config.above;
+
+ // fix position according to config
+ if (p.obj && visible && ref.length) {
+ var parent = ref.parent(),
+ win = $(window), pos;
+
+ if (parent.hasClass('dropbutton'))
+ ref = parent;
+
+ if (config.above || ref.hasClass('dropbutton')) {
+ pos = ref.offset();
+ p.obj.css({ left:pos.left+'px', top:(pos.top + (config.above ? -p.obj.height() : ref.outerHeight()))+'px' });
+ }
+ }
+
+ // add the right classes
+ if (p.obj && config.iconized) {
+ p.obj.children('ul').addClass('iconized');
+ }
+
+ // apply some data-attributes from menu config
+ if (p.obj && config.editable)
+ p.obj.attr('data-editable', 'true');
+
+ // trigger callback function
+ if (typeof config.callback == 'function') {
+ config.callback(visible, p);
+ }
+ }
}
function searchmenu(show)
@@ -884,12 +760,11 @@
rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, elem, event);
}
- function spellmenu(show)
+ function spellmenu(show, p)
{
var k, link, li,
lang = rcmail.spellcheck_lang(),
- menu = popups.spellmenu,
- ul = $('ul', menu);
+ ul = $('ul', p.obj);
if (!ul.length) {
ul = $('<ul class="toolbarmenu selectable" role="menu">');
@@ -901,7 +776,7 @@
.bind('click keypress', function(e) {
if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
rcmail.spellcheck_lang_set($(this).data('lang'));
- show_popupmenu('spellmenu', false, rcube_event.is_keyboard(e))
+ rcmail.hide_menu('spellmenu', e);
return false;
}
});
@@ -910,7 +785,7 @@
li.appendTo(ul);
}
- ul.appendTo(menu);
+ ul.appendTo(p.obj);
}
// select current language
--
Gitblit v1.9.1