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 Func [+] show/hide DIV1 [+] show/hide DIV2 show all hide all

DIV1 (am Anfang verborgen)

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.