forked from agorf/thyme
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (72 loc) · 3.68 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
<!DOCTYPE html>
<html>
<head>
<title>thyme</title>
<link href="bower_components/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="/thyme.css">
</head>
<body>
<div id="pane">
<!-- ko if: photo -->
<div id="photo" data-bind="template: { name: 'photo-template', data: photo }"></div>
<!-- /ko -->
<!-- ko ifnot: photo -->
<ol id="thumbs">
<!-- ko if: photos().length > 0 -->
<!-- ko template: { name: 'photos-template', foreach: photos } -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: photos().length === 0 -->
<!-- ko template: { name: 'sets-template', foreach: sets } -->
<!-- /ko -->
<!-- /ko -->
</ol>
<!-- /ko -->
</div>
<script type="text/html" id="sets-template">
<li>
<a href="#" data-bind="attr: { title: data.name }, css: 'set thumb', click: $root.set">
<img data-bind="attr: { src: data.thumbUrl, alt: data.name }">
<h2 data-bind="text: shortName()"></h2>
<p data-bind="attr: { title: photosCountTitle() }">
<i class="fa fa-picture-o"></i>
<!-- ko text: data.photosCount --><!-- /ko -->
</p>
</a>
</li>
</script>
<script type="text/html" id="photos-template">
<li>
<a href="#" data-bind="attr: { title: fileName() }, css: 'photo thumb', click: $root.photo">
<img data-bind="attr: { src: data.smallThumbUrl, alt: fileName() }">
<h2 data-bind="text: shortName()"></h2>
</a>
</li>
</script>
<script type="text/html" id="photo-template">
<img data-bind="attr: { src: data.bigThumbUrl, alt: fileName() }, css: 'big-thumb'">
<table id="photo-details" data-bind="with: data">
<tr><th>File name</th><td data-bind="text: $parent.fileName()"></td></tr>
<tr><th>File size</th><td data-bind="text: $parent.formattedSize()"></td></tr>
<tr><th>Dimensions</th><td data-bind="html: width + '×' + height"></td></tr>
<tr><th>Aspect ratio</th><td data-bind="text: $parent.aspectRatio()"></td></tr>
<!-- ko if: takenAt --><tr><th>Taken</th><td data-bind="text: $parent.relativeTakenAt(), attr: { title: $parent.formattedTakenAt() }"></td></tr><!-- /ko -->
<!-- ko if: exif.Make && exif.Model --><tr><th>Camera</th><td data-bind="text: exif.Make + ' ' + exif.Model"></td></tr><!-- /ko -->
<!-- ko if: exif.Artist --><tr><th>Artist</th><td data-bind="text: exif.Artist"></td></tr><!-- /ko -->
<!-- ko if: exif.ExposureTime --><tr><th>Shutter speed</th><td data-bind="text: exif.ExposureTime + ' s'"></td></tr><!-- /ko -->
<!-- ko if: exif.FNumber --><tr><th>Aperture size</th><td data-bind="text: 'f/' + exif.FNumber"></td></tr><!-- /ko -->
<!-- ko if: exif.ISO --><tr><th>ISO</th><td data-bind="text: exif.ISO"></td></tr><!-- /ko -->
<!-- ko if: exif.ExposureCompensation --><tr><th>Exp. compensation</th><td data-bind="text: exif.ExposureCompensation"></td></tr><!-- /ko -->
<!-- ko if: exif.LightSource --><tr><th>Light source</th><td data-bind="text: exif.LightSource"></td></tr><!-- /ko -->
<!-- ko if: exif.FocusMode --><tr><th>Focus mode</th><td data-bind="text: exif.FocusMode"></td></tr><!-- /ko -->
<!-- ko if: exif.ShootingMode --><tr><th>Shooting mode</th><td data-bind="text: exif.ShootingMode"></td></tr><!-- /ko -->
</table>
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/knockoutjs/dist/knockout.js"></script>
<script src="bower_components/sammy/lib/sammy.js"></script>
<script src="app.js"></script>
</body>
</html>