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