Dateiverwaltung für die WebBox
ulrich
2021-01-17 0783c52c0ea7d1dfd11c127f3360b543d605b22f
commit | author | age
05e9c4 1 function AppVorlage() {
U 2   var self = this;
41ab37 3   this.appMenu;
4e450e 4   //this.vorlagen;
41ab37 5   this.api;
U 6   this.userid;
7   this.pfad = '';
8   this.loc;
9   this.modus = 'kacheln';
ebc1f3 10   this.cm;
4e450e 11   //this.tinymce;
U 12   this.ed;
13   this.tmo;
14   this.tmo2;
41ab37 15   this.PERS_DIR = "Persoenlich";
U 16   this.PUB_DIR = "Oeffentlich";
17   this.DAV_DIR = "Austausch";
18   this.BASE_DIR = "$basis";
19   this.DATA_DIR = "$daten";
20   this.WWW_DIR = "www";
f002d9 21   this.openEditor;
U 22   this.openFileName;
beb124 23   this.cutCopyOperation;
U 24   this.cutCopySrcDir;
25   this.cutCopyFiles;
41ab37 26   this.cache = {}; // mustache template cache
05e9c4 27
94b871 28   this.datei_neuer_text = function () {
ebc1f3 29     //self.meldung_mit_timeout("Neuer Text", 1500);
U 30     self.fm_text_edit('Neue Datei');
31   };
32   
05e9c4 33   /* Funktionen aus App-Vorlage */
94b871 34
4e450e 35   this.init = function () {    
f002d9 36     document.querySelector(".codeeditor-space").style.display = "none";
U 37     document.querySelector("#mce-editor").style.display = "none";
05e9c4 38     self.appMenu = new AppMenu();
U 39     self.appMenu.init(
94b871 40             "data/menu/",
U 41             "hauptmenue.json",
42             "data/tpl/app-menu.tpl",
43             ".west",
44             "8em");
45     document.querySelector('.hamburger').addEventListener('click', function (e) {
05e9c4 46       self.menue_umschalten();
U 47     });
58bcbd 48     self.fm_get_login();
41ab37 49     
U 50     var parsedUrl = new URL(window.location.href);
51     var wunschPfad = parsedUrl.searchParams.get("pfad");
52
53     if(wunschPfad !== null && wunschPfad.length > 0) {
54       self.pfad = wunschPfad;
55       self.fm_get_list(wunschPfad);
56     } else {
57       self.fm_get_list('');
58     }
ebc1f3 59     
U 60     self.seitenleiste_umschalten();
41ab37 61     //fm_init_uploader();
58bcbd 62     self.loc = window.location.protocol + '//' + window.location.host;
05e9c4 63   };
U 64
58bcbd 65   this.login_zeigen = function() {
U 66     self.meldung_mit_timeout("Benutzer: " + self.userid, 1500);
67   };
68   
b20b74 69   this.fm_neuer_reiter = function() {
U 70     window.open('/file-cms/ui2/?pfad=' + self.pfad, '_blank');
71   };
72   
94b871 73   this.menue_umschalten = function () {
05e9c4 74     var ham = document.querySelector(".hamburger");
U 75     ham.classList.toggle("is-active"); // hamburger-icon umschalten
76     self.appMenu.toggle(); // menue oeffnen/schliessen
77   };
78
94b871 79   this.info_dialog_zeigen = function () {
05e9c4 80     self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
U 81     self.menue_umschalten();
82   };
83
94b871 84   this.seitenleiste_umschalten = function () {
05e9c4 85     var ostDiv = document.querySelector('.ost');
94b871 86     if (ostDiv.classList.contains('ost-open')) {
05e9c4 87       ostDiv.classList.remove('ost-open');
94b871 88       ostDiv.style.flexBasis = '0em';
05e9c4 89     } else {
94b871 90       ostDiv.classList.add('ost-open');
U 91       ostDiv.style.flexBasis = '6em';
05e9c4 92     }
ebc1f3 93     //self.menue_umschalten();
05e9c4 94   };
U 95
94b871 96   this.fusszeile_umschalten = function () {
05e9c4 97     var suedDiv = document.querySelector('.sued');
94b871 98     if (suedDiv.classList.contains('sued-open')) {
05e9c4 99       suedDiv.classList.remove('sued-open');
94b871 100       suedDiv.style.height = '0';
05e9c4 101     } else {
U 102       suedDiv.classList.add('sued-open');
94b871 103       suedDiv.style.height = '1.5em';
05e9c4 104     }
U 105     self.menue_umschalten();
106   };
107
94b871 108   this.meldung_mit_timeout = function (meldung, timeout) {
05e9c4 109     var s = document.querySelector('.sued');
U 110     s.textContent = meldung;
85ba85 111     s.classList.add('sued-open');
U 112     s.style.height = '1.5em';
94b871 113     setTimeout(function () {
05e9c4 114       s.textContent = 'Bereit.';
94b871 115       setTimeout(function () {
05e9c4 116         var suedDiv = document.querySelector('.sued');
94b871 117         if (suedDiv.classList.contains('sued-open')) {
U 118           suedDiv.classList.remove('sued-open');
119           suedDiv.style.height = '0';
05e9c4 120         }
U 121       }, 500);
122     }, timeout);
123   };
ebc1f3 124   
U 125   this.fm_menu_datei_schliessen = function() {
126     if(self.openEditor === 'text') {
127       if(!self.cm.getDoc().isClean()) {
128         self.fm_ask_for_save();
129       } else {
130         self.fm_do_close();
131       }
132     } else {
4e450e 133       if(tinymce.activeEditor.undoManager.hasUndo()) {
ebc1f3 134         self.fm_ask_for_save();
U 135       } else {
136         self.fm_do_close();
137       }
138     }
139   };  
140
141   this.fm_ask_for_save = function() {
142     self.dialog_laden_und_zeigen('data/tpl/dlg-ask-save.tpl', '', function() {
143       // wenn dialog da ist, hier events verknuepfen
144       document.querySelector('#cancel-btn').addEventListener('click', function() {
145         self.fm_do_close();
146         self.dialog_schliessen();
147       });
148       document.querySelector('#speichern-btn').addEventListener('click', function() {
149         self.fm_menu_datei_speichern(function() {
150           self.fm_do_close();
151           self.dialog_schliessen();
152         });
153       });
154     });
155   };
156
157   this.fm_menu_datei_speichern = function(callback) {
158     //var fname = $('.datei-gewaehlt').text();
159     var fname = self.openFileName;
160     if(fname !== undefined && fname !== '') {
161       self.fm_save_file(fname, 'saveTextFile', callback);
162     } else {
163       self.fm_menu_datei_speichern_unter(callback);
164     }
165   };
166   
167   this.fm_menu_datei_speichern_unter = function(callback) {  
168     self.dialog_laden_und_zeigen('data/tpl/dlg-save-as.tpl', '', function() {
5b4d03 169       document.querySelector('#cancel-btn').addEventListener('click', function() {
U 170         //self.fm_do_close();
171         self.dialog_schliessen();
172       });
173       document.querySelector('#speichern-btn').addEventListener('click', function() {
1a9589 174         //self.fm_menu_datei_speichern(function() {
U 175           //console.log(document.querySelector('#datei-name-in').value);
5b4d03 176           self.fm_save_file(document.querySelector('#datei-name-in').value, 'saveTextFileAs', callback);
4e450e 177           if(typeof(callback) !== 'function') {
U 178             self.fm_do_close();
179             self.dialog_schliessen();
180           }
1a9589 181         //});
5b4d03 182       });
ebc1f3 183     });    
4e450e 184   };
U 185   
186   this.fm_menu_neues_dokument = function() {
187     self.fm_dok_edit('');
ebc1f3 188   };
05e9c4 189
U 190   /* Dialog-Funktionen */
191
192   /*
94b871 193    Einen Dialog aus Vorlagen erzeugen
U 194    
195    vurl - URL zur Dialogvorlage
196    msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
197    */
ebc1f3 198   this.dialog_laden_und_zeigen = function (vurl, msgTpl, cb) {
U 199     var vorlage = self.cache[vurl];
200     if(vorlage === undefined) {
201       self.fm_get(vurl, "text", function(antwort) {
202         self.cache[vurl] = antwort;
203         self.dialog_zeigen(vurl, antwort, cb);
204         //self.vorlage_fuellen(vurl, inhalt, cb);
94b871 205       });
05e9c4 206     } else {
ebc1f3 207       self.dialog_zeigen(vurl, vorlage, cb);
05e9c4 208     }
U 209   };
210
ebc1f3 211   this.dialog_zeigen = function (vurl, inhalt, cb) {
05e9c4 212     var dlg = document.querySelector(".dialog");
ebc1f3 213     self.html_erzeugen(
94b871 214             vurl,
U 215             inhalt,
216             function (html) {
217               //dlg.html(html);
1a9589 218               dlg.style.height = '7em';
94b871 219               dlg.innerHTML = html;
U 220               document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
221               //dlg.slideDown(300);
ebc1f3 222               if(typeof(cb) !== 'function') {
U 223                 // ..
224               } else {
225                 cb();
226               }
94b871 227             });
05e9c4 228   };
U 229
58bcbd 230   this.dialog_schliessen = function () {
05e9c4 231     document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
U 232     //$('.dialog').slideUp(300);
233     var dlg = document.querySelector('.dialog');
234     //dlg.style.display = "none";
235     dlg.style.height = '0';
236     dlg.innerHTML = '';
5b4d03 237     self.removeAllListeners('#cancel-btn');
U 238     self.removeAllListeners('#speichern-btn');
05e9c4 239   };
39e714 240   
U 241   this.fm_auswahl_marke_entfernen = function() {
242     var gew = document.querySelector('.datei-gewaehlt');
243     if(gew !== null) {
244       gew.classList.remove('datei-gewaehlt');
245     }        
246   };
0783c5 247   
U 248   this.fm_view_file = function() {
249     var fname = document.querySelector('.datei-gewaehlt').textContent;
250     var path = self.fm_get_path(self.userid);
251     window.open(path + '/' + fname, '_blank');
252   };
39e714 253
0783c5 254   this.datei_ansehen_oder_bearbeiten = function(dateiname) {
U 255     if(dateiname.endsWith('htmi')) {
256       self.fm_get_file_content('doc', dateiname);
257     } else if(dateiname.endsWith('jpg') || dateiname.endsWith('png') || 
258             dateiname.endsWith('gif') || dateiname.endsWith('pdf')) {
259       
260     } else {
261       self.fm_get_file_content('text', dateiname);      
262     }
39e714 263   };
U 264   
265   /**
85ba85 266    * Hier werden die folgenden Faelle einer Datei- 
U 267    * bzw. Ordnerauswahl ausgefuehrt:
268    * 
269    * geklickt, nicht gewaehlt: 
270    *    auswaehlen, evtl. bestehende andere Auswahl entfernen
271    *    
272    * geklickt, ausgewaehlt: 
273    *    Datei ansehen oder oeffnen bzw. Ordner oeffnen
274    *    
275    * geklickt mit [Strg], nicht gewahlt: 
276    *    auswaehlen, bestehende Auswahl beibehalten (Mehrfachauswahl)
277    *    
278    * geklickt mit [Strg], gewaehlt: 
279    *    Auswahl bei diesem Element entfernen
39e714 280    * 
U 281    * Diese Fälle sind unterteilt in 
85ba85 282    *    1. Kachel-Modus
U 283    *    2. Listenmodus
39e714 284    * 
85ba85 285    * @param {type} ev Klick-Event
U 286    * @returns {undefined} nichts 
39e714 287    */
6648a8 288   this.fm_dateiwahl = function(ev) {
U 289     var elem = ev.target;
290     if(self.modus == 'kacheln') {
291       // Kacheln
0783c5 292       var par = elem.parentElement;
U 293       var dElem = par.querySelector('.dateiname');
6648a8 294       if(elem.classList.contains("icon-folder")) {
39e714 295         // Ordner
0783c5 296         //var par = elem.parentElement;
U 297         var istGewaehlt = dElem.classList.contains('datei-gewaehlt');
39e714 298         if(istGewaehlt) {
U 299           if(/*ev.shiftKey || */ ev.ctrlKey) {
300             // mehrere Ordner sind gewaehlt, diese eine wieder entfernen
0783c5 301             dElem.classList.remove('datei-gewaehlt');
6648a8 302           } else {
39e714 303             // Ordner oeffnen
0783c5 304             var ordner = dElem.textContent.trim();
39e714 305             if(self.pfad.length > 0) {
U 306               self.pfad = self.pfad + '/' + ordner;
307             } else {
308               self.pfad = ordner;
309             }
310             self.fm_get_list(self.pfad);
6648a8 311           }
39e714 312         } else {
U 313           // Ordner auswaehlen
314           if(/*ev.shiftKey || */ ev.ctrlKey) {
315             // Mehrfachauswahl
316           } else {
317             self.fm_auswahl_marke_entfernen();
318           }
0783c5 319           dElem.classList.add('datei-gewaehlt');
6648a8 320         }
U 321       } else if(elem.classList.contains('datei')) {
39e714 322         // Datei
0783c5 323         //var par = elem.parentElement;
U 324         //var dElem = par.querySelector('.dateiname');
325         var istGewaehlt = dElem.classList.contains('datei-gewaehlt');
39e714 326         if(istGewaehlt) {
U 327           if(/*ev.shiftKey || */ ev.ctrlKey) {
328             // mehrere Dateien sind gewaehlt, diese eine wieder entfernen
0783c5 329             dElem.classList.remove('datei-gewaehlt');
39e714 330           } else {
U 331             // Datei zum Bearbeiten oeffnen
0783c5 332             self.datei_ansehen_oder_bearbeiten(dElem.textContent);
39e714 333           }
U 334         } else {
335           if(/*ev.shiftKey || */ ev.ctrlKey) {
336             // mehrere Dateien sollen gewaehlt werden
337           } else {
338             self.fm_auswahl_marke_entfernen();
339           }
0783c5 340           dElem.classList.add('datei-gewaehlt');
39e714 341         }
6648a8 342       } else {
U 343         //console.log('kein folder oder file...');
344       }
345     } else {
4f01b8 346       // Liste
U 347       var pElem = elem.closest('.datei-zeile');
348       var dElem = pElem.querySelector('.datei-elem');
0783c5 349       var dnElem = pElem.querySelector('.dateiname');
U 350       var istGewaehlt = dnElem.classList.contains('datei-gewaehlt');
4f01b8 351       if(dElem.getElementsByTagName("i")[0].classList.contains('icon-doc-text-inv')) {
6648a8 352         // Datei
39e714 353         if(istGewaehlt) {
U 354           if(/*ev.shiftKey || */ ev.ctrlKey) {
355             // mehrere Dateien sind gewaehlt, diese eine wieder entfernen
0783c5 356             dnElem.classList.remove('datei-gewaehlt');
39e714 357           } else {
U 358             // gewaehlte Datei ohne [Strg] geklickt: ansehen oder oeffnen
0783c5 359             self.datei_ansehen_oder_bearbeiten(dnElem.textContent);
39e714 360           }
6648a8 361         } else {
39e714 362           if(/*ev.shiftKey || */ ev.ctrlKey) {
U 363             // mehrere Dateien sollen gewaehlt werden, Auswahl ist weiter unten
364           } else {
365             var ti = document.querySelector('.table-info');
366             if(ti !== null) {
367               ti.classList.remove('table-info');
368             }
369             self.fm_auswahl_marke_entfernen();
4f01b8 370           }
39e714 371           pElem.classList.add('table-info');
0783c5 372           dnElem.classList.add('datei-gewaehlt');
6648a8 373         }
U 374       } else {
375         // Ordner
39e714 376         if(istGewaehlt) {
U 377           if(/*ev.shiftKey || */ ev.ctrlKey) {
378             // ein gewaehlter Ordner ist mit [Strg] geklickt, Auswahl entfernen
0783c5 379             dnElem.classList.remove('datei-gewaehlt');
6648a8 380           } else {
39e714 381             // Ordner oeffnen
0783c5 382             var ordner = dnElem.textContent;
39e714 383             if(self.pfad.length > 0) {
U 384               self.pfad = self.pfad + '/' + ordner;
385             } else {
386               self.pfad = ordner;
387             }
388             self.fm_get_list(self.pfad);
6648a8 389           }
39e714 390         } else {
U 391           if(/*ev.shiftKey || */ ev.ctrlKey) {
392             // nicht gewaehlter Ordner und [Strg]: zu Mehrfachauswahl hinzufuegen
393           } else {
394             // nicht gewaehlter Ordner ohne [Strg]: andere Auswhalen entfernen und weiter unten Ordner auswaehlen
395             self.fm_auswahl_marke_entfernen();
396           }
0783c5 397           dnElem.classList.add('datei-gewaehlt');
6648a8 398         }
U 399       }   
400     }
401   };
402  
41ab37 403   
58bcbd 404   this.fm_render_list = function (fl) {
4f01b8 405     if (self.modus === 'kacheln') {
58bcbd 406       // Kachelansicht
6648a8 407       self.html_erzeugen("data/tpl/kacheln.tpl", fl, function(html) {
U 408         var elem = document.querySelector('#dateien');
409         elem.innerHTML = html;
410         self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
411       });
58bcbd 412     } else {
U 413       // Listenansicht
4f01b8 414       self.html_erzeugen("data/tpl/liste.tpl", fl, function(html) {
U 415         var elem = document.querySelector('#dateien');
416         elem.innerHTML = html;
417         self.addEvtListener('.datei-zeile', 'click', self.fm_dateiwahl);
418       });
58bcbd 419     }
U 420   };
421   
422   this.fm_get_path = function (uid) {
423     var restdir;
424     if (self.pfad.indexOf(self.PUB_DIR) > -1) {
425       restdir = self.pfad.substr(self.PUB_DIR.length);
426     } else if (self.pfad.indexOf(self.PERS_DIR) > -1) {
427       restdir = self.pfad.substr(self.PERS_DIR.length);
428     } else if (self.pfad.indexOf(self.BASE_DIR) > -1) {
429       restdir = self.pfad.substr(self.BASE_DIR.length);
430     } else if (self.pfad.indexOf(self.DATA_DIR) > -1) {
431       restdir = self.pfad.substr(self.DATA_DIR.length);
432     } else if (self.pfad.indexOf(self.DAV_DIR) > -1) {
433       restdir = self.pfad.substr(self.DAV_DIR.length);
434     }
435     if (restdir !== undefined && restdir.startsWith('/')) {
436       restdir = restdir.substr(1);
437       if (restdir.indexOf(self.WWW_DIR) > -1) {
438         restdir = restdir.replace(self.WWW_DIR, 'data');
439       }
440     }
41ab37 441     var pdir = self.fm_get_base(uid);
58bcbd 442     if (restdir.length > 1) {
U 443       return pdir + "/" + restdir;
444     } else {
445       return pdir;
446     }
447   };
448
449   this.fm_get_base = function (uid) {
450     var pdir;
451     if (self.pfad.indexOf(self.PUB_DIR) > -1) {
452       pdir = '/data/' + uid;
453     } else if (self.pfad.indexOf(self.PERS_DIR) > -1) {
454       pdir = '/home/' + uid;
455     } else if (self.pfad.indexOf(self.BASE_DIR) > -1) {
456       pdir = '';
457     } else if (self.pfad.indexOf(self.DATA_DIR) > -1) {
458       pdir = '';
459     }
460     return pdir;
461   };
2864b2 462   
U 463   /**
464    * Aus einem relativen Pfad ein Array aus BcrFile Objekten 
465    * machen
466    * 
467    * @param {String} relPfad  der relative Pfad
468    * @returns {Array}  die BcrFile-Objekte zum Pfad als Array
469    */
470   this.fm_buildBreadcrumb = function(relPfad) {
471     var rp = '';
472     var dirList = new Array();
473     dirList.push(new BcrFile(rp, 'Home'));
474     if(relPfad.length > 1) {
475       var dirs = relPfad.split('/');
476       for(var i = 0; i < dirs.length; i++) {
477         if(rp.length > 0 ) {
478           // weitere Einträge
479           dirList.push(new BcrFile(rp + '/' + dirs[i], dirs[i]));
480           rp = rp + '/' + dirs[i];
481         } else {
482           // erster Eintrag
483           dirList.push(new BcrFile(dirs[i], dirs[i]));
484           rp = dirs[i];
485         }
486       }
487     }
488     return dirList;
489   };
490   
4f01b8 491   /*
U 492    * icon-th-large
493    * icon-th-list
494    * @returns {undefined}
495    */
496   this.fm_ansicht_umschalten = function() {
497     var elem = document.querySelector('#ansicht');
498     var iElem = elem.getElementsByTagName("i")[0];
499     if(iElem.classList.contains('icon-th-list')) {
500       iElem.classList.add('icon-th-large');
501       iElem.classList.remove('icon-th-list');
502       self.modus = 'liste';
503     } else {
504       iElem.classList.add('icon-th-list');
505       iElem.classList.remove('icon-th-large');
506       self.modus = 'kacheln';
507     }
508     self.fm_get_list(self.pfad);    
509   };
510
511   this.fm_set_modus = function() {
512     var elem = document.querySelector('#ansicht');
513     var iElem = elem.getElementsByTagName("i")[0];
514     if(self.modus === 'kacheln') {
515       iElem.classList.add('icon-th-list');    
516       iElem.classList.remove('icon-th-large');
517     } else {
518       iElem.classList.add('icon-th-large');
519       iElem.classList.remove('icon-th-list');
520     }    
521   };
522
523   
2864b2 524   /**
U 525    * Der letzte Eintrag in dirs ist der aktuelle Ordner und 
526    * deshalb ausgegraut.
527    * 
528    * Wenn nur ein Ordner in dirs enthalten ist, dann sind wir 
529    * an der obersten Ebene (Home).
530    * 
531    * @param {Array} dirList ein Array aus BcrFile-Objekten
532    * @returns nichts 
533    */
534   this.fm_renderBreadcrumb = function(dirList) {
535     var elem = document.querySelector('.breadcrumb');
536     if(dirList.length > 1) {
537       var last = dirList.pop();
538       var bcList = new BcrFiles(dirList);
4f01b8 539       
2864b2 540       self.html_erzeugen("data/tpl/bcr.tpl", bcList, function(html) {
4f01b8 541         var htmlGesamt = html;
2864b2 542         self.html_erzeugen("data/tpl/bcr2.tpl", last, function(html) {
4f01b8 543           htmlGesamt += html;          
U 544           self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) {
545             htmlGesamt += html;
546             elem.innerHTML = htmlGesamt;
547             self.addEvtListener('.bc-link', 'click', self.fm_bc_click);
548             self.addEvtListener('#ansicht', 'click', self.fm_ansicht_umschalten);
549             self.fm_set_modus();
550           });
551           
2864b2 552         });                  
U 553       });            
554     } else {
555       // oberste Ebene
4f01b8 556       var htmla;
U 557       var htmlb;
2864b2 558       self.html_erzeugen("data/tpl/bcr2.tpl", dirList[0], function(html) {
4f01b8 559         htmla = html;        
U 560         self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) {
561           htmlb = html;
562           elem.innerHTML = htmla + htmlb;
563           self.addEvtListener('.bc-link', 'click', self.fm_bc_click);
564           self.addEvtListener('#ansicht', 'click', self.fm_ansicht_umschalten);
565           self.fm_set_modus();
566         });
2864b2 567       });            
U 568     }
569   };
570   
571   /**
572    * Auf den Klick auf ein Breadcrumb-Element reagieren:
573    * Den Ordner-Inhalt des geklickten Elements anzeigen
574    * @returns nichts
575    */
576   this.fm_bc_click = function() {
577     var elem = this;
578     var bcPfad = elem.getAttribute("rpath");
579     if(bcPfad !== undefined) {
580       self.pfad = bcPfad;
581       self.fm_get_list(bcPfad);
582     } else {
583       pfad = '';
584       self.fm_get_list('');
585     }
586   };
587
beb124 588   /* ------- Dateifunktionen Start ----------- */
U 589
590   this.fm_menu_cut = function() {
591     console.log('fm_menu_cut');
592     self.fm_cut_files();
593   };
39e714 594   this.fm_menu_copy = function() {
beb124 595     console.log('fm_menu_kopie');
U 596     self.fm_copy_files();
597   };
598   this.fm_menu_paste = function() {
599     console.log('fm_menu_paste');
600     self.fm_paste_files();
601   };
602   this.fm_menu_delete = function() {
603     self.dialog_laden_und_zeigen('data/tpl/dlg-ask-del.tpl', '', function() {
604       // wenn dialog da ist, hier events verknuepfen
605       document.querySelector('#cancel-btn').addEventListener('click', function() {
606         //self.fm_do_close();
607         self.dialog_schliessen();
608       });
609       document.querySelector('#speichern-btn').addEventListener('click', function() {
39e714 610         //self.fm_menu_datei_speichern(function() {
beb124 611           self.fm_del_files();
U 612           self.dialog_schliessen();
39e714 613         //});
beb124 614       });
U 615     });
616     /*
617     $('#confirmOk').click(function() {
618       $('#confirmOk').attr('onclick','').unbind('click');
619       fm_del_files();
620     });
621     $('#confirmOk').text("Loeschen");
622     $('#confirmOk').removeClass('btn-primary');
623     $('#confirmOk').addClass('btn-danger');
624     $('#confirmClose').hide();
625     $('#confirmModalTitle').text("Löschen");
626     $('#confirmModalBody').text("Wirklich löschen?");
627     $('#confirmModal').modal({
628       keyboard: false,
629       show: true
630     });
631     */
632   };
633   
634   /*
635    * Hier merkt sich die Dateiverwalting die markierten Dateien fuer 
636    * eine Dateioperation. Bei cut wird in der 'paste' Operation auf dem Server 
637    * fuer die 'gemerkten' Dateien ein Move gemacht. Die Dateien werden 
638    * vom gewaehlten Ort zum Zielort verschoben.
639    * 
640    * @returns {undefined}
641    */
642   this.fm_cut_files = function() {
643     console.log('fm_cut_files');
644     self.cutCopySrcDir = self.pfad;
645     self.cutCopyFiles = self.fm_gewaehlte_dateien();
646     self.cutCopyOperation = 'cut';
647   };
648
649   /*
650    * Hier merkt sich die Dateiverwalting die markierten Dateien fuer 
651    * eine Dateioperation. Bei copy wird in der 'paste' Operation auf dem Server 
652    * fuer die 'gemerkten' Dateien eine Kopie gemacht. Die Dateien werden 
653    * am gewaehlten Ort behalten und am Zielort wird eine Kopier der 
654    * gewaehlten DAteien erstellt
655    * 
656    * @returns {undefined}
657    */
658   this.fm_copy_files = function() {
659     console.log('fm_copy_files');
660     self.cutCopySrcDir = self.pfad;
661     self.cutCopyFiles = self.fm_gewaehlte_dateien();
662     self.cutCopyOperation = 'copy';
663   };
664   
665   
666
667   /*
668    * Gewaehlte Dateien feststellen
669    * 
670    * @returns {String} eine per JSON.stringify schon vorbereitete List zum 
671    * Absenden als Parameter an den Server
672    */
673   this.fm_gewaehlte_dateien = function() {
674     //var gewaehlte = $('.datei-gewaehlt');
675     var gewaehlte = document.querySelectorAll('.datei-gewaehlt');
676     /*
677     //console.log('anzahl: ' + gewaehlte.length);
678     var fnames = new Array();
679     var i = 0;
680     while(i < gewaehlte.length) {
681       var str = { "java.lang.String": $(gewaehlte[i]).text()};
682       fnames.push(str);
683       //console.log('loeschen ' + pfad + ' ' + $(gewaehlte[i]).text());
684       //i += 2;
685       i++;
686     }
687     var liste = '{"List":' + JSON.stringify(fnames) + '}';
688     // 'liste' enthaelt:
689     // {"List":[{"java.lang.String":"test3.txt"},{"java.lang.String":"Test1.txt"},{"java.lang.String":"Test2.txt"}]}
690     // und wird auf dem Server zu einer List[ArrayList<String>] bei der jede ArrayList<String> nur ein Element hat 
691     return liste;
692     */
693     return self.fm_dateiliste_bilden(gewaehlte);
694   };
695
696   this.fm_dateiliste_bilden = function(gewaehlte) {
697     var fnames = new Array();
698     var i = 0;
699     while(i < gewaehlte.length) {
700       var str = { "java.lang.String": gewaehlte[i].innerText};
701       fnames.push(str);
702       //console.log('loeschen ' + pfad + ' ' + $(gewaehlte[i]).text());
703       //i += 2;
704       i++;
705     }
706     var liste = '{"List":' + JSON.stringify(fnames) + '}';
707     // 'liste' enthaelt:
708     // {"List":[{"java.lang.String":"test3.txt"},{"java.lang.String":"Test1.txt"},{"java.lang.String":"Test2.txt"}]}
709     // und wird auf dem Server zu einer List[ArrayList<String>] bei der jede ArrayList<String> nur ein Element hat 
710     console.log(liste);
711     return liste;
712   };
713
714   this.fm_menu_html_export = function() {
715     self.fm_export_html();
716   };
717
718   /* --------- Dateifunktionen Ende ---------- */
719
94b871 720   /* API functions */
05e9c4 721
94b871 722   // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p=
U 723   this.fm_get_list = function (relPfad) {
724     var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad;
725     var u = '../svc' + m;
58bcbd 726     self.fm_get(u, "json", function (respText) {
U 727       var resp = JSON.parse(respText);
94b871 728       if (resp.List[0].FileRef !== undefined) {
U 729         var files = new Array();
730         if (resp.List[0].FileRef instanceof Array) {
731           for (var i = 0; i < resp.List[0].FileRef.length; i++) {
732             files.push(new FileRef(resp.List[0].FileRef[i]));
05e9c4 733           }
U 734         } else {
94b871 735           files.push(new FileRef(resp.List[0].FileRef));
05e9c4 736         }
94b871 737         var fl = new FileList(files);
58bcbd 738         self.fm_render_list(fl);
94b871 739       } else {
58bcbd 740         // #dateien leeren
8ba358 741         var elem = document.querySelector("#dateien");
U 742         elem.innerHTML = '';
94b871 743       }
8ba358 744       
U 745       // Breadcrumb
746       
2864b2 747       var dirList = self.fm_buildBreadcrumb(relPfad);
4f01b8 748       self.fm_renderBreadcrumb(dirList);     
94b871 749     });
U 750   };
f002d9 751   
1a9589 752   this.datei_neuer_ordner = function() {
U 753     self.dialog_laden_und_zeigen('data/tpl/dlg-ask-folder.tpl', '', function() {
754       document.querySelector('#cancel-btn').addEventListener('click', function() {
755         self.dialog_schliessen();
756       });
757       document.querySelector('#speichern-btn').addEventListener('click', function() {
758         var m = '?c=de.uhilger.filecms.api.FileMgr&m=newFolder&p=' + 
759                 self.pfad + 
760                 '&p=' + document.querySelector('#folder-name-in').value;
761         var u = '../svc' + m;
762         self.fm_get(u, "json", function(resp) {
763           self.dialog_schliessen();
764           self.fm_get_list(self.pfad);
765         });
766       });
767     });    
768   };
769
ebc1f3 770   this.fm_edit_as_text = function() {
0783c5 771     self.fm_get_sel_for_file_content('text');
4e450e 772   };
U 773   
774   this.fm_edit_as_doc = function() {
0783c5 775     self.fm_get_sel_for_file_content('doc');
ebc1f3 776   };
U 777   
0783c5 778   this.get_sel_for_file_content = function(typ) {
f002d9 779     var gewaehlte = document.querySelector('.datei-gewaehlt');
U 780     //var fname = $(gewaehlte).find('.dateiname').text();
781
782     var fname = gewaehlte.textContent;
0783c5 783     self.fm_get_file_content(typ, fname);
U 784   };
785   
786   this.fm_get_file_content = function(typ, fname) {
787     //var gewaehlte = document.querySelector('.datei-gewaehlt');
788     //var fname = $(gewaehlte).find('.dateiname').text();
789
790     //var fname = gewaehlte.textContent;
ebc1f3 791     //console.log('fname: ' + fname);
f002d9 792     self.openFileName = fname;
U 793     var m = '?c=de.uhilger.filecms.api.FileMgr&m=getCode&p=' + self.pfad + '&p=' + fname;
794     var u = '../svc' + m;
795     self.fm_get(u, "text", function(resp) {
796       if(typ === 'text') {
797         var mode = "text/x-java";
798         if(fname.endsWith('js')) {
799           mode = 'javascript';
800         } else if(fname.endsWith('xml')) {
801           mode = 'xml';
802         } else if(fname.endsWith('properties')) {
803           mode = 'xml';
804         } else if(fname.endsWith('adoc')) {
805           mode = 'text/x-markdown';
806         }
807         self.fm_text_edit(resp, mode);
808       } else {
809         self.fm_dok_edit(resp);
810       }
811     });
812   };
813
ebc1f3 814   this.fm_save_file = function(saveFileName, method, callback) {
U 815     var content;
816     if(self.openEditor === 'text') {
817       content = self.cm.getValue();
818       self.cm.getDoc().markClean();
819     } else {
4e450e 820       content = self.ed.getContent();
ebc1f3 821       tinymce.activeEditor.undoManager.clear();
U 822     }
823     var m = '?c=de.uhilger.filecms.api.FileMgr&m=' + method;
5b4d03 824     var u = '../svc' + m;
U 825     var data = '&p=' + self.pfad + '&p=' + saveFileName + '&p=' + encodeURIComponent(content);
826     self.fm_post(u, data, "text", function(resp) {
827       // ...
ebc1f3 828     });
U 829     self.openFileName = saveFileName;
830     if(typeof (callback) !== 'function') {
831
832     } else {
833       callback();
834     }
835   };
836
beb124 837   /*
U 838    * Hier wird fuer eine zuvor markierte Liste von Dateien, fuer die 
839    * Cut oder Copy gewaehlt wurde, die Operations ausgefuehrt (move oder copy)
840    * @returns {undefined}
841    */
842   this.fm_paste_files = function() {
843     var m;
844     if(self.cutCopyOperation === 'cut') {
845       //m = '?c=de.uhilger.filecms.api.FileMgr&m=moveFiles'; //&p=' + cutCopySrcDir + '&p=' + pfad + '&p=' + encodeURIComponent(liste);
846       m = '?c=de.uhilger.filecms.api.FileMgr&m=moveFiles&p=' + self.cutCopySrcDir + '&p=' + self.pfad + '&p=' + encodeURIComponent(self.cutCopyFiles);
847     } else {
848       //m = '?c=de.uhilger.filecms.api.FileMgr&m=copyFiles'; //&p=' + cutCopySrcDir + '&p=' + pfad + '&p=' + encodeURIComponent(liste);
849       m = '?c=de.uhilger.filecms.api.FileMgr&m=copyFiles&p=' + self.cutCopySrcDir + '&p=' + self.pfad + '&p=' + encodeURIComponent(self.cutCopyFiles);
850     }
851     var u = '../svc' + m;  
852     self.fm_get(u, "text", function(resp) {
853       // console.log('deleteFiles gab folgendes zurueck: ' + resp);
854       self.fm_get_list(self.pfad);
855     });
856   };
ebc1f3 857
beb124 858   this.fm_del_files = function() {
U 859     var liste = self.fm_gewaehlte_dateien();
860     var m = '?c=de.uhilger.filecms.api.FileMgr&m=deleteFiles&p=' + self.pfad + '&p=' + encodeURIComponent(liste);
861     var u = '../svc' + m;
862     self.fm_get(u, "text", function(resp) {
863       // console.log('deleteFiles gab folgendes zurueck: ' + resp);
864       self.fm_get_list(self.pfad);
865     });
866   };
f002d9 867
U 868 /* ---- codemirror editor handling -------- */
869
870   /*
871   function htmlDecode(value){ 
872     return $('<div/>').html(value).text(); 
873   }
874   */
875
876   this.fm_code_edit = function(content, m) {
ebc1f3 877     //console.log('fm_code_edit content: ' + content.substring(0,30));
U 878     self.cm = CodeMirror.fromTextArea(document.getElementById("editspace"), {
f002d9 879       lineNumbers: true,
U 880       lineWrapping: true,
881       gutters: ["CodeMirror-linenumbers", "breakpoints"],
882       mode: m,
883       viewportMargin : Infinity,
884       tabSize: 2,
885       extraKeys: {
886           "F9": function(cm) {
887           cm.setOption("fullScreen", !cm.getOption("fullScreen"));
888         },
889           "Esc": function(cm) {
890           if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
891         },
892           ".": function(cm) {
893           console.log('dot pressed: perhaps look up class or method name');
894           /*
895            * Hier kann man eine Funktion ausloesen, die fuer das 
896            * Wort vor dem Punkt (Name der Klasse) eine Liste mit 
897            * Vorschlaegen fuer Methodennamen einblendet.
898            */
899
900           /*
901            * CodeMirror.Pass laesst das Zeichen zum Editorinhalt durch, 
902            * verhindert aber das Ausloesen von 'keyHandled'
903            */
904           return CodeMirror.Pass; 
905         }
906       }
907     });
908     //cm.setValue(htmlDecode(content));
909     //cm.setValue(content);
ebc1f3 910     self.cm.setValue(self.unescapeHtml(content));
U 911     self.cm.getDoc().markClean();
912     self.cm.on("gutterClick", function(theEditor, lineNumber) {
f002d9 913       var info = theEditor.lineInfo(lineNumber);
U 914       //--lineNumber;
915       //console.log(info.gutterMarkers.breakpoints.message);
916       //var marker = info.gutterMarkers.breakpoints;
917       //$(marker).tooltip('toggle');
918     });
919     /*
920     cm.on("keyHandled", function(theEditor, keyName, event){
921       console.log('cm.keyHandled keyName: ' + keyName + ', event.type: ' + event.type);    
922     });
923     */
924   };
925
926   this.makeMarker = function(msg) {
927     var marker = document.createElement("div");
928     marker.style.color = "#822";
929     marker.innerHTML = "●";
930     //marker.message = msg;
931     $(marker).tooltip({
932       placement: 'right',
933       title: msg,
934       offset: '0 -30'
935     });
936     return marker;
937   };
938
4e450e 939   /* ---- TinyMCE editor handling -------- */
U 940
941   this.fm_dok_editor_init = function(uid) {
942     var base = self.fm_get_path(uid);
943     //var edCount = 0;
944     //console.log("fm_dok_editor_init calling tinymce.init with base: " + base + "/");
945
946     /*
947      * vgl.
948      * http://stackoverflow.com/questions/4651676/how-do-i-remove-tinymce-and-then-re-add-it
949      */
950     //tinymce.EditorManager.execCommand('mceRemoveControl',true, 'textarea.text-editor');
951     //tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);
952     if(self.ed !== undefined) {
953       self.ed.destroy();
954     }
955     if(tinymce !== undefined) {
956       tinymce.remove('textarea.text-editor');
957       tinymce.EditorManager.editors = []; 
958     }
959
960     /*
961      * Konfiguration TinyMCE
962      */
963     tinymce.init({
964       content_css : "/file-cms/ui/mce.css",
965       //content_css: "/jslib/bootstrap/css/bootstrap.min.css",
966       selector: "textarea.text-editor",
967       statusbar: false,
968       menubar: false,
969       plugins: 'advlist charmap code image link lists media table print preview save table textcolor importcss',
970       toolbar: 'undo redo | styleselect | image table | link unlink | bullist numlist | outdent indent | code',
971       /*
972       menu: {
973         file: {title: 'File', items: 'savevers | exit'},
974         edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
975         view: {title: 'View', items: 'visualaid | code | link image media | template hr'},
976       },
977       */
978       resize: 'both',
979       importcss_append: true,
980       width: "100%",
981       height: '100%',
982       relative_urls : true, 
983       convert_urls : false, 
984       document_base_url : base + "/",
985       setup: function (editor) {
986         self.ed = editor;
987       }
988     });
989
990     window.addEventListener('resize', self.fm_resize_editor);
991     //$(window).on('resize', self.fm_resize_editor);
992     self.fm_resize_editor();
993   };
994
995   this.fm_resize_editor = function() {
996     window.clearTimeout(self.tmo);
997     self.tmo = window.setTimeout(function () {
998       try {
999         var myHeight = document.querySelector('.inhalt').offsetHeight - 
1000                 document.querySelector('.nord').offsetHeight + 2; // - 4;
1001         //console.log('myHeight: ' + myHeight);
1002         self.ed.theme.resizeTo('100%', myHeight);  // sets the dimensions of the editable area
1003       } catch (err) {
1004       }
1005     }, 200);
1006   };
1007
1008
f002d9 1009   
U 1010   /* -------- Editoren --------- */
1011   
1012   this.fm_text_edit = function(content, mode) {
1013     document.querySelector(".codeeditor-space").style.display = "block";
5b4d03 1014     //document.querySelector(".code-editor-container").style.display = "block";
U 1015     //document.querySelector(".zentrum-behaelter").style.display = "none";
1016     document.querySelector(".breadcrumb").style.display = "none";
1017     document.querySelector(".zentrum").style.display = "none";
f002d9 1018     self.fm_code_edit(content, mode);  
U 1019     self.openEditor = 'text';
1020   };
1021
1022   this.fm_dok_edit = function(content) {
1023     //fm_filectls_hide();
4e450e 1024     self.fm_dok_editor_init(self.userid);
U 1025     document.querySelector("#mce-editor").style.display = "block";
1026     //$("#mce-editor").show();
1027     document.querySelector(".breadcrumb").style.display = "none";
1028     document.querySelector(".zentrum").style.display = "none";
f002d9 1029
4e450e 1030     window.clearTimeout(self.tmo2);
U 1031     self.tmo2 = window.setTimeout(function () {
f002d9 1032       try {
4e450e 1033         self.ed.setContent(content);
U 1034         self.openEditor = 'dok';  
f002d9 1035       } catch (err) {
U 1036       }
1037     }, 200);
1038   };
ebc1f3 1039   
U 1040   this.fm_do_close = function() {
1041     document.querySelector(".codeeditor-space").style.display = "none";
4e450e 1042     document.querySelector("#mce-editor").style.display = "none";
U 1043     // $("#mce-editor").hide();
5b4d03 1044     //document.querySelector(".code-editor-container").style.display = "none";
U 1045     //document.querySelector(".zentrum-behaelter").style.display = "block";
1046     document.querySelector(".breadcrumb").style.display = "block";
1047     document.querySelector(".zentrum").style.display = "block";
ebc1f3 1048     if(self.cm !== undefined) {
U 1049       self.cm.toTextArea();
1050     }
1051     self.openFileName = '';
1052     self.openEditor = '';
1053     self.fm_get_list(self.pfad);
1054   };
05e9c4 1055
94b871 1056   /* -------- An- und Abmelden ------------- */
05e9c4 1057
94b871 1058   this.fm_get_login = function() {
U 1059     var m = '?c=de.uhilger.filecms.pub.SessionManager&m=getSessionUser';
1060     var u = '../pub' + m;
1061     self.fm_get(u, "text", function (resp) {
1062       self.userid = resp;
58bcbd 1063       self.login_zeigen();
U 1064       //document.querySelector("#userMenu").textContent = resp;
94b871 1065     });
U 1066   };
05e9c4 1067
94b871 1068   this.fm_logout = function() {
U 1069     var m = '?c=de.uhilger.filecms.pub.SessionManager&m=expireSession';
1070     var u = '../pub' + m;
1071     self.fm_get(u, "text", function (resp) {
1072       //$('#userMenu').text('nicht angemeldet');
1073       window.location.href = '../logout.html';
1074     });
1075   };
41ab37 1076   
6648a8 1077   /* ----- Hilfsfunktionen ----- */
U 1078
1079   this.serialisieren = function(obj) {
1080     return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
1081   };
1082   
1083   this.addEvtListener = function(selector, eventName, func) {
1084     document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
1085   };
1086   
1087   this.removeAllListeners = function(id) {
1088     var el = document.getElementById(id);
5b4d03 1089     if(el !== null) {
U 1090       elClone = el.cloneNode(true);
1091       el.parentNode.replaceChild(elClone, el);
1092     }
6648a8 1093   }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type
U 1094
ebc1f3 1095   this.escapeHtml = function(text) {
U 1096     text = text.replace(/\u228/g,'&auml;');
1097     text = text.replace(/\u246/g,'&ouml;');
1098     text = text.replace(/\u252/g,'&uuml;');
1099     text = text.replace(/\u196/g,'&Auml;');
1100     text = text.replace(/\u214/g,'&Ouml;');
1101     text = text.replace(/\u220/g,'&Uuml;');
1102     text = text.replace(/\u223/g,'&szlig;');
1103     text = text.replace(/\u26/g,'&amp;');
1104     return text;
1105   };
1106
1107   this.unescapeHtml = function(text) {
1108     text = text.replace(/&auml;/g, String.fromCharCode(228));
1109     text = text.replace(/&ouml;/g, String.fromCharCode(246));
1110     text = text.replace(/&uuml;/g, String.fromCharCode(252));
1111     text = text.replace(/&Auml;/g, String.fromCharCode(196));
1112     text = text.replace(/&Ouml;/g, String.fromCharCode(214));
1113     text = text.replace(/&Uuml;/g, String.fromCharCode(220));
1114     text = text.replace(/&szlig;/g, String.fromCharCode(223));
1115     text = text.replace(/&amp;/g, String.fromCharCode(26));
1116     return text;
1117   };
1118
41ab37 1119   /* ---- Vorlagen ---- */
U 1120
1121   this.html_erzeugen = function(vurl, inhalt, cb) {
1122     var vorlage = self.cache[vurl];
1123     if(vorlage === undefined) {
1124       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
1125     } else {
1126       self.vorlage_fuellen(vurl, inhalt, cb);
1127     }
1128   };
1129
1130   this.vorlage_fuellen = function(vurl, inhalt, cb) {
1131     cb(Mustache.render(self.cache[vurl], inhalt));
1132   };
1133
1134   this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
1135     self.fm_get(vurl, "text", function(antwort) {
1136       self.cache[vurl] = antwort;
1137       self.vorlage_fuellen(vurl, inhalt, cb);
1138     });
1139   };
94b871 1140
U 1141   /* -------- ajax helper functions ----------- */
1142
58bcbd 1143   this.fm_get = function (u, dtype, scallback) {    
U 1144     var xmlhttp = new XMLHttpRequest();
1145     var url = u;
1146     xmlhttp.onreadystatechange = function() {
5b4d03 1147       if (this.readyState === 4 && this.status === 200) {
58bcbd 1148         scallback(this.responseText);
94b871 1149       }
58bcbd 1150     };
U 1151     xmlhttp.open("GET", url, true);
1152     xmlhttp.send();
94b871 1153   };
ebc1f3 1154   
U 1155   self.fm_post = function(u, d, dtype, scallback) {
1156     var xmlhttp = new XMLHttpRequest();
1157     var url = u;
1158     xmlhttp.onreadystatechange = function() {
5b4d03 1159       if (this.readyState === 4 && this.status === 200) {
ebc1f3 1160         scallback(this.responseText);
U 1161       }
1162     };
1163     xmlhttp.open("POST", url, true);
1164     xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
5b4d03 1165     xmlhttp.send(d);
ebc1f3 1166   };
U 1167
5b4d03 1168   /*
ebc1f3 1169   this.http_get = function(u, cb)  {
U 1170     self.http_call('GET', u, null, cb);
1171   };
1172   
1173   this.http_post = function(u, data, cb) {
1174     self.http_call('POST', u, data, cb);
1175   };
1176
1177   this.http_call = function (method, u, data, scallback) {    
1178     var xhr = new XMLHttpRequest();
1179     var url = u;
1180     xhr.onreadystatechange = function() {
1181       if (this.readyState === 4 && this.status === 200) {
1182         scallback(this.responseText);
1183       }
1184     };
5b4d03 1185     xhr.open(method, url, false);
ebc1f3 1186     if(method === 'GET')  {
U 1187       xhr.send();
1188     } else if(method === 'POST' || method === 'PUT') {
1189       xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
1190       xhr.send(data);
1191     }
1192   };
5b4d03 1193   */
ebc1f3 1194
94b871 1195
05e9c4 1196 }