forked from EmoryDHLab/peabody-bem
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Peabody_build.html
201 lines (169 loc) · 10.5 KB
/
Peabody_build.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!-- the HTML file for the build mode: customizations and user input -->
<!DOCTYPE html>
<html>
<!-- <html class = "content">
--><!--from tinymce, changes style of whole page-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900,700,200' rel='stylesheet' type='text/css'>
<!--adding TinyMCE-->
<link rel='stylesheet prefetch' href='http://fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css'>
<link rel='stylesheet prefetch' href='http://www.tinymce.com/css/common.min.css'>
<link rel='stylesheet prefetch' href='http://www.tinymce.com/css/docs.min.css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css"> <!--style.css contains timeline style-->
<link rel="stylesheet" href="css/style_navbar.css">
<!-- <link rel="stylesheet" href="css/svg-style.css">
-->
<script src = "js/jquery-1.11.3.min.js"></script>
<script src = "js/d3.min.js"></script>
<script src="js/script_build.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src = "js/respond.min.js"></script>
<title>Peabody</title>
</head>
<body>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <!-- <img src="img/logo-12.png" width="2%"> </img> -->Peabody</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="Peabody_view.html">View <!-- <span class="sr-only">(current)</span> --></a></li>
<li class="active"><a href="Peabody_build.html">Build</a></li>
<li><a href="Peabody_compare.html">Compare</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--using bootstrap to organize elements on page, so container/row/col-md-12 etc come from Bootstrap files-->
<div class = "container">
<div class="col-md-4"> <!--column for colorPalette and event list-->
<div id="colorPalette">
<h2>Color Palette</h2>
<div class="panel-group-cp" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingColorPal">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseColorPal" aria-expanded="true" aria-controls="collapseOne">
Customize Color Palette
</a>
</h4>
</div>
<div id="collapseColorPal" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingColorPal">
<div class="panel-body">
<form id="editForm">
<p>Instructions: Add up to 10 countries.</p>
Name of country to add:</br>
<input type="text" id="newCountry" value="">
<button type = "button" id="addCountryButton" >+</button> <!--need to add type="button" to work inside form -->
<br>
Name of country to remove:</br>
<input type="text" id="removeCountry" value="">
<button type = "button" id="removeCountryButton" >-</button><br><br>
<button type = "button" id="removeAllCountriesButton" >Remove all countries</button><br><br>
Select color scheme:
<fieldset id="cpRadio" name="argh">
<p><label for="g1"><input type="radio" name="cpOptions" id="g1" value="1" checked> 1</label></p>
<p><label for="g2"><input type="radio" name="cpOptions" id="g2" value="2"> 2</label></p>
<p><label for="g3"><input type="radio" name="cpOptions" id="g3" value="3"> 3</label></p>
<p><label for="g4"><input type="radio" name="cpOptions" id="g4" value="4"> 4</label></p>
<!--<p><label for="g5"><input type="radio" name="cpOptions" id="g5" value="5"> 5</label></p>
<p><label for="g6"><input type="radio" name="cpOptions" id="g6" value="6"> 6</label></p>
<p><label for="g7"><input type="radio" name="cpOptions" id="g7" value="7"> 7</label></p>-->
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div> <!--close color palette row-->
<div id="eventList" >
<h2>Events</h2>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Sample Event List: Chronological List of the 16th Century
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ol id="sampleList">
<li><button id="showallb">Show me all</button></li>
<li>1501. Henry VII. grants patent for colonizing America. <em>To represent this event, the 6th subdivision of the square on the upper left hand is painted purple, which is the color for England.</em><button class="showme" id="England_type5year0">Show Me</button></li>
<li>1512. Ponce de Leon discovers Florida. <em>Eighth subdivision of the twelfth square is brick red for Spain.</em><button class="showme" id="Spain_type7year11">Show Me</button></li>
<li>1517. Sebastian Cabot's last voyage in the English service. <em>Eighth subdivision, purple.</em><button id="England_type7year16">Show Me</button></li>
<li>1520. Vasquez de Ayllon’s Piracy on Chicora. <em>Eighth, brick red.</em><button class="showme" id="Spain_type7year19">Show Me</button> </li>
<li>1523. Verrazzani explores American coasts for France. <em>Eighth subdivision, blue, for France.</em><button class="showme" id="France_type7year22">Show Me</button></li>
<li>1525. Stephen Gomez tries to discover North West Passage to India for Spain. <em>Eighth subdivision, brick red.</em><button class="showme" id="Spain_type7year24">Show Me</button></li>
<li>1526. Pamphilo de Narvaez attempts to conquer Florida. <em>Eighth, brick red.</em><button class="showme" id="Spain_type7year25">Show Me</button></li>
<li>1534. James Cartier discovers River St. Lawrence. <em>Eighth, blue. </em><button class="showme" id="France_type7year33">Show Me</button></li>
<li>1537. Ferdinand de Soto attempts to conquer Florida. <em>Eighth, brick red.</em><button class="showme" id="Spain_type7year36">Show Me</button></li>
<li>1540. Roberval and Cartier try in vain to colonize Canada. <em>Eighth, blue. </em><button class="showme" id="France_type7year39">Show Me</button></li>
<li>1542. Ferdinand de Soto dies on the Mississippi. <em>Ninth, brick red. </em><button class="showme" id="Spain_type8year41">Show Me</button></li>
<li>1562. Coligny sends a Huguenot Colony to America. <em>Eighth, blue.</em><button class="showme" id="France_type7year61">Show Me</button></li>
<li>1565. St. Augustine, founded by the Spanish Melendez, who conquers the French colony. <em>First and upper half of second, brick red, to represent the conquering Spaniards; also, fifth to represent the foundation of St. Augustine; and eighth, the deed of Melendez, a remarkable person. Blue in the lower half of the second, and in the third, to represent French loss. </em><button class="showme" id="special">Show Me</button></li>
<li>1576. Martin Frobisher renews English Explorations. <em>Eighth, purple.</em><button class="showme" id="England_type7year75">Show Me</button></li>
<li>1578. Sir Humphrey Gilbert’s Voyage and Death. <em>Eighth, purple.</em><button class="showme" id="England_type7year77">Show Me</button></li>
<li>1579. Sir Francis Drake discovers Oregon, and names it New Albion. <em>Eighth, purple.</em><button class="showme" id="England_type7year78">Show Me</button></li>
<li>1584. Sir Walter Raleigh gets patent to colonize. <em>Eighth, purple.</em><button class="showme" id="England_type7year83">Show Me</button></li>
<li>1585. Sir W. R.’s unsuccessful colony at Roanoke, carried out by Sir Richard Grenville. <em>Eighth, purple.</em><button class="showme" id="England_type7year84">Show Me</button></li>
</ol>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title editable">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Make your own
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFour">
<form>
Enter start year: <input type="text" id="startYrInput">
<input type="button" value="Submit" id="submitYrBtn">
</form>
</div>
</div>
</div>
</div><!--close col-md-4-->
<!--container-->
</div> <!--close event list row-->
<div class="col-md-8"> <!--column to hold chart and timeline-->
<div id="gridContainer" class="row">
<h2 id="chartTitle" class="editable">Chart: Chronological List of the 16th Century</h2>
<!--row for chart-->
</div>
<div class="row"><!--row with timeline-->
<div id="timelineContainer">
<h2>Timeline</h2>
<button type="button" id="timelineGen">Generate Timeline</button>
<div id="timelineViz"></div>
<button type="button" id="clearBtn">Clear All</button>
</div>
</div><!--close row-->
</div> <!--close column holding chart and timeline-->
<!--close container-->
</div>
</svg>
<!--adding TinyMCE-->
<script src='http://cdn.tinymce.com/4/tinymce.min.js'></script>
<script src="TinyMCEtest.js"></script>
</body>
</html>