Changeset 13526 for trunk/FACT++/www/index.js

Timestamp:

05/02/12 22:01:52 (13 years ago)

Author:

tbretz

Message:

Added cycling color of dots; moved some code to isSliding; new simplified sliding algorithm; simplified doresize

File:

• trunk/FACT++/www/index.js (modified) (23 diffs)

trunk/FACT++/www/index.js

@@ -19 +19 @@
 function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); }
 function valid(str) { if (str==undefined) return false; if (str.length==0) return false; return true;}
+function isSliding(){ return $("table0").offsetLeft!=0 && $("table1").offsetLeft!=0; }
+function cycleCol(el)
+{
+    var col = el.getAttribute("data-col");
+    col++;
+    col %= 31;
+    el.setAttribute("data-col", col);
+    if (col>16)
+        col = 31-col;
+    var hex = col.toString(16);
+    el.style.color = "#"+hex+"0"+hex+"0"+hex+"f";
+}
 
 function onload()
 {
+    /*
+     alert("0 -- "+navigator.appCodeName+"\n"+
+          "1 -- "+navigator.appName+"\n"+
+          "2 -- "+navigator.appVersion+"\n"+
+          "3 -- "+navigator.platform+"\n"+
+          "4 -- "+navigator.userAgent);
+          */
     loadPage("fact", 0);
+}
+
+function onresize()
+{
+    var z = $("body").getAttribute("data-visible");
+    doresize(z);
 }
 
@@ -68 +93 @@
 {
     var table = $("table"+z);
-    table.setAttribute("data-file", "");
-
     var p = table.tBodies.length==3 ? 1 : 0;
 
@@ -122 +145 @@
             td.setAttribute("class",   "container");
             td.setAttribute("id",      "container");
-            td.setAttribute("onclick", "save();");
+            //td.setAttribute("onclick", "save();");
             td.setAttribute("colspan", "3");
             tr.appendChild(td);
@@ -195 +218 @@
     }
 
-
     // ---------------------------------------
-
-    if ($("canvas") == null)
-    {
-        /*
-        tr = document.createElement("tr");
-        tr.setAttribute("class", "row");
-
-        td = document.createElement("td");
-        td.setAttribute("id",      "debug");
-        td.setAttribute("colspan", "3");
-        td.setAttribute("height", "100%");
-        tr.appendChild(td);
-
-        table.appendChild(tr);*/
-    }
 
     tr = document.createElement("tr");
@@ -217 +224 @@
 
     td = document.createElement("td");
-    td.setAttribute("id",      "debug");
+    td.setAttribute("id", "debug");
     td.setAttribute("colspan", "3");
     tr.appendChild(td);
@@ -223 +230 @@
     tbody.appendChild(tr);
 
+    // ---------------------------------------
+
     table.setAttribute("data-file", name);
-}
-
-function onresize()
-{
-    var z = $("body").getAttribute("data-visible");
-
+    doresize(z);
+}
+
+function doresize(z)
+{
     var img  = $("image"+z);
     var canv = $("canvas"+z);
@@ -238 +246 @@
     var H = window.innerHeight;
 
-    img.width  = 1;
-    img.height = 1;
-
+    //img.width  = 1;
+    //img.height = 1;
+
+    var h = $("table"+z).offsetHeight;
+
+    //alert(img.height+"/"+img.offsetHeight+"/"+img.parentNode.offsetHeight);
+
+    // Be aware that this is recursive!
     img.width   = W;
-    img.height += H - $("table"+z).offsetHeight;
+    img.height += H - h;
 
     canv.width  = img.width;
@@ -250 +263 @@
     $('debug').innerHTML = "";
     $('debug').innerHTML += "|W="+W +"/"+H;
+    $('debug').innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight;
 }
 
@@ -259 +273 @@
     if ($("table0").style.display=="none" && $("table1").style.display=="none")
     {
+        $("table0").style.display="";
         $("table1").style.display="";
+
+        $("table0").style.left=window.innerWidth+"px";
+        $("table1").style.left="0px";
+
         $("body").setAttribute("data-visible", "1");
 
-        onresize();
+        doresize(1);
 
         refresh_text();
@@ -269 +288 @@
     }
 
-    intervalSlide = setInterval("doSlideOut("+z+")", 25);
-}
+    //intervalSlide = setInterval("doSlideOut("+z+")", 25);
+
+    //var k = (z+1)%2;
+    //$("table"+k).style.display="";
+    //$("table"+z).style.display="";
+    //$("table"+k).style.zIndex="0";
+    //$("table"+z).style.zIndex="1";
+    //$("table"+k).style.left=0;
+    //$("table"+z).style.left=0;
+    //$("table"+k).style.backgroundColor = "#ffffff";
+    //$("table"+z).style.backgroundColor = "#ffffff";
+    //doresize(k);
+    //intervalSlide = setInterval("doSlide("+z+",1)", 50);
+
+    $("body").setAttribute("data-visible", (z+1)%2);
+    intervalSlide = setInterval("doShift("+z+")", 75);
+}
+
+function doShift(z)
+{
+    var W = window.innerWidth;
+
+    var t0 = $("table0");
+    var t1 = $("table1");
+
+    var x0 = t0.offsetLeft;
+    var x1 = t1.offsetLeft;
+
+    if (/*x1<0 && x0>=0 &&*/ z==0)
+    {
+        x0 += W/5;
+        x1 += W/5;
+
+        if (x1>=0)
+        {
+            x0 = W;
+            x1 = 0;
+
+            clearInterval(intervalSlide);
+        }
+    }
+
+    if (/*x0>0 && x1<=0 &&*/ z==1)
+    {
+        x0 -= W/5;
+        x1 -= W/5;
+
+        if (x0<=0)
+        {
+            x0 = 0;
+            x1 = -W-1;
+
+            clearInterval(intervalSlide);
+        }
+    }
+
+    t0.style.left = parseInt(x0, 10)+"px";
+    t1.style.left = parseInt(x1, 10)+"px";
+}
+
+/*
+function doSlide(z, dir)
+{
+    var k = (z+1)%2;
+
+    var W = window.innerWidth;
+
+    var tz = $("table"+z);
+    var tk = $("table"+k);
+
+    var xz = tz.offsetLeft;
+    var xk = tk.offsetLeft;
+
+    var ixz = parseInt(xz, 10);
+    var ikz = parseInt(xk, 10);
+
+    ixz += dir*W/10;
+    ikz -= dir*W/10;
+
+    tz.style.left = parseInt(ixz, 10)+"px";
+    tk.style.left = parseInt(ikz, 10)+"px";
+
+    if (ixz>W/2)
+    {
+        clearInterval(intervalSlide);
+
+        $("table"+k).style.zIndex="1";
+        $("table"+z).style.zIndex="0";
+
+        $("body").setAttribute("data-visible", k);
+        doresize(k);
+
+        intervalSlide = setInterval("doSlide("+z+",-1)", 50);
+    }
+    if (ikz>0)
+    {
+        clearInterval(intervalSlide);
+
+        tz.style.left = 0;
+        tk.style.left = 0;
+
+        tz.style.display="none";
+    }
+}
+
 
 function doSlideOut(z)
@@ -293 +415 @@
 
         $("body").setAttribute("data-visible", z);
-        onresize();
+        doresize(z);
 
         intervalSlide = setInterval("doSlideIn("+z+")", 25);
@@ -311 +433 @@
 
     var ix = parseInt(x, 10);
-    if (ix==0)
-    {
-        clearInterval(intervalSlide);
-        return;
-    }
 
     ix -= W/10;
@@ -322 +439 @@
 
     table.style.left=ix+"px";
-}
+
+    if (ix<=0)
+    {
+        clearInterval(intervalSlide);
+        return;
+    }
+}
+*/
 
 function refresh_text()
@@ -331 +455 @@
     // Is sliding or no file defined?
     var fname = table.getAttribute("data-file");
-    if (table.offsetLeft>0 || !valid(fname))
+    if (isSliding() || !valid(fname))
     {
         setTimeout("refresh_text()", 1000);
@@ -360 +484 @@
                 }
 
-                update_text(fname, xmlHttp.responseText);
+                if (!isSliding())
+                {
+                    cycleCol($("ldot"+z));
+                    update_text(fname, xmlHttp.responseText);
+                }
                 setTimeout("refresh_text()", 3000);
             }
@@ -373 +501 @@
         return;
 
-    if (status == false)
+    if (!status)
         e.style.textDecoration="line-through";
     else
@@ -385 +513 @@
         return;
 
-    if (valid(str) == true)
+    if (valid(str))
     {
         e.style.color="#000";
@@ -433 +561 @@
 
     time.innerHTML =
-        "&middot;&nbsp;"+date0.toUTCString()+"&nbsp;&middot;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
+        "&#8226;&nbsp;"+date0.toUTCString()+"&nbsp;&#8226;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
     ltime.innerHTML =
-        "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
+        "&#8226;&nbsp;"+date1.toLocaleString()+"&nbsp;&#8226;";//ISOlocalDateStr();//ltoString();
 
     // ----------------------------------------------------
@@ -460 +588 @@
             form = form.replace("\$"+(col-1), cols[col].length==0 ? "--" : cols[col]);
 
+        if (cols.length<=1)
+            form = "---";
+
         var newe = document.createElement("div");
         newe.innerHTML = form;
@@ -480 +611 @@
     // Is sliding or no data file defined?
     var fname = canvas==null ? "" : canvas.getAttribute("data-file");
-    if ($("table"+z).offsetLeft>0|| !valid(fname))
+    if (isSliding() || !valid(fname))
     {
         setTimeout("refresh_graphics()", 1000);
@@ -509 +640 @@
                 }
 
-                process_eventdata(xmlHttp.responseText);
+                if (!isSliding())
+                {
+                    cycleCol($("rdot"+z));
+                    process_eventdata(xmlHttp.responseText);
+                }
                 setTimeout("refresh_graphics()", 5000)
             }
@@ -752 +887 @@
     $("image"+z).src = canv.toDataURL("image/png");
 }
+
 /*
 function save()
 {
-    var canvas = $("canvas");
+    var z = $("body").getAttribute("data-visible");
+
+    var canvas = $("canvas"+z);
     var img    = canvas.toDataURL("image/png");
 
@@ -763 +901 @@
 }
 */
-
 window['onload'] = onload;