ESA 2012.A3: "CSS-Simulationen" Lehr-Tool-Ertellung für CSS-Simulation

Es ist ein Toolchen zu schreiben, das den Titel "CSS-Simulationen" erhält und CSS-Properties visualisieren kann. Das Tool soll sowohl für CSS-Anfänger als auch für Webdesigner gut bedienbar und gut verwendbar sein. Die Lösung wird "css-simulationen.htm" genannt, auf der eigenen Homepage eingestellt und der Menü-Punkt mit "CSS-Simulationen" gesetzt.

Das Tool "CSS-Simulationen" soll komplexe CSS-Kombinationen simulieren können und praxisnahe, komplexe Anwendungsbeispiele (als Ganzes) mit vielschichtigen CSS-Kombinationen (siehe z.B. css-propertys) simulieren können. Bei hinreichender Cross-Browser-Unterstützung können geeignete Form-Elemente von HTML 5 verwendet werden.

Fehlen CSS-Grundlagen, so ist ein Schnelleinstieg mit den zahlreichen Internet-Unterlagen erfolgen aber auch z.B. mit Bachelor IBS, von Letschert ( *.pdf, HTML und CSS ): ibs-03.pdf, oder auch CSS-Einführung, CSS-Beipiele, CSS-propertys

Damit die nachfolgenden Hinweise konkret sein können, erfolgen die Beschreibung anhand einer einfachen CSS-Border-Simulation. Wie wirken sich die CSS-Angaben aus? Ist eine einfache Auswahl und Eingabe möglich und die visuelle Wirkung sofort erkennbar?

Hinweis 1: Seitenaufbau Wie wird die HTML5 - Toolchen - Seite strukturiert?

Das Toolchen soll als HTML5-Seite aufgebaut werden, deren Aufbau etwa so ist:

div id="page"
  div id="head" mit <h1> "CSS-Simulationen" </h1> div-head-ende
  div id="nav" mit den a-Tags für Sichbarschalten der erstellten Simulationen div-nav-ende
  div id="content" mit
  
  <form id="FORM1" action="" style="display:block;">
  <h2>Border-Styles</h2>
  <pre>
  Hierher kommen Select-Tags
 </pre>
 <textarea id='Textarea1' rows='3' cols='80' style="display:block;width:100%;"></textarea>
 <div id='DIV1'></div>
 </form>

 ... weitere Simulations-Formulare, wovon stets lediglich eins sichtbar ist ...
 div-content-ende
div-page-ende

Hinweis 2: Welche Bibliotheken? nur selbsgeschriebene!

Es werden selbstgeschriebene Bibliotheken verwendet, die geprüft und getestet wurden.

Es wird eine daten-Bibliothek mit .set(key,val) und .get(key) verwendet, insbesondere für die Daten von 'Lorem ipsum' und 'color-array'.

daten.set('Lorem ipsum', 'Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Praesent%20sed%20euismod%20nunc.%20Vestibulum%20eu%20nulla%20nec%20lacus%20hendrerit%20lobortis.%20Nam%20urna%20neque%2C%20pharetra%20id%20tempus%20vel%2C%20sodales%20consequat%20odio.%20Integer%20ultricies%20dignissim%20adipiscing.%20Curabitur%20euismod%20massa%20ut%20enim%20condimentum%20commodo.%20Aliquam%20in%20tincidunt%20ligula.%20Nulla%20facilisi.%20Vivamus%20tincidunt%20egestas%20feugiat.%20Proin%20at%20malesuada%20odio.%20Curabitur%20tincidunt%20condimentum%20erat%20et%20imperdiet.%20Pellentesque%20at%20feugiat%20lacus.%20Vivamus%20ligula%20eros%2C%20rutrum%20tempus%20tempus%20vel%2C%20dignissim%20vel%20nisl.%20Pellentesque%20auctor%20sollicitudin%20rutrum.%20Sed%20quis%20justo%20lacus.%20Integer%20mollis%20felis%20id%20est%20ultricies%20hendrerit%20tincidunt%20mi%20porta.%20Vestibulum%20suscipit%20luctus%20molestie.%20Pellentesque%20vitae%20dolor%20id%20velit%20mollis%20auctor.%20Praesent%20a%20mi%20ut%20velit%20elementum%20tincidunt.%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.');


daten.set('color-array', ["#ffffff","White","#fffff0","Ivory","#fffafa","Snow","#ffffe0","LightYellow","#f5fffa","MintCream","#f0ffff","Azure","#fffaf0","FloralWhite","#f0fff0","Honeydew","#f8f8ff","GhostWhite","#fff5ee","Seashell","#fff8dc","Cornsilk","#fdf5e6","OldLace","#fffacd","LemonChiffon","#e0ffff","LightCyan","#f0f8ff","AliceBlue","#f5f5f5","WhiteSmoke","#fafad2","LightGoldenrodYellow","#fff0f5","LavenderBlush","#faf0e6","Linen","#f5f5dc","Beige","#ffefd5","PapayaWhip","#ffebcd","BlanchedAlmond","#faebd7","AntiqueWhite","#ffe4e1","MistyRose","#e6e6fa","Lavender","#ffe4c4","Bisque","#ffe4b5","Moccasin","#eee8aa","PaleGoldenrod","#ffdead","NavajoWhite","#ffff00","Yellow","#ffdab9","PeachPuff","#f5deb3","Wheat","#f0e68c","Khaki","#dcdcdc","Gainsboro","#afeeee","PaleTurquoise","#ffc0cb","Pink","#7fffd4","Aquamarine","#d3d3d3","LightGrey","#98fb98","PaleGreen","#b0e0e6","PowderBlue","#adff2f","GreenYellow","#ffb6c1","LightPink","#add8e6","LightBlue","#ffd700","Gold","#d8bfd8","Thistle","#90ee90","LightGreen","#b0c4de","LightSteelBlue","#c0c0c0","Silver","#deb887","BurlyWood","#87cefa","LightSkyBlue","#87ceeb","SkyBlue","#7fff00","Chartreuse","#dda0dd","Plum","#7cfc00","LawnGreen","#ffa07a","LightSalmon","#d2b48c","Tan","#f4a460","SandyBrown","#00ffff","Cyan","#00ffff","Aqua","#bdb76b","DarkKhaki","#ee82ee","Violet","#40e0d0","Turquoise","#ffa500","Orange","#e9967a","DarkSalmon","#9acd32","YellowGreen","#66cdaa","MediumAquamarine","#a9a9a9","DarkGray/DarkGrey","#8fbc8f","DarkSeaGreen","#48d1cc","MediumTurquoise","#daa520","Goldenrod","#00ff7f","SpringGreen","#00fa9a","MediumSpringGreen","#fa8072","Salmon","#f08080","LightCoral","#ff7f50","Coral","#ff69b4","HotPink","#ff8c00","DarkOrange","#bc8f8f","RosyBrown","#da70d6","Orchid","#00ff00","Lime","#db7093","PaleVioletRed","#cd853f","Peru","#00ced1","DarkTurquoise","#6495ed","CornflowerBlue","#ff6347","Tomato","#32cd32","LimeGreen","#00bfff","DeepSkyBlue","#5f9ea0","CadetBlue","#3cb371","MediumSeaGreen","#9370db","MediumPurple","#b8860b","DarkGoldenrod","#778899","LightSlateGray/LightSlateGrey","#20b2aa","LightSeaGreen","#ba55d3","MediumOrchid","#808080","Gray/Grey","#d2691e","Chocolate","#cd5c5c","IndianRed","#7b68ee","MediumSlateBlue","#708090","SlateGray/SlateGrey","#1e90ff","DodgerBlue","#6b8e23","OliveDrab","#4682b4","SteelBlue","#ff4500","OrangeRed","#808000","Olive","#6a5acd","SlateBlue","#4169e1","RoyalBlue","#ff00ff","Magenta","#ff00ff","Fuchsia","#ff1493","DeepPink","#696969","DimGray/DimGrey","#2e8b57","SeaGreen","#a0522d","Sienna","#9932cc","DarkOrchid","#008b8b","DarkCyan","#228b22","ForestGreen","#556b2f","DarkOliveGreen","#8a2be2","BlueViolet","#008080","Teal","#c71585","MediumVioletRed","#dc143c","Crimson","#8b4513","SaddleBrown","#a52a2a","Brown","#b22222","FireBrick","#ff0000","Red","#008000","Green","#483d8b","DarkSlateBlue","#2f4f4f","DarkSlateGray","#9400d3","DarkViolet","#006400","DarkGreen","#8b008b","DarkMagenta","#800080","Purple","#8b0000","DarkRed","#800000","Maroon","#4b0082","Indigo","#191970","MidnightBlue","#0000ff","Blue","#0000cd","MediumBlue","#00008b","DarkBlue","#000080","Navy","#000000","Black"]);

Für Sichtbarkeitsschaltungen wird eine visu-Bibliothek verwendet.

Es wird eine dom-Bibliothek mit get_node(id), get_string(id), set_string(id,str) verwendet, ohne Gewähr etwa:

  function get_node(id) { var o = id; // !!!
    if (typeof id === 'string') { o = doc.getElementById(id); }
    if (!!(o && o.nodeType !== 1)) { win.alert('ERR: dom.get_node(' + id + '???)'); }
    return o;
  }
  function get_string(id) {
    var o = get_node(id), tn = o.tagName.toLowerCase();
    if (tn === 'input' || tn === 'textarea') {return o.value;
    } else if (tn === 'select') {return o.options[o.selectedIndex].value;
    } else {return o.innerHTML;
    }
  }
  function set_string(id, str) {
    var o = get_node(id), tn; if (!o) {win.alert('ERR: dom.set_string(id???'+id); }
    tn = o.tagName.toLowerCase();
    if (tn === 'input' || tn === 'textarea') {o.value = str; o.setAttribute('value', o.value);
    } else {o.innerHTML = str;
    }
  }
  function get_attr(id, attr) {var o = get_node(id);
    if (attr === "class") {return o.className;
    } else if (attr === "style") {return o.style.cssText;
    } else if (attr === "checked") {return o.defaultChecked;
    } else if (attr === "for") {return o.htmlFor;
    } else { return o.getAttribute(attr); }
  }
  function set_attr(id, attr, val) {var o = get_node(id);
    if (attr === "class") {o.className = val;
    } else if (attr === "style") {o.style.cssText = val;
    } else if (attr === "checked") {o.defaultChecked = val;
    } else if (attr === "for") {o.htmlFor = val;
    } else { el.setAttribute(attr, val); }
  }

Hinweis 3: Welche Funktionen für CSS-Simulation Woher, weshalb, wie?

Die Funktionen für die Simulation können dom, daten, visu verwenden. Das Gerüst sieht etwa so aus:

var css = (function (win, dom, visu) { var doc = win.document;
  
  // ... zuschreibende Funktionen für die Simulation

  return { /*...*/ init:init };
} (window, dom, visu));

Hinweis 4: Was ist die Basis-Idee? Prinzip

Wa ist die Basis-Idee zum lösen solcher Simulationsaufgaben?

Ein Select-Tag kann zahlreiche option-Einträge haben und erlaubt eine schnelle Auswahl. Soll ein ausgewählter Wert noch per Hand manipuliert werden, so ist ein nachfolgendes input-Tag hilfreich. Die Kombination von Select-Tag mit nachfolgendem input Tag sieht dann etwa so aus:
```
<select size="1" 
 style="clear:both;float:left;width:160px;overflow:hidden;"
 onchange="css.on_select_change(this,'???');">
  <option value=""> border-width ... </option>
  <option value="border-width: 0px;"> 0px; </option>
  <option value="border-width: 1px;"> 1px; </option>
</select><input size="40" value="" style="float:left;width:340px;" />
```
Was soll css.on_select_change() machen? on_select_change() soll mit set_select_item_to_next_input den ausgewählte select-option-text in das nachfolgende input schreiben.

Weil es mehrere select-input-Kombinationen (hier z.B. border-width, border-style, border-color) gibt, werden mit inp_texte_to_ta(id_form, id_ta) die input-strings aneinander gefügt. Der resultierende String wird (mit geeigneten Umbrüchen) in eine resultierende Textarea (darunter) geschrieben.

Unter der Textarea ist ein id_div-Tag, das für die visuelle Ausgabe dient. Mit dom.set_attr(id_div, 'style', style_text_von_ta) wird der div-style gesetzt und mit dom.set_string(id_div, unescape(daten.get('Lorem ipsum'))); ein Probetext. Aufbau von css.on_select_change() etwa:
```
  function on_select_change(sel, id_form, id_ta, id_div, bgcol) {var inp = null;
    if (sel) { inp = set_select_item_to_next_input(sel, bgcol); }
    if (id_form && id_ta) { inp_texte_to_ta(id_form, id_ta); }
    style_text_von_ta = dom.get_string(id_ta);
    dom.set_attr(id_div, 'style', style_text_von_ta);
    //entspricht dom.get_node(id_div).style.setAttribute("cssText",style_text_von_ta);
    dom.set_string(id_div, unescape(daten.get('Lorem ipsum'))); //ta to div
  }
```

get_next_input(el) gibt zu el das nachfolgende input-Element zurück. Dadurch wird die Anzahl der id-Identifizierer stark reduziert.

  function get_next_input(el) { // interne Funktion
    var inp = el.nextSibling; // suche nächtes input-tag:
    while (inp && inp.nodeName.toLowerCase() !== 'input') { inp = inp.nextSibling; }
    return inp;
  }

  function set_select_item_to_next_input(sel) { // sel ist this von select-tag
      sel = dom.get_node(sel);
      var inp = get_next_input(sel);
    inp.value = dom.get_string(sel); // ausgewählter select-value 
                                     // Achtung! get_string für sel angepassen
    sel.selectedIndex = 0;           // wegen onchange-Event
    return inp;
  }

Wie kann inp_texte_to_ta(id_form, id_ta) alle Texte, die in den input's mit type="text" sind, aneinanderfügen und in die Textarea schreiben? Etwa

  function inp_texte_to_ta(id_form, id_ta) { // Hinweis, falls alle forms = document.getElementsByTagName('form');
    var i, s = "",
      form = dom.get_node(id_form),
      inp = form.getElementsByTagName('input');
    for (i = 0; i < inp.length; i += 1) {
      if (inp[i].type === 'text') { s += dom.get_string(inp[i]); }
    } dom.set_string(id_ta, s.replace(/;/g, ";\n"));
  }

Wie können Farben ausgewählt werden? Bei HTML5 gibt es das Tag
```
<input type="color" value="" onchange="" />
```
das hervorragend geeignet wäre, aber zur Zeit ( 2012 ) von zu wenigen Browsern unterstützt wird. Deshalb wird hier ein anderer Weg gewählt. In der Vollversion von SVG 1.1 werden Farbnamen unterstützt. var col = daten.get('color-array'); entspricht col = ["#ffffff","White","#fffff0","Ivory",...]; Die Farbnamen kommen in die option-Tag's einer Select-Box. Wegen der mehr als 200 Namen ist Erstellung der option-Tag's mit Hilfe von t = doc.createElement("option") flexibler und leich mehrfach verwendbar. die günstig:
```
 function insert_color_options(id_sel, att) { // att ist z.B. "border-color: "
  var k, kk, t, c, col = daten.get('color-array'), sel = dom.get_node(id_sel);
  for (k = 0; k < col.length; k += 2) { c = col[k];
    t = doc.createElement("option");
    t.innerHTML = c + " " + col[k + 1];
    t.value = att + c + ";";
    if (k < 70) { t.style.color = '#000'; } else { t.style.color = '#fff'; }
    t.style.backgroundColor = c;
    sel.appendChild(t); // sel werden nacheinander die option's angefügt
  }
}
```

Hinweis 5: Initialisierung Wozu, was?

Bei einer Modifikation eines input-Wertes per Hand möchte der User gerne sofort die visuelle Wirkung sehen. Hierzu sind alle input-Tags mit Event-Handlern zu versehen. Hierzu dient

  function init(id_form, id_ta, id_div) { // setze alle Event-Handler
    var ta = dom.get_node(id_ta),
    form = dom.get_node(id_form),
    inp = form.getElementsByTagName('input'), i;

    for (i = 0; i < inp.length; i += 1) {
      if (inp[i].type === 'text') {
        inp[i].onkeyup = function () { return on_select_change(false, id_form, id_ta, id_div, false); };
      }
    } ta.onkeyup = function () { return on_select_change(false, false, id_ta, id_div, false); }
  }

Das Setzen der Event-Handler erfolgt, wenn die Seite geladen ist mit

window.onload = function () { 
  css.init('FORM_BORDER_STYLES','TA_BORDER_STYLES','DIV_BORDER_STYLES');
}

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Mo 12.00 Uhr