Render trees using CSS classes, not IMG tags

diff --git a/framework/Core/lib/Horde/Core/Tree/Html.php b/framework/Core/lib/Horde/Core/Tree/Html.php
index e1888f0..13b006d 100644 (file)
--- a/framework/Core/lib/Horde/Core/Tree/Html.php
+++ b/framework/Core/lib/Horde/Core/Tree/Html.php
@@ -17,58 +17,70 @@ class Horde_Core_Tree_Html extends Horde_Tree_Html
 {
     /**
      * Images array.
+     * Values correspond to 'treeImg#' CSS classes in horde/themes/screen.css.
      *
      * @var array
      */
     protected $_images = array(
-        'line' => 'line.png',
-        'blank' => 'blank.png',
-        'join' => 'join.png',
-        'join_bottom' => 'joinbottom.png',
-        'plus' => 'plus.png',
-        'plus_bottom' => 'plusbottom.png',
-        'plus_only' => 'plusonly.png',
-        'minus' => 'minus.png',
-        'minus_bottom' => 'minusbottom.png',
-        'minus_only' => 'minusonly.png',
-        'null_only' => 'nullonly.png',
-        'folder' => 'folder.png',
-        'folderopen' => 'folderopen.png',
-        'leaf' => 'leaf.png'
+        'line' => 1,
+        'blank' => '',
+        'join' => 2,
+        'join_bottom' => 4,
+        'plus' => 10,
+        'plus_bottom' => 11,
+        'plus_only' => 12,
+        'minus' => 6,
+        'minus_bottom' => 7,
+        'minus_only' => 8,
+        'null_only' => 13,
+        'folder' => 14,
+        'folderopen' => 15,
+        'leaf' => 16
     );
 
     /**
-     * Constructor.
+     * Generate a link URL tag.
+     *
+     * @param string $node_id  The node ID.
      *
-     * @param string $name   @see parent::__construct().
-     * @param array $params  @see parent::__construct().
+     * @return string  The link tag.
      */
-    public function __construct($name, array $params = array())
+    protected function _generateUrlTag($node_id)
     {
-        parent::__construct($name, $params);
-
-        if (!empty($GLOBALS['registry']->nlsconfig['rtl'][$GLOBALS['language']])) {
-            $no_rev = array('blank', 'folder', 'folder_open');
-            foreach (array_diff(array_keys($this->_images), $no_rev) as $key) {
-                $this->_images[$key] = 'rev-' . $this->_images[$key];
-            }
-        }
-
-        foreach (array_keys($this->_images) as $key) {
-            $this->_images[$key] = strval(Horde_Themes::img('tree/' . $this->_images[$key], array('app' => 'horde')));
-        }
+        return Horde::link(Horde::selfUrl()->add(self::TOGGLE . $this->_instance, $node_id));
     }
 
     /**
-     * Generate a link URL tag.
+     * Generate the icon image.
      *
-     * @param string $node_id  The node ID.
+     * @param string $src    The source image.
+     * @param string $class  Additional class to add to image.
+     * @param string $alt    Alt text to add to the image.
      *
-     * @return string  The link tag.
+     * @return string  A HTML tag to display the image.
      */
-    protected function _generateUrlTag($node_id)
+    protected function _generateImage($src, $class = '', $alt = null)
     {
-        return Horde::link(Horde::selfUrl()->add(self::TOGGLE . $this->_instance, $node_id));
+        switch ($class) {
+        case 'treeIcon':
+            return parent::_generateImage($src, $class, $alt);
+
+        case 'treeToggle':
+            $class .= ' treeImg';
+            break;
+
+        default:
+            $class = 'treeImg';
+            break;
+        }
+
+        $img = '<span class="' . $class . ' treeImg' . $src . '"';
+
+        if (!is_null($alt)) {
+            $img.= ' alt="' . $alt . '"';
+        }
+
+        return $img . '></span>';
     }
 
 }

diff --git a/framework/Tree/lib/Horde/Tree/Html.php b/framework/Tree/lib/Horde/Tree/Html.php
index 08dce03..65f9023 100644 (file)
--- a/framework/Tree/lib/Horde/Tree/Html.php
+++ b/framework/Tree/lib/Horde/Tree/Html.php
@@ -376,9 +376,9 @@ class Horde_Tree_Html extends Horde_Tree
             $this->_dropline[0] = false;
         }
 
-        $link_end = ($link_start) ? '</a>' : '';
-
-        return $link_start . $this->_generateImage($img) . $link_end;
+        return $link_start .
+            $this->_generateImage($img, 'treeToggle') .
+            ($link_start ? '</a>' : '');
     }
 
     /**
@@ -398,18 +398,17 @@ class Horde_Tree_Html extends Horde_Tree
      * Generate the icon image.
      *
      * @param string $src    The source image.
-     * @param boolean $icon  Is this an icon image? If false, this is a
-     *                       tree/line image.
+     * @param string $class  Additional class to add to image.
      * @param string $alt    Alt text to add to the image.
      *
      * @return string  A HTML tag to display the image.
      */
-    protected function _generateImage($src, $icon = false, $alt = null)
+    protected function _generateImage($src, $class = '', $alt = null)
     {
         $img = '<img src="' . $src . '"';
 
-        if ($icon) {
-            $img .= ' class="treeIcon"';
+        if ($class) {
+            $img .= ' class="' . $class . '"';
         }
 
         if (!is_null($alt)) {
@@ -453,7 +452,7 @@ class Horde_Tree_Html extends Horde_Tree
             }
         }
 
-        return $this->_generateImage($img, true, isset($this->_nodes[$node_id]['iconalt']) ? htmlspecialchars($this->_nodes[$node_id]['iconalt']) : null);
+        return $this->_generateImage($img, 'treeIcon', isset($this->_nodes[$node_id]['iconalt']) ? htmlspecialchars($this->_nodes[$node_id]['iconalt']) : null);
     }
 
 }

diff --git a/horde/js/hordetree.js b/horde/js/hordetree.js
index 088abdb..8509312 100644 (file)
--- a/horde/js/hordetree.js
+++ b/horde/js/hordetree.js
@@ -139,11 +139,11 @@ var Horde_Tree = Class.create({
 
         tmp = document.createDocumentFragment();
         for (i = Number(this.renderStatic); i < node.indent; ++i) {
-            tmp.appendChild(new Element('IMG', {
-                src: ((this.dropline[i] && this.opts.options.lines)
-                      ? this.opts.imgLine
-                      : this.opts.imgBlank)
-            }));
+            tmp.appendChild(new Element('SPAN').addClassName('treeImg').addClassName(
+                'treeImg' + ((this.dropline[i] && this.opts.options.lines)
+                    ? this.opts.imgLine
+                    : this.opts.imgBlank)
+            ));
         }
 
         tmp.appendChild(this._setNodeToggle(nodeId));
@@ -242,7 +242,7 @@ var Horde_Tree = Class.create({
             this.dropline[0] = false;
         }
 
-        return new Element('IMG', { id: "nodeToggle_" + nodeId, src: this._getNodeToggle(nodeId) }).addClassName('treeToggle');
+        return new Element('SPAN', { id: "nodeToggle_" + nodeId }).addClassName('treeToggle').addClassName('treeImg').addClassName('treeImg' + this._getNodeToggle(nodeId));
     },
 
     _getNodeToggle: function(nodeId)
@@ -316,19 +316,22 @@ var Horde_Tree = Class.create({
 
     _setNodeIcon: function(nodeId)
     {
-        var node = this.nodes[nodeId],
-            img = new Element('IMG', { id: "nodeIcon_" + nodeId }).addClassName('treeIcon');
+        var img,
+            node = this.nodes[nodeId];
 
         // Image.
         if (node.icon) {
             // Node has a user defined icon.
-            img.writeAttribute('src', node.iconopen && node.expanded ? node.iconopen : node.icon);
-        } else if (node.children) {
-            // Standard icon: node with children.
-            img.writeAttribute('src', node.expanded ? this.opts.imgFolderOpen : this.opts.imgFolder);
+            img = new Element('IMG', { id: "nodeIcon_" + nodeId, src: (node.iconopen && node.expanded ? node.iconopen : node.icon) }).addClassName('treeIcon')
         } else {
-            // Standard icon: node, no children.
-            img.writeAttribute('src', this.opts.imgLeaf);
+            img = new Element('SPAN', { id: "nodeIcon_" + nodeId }).addClassName('treeIcon');
+            if (node.children) {
+                // Standard icon: node with children.
+                img.addClassName('treeImg' + (node.expanded ? this.opts.imgFolderOpen : this.opts.imgFolder));
+            } else {
+                // Standard icon: node, no children.
+                img.addClassName('treeImg' + this.opts.imgLeaf);
+            }
         }
 
         if (node.iconalt) {