-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
245 lines (194 loc) · 13.4 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
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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!-- Joshua Rudaitis -->
<!DOCTYPE html>
<html>
<head>
<title>NASA Media Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Used to properly scale on mobile -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css"> <!-- My CSS sheet -->
<link rel="stylesheet" href="assets/nasawds-2.0.7/css/nasawds.min.css"> <!-- NASA Web Design System -->
</head>
<body ng-app="directoryApp" ng-controller="ListingsController"> <!-- Uses listingController.js -->
<header class="usa-header usa-header-basic topBar noGreyBar" role="banner"> <!-- Title BAR -->
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo" id="basic-logo"> <!-- 'Home' Button -->
<em class="usa-logo-text">
<a href="https://nasa-images-search.herokuapp.com/"
title="Home"
aria-label="Home">
NASA Media Library
</a>
</em>
</div>
<button class="usa-menu-btn">Search</button>
</div>
<nav role="navigation" class="usa-nav" style="background-color: #323a45"> <!-- Navigation Menu -->
<button class="usa-nav-close"> <!-- Close Button -->
<span style="color: red;" class="glyphicon glyphicon-remove"></span>
</button>
<ul class="usa-nav-primary usa-accordion"><li>
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-one"> <!-- Filter by Date -->
<span><p class="title">Date</p></span>
</button>
<ul id="basic-nav-section-one" class="usa-nav-submenu" style="padding: 15px"><li>
<form>
<p class="title">Start Year:</p>
<input type="number" min="1920" max="2099" step="1" value="2019" ng-model="startDate"/>
<p class="title">End Year:</p>
<input type="number" min="1920" max="2099" step="1" value="2019" ng-model="endDate"/>
</form>
</ul></li><li>
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-two"> <!-- Filter by Media Type -->
<span><p class="title">Media</p></span>
</button>
<ul id="basic-nav-section-two" class="usa-nav-submenu" style="padding: 15px"><li>
<fieldset class="usa-fieldset-inputs usa-sans">
<legend class="usa-sr-only">Media Type</legend>
<ul class="usa-unstyled-list">
<li>
<input id="images" type="checkbox" name="mediaType" value="image" checked ng-model="isImage">
<label for="images"><p class="title">Images</p></label>
</li>
<li>
<input id="videos" type="checkbox" name="mediaType" value="video" checked ng-model="isVideo">
<label for="videos"><p class="title">Video</p></label>
</li>
<li>
<input id="audio" type="checkbox" name="mediaType" value="audio" checked ng-model="isAudio">
<label for="audio"><p class="title">Audio</p></label>
</li>
</ul>
</fieldset>
</ul></li><li>
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-three"> <!-- Filter by Location -->
<span><p class="title">Location</p></span>
</button>
<ul id="basic-nav-section-three" class="usa-nav-submenu" style="padding: 15px;"><li>
<form>
<label for="input-type-text"><p class="filter">Location</p></label>
<input id="input-type-text" name="input-type-text" type="text" ng-model="location">
</form>
</ul></li><li></li></ul>
<a data-toggle="modal" data-target="#historyPopup" style="cursor: pointer; text-decoration: none;"> History </a> <!-- Search History Button! -->
<form class="usa-search usa-search-small" style="padding-top: 15px"> <!-- Search Button -->
<div role="search">
<form class="usa-search usa-search-small row">
<input id="search-field-big" type="search" name="search" ng-model="query" placeholder="Search">
<button type="submit" ng-click="search()" class="search">
<span class="usa-search-submit-text"></span>
</button>
</form>
</div>
</form>
</nav>
</div>
</header>
<div class="usa-overlay"></div>
<main id="main-content"></main>
<br>
<!-- Modal for Search History (the popup with what you looked up) -->
<div class="modal fade in" id="historyPopup" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<p id="historyModalLabel" class="modal-title popup">Search History</p>
</div>
<div class="modal-body" ng-repeat="search in history"> <!-- Iterates through saved history -->
<p class="popup"><b>Search {{$index + 1}}: </b>{{search}}</p>
</div>
<div class="modal-footer">
<span> <!-- Clear Search History -->
<button type="button" style="background-color: #dd361c" class="btn btn-primary" ng-click="clearHistory()">Clear History</button>
</span>
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button> <!-- Dismiss Popup -->
</div>
</div>
</div>
</div>
<div class="usa-grid"> <!-- Page Navigation Buttons -->
<div class="usa-width-one-whole">
<div class="usa-width-one-third buttonRightLayout">
<button style="margin-right: 0px;" class="usa-button-secondary-inverse" ng-click="getPrev()">Prev</button>
</div>
<div class="usa-width-one-third resultCenterLayout"> <p class="filter"> Results {{(curPage*100) + 1}} - {{curEndRange}} of {{hits}} </p> </div>
<div class="usa-width-one-third buttonLeftLayout">
<button class="usa-button-secondary-inverse" ng-click="getNext()">Next</button>
</div>
</div>
</div>
<div class="usa-grid"> <!-- The Main 'Beef' of the program, displays list of cards with image and title -->
<div class="grid-container">
<div class="grid">
<div class="grid-sizer"></div>
<div ng-repeat="listing in listings"> <!-- Iterates though NASA search results -->
<div class="card grid-item" data-toggle="modal" data-target="#dataPopup{{$index}}"> <!-- Triggers the Modal Popup for a given card (see below) -->
<img class="imgCard" src="{{listing.links[0].href}}" style="width:100%"> <!-- A given card contains an image, title and ID -->
<div class="card-container">
<p class="ovf"><b>{{listing.data[0].title}}</b></p>
<p class="ovf">{{listing.data[0].nasa_id}}</p>
</div>
</div>
<!-- The Modal with all the goodies! This one contains all the metadata for a given card if it's corresponding card is clicked (see above) -->
<div class="modal fade in" id="dataPopup{{$index}}" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<p id="dataModalLabel" class="modal-title popup">{{listing.data[0].title}}</p>
</div>
<!-- This is where all the metadata is accessed and displayed. From Date to Location to ID to Photographer, it's here! -->
<div class="modal-body">
<img src="{{listing.links[0].href}}" class="imgCurve">
<p class="popup"><b>Date: </b>{{listing.data[0].date_created}}</p>
<p class="popup"><b>Center: </b>{{listing.data[0].center}}</p>
<p class="popup"><b>Photographer: </b>{{listing.data[0].photographer}}</p>
<p class="popup"><b>Location: </b>{{listing.data[0].location}}</p>
<p class="popup"><b>Media Type: </b>{{listing.data[0].media_type}}</p>
<p class="popup"><b>NASA ID: </b>{{listing.data[0].nasa_id}}</p>
<p class="popup"><b>Photographer: </b>{{listing.data[0].photographer}}</p>
<p class="popup"><b>Description: </b>{{listing.data[0].description}}</p>
<p class="popup"><b>Keywords: </b></p>
<div ng-repeat="keyword in listing.data[0].keywords"> <!-- A small little aside, here we iterate through the kewords (like hashtags) -->
<span class="usa-label ">{{keyword}}</span>
</div>
</div>
<!-- Two footers -->
<!-- First Footer has the share buttons, each with their own requirements/URL-type -->
<div class="modal-footer" align="right">
<span> <!-- Facebook, share a link -->
<button type="button" class="btn btn-primary" ng-click="share('fb',listing.links[0].href,'','')" style="background-color: #3C5A99;">Share on Facebook</button>
</span>
<span> <!-- Twitter, the interesting thing with this one is that we can convert the keywords into hashtags (see controller) -->
<button type="button" class="btn btn-primary" ng-click="share('tw',listing.links[0].href,listing.data[0].title,listing.data[0].keywords)" style="background-color: #38A1F3;">Tweet this</button>
</span>
<span> <!-- Email, send the title and the link -->
<button type="button" class="btn btn-primary" ng-click="share('em',listing.links[0].href,listing.data[0].title,listing.data[0].keywords)" style="background-color: #4aa564;">Send as Email</button>
</span>
</div>
<!-- Second Footer lets you view the RAW data (jpg, mp4, etc), or dismiss the popup -->
<div class="modal-footer">
<span> <!-- RAW -->
<button type="button" class="btn btn-primary" ng-click="getFile(listing.data[0].media_type,listing.href)" style="background-color: #046b99">View Raw</button>
</span>
<!-- Dismiss -->
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="app.js"></script>
<script src="listingController.js"></script>
<script src="listingFactory.js"></script>
<script src="assets/nasawds-2.0.7/js/nasawds.min.js"></script> <!-- NASA Web Design System -->
</body>
</html>