From: Michael M Slusarz Date: Thu, 19 Aug 2010 23:16:19 +0000 (-0600) Subject: Render trees using CSS classes, not IMG tags X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=3d69606504313d1b5636a52def0e888a6e0d3186;p=horde.git 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 e1888f07c..13b006d15 100644 --- 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 = ''; } } diff --git a/framework/Tree/lib/Horde/Tree/Html.php b/framework/Tree/lib/Horde/Tree/Html.php index 08dce0392..65f9023aa 100644 --- 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) ? '' : ''; - - return $link_start . $this->_generateImage($img) . $link_end; + return $link_start . + $this->_generateImage($img, 'treeToggle') . + ($link_start ? '' : ''); } /** @@ -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 = '_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 088abdbf9..8509312ea 100644 --- 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) {