a748e4abc96d5e3e8a693012c317a0bb380142a6
[Packages/TYPO3.CMS.git] / t3lib / js / extjs / components / pagetree / javascript / nodeui.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2010-2011 Stefan Galinski <stefan.galinski@gmail.com>
5 * All rights reserved
6 *
7 * This script is part of the TYPO3 project. The TYPO3 project is
8 * free software; you can redistribute it and/or modify
9 * it under the terms of the GNU General Public License as published by
10 * the Free Software Foundation; either version 2 of the License, or
11 * (at your option) any later version.
12 *
13 * The GNU General Public License can be found at
14 * http://www.gnu.org/copyleft/gpl.html.
15 * A copy is found in the textfile GPL.txt and important notices to the license
16 * from the author is found in LICENSE.txt distributed with these scripts.
17 *
18 *
19 * This script is distributed in the hope that it will be useful,
20 * but WITHOUT ANY WARRANTY; without even the implied warranty of
21 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
22 * GNU General Public License for more details.
23 *
24 * This copyright notice MUST APPEAR in all copies of the script!
25 ***************************************************************/
26 Ext.namespace('TYPO3.Components.PageTree');
27
28 /**
29 * @class TYPO3.Components.PageTree.DeletionDropZone
30 *
31 * Tree Node User Interface that can handle sprite icons and more
32 *
33 * @namespace TYPO3.Components.PageTree
34 * @extends Ext.tree.TreeNodeUI
35 * @author Stefan Galinski <stefan.galinski@gmail.com>
36 */
37 TYPO3.Components.PageTree.PageTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
38 /**
39 * Adds the sprite icon and adds an event to open the context menu on a single click at the icon node
40 *
41 * @param {Ext.tree.TreeNode} n
42 * @param {Object} a
43 * @param {Ext.tree.TreeNode} targetNode
44 * @param {Boolean} bulkRender
45 * @return {void}
46 */
47 renderElements : function(n, a, targetNode, bulkRender) {
48 // add some indent caching, this helps performance when rendering a large tree
49 this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
50
51 var cb = Ext.isBoolean(a.checked),
52 nel,
53 href = this.getHref(a.href),
54 buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
55 '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
56 '<img alt="" src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
57 // '<img alt="" src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
58 a.spriteIconCode, // TYPO3: add sprite icon code
59 cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
60 '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
61 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
62 '<ul class="x-tree-node-ct" style="display:none;"></ul>',
63 "</li>"].join('');
64
65 if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
66 this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
67 }else{
68 this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
69 }
70
71 // TYPO3 modification to show the readable rootline above the user mounts
72 if (a.readableRootline !== '') {
73 var rootline = '<div class="x-tree-node-readableRootline">' + a.readableRootline + '</div>';
74 Ext.DomHelper.insertHtml("beforeBegin", this.wrap, rootline);
75 }
76
77 this.elNode = this.wrap.childNodes[0];
78 this.ctNode = this.wrap.childNodes[1];
79 var cs = this.elNode.childNodes;
80 this.indentNode = cs[0];
81 this.ecNode = cs[1];
82 // this.iconNode = cs[2];
83 this.iconNode = (cs[2].firstChild.tagName === 'SPAN' ? cs[2].firstChild : cs[2]); // TYPO3: get possible overlay icon
84 var index = 3; // TYPO3: index 4?
85 if(cb){
86 this.checkbox = cs[3];
87 // fix for IE6
88 this.checkbox.defaultChecked = this.checkbox.checked;
89 index++;
90 }
91 this.anchor = cs[index];
92 this.textNode = cs[index].firstChild;
93
94 // TYPO3: call the context menu on a single click (Beware of drag&drop!)
95 if (!TYPO3.Components.PageTree.Configuration.disableIconLinkToContextmenu
96 || TYPO3.Components.PageTree.Configuration.disableIconLinkToContextmenu === '0'
97 ) {
98 Ext.fly(this.iconNode).on('click', function(event) {
99 this.getOwnerTree().fireEvent('contextmenu', this, event);
100 event.stopEvent();
101 }, n);
102 }
103 },
104
105 /**
106 * Adds a quick tip to the sprite icon
107 *
108 * @param {Ext.tree.TreeNode} node
109 * @param {Object} tip
110 * @param {String} title
111 * @return {void}
112 */
113 onTipChange : function(node, tip, title) {
114 TYPO3.Components.PageTree.PageTreeNodeUI.superclass.onTipChange.apply(this, arguments);
115
116 if(this.rendered){
117 var hasTitle = Ext.isDefined(title);
118 if(this.iconNode.setAttributeNS){
119 this.iconNode.setAttributeNS("ext", "qtip", tip);
120 if(hasTitle){
121 this.iconNode.setAttributeNS("ext", "qtitle", title);
122 }
123 }else{
124 this.iconNode.setAttribute("ext:qtip", tip);
125 if(hasTitle){
126 this.iconNode.setAttribute("ext:qtitle", title);
127 }
128 }
129 }
130 },
131
132 /**
133 * Returns the drag and drop handles
134 *
135 * @return {Object}
136 */
137 getDDHandles: function() {
138 var ddHandles = [this.iconNode, this.textNode, this.elNode];
139 var handlesIndex = ddHandles.length;
140
141 var textNode = Ext.get(this.textNode);
142 for (var i = 0; i < textNode.dom.childNodes.length; ++i) {
143 if (textNode.dom.childNodes[i].nodeName === 'SPAN') {
144 ddHandles[handlesIndex++] = textNode.dom.childNodes[i];
145 if (textNode.dom.childNodes[i].childNodes) {
146 ddHandles[handlesIndex++] = textNode.dom.childNodes[i].childNodes[0];
147 }
148 }
149 }
150
151 return ddHandles;
152 },
153
154 /**
155 * Only set the onOver class if we are not in dragging mode
156 *
157 * @return {void}
158 */
159 onOver: function() {
160 if (!this.node.ownerTree.dontSetOverClass) {
161 TYPO3.Components.PageTree.PageTreeNodeUI.superclass.onOver.apply(this, arguments);
162 }
163 }
164 });
165
166 // XTYPE Registration
167 Ext.reg('TYPO3.Components.PageTree.PageTreeNodeUI', TYPO3.Components.PageTree.PageTreeNodeUI);