Vorlage für Webapps
view | history | commit | commitdiff
ulrich
2019-12-15 8ca5e8bfa494ec9af80b58b96cbf3e86f7a340ee
commit | author | age
d3a2d9 1 function AppVorlage() {
U 2   var self = this;
403f2f 3   var appMenu;
34aa39 4   var vorlagen;
d3a2d9 5
U 6   this.init = function() {
34aa39 7     self.vorlagen = new Vorlagen();
403f2f 8     self.appMenu = new AppMenu();
U 9     self.appMenu.init(
d3a2d9 10       "data/menu/",
U 11       "hauptmenue.json",
8ca5e8 12       "data/tpl/app-menu.tpl",
d3a2d9 13       ".west",
U 14       "8em");
ee3787 15
e39457 16     document.querySelector('.hamburger').addEventListener('click', function(e) {
34aa39 17       self.menue_umschalten();
df8c52 18     });
U 19
20   };
21
34aa39 22   this.menue_umschalten = function() {
ee3787 23     var ham = document.querySelector(".hamburger");
U 24     ham.classList.toggle("is-active"); // hamburger-icon umschalten
403f2f 25     self.appMenu.toggle(); // menue oeffnen/schliessen
d3a2d9 26   };
34aa39 27
U 28   this.info_dialog_zeigen = function() {
29     self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
30     self.menue_umschalten();
31   };
32
33   this.seitenleiste_umschalten = function() {
e39457 34     var ostDiv = document.querySelector('.ost');
U 35     if(ostDiv.classList.contains('ost-open')) {
36       ostDiv.classList.remove('ost-open');
ee3787 37         ostDiv.style.flexBasis = '0em';
34aa39 38     } else {
ee3787 39         ostDiv.classList.add('ost-open');
U 40         ostDiv.style.flexBasis = '6em';
34aa39 41     }
U 42     self.menue_umschalten();
43   };
44
45   this.fusszeile_umschalten = function() {
e39457 46     var suedDiv = document.querySelector('.sued');
U 47     if(suedDiv.classList.contains('sued-open')) {
48       suedDiv.classList.remove('sued-open');
ee3787 49         suedDiv.style.height = '0';
34aa39 50     } else {
e39457 51       suedDiv.classList.add('sued-open');
ee3787 52         suedDiv.style.height = '1.5em';
34aa39 53     }
U 54     self.menue_umschalten();
55   };
56
57   this.menu_message = function(msg) {
58     self.meldung_mit_timeout(msg, 1500);
e39457 59     var suedDiv = document.querySelector('.sued');
U 60     if(suedDiv.classList.contains('sued-open')) {
34aa39 61     } else {
e39457 62       suedDiv.classList.add('sued-open');
ee3787 63         suedDiv.style.height = '1.5em';
34aa39 64     }
U 65     self.menue_umschalten();
66   };
67
68   this.message_1 = function() {
69     self.menu_message('Eine Mitteilung.');
70   };
71
72   this.message_2 = function() {
73     self.menu_message('Was wir schon immer sagen wollten.');
74   };
75
76   this.message_3 = function(text) {
77     self.menu_message(text);
78   };
79
80   this.meldung_mit_timeout = function(meldung, timeout) {
e39457 81     var s = document.querySelector('.sued');
ee3787 82     s.textContent = meldung;
34aa39 83     setTimeout(function() {
ee3787 84       s.textContent = 'Bereit.';
34aa39 85       setTimeout(function() {
e39457 86         var suedDiv = document.querySelector('.sued');
U 87         if(suedDiv.classList.contains('sued-open')) {
ee3787 88               suedDiv.classList.remove('sued-open');
U 89               suedDiv.style.height = '0';
34aa39 90         }
U 91       }, 500);
92     }, timeout);
93   };
94
95   /* Dialog-Funktionen */
96
97   /*
98     Einen Dialog aus Vorlagen erzeugen
99
100     vurl - URL zur Dialogvorlage
101     msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
102   */
103   this.dialog_laden_und_zeigen = function(vurl, msgTpl) {
104     if(msgTpl !== '') {
ee3787 105       fetch(msgTpl)
U 106         .then(data => {
107           // Handle data
108           self.dialog_zeigen(vurl, data);
109         }).catch(error => {
110           // Handle error
111         });
34aa39 112     } else {
U 113       self.dialog_zeigen(vurl, '');
114     }
115   };
116
117   this.dialog_zeigen = function(vurl, inhalt) {
ee3787 118     var dlg = document.querySelector(".dialog");
34aa39 119     self.vorlagen.html_erzeugen(
U 120       vurl,
121       inhalt,
122       function(html) {
ee3787 123         //dlg.html(html);
U 124         dlg.style.height = '5em';
125         dlg.innerHTML = html;
126         document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
127         //dlg.slideDown(300);
34aa39 128     });
U 129   };
130
131   self.dialog_schliessen = function() {
ee3787 132     document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
U 133     //$('.dialog').slideUp(300);
134     var dlg = document.querySelector('.dialog');
135     //dlg.style.display = "none";
136     dlg.style.height = '0';
137     dlg.innerHTML = '';
34aa39 138   };
U 139
140
d3a2d9 141 }