-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (71 loc) · 3.58 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
<!doctype html>
<html lang="en">
<head>
<title>Australian Wildlife Sightings</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="map">
</div>
<!-- class is toggled bysed on observable-->
<button id="searchmenuVisibleBtn" data-bind="click: landscapetoggle, css:{activeElement: searchmenuVisible, inactiveElement: !searchmenuVisible()}"><span>Show/Hide Menu </span></button>
<div id="searchmenu" data-bind="visible: searchmenuVisible">
<div id="listviewdiv">
<button id="openlistBtn" data-bind="click: showList, css:{activeElement: showFilterList, inactiveElement: !showFilterList()}"><span>Browse Animals</span></button>
<div id="filterdiv" data-bind="visible:showFilterList">
<input id="filter" data-bind="textInput: filteredAnimal" type="text" placeholder="Search Animal">
<ul id="listview" data-bind="foreach: filteredItems">
<li >
<a data-bind="text: anName, click: $parent.setSelectedAnimal, css:{activeElement: $data === $parent.getSelectedElement(), inactiveElement: $data!==$parent.getSelectedElement()}"></a>
</li>
</ul>
</div>
</div>
<div id="infoWindow" data-bind="stopBinding:true">
<div id="tabs">
<div class="placeholderText" data-bind="visible: placeholder" >
<p> This app shows some of my wildlife sightings. Upon clicking on a marker or on an animal in the list to the left, information from Wikipedia and related images on Flickr are retrieved and shown in this info panel. You can search through the animals using the search filter. MVC is incorporated using knockoutJS. This is an ongoing project, future goals consist in adding a database and the option to add more animals to the map.</p>
</div>
<ul>
<li><a href="#tab-1"><span>Pic and Info</span></a></li>
<li><a href="#tab-2"><span>Flickr Images</span></a></li>
</ul>
<div id="tab-1" class="tab" data-bind="with: selectedAnimal" >
<div id="infContainer">
<div id="nameDate">
<h3 data-bind="text: anName"></h3>
<p> Seen on: <span data-bind="text: dateSeen"></span></p>
<p data-bind="text: title"></p>
</div>
<div id="wikiCont" >
<a data-bind="attr: { href: $parent.wikiLink}, text:$parent.wikiLink"></a>
<p data-bind="text: $parent.wikiParagraph"></p>
</div>
<img id="infoImage" src="#" data-bind="attr: {src: imgSrc}" alt="Animal image">
</div>
</div>
<div id="tab-2" class="tab">
<h3> Related images on Flickr</h3>
<span data-bind="text: flickrMessage"></span>
<div id ="flickrContainer" data-bind="foreach: flickrImages">
<a data-bind="attr: {href: o_url}" target="_blank">
<img class="flickrImage" src="#" data-bind="attr: {src: t_url}" alt="Flickr Thumbnail" >
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/knockout/dist/knockout.js"></script>
<script src="js/app.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBvSyOJDU2J8YelkMVS4LGsuI0KVNGqu-I&callback=initialize" async></script>
</body>
</html>