Skip to content

Commit a79aa7b

Browse files
qiaoqiao
committed
add: controllers
1 parent 041bc1a commit a79aa7b

File tree

6 files changed

+1674
-84
lines changed

6 files changed

+1674
-84
lines changed

‎demo/index.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,44 @@
44
<meta charset="UTF-8">
55
<title>Fractal Terrain Generator</title>
66
<link rel="stylesheet" href="./main.css" />
7+
<link rel="stylesheet" href="./lib/fd-slider/fd-slider.css" />
8+
<link rel="stylesheet" href="./lib/fd-slider/fd-slider-tooltip.css" />
79
<script type="text/javascript" src="./lib/Three.js"></script>
810
<script type="text/javascript" src="./lib/RequestAnimationFrame.js"></script>
911
<script type="text/javascript" src="./lib/Detector.js"></script>
1012
<script type="text/javascript" src="./lib/jquery-1.7.1.min.js"></script>
1113
<script type="text/javascript" src="./lib/jquery.pubsub.js"></script>
12-
14+
<script type="text/javascript" src="./lib/fd-slider/fd-slider.js"></script>
1315
<script type="text/javascript" src="../lib/terrain.js"></script>
1416
<script type="text/javascript" src="./main.js"></script>
1517
</head>
1618
<body>
17-
<div id="sidebar"></div>
19+
<div id="sidebar">
20+
<div id="sidebar-inner">
21+
<h1 id="title">Fractal Terrain Generator</h1>
22+
<hr>
23+
24+
<form id="opts">
25+
<label for="size">Size:</label>
26+
<select class="opt" id="opt-size" name="size">
27+
<option value="1">1</option>
28+
<option value="2">2</option>
29+
<option value="4">4</option>
30+
<option value="8">8</option>
31+
<option value="16">16</option>
32+
<option value="32" selected="yes">32</option>
33+
<option value="64">64</option>
34+
<option value="128">128</option>
35+
</select>
36+
37+
<label for="smoothness">Smoothness:</label>
38+
<input class="opt" id="opt-smoothness" type="text" name="smoothness" min="0.1" max="5" step="0.1" value="1.0"><br>
39+
40+
<label for="z-scale">Z-Scale:</label>
41+
<input class="opt" id="opt-z" type="text" name="z-scale" min="0" max="400" step="20" value="200"><br>
42+
</form>
43+
</div>
44+
</div>
1845
<div id="container"></div>
1946
</body>
2047
</html>

‎demo/lib/fd-slider/fd-slider-tooltip.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/*
2+
Sample tooltip code. Only works on grade A browsers (so no IE6,7 or 8).
3+
4+
See: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ for full info on
5+
how to style generated content & the associated pitfalls
6+
7+
This code to be taken as experimental & untested - use at your discretion
8+
9+
If showing the tooltip above the sider handle you are relegated to showing
10+
single line tooltips due to styling constraints!
11+
*/
12+
13+
.fd-slider-handle:before,
14+
.fd-slider-handle:after
15+
{
16+
/* Remove from screen */
17+
opacity:0;
18+
/* The following rules are not really needed as no browser yet supports CSS transitions
19+
on generated content but I'll leave it in for the day when they do! */
20+
21+
/* Firefox */
22+
-moz-transition-property: opacity;
23+
-moz-transition-duration: 1s;
24+
-moz-transition-delay: 1s;
25+
/* WebKit */
26+
-webkit-transition-property: opacity;
27+
-webkit-transition-duration: 1s;
28+
-webkit-transition-delay: 1s;
29+
/* Opera */
30+
-o-transition-property: opacity;
31+
-o-transition-duration: 1s;
32+
-o-transition-delay: 1s;
33+
/* Standard */
34+
transition-property: opacity;
35+
transition-duration: 1s;
36+
transition-delay: 1s;
37+
}
38+
/*
39+
The tooltip body - as we position it above the slider and position the tooltip arrow
40+
below it, we need to know the height of the body. This means that multi-line tooltips
41+
are not supported.
42+
43+
To support multi-line tooltips, you will need to position the tooltip below the slider
44+
and the tooltip pointer above the tooltip body. Additionally, you will have to set the
45+
tooltip bodies "height" to auto
46+
*/
47+
.fd-slider-focused .fd-slider-handle:before,
48+
.fd-slider-hover .fd-slider-handle:before,
49+
.fd-slider-active .fd-slider-handle:before
50+
{
51+
display:block;
52+
position:absolute;
53+
top:-21px;
54+
left:-8px;
55+
margin:0;
56+
width:20px;
57+
padding:3px;
58+
height:14px;
59+
line-height:12px;
60+
text-align: center;
61+
font-size:10px;
62+
font-weight: bold;
63+
color:#fff;
64+
text-shadow: 1px 1px 1px #1a3a95;
65+
background:#2f6ee0;
66+
z-index:1;
67+
/* Use the ARIA valuetext property, set by the script, to generate the tooltip content */
68+
content:attr(aria-valuetext);
69+
/* Border radius and box shadow */
70+
-moz-border-radius:3px;
71+
-webkit-border-radius:3px;
72+
border-radius:3px;
73+
-moz-background-clip: padding;
74+
-webkit-background-clip: padding-box;
75+
background-clip: padding-box;
76+
-moz-box-shadow: 0 0 4px #aaa;
77+
-webkit-box-shadow: 0 0 4px #aaa;
78+
box-shadow: 0px 0px 4px #999;
79+
/* Change opacity for transition */
80+
opacity: 1;
81+
}
82+
/* The tooltip pointer */
83+
.fd-slider-focused .fd-slider-handle:after,
84+
.fd-slider-hover .fd-slider-handle:after,
85+
.fd-slider-active .fd-slider-handle:after
86+
{
87+
outline:none;
88+
content:"";
89+
display:block;
90+
position:absolute;
91+
top:-9px;
92+
left:50%;
93+
margin:0 0 0 -5px;
94+
background:#2f6ee0;
95+
z-index:2;
96+
width:10px;
97+
height:10px;
98+
overflow:hidden;
99+
/* Rotate element by 45 degress to get the "\/" pointer effect */
100+
-webkit-transform: rotate(45deg);
101+
-moz-transform: rotate(45deg);
102+
-o-transform: rotate(45deg);
103+
/* Add a box shadow */
104+
-moz-box-shadow: 0 0 4px #aaa;
105+
-webkit-box-shadow: 0 0 4px #aaa;
106+
box-shadow: 0 0 4px #aaa;
107+
/* Clip */
108+
clip:rect(4px, 14px, 14px, 4px);
109+
/* Change opacity for transition */
110+
opacity: 1;
111+
}
112+
/* Remove completely for IE */
113+
.oldie .fd-slider-handle:before,
114+
.oldie .fd-slider-handle:after
115+
{
116+
display:none;
117+
}

‎demo/lib/fd-slider/fd-slider.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
2+
/* The styles given to the associated form element in order to hide it */
3+
.fd-form-element-hidden
4+
{
5+
display:none;
6+
}
7+
/* Horizontal Outer wrapper - all other DOM elements added as children to this top level wrapper */
8+
.fd-slider
9+
{
10+
width:100%;
11+
/* The height of the slider handle */
12+
height:20px;
13+
margin:0;
14+
}
15+
/* Vertical Outer wrapper - all other DOM elements added as children to this top level wrapper */
16+
.fd-slider-vertical
17+
{
18+
/* The width of the slider handle */
19+
width:20px;
20+
/* Fill the available space */
21+
height:100%;
22+
/* Set a 10 pixel right and bottom margin */
23+
margin:0 10px 10px 0;
24+
/* You may wish to float the vertical sliders left or display:inline-block */
25+
/* float:left; */
26+
}
27+
/* Shared rules - both horizontal & vertical sliders */
28+
.fd-slider,
29+
.fd-slider-vertical
30+
{
31+
/* display:block required as the wrapper element is a span */
32+
display:block;
33+
/* This lets us absolutely position the drag handle */
34+
position:relative;
35+
text-decoration:none;
36+
border:0 none;
37+
-moz-user-select:none;
38+
-khtml-user-select:none;
39+
-webkit-touch-callout:none;
40+
user-select:none;
41+
}
42+
.fd-slider-inner
43+
{
44+
/* Used by IE for the onfocus blur effect */
45+
display:none;
46+
}
47+
48+
/* The inner track bar */
49+
.fd-slider-bar
50+
{
51+
position:absolute;
52+
display:block;
53+
z-index:2;
54+
height:6px;
55+
width:100%;
56+
border:1px solid #bbb;
57+
border-bottom:1px solid #fff;
58+
border-right:1px solid #fff;
59+
margin:0;
60+
padding:0;
61+
overflow:hidden;
62+
line-height:4px;
63+
top:8px;
64+
-moz-border-radius:4px;
65+
-webkit-border-radius:4px;
66+
border-radius:4px;
67+
-moz-background-clip: padding;
68+
-webkit-background-clip: padding-box;
69+
background-clip: padding-box;
70+
background-color: #333;
71+
}
72+
/* The animated range bar */
73+
.fd-slider-range
74+
{
75+
position:absolute;
76+
display:block;
77+
z-index:3;
78+
height:6px;
79+
margin:0;
80+
padding:0 2px 0 0;
81+
overflow:hidden;
82+
top:9px;
83+
-moz-border-radius:2px;
84+
-webkit-border-radius:2px;
85+
border-radius:2px;
86+
-moz-background-clip: padding;
87+
-webkit-background-clip: padding-box;
88+
background-clip: padding-box;
89+
background-color: #eee;
90+
}
91+
/* The drag handle */
92+
.fd-slider-handle
93+
{
94+
position:absolute;
95+
display:block;
96+
padding:0;
97+
border:0 none;
98+
margin:0 0 0 1px;
99+
z-index:3;
100+
top:5px;
101+
left:0;
102+
width:12px;
103+
height:12px;
104+
line-height: 1px !important;
105+
outline:0 none;
106+
background: #eee;
107+
border: 1px solid #aaa;
108+
border-radius: 12px;
109+
-webkit-user-select: none;
110+
-webkit-touch-callout:none;
111+
-moz-user-select:none;
112+
-moz-user-focus:none;
113+
-moz-outline:0 none;
114+
user-select:none;
115+
}
116+
/* Focus styles */
117+
.fd-slider-handle:focus
118+
{
119+
outline:0 none;
120+
border:0 none;
121+
-moz-user-focus:normal;
122+
}
123+
button.fd-slider-handle:focus::-moz-focus-inner
124+
{
125+
border-color: transparent;
126+
}
127+
128+
body.fd-slider-drag-vertical,
129+
body.fd-slider-drag-vertical *
130+
{
131+
/* Stop text selection */
132+
-moz-user-select:none;
133+
-webkit-user-select:none;
134+
user-select:none;
135+
}
136+
body.fd-slider-drag-horizontal,
137+
body.fd-slider-drag-horizontal *
138+
{
139+
/* Stop text selection */
140+
-moz-user-select:none;
141+
-webkit-user-select:none;
142+
user-select:none;
143+
}

0 commit comments

Comments
 (0)