list.js 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836
  1. /**
  2. * Roundcube List Widget
  3. *
  4. * This file is part of the Roundcube Webmail client
  5. *
  6. * @licstart The following is the entire license notice for the
  7. * JavaScript code in this file.
  8. *
  9. * Copyright (c) 2005-2014, The Roundcube Dev Team
  10. *
  11. * The JavaScript code in this page is free software: you can
  12. * redistribute it and/or modify it under the terms of the GNU
  13. * General Public License (GNU GPL) as published by the Free Software
  14. * Foundation, either version 3 of the License, or (at your option)
  15. * any later version. The code is distributed WITHOUT ANY WARRANTY;
  16. * without even the implied warranty of MERCHANTABILITY or FITNESS
  17. * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
  18. *
  19. * As additional permission under GNU GPL version 3 section 7, you
  20. * may distribute non-source (e.g., minimized or compacted) forms of
  21. * that code without the copy of the GNU GPL normally required by
  22. * section 4, provided you include this license notice and a URL
  23. * through which recipients can access the Corresponding Source.
  24. *
  25. * @licend The above is the entire license notice
  26. * for the JavaScript code in this file.
  27. *
  28. * @author Thomas Bruederli <roundcube@gmail.com>
  29. * @author Charles McNulty <charles@charlesmcnulty.com>
  30. *
  31. * @requires jquery.js, common.js
  32. */
  33. /**
  34. * Roundcube List Widget class
  35. * @constructor
  36. */
  37. function rcube_list_widget(list, p)
  38. {
  39. // static contants
  40. this.ENTER_KEY = 13;
  41. this.DELETE_KEY = 46;
  42. this.BACKSPACE_KEY = 8;
  43. this.list = list ? list : null;
  44. this.tagname = this.list ? this.list.nodeName.toLowerCase() : 'table';
  45. this.id_regexp = /^rcmrow([a-z0-9\-_=\+\/]+)/i;
  46. this.rows = {};
  47. this.selection = [];
  48. this.rowcount = 0;
  49. this.colcount = 0;
  50. this.subject_col = 0;
  51. this.modkey = 0;
  52. this.multiselect = false;
  53. this.multiexpand = false;
  54. this.multi_selecting = false;
  55. this.draggable = false;
  56. this.column_movable = false;
  57. this.keyboard = false;
  58. this.toggleselect = false;
  59. this.aria_listbox = false;
  60. this.parent_focus = true;
  61. this.drag_active = false;
  62. this.col_drag_active = false;
  63. this.column_fixed = null;
  64. this.last_selected = null;
  65. this.shift_start = null;
  66. this.focused = false;
  67. this.drag_mouse_start = null;
  68. this.dblclick_time = 500; // default value on MS Windows is 500
  69. this.row_init = function(){}; // @deprecated; use list.addEventListener('initrow') instead
  70. // overwrite default paramaters
  71. if (p && typeof p === 'object')
  72. for (var n in p)
  73. this[n] = p[n];
  74. // register this instance
  75. rcube_list_widget._instances.push(this);
  76. };
  77. rcube_list_widget.prototype = {
  78. /**
  79. * get all message rows from HTML table and init each row
  80. */
  81. init: function()
  82. {
  83. if (this.tagname == 'table' && this.list && this.list.tBodies[0]) {
  84. this.thead = this.list.tHead;
  85. this.tbody = this.list.tBodies[0];
  86. }
  87. else if (this.tagname != 'table' && this.list) {
  88. this.tbody = this.list;
  89. }
  90. if ($(this.list).attr('role') == 'listbox') {
  91. this.aria_listbox = true;
  92. if (this.multiselect)
  93. $(this.list).attr('aria-multiselectable', 'true');
  94. }
  95. var me = this;
  96. if (this.tbody) {
  97. this.rows = {};
  98. this.rowcount = 0;
  99. var r, len, rows = this.tbody.childNodes;
  100. for (r=0, len=rows.length; r<len; r++) {
  101. if (rows[r].nodeType == 1)
  102. this.rowcount += this.init_row(rows[r]) ? 1 : 0;
  103. }
  104. this.init_header();
  105. this.frame = this.list.parentNode;
  106. // set body events
  107. if (this.keyboard) {
  108. rcube_event.add_listener({event:'keydown', object:this, method:'key_press'});
  109. // allow the table element to receive focus.
  110. $(this.list).attr('tabindex', '0')
  111. .on('focus', function(e) { me.focus(e); });
  112. }
  113. }
  114. if (this.parent_focus) {
  115. this.list.parentNode.onclick = function(e) { me.focus(); };
  116. }
  117. return this;
  118. },
  119. /**
  120. * Init list row and set mouse events on it
  121. */
  122. init_row: function(row)
  123. {
  124. row.uid = this.get_row_uid(row);
  125. // make references in internal array and set event handlers
  126. if (row && row.uid) {
  127. var self = this, uid = row.uid;
  128. this.rows[uid] = {uid:uid, id:row.id, obj:row};
  129. $(row).data('uid', uid)
  130. // set eventhandlers to table row (only left-button-clicks in mouseup)
  131. .mousedown(function(e) { return self.drag_row(e, this.uid); })
  132. .mouseup(function(e) {
  133. if (e.which == 1 && !self.drag_active)
  134. return self.click_row(e, this.uid);
  135. else
  136. return true;
  137. });
  138. if (bw.touch && row.addEventListener) {
  139. row.addEventListener('touchstart', function(e) {
  140. if (e.touches.length == 1) {
  141. self.touchmoved = false;
  142. self.drag_row(rcube_event.touchevent(e.touches[0]), this.uid)
  143. }
  144. }, false);
  145. row.addEventListener('touchend', function(e) {
  146. if (e.changedTouches.length == 1) {
  147. if (!self.touchmoved && !self.click_row(rcube_event.touchevent(e.changedTouches[0]), this.uid))
  148. e.preventDefault();
  149. }
  150. }, false);
  151. row.addEventListener('touchmove', function(e) {
  152. if (e.changedTouches.length == 1) {
  153. self.touchmoved = true;
  154. if (self.drag_active)
  155. e.preventDefault();
  156. }
  157. }, false);
  158. }
  159. // label the list row with the subject col as descriptive label
  160. if (this.aria_listbox) {
  161. var lbl_id = 'l:' + row.id;
  162. $(row)
  163. .attr('role', 'option')
  164. .attr('aria-labelledby', lbl_id)
  165. .find(this.col_tagname()).eq(this.subject_col).attr('id', lbl_id);
  166. }
  167. if (document.all)
  168. row.onselectstart = function() { return false; };
  169. this.row_init(this.rows[uid]); // legacy support
  170. this.triggerEvent('initrow', this.rows[uid]);
  171. return true;
  172. }
  173. },
  174. /**
  175. * Init list column headers and set mouse events on them
  176. */
  177. init_header: function()
  178. {
  179. if (this.thead) {
  180. this.colcount = 0;
  181. if (this.fixed_header) { // copy (modified) fixed header back to the actual table
  182. $(this.list.tHead).replaceWith($(this.fixed_header).find('thead').clone());
  183. $(this.list.tHead).find('th,td').attr('style', '').find('a').attr('tabindex', '-1'); // remove fixed widths
  184. }
  185. else if (!bw.touch && this.list.className.indexOf('fixedheader') >= 0) {
  186. this.init_fixed_header();
  187. }
  188. var col, r, p = this;
  189. // add events for list columns moving
  190. if (this.column_movable && this.thead && this.thead.rows) {
  191. for (r=0; r<this.thead.rows[0].cells.length; r++) {
  192. if (this.column_fixed == r)
  193. continue;
  194. col = this.thead.rows[0].cells[r];
  195. col.onmousedown = function(e) { return p.drag_column(e, this); };
  196. this.colcount++;
  197. }
  198. }
  199. }
  200. },
  201. init_fixed_header: function()
  202. {
  203. var clone = $(this.list.tHead).clone();
  204. if (!this.fixed_header) {
  205. this.fixed_header = $('<table>')
  206. .attr('class', this.list.className + ' fixedcopy')
  207. .attr('role', 'presentation')
  208. .css({ position:'fixed' })
  209. .append(clone)
  210. .append('<tbody></tbody>');
  211. $(this.list).before(this.fixed_header);
  212. var me = this;
  213. $(window).resize(function() { me.resize(); });
  214. $(window).scroll(function() {
  215. var w = $(window);
  216. me.fixed_header.css({
  217. marginLeft: -w.scrollLeft() + 'px',
  218. marginTop: -w.scrollTop() + 'px'
  219. });
  220. });
  221. }
  222. else {
  223. $(this.fixed_header).find('thead').replaceWith(clone);
  224. }
  225. // avoid scrolling header links being focused
  226. $(this.list.tHead).find('a.sortcol').attr('tabindex', '-1');
  227. // set tabindex to fixed header sort links
  228. clone.find('a.sortcol').attr('tabindex', '0');
  229. this.thead = clone.get(0);
  230. this.resize();
  231. },
  232. resize: function()
  233. {
  234. if (!this.fixed_header)
  235. return;
  236. var column_widths = [];
  237. // get column widths from original thead
  238. $(this.tbody).parent().find('thead th,thead td').each(function(index) {
  239. column_widths[index] = $(this).width();
  240. });
  241. // apply fixed widths to fixed table header
  242. $(this.thead).parent().width($(this.tbody).parent().width());
  243. $(this.thead).find('th,td').each(function(index) {
  244. $(this).width(column_widths[index]);
  245. });
  246. $(window).scroll();
  247. },
  248. /**
  249. * Remove all list rows
  250. */
  251. clear: function(sel)
  252. {
  253. if (this.tagname == 'table') {
  254. var tbody = document.createElement('tbody');
  255. this.list.insertBefore(tbody, this.tbody);
  256. this.list.removeChild(this.list.tBodies[1]);
  257. this.tbody = tbody;
  258. }
  259. else {
  260. $(this.row_tagname() + ':not(.thead)', this.tbody).remove();
  261. }
  262. this.rows = {};
  263. this.rowcount = 0;
  264. this.last_selected = null;
  265. if (sel)
  266. this.clear_selection();
  267. // reset scroll position (in Opera)
  268. if (this.frame)
  269. this.frame.scrollTop = 0;
  270. // fix list header after removing any rows
  271. this.resize();
  272. },
  273. /**
  274. * 'remove' message row from list (just hide it)
  275. */
  276. remove_row: function(uid, sel_next)
  277. {
  278. var self = this, node = this.rows[uid] ? this.rows[uid].obj : null;
  279. if (!node)
  280. return;
  281. node.style.display = 'none';
  282. if (sel_next)
  283. this.select_next();
  284. delete this.rows[uid];
  285. this.rowcount--;
  286. // fix list header after removing any rows
  287. clearTimeout(this.resize_timeout)
  288. this.resize_timeout = setTimeout(function() { self.resize(); }, 50);
  289. },
  290. /**
  291. * Add row to the list and initialize it
  292. */
  293. insert_row: function(row, before)
  294. {
  295. var self = this, tbody = this.tbody;
  296. // create a real dom node first
  297. if (row.nodeName === undefined) {
  298. // for performance reasons use DOM instead of jQuery here
  299. var i, e, domcell, col,
  300. domrow = document.createElement(this.row_tagname());
  301. if (row.id) domrow.id = row.id;
  302. if (row.uid) domrow.uid = row.uid;
  303. if (row.className) domrow.className = row.className;
  304. if (row.style) $.extend(domrow.style, row.style);
  305. for (i=0; row.cols && i < row.cols.length; i++) {
  306. col = row.cols[i];
  307. domcell = col.dom;
  308. if (!domcell) {
  309. domcell = document.createElement(this.col_tagname());
  310. if (col.className) domcell.className = col.className;
  311. if (col.innerHTML) domcell.innerHTML = col.innerHTML;
  312. for (e in col.events)
  313. domcell['on' + e] = col.events[e];
  314. }
  315. domrow.appendChild(domcell);
  316. }
  317. row = domrow;
  318. }
  319. if (before && tbody.childNodes.length)
  320. tbody.insertBefore(row, (typeof before == 'object' && before.parentNode == tbody) ? before : tbody.firstChild);
  321. else
  322. tbody.appendChild(row);
  323. this.init_row(row);
  324. this.rowcount++;
  325. // fix list header after adding any rows
  326. clearTimeout(this.resize_timeout)
  327. this.resize_timeout = setTimeout(function() { self.resize(); }, 50);
  328. },
  329. /**
  330. *
  331. */
  332. update_row: function(id, cols, newid, select)
  333. {
  334. var row = this.rows[id];
  335. if (!row) return false;
  336. var i, domrow = row.obj;
  337. for (i = 0; cols && i < cols.length; i++) {
  338. this.get_cell(domrow, i).html(cols[i]);
  339. }
  340. if (newid) {
  341. delete this.rows[id];
  342. domrow.uid = newid;
  343. domrow.id = 'rcmrow' + newid;
  344. this.init_row(domrow);
  345. if (select)
  346. this.selection[0] = newid;
  347. if (this.last_selected == id)
  348. this.last_selected = newid;
  349. }
  350. },
  351. /**
  352. * Set focus to the list
  353. */
  354. focus: function(e)
  355. {
  356. if (this.focused)
  357. return;
  358. this.focused = true;
  359. if (e)
  360. rcube_event.cancel(e);
  361. var focus_elem = null;
  362. if (this.last_selected && this.rows[this.last_selected]) {
  363. focus_elem = $(this.rows[this.last_selected].obj).find(this.col_tagname()).eq(this.subject_col).attr('tabindex', '0');
  364. }
  365. // Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620)
  366. if (focus_elem && focus_elem.length) {
  367. // We now fix this by explicitly assigning focus to a dedicated link element
  368. this.focus_noscroll(focus_elem);
  369. }
  370. else {
  371. // It looks that window.focus() does the job for all browsers, but not Firefox (#1489058)
  372. $('iframe,:focus:not(body)').blur();
  373. window.focus();
  374. }
  375. $(this.list).addClass('focus').removeAttr('tabindex');
  376. // set internal focus pointer to first row
  377. if (!this.last_selected)
  378. this.select_first(CONTROL_KEY);
  379. },
  380. /**
  381. * remove focus from the list
  382. */
  383. blur: function(e)
  384. {
  385. this.focused = false;
  386. // avoid the table getting focus right again (on Shift+Tab)
  387. var me = this;
  388. setTimeout(function() { $(me.list).attr('tabindex', '0'); }, 20);
  389. if (this.last_selected && this.rows[this.last_selected]) {
  390. $(this.rows[this.last_selected].obj)
  391. .find(this.col_tagname()).eq(this.subject_col).removeAttr('tabindex');
  392. }
  393. $(this.list).removeClass('focus');
  394. },
  395. /**
  396. * Focus the given element without scrolling the list container
  397. */
  398. focus_noscroll: function(elem)
  399. {
  400. var y = this.frame.scrollTop || this.frame.scrollY;
  401. elem.focus();
  402. this.frame.scrollTop = y;
  403. },
  404. /**
  405. * Set/unset the given column as hidden
  406. */
  407. hide_column: function(col, hide)
  408. {
  409. var method = hide ? 'addClass' : 'removeClass';
  410. if (this.fixed_header)
  411. $(this.row_tagname()+' '+this.col_tagname()+'.'+col, this.fixed_header)[method]('hidden');
  412. $(this.row_tagname()+' '+this.col_tagname()+'.'+col, this.list)[method]('hidden');
  413. },
  414. /**
  415. * onmousedown-handler of message list column
  416. */
  417. drag_column: function(e, col)
  418. {
  419. if (this.colcount > 1) {
  420. this.drag_start = true;
  421. this.drag_mouse_start = rcube_event.get_mouse_pos(e);
  422. rcube_event.add_listener({event:'mousemove', object:this, method:'column_drag_mouse_move'});
  423. rcube_event.add_listener({event:'mouseup', object:this, method:'column_drag_mouse_up'});
  424. // enable dragging over iframes
  425. this.add_dragfix();
  426. // find selected column number
  427. for (var i=0; i<this.thead.rows[0].cells.length; i++) {
  428. if (col == this.thead.rows[0].cells[i]) {
  429. this.selected_column = i;
  430. break;
  431. }
  432. }
  433. }
  434. return false;
  435. },
  436. /**
  437. * onmousedown-handler of message list row
  438. */
  439. drag_row: function(e, id)
  440. {
  441. // don't do anything (another action processed before)
  442. if (!this.is_event_target(e))
  443. return true;
  444. // accept right-clicks
  445. if (rcube_event.get_button(e) == 2)
  446. return true;
  447. this.in_selection_before = e && e.istouch || this.in_selection(id) ? id : false;
  448. // selects currently unselected row
  449. if (!this.in_selection_before) {
  450. var mod_key = rcube_event.get_modifier(e);
  451. this.select_row(id, mod_key, true);
  452. }
  453. if (this.draggable && this.selection.length && this.in_selection(id)) {
  454. this.drag_start = true;
  455. this.drag_mouse_start = rcube_event.get_mouse_pos(e);
  456. rcube_event.add_listener({event:'mousemove', object:this, method:'drag_mouse_move'});
  457. rcube_event.add_listener({event:'mouseup', object:this, method:'drag_mouse_up'});
  458. if (bw.touch) {
  459. rcube_event.add_listener({event:'touchmove', object:this, method:'drag_mouse_move'});
  460. rcube_event.add_listener({event:'touchend', object:this, method:'drag_mouse_up'});
  461. }
  462. // enable dragging over iframes
  463. this.add_dragfix();
  464. }
  465. return false;
  466. },
  467. /**
  468. * onmouseup-handler of message list row
  469. */
  470. click_row: function(e, id)
  471. {
  472. // sanity check
  473. if (!id || !this.rows[id])
  474. return false;
  475. // don't do anything (another action processed before)
  476. if (!this.is_event_target(e))
  477. return true;
  478. var now = new Date().getTime(),
  479. dblclicked = now - this.rows[id].clicked < this.dblclick_time;
  480. // unselects currently selected row
  481. if (!this.drag_active && !dblclicked && this.in_selection_before == id)
  482. this.select_row(id, rcube_event.get_modifier(e), true);
  483. this.drag_start = false;
  484. this.in_selection_before = false;
  485. // row was double clicked
  486. if (this.rowcount && dblclicked && this.in_selection(id)) {
  487. this.triggerEvent('dblclick');
  488. now = 0;
  489. }
  490. else
  491. this.triggerEvent('click');
  492. if (!this.drag_active) {
  493. // remove temp divs
  494. this.del_dragfix();
  495. rcube_event.cancel(e);
  496. }
  497. this.rows[id].clicked = now;
  498. this.focus();
  499. return false;
  500. },
  501. /**
  502. * Check target of the current event
  503. */
  504. is_event_target: function(e)
  505. {
  506. var target = rcube_event.get_target(e),
  507. tagname = target.tagName.toLowerCase();
  508. return !(target && (tagname == 'input' || tagname == 'img' || (tagname != 'a' && target.onclick)));
  509. },
  510. /*
  511. * Returns thread root ID for specified row ID
  512. */
  513. find_root: function(uid)
  514. {
  515. var r = this.rows[uid];
  516. if (r && r.parent_uid)
  517. return this.find_root(r.parent_uid);
  518. else
  519. return uid;
  520. },
  521. expand_row: function(e, id)
  522. {
  523. var row = this.rows[id],
  524. evtarget = rcube_event.get_target(e),
  525. mod_key = rcube_event.get_modifier(e);
  526. // Don't treat double click on the expando as double click on the message.
  527. row.clicked = 0;
  528. if (row.expanded) {
  529. evtarget.className = 'collapsed';
  530. if (mod_key == CONTROL_KEY || this.multiexpand)
  531. this.collapse_all(row);
  532. else
  533. this.collapse(row);
  534. }
  535. else {
  536. evtarget.className = 'expanded';
  537. if (mod_key == CONTROL_KEY || this.multiexpand)
  538. this.expand_all(row);
  539. else
  540. this.expand(row);
  541. }
  542. },
  543. collapse: function(row)
  544. {
  545. var r, depth = row.depth,
  546. new_row = row ? row.obj.nextSibling : null;
  547. row.expanded = false;
  548. this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj });
  549. while (new_row) {
  550. if (new_row.nodeType == 1) {
  551. r = this.rows[new_row.uid];
  552. if (r && r.depth <= depth)
  553. break;
  554. $(new_row).css('display', 'none');
  555. if (r.expanded) {
  556. r.expanded = false;
  557. this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row });
  558. }
  559. }
  560. new_row = new_row.nextSibling;
  561. }
  562. this.resize();
  563. this.triggerEvent('listupdate');
  564. return false;
  565. },
  566. expand: function(row)
  567. {
  568. var r, p, depth, new_row, last_expanded_parent_depth;
  569. if (row) {
  570. row.expanded = true;
  571. depth = row.depth;
  572. new_row = row.obj.nextSibling;
  573. this.update_expando(row.id, true);
  574. this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj });
  575. }
  576. else {
  577. var tbody = this.tbody;
  578. new_row = tbody.firstChild;
  579. depth = 0;
  580. last_expanded_parent_depth = 0;
  581. }
  582. while (new_row) {
  583. if (new_row.nodeType == 1) {
  584. r = this.rows[new_row.uid];
  585. if (r) {
  586. if (row && (!r.depth || r.depth <= depth))
  587. break;
  588. if (r.parent_uid) {
  589. p = this.rows[r.parent_uid];
  590. if (p && p.expanded) {
  591. if ((row && p == row) || last_expanded_parent_depth >= p.depth - 1) {
  592. last_expanded_parent_depth = p.depth;
  593. $(new_row).css('display', '');
  594. r.expanded = true;
  595. this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row });
  596. }
  597. }
  598. else
  599. if (row && (! p || p.depth <= depth))
  600. break;
  601. }
  602. }
  603. }
  604. new_row = new_row.nextSibling;
  605. }
  606. this.resize();
  607. this.triggerEvent('listupdate');
  608. return false;
  609. },
  610. collapse_all: function(row)
  611. {
  612. var depth, new_row, r;
  613. if (row) {
  614. row.expanded = false;
  615. depth = row.depth;
  616. new_row = row.obj.nextSibling;
  617. this.update_expando(row.id);
  618. this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj });
  619. // don't collapse sub-root tree in multiexpand mode
  620. if (depth && this.multiexpand)
  621. return false;
  622. }
  623. else {
  624. new_row = this.tbody.firstChild;
  625. depth = 0;
  626. }
  627. while (new_row) {
  628. if (new_row.nodeType == 1) {
  629. if (r = this.rows[new_row.uid]) {
  630. if (row && (!r.depth || r.depth <= depth))
  631. break;
  632. if (row || r.depth)
  633. $(new_row).css('display', 'none');
  634. if (r.has_children && r.expanded) {
  635. r.expanded = false;
  636. this.update_expando(r.id, false);
  637. this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row });
  638. }
  639. }
  640. }
  641. new_row = new_row.nextSibling;
  642. }
  643. this.resize();
  644. this.triggerEvent('listupdate');
  645. return false;
  646. },
  647. expand_all: function(row)
  648. {
  649. var depth, new_row, r;
  650. if (row) {
  651. row.expanded = true;
  652. depth = row.depth;
  653. new_row = row.obj.nextSibling;
  654. this.update_expando(row.id, true);
  655. this.triggerEvent('expandcollapse', { uid:row.uid, expanded:row.expanded, obj:row.obj });
  656. }
  657. else {
  658. new_row = this.tbody.firstChild;
  659. depth = 0;
  660. }
  661. while (new_row) {
  662. if (new_row.nodeType == 1) {
  663. if (r = this.rows[new_row.uid]) {
  664. if (row && r.depth <= depth)
  665. break;
  666. $(new_row).css('display', '');
  667. if (r.has_children && !r.expanded) {
  668. r.expanded = true;
  669. this.update_expando(r.id, true);
  670. this.triggerEvent('expandcollapse', { uid:r.uid, expanded:r.expanded, obj:new_row });
  671. }
  672. }
  673. }
  674. new_row = new_row.nextSibling;
  675. }
  676. this.resize();
  677. this.triggerEvent('listupdate');
  678. return false;
  679. },
  680. update_expando: function(id, expanded)
  681. {
  682. var expando = document.getElementById('rcmexpando' + id);
  683. if (expando)
  684. expando.className = expanded ? 'expanded' : 'collapsed';
  685. },
  686. get_row_uid: function(row)
  687. {
  688. if (!row)
  689. return;
  690. if (!row.uid) {
  691. var uid = $(row).data('uid');
  692. if (uid)
  693. row.uid = uid;
  694. else if (String(row.id).match(this.id_regexp))
  695. row.uid = RegExp.$1;
  696. }
  697. return row.uid;
  698. },
  699. /**
  700. * get first/next/previous/last rows that are not hidden
  701. */
  702. get_next_row: function()
  703. {
  704. if (!this.rowcount)
  705. return false;
  706. var last_selected_row = this.rows[this.last_selected],
  707. new_row = last_selected_row ? last_selected_row.obj.nextSibling : null;
  708. while (new_row && (new_row.nodeType != 1 || new_row.style.display == 'none'))
  709. new_row = new_row.nextSibling;
  710. return new_row;
  711. },
  712. get_prev_row: function()
  713. {
  714. if (!this.rowcount)
  715. return false;
  716. var last_selected_row = this.rows[this.last_selected],
  717. new_row = last_selected_row ? last_selected_row.obj.previousSibling : null;
  718. while (new_row && (new_row.nodeType != 1 || new_row.style.display == 'none'))
  719. new_row = new_row.previousSibling;
  720. return new_row;
  721. },
  722. get_first_row: function()
  723. {
  724. if (this.rowcount) {
  725. var i, uid, rows = this.tbody.childNodes;
  726. for (i=0; i<rows.length; i++)
  727. if (rows[i].id && (uid = this.get_row_uid(rows[i])))
  728. return uid;
  729. }
  730. return null;
  731. },
  732. get_last_row: function()
  733. {
  734. if (this.rowcount) {
  735. var i, uid, rows = this.tbody.childNodes;
  736. for (i=rows.length-1; i>=0; i--)
  737. if (rows[i].id && (uid = this.get_row_uid(rows[i])))
  738. return uid;
  739. }
  740. return null;
  741. },
  742. row_tagname: function()
  743. {
  744. var row_tagnames = { table:'tr', ul:'li', '*':'div' };
  745. return row_tagnames[this.tagname] || row_tagnames['*'];
  746. },
  747. col_tagname: function()
  748. {
  749. var col_tagnames = { table:'td', '*':'span' };
  750. return col_tagnames[this.tagname] || col_tagnames['*'];
  751. },
  752. get_cell: function(row, index)
  753. {
  754. return $(this.col_tagname(), row).eq(index);
  755. },
  756. /**
  757. * selects or unselects the proper row depending on the modifier key pressed
  758. */
  759. select_row: function(id, mod_key, with_mouse)
  760. {
  761. var select_before = this.selection.join(','),
  762. in_selection_before = this.in_selection(id);
  763. if (!this.multiselect && with_mouse)
  764. mod_key = 0;
  765. if (!this.shift_start)
  766. this.shift_start = id
  767. if (!mod_key) {
  768. this.shift_start = id;
  769. this.highlight_row(id, false);
  770. this.multi_selecting = false;
  771. }
  772. else {
  773. switch (mod_key) {
  774. case SHIFT_KEY:
  775. this.shift_select(id, false);
  776. break;
  777. case CONTROL_KEY:
  778. if (with_mouse) {
  779. this.shift_start = id;
  780. this.highlight_row(id, true);
  781. }
  782. break;
  783. case CONTROL_SHIFT_KEY:
  784. this.shift_select(id, true);
  785. break;
  786. default:
  787. this.highlight_row(id, false);
  788. break;
  789. }
  790. this.multi_selecting = true;
  791. }
  792. if (this.last_selected && this.rows[this.last_selected]) {
  793. $(this.rows[this.last_selected].obj).removeClass('focused')
  794. .find(this.col_tagname()).eq(this.subject_col).removeAttr('tabindex');
  795. }
  796. // unselect if toggleselect is active and the same row was clicked again
  797. if (this.toggleselect && in_selection_before && !mod_key) {
  798. this.clear_selection();
  799. }
  800. // trigger event if selection changed
  801. else if (this.selection.join(',') != select_before) {
  802. this.triggerEvent('select');
  803. }
  804. if (this.rows[id]) {
  805. $(this.rows[id].obj).addClass('focused');
  806. // set cursor focus to link inside selected row
  807. if (this.focused)
  808. this.focus_noscroll($(this.rows[id].obj).find(this.col_tagname()).eq(this.subject_col).attr('tabindex', '0'));
  809. }
  810. if (!this.selection.length)
  811. this.shift_start = null;
  812. this.last_selected = id;
  813. },
  814. /**
  815. * Alias method for select_row
  816. */
  817. select: function(id)
  818. {
  819. this.select_row(id, false);
  820. this.scrollto(id);
  821. },
  822. /**
  823. * Select row next to the last selected one.
  824. * Either below or above.
  825. */
  826. select_next: function()
  827. {
  828. var next_row = this.get_next_row(),
  829. prev_row = this.get_prev_row(),
  830. new_row = (next_row) ? next_row : prev_row;
  831. if (new_row)
  832. this.select_row(new_row.uid, false, false);
  833. },
  834. /**
  835. * Select first row
  836. */
  837. select_first: function(mod_key)
  838. {
  839. var row = this.get_first_row();
  840. if (row) {
  841. this.select_row(row, mod_key, false);
  842. this.scrollto(row);
  843. }
  844. },
  845. /**
  846. * Select last row
  847. */
  848. select_last: function(mod_key)
  849. {
  850. var row = this.get_last_row();
  851. if (row) {
  852. this.select_row(row, mod_key, false);
  853. this.scrollto(row);
  854. }
  855. },
  856. /**
  857. * Add all childs of the given row to selection
  858. */
  859. select_children: function(uid)
  860. {
  861. var i, children = this.row_children(uid), len = children.length;
  862. for (i=0; i<len; i++)
  863. if (!this.in_selection(children[i]))
  864. this.select_row(children[i], CONTROL_KEY, true);
  865. },
  866. /**
  867. * Perform selection when shift key is pressed
  868. */
  869. shift_select: function(id, control)
  870. {
  871. if (!this.rows[this.shift_start] || !this.selection.length)
  872. this.shift_start = id;
  873. var n, i, j, to_row = this.rows[id],
  874. from_rowIndex = this._rowIndex(this.rows[this.shift_start].obj),
  875. to_rowIndex = this._rowIndex(to_row.obj);
  876. // if we're going down the list, and we hit a thread, and it's closed, select the whole thread
  877. if (from_rowIndex < to_rowIndex && !to_row.expanded && to_row.has_children)
  878. if (to_row = this.rows[(this.row_children(id)).pop()])
  879. to_rowIndex = this._rowIndex(to_row.obj);
  880. i = ((from_rowIndex < to_rowIndex) ? from_rowIndex : to_rowIndex),
  881. j = ((from_rowIndex > to_rowIndex) ? from_rowIndex : to_rowIndex);
  882. // iterate through the entire message list
  883. for (n in this.rows) {
  884. if (this._rowIndex(this.rows[n].obj) >= i && this._rowIndex(this.rows[n].obj) <= j) {
  885. if (!this.in_selection(n)) {
  886. this.highlight_row(n, true);
  887. }
  888. }
  889. else {
  890. if (this.in_selection(n) && !control) {
  891. this.highlight_row(n, true);
  892. }
  893. }
  894. }
  895. },
  896. /**
  897. * Helper method to emulate the rowIndex property of non-tr elements
  898. */
  899. _rowIndex: function(obj)
  900. {
  901. return (obj.rowIndex !== undefined) ? obj.rowIndex : $(obj).prevAll().length;
  902. },
  903. /**
  904. * Check if given id is part of the current selection
  905. */
  906. in_selection: function(id, index)
  907. {
  908. for (var n in this.selection)
  909. if (this.selection[n] == id)
  910. return index ? parseInt(n) : true;
  911. return false;
  912. },
  913. /**
  914. * Select each row in list
  915. */
  916. select_all: function(filter)
  917. {
  918. if (!this.rowcount)
  919. return false;
  920. // reset but remember selection first
  921. var n, select_before = this.selection.join(',');
  922. this.selection = [];
  923. for (n in this.rows) {
  924. if (!filter || this.rows[n][filter] == true) {
  925. this.last_selected = n;
  926. this.highlight_row(n, true, true);
  927. }
  928. else {
  929. $(this.rows[n].obj).removeClass('selected').removeAttr('aria-selected');
  930. }
  931. }
  932. // trigger event if selection changed
  933. if (this.selection.join(',') != select_before)
  934. this.triggerEvent('select');
  935. this.focus();
  936. return true;
  937. },
  938. /**
  939. * Invert selection
  940. */
  941. invert_selection: function()
  942. {
  943. if (!this.rowcount)
  944. return false;
  945. // remember old selection
  946. var n, select_before = this.selection.join(',');
  947. for (n in this.rows)
  948. this.highlight_row(n, true);
  949. // trigger event if selection changed
  950. if (this.selection.join(',') != select_before)
  951. this.triggerEvent('select');
  952. this.focus();
  953. return true;
  954. },
  955. /**
  956. * Unselect selected row(s)
  957. */
  958. clear_selection: function(id, no_event)
  959. {
  960. var n, num_select = this.selection.length;
  961. // one row
  962. if (id) {
  963. for (n in this.selection)
  964. if (this.selection[n] == id) {
  965. this.selection.splice(n,1);
  966. break;
  967. }
  968. }
  969. // all rows
  970. else {
  971. for (n in this.selection)
  972. if (this.rows[this.selection[n]]) {
  973. $(this.rows[this.selection[n]].obj).removeClass('selected').removeAttr('aria-selected');
  974. }
  975. this.selection = [];
  976. }
  977. if (num_select && !this.selection.length && !no_event) {
  978. this.triggerEvent('select');
  979. this.last_selected = null;
  980. }
  981. },
  982. /**
  983. * Getter for the selection array
  984. */
  985. get_selection: function(deep)
  986. {
  987. var res = $.merge([], this.selection);
  988. // return children of selected threads even if only root is selected
  989. if (deep !== false && res.length) {
  990. for (var uid, uids, i=0, len=res.length; i<len; i++) {
  991. uid = res[i];
  992. if (this.rows[uid] && this.rows[uid].has_children && !this.rows[uid].expanded) {
  993. uids = this.row_children(uid);
  994. for (var j=0, uids_len=uids.length; j<uids_len; j++) {
  995. uid = uids[j];
  996. if (!this.in_selection(uid))
  997. res.push(uid);
  998. }
  999. }
  1000. }
  1001. }
  1002. return res;
  1003. },
  1004. /**
  1005. * Return the ID if only one row is selected
  1006. */
  1007. get_single_selection: function()
  1008. {
  1009. if (this.selection.length == 1)
  1010. return this.selection[0];
  1011. else
  1012. return null;
  1013. },
  1014. /**
  1015. * Highlight/unhighlight a row
  1016. */
  1017. highlight_row: function(id, multiple, norecur)
  1018. {
  1019. if (!this.rows[id])
  1020. return;
  1021. if (!multiple) {
  1022. if (this.selection.length > 1 || !this.in_selection(id)) {
  1023. this.clear_selection(null, true);
  1024. this.selection[0] = id;
  1025. $(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true');
  1026. }
  1027. }
  1028. else {
  1029. var pre, post, p = this.in_selection(id, true);
  1030. if (p === false) { // select row
  1031. this.selection.push(id);
  1032. $(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true');
  1033. if (!norecur && !this.rows[id].expanded)
  1034. this.highlight_children(id, true);
  1035. }
  1036. else { // unselect row
  1037. pre = this.selection.slice(0, p);
  1038. post = this.selection.slice(p+1, this.selection.length);
  1039. this.selection = pre.concat(post);
  1040. $(this.rows[id].obj).removeClass('selected').removeAttr('aria-selected');
  1041. if (!norecur && !this.rows[id].expanded)
  1042. this.highlight_children(id, false);
  1043. }
  1044. }
  1045. },
  1046. /**
  1047. * Highlight/unhighlight all childs of the given row
  1048. */
  1049. highlight_children: function(id, status)
  1050. {
  1051. var i, selected,
  1052. children = this.row_children(id), len = children.length;
  1053. for (i=0; i<len; i++) {
  1054. selected = this.in_selection(children[i]);
  1055. if ((status && !selected) || (!status && selected))
  1056. this.highlight_row(children[i], true, true);
  1057. }
  1058. },
  1059. /**
  1060. * Handler for keyboard events
  1061. */
  1062. key_press: function(e)
  1063. {
  1064. var target = e.target || {};
  1065. if (!this.focused || target.nodeName == 'INPUT' || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')
  1066. return true;
  1067. var keyCode = rcube_event.get_keycode(e),
  1068. mod_key = rcube_event.get_modifier(e);
  1069. switch (keyCode) {
  1070. case 40:
  1071. case 38:
  1072. case 63233: // "down", in safari keypress
  1073. case 63232: // "up", in safari keypress
  1074. // Stop propagation so that the browser doesn't scroll
  1075. rcube_event.cancel(e);
  1076. return this.use_arrow_key(keyCode, mod_key);
  1077. case 32:
  1078. rcube_event.cancel(e);
  1079. return this.select_row(this.last_selected, mod_key, true);
  1080. case 37: // Left arrow key
  1081. case 39: // Right arrow key
  1082. // Stop propagation
  1083. rcube_event.cancel(e);
  1084. var ret = this.use_arrow_key(keyCode, mod_key);
  1085. this.key_pressed = keyCode;
  1086. this.modkey = mod_key;
  1087. this.triggerEvent('keypress');
  1088. this.modkey = 0;
  1089. return ret;
  1090. case 36: // Home
  1091. this.select_first(mod_key);
  1092. return rcube_event.cancel(e);
  1093. case 35: // End
  1094. this.select_last(mod_key);
  1095. return rcube_event.cancel(e);
  1096. case 27:
  1097. if (this.drag_active)
  1098. return this.drag_mouse_up(e);
  1099. if (this.col_drag_active) {
  1100. this.selected_column = null;
  1101. return this.column_drag_mouse_up(e);
  1102. }
  1103. return rcube_event.cancel(e);
  1104. case 9: // Tab
  1105. this.blur();
  1106. break;
  1107. case 13: // Enter
  1108. if (!this.selection.length)
  1109. this.select_row(this.last_selected, mod_key, false);
  1110. default:
  1111. this.key_pressed = keyCode;
  1112. this.modkey = mod_key;
  1113. this.triggerEvent('keypress');
  1114. this.modkey = 0;
  1115. if (this.key_pressed == this.BACKSPACE_KEY)
  1116. return rcube_event.cancel(e);
  1117. }
  1118. return true;
  1119. },
  1120. /**
  1121. * Special handling method for arrow keys
  1122. */
  1123. use_arrow_key: function(keyCode, mod_key)
  1124. {
  1125. var new_row,
  1126. selected_row = this.rows[this.last_selected];
  1127. // Safari uses the nonstandard keycodes 63232/63233 for up/down, if we're
  1128. // using the keypress event (but not the keydown or keyup event).
  1129. if (keyCode == 40 || keyCode == 63233) // down arrow key pressed
  1130. new_row = this.get_next_row();
  1131. else if (keyCode == 38 || keyCode == 63232) // up arrow key pressed
  1132. new_row = this.get_prev_row();
  1133. else {
  1134. if (!selected_row || !selected_row.has_children)
  1135. return;
  1136. // expand
  1137. if (keyCode == 39) {
  1138. if (selected_row.expanded)
  1139. return;
  1140. if (mod_key == CONTROL_KEY || this.multiexpand)
  1141. this.expand_all(selected_row);
  1142. else
  1143. this.expand(selected_row);
  1144. }
  1145. // collapse
  1146. else {
  1147. if (!selected_row.expanded)
  1148. return;
  1149. if (mod_key == CONTROL_KEY || this.multiexpand)
  1150. this.collapse_all(selected_row);
  1151. else
  1152. this.collapse(selected_row);
  1153. }
  1154. this.update_expando(selected_row.id, selected_row.expanded);
  1155. return false;
  1156. }
  1157. if (new_row) {
  1158. // simulate ctr-key if no rows are selected
  1159. if (!mod_key && !this.selection.length)
  1160. mod_key = CONTROL_KEY;
  1161. this.select_row(new_row.uid, mod_key, false);
  1162. this.scrollto(new_row.uid);
  1163. }
  1164. else if (!new_row && !selected_row) {
  1165. // select the first row if none selected yet
  1166. this.select_first(CONTROL_KEY);
  1167. }
  1168. return false;
  1169. },
  1170. /**
  1171. * Try to scroll the list to make the specified row visible
  1172. */
  1173. scrollto: function(id)
  1174. {
  1175. var row = this.rows[id] ? this.rows[id].obj : null;
  1176. if (row && this.frame) {
  1177. var scroll_to = Number(row.offsetTop),
  1178. head_offset = 0;
  1179. // expand thread if target row is hidden (collapsed)
  1180. if (!scroll_to && this.rows[id].parent_uid) {
  1181. var parent = this.find_root(this.rows[id].uid);
  1182. this.expand_all(this.rows[parent]);
  1183. scroll_to = Number(row.offsetTop);
  1184. }
  1185. if (this.fixed_header)
  1186. head_offset = Number(this.thead.offsetHeight);
  1187. // if row is above the frame (or behind header)
  1188. if (scroll_to < Number(this.frame.scrollTop) + head_offset) {
  1189. // scroll window so that row isn't behind header
  1190. this.frame.scrollTop = scroll_to - head_offset;
  1191. }
  1192. else if (scroll_to + Number(row.offsetHeight) > Number(this.frame.scrollTop) + Number(this.frame.offsetHeight))
  1193. this.frame.scrollTop = (scroll_to + Number(row.offsetHeight)) - Number(this.frame.offsetHeight);
  1194. }
  1195. },
  1196. /**
  1197. * Handler for mouse move events
  1198. */
  1199. drag_mouse_move: function(e)
  1200. {
  1201. // convert touch event
  1202. if (e.type == 'touchmove') {
  1203. if (e.touches.length == 1 && e.changedTouches.length == 1)
  1204. e = rcube_event.touchevent(e.changedTouches[0]);
  1205. else
  1206. return rcube_event.cancel(e);
  1207. }
  1208. if (this.drag_start) {
  1209. // check mouse movement, of less than 3 pixels, don't start dragging
  1210. var m = rcube_event.get_mouse_pos(e),
  1211. limit = 10, selection = [], self = this;
  1212. if (!this.drag_mouse_start || (Math.abs(m.x - this.drag_mouse_start.x) < 3 && Math.abs(m.y - this.drag_mouse_start.y) < 3))
  1213. return false;
  1214. // remember dragging start position
  1215. this.drag_start_pos = {left: m.x, top: m.y};
  1216. // initialize drag layer
  1217. if (!this.draglayer)
  1218. this.draglayer = $('<div>').attr('id', 'rcmdraglayer')
  1219. .css({position: 'absolute', display: 'none', 'z-index': 2000})
  1220. .appendTo(document.body);
  1221. else
  1222. this.draglayer.html('');
  1223. // get selected rows (in display order), don't use this.selection here
  1224. $(this.row_tagname() + '.selected', this.tbody).each(function() {
  1225. var uid = self.get_row_uid(this), row = self.rows[uid];
  1226. if (!row || $.inArray(uid, selection) > -1)
  1227. return;
  1228. selection.push(uid);
  1229. // also handle children of (collapsed) trees for dragging (they might be not selected)
  1230. if (row.has_children && !row.expanded)
  1231. $.each(self.row_children(uid), function() {
  1232. if ($.inArray(this, selection) > -1)
  1233. return;
  1234. selection.push(this);
  1235. });
  1236. // break the loop asap
  1237. if (selection.length > limit + 1)
  1238. return false;
  1239. });
  1240. // append subject (of every row up to the limit) to the drag layer
  1241. $.each(selection, function(i, uid) {
  1242. if (i > limit) {
  1243. self.draglayer.append('...');
  1244. return false;
  1245. }
  1246. $('> ' + self.col_tagname(), self.rows[uid].obj).each(function(n, cell) {
  1247. if (self.subject_col < 0 || (self.subject_col >= 0 && self.subject_col == n)) {
  1248. // remove elements marked with "skip-on-drag" class
  1249. cell = $(cell).clone();
  1250. $(cell).find('.skip-on-drag').remove();
  1251. var subject = cell.text();
  1252. if (subject) {
  1253. // remove leading spaces
  1254. subject = $.trim(subject);
  1255. // truncate line to 50 characters
  1256. subject = (subject.length > 50 ? subject.substring(0, 50) + '...' : subject);
  1257. self.draglayer.append($('<div>').text(subject));
  1258. return false;
  1259. }
  1260. }
  1261. });
  1262. });
  1263. this.draglayer.show();
  1264. this.drag_active = true;
  1265. this.triggerEvent('dragstart');
  1266. }
  1267. if (this.drag_active && this.draglayer) {
  1268. var pos = rcube_event.get_mouse_pos(e);
  1269. this.draglayer.css({ left:(pos.x+20)+'px', top:(pos.y-5 + (bw.ie ? document.documentElement.scrollTop : 0))+'px' });
  1270. this.triggerEvent('dragmove', e?e:window.event);
  1271. }
  1272. this.drag_start = false;
  1273. return false;
  1274. },
  1275. /**
  1276. * Handler for mouse up events
  1277. */
  1278. drag_mouse_up: function(e)
  1279. {
  1280. document.onmousemove = null;
  1281. if (e.type == 'touchend') {
  1282. if (e.changedTouches.length != 1)
  1283. return rcube_event.cancel(e);
  1284. }
  1285. if (this.draglayer && this.draglayer.is(':visible')) {
  1286. if (this.drag_start_pos)
  1287. this.draglayer.animate(this.drag_start_pos, 300, 'swing').hide(20);
  1288. else
  1289. this.draglayer.hide();
  1290. }
  1291. if (this.drag_active)
  1292. this.focus();
  1293. this.drag_active = false;
  1294. rcube_event.remove_listener({event:'mousemove', object:this, method:'drag_mouse_move'});
  1295. rcube_event.remove_listener({event:'mouseup', object:this, method:'drag_mouse_up'});
  1296. if (bw.touch) {
  1297. rcube_event.remove_listener({event:'touchmove', object:this, method:'drag_mouse_move'});
  1298. rcube_event.remove_listener({event:'touchend', object:this, method:'drag_mouse_up'});
  1299. }
  1300. // remove temp divs
  1301. this.del_dragfix();
  1302. this.triggerEvent('dragend', e);
  1303. return rcube_event.cancel(e);
  1304. },
  1305. /**
  1306. * Handler for mouse move events for dragging list column
  1307. */
  1308. column_drag_mouse_move: function(e)
  1309. {
  1310. if (this.drag_start) {
  1311. // check mouse movement, of less than 3 pixels, don't start dragging
  1312. var i, m = rcube_event.get_mouse_pos(e);
  1313. if (!this.drag_mouse_start || (Math.abs(m.x - this.drag_mouse_start.x) < 3 && Math.abs(m.y - this.drag_mouse_start.y) < 3))
  1314. return false;
  1315. if (!this.col_draglayer) {
  1316. var lpos = $(this.list).offset(),
  1317. cells = this.thead.rows[0].cells;
  1318. // fix layer position when list is scrolled
  1319. lpos.top += this.list.scrollTop + this.list.parentNode.scrollTop;
  1320. // create dragging layer
  1321. this.col_draglayer = $('<div>').attr('id', 'rcmcoldraglayer')
  1322. .css(lpos).css({ position:'absolute', 'z-index':2001,
  1323. 'background-color':'white', opacity:0.75,
  1324. height: (this.frame.offsetHeight-2)+'px', width: (this.frame.offsetWidth-2)+'px' })
  1325. .appendTo(document.body)
  1326. // ... and column position indicator
  1327. .append($('<div>').attr('id', 'rcmcolumnindicator')
  1328. .css({ position:'absolute', 'border-right':'2px dotted #555',
  1329. 'z-index':2002, height: (this.frame.offsetHeight-2)+'px' }));
  1330. this.cols = [];
  1331. this.list_pos = this.list_min_pos = lpos.left;
  1332. // save columns positions
  1333. for (i=0; i<cells.length; i++) {
  1334. this.cols[i] = cells[i].offsetWidth;
  1335. if (this.column_fixed !== null && i <= this.column_fixed) {
  1336. this.list_min_pos += this.cols[i];
  1337. }
  1338. }
  1339. }
  1340. this.col_draglayer.show();
  1341. this.col_drag_active = true;
  1342. this.triggerEvent('column_dragstart');
  1343. }
  1344. // set column indicator position
  1345. if (this.col_drag_active && this.col_draglayer) {
  1346. var i, cpos = 0, pos = rcube_event.get_mouse_pos(e);
  1347. for (i=0; i<this.cols.length; i++) {
  1348. if (pos.x >= this.cols[i]/2 + this.list_pos + cpos)
  1349. cpos += this.cols[i];
  1350. else
  1351. break;
  1352. }
  1353. // handle fixed columns on left
  1354. if (i == 0 && this.list_min_pos > pos.x)
  1355. cpos = this.list_min_pos - this.list_pos;
  1356. // empty list needs some assignment
  1357. else if (!this.list.rowcount && i == this.cols.length)
  1358. cpos -= 2;
  1359. $('#rcmcolumnindicator').css({ width: cpos+'px'});
  1360. this.triggerEvent('column_dragmove', e?e:window.event);
  1361. }
  1362. this.drag_start = false;
  1363. return false;
  1364. },
  1365. /**
  1366. * Handler for mouse up events for dragging list columns
  1367. */
  1368. column_drag_mouse_up: function(e)
  1369. {
  1370. document.onmousemove = null;
  1371. if (this.col_draglayer) {
  1372. (this.col_draglayer).remove();
  1373. this.col_draglayer = null;
  1374. }
  1375. rcube_event.remove_listener({event:'mousemove', object:this, method:'column_drag_mouse_move'});
  1376. rcube_event.remove_listener({event:'mouseup', object:this, method:'column_drag_mouse_up'});
  1377. // remove temp divs
  1378. this.del_dragfix();
  1379. if (this.col_drag_active) {
  1380. this.col_drag_active = false;
  1381. this.focus();
  1382. this.triggerEvent('column_dragend', e);
  1383. if (this.selected_column !== null && this.cols && this.cols.length) {
  1384. var i, cpos = 0, pos = rcube_event.get_mouse_pos(e);
  1385. // find destination position
  1386. for (i=0; i<this.cols.length; i++) {
  1387. if (pos.x >= this.cols[i]/2 + this.list_pos + cpos)
  1388. cpos += this.cols[i];
  1389. else
  1390. break;
  1391. }
  1392. if (i != this.selected_column && i != this.selected_column+1) {
  1393. this.column_replace(this.selected_column, i);
  1394. }
  1395. }
  1396. }
  1397. return rcube_event.cancel(e);
  1398. },
  1399. /**
  1400. * Returns IDs of all rows in a thread (except root) for specified root
  1401. */
  1402. row_children: function(uid)
  1403. {
  1404. if (!this.rows[uid] || !this.rows[uid].has_children)
  1405. return [];
  1406. var res = [], depth = this.rows[uid].depth,
  1407. row = this.rows[uid].obj.nextSibling;
  1408. while (row) {
  1409. if (row.nodeType == 1) {
  1410. if (r = this.rows[row.uid]) {
  1411. if (!r.depth || r.depth <= depth)
  1412. break;
  1413. res.push(r.uid);
  1414. }
  1415. }
  1416. row = row.nextSibling;
  1417. }
  1418. return res;
  1419. },
  1420. /**
  1421. * Creates a layer for drag&drop over iframes
  1422. */
  1423. add_dragfix: function()
  1424. {
  1425. $('iframe').each(function() {
  1426. $('<div class="iframe-dragdrop-fix"></div>')
  1427. .css({background: '#fff',
  1428. width: this.offsetWidth+'px', height: this.offsetHeight+'px',
  1429. position: 'absolute', opacity: '0.001', zIndex: 1000
  1430. })
  1431. .css($(this).offset())
  1432. .appendTo(document.body);
  1433. });
  1434. },
  1435. /**
  1436. * Removes the layer for drag&drop over iframes
  1437. */
  1438. del_dragfix: function()
  1439. {
  1440. $('div.iframe-dragdrop-fix').remove();
  1441. },
  1442. /**
  1443. * Replaces two columns
  1444. */
  1445. column_replace: function(from, to)
  1446. {
  1447. // only supported for <table> lists
  1448. if (!this.thead || !this.thead.rows)
  1449. return;
  1450. var len, cells = this.thead.rows[0].cells,
  1451. elem = cells[from],
  1452. before = cells[to],
  1453. td = document.createElement('td');
  1454. // replace header cells
  1455. if (before)
  1456. cells[0].parentNode.insertBefore(td, before);
  1457. else
  1458. cells[0].parentNode.appendChild(td);
  1459. cells[0].parentNode.replaceChild(elem, td);
  1460. // replace list cells
  1461. for (r=0, len=this.tbody.rows.length; r<len; r++) {
  1462. row = this.tbody.rows[r];
  1463. elem = row.cells[from];
  1464. before = row.cells[to];
  1465. td = document.createElement('td');
  1466. if (before)
  1467. row.insertBefore(td, before);
  1468. else
  1469. row.appendChild(td);
  1470. row.replaceChild(elem, td);
  1471. }
  1472. // update subject column position
  1473. if (this.subject_col == from)
  1474. this.subject_col = to > from ? to - 1 : to;
  1475. else if (this.subject_col < from && to <= this.subject_col)
  1476. this.subject_col++;
  1477. else if (this.subject_col > from && to >= this.subject_col)
  1478. this.subject_col--;
  1479. if (this.fixed_header)
  1480. this.init_header();
  1481. this.triggerEvent('column_replace');
  1482. }
  1483. };
  1484. rcube_list_widget.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
  1485. rcube_list_widget.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
  1486. rcube_list_widget.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;
  1487. // static
  1488. rcube_list_widget._instances = [];