Tumblr Viewer / widget.js

gbimg=null;
gbcnt=0;
gbstart=0;
gbtotal=0;
redraw = true;
gbloadcomplete=false;
 
imgnum=0;
fid=null;
drawImageFlg=false;
timer=null;
drawAry=null;

gbuser=""; 
 
w = 320;
h = 380;

xx=0;
yy=0;

function isIPhone(){
    return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
 
// 画像表示のためのフラグ
function flgOnOff(inFlg){ return !inFlg; }

// Bodyタグ？
function checkBody(elem)
{
    checker = "HTML";
    // elementがHTMLタグではない場合、bodyタグであるかどうかを比較する。
    if(elem.tagName != "HTML"){
        checker = "BODY";
    }
    return ( elem.tagName == checker );
}

// BODYタグからのオフセット位置を計算して返す。
function getOffsetBody(elem)
{
    left = elem.offsetLeft;
    top = elem.offsetTop;

parentElem = elem.offsetParent;
    while(checkBody(parentElem)!== true){
        left += parentElem.offsetLeft;
        top += parentElem.offsetTop;
        parentElem = parentElem.offsetParent;
    }

return {x: left, y: top};
}

// DOMオブジェクトを探し出して削除する。
function _delete_dom_obj( id_name ){
    dom_obj=document.getElementById(id_name);
    dom_obj_parent=dom_obj.parentNode;
    dom_obj_parent.removeChild(dom_obj);
}

/***********************************************************************************************/
red='rgb(255,0,0)';
blue='rgb(0,0,255)';
green='rgb(0,255,0)';
Magenda='rgb(255,0,255)';
yellow='rgb(255,255,0)';
cyan='rgb(0,255,255)';
   
gray='rgb(200,200,200)';
black='rgb(0,0,0)';
white='rgb(255,255,255)';

function DrawObject()
{
    img = null;
    x = 0;
    y = 0;
    z = 0;
    num= 0;

this.setInfo = function(inImage ,xin,yin,zin,iin) {
        this.img = inImage;
        this.x = xin;
        this.y = yin;
        this.z = zin;
        this.num= iin;
    };
}

function mySort(inAry)
{
    for (i=0; i<inAry.length-1; i++){
        for (j=0; j<inAry.length-i-1; j++){
            if (inAry[j].z > inAry[j+1].z){
                n = inAry[j];
                inAry[j]   = inAry[j+1];
                inAry[j+1] = n;
            }
        }
    }
    return inAry;
}

// canvasの作成
function createCanvas()
{
    canvas = null;
    canvas = document.getElementById('canvas');

/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */  
    if ( canvas === null  ){
        canvas = document.createElement('canvas');
        canvas.setAttribute("id", "canvas");
    }
    
    if(isIPhone()){
        canvas.setAttribute("onTouchStart"  , "on_TouchStart(event)");
        canvas.setAttribute("onTouchMove"   , "on_TouchMove(event)");
        canvas.setAttribute("onTouchEnd"    , "on_TouchEnd(event)");
        canvas.setAttribute("onTouchCancel" , "on_TouchCancel(event)");
        canvas.setAttribute("ongesturechange", "on_GestureChange(event)");
    }
    else{
        canvas.setAttribute("onmousemove"   , "on_mousemove(event)");
    }
    return canvas;
}

function getZOrder(deg3){
    z = 0;
    if(deg3 < 90 && deg3 >= 0 ){
        z = (180 - deg3) / 180;
    }
    else if( deg3 >= 90 && deg3 < 180 ){
        z = ( deg3 ) / 180;
    }
    else if ( deg3 >= 180 && deg3 < 270 ){
        z = ( deg3 - 180 ) / 180 + 1.0;
    }
    else{
        z = ( ( 360 - deg3) ) / 180 + 1.0;
    }

return z;
}

/**********************************************************/
/* GDI ****************************************************/
/**********************************************************/
function getContext(){return document.getElementById('canvas').getContext("2d");}
function setGrad(x,y,w,h,ctx)
{
    fact = [
        [Math.floor(x*255/h),Math.floor(y*255/w),(255-(Math.floor((x+y)/2*255/(w+h)/2)))],
        [Math.floor(x*255/w),Math.floor(y*255/h),(255-(Math.floor((x+y)/2*255/(w+h)/2)))],
        [Math.floor(y*255/h),Math.floor(x*255/w),(255-(Math.floor((x+y)/2*255/(w+h)/2)))],
        [0,0,0]
    ];

clrA = "rgb("+fact[0][2]+","+fact[0][0]+","+fact[0][1]+")";
    clrB = "rgb("+fact[1][1]+","+fact[1][2]+","+fact[1][0]+")";
    clrC = "rgb("+fact[2][0]+","+fact[2][1]+","+fact[2][2]+")";

grad  = ctx.createLinearGradient(0,0,w,h);
    grad.addColorStop(0.0,clrA);
    grad.addColorStop(0.5,clrB);
    grad.addColorStop(1.0,clrC);

// グラデーションをfillStyleプロパティにセット
    ctx.fillStyle = grad;
}

function setBG( x, y, w, h, ctx)
{
    ctx.beginPath();
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect(0,0,w,h);
    ctx.closePath();
}
function drawPoint( ctx , x ,y , clr ){
    ctx.beginPath();
    ctx.fillStyle = clr;
    ctx.fillRect(x,y,1,1);
    ctx.closePath();
    ctx.stroke();
}

function drawLine( ctx , xs ,ys , xe, ye,clr ){
    ctx.beginPath();
    ctx.strokeStyle = clr;
    ctx.moveTo(xs,ys);
    ctx.lineTo(xe,ye);
    ctx.closePath();
    ctx.stroke();
}
 
function drawRect( ctx , x ,y , wid , hei , clr){
    ctx.beginPath();
    if(clr != ""){ ctx.fillStyle = clr;}
    ctx.fillRect(x,y, wid , hei);
    ctx.closePath();
    ctx.stroke();
}

function drawCircle( ctx , x ,y , r, clr ){
    ctx.beginPath();
    ctx.fillStyle = clr;
    ctx.arc(x,y,r,0,Math.PI*2, false);
    ctx.closePath();
    ctx.fill();
}

function drawImage( ctx , img , x , y , wid , hei ){
    if( img.complete !== true ){
        drawRect( ctx , x ,y , wid , hei , gray);
        return;
    }
    ctx.beginPath();
    ctx.drawImage(img,x,y,wid ,hei );
    ctx.closePath();
    ctx.stroke();
}

function drawText(ctx , txt , x , y , align , font ,clr){
    ctx.beginPath();
    ctx.fillStyle = clr;
    ctx.textAlign = align;
    ctx.font = font;
    ctx.fillText(txt,x,y);
    ctx.closePath();
    ctx.fill();
}
/**********************************************************/
// kari s
function drawGrid(ctx,interval,area)
{
    // 横
    for(i = 0; i < area.bottom/interval;i++)
    {
        x1 = area.left;
        y1 = area.top+interval*i;
        x2 = area.right;
        y2 = area.top+interval*i;
        drawLine(ctx,x1,y1,x2,y2,red);
    }
    // 縦
    for(i = 0; i < area.right/interval;i++)
    {
        x1 = area.left+interval*i;
        y1 = area.top;
        x2 = area.left+interval*i;
        y2 = area.bottom;
        drawLine(ctx,x1,y1,x2,y2,red);
    }
}
// kari e
// 画像のロード状態チェック
function imageLoadStatusCheck(){
    loadcomplete = true;
    if(gbimg===null)
    {
        loadcomplete = false;
    }
    else{
        for (i = 0 ; i < gbimg.length ; i++ ){
            if( gbimg[i].complete !== true ){
                return false;
            }
        }
    }
    return loadcomplete;
}

// すべての画像がロード済みなら再描画のためのタイマーを止める。
// なんかいまいち…
function isloadedTumblrLog(){
    draw(xx,yy);
    tmp = imageLoadStatusCheck();
    if( tmp !== true ){
        redraw = true;
    }
    else
    {
    }
}

function draw( x,  y )
{ 
    /* 2Dコンテキスト */
    ctx = getContext();
    // 描画開始
    ctx.beginPath();

//　背景設定
    setBG( x, y, w, h, ctx);
    ctx.closePath();
    ctx.stroke();

// 描画開始
    ctx.beginPath();
    //　描画色設定
    setGrad(x,y,w,h,ctx);
    
    if( imageLoadStatusCheck() !== true )
    {
        drawRect( ctx , 0 ,0 , 320 , 12 , white );
        drawText(ctx,"Now loading...",10,10 ,"left" ,"bold 12px 'ＭＳ Ｐゴシック'",red);
    }
    else{
        if(drawAry!==null){
            // 文字設定
            disp = parseInt(drawAry.length);
            drawText(ctx,"disp : "+disp ,10,10 ,"left" ,"bold 12px 'ＭＳ Ｐゴシック'");
        }
    }
    
    if(gbimg === null){
        ctx.closePath();
        ctx.stroke();
        return;
    }
    
    // addRad = ( (360/gbimg.length) * Math.PI ) / 180;
    // rad = Math.atan2(y-h/4,x-w/2);
    // deg = (rad* 180 )/Math.PI;
    deg = y * ( 360 / h );
   
    if(deg <=0 ){
        deg = Math.abs(deg);
    }
    else {
        deg = 360-deg;
    }

// 扁平率
    a = w/2+gbimg.length;
    b = 50;

deg2 = (360/(gbimg.length));

ctx.translate(w/2,h/4);

if( yy != y || drawAry === null || redraw === true )
    {
        drawAry = new Array();
        // 座標計算
        for(var i=0 ; i < gbimg.length ; i++ ) {
            deg3 = deg2*i+deg;
            deg3 = ( deg3 >= 360 ) ? (deg3 - 360) : deg3 ;
            rad = (( deg3 * Math.PI ) / 180 )*-1;
    
            // 開始位置のXY座標を決定
            x1 = Math.floor(a*Math.cos(rad));
            y1 = Math.floor(b*Math.sin(rad));
    
            zo = getZOrder(deg3);    
            tmp = new DrawObject();
            tmp.setInfo(gbimg[i] ,x1,y1,zo,i+1);
            drawAry.push(tmp);
        }
    
        drawAry= mySort(drawAry);
    }

newWid = 100;//parseInt(val.img.getAttribute('width'));
    newHei = 100;//parseInt(val.img.getAttribute('height'));
    width = h/10;
 
    // 画像表示
    for( i=0 ; i < drawAry.length ; i++) {
        val = drawAry[i];

z1 = val.z / 1.5;
        x1 = val.x-(newWid*z1)/2;
        y1 = val.y-(newWid*z1)/2;
        w1 = newWid*z1;
        h1 = newHei*z1;
        drawImage(ctx,val.img,x1,y1,w1 ,h1 );
         
        if( i == drawAry.length -1 ){
            drawWid = newWid * 2;
            waku = 10;
            z2 = val.z / 1.5;
            x2 = 0-drawWid/2;
            y2 = 0+drawWid/5;
            w2 = drawWid;
            h2 = drawWid;

drawRect(ctx, x2-waku ,y2-waku ,(w2+waku*2),(h2+waku*2) ,"");
            drawImage(ctx , val.img,x2,y2,w2,h2);
            countPis = (parseInt(gbstart)-parseInt(gbcnt)+parseInt(val.num));
            drawText(ctx,"No."+countPis ,x2-waku ,y2+drawWid+waku*3 ,"left" ,"bold 22px 'Impact'");
            
        }
    }

ctx.closePath();
    ctx.stroke();

ctx.translate(-w/2,-h/4);
    
    drawRect( ctx , w*0.98-3 ,0 , 6 , h ,red);
    setGrad(w*0.95,y,8,h,ctx);
    drawCircle( ctx , w*0.98 ,y , 6);
  
    xx = x;
    yy = y;
    redraw = false;
}

//　画面の初期化処理
function init (){
}

function createTumblrAPI(){
    tumblr = null;

gbcnt = parseInt(document.getElementById("Cnt").value);
    if( document.getElementById("User").value != gbuser )
    {
        gbuser = document.getElementById("User").value;
        gbstart=0;
    }

src = "http://" +
    gbuser +
    ".tumblr.com/api/read/json?start=" +
    gbstart +
    "&num=" +
    gbcnt  +
    "&type=photo&callback=my_tumble_photo_n";

tumblr = document.getElementById("tumblr");
    if(tumblr !== null ){
        _delete_dom_obj( "tumblr" );
    }

tumblr = document.createElement('script');
    tumblr.setAttribute("id", "tumblr");
    tumblr.setAttribute("src", src);
    tumblr.setAttribute("language", "JavaScript");
    tumblr.setAttribute("type", "text/javascript");

gbstart = gbstart + gbcnt;
    gbtotal = gbtotal + gbcnt;
    return tumblr;
}

/**********************************************************/
/* WEBAPIコール *******************************************/
/**********************************************************/
function my_tumble_photo_n(arg){
    timer = setInterval('isloadedTumblrLog()',1000);
 
    drawImageFlg=false;
    gbimg=new Array();
    tObj2=arg['tumblelog'];
    tObj=arg['posts'];
    imgnum=tObj.length;
    
    for(i=0; i < imgnum; i++){
        photourl=tObj[i]['photo-url-250'];
        tmpimg=new Image();

tmpimg.title=tObj[i]['photo-caption'];
        tmpimg.src=photourl;
        tmpimg.setAttribute('width',100);
        tmpimg.setAttribute('height',100);
        gbimg.push(tmpimg);
    }
}
/**********************************************************/
/* 画面とのIF部分　****************************************/
/**********************************************************/

function func(){
try{
    drawAry = null;
    redraw = true;
    gbimg = null;
    draw(xx,yy);
    
    myBody = document.getElementById("drawArea");

tumblr = createTumblrAPI();
    if (tumblr === null ){
        return false;
    }
    else{
        myBody.appendChild(tumblr);
    }

mycanvas = createCanvas();
    // nullならcanvas未対応ブラウザ
    if (mycanvas === null ){
        return false;
    }

}catch (er){}
}

window.addEventListener("load", function(){

// スクロールバーを消す？
    setTimeout(function() { window.scrollTo(0, 1); }, 10);

/* To prevent scrolling, call WidgetPad.noscroll(true); */
    WidgetPad.noscroll(true);

/* Write your code to here*/

}, false);

/*************************************************************************/
/* ui event **************************************************************/
/*************************************************************************/
// なんかスペルミスってる気がする
function transform_event_coord(e){return e.touches;}
// なんかスペルミスってる気がする
function transform_event_coord_pos(e){return {x: e.clientX, y: e.clientY};}

function on_TouchStart(e){
    pos = transform_event_coord(e);
}
function on_TouchMove(e){
    pos = transform_event_coord(e);
    draw(pos[0].clientX,pos[0].clientY);
}
function on_TouchEnd(e){
    pos = transform_event_coord(e);
}
function on_TouchCancel(e){
    pos = transform_event_coord(e);
}

function on_mousemove(e)
{
    pos = transform_event_coord_pos(e);
    draw(pos.x,pos.y);
}

function on_GestureChange(e){
}