view public/viewer/viewer_white.html @ 97:5098c4967a3a draft

modified miniDisplay
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Sat, 16 Mar 2013 03:38:25 +0900
parents 1a97674f1cea
children 2c6ed8d2d433
line wrap: on
line source

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>R-Consensus</title>
<link rel='stylesheet' href="form.css">
<script src='form.js'></script>
<script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script>
<script type="text/javascript" src="js/lib/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="js/lib/jsBezier-0.4-min.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-util-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-dom-adapter-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-defaults-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-svg-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-canvas-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script>
<script type="text/javascript" src='treeArrangement.js'></script>

<style>
div.header{
	position:absolute;
	left:0;top:0;
	z-index:5;
	height:50px;
	width:100%;
	background:#223;
	background:-moz-linear-gradient(top,#002,#223);
	background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223));
	color:silver;
	font-size:40px;
}
</style>


<script type="text/javascript">
var LOAD_INTERVAL = 5;
var BASE_URL = "";
if(!Array.prototype.filter){
	Array.prototype.filter=function(func){
		var arr=[];
		for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]);
		return arr;
	}
}

var treeInfo;
var userList = [];
var root_id;
function loadConsensus(id) {
    function onload(json) {
	var title = json.hogehoge ? json.hogehoge : "title";
	document.title = title;
	$('#headertitle_main').text(title)
    }
}

function loadUserList() {
    $.ajax({
	url:BASE_URL + "/users/all",
	success:function(o) { userList = o.sort(); showUserList([]); },
	type:"GET", cache:false,
	error:function(o) { console.log("loadUserList error : ",o); }
    });
}

$(function() {
    userName = localStorage.userName;
    if(userName) start();
//    else $("#miniDisplay").css("display", "hidden");
    else $("#miniDisplay").css("visibility", "visible");
})

function start() {

}

function beginScript() {
    DragHandler.attach($('#miniDisplay')[0]);
}

var DragHandler = {
    _oElem : null,
    attach : function(oElem) {
	oElem.onmousedown = DragHandler._dragBegin;
	oElem.dragBegin = new Function();
	oElem.drag = new Function();
	oElem.dragEnd = new Function();
	return oElem;
    },
    _dragBegin : function(e) {
	var oElem = DragHandler._oElem = this;
	if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
	if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
	var x = parseInt(oElem.style.left);
	var y = parseInt(oElem.style.top);
	e = e ? e : window.event;
	oElem.mouseX = e.clientX;
	oElem.mouseY = e.clientY;
	oElem.dragBegin(oElem, x, y);
	document.onmousemove = DragHandler._drag;
	document.onmouseup = DragHandler._dragEnd;
	return false;
    },
    _drag : function(e) {
	var oElem = DragHandler._oElem;
	var x = parseInt(oElem.style.left);
	var y = parseInt(oElem.style.top);
	e = e ? e : window.event;
	oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
	oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
	oElem.mouseX = e.clientX;
	oElem.mouseY = e.clientY;
	oElem.drag(oElem, x, y);
	return false;
    },
    _dragEnd : function() {
	var oElem = DragHandler._oElem;
	var x = parseInt(oElem.style.left);
	var y = parseInt(oElem.style.top);
	oElem.dragEnd(oElem, x, y);
	document.onmousemove = null;
	document.onmouseup = null;
	DragHandler._oElem = null;
    }

};

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
	window.onload = func;
    } else {
	window.onload = function() {
	    if (oldonload) {
		oldonload();
	    }
	    func();
	}
    }
}

addLoadEvent(function() {
    beginScript();
});

</script>

<div class='header'>
    <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
</div>

<div id="miniDisplay" style='position:fixed; left:20; top:70; width:35%; height:35%; border:solid 1px; border-radius:5px; opacity:0.5; '>
  <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'>  </div>
  <div id="closeMiniDisplay" style='position:absolute; right:5; top:0;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','blue');" onmouseout="$('#closeMiniDisplay').css('color','black')" >close</div>
  <div style='position:absolute; left:50%; top:50%;'>
  <div style='position:absolute; left:-160px; top:-80px; width:320px; height:120px; background:white;'>
  <form onsubmit="try{var a=$('#loginUserName');if(a.val()){login(a.val());$('#miniDisplay').remove();}} catch(e){console.log(e)}return false;">
      <div style='position:absolute; left:20px; top:15px; font-size:24px; width:280; text-align:left;'>
	  dimolto
      </div>
      <input type=text placeholder='username' style='position:absolute; left:20px; top:70px; width:180px; font-size:16px; height:24px;' id='loginUserName'>
<!--
      <span style='position:absolute; left:220px; top:70px; width:80px; font-size:16px; height:24px; line-height:24px;' class='button' value='login' onclick="try{var a=$('#loginUserName');if(a.val()){login(a.val());$('#loginPopup').remove();}}catch(e){console.log(e)}return false;">Login</span>
-->
      <span style='position:absolute; left:220px; top:70px; width:80px; font-size:16px; height:24px; line-height:24px;' class='button' value='login'>button</span>
  </form>
  </div>
  </div>
</div>