root/java/sql-vyuka/web/hlavni.js @ 64:b9a61f912f6a

Revision 64:b9a61f912f6a, 8.1 KB (checked in by František Kučera <franta-hg@…>, 15 years ago)

Uživatel může kliknout myší na SQL kód v historii a načíst si ho – nemusí ho opisovat nebo kopírovat.

RevLine 
[3]1/** ID html prvků */
2const vstupniPole = 'vstupniPole';
3const vystupniPole = 'vystupniPole';
4const napovedniPole = 'napovedniPole';
[20]5const stavovePole = 'stavovePole';
[3]6
7
[2]8/**
9 * Aby to fungovalo i v MSIE 6.
10 * @return AJAXový objekt.
11 */
12function getXmlHttpRequestObject() {
13    if (window.XMLHttpRequest) {
14        return new XMLHttpRequest();
15    } else if(window.ActiveXObject) {
16        return new ActiveXObject("Microsoft.XMLHTTP");
17    } else {
[48]18        alert(document.getElementById('lokalizace').nepodporovany.value);
[2]19        return null;
20    }
21}
22
[22]23
[2]24/** Náš AJAXový objekt. */
25var ajax = getXmlHttpRequestObject();
26
[22]27
[2]28/**
[3]29 * Vrací vstup od uživatele.
30 * @return SQL příkaz zadaný uživatelem.
31 **/
32function getSQL() {
[48]33    return document.getElementById('aplikace').vstupniPole.value;
[3]34}
35
[22]36
[3]37/**
[2]38 * Zobrazí text na požadovaném místě.
[22]39 * @param text text k zobrazení. V případě formulářů prostý text, v ostatních případech HTML text.
40 * @param kde id prvku, do kterého se má text vypsat.
[2]41 **/
42function zobraz(text, kde) {
[19]43    if (kde == vstupniPole) {
[60]44        document.getElementById('aplikace').vstupniPole.value = vratEntity(text);
[20]45    } else if (kde == stavovePole)  {
[60]46        document.getElementById('aplikace').stavovePole.value = vratEntity(text);
[19]47    } else {
48        document.getElementById(kde).innerHTML = text + '<p>&nbsp;<!-- Šťastné hackování ;-) --></p>';
49    }
[2]50}
51
52
53/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
[5]54function ajaxVykonatSQL() {
[2]55    if (ajax.readyState == 4 || ajax.readyState == 0) {
[48]56        zobraz(document.getElementById('lokalizace').probihaSQL.value, stavovePole);
[24]57        ajax.open("POST", 'ajax.jspx?akce=vykonat&sql=' + encodeURIComponent(getSQL()), true);
[19]58        ajax.onreadystatechange = function() {
59            if (ajax.readyState == 4) {
[22]60                zobraz(ajax.responseText, vystupniPole);
61                zobraz('', stavovePole);
[19]62            }
63        };
[2]64        ajax.send(null);
65    }
[39]66    ulozURL();
[2]67}
[5]68
69
70/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
71function ajaxZobrazitHistorii() {
72    if (ajax.readyState == 4 || ajax.readyState == 0) {
[48]73        zobraz(document.getElementById('lokalizace').probihaHistorie.value, stavovePole);
[24]74        ajax.open("POST", 'ajax.jspx?akce=historie', true);
[19]75        ajax.onreadystatechange = function() {
76            if (ajax.readyState == 4) {
[22]77                zobraz(ajax.responseText, vystupniPole);
78                zobraz('', stavovePole);
[64]79                aktivujHistorii();
[19]80            }
81        };
[5]82        ajax.send(null);
83    }
84}
[38]85
86var pruvodceAktualniId = 0;
[39]87var urlOdkaz = new Array();
88urlOdkaz['pruvodce'] = null;
[38]89
90function ajaxPruvodcePredchozi() {
91    ajaxPruvodceNaviguj('predchozi', pruvodceAktualniId, null);
92}
93
94function ajaxPruvodceZpet() {
[42]95    /** TODO: historie navigace */
96    alert('Tato funkce se teprve připravuje.');
[38]97}
98
99function ajaxPruvodceVpred() {
[42]100    /** TODO: historie navigace */
101    alert('Tato funkce se teprve připravuje.');
[38]102}
103
104function ajaxPruvodceNasledujici() {
105    ajaxPruvodceNaviguj('nasledujici', pruvodceAktualniId, null);
106}
107
108function ajaxPruvodceKod(kod) {
109    ajaxPruvodceNaviguj('podleKodu', 0, kod);
110}
111
112function ajaxPruvodceId(id) {
113    ajaxPruvodceNaviguj('podleId', id, null);
114
115}
116
[50]117function ajaxPruvodceNaviguj(akcePruvodce, id, kod) {
[38]118    if (ajax.readyState == 4 || ajax.readyState == 0) {
119        ajax.open("POST", 'ajax.jspx?akce=napoveda&pruvodce=' + encodeURIComponent(akcePruvodce) + '&idPruvodce=' + encodeURIComponent(id) + '&kodPruvodce=' + encodeURIComponent(kod), true);
120        ajax.onreadystatechange = function() {
121            if (ajax.readyState == 4) {
122                zobraz(ajax.responseText, napovedniPole);
[39]123                /** Uložíme si do paměti ID aktuální stránky */
[58]124                if (document.getElementById('pruvodceData')) {
125                    pruvodceAktualniId = document.getElementById('pruvodceData').id.value;
[38]126                } else {
127                    pruvodceAktualniId = 0;
128                }
[39]129                /** Změníme URL v prohlížeči */
[40]130                urlOdkaz['pruvodce']  = 'pruvodce=' + encodeURIComponent(pruvodceAktualniId);
[39]131                ulozURL();
[49]132                sestavStromy();
[60]133                aktivujPruvodce();
[57]134            }
[38]135        };
136        ajax.send(null);
137    }
138}
[39]139
140/**
[40]141 * Parametry si ukládáme za # do URL (window.location.hash)
142 * Můžeme měnit URL, aniž by prohlížeč obnovoval stránku.
143 * Uživatel si může URL zkopírovat a obnovit si příště stav aplikace.
[39]144 * @param parametr jméno parametru, který hledáme
145 * @return hodnota parametr
146 */
147function getParametr(parametr) {
148    parametr = parametr.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
149    //var regexS = "[\\?&]"+parametr+"=([^&#]*)";
[45]150    var regexS = "[\\#&]"+parametr+"=([^&]*)";
[39]151    var regex = new RegExp( regexS );
152    var results = regex.exec(window.location.hash);
153    if( results == null )
154        return "";
155    else
156        return decodeURIComponent(results[1]);
157}
158
159/**
160 * Uloží parametry (jako je SQL příkaz a stránka průvodce) do URL (za #),
161 * aby si uživatel mohl URL zkopírovat a příště si obnovit stav aplikace.
162 */
163function ulozURL() {
164    if (urlOdkaz['pruvodce']) {
165        window.location.hash = urlOdkaz['pruvodce'] + '&sql=' + encodeURIComponent(getSQL());
166    } else {
167        window.location.hash = 'sql=' + encodeURIComponent(getSQL());
168    }
169}
170/**
171 * Načte uložený stav aplikace z URL (SQL příkaz, průvodce).
172 */
[42]173function nactiURL() {
[40]174    /** Načteme uživatelův SQL příkaz z URL do vstupního pole */
[42]175    if (getParametr('sql')) {
[39]176        zobraz(getParametr('sql'), vstupniPole);
177    }
[40]178   
179    /** Načteme pozici v nápovědě */
180    if (getParametr('pruvodce')) {
181        ajaxPruvodceId(getParametr('pruvodce'));
182    } else {
183        ajaxPruvodceKod('vitejte');
184    }
[39]185}
186
187window.onload = function() {
[42]188    nactiURL();
[60]189}
190
191/**
192 * Přidá <pre> elementům v průvodci akci onclick,
193 * která se postará o načtení obsahu daného elementu do vstupního pole,
194 * aby uživatel tento kód nemusel opisovat.
[61]195 *
196 * Zpracuje odkazy na průvodce:
197 * převede href="@klíč" na správný javascriptový odkaz.
[60]198 */
199function aktivujPruvodce() {
[61]200    /** Ukázky SQL kódu */
[60]201    elementy = document.getElementsByTagName("pre");
202    for (var i = 0; i < elementy.length; i++) {
203        if (elementy[i].parentNode.id == napovedniPole) {
204            elementy[i].title = document.getElementById('lokalizace').klikniProNacteniPrikladu.value;
205            elementy[i].onclick = function() {
206                zobraz(this.innerHTML, 'vstupniPole');
207                return true;
208            };
209        }
210    }
[61]211
212    /** Aktivace interních odkazů na průvodce */
213    elementy = document.getElementsByTagName("a");
214    for (var j = 0; j < elementy.length; j++) {
215        var odkaz = elementy[j].getAttribute("href");
216        if (odkaz.substring(0, 1) == '@') {
217            elementy[j].href = "javascript:ajaxPruvodceKod('" + odkaz.substring(1, odkaz.length) + "');";
218        }
219    }
[60]220}
221
222/**
[64]223 * Přidá <td> elementům v historii akci onclick,
224 * která se postará o načtení obsahu daného elementu do vstupního pole,
225 * aby uživatel tento kód nemusel opisovat.
226 */
227function aktivujHistorii() {
228    elementy = document.getElementsByTagName("tr");
229    for (var i = 1; i < elementy.length; i++) {
230        if (elementy[i].parentNode.parentNode.parentNode.id == vystupniPole) {
231            elementy[i].childNodes[1].title = document.getElementById('lokalizace').klikniProNacteniHistorie.value;
232            elementy[i].childNodes[1].style.cursor = 'pointer';
233            elementy[i].childNodes[1].onclick = function() {
234                zobraz(this.innerHTML, 'vstupniPole');
235                return true;
236            };
237        }
238    }
239}
240
241/**
[60]242 * Převede HTML entity zpět na znaky,
243 * aby se správně zobrazily ve vstupním nebo stavovém poli.
244 */
245function vratEntity (text) {
246    var vysledek = text;
247    vysledek = vysledek.replace('&lt;', '<', 'g');
248    vysledek = vysledek.replace('&gt;', '>', 'g');
249    vysledek = vysledek.replace('&amp;', '&', 'g');
[64]250    vysledek = vysledek.replace('&nbsp;', ' ', 'g');
251    vysledek = vysledek.replace('&#160;', ' ', 'g');
[60]252    return vysledek;
253
254}
Note: See TracBrowser for help on using the browser.