Aleksander Machniak
2016-04-27 8935587a5957ddccaf931ec3725d1cbd06674efe
commit | author | age
c7dcb3 1 /**
T 2  * Roundcube functions for default skin interface
74d4c7 3  *
f5aecf 4  * Copyright (c) 2013, The Roundcube Dev Team
74d4c7 5  *
T 6  * The contents are subject to the Creative Commons Attribution-ShareAlike
7  * License. It is allowed to copy, distribute, transmit and to adapt the work
8  * by keeping credits to the original autors in the README file.
9  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
190ae4 10  *
TB 11  * @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0
c7dcb3 12  */
T 13
14 function rcube_mail_ui()
15 {
68e13c 16   var env = {};
c7dcb3 17   var popups = {};
T 18   var popupconfig = {
19     forwardmenu:        { editable:1 },
20     searchmenu:         { editable:1, callback:searchmenu },
bc2c43 21     attachmentmenu:     { },
c7dcb3 22     listoptions:        { editable:1 },
T 23     groupmenu:          { above:1 },
24     mailboxmenu:        { above:1 },
4be86f 25     spellmenu:          { callback: spellmenu },
6789bf 26     'folder-selector':  { iconized:1 }
c7dcb3 27   };
T 28
29   var me = this;
918bb9 30   var mailviewsplit;
74d4c7 31   var compose_headers = {};
f52efb 32   var prefs;
c7dcb3 33
T 34   // export public methods
68e13c 35   this.set = setenv;
c7dcb3 36   this.init = init;
bab043 37   this.init_tabs = init_tabs;
68e13c 38   this.show_about = show_about;
c7dcb3 39   this.show_popup = show_popup;
e8bcf0 40   this.toggle_popup = toggle_popup;
443b92 41   this.add_popup = add_popup;
c7dcb3 42   this.set_searchmod = set_searchmod;
1bbf8c 43   this.set_searchscope = set_searchscope;
74d4c7 44   this.show_uploadform = show_uploadform;
T 45   this.show_header_row = show_header_row;
46   this.hide_header_row = hide_header_row;
de1584 47   this.update_quota = update_quota;
6d6725 48   this.get_pref = get_pref;
TB 49   this.save_pref = save_pref;
66233b 50   this.folder_search_init = folder_search_init;
68e13c 51
T 52
542415 53   // set minimal mode on small screens (don't wait for document.ready)
TB 54   if (window.$ && document.body) {
6d6725 55     var minmode = get_pref('minimalmode');
542415 56     if (parseInt(minmode) || (minmode === null && $(window).height() < 850)) {
TB 57       $(document.body).addClass('minimal');
58     }
4910b0 59
TB 60     if (bw.tablet) {
61       $('#viewport').attr('content', "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
62     }
542415 63   }
TB 64
65
68e13c 66   /**
T 67    *
68    */
69   function setenv(key, val)
70   {
71     env[key] = val;
72   }
c7dcb3 73
T 74   /**
6d6725 75    * Get preference stored in browser
TB 76    */
77   function get_pref(key)
78   {
f52efb 79     if (!prefs) {
b0b9cf 80       prefs = rcmail.local_storage_get_item('prefs.larry', {});
f52efb 81     }
TB 82
83     // fall-back to cookies
84     if (prefs[key] == null) {
85       var cookie = rcmail.get_cookie(key);
86       if (cookie != null) {
87         prefs[key] = cookie;
88
b0b9cf 89         // copy value to local storage and remove cookie (if localStorage is supported)
AM 90         if (rcmail.local_storage_set_item('prefs.larry', prefs)) {
f52efb 91           rcmail.set_cookie(key, cookie, new Date());  // expire cookie
TB 92         }
93       }
94     }
95
96     return prefs[key];
6d6725 97   }
TB 98
99   /**
100    * Saves preference value to browser storage
101    */
102   function save_pref(key, val)
103   {
f52efb 104     prefs[key] = val;
TB 105
b0b9cf 106     // write prefs to local storage (if supported)
AM 107     if (!rcmail.local_storage_set_item('prefs.larry', prefs)) {
f52efb 108       // store value in cookie
TB 109       var exp = new Date();
110       exp.setYear(exp.getFullYear() + 1);
111       rcmail.set_cookie(key, val, exp);
112     }
6d6725 113   }
TB 114
115   /**
5ff7ba 116    * Initialize UI
T 117    * Called on document.ready
c7dcb3 118    */
T 119   function init()
120   {
0e530b 121     rcmail.addEventListener('message', message_displayed);
5ff7ba 122
542415 123     /*** prepare minmode functions ***/
TB 124     $('#taskbar a').each(function(i,elem){
125       $(elem).append('<span class="tooltip">' + $('.button-inner', this).html() + '</span>')
126     });
127
128     $('#taskbar .minmodetoggle').click(function(e){
129       var ismin = $(document.body).toggleClass('minimal').hasClass('minimal');
6d6725 130       save_pref('minimalmode', ismin?1:0);
542415 131       $(window).resize();
TB 132     });
133
5ff7ba 134     /***  mail task  ***/
c7dcb3 135     if (rcmail.env.task == 'mail') {
b2992d 136       rcmail.addEventListener('menu-open', menu_toggle)
TB 137         .addEventListener('menu-close', menu_toggle)
138         .addEventListener('menu-save', save_listoptions)
fe8ff8 139         .addEventListener('enable-command', enable_command)
1d6082 140         .addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) })
TB 141         .addEventListener('responseaftersearch', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) });
74d4c7 142
T 143       var dragmenu = $('#dragmessagemenu');
144       if (dragmenu.length) {
a45f9b 145         rcmail.gui_object('dragmenu', 'dragmessagemenu');
AM 146         popups.dragmenu = dragmenu;
74d4c7 147       }
918bb9 148
c7dcb3 149       if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
fe8ff8 150         rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); })
772bec 151           .addEventListener('afterhide-headers', function() { layout_messageview(); });
fe8ff8 152
b80f4b 153         $('#previewheaderstoggle').click(function(e) {
TB 154             toggle_preview_headers();
155             if (this.blur && !rcube_event.is_keyboard(e))
156                 this.blur();
157             return false;
158         });
bc2c43 159
AM 160         // add menu link for each attachment
161         $('#attachment-list > li').each(function() {
d2bf33 162           $(this).append($('<a class="drop" tabindex="0" aria-haspopup="true">Show options</a>')
d9ff47 163               .on('click keypress', function(e) {
b2992d 164                   if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
TB 165                       attachmentmenu(this, e);
166                       return false;
167                   }
168               })
d2bf33 169           );
bc2c43 170         });
6e5bf9 171
P 172         if (get_pref('previewheaders') == '1') {
173           toggle_preview_headers();
174         }
74d4c7 175       }
T 176       else if (rcmail.env.action == 'compose') {
772bec 177         rcmail.addEventListener('aftersend-attachment', show_uploadform)
b95a6d 178           .addEventListener('aftertoggle-editor', function(e) {
772bec 179             window.setTimeout(function(){ layout_composeview() }, 200);
AM 180             if (e && e.mode)
181               $("select[name='editorSelector']").val(e.mode);
b95a6d 182           })
TB 183           .addEventListener('compose-encrypted', function(e) {
184             $("select[name='editorSelector']").prop('disabled', e.active);
185             $('a.button.attach, a.button.responses')[(e.active?'addClass':'removeClass')]('disabled');
82dcbb 186             $('#responseslist a.insertresponse')[(e.active?'removeClass':'addClass')]('active');
772bec 187           });
74d4c7 188
b4e41f 189         // Show input elements with non-empty value
15482b 190         var f, v, field, fields = ['cc', 'bcc', 'replyto', 'followupto'];
AM 191         for (f=0; f < fields.length; f++) {
192           v = fields[f]; field = $('#_'+v);
193           if (field.length) {
194             field.on('change', {v: v}, function(e) { if (this.value) show_header_row(e.data.v, true); });
195             if (field.val() != '')
196               show_header_row(v, true);
197           }
b4e41f 198         }
T 199
ea0866 200         $('#composeoptionstoggle').click(function(e){
d0d7f4 201           var expanded = $('#composeoptions').toggle().is(':visible');
TB 202           $('#composeoptionstoggle').toggleClass('remove').attr('aria-expanded', expanded ? 'true' : 'false');
74d4c7 203           layout_composeview();
d0d7f4 204           save_pref('composeoptions', expanded ? '1' : '0');
ea0866 205           if (!rcube_event.is_keyboard(e))
TB 206             this.blur();
74d4c7 207           return false;
bab043 208         }).css('cursor', 'pointer');
6d6725 209
TB 210         if (get_pref('composeoptions') !== '0') {
211           $('#composeoptionstoggle').click();
212         }
786392 213
TB 214         // adjust hight when textarea starts to scroll
215         $("textarea[name='_to'], textarea[name='_cc'], textarea[name='_bcc']").change(function(e){ adjust_compose_editfields(this); }).change();
216         rcmail.addEventListener('autocomplete_insert', function(p){ adjust_compose_editfields(p.field); });
74d4c7 217
eb5147 218         // toggle compose options if opened in new window and they were visible before
32da69 219         var opener_rc = rcmail.opener();
AM 220         if (opener_rc && opener_rc.env.action == 'compose' && $('#composeoptionstoggle', opener.document).hasClass('remove'))
eb5147 221           $('#composeoptionstoggle').click();
TB 222
74d4c7 223         new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right',
a292e4 224           orientation:'v', relative:true, start:206, min:170, size:12, render:layout_composeview }).init();
918bb9 225       }
T 226       else if (rcmail.env.action == 'list' || !rcmail.env.action) {
5ff7ba 227         var previewframe = $('#mailpreviewframe').is(':visible');
f331da 228
AM 229         $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false')
230           .click(function(e) { toggle_preview_pane(e); return false; });
231         $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e) { switch_view_mode('list'); return false; });
232         $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e) { switch_view_mode('thread'); return false; });
847d31 233
5ff7ba 234         mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
459003 235           orientation:'h', relative:true, start:276, min:150, size:12, offset:4 });
5ff7ba 236         if (previewframe)
T 237           mailviewsplit.init();
238
9a5d9a 239         rcmail.init_pagejumper('#pagejumper');
AM 240
772bec 241         rcmail.addEventListener('setquota', update_quota)
AM 242           .addEventListener('afterimport-messages', show_uploadform);
918bb9 243       }
049428 244       else if (rcmail.env.action == 'get') {
AM 245         new rcube_splitter({ id:'mailpartsplitterv', p1:'#messagepartheader', p2:'#messagepartcontainer',
246           orientation:'v', relative:true, start:226, min:150, size:12}).init();
247       }
847d31 248
918bb9 249       if ($('#mailview-left').length) {
T 250         new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right',
a292e4 251           orientation:'v', relative:true, start:206, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init();
c7dcb3 252       }
28e18c 253     }
5ff7ba 254     /***  settings task  ***/
28e18c 255     else if (rcmail.env.task == 'settings') {
4f1b7a 256       rcmail.addEventListener('init', function(){
T 257         var tab = '#settingstabpreferences';
258         if (rcmail.env.action)
259           tab = '#settingstab' + (rcmail.env.action.indexOf('identity')>0 ? 'identities' : rcmail.env.action.replace(/\./g, ''));
28e18c 260
4f1b7a 261         $(tab).addClass('selected')
T 262           .children().first().removeAttr('onclick').click(function() { return false; });
263       });
918bb9 264
T 265       if (rcmail.env.action == 'folders') {
266         new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details',
f45a97 267           orientation:'v', relative:true, start:266, min:180, size:12 }).init();
fe8374 268
A 269         rcmail.addEventListener('setquota', update_quota);
66233b 270
AM 271         folder_search_init($('#folderslist'));
918bb9 272       }
7c2a93 273       else if (rcmail.env.action == 'identities') {
918bb9 274         new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details',
f45a97 275           orientation:'v', relative:true, start:266, min:180, size:12 }).init();
918bb9 276       }
64f40e 277       else if (rcmail.env.action == 'responses') {
AM 278         new rcube_splitter({ id:'responseviewsplitter', p1:'#identitieslist', p2:'#identity-details',
279           orientation:'v', relative:true, start:266, min:180, size:12 }).init();
280       }
eac1b7 281       else if (rcmail.env.action == 'preferences' || !rcmail.env.action) {
389fa1 282         new rcube_splitter({ id:'prefviewsplitter', p1:'#sectionslist', p2:'#preferences-box',
AM 283           orientation:'v', relative:true, start:266, min:180, size:12 }).init();
284       }
7be8a9 285       else if (rcmail.env.action == 'edit-prefs') {
64ed17 286         var legend = $('#preferences-details fieldset.advanced legend'),
AM 287           toggle = $('<a href="#toggle"></a>')
77043f 288             .text(env.toggleoptions)
TB 289             .attr('title', env.toggleoptions)
64ed17 290             .addClass('advanced-toggle');
7be8a9 291
64ed17 292         legend.click(function(e) {
AM 293           toggle.html($(this).hasClass('collapsed') ? '&#9650;' : '&#9660;');
294
295           $(this).toggleClass('collapsed')
296             .closest('fieldset').children('.propform').toggle()
297         }).append(toggle).addClass('collapsed')
298
299         // this magically fixes incorrect position of toggle link created above in Firefox 3.6
300         if (bw.mz)
301           legend.parents('form').css('display', 'inline');
7be8a9 302       }
c7dcb3 303     }
5ff7ba 304     /***  addressbook task  ***/
bab043 305     else if (rcmail.env.task == 'addressbook') {
772bec 306       rcmail.addEventListener('afterupload-photo', show_uploadform)
AM 307         .addEventListener('beforepushgroup', push_contactgroup)
893558 308         .addEventListener('beforepopgroup', pop_contactgroup)
AM 309         .addEventListener('menu-open', menu_toggle)
310         .addEventListener('menu-close', menu_toggle);
68e13c 311
T 312       if (rcmail.env.action == '') {
313         new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right',
a292e4 314           orientation:'v', relative:true, start:206, min:150, size:12, render:resize_leftcol }).init();
68e13c 315         new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box',
a292e4 316           orientation:'v', relative:true, start:266, min:260, size:12 }).init();
68e13c 317       }
a45f9b 318
AM 319       var dragmenu = $('#dragcontactmenu');
320       if (dragmenu.length) {
321         rcmail.gui_object('dragmenu', 'dragcontactmenu');
322         popups.dragmenu = dragmenu;
323       }
822a1e 324     }
bab043 325
T 326     // turn a group of fieldsets into tabs
327     $('.tabbed').each(function(idx, elem){ init_tabs(elem); })
c7dcb3 328
7a32e9 329     // decorate select elements
85f11f 330     $('select.decorated').each(function(){
A 331       if (bw.opera) {
332         $(this).removeClass('decorated');
333         return;
334       }
7a32e9 335
3d122f 336       var select = $(this),
12e69c 337         parent = select.parent(),
c8dc07 338         height = Math.max(select.height(), 26) - 2,
3d122f 339         width = select.width() - 22,
AM 340         title = $('option', this).first().text();
341
85f11f 342       if ($('option:selected', this).val() != '')
A 343         title = $('option:selected', this).text();
7a32e9 344
3445ca 345       var overlay = $('<a class="menuselector" tabindex="-1"><span class="handle">' + title + '</span></a>')
85f11f 346         .css('position', 'absolute')
A 347         .offset(select.position())
3d122f 348         .insertAfter(select);
85f11f 349
77fad1 350       overlay.children().width(width).height(height).css('line-height', (height - 1) + 'px');
3d122f 351
77fad1 352       if (parent.css('position') != 'absolute')
TB 353         parent.css('position', 'relative');
3d122f 354
8ba01c 355       // re-set original select width to fix click action and options width in some browsers
12e69c 356       select.width(overlay.width())
3445ca 357         .on(bw.mz ? 'change keyup' : 'change', function() {
12e69c 358           var val = $('option:selected', this).text();
AM 359           $(this).next().children().text(val);
360         });
e8bcf0 361
TB 362       select
363         .on('focus', function(e){ overlay.addClass('focus'); })
364         .on('blur', function(e){ overlay.removeClass('focus'); });
85f11f 365     });
7a32e9 366
3a0f82 367     // set min-width to show all toolbar buttons
f8a9c2 368     var screen = $('body.minwidth');
3a0f82 369     if (screen.length) {
AM 370       screen.css('min-width', $('.toolbar').width() + $('#quicksearchbar').width() + $('#searchfilter').width() + 30);
371     }
372
8ce602 373     // don't use $(window).resize() due to some unwanted side-effects
TB 374     window.onresize = resize;
98d096 375     resize();
14a3f2 376   }
T 377
378   /**
28e18c 379    * Update UI on window resize
T 380    */
d227ed 381   function resize(e)
28e18c 382   {
d227ed 383     // resize in intervals to prevent lags and double onresize calls in Chrome (#1489005)
AM 384     var interval = e ? 10 : 0;
98d096 385
d227ed 386     if (rcmail.resize_timeout)
AM 387       window.clearTimeout(rcmail.resize_timeout);
bbbacd 388
d227ed 389     rcmail.resize_timeout = window.setTimeout(function() {
AM 390       if (rcmail.env.task == 'mail') {
391         if (rcmail.env.action == 'show' || rcmail.env.action == 'preview')
392           layout_messageview();
393         else if (rcmail.env.action == 'compose')
394           layout_composeview();
98d096 395       }
d227ed 396
AM 397       // make iframe footer buttons float if scrolling is active
398       $('body.iframe .footerleft').each(function(){
399         var footer = $(this),
400           body = $(document.body),
401           floating = footer.hasClass('floating'),
402           overflow = body.outerHeight(true) > $(window).height();
403
404         if (overflow != floating) {
405           var action = overflow ? 'addClass' : 'removeClass';
406           footer[action]('floating');
407           body[action]('floatingbuttons');
408         }
409       });
410     }, interval);
c7dcb3 411   }
T 412
413   /**
0e530b 414    * Triggered when a new user message is displayed
T 415    */
416   function message_displayed(p)
417   {
34003c 418     var siblings = $(p.object).siblings('div');
TB 419     if (siblings.length)
420       $(p.object).insertBefore(siblings.first());
421
0e530b 422     // show a popup dialog on errors
30eb9e 423     if (p.type == 'error' && rcmail.env.task != 'login') {
c50eee 424       // hide original message object, we don't want both
AM 425       rcmail.hide_message(p.object);
426
464a0f 427       if (me.message_timer) {
TB 428         window.clearTimeout(me.message_timer);
429       }
2a8912 430
0e530b 431       if (!me.messagedialog) {
464a0f 432         me.messagedialog = $('<div>').addClass('popupdialog').hide();
0e530b 433       }
T 434
464a0f 435       var msg = p.message,
c50eee 436         dialog_close = function() {
AM 437           // check if dialog is still displayed, to prevent from js error
438           me.messagedialog.is(':visible') && me.messagedialog.dialog('destroy').hide();
439         };
464a0f 440
2a8912 441       if (me.messagedialog.is(':visible') && me.messagedialog.text() != msg)
464a0f 442         msg = me.messagedialog.html() + '<p>' + p.message + '</p>';
TB 443
444       me.messagedialog.html(msg)
0e530b 445         .dialog({
T 446           resizable: false,
447           closeOnEscape: true,
448           dialogClass: 'popupmessage ' + p.type,
71e9ef 449           title: env.errortitle,
c50eee 450           close: dialog_close,
AM 451           position: ['center', 'center'],
452           hide: {effect: 'fadeOut'},
0e530b 453           width: 420,
T 454           minHeight: 90
455         }).show();
e493c8 456
a539ce 457       me.messagedialog.closest('div[role=dialog]').attr('role', 'alertdialog');
TB 458
d981aa 459       if (p.timeout > 0)
TB 460         me.message_timer = window.setTimeout(dialog_close, p.timeout);
0e530b 461     }
T 462   }
463
464
465   /**
c7dcb3 466    * Adjust UI objects of the mail view screen
T 467    */
28e18c 468   function layout_messageview()
c7dcb3 469   {
dd5258 470     $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 1) + 'px');
c7dcb3 471     $('#message-objects div a').addClass('button');
76248c 472
c7dcb3 473     if (!$('#attachment-list li').length) {
d2bf33 474       $('div.rightcol').hide().attr('aria-hidden', 'true');
b540ed 475       $('div.leftcol').css('margin-right', '0');
c7dcb3 476     }
1cd376 477
e1126a 478     var mvlpe = $('#messagebody.mailvelope, #messagebody > .mailvelope');
1cd376 479     if (mvlpe.length) {
TB 480       var h = $('#messagecontent').length ?
481         $('#messagecontent').height() - 16 :
482         $(window).height() - mvlpe.offset().top - 10;
483       mvlpe.height(h);
484     }
c7dcb3 485   }
918bb9 486
T 487
488   function render_mailboxlist(splitter)
489   {
0e530b 490     // TODO: implement smart shortening of long folder names
918bb9 491   }
T 492
493
494   function resize_leftcol(splitter)
495   {
c8dc07 496     // STUB
74d4c7 497   }
T 498
786392 499   function adjust_compose_editfields(elem)
TB 500   {
501     if (elem.nodeName == 'TEXTAREA') {
502       var $elem = $(elem), line_height = 14,  // hard-coded because some browsers only provide the outer height in elem.clientHeight
503         content_height = elem.scrollHeight,
504         rows = elem.value.length > 80 && content_height > line_height*1.5 ? 2 : 1;
505       $elem.css('height', (line_height*rows) + 'px');
506       layout_composeview();
507     }
508   }
74d4c7 509
T 510   function layout_composeview()
511   {
512     var body = $('#composebody'),
071c78 513       form = $('#compose-content'),
74d4c7 514       bottom = $('#composeview-bottom'),
edfe79 515       w, h, bh, ovflw, btns = 0,
TB 516       minheight = 300,
74d4c7 517
6fa5b4 518     bh = form.height() - bottom.position().top;
edfe79 519     ovflw = minheight - bh;
TB 520     btns = ovflw > -100 ? 0 : 40;
6fa5b4 521     bottom.height(Math.max(minheight, bh));
edfe79 522     form.css('overflow', ovflw > 0 ? 'auto' : 'hidden');
74d4c7 523
4be86f 524     w = body.parent().width() - 5;
6fa5b4 525     h = body.parent().height() - 8;
74d4c7 526     body.width(w).height(h);
T 527
b21f8b 528     $('#composebodycontainer > div').width(w+8);
89d6ce 529     $('#composebody_ifr').height(h + 4 - $('div.mce-toolbar').height());
421ed1 530     $('#googie_edit_layer').width(w).height(h);
edfe79 531 //    $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons');
TB 532 //    $('#composeformbuttons')[(btns ? 'show' : 'hide')]();
fe8374 533
071c78 534     var abooks = $('#directorylist');
d1cd22 535     if (abooks.length)
TB 536       $('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight());
918bb9 537   }
T 538
c7dcb3 539
847d31 540   function update_quota(p)
T 541   {
c5f068 542     var element = $('#quotadisplay'), menu = $('#quotamenu'),
AM 543       step = 24, step_count = 20,
3d122f 544       y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0;
AM 545
546     // never show full-circle if quota is close to 100% but below.
547     if (p.total && y == step * step_count && p.percent < 100)
548       y -= step;
549
c5f068 550     element.css('background-position', '0 -' + y + 'px');
3dd377 551     element.attr('class', 'countdisplay p' + (Math.round(p.percent / 10) * 10));
c5f068 552
AM 553     if (p.table) {
554       if (!menu.length)
555         menu = $('<div id="quotamenu" class="popupmenu">').appendTo($('body'));
556
557       menu.html(p.table);
558       element.css('cursor', 'pointer').off('click').on('click', function(e) {
559         return rcmail.command('menu-open', 'quotamenu', e.target, e);
560       });
561     }
847d31 562   }
T 563
66233b 564   function folder_search_init(container)
AM 565   {
566     // animation to unfold list search box
567     $('.boxtitle a.search', container).click(function(e) {
568       var title = $('.boxtitle', container),
569         box = $('.listsearchbox', container),
e9ecd4 570         dir = box.is(':visible') ? -1 : 1,
0fddf7 571         height = 34 + ($('select', box).length ? 22 : 0);
66233b 572
AM 573       box.slideToggle({
574         duration: 160,
575         progress: function(animation, progress) {
576           if (dir < 0) progress = 1 - progress;
e9ecd4 577             $('.scroller', container).css('top', (title.outerHeight() + height * progress) + 'px');
66233b 578         },
AM 579         complete: function() {
580           box.toggleClass('expanded');
581           if (box.is(':visible')) {
582             box.find('input[type=text]').focus();
0fddf7 583             height = 34 + ($('select', box).length ? $('select', box).outerHeight() + 4 : 0);
TB 584             $('.scroller', container).css('top', (title.outerHeight() + height) + 'px');
66233b 585           }
AM 586           else {
587             $('a.reset', box).click();
588           }
589           // TODO: save state in localStorage
590         }
591       });
592
593       return false;
594     });
595   }
847d31 596
235504 597   function enable_command(p)
AM 598   {
b972b4 599     if (p.command == 'reply-list' && rcmail.env.reply_all_mode == 1) {
235504 600       var label = rcmail.gettext(p.status ? 'replylist' : 'replyall');
AM 601       if (rcmail.env.action == 'preview')
602         $('a.button.replyall').attr('title', label);
603       else
604         $('a.button.reply-all').text(label).attr('title', label);
605     }
fe8ff8 606     else if (p.command == 'compose-encrypted') {
AM 607       // show the toolbar button for Mailvelope
608       $('a.button.encrypt').show();
609     }
235504 610   }
AM 611
612
c7dcb3 613   /**
443b92 614    * Register a popup menu
AM 615    */
616   function add_popup(popup, config)
617   {
618     var obj = popups[popup] = $('#'+popup);
619     obj.appendTo(document.body);  // move it to top for proper absolute positioning
620
621     if (obj.length)
622       popupconfig[popup] = $.extend(popupconfig[popup] || {}, config || {});
623   }
624
625   /**
c7dcb3 626    * Trigger for popup menus
T 627    */
e8bcf0 628   function toggle_popup(popup, e, config)
TB 629   {
6789bf 630     // auto-register menu object
TB 631     if (config || !popupconfig[popup])
632       add_popup(popup, config);
633
634     return rcmail.command('menu-open', popup, e.target, e);
e8bcf0 635   }
TB 636
637   /**
638    * (Deprecated) trigger for popup menus
639    */
c7dcb3 640   function show_popup(popup, show, config)
T 641   {
642     // auto-register menu object
643     if (config || !popupconfig[popup])
443b92 644       add_popup(popup, config);
c7dcb3 645
6789bf 646     config = popupconfig[popup] || {};
TB 647     var ref = $(config.link ? config.link : '#'+popup+'link'),
c7dcb3 648       pos = ref.offset();
6789bf 649     if (ref.has('.inner'))
TB 650       ref = ref.children('.inner');
c7dcb3 651
6789bf 652     // fire command with simulated mouse click event
TB 653     return rcmail.command('menu-open',
654       { menu:popup, show:show },
655       ref.get(0),
656       $.Event('click', { target:ref.get(0), pageX:pos.left, pageY:pos.top, clientX:pos.left, clientY:pos.top }));
c7dcb3 657   }
T 658
659
918bb9 660   /**
T 661    * Show/hide the preview pane
662    */
c7dcb3 663   function toggle_preview_pane(e)
T 664   {
b540ed 665     var button = $(e.target),
T 666       frame = $('#mailpreviewframe'),
667       visible = !frame.is(':visible'),
6d6725 668       splitter = mailviewsplit.pos || parseInt(get_pref('mailviewsplitter') || 320),
b540ed 669       topstyles, bottomstyles, uid;
T 670
671     frame.toggle();
f331da 672     button.toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false');
c7dcb3 673
b540ed 674     if (visible) {
77fad1 675       $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' });
34003c 676       $('#mailview-bottom').css({ height:'auto' }).show();
918bb9 677
b540ed 678       rcmail.env.contentframe = 'messagecontframe';
T 679       if (uid = rcmail.message_list.get_single_selection())
680         rcmail.show_message(uid, false, true);
918bb9 681
T 682       // let the splitter set the correct size and position
683       if (mailviewsplit.handle) {
684         mailviewsplit.handle.show();
685         mailviewsplit.resize();
686       }
687       else
688         mailviewsplit.init();
b540ed 689     }
T 690     else {
691       rcmail.env.contentframe = null;
692       rcmail.show_contentframe(false);
693
34003c 694       $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'0px' });
TB 695       $('#mailview-bottom').css({ top:'auto', height:'0px' }).hide();
918bb9 696
T 697       if (mailviewsplit.handle)
698         mailviewsplit.handle.hide();
699     }
b540ed 700
73ad4f 701     if (rcmail.message_list) {
TB 702       if (visible && uid)
703           rcmail.message_list.scrollto(uid);
704       rcmail.message_list.resize();
705     }
b540ed 706
T 707     rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) });
c7dcb3 708   }
T 709
710
918bb9 711   /**
f4aaf8 712    * Switch between short and full headers display in message preview
T 713    */
ef3f1d 714   function toggle_preview_headers()
f4aaf8 715   {
T 716     $('#preview-shortheaders').toggle();
9bd97c 717     var full = $('#preview-allheaders').toggle(),
c23aad 718       button = $('a#previewheaderstoggle');
9bd97c 719
f4aaf8 720     // add toggle button to full headers table
c23aad 721     if (full.is(':visible'))
d0d7f4 722       button.attr('href', '#hide').removeClass('add').addClass('remove').attr('aria-expanded', 'true');
c23aad 723     else
d0d7f4 724       button.attr('href', '#details').removeClass('remove').addClass('add').attr('aria-expanded', 'false');
6e5bf9 725
P 726     save_pref('previewheaders', full.is(':visible') ? '1' : '0');
f4aaf8 727   }
T 728
729
730   /**
918bb9 731    *
T 732    */
1d6082 733   function switch_view_mode(mode, force)
a4be51 734   {
1d6082 735     if (force || !$('#mail'+mode+'mode').hasClass('disabled')) {
e8bcf0 736       $('#maillistmode, #mailthreadmode').removeClass('selected').attr('tabindex', '0').attr('aria-disabled', 'false');
TB 737       $('#mail'+mode+'mode').addClass('selected').attr('tabindex', '-1').attr('aria-disabled', 'true');
1bbf8c 738     }
a4be51 739   }
T 740
741
6789bf 742   /**** popup menu callbacks ****/
c7dcb3 743
6789bf 744   /**
TB 745    * Handler for menu-open and menu-close events
746    */
b2992d 747   function menu_toggle(p)
bc2c43 748   {
6789bf 749     if (p && p.name == 'messagelistmenu') {
b2992d 750       show_listoptions(p);
6789bf 751     }
TB 752     else if (p) {
753       // adjust menu position according to config
754       var config = popupconfig[p.name] || {},
755         ref = $(config.link || '#'+p.name+'link'),
756         visible = p.obj && p.obj.is(':visible'),
757         above = config.above;
bc2c43 758
6789bf 759       // fix position according to config
TB 760       if (p.obj && visible && ref.length) {
761         var parent = ref.parent(),
762           win = $(window), pos;
763
764         if (parent.hasClass('dropbutton'))
765           ref = parent;
766
767         if (config.above || ref.hasClass('dropbutton')) {
768           pos = ref.offset();
769           p.obj.css({ left:pos.left+'px', top:(pos.top + (config.above ? -p.obj.height() : ref.outerHeight()))+'px' });
770         }
771       }
772
773       // add the right classes
774       if (p.obj && config.iconized) {
775         p.obj.children('ul').addClass('iconized');
776       }
777
778       // apply some data-attributes from menu config
779       if (p.obj && config.editable)
780         p.obj.attr('data-editable', 'true');
781
782       // trigger callback function
783       if (typeof config.callback == 'function') {
784         config.callback(visible, p);
785       }
786     }
bc2c43 787   }
AM 788
c7dcb3 789   function searchmenu(show)
T 790   {
791     if (show && rcmail.env.search_mods) {
792       var n, all,
793         obj = popups['searchmenu'],
794         list = $('input:checkbox[name="s_mods[]"]', obj),
795         mbox = rcmail.env.mailbox,
1bbf8c 796         mods = rcmail.env.search_mods,
TB 797         scope = rcmail.env.search_scope || 'base';
c7dcb3 798
T 799       if (rcmail.env.task == 'mail') {
1bbf8c 800         if (scope == 'all')
TB 801           mbox = '*';
c7dcb3 802         mods = mods[mbox] ? mods[mbox] : mods['*'];
T 803         all = 'text';
c83535 804         $('input:radio[name="s_scope"]').prop('checked', false).filter('#s_scope_'+scope).prop('checked', true);
c7dcb3 805       }
T 806       else {
807         all = '*';
808       }
809
810       if (mods[all])
811         list.map(function() {
812           this.checked = true;
813           this.disabled = this.value != all;
814         });
815       else {
816         list.prop('disabled', false).prop('checked', false);
817         for (n in mods)
818           $('#s_mod_' + n).prop('checked', true);
819       }
820     }
821   }
822
d2bf33 823   function attachmentmenu(elem, event)
bc2c43 824   {
AM 825     var id = elem.parentNode.id.replace(/^attach/, '');
826
d9ff47 827     $('#attachmenuopen').off('click').attr('onclick', '').click(function(e) {
bc2c43 828       return rcmail.command('open-attachment', id, this);
AM 829     });
830
d9ff47 831     $('#attachmenudownload').off('click').attr('onclick', '').click(function() {
bc2c43 832       rcmail.command('download-attachment', id, this);
AM 833     });
834
835     popupconfig.attachmentmenu.link = elem;
d2bf33 836     rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, elem, event);
bc2c43 837   }
c7dcb3 838
6789bf 839   function spellmenu(show, p)
4be86f 840   {
b2992d 841     var k, link, li,
4be86f 842       lang = rcmail.spellcheck_lang(),
6789bf 843       ul = $('ul', p.obj);
4be86f 844
A 845     if (!ul.length) {
b2992d 846       ul = $('<ul class="toolbarmenu selectable" role="menu">');
4be86f 847
b2992d 848       for (k in rcmail.env.spell_langs) {
TB 849         li = $('<li role="menuitem">');
850         link = $('<a href="#'+k+'" tabindex="0"></a>').text(rcmail.env.spell_langs[k])
851           .addClass('active').data('lang', k)
d9ff47 852           .on('click keypress', function(e) {
b2992d 853               if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
TB 854                   rcmail.spellcheck_lang_set($(this).data('lang'));
6789bf 855                   rcmail.hide_menu('spellmenu', e);
b2992d 856                   return false;
TB 857               }
4be86f 858           });
A 859
860         link.appendTo(li);
861         li.appendTo(ul);
862       }
863
6789bf 864       ul.appendTo(p.obj);
4be86f 865     }
A 866
867     // select current language
868     $('li', ul).each(function() {
869       var el = $('a', this);
870       if (el.data('lang') == lang)
b2992d 871         el.addClass('selected').attr('aria-selected', 'true');
4be86f 872       else if (el.hasClass('selected'))
b2992d 873         el.removeClass('selected').removeAttr('aria-selected');
4be86f 874     });
A 875   }
876
877
918bb9 878   /**
T 879    *
880    */
b2992d 881   function show_listoptions(p)
74d4c7 882   {
T 883     var $dialog = $('#listoptions');
884
885     // close the dialog
886     if ($dialog.is(':visible')) {
b2992d 887       $dialog.dialog('close', p.originalEvent);
74d4c7 888       return;
T 889     }
890
891     // set form values
892     $('input[name="sort_col"][value="'+rcmail.env.sort_col+'"]').prop('checked', true);
893     $('input[name="sort_ord"][value="DESC"]').prop('checked', rcmail.env.sort_order == 'DESC');
894     $('input[name="sort_ord"][value="ASC"]').prop('checked', rcmail.env.sort_order != 'DESC');
895
e0efd8 896     // set checkboxes
AM 897     $('input[name="list_col[]"]').each(function() {
c83535 898       $(this).prop('checked', $.inArray(this.value, rcmail.env.listcols) != -1);
e0efd8 899     });
74d4c7 900
T 901     $dialog.dialog({
902       modal: true,
903       resizable: false,
904       closeOnEscape: true,
905       title: null,
b2992d 906       open: function(e) {
TB 907         setTimeout(function(){ $dialog.find('a, input:not(:disabled)').not('[aria-disabled=true]').first().focus(); }, 100);
908       },
909       close: function(e) {
74d4c7 910         $dialog.dialog('destroy').hide();
b2992d 911         if (e.originalEvent && rcube_event.is_keyboard(e.originalEvent))
TB 912           $('#listmenulink').focus();
74d4c7 913       },
36adaf 914       minWidth: 500,
AM 915       width: $dialog.width()+25
74d4c7 916     }).show();
T 917   }
918
919
920   /**
921    *
922    */
b2992d 923   function save_listoptions(p)
c7dcb3 924   {
74d4c7 925     $('#listoptions').dialog('close');
c7dcb3 926
b2992d 927     if (rcube_event.is_keyboard(p.originalEvent))
TB 928       $('#listmenulink').focus();
c7dcb3 929
T 930     var sort = $('input[name="sort_col"]:checked').val(),
931       ord = $('input[name="sort_ord"]:checked').val(),
932       cols = $('input[name="list_col[]"]:checked')
933         .map(function(){ return this.value; }).get();
934
ec5323 935     rcmail.set_list_options(cols, sort, ord, rcmail.env.threading);
c7dcb3 936   }
T 937
938
918bb9 939   /**
T 940    *
941    */
c7dcb3 942   function set_searchmod(elem)
T 943   {
944     var all, m, task = rcmail.env.task,
945       mods = rcmail.env.search_mods,
1bbf8c 946       mbox = rcmail.env.mailbox,
TB 947       scope = $('input[name="s_scope"]:checked').val();
948
949     if (scope == 'all')
950       mbox = '*';
c7dcb3 951
T 952     if (!mods)
953       mods = {};
954
955     if (task == 'mail') {
956       if (!mods[mbox])
957         mods[mbox] = rcube_clone_object(mods['*']);
958       m = mods[mbox];
959       all = 'text';
960     }
961     else { //addressbook
962       m = mods;
963       all = '*';
964     }
965
966     if (!elem.checked)
967       delete(m[elem.value]);
968     else
969       m[elem.value] = 1;
970
971     // mark all fields
c83535 972     if (elem.value == all) {
TB 973       $('input:checkbox[name="s_mods[]"]').map(function() {
974         if (this == elem)
975           return;
c7dcb3 976
c83535 977         this.checked = true;
TB 978         if (elem.checked) {
979           this.disabled = true;
980           delete m[this.value];
981         }
982         else {
983           this.disabled = false;
984           m[this.value] = 1;
985         }
986       });
987     }
c7dcb3 988
c83535 989     rcmail.set_searchmods(m);
c7dcb3 990   }
74d4c7 991
1bbf8c 992   function set_searchscope(elem)
TB 993   {
c83535 994     rcmail.set_searchscope(elem.value);
1bbf8c 995   }
TB 996
de98a8 997   function push_contactgroup(p)
TB 998   {
999     // lets the contacts list swipe to the left, nice!
1000     var table = $('#contacts-table'),
1001       scroller = table.parent().css('overflow', 'hidden');
1002
1003     table.clone()
1004       .css({ position:'absolute', top:'0', left:'0', width:table.width()+'px', 'z-index':10 })
1005       .appendTo(scroller)
1006       .animate({ left: -(table.width()+5) + 'px' }, 300, 'swing', function(){
1007         $(this).remove();
1008         scroller.css('overflow', 'auto')
1009       });
1010   }
1011
1012   function pop_contactgroup(p)
1013   {
1014     // lets the contacts list swipe to the left, nice!
1015     var table = $('#contacts-table'),
1016       scroller = table.parent().css('overflow', 'hidden'),
1017       clone = table.clone().appendTo(scroller);
1018
1019       table.css({ position:'absolute', top:'0', left:-(table.width()+5) + 'px', width:table.width()+'px', height:table.height()+'px', 'z-index':10 })
1020         .animate({ left:'0' }, 300, 'linear', function(){
1021         clone.remove();
1022         $(this).css({ position:'relative', left:'0', width:'100%', height:'auto', 'z-index':1 });
1023         scroller.css('overflow', 'auto')
1024       });
1025   }
74d4c7 1026
ea0866 1027   function show_uploadform(e)
74d4c7 1028   {
T 1029     var $dialog = $('#upload-dialog');
1030
1031     // close the dialog
1032     if ($dialog.is(':visible')) {
1033       $dialog.dialog('close');
1034       return;
1035     }
de98a8 1036
b95a6d 1037     // do nothing if mailvelope editor is active
TB 1038     if (rcmail.mailvelope_editor)
1039       return;
1040
f5521a 1041     // add icons to clone file input field
354bf1 1042     if (rcmail.env.action == 'compose' && !$dialog.data('extended')) {
f5521a 1043       $('<a>')
T 1044         .addClass('iconlink add')
1045         .attr('href', '#add')
1046         .html('Add')
1047         .appendTo($('input[type="file"]', $dialog).parent())
1048         .click(add_uploadfile);
1049       $dialog.data('extended', true);
1050     }
74d4c7 1051
T 1052     $dialog.dialog({
1053       modal: true,
1054       resizable: false,
1055       closeOnEscape: true,
1056       title: $dialog.attr('title'),
ea0866 1057       open: function(e) {
TB 1058         if (!document.all)
1059           $('input[type=file]', $dialog).first().click();
1060       },
74d4c7 1061       close: function() {
T 1062         try { $('#upload-dialog form').get(0).reset(); }
1063         catch(e){ }  // ignore errors
1064
1065         $dialog.dialog('destroy').hide();
f5521a 1066         $('div.addline', $dialog).remove();
74d4c7 1067       },
T 1068       width: 480
1069     }).show();
1070   }
1071
f5521a 1072   function add_uploadfile(e)
T 1073   {
1074     var div = $(this).parent();
1075     var clone = div.clone().addClass('addline').insertAfter(div);
1076     clone.children('.iconlink').click(add_uploadfile);
1077     clone.children('input').val('');
1078
1079     if (!document.all)
1080       $('input[type=file]', clone).click();
1081   }
1082
1083
74d4c7 1084   /**
T 1085    *
1086    */
7961f8 1087   function show_header_row(which, updated)
74d4c7 1088   {
7961f8 1089     var row = $('#compose-' + which);
T 1090     if (row.is(':visible'))
1091       return;  // nothing to be done here
1092
1093     if (compose_headers[which] && !updated)
74d4c7 1094       $('#_' + which).val(compose_headers[which]);
7961f8 1095
T 1096     row.show();
74d4c7 1097     $('#' + which + '-link').hide();
a7343c 1098
68e13c 1099     layout_composeview();
a7343c 1100     $('input,textarea', row).focus();
AM 1101
74d4c7 1102     return false;
T 1103   }
1104
1105   /**
1106    *
1107    */
1108   function hide_header_row(which)
1109   {
1110     // copy and clear field value
1111     var field = $('#_' + which);
1112     compose_headers[which] = field.val();
1113     field.val('');
1114
1115     $('#compose-' + which).hide();
1116     $('#' + which + '-link').show();
68e13c 1117     layout_composeview();
T 1118     return false;
74d4c7 1119   }
bab043 1120
T 1121
1122   /**
1123    * Fieldsets-to-tabs converter
1124    */
1125   function init_tabs(elem, current)
1126   {
a4e71c 1127     var content = $(elem),
T 1128       id = content.get(0).id,
bab043 1129       fs = content.children('fieldset');
T 1130
1131     if (!fs.length)
1132       return;
1133
1134     if (!id) {
1135       id = 'rcmtabcontainer';
a4e71c 1136       content.attr('id', id);
bab043 1137     }
T 1138
1139     // create tabs container
5cf77e 1140     var tabs = $('<ul>').addClass('tabsbar').prependTo(content);
bab043 1141
T 1142     // convert fildsets into tabs
1143     fs.each(function(idx) {
5cf77e 1144       var tab, a, elm = $(this),
TB 1145         legend = elm.children('legend'),
1146         tid = id + '-t' + idx;
bab043 1147
T 1148       // create a tab
5cf77e 1149       a   = $('<a>').text(legend.text()).attr('href', '#' + tid);
TB 1150       tab = $('<li>').addClass('tablink');
bab043 1151
T 1152       // remove legend
1153       legend.remove();
5cf77e 1154
TB 1155       // link fieldset with tab item
1156       elm.attr('id', tid);
bab043 1157
T 1158       // add the tab to container
1159       tab.append(a).appendTo(tabs);
1160     });
1161
5cf77e 1162     // use jquery UI tabs widget to do the interaction and styling
TB 1163     content.tabs({
1164       active: current || 0,
1165       heightStyle: 'content',
1166       activate: function(e, ui) {resize(); }
bab043 1167     });
T 1168   }
68e13c 1169
T 1170   /**
1171    * Show about page as jquery UI dialog
1172    */
1173   function show_about(elem)
1174   {
63e498 1175     var frame = $('<iframe>').attr({id: 'aboutframe', src: rcmail.url('settings/about'), frameborder: '0'});
AM 1176       h = Math.floor($(window).height() * 0.75),
1177       buttons = {},
1178       supportln = $('#supportlink');
68e13c 1179
T 1180     if (supportln.length && (env.supporturl = supportln.attr('href')))
1181       buttons[supportln.html()] = function(e){ env.supporturl.indexOf('mailto:') < 0 ? window.open(env.supporturl) : location.href = env.supporturl };
1182
1183     frame.dialog({
1184       modal: true,
1185       resizable: false,
1186       closeOnEscape: true,
1187       title: elem ? elem.title || elem.innerHTML : null,
1188       close: function() {
1189         frame.dialog('destroy').remove();
1190       },
1191       buttons: buttons,
1192       width: 640,
1193       height: h
1194     }).width(640);
1195   }
c7dcb3 1196 }
T 1197
918bb9 1198
efaf2e 1199 /**
A 1200  * Roundcube Scroller class
c6447e 1201  *
AM 1202  * @deprecated Use treelist widget
efaf2e 1203  */
A 1204 function rcube_scroller(list, top, bottom)
1205 {
1206   var ref = this;
1207
1208   this.list = $(list);
1209   this.top = $(top);
1210   this.bottom = $(bottom);
1211   this.step_size = 6;
1212   this.step_time = 20;
1213   this.delay = 500;
1214
1215   this.top
f5aecf 1216     .mouseenter(function() { if (rcmail.drag_active) ref.ts = window.setTimeout(function() { ref.scroll('down'); }, ref.delay); })
efaf2e 1217     .mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });
A 1218
1219   this.bottom
f5aecf 1220     .mouseenter(function() { if (rcmail.drag_active) ref.ts = window.setTimeout(function() { ref.scroll('up'); }, ref.delay); })
efaf2e 1221     .mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); });
A 1222
1223   this.scroll = function(dir)
1224   {
1225     var ref = this, size = this.step_size;
1226
1227     if (!rcmail.drag_active)
1228       return;
1229
1230     if (dir == 'down')
1231       size *= -1;
1232
1233     this.list.get(0).scrollTop += size;
1234     this.ts = window.setTimeout(function() { ref.scroll(dir); }, this.step_time);
1235   };
1236 };
1237
918bb9 1238
T 1239 /**
a4e71c 1240  * Roundcube UI splitter class
918bb9 1241  *
T 1242  * @constructor
1243  */
1244 function rcube_splitter(p)
1245 {
1246   this.p = p;
1247   this.id = p.id;
1248   this.horizontal = (p.orientation == 'horizontal' || p.orientation == 'h');
1249   this.halfsize = (p.size !== undefined ? p.size : 10) / 2;
1250   this.pos = p.start || 0;
1251   this.min = p.min || 20;
1252   this.offset = p.offset || 0;
1253   this.relative = p.relative ? true : false;
1254   this.drag_active = false;
1255   this.render = p.render;
1256   this.callback = p.callback;
1257
1258   var me = this;
3a86e2 1259   rcube_splitter._instances[this.id] = me;
918bb9 1260
T 1261   this.init = function()
1262   {
1263     this.p1 = $(this.p.p1);
1264     this.p2 = $(this.p.p2);
4d6180 1265     this.parent = this.p1.parent();
918bb9 1266
a4e71c 1267     // check if referenced elements exist, otherwise abort
T 1268     if (!this.p1.length || !this.p2.length)
1269       return;
1270
918bb9 1271     // create and position the handle for this splitter
T 1272     this.p1pos = this.relative ? this.p1.position() : this.p1.offset();
1273     this.p2pos = this.relative ? this.p2.position() : this.p2.offset();
1274     this.handle = $('<div>')
1275       .attr('id', this.id)
1276       .attr('unselectable', 'on')
5cf77e 1277       .attr('role', 'presentation')
918bb9 1278       .addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v'))
4d6180 1279       .appendTo(this.parent)
d9ff47 1280       .mousedown(onDragStart);
918bb9 1281
T 1282     if (this.horizontal) {
1283       var top = this.p1pos.top + this.p1.outerHeight();
1284       this.handle.css({ left:'0px', top:top+'px' });
1285     }
1286     else {
1287       var left = this.p1pos.left + this.p1.outerWidth();
1288       this.handle.css({ left:left+'px', top:'0px' });
1289     }
1290
1291     // listen to window resize on IE
1292     if (bw.ie)
a4e71c 1293       $(window).resize(onResize);
918bb9 1294
T 1295     // read saved position from cookie
6d6725 1296     var cookie = this.get_cookie();
918bb9 1297     if (cookie && !isNaN(cookie)) {
T 1298       this.pos = parseFloat(cookie);
1299       this.resize();
1300     }
1301     else if (this.pos) {
1302       this.resize();
1303       this.set_cookie();
1304     }
1305   };
1306
1307   /**
1308    * Set size and position of all DOM objects
1309    * according to the saved splitter position
1310    */
1311   this.resize = function()
1312   {
1313     if (this.horizontal) {
13bbcd 1314       this.p1.css('height', Math.floor(this.pos - this.p1pos.top - Math.floor(this.halfsize)) + 'px');
TB 1315       this.p2.css('top', Math.ceil(this.pos + Math.ceil(this.halfsize) + 2) + 'px');
918bb9 1316       this.handle.css('top', Math.round(this.pos - this.halfsize + this.offset)+'px');
T 1317       if (bw.ie) {
4d6180 1318         var new_height = parseInt(this.parent.outerHeight(), 10) - parseInt(this.p2.css('top'), 10) - (bw.ie8 ? 2 : 0);
822a1e 1319         this.p2.css('height', (new_height > 0 ? new_height : 0) + 'px');
918bb9 1320       }
T 1321     }
1322     else {
13bbcd 1323       this.p1.css('width', Math.floor(this.pos - this.p1pos.left - Math.floor(this.halfsize)) + 'px');
TB 1324       this.p2.css('left', Math.ceil(this.pos + Math.ceil(this.halfsize)) + 'px');
918bb9 1325       this.handle.css('left', Math.round(this.pos - this.halfsize + this.offset + 3)+'px');
T 1326       if (bw.ie) {
4d6180 1327         var new_width = parseInt(this.parent.outerWidth(), 10) - parseInt(this.p2.css('left'), 10) ;
918bb9 1328         this.p2.css('width', (new_width > 0 ? new_width : 0) + 'px');
T 1329       }
1330     }
1331
1332     this.p2.resize();
1333     this.p1.resize();
1334
5fea6b 1335     // also resize iframe covers
T 1336     if (this.drag_active) {
1337       $('iframe').each(function(i, elem) {
1338         var pos = $(this).offset();
1339         $('#iframe-splitter-fix-'+i).css({ top: pos.top+'px', left: pos.left+'px', width:elem.offsetWidth+'px', height: elem.offsetHeight+'px' });
1340       });
1341     }
1342
918bb9 1343     if (typeof this.render == 'function')
T 1344       this.render(this);
1345   };
1346
1347   /**
1348    * Handler for mousedown events
1349    */
1350   function onDragStart(e)
1351   {
1352     // disable text selection while dragging the splitter
1353     if (bw.konq || bw.chrome || bw.safari)
1354       document.body.style.webkitUserSelect = 'none';
1355
1356     me.p1pos = me.relative ? me.p1.position() : me.p1.offset();
1357     me.p2pos = me.relative ? me.p2.position() : me.p2.offset();
1358     me.drag_active = true;
1359
1360     // start listening to mousemove events
d9ff47 1361     $(document).on('mousemove.' + this.id, onDrag).on('mouseup.' + this.id, onDragStop);
918bb9 1362
T 1363     // enable dragging above iframes
5fea6b 1364     $('iframe').each(function(i, elem) {
T 1365       $('<div>')
1366         .attr('id', 'iframe-splitter-fix-'+i)
1367         .addClass('iframe-splitter-fix')
918bb9 1368         .css({ background: '#fff',
5fea6b 1369           width: elem.offsetWidth+'px', height: elem.offsetHeight+'px',
918bb9 1370           position: 'absolute', opacity: '0.001', zIndex: 1000
T 1371         })
1372         .css($(this).offset())
1373         .appendTo('body');
1374       });
1375   };
1376
1377   /**
1378    * Handler for mousemove events
1379    */
1380   function onDrag(e)
1381   {
1382     if (!me.drag_active)
1383       return false;
1384
571c10 1385     // with timing events dragging action is more responsive
AM 1386     window.clearTimeout(me.ts);
1387     me.ts = window.setTimeout(function() { onDragAction(e); }, 1);
1388
1389     return false;
1390   };
1391
1392   /**
1393    * Dragging action (see onDrag())
1394    */
1395   function onDragAction(e)
1396   {
918bb9 1397     var pos = rcube_event.get_mouse_pos(e);
T 1398
1399     if (me.relative) {
4d6180 1400       var parent = me.parent.offset();
918bb9 1401       pos.x -= parent.left;
T 1402       pos.y -= parent.top;
1403     }
1404
1405     if (me.horizontal) {
1406       if (((pos.y - me.halfsize) > me.p1pos.top) && ((pos.y + me.halfsize) < (me.p2pos.top + me.p2.outerHeight()))) {
13bbcd 1407         me.pos = Math.max(me.min, pos.y - Math.max(0, me.offset));
4d6180 1408         if (me.pos > me.min)
AM 1409           me.pos = Math.min(me.pos, me.parent.height() - me.min);
1410
918bb9 1411         me.resize();
T 1412       }
1413     }
1414     else {
1415       if (((pos.x - me.halfsize) > me.p1pos.left) && ((pos.x + me.halfsize) < (me.p2pos.left + me.p2.outerWidth()))) {
13bbcd 1416         me.pos = Math.max(me.min, pos.x - Math.max(0, me.offset));
4d6180 1417         if (me.pos > me.min)
AM 1418           me.pos = Math.min(me.pos, me.parent.width() - me.min);
1419
918bb9 1420         me.resize();
T 1421       }
1422     }
1423
1424     me.p1pos = me.relative ? me.p1.position() : me.p1.offset();
1425     me.p2pos = me.relative ? me.p2.position() : me.p2.offset();
1426   };
1427
1428   /**
1429    * Handler for mouseup events
1430    */
1431   function onDragStop(e)
1432   {
1433     // resume the ability to highlight text
1434     if (bw.konq || bw.chrome || bw.safari)
1435       document.body.style.webkitUserSelect = 'auto';
1436
1437     // cancel the listening for drag events
d9ff47 1438     $(document).off('.' + me.id);
918bb9 1439     me.drag_active = false;
T 1440
1441     // remove temp divs
5fea6b 1442     $('div.iframe-splitter-fix').remove();
918bb9 1443
T 1444     me.set_cookie();
1445
1446     if (typeof me.callback == 'function')
1447       me.callback(me);
1448
1449     return bw.safari ? true : rcube_event.cancel(e);
1450   };
1451
1452   /**
1453    * Handler for window resize events
1454    */
1455   function onResize(e)
1456   {
1457     if (me.horizontal) {
4d6180 1458       var new_height = parseInt(me.parent.outerHeight(), 10) - parseInt(me.p2[0].style.top, 10) - (bw.ie8 ? 2 : 0);
918bb9 1459       me.p2.css('height', (new_height > 0 ? new_height : 0) +'px');
T 1460     }
1461     else {
4d6180 1462       var new_width = parseInt(me.parent.outerWidth(), 10) - parseInt(me.p2[0].style.left, 10);
918bb9 1463       me.p2.css('width', (new_width > 0 ? new_width : 0) + 'px');
T 1464     }
1465   };
1466
1467   /**
6d6725 1468    * Get saved splitter position from cookie
TB 1469    */
1470   this.get_cookie = function()
1471   {
1472     return window.UI ? UI.get_pref(this.id) : null;
1473   };
1474
1475   /**
918bb9 1476    * Saves splitter position in cookie
T 1477    */
1478   this.set_cookie = function()
1479   {
6d6725 1480     if (window.UI)
TB 1481       UI.save_pref(this.id, this.pos);
918bb9 1482   };
T 1483
1484 } // end class rcube_splitter
1485
1486
3a86e2 1487 // static getter for splitter instances
T 1488 rcube_splitter._instances = {};
1489
1490 rcube_splitter.get_instance = function(id)
1491 {
1492   return rcube_splitter._instances[id];
1493 };
b34d67 1494
731d19 1495 // @license-end