[r2004-12-28 15:34:50 by afrisch] Demo

Original author: afrisch
Date: 2004-12-28 15:34:50+00:00

web/demo.js

@@ -7,12 +7,23 @@ function show_result(pr,res)
 function clearres(pr)
 { show_result(pr,""); }
 
+function set_height(pr) {
+ var ct = document.getElementById(pr+"container");
+ var req = document.getElementById(pr+"req");
+ var edit = document.getElementById(pr+"edit");
+ if (req.style.visibility=='visible')
+   ct.style.height = req.offsetHeight + "px";
+ else
+   ct.style.height = edit.offsetHeight + "px";
+}
+
 function defreq(pr)
 {  var req = document.getElementById(pr+"req");
    var edit = document.getElementById(pr+"edit");
    var def = document.getElementById(pr+"def");
    edit.value = def.value;
-   req.innerHTML = def.value;
+   req.innerHTML = HTMLEncode(def.value);
+   set_height(pr);
 }
 
 function submit(pr) {
@@ -22,7 +33,7 @@ function submit(pr) {
   if (xmlhttp.readyState==4) { show_result(pr,xmlhttp.responseText); }
  }
  show_result(pr,"Computing...");
- xmlhttp.send(document.getElementById(pr+"req").value);
+ xmlhttp.send(document.getElementById(pr+"edit").value);
 }
 
 function editable(pr,b) {
@@ -32,18 +43,36 @@ function editable(pr,b) {
  var btn = document.getElementById(pr+"btn");
  var btnclear = document.getElementById(pr+"btnclear");
  if ((req.style.visibility=='hidden') || (b == "init")) {
-   req.innerHTML = edit.value;
+   req.innerHTML = HTMLEncode(edit.value);
    req.style.visibility='visible';
    edit.style.visibility='hidden';
    btnclear.style.visibility='hidden';
    btn.value="Edit";
-   ct.style.height =  req.offsetHeight;
  }
  else {
    req.style.visibility='hidden';
    edit.style.visibility='visible'; 
    btnclear.style.visibility='visible';
    btn.value="Unedit";
-   ct.style.height =  edit.offsetHeight;
  }
-}
\ No newline at end of file
+ set_height(pr);
+}
+function HTMLEncode(t) {
+  var t = t.toString();
+  var h = new Array("&","\"","<",">");
+  var d = ""; var hl = h.length;
+  var e = new Array("&amp;","&quot;","&lt;","&gt;")
+  if (t) {
+    for (var i=0; i<t.length; ++i) {
+      var c = t.charAt(i);
+      var r = 0;
+      for (j=0; j<hl; ++j) {
+        if (c == h[j]) {
+          d += e[j]; r = 1; break;
+        }
+      }
+      if (!r) d += c;
+    };
+  };
+  return d;
+};

web/site.cd

@@ -255,14 +255,15 @@ let button(title : String)(onclick : String) : H:Xinput =
 
 let demo(no : Int)(txt : String) : H:Flow = 
  let n = [ 'a' !(string_of no) '_' ] in
- [ !(if (no = 1) then [<script src="demo.js" type="text/javascript">[]]
+ [ !(if (no = 1) then [<script src="demo.js" type="text/javascript">" "]
      else [])
   <table style="width:100%">[
    <tr>[ 
     <td style="width:50%">[
+     <input type="button" id=(n@"btn") value="Edit" onclick=("editable('"@n@"','');")>[]
      (button "Evaluate" ("submit('"@n@"');"))
      (button "Default" ("defreq('"@n@"');"))
-     <input type="submit" id=(n@"btnclear") value="Clear" onclick=("clearreq('"@n@"');")>[]
+     <input type="button" id=(n@"btnclear") value="Clear" onclick=("clearreq('"@n@"');") style="visibility:hidden;">[]
     ]
     <td style="width:50%">[
      <input id=(n@"def") type="hidden" value=txt>[]
@@ -270,12 +271,13 @@ let demo(no : Int)(txt : String) : H:Flow =
     ] ]
    <tr>[
     <td valign="top">[ 
-     <div style="position:relative; height:100px;" id=(n@"container")>[
-      <pre style="position:absolute; z-index:2; height:auto;" id=(n@"req")>[]
-      <textarea id=(n@"edit") cols="60" rows="25" style="position:absolute; z-index:1; height:auto;">txt 
+     <div style="position:relative;" id=(n@"container")>[
+      <pre style="z-level:1;" id=(n@"req")>txt
+      <textarea id=(n@"edit") cols="60" rows="25" style="position:absolute; top:0px; visibility: hidden; display:block;border:1px solid #CCCCCC; z-level:2; background-color:#EDEDED;">txt 
      ]
     ]
-    <td valign="top">[ <div id=(n@"res")>[] ] ] ] ]
+    <td valign="top">[ <div id=(n@"res")>[] ] ] ] 
+  ]
 
 (* Main transformation function *)