bff48edd6c07357da8747fc4509752d49e213a3a
[Packages/TYPO3.CMS.git] / typo3 / sysext / workspaces / Resources / Public / JavaScript / component.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2010 Workspaces Team (http://forge.typo3.org/projects/show/typo3v4-workspaces)
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
27
28 Ext.ns('TYPO3.Workspaces');
29
30 TYPO3.Workspaces.Component = {};
31
32 TYPO3.Workspaces.RowDetail = {};
33 TYPO3.Workspaces.RowDetail.rowDataStore = new Ext.data.DirectStore({
34 storeId : 'rowDetailService',
35 root : 'data',
36 totalProperty : 'total',
37 idProperty : 'id',
38 fields : [
39 {name : 'uid'},
40 {name : 't3ver_oid'},
41 {name : 'table'},
42 {name : 'stage'},
43 {name : 'diff'},
44 {name : 'path_Live'},
45 {name : 'label_Stage'},
46 {name : 'stage_position'},
47 {name : 'stage_count'},
48 {name : 'live_record'},
49 {name : 'comments'},
50 {name : 'icon_Live'},
51 {name : 'icon_Workspace'},
52 {name : 'languageValue'},
53 {name : 'integrity'}
54 ]
55 });
56
57 Ext.override(Ext.XTemplate, {
58 exists: function(o, name) {
59 return typeof o != 'undefined' && o != null && o!='';
60 }
61 });
62
63 Ext.override(Ext.grid.GroupingView, {
64 constructId : function(value, field, idx) {
65 var cfg = this.cm.config[idx],
66 groupRenderer = cfg.groupRenderer || cfg.renderer,
67 val = (this.groupMode == 'value') ? value : this.getGroup(value, {data:{}}, groupRenderer, 0, idx, this.ds);
68
69 var id = this.getPrefix(field) + val;
70 id = id.replace(/[^a-zA-Z0-9_]/g, '');
71 return id;
72 }
73 });
74
75
76 TYPO3.Workspaces.RowDetail.rowDetailTemplate = new Ext.XTemplate(
77 '<div class="t3-workspaces-foldoutWrapper">',
78 '<tpl for=".">',
79 '<tpl>',
80 '<table class="char_select_template" width="100%">',
81 '<tr class="header">',
82 '<th class="char_select_profile_titleLeft">',
83 '{[TYPO3.l10n.localize(\'workspace_version\')]}',
84 '</th>',
85 '<th class="char_select_profile_titleRight">',
86 '{[TYPO3.l10n.localize(\'live_workspace\')]}',
87 '</th>',
88 '</tr>',
89 '<tr>',
90 '<td class="t3-workspaces-foldout-subheaderLeft">',
91 '{[String.format(TYPO3.l10n.localize(\'current_step\'), values.label_Stage, values.stage_position, values.stage_count)]}',
92 '</td>',
93 '<td class="t3-workspaces-foldout-subheaderRight">',
94 '{[String.format(TYPO3.l10n.localize(\'path\'), values.path_Live)]}',
95 '</td>',
96 '</tr>',
97 '<tr>',
98 '<td class="t3-workspaces-foldout-td-contentDiffLeft">',
99 '<div class="t3-workspaces-foldout-contentDiff-container">',
100 '<table class="t3-workspaces-foldout-contentDiff">',
101 '<tr><th><span class="{icon_Workspace}">&nbsp;</span></th><td>{type_Workspace}</td></tr>',
102 '<tpl for="diff">',
103 '<tr><th>{label}</th><td>',
104 '<tpl if="this.exists(content)">',
105 '{content}',
106 '</tpl>',
107 '</td></tr>',
108 '</tpl>',
109 '</table>',
110 '</div>',
111 '</td>',
112 '<td class="t3-workspaces-foldout-td-contentDiffRight">',
113 '<div class="t3-workspaces-foldout-contentDiff-container">',
114 '<table class="t3-workspaces-foldout-contentDiff">',
115 '<tr><th><span class="{icon_Live}"></span></th><td>{type_Live}</td></tr>',
116 '<tpl for="live_record">',
117 '<tr><th>{label}</th><td>',
118 '<tpl if="this.exists(content)">',
119 '{content}',
120 '</tpl>',
121 '</td></tr>',
122 '</tpl>',
123 '</table>',
124 '</div>',
125 '</td>',
126 '</tr>',
127 '<tpl if="this.hasComments(comments)">',
128 '<tr>',
129 '<td class="t3-workspaces-foldout-subheaderLeft">',
130 '<div class="t3-workspaces-foldout-subheader-container">',
131 '{[String.format(TYPO3.l10n.localize(\'comments\'), values.stage_position, values.label_Stage)]}',
132 '</div>',
133 '</td>',
134 '<td class="t3-workspaces-foldout-subheaderRight">',
135 '&nbsp;',
136 '</td>',
137 '</tr>',
138 '<tr>',
139 '<td class="char_select_profile_stats">',
140 '<div class="t3-workspaces-comments">',
141 '<tpl for="comments">',
142 '<div class="t3-workspaces-comments-singleComment">',
143 '<div class="t3-workspaces-comments-singleComment-author">',
144 '{user_username}',
145 '</div>',
146 '<div class="t3-workspaces-comments-singleComment-content-wrapper"><div class="t3-workspaces-comments-singleComment-content">',
147 '<span class="t3-workspaces-comments-singleComment-content-date">{tstamp}</span>',
148 '<div class="t3-workspaces-comments-singleComment-content-title">@ {[String.format(TYPO3.l10n.localize(\'stage\'), values.stage_title)]}</div>',
149 '<div class="t3-workspaces-comments-singleComment-content-text">{user_comment}</div>',
150 '</div></div>',
151 '</div>',
152 '</tpl>',
153 '</div>',
154 '</td>',
155 '<td class="char_select_profile_title">',
156 '&nbsp;',
157 '</td>',
158 '</tpl>',
159 '</tr>',
160 '</table>',
161 '</tpl>',
162 '</tpl>',
163 '</div>',
164 '<div class="x-clear"></div>',
165 {
166 hasComments: function(comments){
167 return comments.length>0;
168 }
169 }
170 );
171
172 TYPO3.Workspaces.RowDetail.rowDataView = new Ext.DataView({
173 store: TYPO3.Workspaces.RowDetail.rowDataStore,
174 tpl: TYPO3.Workspaces.RowDetail.rowDetailTemplate
175 });
176
177 Ext.ns('Ext.ux.TYPO3.Workspace');
178 Ext.ux.TYPO3.Workspace.RowPanel = Ext.extend(Ext.Panel, {
179 constructor: function(config) {
180 config = config || {
181 frame:true,
182 width:'100%',
183 autoHeight:true,
184 layout:'fit',
185 title: TYPO3.l10n.localize('rowDetails')
186 };
187 Ext.apply(this, config);
188 Ext.ux.TYPO3.Workspace.RowPanel.superclass.constructor.call(this, config);
189 }
190 });
191
192 TYPO3.Workspaces.RowExpander = new Ext.grid.RowExpander({
193 menuDisabled: true,
194 hideable: false,
195 getRowClass : function(record, rowIndex, p, ds) {
196 cssClass = '';
197 if (!record.json.allowedAction_nextStage && !record.json.allowedAction_prevStage && !record.json.allowedAction_swap) {
198 cssClass = 'typo3-workspaces-row-disabled ';
199 }
200 if(this.state[record.id]) {
201 cssClass += 'x-grid3-row-expanded';
202 } else {
203 cssClass += 'x-grid3-row-collapsed';
204 }
205 return cssClass;
206 },
207 remoteDataMethod : function (record, index) {
208 TYPO3.Workspaces.RowDetail.rowDataStore.baseParams = {
209 uid: record.json.uid,
210 table: record.json.table,
211 stage: record.json.stage,
212 t3ver_oid: record.json.t3ver_oid,
213 path_Live: record.json.path_Live,
214 label_Stage: record.json.label_Stage
215 };
216 TYPO3.Workspaces.RowDetail.rowDataStore.load({
217 callback: function(r, options, success) {
218 TYPO3.Workspaces.RowExpander.expandRow(index);
219 }
220 });
221 new Ext.ux.TYPO3.Workspace.RowPanel({
222 renderTo: 'remData' + index,
223 items: TYPO3.Workspaces.RowDetail.rowDataView
224 });
225 },
226 onMouseDown : function(e, t) {
227 tObject = Ext.get(t);
228 if (tObject.hasClass('x-grid3-row-expander')) {
229 e.stopEvent();
230 var row = e.getTarget('.x-grid3-row');
231 this.toggleRow(row);
232 }
233 },
234 toggleRow : function(row) {
235 this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'beforeExpand' : 'collapseRow'](row);
236 },
237 beforeExpand : function(row) {
238 if (typeof row == 'number') {
239 row = this.grid.view.getRow(row);
240 }
241 var record = this.grid.store.getAt(row.rowIndex);
242 var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
243
244 if (this.fireEvent('beforexpand', this, record, body, row.rowIndex) !== false) {
245 this.tpl = new Ext.Template("<div id=\"remData" + row.rowIndex + "\" class=\"rem-data-expand\"><\div>");
246 if (this.tpl && this.lazyRender) {
247 body.innerHTML = this.getBodyContent(record, row.rowIndex);
248 }
249 }
250 // toggle remoteData loading
251 this.remoteDataMethod(record, row.rowIndex);
252 return true;
253 },
254 expandRow : function(row) {
255 if (typeof row == 'number') {
256 row = this.grid.view.getRow(row);
257 }
258 var record = this.grid.store.getAt(row.rowIndex);
259 var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
260 this.state[record.id] = true;
261 Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
262 this.fireEvent('expand', this, record, body, row.rowIndex);
263 var i;
264 for(i = 0; i < this.grid.store.getCount(); i++) {
265 if(i != row.rowIndex) {
266 this.collapseRow(i);
267 }
268 }
269 },
270 collapseRow : function(row) {
271 if (typeof row == 'number') {
272 row = this.grid.view.getRow(row);
273 }
274 var record = this.grid.store.getAt(row.rowIndex);
275 var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
276 if (this.fireEvent('beforcollapse', this, record, body, row.rowIndex) !== false) {
277 this.state[record.id] = false;
278 Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
279 this.fireEvent('collapse', this, record, body, row.rowIndex);
280 }
281 }
282 });