From 522babb3a3ccdf4966d975b598af365bd7e7fb17 Mon Sep 17 00:00:00 2001 From: Kyle Francis <franck6@rpi.edu> Date: Fri, 01 Apr 2016 22:36:25 -0400 Subject: [PATCH] Implements 'scroll by keyboard #5139' --- skins/larry/ui.js | 214 +++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 148 insertions(+), 66 deletions(-) diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 47183f7..3604165 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -1,5 +1,3 @@ -// @license http://creativecommons.org/publicdomain/zero/1.0/legalcode CC0 - /** * Roundcube functions for default skin interface * @@ -9,6 +7,8 @@ * License. It is allowed to copy, distribute, transmit and to adapt the work * by keeping credits to the original autors in the README file. * See http://creativecommons.org/licenses/by-sa/3.0/ for details. + * + * @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0 */ function rcube_mail_ui() @@ -47,6 +47,7 @@ this.update_quota = update_quota; this.get_pref = get_pref; this.save_pref = save_pref; + this.folder_search_init = folder_search_init; // set minimal mode on small screens (don't wait for document.ready) @@ -76,7 +77,7 @@ function get_pref(key) { if (!prefs) { - prefs = window.localStorage ? rcmail.local_storage_get_item('prefs.larry', {}) : {}; + prefs = rcmail.local_storage_get_item('prefs.larry', {}); } // fall-back to cookies @@ -85,9 +86,8 @@ if (cookie != null) { prefs[key] = cookie; - // copy value to local storage and remove cookie - if (window.localStorage) { - rcmail.local_storage_set_item('prefs.larry', prefs); + // copy value to local storage and remove cookie (if localStorage is supported) + if (rcmail.local_storage_set_item('prefs.larry', prefs)) { rcmail.set_cookie(key, cookie, new Date()); // expire cookie } } @@ -103,11 +103,8 @@ { prefs[key] = val; - // write prefs to local storage - if (window.localStorage) { - rcmail.local_storage_set_item('prefs.larry', prefs); - } - else { + // write prefs to local storage (if supported) + if (!rcmail.local_storage_set_item('prefs.larry', prefs)) { // store value in cookie var exp = new Date(); exp.setYear(exp.getFullYear() + 1); @@ -139,6 +136,7 @@ rcmail.addEventListener('menu-open', menu_toggle) .addEventListener('menu-close', menu_toggle) .addEventListener('menu-save', save_listoptions) + .addEventListener('enable-command', enable_command) .addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) }) .addEventListener('responseaftersearch', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) }); @@ -149,15 +147,20 @@ } if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') { - rcmail.addEventListener('enable-command', enable_command) - .addEventListener('aftershow-headers', function() { layout_messageview(); }) + rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); }) .addEventListener('afterhide-headers', function() { layout_messageview(); }); - $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(); return false }); + + $('#previewheaderstoggle').click(function(e) { + toggle_preview_headers(); + if (this.blur && !rcube_event.is_keyboard(e)) + this.blur(); + return false; + }); // add menu link for each attachment $('#attachment-list > li').each(function() { $(this).append($('<a class="drop" tabindex="0" aria-haspopup="true">Show options</a>') - .bind('click keypress', function(e) { + .on('click keypress', function(e) { if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) { attachmentmenu(this, e); return false; @@ -169,14 +172,22 @@ if (get_pref('previewheaders') == '1') { toggle_preview_headers(); } + + if (rcmail.env.action == 'show') { + document.getElementById('messagecontent').focus() + } } else if (rcmail.env.action == 'compose') { rcmail.addEventListener('aftersend-attachment', show_uploadform) - .addEventListener('add-recipient', function(p){ show_header_row(p.field, true); }) - .addEventListener('aftertoggle-editor', function(e){ + .addEventListener('aftertoggle-editor', function(e) { window.setTimeout(function(){ layout_composeview() }, 200); if (e && e.mode) $("select[name='editorSelector']").val(e.mode); + }) + .addEventListener('compose-encrypted', function(e) { + $("select[name='editorSelector']").prop('disabled', e.active); + $('a.button.attach, a.button.responses')[(e.active?'addClass':'removeClass')]('disabled'); + $('#responseslist a.insertresponse')[(e.active?'removeClass':'addClass')]('active'); }); // Show input elements with non-empty value @@ -214,21 +225,24 @@ $('#composeoptionstoggle').click(); new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right', - orientation:'v', relative:true, start:248, min:170, size:12, render:layout_composeview }).init(); + orientation:'v', relative:true, start:206, min:170, size:12, render:layout_composeview }).init(); } else if (rcmail.env.action == 'list' || !rcmail.env.action) { var previewframe = $('#mailpreviewframe').is(':visible'); - $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false').click(function(e){ toggle_preview_pane(e); return false }); - $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false }); - $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false }); + + $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false') + .click(function(e) { toggle_preview_pane(e); return false; }); + $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e) { switch_view_mode('list'); return false; }); + $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e) { switch_view_mode('thread'); return false; }); mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom', - orientation:'h', relative:true, start:310, min:150, size:12, offset:4 }); + orientation:'h', relative:true, start:276, min:150, size:12, offset:4 }); if (previewframe) mailviewsplit.init(); + rcmail.init_pagejumper('#pagejumper'); + rcmail.addEventListener('setquota', update_quota) - .addEventListener('enable-command', enable_command) .addEventListener('afterimport-messages', show_uploadform); } else if (rcmail.env.action == 'get') { @@ -238,7 +252,7 @@ if ($('#mailview-left').length) { new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right', - orientation:'v', relative:true, start:226, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init(); + orientation:'v', relative:true, start:206, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init(); } } /*** settings task ***/ @@ -256,9 +270,9 @@ new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details', orientation:'v', relative:true, start:266, min:180, size:12 }).init(); - new rcube_scroller('#folderslist-content', '#folderslist-header', '#folderslist-footer'); - rcmail.addEventListener('setquota', update_quota); + + folder_search_init($('#folderslist')); } else if (rcmail.env.action == 'identities') { new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details', @@ -273,19 +287,22 @@ orientation:'v', relative:true, start:266, min:180, size:12 }).init(); } else if (rcmail.env.action == 'edit-prefs') { - $('<a href="#toggle"></a>') + var legend = $('#preferences-details fieldset.advanced legend'), + toggle = $('<a href="#toggle"></a>') .text(env.toggleoptions) .attr('title', env.toggleoptions) - .addClass('advanced-toggle') - .appendTo('#preferences-details fieldset.advanced legend'); + .addClass('advanced-toggle'); - $('#preferences-details fieldset.advanced legend').click(function(e){ - var collapsed = $(this).hasClass('collapsed'), - toggle = $('.advanced-toggle', this).html(collapsed ? '▲' : '▼'); - $(this) - .toggleClass('collapsed') - .closest('fieldset').children('.propform').toggle() - }).addClass('collapsed') + legend.click(function(e) { + toggle.html($(this).hasClass('collapsed') ? '▲' : '▼'); + + $(this).toggleClass('collapsed') + .closest('fieldset').children('.propform').toggle() + }).append(toggle).addClass('collapsed') + + // this magically fixes incorrect position of toggle link created above in Firefox 3.6 + if (bw.mz) + legend.parents('form').css('display', 'inline'); } } /*** addressbook task ***/ @@ -296,9 +313,9 @@ if (rcmail.env.action == '') { new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right', - orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init(); + orientation:'v', relative:true, start:206, min:150, size:12, render:resize_leftcol }).init(); new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box', - orientation:'v', relative:true, start:286, min:270, size:12 }).init(); + orientation:'v', relative:true, start:266, min:260, size:12 }).init(); } var dragmenu = $('#dragcontactmenu'); @@ -327,7 +344,7 @@ if ($('option:selected', this).val() != '') title = $('option:selected', this).text(); - var overlay = $('<a class="menuselector"><span class="handle">' + title + '</span></a>') + var overlay = $('<a class="menuselector" tabindex="-1"><span class="handle">' + title + '</span></a>') .css('position', 'absolute') .offset(select.position()) .insertAfter(select); @@ -339,7 +356,7 @@ // re-set original select width to fix click action and options width in some browsers select.width(overlay.width()) - .change(function() { + .on(bw.mz ? 'change keyup' : 'change', function() { var val = $('option:selected', this).text(); $(this).next().children().text(val); }); @@ -412,6 +429,7 @@ if (me.message_timer) { window.clearTimeout(me.message_timer); } + if (!me.messagedialog) { me.messagedialog = $('<div>').addClass('popupdialog').hide(); } @@ -422,7 +440,7 @@ me.messagedialog.is(':visible') && me.messagedialog.dialog('destroy').hide(); }; - if (me.messagedialog.is(':visible')) + if (me.messagedialog.is(':visible') && me.messagedialog.text() != msg) msg = me.messagedialog.html() + '<p>' + p.message + '</p>'; me.messagedialog.html(msg) @@ -440,7 +458,8 @@ me.messagedialog.closest('div[role=dialog]').attr('role', 'alertdialog'); - me.message_timer = window.setTimeout(dialog_close, p.timeout); + if (p.timeout > 0) + me.message_timer = window.setTimeout(dialog_close, p.timeout); } } @@ -456,6 +475,14 @@ if (!$('#attachment-list li').length) { $('div.rightcol').hide().attr('aria-hidden', 'true'); $('div.leftcol').css('margin-right', '0'); + } + + var mvlpe = $('#messagebody.mailvelope, #messagebody > .mailvelope'); + if (mvlpe.length) { + var h = $('#messagecontent').length ? + $('#messagecontent').height() - 16 : + $(window).height() - mvlpe.offset().top - 10; + mvlpe.height(h); } } @@ -502,27 +529,72 @@ $('#composebodycontainer > div').width(w+8); $('#composebody_ifr').height(h + 4 - $('div.mce-toolbar').height()); - $('#googie_edit_layer').height(h - 8); + $('#googie_edit_layer').width(w).height(h); // $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons'); // $('#composeformbuttons')[(btns ? 'show' : 'hide')](); var abooks = $('#directorylist'); - $('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight()); + if (abooks.length) + $('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight()); } function update_quota(p) { - var step = 24, step_count = 20, + var element = $('#quotadisplay'), menu = $('#quotamenu'), + step = 24, step_count = 20, y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0; // never show full-circle if quota is close to 100% but below. if (p.total && y == step * step_count && p.percent < 100) y -= step; - $('#quotadisplay').css('background-position', '0 -'+y+'px'); + element.css('background-position', '0 -' + y + 'px'); + element.attr('class', 'countdisplay p' + (Math.round(p.percent / 10) * 10)); + + if (p.table) { + if (!menu.length) + menu = $('<div id="quotamenu" class="popupmenu">').appendTo($('body')); + + menu.html(p.table); + element.css('cursor', 'pointer').off('click').on('click', function(e) { + return rcmail.command('menu-open', 'quotamenu', e.target, e); + }); + } } + function folder_search_init(container) + { + // animation to unfold list search box + $('.boxtitle a.search', container).click(function(e) { + var title = $('.boxtitle', container), + box = $('.listsearchbox', container), + dir = box.is(':visible') ? -1 : 1, + height = 34 + ($('select', box).length ? 22 : 0); + + box.slideToggle({ + duration: 160, + progress: function(animation, progress) { + if (dir < 0) progress = 1 - progress; + $('.scroller', container).css('top', (title.outerHeight() + height * progress) + 'px'); + }, + complete: function() { + box.toggleClass('expanded'); + if (box.is(':visible')) { + box.find('input[type=text]').focus(); + height = 34 + ($('select', box).length ? $('select', box).outerHeight() + 4 : 0); + $('.scroller', container).css('top', (title.outerHeight() + height) + 'px'); + } + else { + $('a.reset', box).click(); + } + // TODO: save state in localStorage + } + }); + + return false; + }); + } function enable_command(p) { @@ -532,6 +604,10 @@ $('a.button.replyall').attr('title', label); else $('a.button.reply-all').text(label).attr('title', label); + } + else if (p.command == 'compose-encrypted') { + // show the toolbar button for Mailvelope + $('a.button.encrypt').show(); } } @@ -595,7 +671,7 @@ topstyles, bottomstyles, uid; frame.toggle(); - button.removeClass().toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false'); + button.toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false'); if (visible) { $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' }); @@ -750,11 +826,11 @@ { var id = elem.parentNode.id.replace(/^attach/, ''); - $('#attachmenuopen').unbind('click').attr('onclick', '').click(function(e) { + $('#attachmenuopen').off('click').attr('onclick', '').click(function(e) { return rcmail.command('open-attachment', id, this); }); - $('#attachmenudownload').unbind('click').attr('onclick', '').click(function() { + $('#attachmenudownload').off('click').attr('onclick', '').click(function() { rcmail.command('download-attachment', id, this); }); @@ -775,7 +851,7 @@ li = $('<li role="menuitem">'); link = $('<a href="#'+k+'" tabindex="0"></a>').text(rcmail.env.spell_langs[k]) .addClass('active').data('lang', k) - .bind('click keypress', function(e) { + .on('click keypress', function(e) { if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) { rcmail.spellcheck_lang_set($(this).data('lang')); rcmail.hide_menu('spellmenu', e); @@ -960,6 +1036,10 @@ return; } + // do nothing if mailvelope editor is active + if (rcmail.mailvelope_editor) + return; + // add icons to clone file input field if (rcmail.env.action == 'compose' && !$dialog.data('extended')) { $('<a>') @@ -1017,7 +1097,10 @@ row.show(); $('#' + which + '-link').hide(); + layout_composeview(); + $('input,textarea', row).focus(); + return false; } @@ -1091,14 +1174,11 @@ */ function show_about(elem) { - var frame = $('<iframe>').attr('id', 'aboutframe') - .attr('src', rcmail.url('settings/about')) - .attr('frameborder', '0') - .appendTo(document.body); + var frame = $('<iframe>').attr({id: 'aboutframe', src: rcmail.url('settings/about'), frameborder: '0'}); + h = Math.floor($(window).height() * 0.75), + buttons = {}, + supportln = $('#supportlink'); - var h = Math.floor($(window).height() * 0.75); - var buttons = {}; - var supportln = $('#supportlink'); if (supportln.length && (env.supporturl = supportln.attr('href'))) buttons[supportln.html()] = function(e){ env.supporturl.indexOf('mailto:') < 0 ? window.open(env.supporturl) : location.href = env.supporturl }; @@ -1120,6 +1200,8 @@ /** * Roundcube Scroller class + * + * @deprecated Use treelist widget */ function rcube_scroller(list, top, bottom) { @@ -1197,7 +1279,7 @@ .attr('role', 'presentation') .addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v')) .appendTo(this.parent) - .bind('mousedown', onDragStart); + .mousedown(onDragStart); if (this.horizontal) { var top = this.p1pos.top + this.p1.outerHeight(); @@ -1231,8 +1313,8 @@ this.resize = function() { if (this.horizontal) { - this.p1.css('height', Math.floor(this.pos - this.p1pos.top - this.halfsize) + 'px'); - this.p2.css('top', Math.ceil(this.pos + this.halfsize + 2) + 'px'); + this.p1.css('height', Math.floor(this.pos - this.p1pos.top - Math.floor(this.halfsize)) + 'px'); + this.p2.css('top', Math.ceil(this.pos + Math.ceil(this.halfsize) + 2) + 'px'); this.handle.css('top', Math.round(this.pos - this.halfsize + this.offset)+'px'); if (bw.ie) { var new_height = parseInt(this.parent.outerHeight(), 10) - parseInt(this.p2.css('top'), 10) - (bw.ie8 ? 2 : 0); @@ -1240,8 +1322,8 @@ } } else { - this.p1.css('width', Math.floor(this.pos - this.p1pos.left - this.halfsize) + 'px'); - this.p2.css('left', Math.ceil(this.pos + this.halfsize) + 'px'); + this.p1.css('width', Math.floor(this.pos - this.p1pos.left - Math.floor(this.halfsize)) + 'px'); + this.p2.css('left', Math.ceil(this.pos + Math.ceil(this.halfsize)) + 'px'); this.handle.css('left', Math.round(this.pos - this.halfsize + this.offset + 3)+'px'); if (bw.ie) { var new_width = parseInt(this.parent.outerWidth(), 10) - parseInt(this.p2.css('left'), 10) ; @@ -1278,7 +1360,7 @@ me.drag_active = true; // start listening to mousemove events - $(document).bind('mousemove.'+this.id, onDrag).bind('mouseup.'+this.id, onDragStop); + $(document).on('mousemove.' + this.id, onDrag).on('mouseup.' + this.id, onDragStop); // enable dragging above iframes $('iframe').each(function(i, elem) { @@ -1324,7 +1406,7 @@ if (me.horizontal) { if (((pos.y - me.halfsize) > me.p1pos.top) && ((pos.y + me.halfsize) < (me.p2pos.top + me.p2.outerHeight()))) { - me.pos = Math.max(me.min, pos.y - me.offset); + me.pos = Math.max(me.min, pos.y - Math.max(0, me.offset)); if (me.pos > me.min) me.pos = Math.min(me.pos, me.parent.height() - me.min); @@ -1333,7 +1415,7 @@ } else { if (((pos.x - me.halfsize) > me.p1pos.left) && ((pos.x + me.halfsize) < (me.p2pos.left + me.p2.outerWidth()))) { - me.pos = Math.max(me.min, pos.x - me.offset); + me.pos = Math.max(me.min, pos.x - Math.max(0, me.offset)); if (me.pos > me.min) me.pos = Math.min(me.pos, me.parent.width() - me.min); @@ -1355,7 +1437,7 @@ document.body.style.webkitUserSelect = 'auto'; // cancel the listening for drag events - $(document).unbind('.'+me.id); + $(document).off('.' + me.id); me.drag_active = false; // remove temp divs -- Gitblit v1.9.1