ECMAScript-Praktikum 2011: Problemstellung 2 (Show/Hide, Code-Schnipsel, Template)

Diese praktische Aufgabe zur Veranstaltung beinhaltet die Erstellung eines ECMAScript-Tool2, das 2 Textareas (d.h. 2 Editoren) nutzt und mit allen "gängigen" Browsern funktionieren soll. Der Editor1 dient dem Schreiben und Modifizieren von Quellcode, Editor2 entspricht einer Zwischenablage. Die Editoren sollen sichtbar/unsichtbar geschalten werden können.

Es sollen Code-Schnipsel erstellt und getestet werden, die wesentliche "Pattern" aus einem der Gebiete wie z.B. ECMAScript, SMILE, SVG, HTML5-Canvas, JSON, Silverlight, AJAX, XML-Muster, usw. abdecken. Das gewählte Muster soll mit ECMAScript zusammenhängen und ggf. ECMAScript-Code enthalten. Wie können umfangreiche Sammlungen extern bereitgestellt und bei Bedarf geladen werden? Es soll eine Browser-Vorschau möglich sein.

Das zu erstellende Tool2 soll praxistauglich und gut verwendbar sein und als Teil der eigenen Homepage eingestellt werden.

Viel Freude bei der Ausarbeitung!

Wie ist der Tool-2-Aufbau? Was soll das Tool-2 tun?

Tool-2 baut auf Tool-1 auf und kann get_node: function (id), get_string: function (id) und set_string: function (id, str) verwenden.

Hinzu kommen nun die (zu schreibenden) Funktionen zu Steuerung der Sichtbarkeit: show: function (id), is_visible: function (id), toggle: function (id, that). Günstig ist es, z.B. die jeweiligen Formulare (mit allen inneren Elementen) sichtbar/unsichtbar zu stellen.

Hinzu kommt eine (neu zu schreibenden) Funktion popup: function (str, url, o), die den Editor-String als Browservorschau anzeigen kann.

Hinweis Namespace-Module-Pattern Objektorientiert oder was?

Es soll ein Objekt-Pattern tool2 mit private- und public-Bereich verwendet werden (jeweils für Daten und Funktionen, siehe Namespaces).

Hinweis Sichtbarkeitsumschaltung Wie wird show/hide umgeschalten?

Das folgende Beispiel soll mit einem a-Tag und tool2.toggle('DIV1',this) die Sichtbarkeit eines DIV1-Tags umschalten, hiebei entspricht bei den Funktionsparametern this dem a-Tag-Objekt.

<a href="javascript:void(0)"
  onclick="tool2.toggle('DIV1',this);return false;">
  [+] show/hide DIV1 
</a>

<div id="DIV1" style="display:none; background: #fee;">
  DIV1 (am Anfang verborgen)
</div>

Das folgende Beispiel soll mit einem select-Tag und tool2.toggle('DIV1','SEL1') die Sichtbarkeit eines DIV1-Tags umschalten, hiebei entspricht der String 'SEL1' dem id des Select-Tags.

<option value="tool2.toggle('DIV1','SEL1');">
  [+] show/hide DIV1  
</option>

<div id="DIV1" style="display:none; background: #fee;">
  DIV1 (am Anfang verborgen)
</div>
Code Snippet: Show/Hide id-Element    mit [+]/[-]    a-Tag
  1. var tool2 = (function (win) { // privat
  2. var doc = win.document, flags, hwin,
  3. max_height = 660 - 200, ed1_height = 330, ed2_height = 130,
  4.  
  5. o1 = { re: /\[\−\]/, repl: "[+]" },
  6. o2 = { re: /\[\+\]/, repl: "[−]" },
  7. o3 = { re: /⨉/, repl: "⌻" },
  8. o4 = { re: /⌻/, repl: "⨉" };
  9.  
  10. return { // public
  11.  
  12.   show: function (id) {
  13.     doc.getElementById(id).style.display = "block";
  14.   },
  15.   hide: function (id) {
  16.     doc.getElementById(id).style.display = "none";
  17.   },
  18.   is_visible: function (id) {
  19.     return doc.getElementById(id).style.display.toLowerCase() === "block";
  20.   },
  21.  
  22.   toggle: function (id, that) {
  23.     var i, s;
  24.     if (typeof that === 'string') { // falls select-Tag
  25.       that = doc.getElementById(that);
  26.       that = that.options[that.selectedIndex];
  27.     }
  28.     s = that.innerHTML;
  29.     if (tool2.is_visible(id)) {
  30.       that.innerHTML = s.replace(o1.re, o1.repl);
  31.       that.innerHTML = s.replace(o3.re, o3.repl); tool2.hide(id);
  32.     } else {
  33.       that.innerHTML = s.replace(o2.re, o2.repl);
  34.       that.innerHTML = s.replace(o4.re, o4.repl); tool2.show(id);
  35.     }
  36.   },
  37.  
  38.   popup: function (str, url, o) { //aufruf: .popup(str) oder .popup(null,url)
  39.     url = url || null; o = o || { top: 0, left: 150, width: 800, height: 600 };
  40.     // popup_params = "directories=yes,location=yes,menubar=yes,toolbar=yes,resizable=yes,scrollbars=yes,status=yes,",
  41.     flags = "resizable=yes,scrollbars=yes,top=" + o.top + ",left=" + o.left + ",width=" + o.width + ",height=" + o.height;
  42.     if (hwin && !hwin.closed) { hwin.close(); } hwin = null;
  43.     if (url) {
  44.       hwin = win.open(url, "popup", flags);
  45.     } else if (typeof str === 'undefined') {
  46.       return;
  47.     } else {
  48.       hwin = win.open("", "popup", flags);
  49.       hwin.document.write(str);
  50.     }
  51.     if (hwin.opener) { hwin.opener = self; }
  52.     if (hwin.focus) { hwin.focus(); }
  53.     hwin.document.close();
  54.   },
  55.  
  56.   get_node: function (id) {
  57.     var o;
  58.     if (typeof id === 'string') { o = doc.getElementById(id); }
  59.     if (!!(o && o.nodeType !== 1)) { win.alert('ERR: get_node(' + id + '???)'); }
  60.     return o;
  61.   },
  62.  
  63.   get_string: function (id) {
  64.     var o = tool2.get_node(id), tg = o.tagName.toLowerCase();
  65.     if (tg === 'input' || tg === 'textarea') { return o.value; } else { return o.innerHTML; }
  66.   },
  67.  
  68.   set_string: function (id, str) {
  69.     var o = tool2.get_node(id), tg = o.tagName.toLowerCase();
  70.     if (tg === 'input' || tg === 'textarea') {
  71.       o.value = str; o = tool2.get_node(id); o.setAttribute('value', o.value);
  72.     } else {
  73.       o.innerHTML = str;
  74.     }
  75.   },
  76.  
  77.   ende: 'ende'
  78. }; // ende return

Bitte Testen:
[+] show/hide DIV1 [−] show/hide DIV2

DIV2 (am Anfang sichtbar)
Hinweis Tipparbeit Ist das nicht zuviel Tippen?

Dieser Anfang ist noch fehlerbehaftet, zeigt den Aufbau für tool-2 und kann aber die Schreibarbeit reduzieren.

Hinweis Ästetik Kann das nicht besser ausschauen?

Ein geeigneter Style hilft weiter. Hier ist ein Anfang, der noch fehlerbehaftet ist, aber den CSS-Aufbau zeigen kann und die Schreibarbeit reduziert.