moved js code from html to js files
authorMatteo Nastasi (mop) <nastasi@alternativeoutput.com>
Wed, 7 Dec 2011 07:34:37 +0000 (08:34 +0100)
committerMatteo Nastasi (mop) <nastasi@alternativeoutput.com>
Wed, 7 Dec 2011 07:34:37 +0000 (08:34 +0100)
base-test.html [deleted file]
test-base.html [new file with mode: 0644]
test-dd.html [new file with mode: 0644]
test-div-coord.html
test_dd.html [deleted file]
xynt-dd-test.js [new file with mode: 0644]
xynt-div-coord-test.js [new file with mode: 0644]

diff --git a/base-test.html b/base-test.html
deleted file mode 100644 (file)
index 5fb1830..0000000
+++ /dev/null
@@ -1,11 +0,0 @@
-<html>
-<head>
-<script type="text/javascript" src="commons.js"></script>
-<script type="text/javascript" src="xynt-console.js"></script>
-<script type="text/javascript" src="xynt-base.js"></script>
-<script type="text/javascript" src="xynt-base-test.js"></script>
-
-</head>
-<body>
-</body>
-</html>
diff --git a/test-base.html b/test-base.html
new file mode 100644 (file)
index 0000000..5fb1830
--- /dev/null
@@ -0,0 +1,11 @@
+<html>
+<head>
+<script type="text/javascript" src="commons.js"></script>
+<script type="text/javascript" src="xynt-console.js"></script>
+<script type="text/javascript" src="xynt-base.js"></script>
+<script type="text/javascript" src="xynt-base-test.js"></script>
+
+</head>
+<body>
+</body>
+</html>
diff --git a/test-dd.html b/test-dd.html
new file mode 100644 (file)
index 0000000..8fdfaf4
--- /dev/null
@@ -0,0 +1,18 @@
+<html>
+<head>
+<script type="text/javascript" src="commons.js"></script>
+<script type="text/javascript" src="xynt-base.js"></script>
+<script type="text/javascript" src="xynt-connect.js"></script>
+<script type="text/javascript" src="xynt-dd.js"></script>
+<script type="text/javascript" src="xynt-link.js"></script>
+<script type="text/javascript" src="xynt-dd-test.js"></script>
+</head>
+<body>
+<!-- task:begin -->
+<div id="board" style="width: 1600; height: 800px; background-color: #f0f0f0; border: 1px solid black; position: relative;">
+
+  <div id="t1" style="z-index: 1; left: 10px; top: 10px; width: 100px; height: 21px; border: 1px solid gray; background-color: #c0c0ff; position: absolute;"></div>
+  
+</div>
+</body>
+</html>
index 09af921..f9ada6b 100644 (file)
@@ -1,87 +1,26 @@
 <html>
 <head>
 <script type="text/javascript" src="commons.js"></script>
 <html>
 <head>
 <script type="text/javascript" src="commons.js"></script>
+<script type="text/javascript" src="xynt-base.js"></script>
 <script type="text/javascript" src="xynt-console.js"></script>
 <script type="text/javascript" src="xynt-console.js"></script>
+<script type="text/javascript" src="xynt-connect.js"></script>
 <script type="text/javascript" src="xynt-dd.js"></script>
 <script type="text/javascript" src="xynt-link.js"></script>
 <script type="text/javascript" src="xynt-dd.js"></script>
 <script type="text/javascript" src="xynt-link.js"></script>
-<script type="text/javascript">
-
-function resize()
-{
-    //var w = getStyle(window.document.body, "width", "width");
-    //var h = getStyle(window.document.body, "height", "height");
-    var w = window.innerWidth;
-    var h = window.innerHeight;
-
-    console.log("W: "+w+" H: "+h);
-
-    $('board').style.left    =  (parseInt(w) / 2 - 2 + 2)+"px";
-    $('board').style.top     =  "0px";
-    $('board').style.width   =  (parseInt(w) / 2 - 2)+"px";
-    $('board').style.height  =  (parseInt(h) - 2)+"px";
-    $('board2').style.top    =  "0px";
-    $('board2').style.left   =  "0px";
-    $('board2').style.width  =  (parseInt(w) / 2 - 2)+"px";
-    $('board2').style.height =  (parseInt(h) - 2)+"px";
-
-    var h1 = $('board').clientHeight;
-    var h2 = $('board2').clientHeight;
-    if (h1 > h2) {
-        $('board').style.height = h2+"px";
-    }
-    else if (h2 > h1) {
-        $('board2').style.height = h1+"px"; 
-    }
-
-    console.log($('board').scrollTop);
-    $('board2-sub').scrollTop = $('board').scrollTop;
-}
-
-function scroll() {
-    console.log("scroll");
-    $('board2-sub').style.top = -parseInt($('board').scrollTop)+"px";
-}
-
-function scroll2() {
-    console.log("scroll2:");
-}
-
-window.onload = function () {
-    resize();
-    return;
-
-    // window.setTimeout(exchange, 2000);
-
-    Drag.call($('t1'), dropr1, -1600, 1600, 10,10);
-    Drag.call($('t2'), dropr2, -1600, 1600, 10,10);
-    Drag.call($('t3'), dropr1, -1600, 1600, 10,10);
-    Drag.call($('t4'), dropr2, -1600, 1600, 10,10);
-    Drag.call($('r1'), dropr1, 0,0, -900,900);
-    Drag.call($('r2'), dropr2, 0,0, -900,900);
-    Drag.call($('r3'), dropr3, 0,0, -900,900);
-    Drag.call($('r4'), dropr4, 0,0, -900,900);
-
-    l = new tasks_link($('board'), $('t1'), $('t2'), "ss");
-    l = new tasks_link($('board'), $('t3'), $('t4'), "ss");
-
-}
-</script>
+<script type="text/javascript" src="xynt-div-coord-test.js"></script>
 
 </head>
 <body style="margin: 0px; padding: 0px;">
 <!-- task:begin -->
 
 
 </head>
 <body style="margin: 0px; padding: 0px;">
 <!-- task:begin -->
 
-<div  id="board2" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 1px solid black; position: absolute; overflow-y: hidden; overflow-x: scroll;" onclick="resize();" onscroll="scroll2('scroll');">
-<div id="board2-sub" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 0px solid black; position: absolute;" onclick="resize();" onscroll="scroll2('scroll');">
+<div  id="board" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 1px solid #a0a0a0; position: absolute; overflow-y: scroll; overflow-x: scroll;" onclick="resize();" onscroll="scroll2('scroll');">
 aa1<br>aa2<br>aa3<br>aa4<br>aa5<br>aa6<br>aa7<br>aa8<br>aa9<br>aaA<br>aaB<br>aaC<br>aaD<br>aaE<br>aaF<br>aa0<br>
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
 bb1<br>bb2<br>bb3<br>bb4<br>bb5<br>bb6<br>bb7<br>bb8<br>bb9<br>bbA<br>bbB<br>bbC<br>bbD<br>bbE<br>bbF<br>bb0<br>
 </div>
 aa1<br>aa2<br>aa3<br>aa4<br>aa5<br>aa6<br>aa7<br>aa8<br>aa9<br>aaA<br>aaB<br>aaC<br>aaD<br>aaE<br>aaF<br>aa0<br>
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
 bb1<br>bb2<br>bb3<br>bb4<br>bb5<br>bb6<br>bb7<br>bb8<br>bb9<br>bbA<br>bbB<br>bbC<br>bbD<br>bbE<br>bbF<br>bb0<br>
 </div>
-</div>
 
 
-<div id="board" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 1px solid black; overflow-y: scroll; position: absolute;" onclick="resize();" onscroll="scroll('scroll');">
+<div id="board-drag" style="width: 6px; height: 10%; background-color: #e0e0e0; border: 1px solid #a0a0a0; position: absolute; visibility: visible;"></div>
+
+<div id="board2" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 1px solid #a0a0a0; overflow-y: scroll; position: absolute;" onclick="resize();" onscroll="scroll('scroll');">
 aa1<br>aa2<br>aa3<br>aa4<br>aa5<br>aa6<br>aa7<br>aa8<br>aa9<br>aaA<br>aaB<br>aaC<br>aaD<br>aaE<br>aaF<br>aa0<br>
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
 bb1<br>bb2<br>bb3<br>bb4<br>bb5<br>bb6<br>bb7<br>bb8<br>bb9<br>bbA<br>bbB<br>bbC<br>bbD<br>bbE<br>bbF<br>bb0<br>
 aa1<br>aa2<br>aa3<br>aa4<br>aa5<br>aa6<br>aa7<br>aa8<br>aa9<br>aaA<br>aaB<br>aaC<br>aaD<br>aaE<br>aaF<br>aa0<br>
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
 bb1<br>bb2<br>bb3<br>bb4<br>bb5<br>bb6<br>bb7<br>bb8<br>bb9<br>bbA<br>bbB<br>bbC<br>bbD<br>bbE<br>bbF<br>bb0<br>
diff --git a/test_dd.html b/test_dd.html
deleted file mode 100644 (file)
index 2b879ae..0000000
+++ /dev/null
@@ -1,175 +0,0 @@
-<html>
-<head>
-<script type="text/javascript" src="commons.js"></script>
-<script type="text/javascript" src="xynt-base.js"></script>
-<script type="text/javascript" src="xynt-dd.js"></script>
-<script type="text/javascript" src="xynt-link.js"></script>
-<script type="text/javascript">
-  function dropt1()
-  {
-    ; //alert("t1");
-  }
-  window.onload = function() {
-    console.log("HT"+$('t1'));
-    Drag.call($('t1'), dropt1, -1600, 1600, 10,10);
-  }
-</script>
-<!--
-<script type="text/javascript">
-
-function Adamo() {
-    this.name = "adamo";
-}
-
-Adamo.prototype = {
-    alupa: null,
-
-    pname: function()
-    {
-        console.log("NAME: "+this.name);
-    }
-}
-
-function Caino() {
-    this.super.constructor.call(this);
-    this.nname = "caino";
-}
-
-Caino.prototype = {
-    gojira: null,
-
-    pname2: function()
-    {
-        console.log("NAME:  "+this.name);
-        console.log("NNAME: "+this.nname);
-    }
-}
-
-function Extends_simple(sub, super)
-{
-    var thinF = function(){};
-    thinF.prototype = super.prototype;
-    var tmp = new thinF();
-
-    for( var f in sub.prototype) {
-        tmp[f] = sub.prototype[f];
-        tmp['constructor'] = sub;
-    }
-    if( super.prototype.constructor == Object.prototype.constructor ){
-        super.prototype.constructor = super;
-    }
-    tmp['super'] = super.prototype;
-    sub.prototype = tmp;
-}
-
-Extends_simple(Caino, Adamo);
-
-var c = new Caino();
-
-console.log("A "+c.alupa);
-console.log("G "+c.gojira);
-console.log("U "+c.unko);
-
-c.pname();
-c.pname2();
-
-function PreA() {
-    this.a_din = "adamo";
-}
-
-PreA.prototype = {
-    a_attr: "a attr content",
-    name: "PreA",
-
-    a_func: function()
-    {
-        console.log("A_NAME: "+this.a_din);
-        console.log("A_ATTR: "+this.a_attr);
-    }
-}
-
-function A() {
-    PreA.call(this);
-}
-A.prototype = {
-    name: "A"
-}
-Extends(A, PreA);
-
-function B() {
-    this.b_din = "bonobo";
-}
-
-B.prototype = {
-    name: "B",
-    b_attr: "b attr content",
-
-    b_func: function()
-    {
-        console.log("B_NAME: "+this.b_din);
-        console.log("B_ATTR: "+this.b_attr);
-    }
-}
-
-function C() {
-    this.c_din = "canuca";
-}
-
-C.prototype = {
-    name: "C",
-    c_attr: "c attr content",
-
-    c_func: function()
-    {
-        console.log("C_NAME: "+this.c_din);
-        console.log("C_ATTR: "+this.c_attr);
-    }
-}
-
-
-function Summo() {
-    this.s_name = "caino";
-    A.call(this);
-    B.call(this);
-    C.call(this);
-
-}
-
-Summo.prototype = {
-    name: "Summo",
-    s_attr: null,
-
-
-    c_func: function()
-    {
-         console.log("c_func overwrited");
-    },
-
-    s_func: function()
-    {
-         this.a_func();
-         this.b_func();
-         this.c_func();
-         console.log("name: "+this.name);
-    }
-}
-
-Extends(Summo, A, B, C);
-
-
-s_ist = new Summo();
-s_ist.s_func();
-
-</script>
--->
-
-</head>
-<body>
-<!-- task:begin -->
-<div id="board" style="width: 1600; height: 800px; background-color: #f0f0f0; border: 1px solid black; position: relative;">
-
-  <div id="t1" style="z-index: 1; left: 10px; top: 10px; width: 100px; height: 21px; border: 1px solid gray; background-color: #c0c0ff; position: absolute;"></div>
-  
-</div>
-</body>
-</html>
diff --git a/xynt-dd-test.js b/xynt-dd-test.js
new file mode 100644 (file)
index 0000000..3cc8e54
--- /dev/null
@@ -0,0 +1,8 @@
+function dropt1()
+{
+    ; //alert("t1");
+}
+window.onload = function() {
+    console.log("HT"+$('t1'));
+    xynt_dd.call($('t1'), dropt1, -1600, 1600, 10,10);   
+}
\ No newline at end of file
diff --git a/xynt-div-coord-test.js b/xynt-div-coord-test.js
new file mode 100644 (file)
index 0000000..f678f3f
--- /dev/null
@@ -0,0 +1,95 @@
+
+function dimension()
+{
+    //var w = getStyle(window.document.body, "width", "width");
+    //var h = getStyle(window.document.body, "height", "height");
+    var w = window.innerWidth;
+    var h = window.innerHeight;
+
+    console.log("W: "+w+" H: "+h);
+
+    $('board-drag').style.left    =  (parseInt(w) / 2 - 2)+"px";
+    $('board-drag').style.top     =  "0px";
+    /*$('board-drag').style.width   =  (10)+"px"; */
+    $('board-drag').style.height  =  (parseInt(h) - 2)+"px";
+
+    $('board').xynt_divcoo_hidescroll = 0;
+    $('board').style.top    =  "0px";
+    $('board').style.left   =  "0px";
+    // $('board').style.width  =  (parseInt(w) / 2 - 2)+"px";
+    $('board').style.height =  (parseInt(h) - 2)+"px";
+
+    $('board').style.width  = parseInt($('board-drag').style.left)+$('board').xynt_divcoo_hidescroll+"px";
+    if (parseInt($('board').style.width) > $('board').clientWidth) {
+        // alert("di qui");
+        $('board').xynt_divcoo_hidescroll = parseInt($('board').style.width) - $('board').clientWidth;
+        $('board').style.width  = parseInt($('board-drag').style.left)+$('board').xynt_divcoo_hidescroll+"px";
+        // $('board').style.width = (parseInt($('board').style.width) + $('board').xynt_divcoo_hidescroll)+"px";
+    }
+    
+    // $('board2').style.left    =  (parseInt(w) / 2 - 1 + parseInt($('board-drag').style.width))+"px";
+    $('board2').style.left  = parseInt($('board-drag').style.left)+parseInt($('board-drag').style.width)+1+"px";
+    $('board2').style.top     =  "0px";
+    $('board2').style.width = (w - (parseInt($('board-drag').style.left)+parseInt($('board-drag').style.width)+4))+"px";
+    // $('board2').style.width   =  (parseInt(w) / 2 - 2 - 10)+"px";
+    $('board2').style.height  =  (parseInt(h) - 2)+"px";
+
+    
+
+    var h1 = $('board2').clientHeight;
+    var h2 = $('board').clientHeight;
+    if (h1 > h2) {
+        $('board2').style.height = h2+"px";
+    }
+    else if (h2 > h1) {
+        $('board').style.height = h1+"px"; 
+    }
+
+    console.log($('board2').scrollTop);
+    $('board').scrollTop = $('board2').scrollTop;
+}
+
+
+function resize(event, obj)
+{
+    if (event == 'drag') {
+        var w = window.innerWidth;
+
+        $('board').style.width  = parseInt($('board-drag').style.left)-1+$('board').xynt_divcoo_hidescroll+"px";
+        $('board2').style.left  = parseInt($('board-drag').style.left)+parseInt($('board-drag').style.width)+1+"px";
+        $('board2').style.width = (w - (parseInt($('board-drag').style.left)+parseInt($('board-drag').style.width)+4))+"px";
+        console.log("conn_update: "+event);
+    }
+}
+    
+
+function scroll()
+{
+    // console.log("scroll");
+    // $('board').style.top = -parseInt($('board2').scrollTop)+"px";
+    $('board').scrollTop = $('board2').scrollTop;
+}
+
+function scroll2()
+{
+    // console.log("scroll2:");
+    $('board2').scrollTop = $('board').scrollTop;
+}
+
+function dropr1()
+{
+    ; //alert("t1");
+}
+
+window.onload = function () {
+    dimension();
+    $('board').xynt_conn_update = resize;
+    var ret = ExtendsInst($('board-drag'), xynt_dd, [ dropr1, -1600, 1600, 0,0 ]);
+    console.log("RET: "+ret);
+    console.log("xynt_conn_ect-v");
+    console.log($('board-drag').xynt_conn_ect);
+    $('board-drag').xynt_conn_ect($('board'));
+    // console.log($('board-drag'));
+    return;
+}