您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

list.js 45KB

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