forked from joaool/MotherGithub
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_Widgets.html
170 lines (144 loc) · 8.8 KB
/
test_Widgets.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<html>
<head>
<!--
<script type="text/javascript" src="Dojo Toolkit/dojo-release-1.7.1/dojo/dojo.js" djconfig="parseOnLoad: true, isDebug: true" >
</script>
<link href="Dojo Toolkit/dojo-release-1.7.1/dijit/themes/claro/claro.css" rel="stylesheet">
-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test Widgets 1.0</title>
<script>
dojoConfig= {
has: {
"dojo-firebug": true
},
parseOnLoad: false,
debugAtAllCosts: true,
foo: "bar",
async: true
};
</script>
<script type="text/javascript" src="../dojo1.9.2/dojo/dojo.js"></script>
<!--<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>-->
<!--<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script type="text/javascript"
src="../Jcrop/js/jquery.min.js"></script>
<!--<script src="Mother/jquery-1.8.1.min.js"></script> -->
<!--<script src="Mother/bootstrap.js"></script>-->
<link rel="stylesheet" href="../Jcrop/demos/demo_files/main.css" type="text/css" />
<link href="../dojo1.9.2/dijit/themes/claro/claro.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="Mother/MotherBuilder.css" />
<!--- For Mother Forms A -BlueHills, B-Simple Green C- Tree D-Chess E-light blue F(A+C)=>(fz,f0)-->
<!--<link rel="stylesheet" type="text/css" href="Mother1/MotherF.css"/> -->
<link rel="stylesheet" type="text/css" href="Mother/Mother.css"/>
<script>
require([
"dojo/parser",
"dojo/_base/kernel",
"dojo/_base/window",
"dojo/_base/lang",
"dojo/_base/event",
"dojo/on",
"dojo/parser",//recomendation from JS
"dojo/dom",
"Mother/ResizeMoveArea8.js",
"Mother/areasFactory.js",
"Mother/textbox.js",
"Mother/numberbox.js",
"Mother/container.js",
"Mother/detect.js",
"dojo/domReady!"
],
function(parser,kernel,Win,Lang,Event,On,Parser,Dom,ResizeMoveArea,canvas,textbox,numberbox,container,detectEngine){
var canvas = new canvas();//by default a base container (the full screen) is defined
// var canvas = new canvas({left: 50,top: 10,width: 1000,height: 500});//by default a base container (the full screen) is defined
// nInfo = new numberbox({left: 1050,top: 0,width: 220,height: 40,value: -1})
// nInfo1 = new numberbox({left: 1050,top: 40,width: 220,height: 40,value: -1})
var c0 = canvas.createContainer({name: "form f0",left: 50,top: 100,width: 520,height: 230,borderColor: "green"});
c0.setBorder({borderThickness: 30});
var lbl1 = canvas.createTextboxIn(c0,{value: "Form 0",height: 22});
var lbl2 = canvas.createTextboxIn(c0,{value: "abcd",left: 0, top: 30,width: 50,height: 20});
// var txt1 = canvas.createTextboxIn(c0,{left: 60, top: 30,width: 100,height: 40,value: "Junkas", title:"to test something outside the handles...handle will stay", borderThickness: 10});
var txt1 = canvas.createTextboxIn(c0,{left: 20, top: 30,width: 100,height: 40,value: "Junkas", title:"to test something outside the handles...handle will stay", borderThickness: 10});
var num1 = canvas.createNumberboxIn(c0,{top: 90,value: 127,height: 20,title:"Just a numeric box..."});
var c01 = canvas.createContainerIn(c0,{name: "Inside form f0",left:240,top: 10,width: 200,height: 250,borderColor: "red"});
var lbl01 = canvas.createTextboxIn(c01,{left: 5,top: 5,value: "form 01",height: 30});
// c0.setBorder({borderThickness: 0,borderColor: ""});
// txt1.moveTo({left: 159, top: 124});
// txt1.moveInContainerTo({left:0, top: 0});
// alert("xxx1 txt1.left="+txt1.left+" txt1.top="+txt1.top+" zIndex="+txt1.zIndex);
// var oTotalThickness = {total: 0};//3rd argument of area.highestZIndexAreaUnder() has cumulated borderThicknesses
// var topAreaCandidate = canvas.baseContainer.topAreaUnderPoint({left: 575, top: 180},canvas.baseContainer);
c01.setBorder({borderThickness: 20});
var c011 = canvas.createContainerIn(c01,{name: "deepest f2",left:10,top: 50,width: 150,height: 150,borderColor: "red"});
c011.setBorder({borderThickness: 1,borderColor: "yellow"});
var txt0111 = canvas.createTextboxIn(c011,{left: 0,top: 0,value: "Form c011",height: 20,title:"Another numeric box..."});
var num0111 = canvas.createNumberboxIn(c011,{left: 10,top: 40,value: 132,height: 20,title:"Another numeric box..."});
// alert("num0111.totalBorderThicknessesBelowArea()="+num0111.totalBorderThicknessesBelowArea());
// alert("c011.totalBorderThicknessesBelowArea()="+c011.totalBorderThicknessesBelowArea());
// alert("c01.totalBorderThicknessesBelowArea()="+c01.totalBorderThicknessesBelowArea());
// alert("c0.totalBorderThicknessesBelowArea()="+c0.totalBorderThicknessesBelowArea());
console.log("lbl1-> id="+lbl1.id+" left="+lbl1.left+" top="+lbl1.top+" width="+lbl1.width+" height="+lbl1.height+" zIndex="+lbl1.zIndex+" value="+lbl1.value+" domId="+lbl1.domId);
// alert("txt0111.isPointOnContainerBorderMargin(348,208)="+txt0111.isPointOnContainerBorderMargin(348,208));
// alert("txt0111.isPointOnContainerBorderMargin(353,213)="+txt0111.isPointOnContainerBorderMargin(353,213));
// alert("c01.isPointInsideArea({left: 319,top: 180})="+c01.isPointInsideArea({left: 319,top: 180}));
// alert("c01.isPointInsideArea({left: 322,top: 180})="+c01.isPointInsideArea({left: 322,top: 180}));
// var topAreaCandidate = canvas.baseContainer.topAreaUnderPoint({left: 620, top: 380},canvas.baseContainer);
// alert("STOP after topAreaUnderPoint({left: 620, top: 380})="+topAreaCandidate.name);
var c1 = canvas.createContainer({name: "form f1", left: 500+00, top: 100, width: 220, height: 100, borderColor: "green"});
var lbl11 = canvas.createTextboxIn(c1,{value: "Form 1",height: 22});
var lbl12 = canvas.createTextboxIn(c1,{top: 30,height: 22,value: "abcd"});
var txt11 = canvas.createTextboxIn(c1,{left:100,top:30,height: 22,title:"test..",placeHolder:"something",borderThickness: 10});
// alert("c1.zIndex="+c1.zIndex);
c1.setBorder({borderThickness: 5, borderColor: "purple"});
// c0.moveTo({left: 51,top: 99});
// alert("c0.zIndex="+c0.zIndex+" should be 5 !!!");
// alert("lbl1.zIndex="+lbl1.zIndex+" should be 6 !!!");
// alert("c01.zIndex="+c01.zIndex+" should be 6 !!!");
// alert("lbl01.zIndex="+lbl01.zIndex+" should be 7 !!!");
var c2 = canvas.createContainer({name: "form f2", left: 950+00, top: 100, width: 220, height: 100, borderColor: "green"});
c2.setBorder({borderThickness: 0});
var lbl11 = canvas.createTextboxIn(c2,{value: "Form xx 2",height: 22});
var lbl12 = canvas.createTextboxIn(c2,{top: 30,height: 22,value: "abcd"});
var txt11 = canvas.createTextboxIn(c2,{left:100,top:30,height: 22,value: "jojo",title:"test..",placeHolder:"something",borderThickness: 10});
canvas.containerSummaryDump();
canvas.baseContainer.childDump();
c0.childDump();
c1.childDump();
c01.childDump();
//----------------------------------------
var t1 = new textbox({left:400, top:5000,height: 22,value: "test",title: "active handles test !"});
t1.setBorder({borderThickness: 10, borderColor: "red"});
// var t2 = new textbox({left:750, top:250,height: 22,value: "resize",title: "to test resize !"});
// t2.resize({width: 150,height:50});
// var n2 = new numberbox({left:750, top:300,height: 22,value: "987.234",title: "to test resize !"});
// n2.resize({width: 200,height:60});
var t2 = canvas.createTextbox({left:750, top:250,height: 22,value: "resize",title: "to test resize !"});
t2.resize({width: 150,height:50});
var n2 = canvas.createNumberbox({left:750, top:280,height: 22,value: "280.234",title: "to test resize !"});
n2.resize({width: 200,height:60});
var n3 = canvas.createNumberbox({left:750, top:350,height: 22,value: "350.234",title: "to test resize !"});
n3.moveTo({top:300});
// alert("zIndex n3.zIndex="+n3.zIndex);
// txt11.toggleVisible(false);
// n3.toggleVisible(false);
// alert("INVISIBLE");
// txt11.toggleVisible(true);
// n3.toggleVisible(true);
function test(){
alert("test message in function test - this call is defined in menu object exterior to the class...");
}
//--------------------------------------------------------------------------------------------------------------------------
console.log("--------------------------------------- container done.... -----------------------------------------------");
console.log(document.title+"...... END..");
}//closing of main function
);//closing of require function
</script>
</head>
<body class="claro">
<div id="xwrapper" width="640" height="360" color="red" </div>
<!--<div id="box" style="position: absolute;left:1000px;top:100px;width:100px;height:1030px;border:1px solid red" class="boxes" onmouseover="alert('Red spot - was blue !')"> -->
<div id="box" style="position: absolute;left:1000px;top:100px;width:100px;height:100px;border:1px solid red">
</body>
</html>