2 * ExtJS for the extension manager.
5 * @author Steffen Kamper <info@sk-typo3.de>
7 * @subpackage extension manager
12 /** override mousedown for grid to select checkbox respecting singleSelect */
13 Ext
.override(Ext
.grid
.CheckboxSelectionModel
, {
14 handleMouseDown: function(g
, rowIndex
, e
) {
16 if (this.isSelected(rowIndex
)) {
17 this.deselectRow(rowIndex
);
19 this.selectRow(rowIndex
, true);
20 this.grid
.getView().focusRow(rowIndex
);
25 Ext
.grid
.DynamicColumnModelForLanguages = function(store
){
27 var recordType
= store
.recordType
;
28 var fields
= recordType
.prototype.fields
;
30 for (var i
= 0; i
< fields
.keys
.length
; i
++) {
31 var fieldName
= fields
.keys
[i
];
32 var field
= recordType
.getField(fieldName
);
37 dataIndex
: field
.name
,
43 renderer: function(value
, metaData
, record
, rowIndex
, colIndex
, store
){
44 metaData
.css
+= ' extLangTitleWithIcon';
45 return record
.data
.icon
+ ' <strong>' + value
+ '</strong>';
48 } else if (i
=== 1 || i
=== 2 || i
=== 3) {
53 dataIndex
: field
.name
,
59 renderer: function(value
, metaData
, record
, rowIndex
, colIndex
, store
) {
60 if (value
== TYPO3
.l10n
.localize('translation_checking')) {
61 return '<span class="x-mask-loading"> </span>' + value
;
63 return '<span class="x-mask-loading"> </span>' + value
;;
69 Ext
.grid
.DynamicColumnModelForLanguages
.superclass
.constructor.call(this, cols
);
71 Ext
.extend(Ext
.grid
.DynamicColumnModelForLanguages
, Ext
.grid
.ColumnModel
, {defaultWidth
: 170});
74 TYPO3
.EM
.LanguagesSelectionModel
= new Ext
.grid
.CheckboxSelectionModel({
77 dataIndex
: 'selected',
82 TYPO3
.EM
.LanguagesColumnModel
= new Ext
.grid
.ColumnModel([
83 TYPO3
.EM
.LanguagesSelectionModel
, {
85 header
: TYPO3
.l10n
.localize('lang_language'),
90 renderer: function(value
, metaData
, record
, rowIndex
, colIndex
, store
) {
91 return '<span class="' + record
.data
.cls
+ '"> </span>' + value
;
95 header
: TYPO3
.l10n
.localize('lang_short'),
103 TYPO3
.EM
.LanguagesProgressBar
= new Ext
.ProgressBar ({
107 style
: 'margin: 0 0 20px 0',
115 TYPO3
.EM
.Languages
= Ext
.extend(Ext
.FormPanel
, {
118 id
: 'em-labguage-modul',
122 selectedLanguages
: [],
125 initComponent: function() {
126 var langExtStore
= new Ext
.data
.DirectStore({
127 storeId
: 'em-languageext-store',
129 directFn
: TYPO3
.EM
.ExtDirect
.getInstalledExtkeys
,
131 idProperty
: 'extkey',
132 fields
: [{name
: 'extkey'},{name
: 'icon'},{name
: 'stype'}],
134 'load': function(store
, records
, options
){
136 Ext
.getCmp('lang-checkbutton').enable();
137 Ext
.getCmp('lang-updatebutton').enable();
138 this.restoreExtLanguageGrid();
140 this.languageLoaded
= true;
147 this.langStore
= new Ext
.data
.DirectStore({
148 storeId
: 'em-language-store',
150 directFn
: TYPO3
.EM
.ExtDirect
.getLanguages
,
155 {name
: 'lang', type
: 'string'},
156 {name
: 'label', type
: 'string'},
157 {name
: 'cls', type
: 'string'},
158 {name
: 'selected', type
: 'bool'}
161 'load': function(store
, records
){
162 // get selected languages and update selection and extGrid
163 TYPO3
.settings
.LangLoaded
= false;
165 for (var i
=0; i
<records
.length
; i
++) {
166 if(records
[i
].data
.selected
) {
170 TYPO3
.EM
.LanguagesSelectionModel
.selectRecords(a
);
172 store
.sort('label', 'ASC');
180 languagesLoaded
: false,
182 bodyStyle
: 'padding: 10px 5px 0 5px;',
194 id
: 'em-languagegrid',
196 store
: this.langStore
,
197 cm
: TYPO3
.EM
.LanguagesColumnModel
,
198 sm
: TYPO3
.EM
.LanguagesSelectionModel
,
199 enableColumnMove
: false,
200 onRowClick
: Ext
.emptyFn
,
210 //title: TYPO3.l10n.localize('translation_status'),
213 TYPO3
.EM
.LanguagesActionPanel
,
218 id
: 'LanguagesActionPanel',
228 text
: TYPO3
.l10n
.localize('translation_check_status_button'),
229 id
: 'lang-checkbutton',
233 text
: TYPO3
.l10n
.localize('translation_update_button'),
234 id
: 'lang-updatebutton',
238 TYPO3
.EM
.LanguagesProgressBar
,
241 id
: 'em-extlanguagegrid',
244 loadMask
: {msg
: TYPO3
.l10n
.localize('translation_refresh_languages')},
245 enableColumnMove
: false,
246 enableHdMenu
: false,
248 cm
: new Ext
.grid
.DynamicColumnModelForLanguages(langExtStore
),
252 render
: this.onExtensionLangguageGridRender
260 TYPO3
.EM
.Languages
.superclass
.initComponent
.apply(this, arguments
);
261 this.langGrid
= Ext
.getCmp('em-languagegrid');
262 this.langGrid
.getSelectionModel().on('selectionchange', function(){
263 if (this.languageLoaded
) {
264 this.langGrid
.disable();
265 this.saveSelection();
268 Ext
.getCmp('lang-checkbutton').handler
= this.langActionHandler
.createDelegate(this);
269 Ext
.getCmp('lang-updatebutton').handler
= this.langActionHandler
.createDelegate(this);
272 onExtensionLangguageGridRender: function(grid
) {
273 grid
.fetchingProcess
= false;
274 this.on('cellclick', function(grid
, rowIndex
, columnIndex
, event
) {
275 if (!grid
.fetchingProcess
&& columnIndex
> 0) {
276 var record
= grid
.store
.getAt(rowIndex
);
277 var lang
= grid
.colModel
.config
[columnIndex
].dataIndex
;
279 TYPO3
.l10n
.localize('menu_language_packges'),
280 String
.format(TYPO3
.l10n
.localize('translation_singleCheckQuestion'), lang
, '<strong>' + record
.data
.extkey
+ '</strong>'),
283 this.waitBox
= Ext
.Msg
.wait(
284 String
.format(TYPO3
.l10n
.localize('translation_singleCheck'), lang
, '<strong>' + record
.data
.extkey
+ '</strong>'),
285 TYPO3
.l10n
.localize('translation_checking')
287 TYPO3
.EM
.ExtDirect
.fetchTranslations(record
.data
.extkey
, 1, [lang
], function(response
) {
288 if (response
&& Ext
.isArray(response
)) {
289 record
.set(lang
, response
[lang
]);
292 TYPO3
.Flashmessage
.display(TYPO3
.Severity
.error
, TYPO3
.l10n
.localize('extDirect_timeoutHeader'), TYPO3
.l10n
.localize('extDirect_timeoutMessage'), 5);
304 langActionHandler: function(button
, event
) {
305 var languagegrid
= Ext
.getCmp('em-languagegrid');
306 var buttonPanel
= Ext
.getCmp('LanguagesActionPanel');
307 var progressBar
= Ext
.getCmp('langpb');
308 var grid
= Ext
.getCmp('em-extlanguagegrid');
312 languagegrid
.disable();
315 if (button
.id
=== 'lang-checkbutton') {
317 this.startFetchLanguages(0, Ext
.StoreMgr
.get('em-languageext-store'), function(){
318 TYPO3
.EM
.LanguagesProgressBar
.updateText(this.interruptProcess
? TYPO3
.l10n
.localize('msg_interrupted') : TYPO3
.l10n
.localize('msg_finished'));
322 languagegrid
.enable();
323 grid
.fetchingProcess
= false;
324 }).defer(1000, this);
325 if (!this.interruptProcess
) {
326 TYPO3
.Flashmessage
.display(TYPO3
.Severity
.information
, TYPO3
.l10n
.localize('translation_checking_extension'), TYPO3
.l10n
.localize('translation_check_done'), 3);
327 Ext
.getCmp('em-extlanguagegrid').getSelectionModel().clearSelections();
332 this.startFetchLanguages(1, Ext
.StoreMgr
.get('em-languageext-store'), function(){
333 TYPO3
.EM
.LanguagesProgressBar
.updateText(this.interruptProcess
? TYPO3
.l10n
.localize('msg_interrupted') : TYPO3
.l10n
.localize('msg_finished'));
334 if (!this.interruptProcess
) {
335 TYPO3
.Flashmessage
.display(TYPO3
.Severity
.information
, TYPO3
.l10n
.localize('translation_update_extension'), TYPO3
.l10n
.localize('translation_update_done'), 3);
336 Ext
.getCmp('em-extlanguagegrid').getSelectionModel().clearSelections();
340 languagegrid
.enable();
341 grid
.fetchingProcess
= false;
346 getSelectedLanguages: function() {
347 var selLanguages
= this.langGrid
.getSelectionModel().getSelections();
348 this.selectedLanguages
= [];
349 if (selLanguages
.length
> 0 ) {
350 for (var i
=0; i
<selLanguages
.length
; i
++) {
351 this.selectedLanguages
.push(selLanguages
[i
].data
.lang
);
356 saveSelection: function() {
357 if (this.languageLoaded
=== true) {
358 this.getSelectedLanguages();
359 TYPO3
.EM
.ExtDirect
.saveLanguageSelection(this.selectedLanguages
, function(response
) {
360 this.languageLoaded
= false;
361 if (response
.success
) {
362 for (var i
= 0; i
< response
.diff
.length
; i
++) {
363 record
= this.langStore
.getById(response
.diff
[i
]);
364 this.addRemoveExtLanguageGridColumn(record
.data
);
365 if (response
.dir
> 0) {
366 // Languages were added
367 this.langGrid
.getSelectionModel().selectRow(this.langGrid
.store
.indexOf(record
), true);
369 // Languages were removed
370 this.langGrid
.getSelectionModel().deselectRow(this.langGrid
.store
.indexOf(record
), true);
374 // Action not possible because of dependencies
375 // Select all languages saved again and output the message
376 for (var i
= 0; i
< response
.languages
.length
; i
++) {
377 record
= this.langStore
.getById(response
.languages
[i
]);
378 this.langGrid
.getSelectionModel().selectRow(this.langGrid
.store
.indexOf(record
), true);
380 TYPO3
.Flashmessage
.display(TYPO3
.Severity
.error
, TYPO3
.l10n
.localize('translation_settings'), TYPO3
.l10n
.localize('translation_selection_impossible'), 5);
381 this.langGrid
.enable();
383 this.languageLoaded
= true;
385 if (this.selectedLanguages
.length
) {
386 Ext
.getCmp('lang-checkbutton').enable();
387 Ext
.getCmp('lang-updatebutton').enable();
389 Ext
.getCmp('lang-checkbutton').disable();
390 Ext
.getCmp('lang-updatebutton').disable();
395 startFetchLanguages: function(type
, store
, callback
) {
396 this.fetchType
= type
;
397 this.extCount
= store
.data
.items
.length
;
402 this.extkeyArray
= [];
403 for (var i
= 0; i
< this.extCount
; i
++) {
404 this.extkeyArray
.push(store
.data
.items
[i
].data
.extkey
);
406 if (!this.selectedLanguages
.length
) {
407 this.getSelectedLanguages();
410 this.interruptProcess
= false;
411 Ext
.getCmp('em-extlanguagegrid').fetchingProcess
= true;
412 this.fetchLanguage();
415 fetchLanguage: function(response
) {
416 var grid
= Ext
.getCmp('em-extlanguagegrid');
417 var row
= this.extCount
- this.extkeyArray
.length
;
418 var record
= grid
.store
.getAt(row
);
423 // update fetched record
424 var fetchedRecord
= grid
.store
.getAt(row
- 1);
425 for (i
= 0; i
< this.selectedLanguages
.length
; i
++) {
426 fetchedRecord
.set(this.selectedLanguages
[i
], response
[this.selectedLanguages
[i
]]);
428 fetchedRecord
.commit();
431 if(this.extkeyArray
.length
> 0 && !this.interruptProcess
) {
432 var ext
= this.extkeyArray
.shift();
436 grid
.getView().focusRow(row
);
437 grid
.getSelectionModel().selectRow(row
);
438 for (i
= 0; i
< this.selectedLanguages
.length
; i
++) {
439 record
.set(this.selectedLanguages
[i
], '<span class="loading-indicator"></span>' + TYPO3
.l10n
.localize('translation_checking'));
442 var prefix
= TYPO3
.l10n
.localize('msg_checking');
443 if (this.fetchType
=== 1) {
444 prefix
= TYPO3
.l10n
.localize('msg_updating');
446 // update Progressbar
447 Ext
.getCmp('langpb').updateProgress(
448 (row
+ 1) / this.extCount
,
450 String
.format(TYPO3
.l10n
.localize('translation_fetch_extension'), ext
, (row
+1), this.extCount
));
452 // fetch language request
453 TYPO3
.EM
.ExtDirect
.fetchTranslations(ext
, this.fetchType
, this.selectedLanguages
, function(response
) {
454 this.fetchLanguage(response
);
458 Ext
.getCmp('lang-checkbutton').enable();
459 Ext
.getCmp('lang-updatebutton').enable();
460 Ext
.getCmp('em-extlanguagegrid').getSelectionModel().clearSelections();
467 restoreExtLanguageGrid: function() {
469 var extLangGrid
= Ext
.getCmp('em-extlanguagegrid');
472 var selLanguages
= Ext
.getCmp('em-languagegrid').getSelectionModel().getSelections();
473 var columns
= extLangGrid
.getColumnModel();
474 var count
= columns
.getColumnCount();
476 if (selLanguages
.length
> 0 ) {
477 for (i
=0; i
< selLanguages
.length
; i
++) {
478 this.addRemoveExtLanguageGridColumn(selLanguages
[i
].data
);
483 addRemoveExtLanguageGridColumn: function(record
) {
484 var extLangGrid
= Ext
.getCmp('em-extlanguagegrid');
485 var columns
= extLangGrid
.getColumnModel();
486 var index
= columns
.getIndexById(record
.lang
);
489 extLangGrid
.addColumn({
491 defaultValue
: TYPO3
.l10n
.localize('translation_status_notchecked')
493 header
: '<span class="' + record
.cls
+ '"> </span>' + record
.label
,
494 dataIndex
: record
.lang
,
496 css
: 'cursor:pointer;',
497 tooltip
: TYPO3
.l10n
.localize('translation_singleCheckTip')
500 columns
.removeColumn(index
);
502 this.langGrid
.enable();
505 afterRender: function() {
507 TYPO3
.EM
.Languages
.superclass
.afterRender
.apply(this, arguments
);
508 //The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc, pageUp, pageDown, del, home, end
509 this.progressNavigation
= new Ext
.KeyNav(this.getEl(),{
511 this.interruptProcess
= true;
519 Ext
.reg('extlanguages', TYPO3
.EM
.Languages
);