From 9bc4b97071956028e1ecd4fec9a5034b8f1c2b70 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Tue, 2 Jan 2018 13:09:23 +0100 Subject: [PATCH] Content frame/list handling for plugins --- skins/elastic/styles/widgets/lists.less | 2 - skins/elastic/styles/widgets/toolbar.less | 7 +- skins/elastic/ui.js | 119 ++++++++++++++-------- 3 files changed, 80 insertions(+), 48 deletions(-) diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index de87a2800..8f9d7b865 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/skins/elastic/styles/widgets/lists.less @@ -113,8 +113,6 @@ } // Focus indicator - // because of border-collapse, we make the left border twice what we want it to be - // - half will be hidden to the left @media screen and (min-width: @screen-width-large) { li > a, &.withselection tbody tr > td:nth-child(1), diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less index 8139d317f..8bdcb9147 100644 --- a/skins/elastic/styles/widgets/toolbar.less +++ b/skins/elastic/styles/widgets/toolbar.less @@ -130,8 +130,11 @@ &.lastpage:before { content: @fa-var-fast-forward; } - &.toggleselect:before { - .font-icon-regular(@fa-var-hand-pointer); + &.toggleselect { + max-width: 2rem; + &:before { + .font-icon-regular(@fa-var-hand-pointer); + } } &.send:before { content: @fa-var-paper-plane; diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index 25ff91d32..0ce3151cc 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -448,18 +448,13 @@ function rcube_elastic_ui() } }); } - }); - // https://github.com/roundcube/elastic/issues/45 - // Draggable blocks scrolling on touch devices, we'll disable it there - if (is_touch()) { - $('[data-list]', layout.list).each(function() { - var list = $(this).data('list'); - if (rcmail[list] && typeof rcmail[list].draggable == 'function') { - rcmail[list].draggable('destroy'); - } - }); - } + // https://github.com/roundcube/elastic/issues/45 + // Draggable blocks scrolling on touch devices, we'll disable it there + if (touch && rcmail[list] && typeof rcmail[list].draggable == 'function') { + rcmail[list].draggable('destroy'); + } + }); // Create floating action button(s) if (layout.list.length && is_mobile()) { @@ -546,10 +541,11 @@ function rcube_elastic_ui() } // Add date format placeholder to datepicker inputs - if (rcmail.env.date_format_localized) { - var placeholder_func = function(input) { $(input).filter('.datepicker').attr('placeholder', rcmail.env.date_format_localized); }; - $('input.datepicker').each(function() { placeholder_func(this); }); - rcmail.addEventListener('insert-edit-field', placeholder_func); + var func, format; + if (format = rcmail.env.date_format_localized) { + func = function(input) { $(input).filter('.datepicker').attr('placeholder', format); }; + $('input.datepicker').each(function() { func(this); }); + rcmail.addEventListener('insert-edit-field', func); } }; @@ -732,7 +728,7 @@ function rcube_elastic_ui() }); // Make tables pretier - $('table:not(.propform):not(.listing)', context) + $('table:not(.propform,.listing)', context) .filter(function() { // exclude direct propform children and external content return !$(this).parent().is('.propform') @@ -814,31 +810,22 @@ function rcube_elastic_ui() function content_frame_init() { var last_selected = env.last_selected, - title_reset = function() { - var title = $('h1.voice').text() || $('title').text() || ''; - $('.header > .header-title', layout.content).text(title); + title_reset = function(title) { + $('.header > .header-title', layout.content).text(title || $('h1.voice').text() || $('title').text() || ''); }; - // when loading content-frame in small-screen mode display it - layout.content.find('iframe').on('load', function(e) { - var href = '', show = true; - - // Reset the scroll position of the iframe-wrapper - $(this).parent('.iframe-wrapper').scrollTop(0); - - try { - href = e.target.contentWindow.location.href; - show = !href.endsWith(rcmail.env.blankpage); - // Reset title back to the default - $(e.target.contentWindow).on('unload', title_reset); - } - catch(e) { /* ignore */ } - + // display or reset the content frame + var common_content_handler = function(e, href, show, title) + { content_frame_navigation(href, e); if (show && !layout.content.is(':visible')) { env.last_selected = layout.content[0]; screen_resize(); + + if (title) { + title_reset(title); + } } else if (!show) { if (env.last_selected != last_selected && !env.content_lock) { @@ -849,32 +836,74 @@ function rcube_elastic_ui() } env.content_lock = false; - }); + }; // display the list widget after 'list' and 'listgroup' commands - // @TODO: plugins should be able to do the same - var list_handler = function(e) { - if (mode != 'large' && !env.content_lock) { - if (rcmail.env.task == 'addressbook' || (rcmail.env.task == 'mail' && !rcmail.env.action)) { - show_list(); - } + var common_list_handler = function(e) { + if (mode != 'large' && !env.content_lock && e.list) { + show_list(); } env.content_lock = false; + // display current folder name in list header + if (e.title) { + $('.header > .header-title', layout.list).text(e.title); + } + }; + + var list_handler = function(e) { + var args = {}; + + if (rcmail.env.task == 'addressbook' || (rcmail.env.task == 'mail' && !rcmail.env.action)) { + args.list = true; + } + // display current folder name in list header if (rcmail.env.task == 'mail' && !rcmail.env.action) { var name = $.type(e) == 'string' ? e : rcmail.env.mailbox, folder = rcmail.env.mailboxes[name]; - $('.header > .header-title', layout.list).text(folder ? folder.name : ''); + args.title = folder.name; } + + common_list_handler(args); }; + // when loading content-frame in small-screen mode display it + layout.content.find('iframe').on('load', function(e) { + var href = '', show = true; + + // Reset the scroll position of the iframe-wrapper + $(this).parent('.iframe-wrapper').scrollTop(0); + + try { + href = e.target.contentWindow.location.href; + show = !href.endsWith(rcmail.env.blankpage); + // Reset title back to the default + $(e.target.contentWindow).on('unload', title_reset); + } + catch(e) { /* ignore */ } + + common_content_handler(e, href, show); + }); + rcmail .addEventListener('afterlist', list_handler) .addEventListener('afterlistgroup', list_handler) - .addEventListener('afterlistsearch', list_handler); + .addEventListener('afterlistsearch', list_handler) + // plugins + .addEventListener('show-list', function(e) { + e.list = true; + common_list_handler(e); + }) + .addEventListener('show-content', function(e) { + if (!$(e.obj).is('iframe')) { + $(e.scrollElement || e.obj).scrollTop(0); + iframe_loader(e.obj); + } + common_content_handler(e.event || new Event, '_action=' + (e.mode || 'edit'), true, e.title); + }); }; /** @@ -2608,7 +2637,9 @@ function rcube_elastic_ui() var loader = $('
').attr('class', 'iframe-loader') .append($('
').attr('class', 'spinner').text(rcmail.gettext('loading'))); - frame.on('load error', function() { + // custom 'loaded' event is expected to be triggered by plugins + // when using the loader not on an iframe + frame.on('load error loaded', function() { // wait some time to make sure the iframe stopped loading setTimeout(function() { loader.remove(); }, 500); })