Optimize list events for touch devices

Thomas Bruederli

2013-08-14 dc840082668fb1c99ad8f137abd460bcae7ac2da

Optimize list events for touch devices

 program/js/list.js

@@ -125,14 +125,22 @@
    if (bw.mobile) {
      row.addEventListener('touchstart', function(e) {
        if (e.touches.length == 1) {
          if (!self.drag_row(rcube_event.touchevent(e.touches[0]), this.uid))
            e.preventDefault();
          self.touchmoved = false;
          self.drag_row(rcube_event.touchevent(e.touches[0]), this.uid)
        }
      }, false);
      row.addEventListener('touchend', function(e) {
        if (e.changedTouches.length == 1)
          if (!self.click_row(rcube_event.touchevent(e.changedTouches[0]), this.uid))
        if (e.changedTouches.length == 1) {
          if (!self.touchmoved && !self.click_row(rcube_event.touchevent(e.changedTouches[0]), this.uid))
            e.preventDefault();
        }
      }, false);
      row.addEventListener('touchmove', function(e) {
        if (e.changedTouches.length == 1) {
          self.touchmoved = true;
          if (self.drag_active)
            e.preventDefault();
        }
      }, false);
    }

@@ -157,7 +165,7 @@
      $(this.list.tHead).replaceWith($(this.fixed_header).find('thead').clone());
      $(this.list.tHead).find('tr td').attr('style', '');  // remove fixed widths
    }
    else if (this.list.className.indexOf('fixedheader') >= 0) {
    else if (!bw.mobile && this.list.className.indexOf('fixedheader') >= 0) {
      this.init_fixed_header();
    }

@@ -408,7 +416,7 @@
  if (rcube_event.get_button(e) == 2)
    return true;

  this.in_selection_before = this.in_selection(id) ? id : false;
  this.in_selection_before = e.istouch || this.in_selection(id) ? id : false;

  // selects currently unselected row
  if (!this.in_selection_before) {
@@ -416,7 +424,7 @@
    this.select_row(id, mod_key, false);
  }

  if (this.draggable && this.selection.length) {
  if (this.draggable && this.selection.length && this.in_selection(id)) {
    this.drag_start = true;
    this.drag_mouse_start = rcube_event.get_mouse_pos(e);
    rcube_event.add_listener({event:'mousemove', object:this, method:'drag_mouse_move'});
@@ -1256,7 +1264,7 @@
{
  // convert touch event
  if (e.type == 'touchmove') {
    if (e.changedTouches.length == 1)
    if (e.touches.length == 1 && e.changedTouches.length == 1)
      e = rcube_event.touchevent(e.changedTouches[0]);
    else
      return rcube_event.cancel(e);

 skins/larry/includes/links.html

@@ -1,4 +1,5 @@
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="shortcut icon" href="/images/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="/styles.css" />
<roundcube:if condition="in_array(env:task, array('mail','addressbook','settings'))" />