From ed1d212ae2daea5e4bd043417610177093e99f19 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <alec@alec.pl>
Date: Sat, 16 Jan 2016 03:03:51 -0500
Subject: [PATCH] Improved SVG cleanup code

---
 program/js/treelist.js |  278 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 224 insertions(+), 54 deletions(-)

diff --git a/program/js/treelist.js b/program/js/treelist.js
index 3b94543..bcbfeeb 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -46,7 +46,9 @@
     scroll_speed: 20,
     save_state: false,
     keyboard: true,
-    check_droptarget: function(node){ return !node.virtual }
+    tabexit: true,
+    parent_focus: false,
+    check_droptarget: function(node) { return !node.virtual; }
   }, p || {});
 
   var container = $(node),
@@ -67,6 +69,9 @@
     searchfield,
     tree_state,
     ui_droppable,
+    ui_draggable,
+    draggable_opts,
+    droppable_opts,
     list_id = (container.attr('id') || p.id_prefix || '0'),
     me = this;
 
@@ -83,12 +88,15 @@
   this.drag_end = drag_end;
   this.intersects = intersects;
   this.droppable = droppable;
+  this.draggable = draggable;
   this.update = update_node;
   this.insert = insert;
   this.remove = remove;
   this.get_item = get_item;
   this.get_node = get_node;
   this.get_selection = get_selection;
+  this.is_search = is_search;
+  this.reset_search = reset_search;
 
   /////// startup code (constructor)
 
@@ -102,23 +110,43 @@
   else
     update_data();
 
-  // register click handlers on list
-  container.on('click', 'div.treetoggle', function(e){
-    toggle(dom2id($(this).parent()));
-    e.stopPropagation();
-  });
-
-  container.on('click', 'li', function(e){
-    var node = p.selectable ? indexbyid[dom2id($(this))] : null;
-    if (node && !node.virtual) {
-      select(node.id);
+  container.attr('role', 'tree')
+    .on('focusin', function(e) {
+      // TODO: only accept focus on virtual nodes from keyboard events
+      has_focus = true;
+    })
+    .on('focusout', function(e) {
+      has_focus = false;
+    })
+    // register click handlers on list
+    .on('click', 'div.treetoggle', function(e) {
+      toggle(dom2id($(this).parent()));
       e.stopPropagation();
-    }
-  });
+    })
+    .on('click', 'li', function(e) {
+      // do not select record on checkbox/input click
+      if ($(e.target).is('input'))
+        return true;
+
+      var node = p.selectable ? indexbyid[dom2id($(this))] : null;
+      if (node && !node.virtual) {
+        select(node.id);
+        e.stopPropagation();
+      }
+    })
+    // mute clicks on virtual folder links (they need tabindex="0" in order to be selectable by keyboard)
+    .on('mousedown', 'a', function(e) {
+      var link = $(e.target), node = indexbyid[dom2id(link.closest('li'))];
+      if (node && node.virtual && !link.attr('href')) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    });
 
   // activate search function
   if (p.searchbox) {
-    searchfield = $(p.searchbox).on('keyup', function(e) {
+    searchfield = $(p.searchbox).off('keyup.treelist').on('keyup.treelist', function(e) {
       var key = rcube_event.get_keycode(e),
         mod = rcube_event.get_modifier(e);
 
@@ -147,25 +175,25 @@
     }).attr('autocomplete', 'off');
 
     // find the reset button for this search field
-    searchfield.parent().find('a.reset').click(function(e) {
+    searchfield.parent().find('a.reset').off('click.treelist').on('click.treelist', function(e) {
       reset_search();
       return false;
     })
   }
 
-  container.on('focusin', function(e){
-      // TODO: only accept focus on virtual nodes from keyboard events
-      has_focus = true;
-    })
-    .on('focusout', function(e){
-      has_focus = false;
+  $(document.body).on('keydown', keypress);
+
+  // catch focus when clicking the list container area
+  if (p.parent_focus) {
+    container.parent(':not(body)').click(function(e) {
+      if (!has_focus && selection) {
+        $(get_item(selection)).find(':focusable').first().focus();
+      }
+      else if (!has_focus) {
+        container.children('li:has(:focusable)').first().find(':focusable').first().focus();
+      }
     });
-
-  container.attr('role', 'tree');
-
-  $(document.body)
-    .bind('keydown', keypress);
-
+  }
 
   /////// private methods
 
@@ -215,16 +243,30 @@
    */
   function select(id)
   {
+    // allow subscribes to prevent selection change
+    if (me.triggerEvent('beforeselect', indexbyid[id]) === false) {
+      return;
+    }
+
     if (selection) {
-      id2dom(selection).removeClass('selected').removeAttr('aria-selected');
+      id2dom(selection, true).removeClass('selected').removeAttr('aria-selected');
+      if (search_active)
+          id2dom(selection).removeClass('selected').removeAttr('aria-selected');
       selection = null;
     }
 
-    var li = id2dom(id);
+    if (!id)
+      return;
+
+    var li = id2dom(id, true);
     if (li.length) {
       li.addClass('selected').attr('aria-selected', 'true');
       selection = id;
       // TODO: expand all parent nodes if collapsed
+
+      if (search_active)
+        id2dom(id).addClass('selected').attr('aria-selected', 'true');
+
       scroll_to_node(li);
     }
 
@@ -287,7 +329,7 @@
 
       // re-render the entire subtree
       if (parent_node.children.length == 1) {
-        render_node(parent_node, parent_li.parent(), parent_li);
+        render_node(parent_node, null, parent_li);
         li = id2dom(node.id);
       }
       else {
@@ -319,6 +361,12 @@
 
     indexbyid[node.id] = node;
 
+    // set new reference to node.html after insert
+    // will otherwise vanish in Firefox 3.6
+    if (typeof node.html == 'object') {
+        indexbyid[node.id].html = id2dom(node.id, true).children();
+    }
+
     if (sort) {
       resort_node(li, typeof sort == 'string' ? '[class~="' + sort + '"]' : '');
     }
@@ -329,14 +377,32 @@
    */
   function update_node(id, updates, sort)
   {
-    var li, node = indexbyid[id];
+    var li, parent_ul, parent_node, old_parent,
+      node = indexbyid[id];
 
     if (node) {
       li = id2dom(id);
+      parent_ul = li.parent();
 
-      if (updates.id || updates.html || updates.children || updates.classes) {
+      if (updates.id || updates.html || updates.children || updates.classes || updates.parent) {
+        if (updates.parent && (parent_node = indexbyid[updates.parent])) {
+          // remove reference from old parent's child list
+          if (parent_ul.closest('li').length && (old_parent = indexbyid[dom2id(parent_ul.closest('li'))])) {
+            old_parent.children = $.grep(old_parent.children, function(elem, i){ return elem.id != node.id; });
+          }
+
+          // append to new parent node
+          parent_ul = id2dom(updates.parent).children('ul').first();
+          if (!parent_node.children)
+            parent_node.children = [];
+          parent_node.children.push(node);
+        }
+        else if (updates.parent !== undefined) {
+          parent_ul = container;
+        }
+
         $.extend(node, updates);
-        render_node(node, li.parent(), li);
+        li = render_node(node, parent_ul, li);
       }
 
       if (node.id != id) {
@@ -398,6 +464,10 @@
       node.deleted = true;
       delete indexbyid[id];
 
+      if (search_active) {
+        id2dom(id, false).remove();
+      }
+
       return true;
     }
 
@@ -417,7 +487,7 @@
    */
   function update_dom(node)
   {
-    var li = id2dom(node.id);
+    var li = id2dom(node.id, true);
     li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
     li.children('ul').first()[(node.collapsed ? 'hide' : 'show')]();
     li.children('div.treetoggle').removeClass('collapsed expanded').addClass(node.collapsed ? 'collapsed' : 'expanded');
@@ -427,7 +497,7 @@
   /**
    *
    */
-  function reset()
+  function reset(keep_content)
   {
     select('');
 
@@ -435,7 +505,24 @@
     indexbyid = {};
     drag_active = false;
 
-    container.html('');
+    if (keep_content) {
+      if (draggable_opts) {
+        if (ui_draggable)
+          draggable('destroy');
+        draggable(draggable_opts);
+      }
+
+      if (droppable_opts) {
+        if (ui_droppable)
+          droppable('destroy');
+        droppable(droppable_opts);
+      }
+
+      update_data();
+    }
+    else {
+      container.html('');
+    }
 
     reset_search();
   }
@@ -458,11 +545,17 @@
         var li, sli;
         if (!node.virtual && !node.deleted && String(node.text).toLowerCase().indexOf(q) >= 0 && hits.indexOf(node.id) < 0) {
           li = id2dom(node.id);
+
+          // skip already filtered nodes
+          if (li.data('filtered'))
+            return;
+
           sli = $('<li>')
             .attr('id', li.attr('id') + '--xsR')
             .attr('class', li.attr('class'))
             .addClass('searchresult__')
-            .append(li.children().first().clone(true, true))
+            // append all elements like links and inputs, but not sub-trees
+            .append(li.children(':not(div.treetoggle,ul)').clone(true, true))
             .appendTo(container);
             hits.push(node.id);
         }
@@ -485,9 +578,10 @@
     // search recursively in tree (to keep sorting order)
     search_tree(data);
     search_active = true;
-    last_search = q;
 
     me.triggerEvent('search', { query: q, last: last_search, count: hits.length, ids: hits, execute: enter||false });
+
+    last_search = q;
 
     return hits.count;
   }
@@ -501,7 +595,7 @@
       searchfield.val('');
 
     $(container).children('li.searchresult__').remove();
-    $(container).children('li').show();
+    $(container).children('li').filter(function() { return !$(this).data('filtered'); }).show();
 
     search_active = false;
 
@@ -510,6 +604,14 @@
 
     if (selection)
       select(selection);
+  }
+
+  /**
+   *
+   */
+  function is_search()
+  {
+    return search_active;
   }
 
   /**
@@ -546,8 +648,11 @@
       .addClass((node.classes || []).join(' '))
       .data('id', node.id);
 
-    if (replace)
+    if (replace) {
       replace.replaceWith(li);
+      if (parent)
+        li.appendTo(parent);
+    }
     else
       li.appendTo(parent);
 
@@ -604,7 +709,8 @@
         node.childlistclass = sublist.attr('class');
       }
       if (node.children.length) {
-        node.collapsed = sublist.css('display') == 'none';
+        if (node.collapsed === undefined)
+          node.collapsed = sublist.css('display') == 'none';
 
         // apply saved state
         state = get_state(node.id, node.collapsed);
@@ -660,7 +766,7 @@
    */
   function dom2id(li)
   {
-    var domid = li.attr('id').replace(new RegExp('^' + (p.id_prefix) || '%'), '').replace(/--xsR$/, '');
+    var domid = String(li.attr('id')).replace(new RegExp('^' + (p.id_prefix) || '%'), '').replace(/--xsR$/, '');
     return p.id_decode ? p.id_decode(domid) : domid;
   }
 
@@ -671,6 +777,7 @@
   {
     var domid = p.id_encode ? p.id_encode(id) : id,
       suffix = search_active && !real ? '--xsR' : '';
+
     return $('#' + p.id_prefix + domid + suffix, container);
   }
 
@@ -728,7 +835,7 @@
     var target = e.target || {},
       keyCode = rcube_event.get_keycode(e);
 
-    if (!has_focus || target.nodeName == 'INPUT' || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')
+    if (!has_focus || target.nodeName == 'INPUT' && keyCode != 38 && keyCode != 40 || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')
       return true;
 
     switch (keyCode) {
@@ -754,7 +861,7 @@
         return false;
 
       case 9:  // Tab
-        if (p.keyboard) {
+        if (p.keyboard && p.tabexit) {
           // jump to last/first item to move focus away from the treelist widget by tab
           var limit = rcube_event.get_modifier(e) == SHIFT_KEY ? 'first' : 'last';
           focus_noscroll(container.find('li[role=treeitem]:has(a)')[limit]().find('a:'+limit));
@@ -776,8 +883,8 @@
     else if (dir < 0 && !from_child && next.children('ul[role=group]:visible').length) {
       next.children('ul').children('li:last').find('a:first').focus();
     }
-    else if (next.length && next.find('a:first')) {
-      next.find('a:first').focus();
+    else if (next.length && next.find('a:first').focus().length) {
+        // focused
     }
     else {
       parent = li.parent().closest('li[role=treeitem]');
@@ -811,8 +918,13 @@
    * When dragging starts, compute absolute bounding boxes of the list and it's items
    * for faster comparisons while mouse is moving
    */
-  function drag_start()
+  function drag_start(force)
   {
+    if (!force && drag_active)
+      return;
+
+    drag_active = true;
+
     var li, item, height,
       pos = container.offset();
 
@@ -820,7 +932,6 @@
     list_scroll_top = container.parent().scrollTop();
     pos.top += list_scroll_top;
 
-    drag_active = true;
     box_coords = {
       x1: pos.left,
       y1: pos.top,
@@ -832,7 +943,7 @@
     for (var id in indexbyid) {
       li = id2dom(id);
       item = li.children().first().get(0);
-      if (height = item.offsetHeight) {
+      if (item && (height = item.offsetHeight)) {
         pos = $(item).offset();
         pos.top += list_scroll_top;
         item_coords[id] = {
@@ -883,6 +994,9 @@
    */
   function drag_end()
   {
+    if (!drag_active)
+      return;
+
     drag_active = false;
     scroll_timer = null;
 
@@ -913,7 +1027,7 @@
   }
 
   /**
-   * Determine if the given mouse coords intersect the list and one if its items
+   * Determine if the given mouse coords intersect the list and one of its items
    */
   function intersects(mouse, highlight)
   {
@@ -933,8 +1047,8 @@
     }
 
     // check intersection with visible list items
-    var pos, node;
-    for (var id in item_coords) {
+    var id, pos, node;
+    for (id in item_coords) {
       pos = item_coords[id];
       if (mouse.x >= pos.x1 && mouse.x < pos.x2 && mouse.top >= pos.y1 && mouse.top < pos.y2) {
         node = indexbyid[id];
@@ -947,7 +1061,7 @@
           autoexpand_item = id;
           autoexpand_timer = setTimeout(function() {
             expand(autoexpand_item);
-            drag_start();  // re-calculate item coords
+            drag_start(true);  // re-calculate item coords
             autoexpand_item = null;
             if (ui_droppable)
               $.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null);
@@ -987,7 +1101,24 @@
    */
   function droppable(opts)
   {
-    var my_opts = $.extend({ greedy: true, hoverClass: 'droptarget', addClasses:false }, opts);
+    if (!opts) opts = {};
+
+    if ($.type(opts) == 'string') {
+      if (opts == 'destroy') {
+        ui_droppable = null;
+      }
+      $('li:not(.virtual)', container).droppable(opts);
+      return this;
+    }
+
+    droppable_opts = opts;
+
+    var my_opts = $.extend({
+        greedy: true,
+        tolerance: 'pointer',
+        hoverClass: 'droptarget',
+        addClasses: false
+      }, opts);
 
     my_opts.activate = function(e, ui) {
       drag_start();
@@ -1010,6 +1141,45 @@
     };
 
     $('li:not(.virtual)', container).droppable(my_opts);
+
+    return this;
+  }
+
+  /**
+   * Wrapper for jQuery.UI.draggable() activation on this widget
+   *
+   * @param object Options as passed to regular .draggable() function
+   */
+  function draggable(opts)
+  {
+    if (!opts) opts = {};
+
+    if ($.type(opts) == 'string') {
+      if (opts == 'destroy') {
+        ui_draggable = null;
+      }
+      $('li:not(.virtual)', container).draggable(opts);
+      return this;
+    }
+
+    draggable_opts = opts;
+
+    var my_opts = $.extend({
+        appendTo: 'body',
+        revert: 'invalid',
+        iframeFix: true,
+        addClasses: false,
+        cursorAt: {left: -20, top: 5},
+        create: function(e, ui) { ui_draggable = ui; },
+        helper: function(e) {
+          return $('<div>').attr('id', 'rcmdraglayer')
+            .text($.trim($(e.target).first().text()));
+        }
+      }, opts);
+
+    $('li:not(.virtual)', container).draggable(my_opts);
+
+    return this;
   }
 }
 

--
Gitblit v1.9.1