Changeset 13526 for trunk/FACT++/www


Ignore:
Timestamp:
05/02/12 22:01:52 (12 years ago)
Author:
tbretz
Message:
Added cycling color of dots; moved some code to isSliding; new simplified sliding algorithm; simplified doresize
File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/FACT++/www/index.js

    r13523 r13526  
    1919function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); }
    2020function valid(str) { if (str==undefined) return false; if (str.length==0) return false; return true;}
     21function isSliding(){ return $("table0").offsetLeft!=0 && $("table1").offsetLeft!=0; }
     22function cycleCol(el)
     23{
     24    var col = el.getAttribute("data-col");
     25    col++;
     26    col %= 31;
     27    el.setAttribute("data-col", col);
     28    if (col>16)
     29        col = 31-col;
     30    var hex = col.toString(16);
     31    el.style.color = "#"+hex+"0"+hex+"0"+hex+"f";
     32}
    2133
    2234function onload()
    2335{
     36    /*
     37     alert("0 -- "+navigator.appCodeName+"\n"+
     38          "1 -- "+navigator.appName+"\n"+
     39          "2 -- "+navigator.appVersion+"\n"+
     40          "3 -- "+navigator.platform+"\n"+
     41          "4 -- "+navigator.userAgent);
     42          */
    2443    loadPage("fact", 0);
     44}
     45
     46function onresize()
     47{
     48    var z = $("body").getAttribute("data-visible");
     49    doresize(z);
    2550}
    2651
    … …  
    6893{
    6994    var table = $("table"+z);
    70     table.setAttribute("data-file", "");
    71 
    7295    var p = table.tBodies.length==3 ? 1 : 0;
    7396
    … …  
    122145            td.setAttribute("class",   "container");
    123146            td.setAttribute("id",      "container");
    124             td.setAttribute("onclick", "save();");
     147            //td.setAttribute("onclick", "save();");
    125148            td.setAttribute("colspan", "3");
    126149            tr.appendChild(td);
    … …  
    195218    }
    196219
    197 
    198220    // ---------------------------------------
    199 
    200     if ($("canvas") == null)
    201     {
    202         /*
    203         tr = document.createElement("tr");
    204         tr.setAttribute("class", "row");
    205 
    206         td = document.createElement("td");
    207         td.setAttribute("id",      "debug");
    208         td.setAttribute("colspan", "3");
    209         td.setAttribute("height", "100%");
    210         tr.appendChild(td);
    211 
    212         table.appendChild(tr);*/
    213     }
    214221
    215222    tr = document.createElement("tr");
    … …  
    217224
    218225    td = document.createElement("td");
    219     td.setAttribute("id",      "debug");
     226    td.setAttribute("id", "debug");
    220227    td.setAttribute("colspan", "3");
    221228    tr.appendChild(td);
    … …  
    223230    tbody.appendChild(tr);
    224231
     232    // ---------------------------------------
     233
    225234    table.setAttribute("data-file", name);
    226 }
    227 
    228 function onresize()
    229 {
    230     var z = $("body").getAttribute("data-visible");
    231 
     235    doresize(z);
     236}
     237
     238function doresize(z)
     239{
    232240    var img  = $("image"+z);
    233241    var canv = $("canvas"+z);
    … …  
    238246    var H = window.innerHeight;
    239247
    240     img.width  = 1;
    241     img.height = 1;
    242 
     248    //img.width  = 1;
     249    //img.height = 1;
     250
     251    var h = $("table"+z).offsetHeight;
     252
     253    //alert(img.height+"/"+img.offsetHeight+"/"+img.parentNode.offsetHeight);
     254
     255    // Be aware that this is recursive!
    243256    img.width   = W;
    244     img.height += H - $("table"+z).offsetHeight;
     257    img.height += H - h;
    245258
    246259    canv.width  = img.width;
    … …  
    250263    $('debug').innerHTML = "";
    251264    $('debug').innerHTML += "|W="+W +"/"+H;
     265    $('debug').innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight;
    252266}
    253267
    … …  
    259273    if ($("table0").style.display=="none" && $("table1").style.display=="none")
    260274    {
     275        $("table0").style.display="";
    261276        $("table1").style.display="";
     277
     278        $("table0").style.left=window.innerWidth+"px";
     279        $("table1").style.left="0px";
     280
    262281        $("body").setAttribute("data-visible", "1");
    263282
    264         onresize();
     283        doresize(1);
    265284
    266285        refresh_text();
    … …  
    269288    }
    270289
    271     intervalSlide = setInterval("doSlideOut("+z+")", 25);
    272 }
     290    //intervalSlide = setInterval("doSlideOut("+z+")", 25);
     291
     292    //var k = (z+1)%2;
     293    //$("table"+k).style.display="";
     294    //$("table"+z).style.display="";
     295    //$("table"+k).style.zIndex="0";
     296    //$("table"+z).style.zIndex="1";
     297    //$("table"+k).style.left=0;
     298    //$("table"+z).style.left=0;
     299    //$("table"+k).style.backgroundColor = "#ffffff";
     300    //$("table"+z).style.backgroundColor = "#ffffff";
     301    //doresize(k);
     302    //intervalSlide = setInterval("doSlide("+z+",1)", 50);
     303
     304    $("body").setAttribute("data-visible", (z+1)%2);
     305    intervalSlide = setInterval("doShift("+z+")", 75);
     306}
     307
     308function doShift(z)
     309{
     310    var W = window.innerWidth;
     311
     312    var t0 = $("table0");
     313    var t1 = $("table1");
     314
     315    var x0 = t0.offsetLeft;
     316    var x1 = t1.offsetLeft;
     317
     318    if (/*x1<0 && x0>=0 &&*/ z==0)
     319    {
     320        x0 += W/5;
     321        x1 += W/5;
     322
     323        if (x1>=0)
     324        {
     325            x0 = W;
     326            x1 = 0;
     327
     328            clearInterval(intervalSlide);
     329        }
     330    }
     331
     332    if (/*x0>0 && x1<=0 &&*/ z==1)
     333    {
     334        x0 -= W/5;
     335        x1 -= W/5;
     336
     337        if (x0<=0)
     338        {
     339            x0 = 0;
     340            x1 = -W-1;
     341
     342            clearInterval(intervalSlide);
     343        }
     344    }
     345
     346    t0.style.left = parseInt(x0, 10)+"px";
     347    t1.style.left = parseInt(x1, 10)+"px";
     348}
     349
     350/*
     351function doSlide(z, dir)
     352{
     353    var k = (z+1)%2;
     354
     355    var W = window.innerWidth;
     356
     357    var tz = $("table"+z);
     358    var tk = $("table"+k);
     359
     360    var xz = tz.offsetLeft;
     361    var xk = tk.offsetLeft;
     362
     363    var ixz = parseInt(xz, 10);
     364    var ikz = parseInt(xk, 10);
     365
     366    ixz += dir*W/10;
     367    ikz -= dir*W/10;
     368
     369    tz.style.left = parseInt(ixz, 10)+"px";
     370    tk.style.left = parseInt(ikz, 10)+"px";
     371
     372    if (ixz>W/2)
     373    {
     374        clearInterval(intervalSlide);
     375
     376        $("table"+k).style.zIndex="1";
     377        $("table"+z).style.zIndex="0";
     378
     379        $("body").setAttribute("data-visible", k);
     380        doresize(k);
     381
     382        intervalSlide = setInterval("doSlide("+z+",-1)", 50);
     383    }
     384    if (ikz>0)
     385    {
     386        clearInterval(intervalSlide);
     387
     388        tz.style.left = 0;
     389        tk.style.left = 0;
     390
     391        tz.style.display="none";
     392    }
     393}
     394
    273395
    274396function doSlideOut(z)
    … …  
    293415
    294416        $("body").setAttribute("data-visible", z);
    295         onresize();
     417        doresize(z);
    296418
    297419        intervalSlide = setInterval("doSlideIn("+z+")", 25);
    … …  
    311433
    312434    var ix = parseInt(x, 10);
    313     if (ix==0)
    314     {
    315         clearInterval(intervalSlide);
    316         return;
    317     }
    318435
    319436    ix -= W/10;
    … …  
    322439
    323440    table.style.left=ix+"px";
    324 }
     441
     442    if (ix<=0)
     443    {
     444        clearInterval(intervalSlide);
     445        return;
     446    }
     447}
     448*/
    325449
    326450function refresh_text()
    … …  
    331455    // Is sliding or no file defined?
    332456    var fname = table.getAttribute("data-file");
    333     if (table.offsetLeft>0 || !valid(fname))
     457    if (isSliding() || !valid(fname))
    334458    {
    335459        setTimeout("refresh_text()", 1000);
    … …  
    360484                }
    361485
    362                 update_text(fname, xmlHttp.responseText);
     486                if (!isSliding())
     487                {
     488                    cycleCol($("ldot"+z));
     489                    update_text(fname, xmlHttp.responseText);
     490                }
    363491                setTimeout("refresh_text()", 3000);
    364492            }
    … …  
    373501        return;
    374502
    375     if (status == false)
     503    if (!status)
    376504        e.style.textDecoration="line-through";
    377505    else
    … …  
    385513        return;
    386514
    387     if (valid(str) == true)
     515    if (valid(str))
    388516    {
    389517        e.style.color="#000";
    … …  
    433561
    434562    time.innerHTML =
    435         "&middot;&nbsp;"+date0.toUTCString()+"&nbsp;&middot;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
     563        "&#8226;&nbsp;"+date0.toUTCString()+"&nbsp;&#8226;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
    436564    ltime.innerHTML =
    437         "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
     565        "&#8226;&nbsp;"+date1.toLocaleString()+"&nbsp;&#8226;";//ISOlocalDateStr();//ltoString();
    438566
    439567    // ----------------------------------------------------
    … …  
    460588            form = form.replace("\$"+(col-1), cols[col].length==0 ? "--" : cols[col]);
    461589
     590        if (cols.length<=1)
     591            form = "---";
     592
    462593        var newe = document.createElement("div");
    463594        newe.innerHTML = form;
    … …  
    480611    // Is sliding or no data file defined?
    481612    var fname = canvas==null ? "" : canvas.getAttribute("data-file");
    482     if ($("table"+z).offsetLeft>0|| !valid(fname))
     613    if (isSliding() || !valid(fname))
    483614    {
    484615        setTimeout("refresh_graphics()", 1000);
    … …  
    509640                }
    510641
    511                 process_eventdata(xmlHttp.responseText);
     642                if (!isSliding())
     643                {
     644                    cycleCol($("rdot"+z));
     645                    process_eventdata(xmlHttp.responseText);
     646                }
    512647                setTimeout("refresh_graphics()", 5000)
    513648            }
    … …  
    752887    $("image"+z).src = canv.toDataURL("image/png");
    753888}
     889
    754890/*
    755891function save()
    756892{
    757     var canvas = $("canvas");
     893    var z = $("body").getAttribute("data-visible");
     894
     895    var canvas = $("canvas"+z);
    758896    var img    = canvas.toDataURL("image/png");
    759897
    … …  
    763901}
    764902*/
    765 
    766903window['onload'] = onload;
Note: See TracChangeset for help on using the changeset viewer.