-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (119 loc) · 3.86 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular Rectangles Exercise by Luke Nickerson</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<link href='assets/css/rectangles.css' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Angular Rectangles Exercise</h1>
</header>
<main ng-app="rectanglesExercise">
<section id="display" ng-controller="DisplayController">
<div class="label origin">(0,0)</div>
<div class="label xAxis">x</div>
<div class="label yAxis">y</div>
<div
ng-repeat="rect in rectangles track by $index"
class="rectangle rectangle{{$index + 1}}"
ng-style="getRectangleDisplayStyle(rect)"
>
<span class="name">{{rect.name}}</span>
</div>
<div class="vertices">
<div ng-repeat="vertexName in allVertexNames track by $index"
ng-style="getVertexDisplayStyle($index)"
>
<div class="vertexName"
ng-style="getVertexNameDisplayStyle($index)">
{{vertexName}}
</div>
</div>
</div>
</section>
<section id="operations" ng-controller="OperationsController">
<ul class="operationsList">
<li>
Intersection:
<span class="op{{isIntersecting() ? 'Yes' : 'No'}}">
{{isIntersecting() ? 'Yes' : 'No'}}
</span>
</li>
<li>Containment:
<span class="op{{isContained() ? 'Yes' : 'No'}}">
{{isContained() ? 'Yes' : 'No'}}
</span>
</li>
<li>
Adjacency:
<span class="op{{isAdjacent() ? 'Yes' : 'No'}}">
{{isAdjacent() ? 'Yes' : 'No'}}
</span>
</li>
</ul>
</section>
<section id="examples" ng-controller="ExamplesController">
<h1>Tests</h1>
<button type="button"
ng-click="randomize()">Randomize</button>
<button type="button"
ng-click="intersect()">Intersect</button>
<button type="button"
ng-click="contain()">Contain</button>
<button type="button"
ng-click="adjacent()">Move Adjacent</button>
</section>
<section id="rectangleInterface" ng-controller="RectangleInterfaceController">
<div class="rectangle{{$index + 1}}"
ng-repeat="rect in rectangles track by $index">
<h1>Rectangle {{$index + 1}}</h1>
<ul class="vertices">
<li ng-repeat="vertex in vertexIndexArray track by $index">
<span class="vertexName">{{rect.vertexNames[$index]}}</span>
<label for="rect{{$parent.$index}}_x{{$index}}">x</label>
<input type="number"
ng-model="rect.vertex[$index].x"
ng-model-options="{ getterSetter: true }"
id="rect{{$parent.$index}}_x{{$index}}"
min="0" max="{{displaySize.x}}"
/>
<label for="rect{{$parent.$index}}_y{{$index}}">y</label>
<input type="number"
ng-model="rect.vertex[$index].y"
ng-model-options="{ getterSetter: true }"
id="rect{{$parent.$index}}_y{{$index}}"
min="0" max="{{displaySize.y}}"
/>
</li>
</ul>
<ul class="measurements">
<li>Area = {{rect.getArea() | number}}</li>
<li>Perimeter = {{rect.getPerimeter() | number}}<li>
<li>Diagonal = {{rect.getDiagonal() | number:1}}</li>
</div>
</div>
</section>
</main>
<footer>
<p>
An HTML5/Angular/JavaScript/UI exercise by
<a href="http://lukenickerson.com">Luke Nickerson</a>
</p>
<p>
<a href="https://github.com/Lukenickerson/angular-rectangles-exercise/">Available on GitHub</a>
| © 2015
</p>
</footer>
<div id="scripts">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app/libs/coords.js"></script>
<script src="app/libs/rectangle.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers.js"></script>
</div>
</body>
</html>