1a1066063bcecd47c5a5add71a3c12506068feb4
[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 rootline = '';
55
56 // TYPO3 modification to show the readable rootline above the user mounts
57 if (a.readableRootline !== '') {
58 var rootline = '<li class="x-tree-node-readableRootline">' + a.readableRootline + '</li>';
59 }
60
61 var buf = [rootline,'<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">',
62 '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
63 '<img alt="" src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
64 // '<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" />',
65 a.spriteIconCode, // TYPO3: add sprite icon code
66 cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
67 '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
68 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
69 '<ul class="x-tree-node-ct" style="display:none;"></ul>',
70 "</li>"].join('');
71
72 if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
73 this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
74 }else{
75 this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
76 }
77
78
79 this.elNode = this.wrap.childNodes[0];
80 this.ctNode = this.wrap.childNodes[1];
81 var cs = this.elNode.childNodes;
82 this.indentNode = cs[0];
83 this.ecNode = cs[1];
84 // this.iconNode = cs[2];
85 this.iconNode = (cs[2].firstChild.tagName === 'SPAN' ? cs[2].firstChild : cs[2]); // TYPO3: get possible overlay icon
86 var index = 3; // TYPO3: index 4?
87 if(cb){
88 this.checkbox = cs[3];
89 // fix for IE6
90 this.checkbox.defaultChecked = this.checkbox.checked;
91 index++;
92 }
93 this.anchor = cs[index];
94 this.textNode = cs[index].firstChild;
95
96 // TYPO3: call the context menu on a single click (Beware of drag&drop!)
97 if (!TYPO3.Components.PageTree.Configuration.disableIconLinkToContextmenu
98 || TYPO3.Components.PageTree.Configuration.disableIconLinkToContextmenu === '0'
99 ) {
100 Ext.fly(this.iconNode).on('click', function(event) {
101 this.getOwnerTree().fireEvent('contextmenu', this, event);
102 event.stopEvent();
103 }, n);
104 }
105 },
106
107 /**
108 * Adds a quick tip to the sprite icon
109 *
110 * @param {Ext.tree.TreeNode} node
111 * @param {Object} tip
112 * @param {String} title
113 * @return {void}
114 */
115 onTipChange : function(node, tip, title) {
116 TYPO3.Components.PageTree.PageTreeNodeUI.superclass.onTipChange.apply(this, arguments);
117
118 if(this.rendered){
119 var hasTitle = Ext.isDefined(title);
120 if(this.iconNode.setAttributeNS){
121 this.iconNode.setAttributeNS("ext", "qtip", tip);
122 if(hasTitle){
123 this.iconNode.setAttributeNS("ext", "qtitle", title);
124 }
125 }else{
126 this.iconNode.setAttribute("ext:qtip", tip);
127 if(hasTitle){
128 this.iconNode.setAttribute("ext:qtitle", title);
129 }
130 }
131 }
132 },
133
134 /**
135 * Returns the drag and drop handles
136 *
137 * @return {Object}
138 */
139 getDDHandles: function() {
140 var ddHandles = [this.iconNode, this.textNode, this.elNode];
141 var handlesIndex = ddHandles.length;
142
143 var textNode = Ext.get(this.textNode);
144 for (var i = 0; i < textNode.dom.childNodes.length; ++i) {
145 if (textNode.dom.childNodes[i].nodeName === 'SPAN') {
146 ddHandles[handlesIndex++] = textNode.dom.childNodes[i];
147 if (textNode.dom.childNodes[i].childNodes) {
148 ddHandles[handlesIndex++] = textNode.dom.childNodes[i].childNodes[0];
149 }
150 }
151 }
152
153 return ddHandles;
154 },
155
156 /**
157 * Only set the onOver class if we are not in dragging mode
158 *
159 * @return {void}
160 */
161 onOver: function() {
162 if (!this.node.ownerTree.dontSetOverClass) {
163 TYPO3.Components.PageTree.PageTreeNodeUI.superclass.onOver.apply(this, arguments);
164 }
165 }
166 });
167
168 // XTYPE Registration
169 Ext.reg('TYPO3.Components.PageTree.PageTreeNodeUI', TYPO3.Components.PageTree.PageTreeNodeUI);