"use strict"; function rcube_elastic_ui() { var mode = 'normal', // one of: wide, normal, tablet, phone env = {}, content_buttons = []; var layout = { menu: $('#layout > .menu')[0], sidebar: $('#layout > .sidebar')[0], list: $('#layout > .list')[0], content: $('#layout > .content')[0], }; var buttons = { menu: $('a.menu-button'), back_sidebar: $('a.back-sidebar-button'), back_list: $('a.back-list-button'), }; // public methods this.register_frame_buttons = register_frame_buttons; env.last_selected = $('#layout > div.selected')[0]; $(window).on('resize', function() { clearTimeout(env.resize_timeout); env.resize_timeout = setTimeout(function() { resize(); }, 25); }).resize(); $('body').on('click', function() { if (mode == 'phone') $(layout.menu).hide(); }); // when loading content-frame in small-screen mode display it $('#layout > .content').find('iframe').on('load', function(e) { var show = !e.target.contentWindow.location.href.endsWith(rcmail.env.blankpage); if (show && !$(layout.content).is(':visible')) { env.last_selected = layout.content; screen_resize(); } }); // 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 != 'wide') { if (rcmail.env.task == 'addressbook' || (rcmail.env.task == 'mail' && !rcmail.env.action)) { show_list(); } } // display current folder name in list header if (rcmail.env.task == 'mail' && !rcmail.env.action) { var name = $.type(e) == 'string' ? e : rcmail.env.mailbox; var folder = rcmail.env.mailboxes[name]; $('#folder-name').text(folder ? folder.name : ''); } }; rcmail.addEventListener('afterlist', list_handler); rcmail.addEventListener('afterlistgroup', list_handler); rcmail.addEventListener('message', message_displayed); // menu/sidebar button buttons.menu.on('click', function() { show_menu(); return false; }); buttons.back_sidebar.on('click', function() { show_sidebar(); return false; }); buttons.back_list.on('click', function() { hide_content(); return false; }); // Semantic-UI style $('input.button').addClass('ui'); $('input.button.mainaction').addClass('primary'); // TODO: Most of this style-related code should not be needed // We should implement some features in the core that would // allow as to tell the engine to add additional html code/attribs $('select').dropdown(); // Make forms pretty with semantic-ui's accordion widget // TODO: Consider using tabs when the page width is big enough $('form.propform,.tabbed').each(function() { var form = $(this), fieldsets = form.children('fieldset'); if (fieldsets.length) { $(this).addClass('ui styled fluid accordion'); fieldsets.each(function(i, fieldset) { var title = $('