/* kommentar.js stellt die Dynamik des Kommentar-Dialogs bereit die Methoden: - komponenten_einbinden: verknüpft die golbalen Gui-Variablen mit den entsprechenden Elementen - kommentar_pruefen: prüft, ob es einen Text im Kommentarfeld gibt (wird über onsubmit aufgerufen) - kommentarWegblenden: schließt das angezeigte Kommentarfenster, ohne die Eingabe abzuschicken - kommentarfeld_umblenden: zeigt das Kommentarfenster an oder blendet es weg - anzeige_starten: beinhaltet die Einblend-Animation - setKommentarfeldgroesse: Hilfsfunktion für die Einblendanimation - positioniere_kommentararten: richtet das Innere des Kommentarfesnsters zueinander aus - fensterbreiteSetzen: Routine, um die angemessene Fensterbreite festzusetzen - pruefe_mausclick: schließt das Kommentarfenster über einen Mausclick außerhalb des Kommentars - pruefe_tastaturclick: schließt das Kommentarfenster über die Escapetaste - kommentar_einbinden: = komponenten_einbinden + belegt einen hidden Input mit der Seitenadresse - kommentar_justieren: = positioniere_kommentararten - kommentar_schliessen: Ereignisüberwachung am Dokument, die das Kommentarfenster bei Click außerhalb schließt */ //..setTimeout heisst, die Anweisung in x ms einwerfen (der Programmfluss geht weiter) //überfunktionale Variablen für den Zustand bzgl. Auf-/Abbau des Kommentarfensters var urcontainer; var kommentar_wird_angezeigt = 0; var fensterbreite; // enthält, was die Breite des Kommentarfensters sein soll (opt. 40%, min. x) //..für die Komponentenverweise var kmtrAnker; var kmtrFormular; var kmtrKopfzeile; var kmtrHinweis; var kmtrIDText; var komtrID; var kmtrTextfeld; var kmtrSubmitschalter; // setzt die globalen Element-Variablen und bindet den Kommentaranker zeitverzögert in die Anzeige ein function komponenten_einbinden () { // ->Deklaration urcontainer = document.getElementById ("urcontainer"); kmtrAnker = document.getElementById ("ordKommentaranker"); kmtrFormular = document.getElementById ("ordKommentarFormular"); kmtrKopfzeile = document.getElementById ("ordKommentarKopfzeile"); kmtrHinweis = document.getElementById ("ordKommentarHinweis"); kmtrIDText = document.getElementById ("ordKommentarIDText"); kmtrID = document.getElementById ("ordKommentarID"); kmtrTextfeld = document.getElementById ("ordKommentarTextfeld"); kmtrSubmitschalter = document.getElementById ("ordKommentarSubmitschalter"); setTimeout ("kmtrAnker.style.display = \"block\"", 1000); } // die Kommentar-Elemente aus der Anzeige nehmen function kommentar_wegblenden () { // steht overflow des urcontainers auf 'auto' erscheint im Kommentar kein Textcursor (firefox) urcontainer.style.overflow = "auto"; // die Kommentar-Elemente aus der Anzeige nehmen kmtrFormular.style.display = "none"; kmtrHinweis.style.visibility = "hidden"; kmtrIDText.style.visibility = "hidden"; kmtrID.style.visibility = "hidden"; kmtrSubmitschalter.style.borderWidth = "0px"; // den globalen Zustand zurücksetzen kommentar_wird_angezeigt = 0; } // nachdem das Kommentarfenster seine letzte Größe erhalten hat, wird dieser Rest der Anzeige vorgenommen function anzeige_starten () { // ->css setTimeout ("kmtrHinweis.style.visibility = \"visible\"", 10); setTimeout ("kmtrID.style.visibility = \"visible\"", 100); setTimeout ("kmtrIDText.style.right = 1 + kmtrID.clientWidth + \"px\"", 110); setTimeout ("kmtrIDText.style.visibility = \"visible\"", 120); setTimeout ("kmtrIDText.style.right = 8 + kmtrID.clientWidth + \"px\"", 150); } // in der Einblendschleife verwendete Routine, um das Kommentarfenster auf die aktuelle Größe zu setzen, zuletzt (i=60) 40% des Fensters breit function setKommentarfeldgroesse (param_i) { // ->css kmtrFormular.style.width = param_i*fensterbreite/60 + 'px'; kmtrSubmitschalter.style.width = "" + 1.0*param_i/20 + "em"; if (param_i == 20) kmtrSubmitschalter.style.borderWidth = "1px"; if (param_i == 40) kmtrSubmitschalter.style.borderWidth = "2px"; if (param_i == 60) anzeige_starten(); } // setzt die globale Variable fensterbreite auf optimal sonst mindestens function fensterbreiteSetzen () { fensterbreite = document.getElementsByTagName ("body")[0].offsetWidth*2/5; /* var mindestbreite = 20 + document.getElementById ("ordKommentarHinweis").offsetWidth + document.getElementById ("ordKommentarIDText").offsetWidth + document.getElementById ("ordKommentarID").offsetWidth; alert ("min " + mindestbreite + ", opt " + fensterbreite); alert (document.getElementById ("ordKommentarHinweis").offsetWidth); alert (document.getElementById ("ordKommentarIDText").offsetWidth); alert (document.getElementById ("ordKommentarID").offsetWidth); */ var mindestbreite = 30*document.getElementById ("ordKommentarID").offsetHeight; if (mindestbreite > fensterbreite) fensterbreite = mindestbreite; } // schließt das Kommentarfenster, wenn außerhalb davon geclickt wird function pruefe_mausclick (param_event) { // nur im Falle eines angezeigten Kommentars if ((kmtrFormular.style.display == "block") && (kmtrFormular.offsetWidth > urcontainer.offsetWidth/4)) { /* alert ("offsetXY: " + param_event.offsetX + ", " + param_event.offsetY); // undefinied alert ("screenXY: " + param_event.screenX + ", " + param_event.screenY); // im Verhältnis zur Bildschirmecke alert ("clientXY: " + param_event.clientX + ", " + param_event.clientY); // ok alert ("XY: " + param_event.x + ", " + param_event.y); // undefinied alert ("pageXY: " + param_event.pageX + ", " + param_event.pageY); // ok alert ("layerXY: " + param_event.layerX + ", " + param_event.layerY); // tw verzerrt */ // Browserbrücke var x, y; if (window.event) // ie { x = window.event.clientX; y = window.event.clientY; } else { x = param_event.clientX; y = param_event.clientY; } // ist der Click-Ort ausserhalb des Kommentarfensters, wird es geschlossen if ( (x < kmtrFormular.offsetLeft) || (x > kmtrFormular.offsetLeft + kmtrFormular.offsetWidth) || (y < kmtrFormular.offsetTop) || (y > kmtrFormular.offsetTop + kmtrFormular.offsetHeight) ) // ..sofern er nicht innerhalb des Submitschalters stattfand (mglrw. unnötig) // if ( (param_event.clientX < kmtrSubmitschalter.offsetLeft) || (param_event.clientX > kmtrSubmitschalter.offsetLeft + kmtrSubmitschalter.offsetWidth) || // (param_event.clientY < kmtrSubmitschalter.offsetTop) || (param_event.clientY > kmtrSubmitschalter.offsetTop + kmtrSubmitschalter.offsetHeight) ) //alert("xy"); kommentar_wegblenden(); } } // schließt das Kommentarfenster auf Escape-Tastendruck und prüft die Eingabelänge function pruefe_tastaturclick (param_event) { if (kmtrFormular.style.display != "block") return; // Browserbrücke zur Tastenbestimmung var taste; if (window.event) // ie taste = window.event.keyCode; else taste = param_event.which; // Escapetaste gedrückt? if (taste == 27) kommentar_wegblenden(); // andernfalls die eingegebenen Zeichen zählen und entsprechend den Kommentarhintergrund abdunkeln else { var getippte_zeichen = document.KommForm.ordKommentarID.value.length + document.KommForm.ordKommentarTextfeld.value.length; // je nach der Anzahl getippter Zeichen die HG-Farbe des Kommentartextes abdunkeln // nach 200 Zeichen die erste Abdunklung, nach 2000 Zeichen komplett schwarz (ergibt ~1500 gut lesbare Zeichen) // y = ax²+bx+c: c=0, b=-155/18000, a=49/720000 var b = -155/18000; var a = 49/720000; var hg_col = parseInt (getippte_zeichen*(a*getippte_zeichen + b)); if (hg_col > 255) kmtrTextfeld.style.backgroundColor = "black"; else kmtrTextfeld.style.backgroundColor = "rgb("+(255-hg_col)+","+(255-hg_col)+","+(255-hg_col)+")"; } } /*---------------------------------------------------------------------------------------------------------------*/ /* public */ // blendet per Click auf den Anker das Kommentarfeld ein function kommentarfeld_einblenden () { // wird das Kommentar-Formular bereits angezeigt, ist diese Funktion wirkungslos (weggeblendet wird über die allg. Eventhandler pruefe..click) if (kmtrFormular.style.display == "block") return; // if (kommentar_wird_angezeigt == 1) // return; // steht overflow des urcontainers auf 'auto' erscheint im Kommentar kein Textcursor (firefox) if (urcontainer) urcontainer.style.overflow = "visible"; // Zustand global bekanntgeben, dass das Kommentarfenster sichtbar ist kommentar_wird_angezeigt = 1; // das Kommentarformular ihrer Breite nach einfaden, in 60 Schritten // Initialisierung kmtrFormular.style.width = "0"; kmtrFormular.style.display = "block"; kmtrSubmitschalter.style.width = "0"; kmtrSubmitschalter.style.display = "block"; kmtrSubmitschalter.style.top = kmtrKopfzeile.offsetHeight + kmtrTextfeld.offsetHeight - 0.5*kmtrSubmitschalter.offsetHeight + "px"; fensterbreiteSetzen(); for (var i = 1; i <= 60; i++) { // prüfen, ob das Kommentarfenster bereits wieder geschlossen wurde if (kommentar_wird_angezeigt == 0) return; // ->css setTimeout ("setKommentarfeldgroesse("+i+")", Math.sqrt(i*2)*16); } // Bedienlogik: das Textfeld bekommt den Schreibfokus kmtrTextfeld.focus(); } // den Kommentarinhalt prüfen function kommentar_pruefen () { // zu wenig Text unterbinden if (kmtrTextfeld.value=="") { alert ("Maybe you can get more specific?"); kmtrTextfeld.focus(); return false; } // zu viel Text unterbinden if (kmtrTextfeld.value.length > 2000) { alert ("maybe you can shorten your text for " + (kmtrTextfeld.value.length-2000) + " signs?"); return false; } return true; } function kommentar_einbinden () { komponenten_einbinden(); // positioniere_kommentararten(); // Quelle einbinden und mitschicken (in kommentar_verarbeiten2.php wird die Kommentarquelle auf value gelegt) var komm_quelle = document.getElementsByName("ordKommentarquelle")[0]; if (komm_quelle.value == "") komm_quelle.value = document.URL; // Eventlistener des Kommentarankers kmtrAnker.onclick = kommentarfeld_einblenden; // Ereignisüberwachung initialisieren, um das Kommentarfenster bei Click außerhalb zu schließen document.onclick = pruefe_mausclick; // wird in der Event-Hierarchie vor den im Dokument eigebetteten Elementen aufgerufen (top down) document.onkeyup = pruefe_tastaturclick; document.getElementById("ordKommentaranker").onclick = kommentarfeld_einblenden; } function kommentar_justieren () { // positioniere_kommentararten(); // ein angezeigtes Kommentarfenster der Größe nach anpassen fensterbreiteSetzen(); kmtrFormular.style.width = fensterbreite + 'px'; }