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