This repository has been archived by the owner on Jul 21, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (110 loc) · 4.52 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
<!DOCTYPE html>
<html>
<head>
<title>Flickr Chromecast</title>
<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="sender.css" />
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<script type="text/javascript" src="js/ChromecastSender.js"></script>
<script type="text/javascript" src="js/SenderFlickrApplication.js"></script>
<script type="text/javascript" src="flickrapi/browser/flickrapi.dev.js"></script>
</head>
<body>
<div id="flickr-container"></div>
<script type="text/javascript">
/**
* API Key for the Flickr API
*/
var flickr_apikey = '24ce45e1a83edb73b6656c50bd891985';
/**
* User ID to use with the Flickr API
*/
var flickr_userId = '134067096@N08';
// Initiate the API wrapper
var flickr = new Flickr({
api_key: flickr_apikey
});
// Initiate the wrapper that will generate the HTML for the UI
var flickrMagic = new SenderFlickrApplication(flickr_userId);
flickrMagic.getPhotosets();
// Start the cast session. This will active the SDK and allow the user to select their cast device.
var cast = new Chromesender("FAC0F8E6", castDeviceReadyCallback);
/**
* Callback to call when the cast SDK has acquired a session.
* This sends the Flickr creditentials (user id and api key) to the receiver application for use when making
* requests.
* @param {chrome.cast.Session} session - A chromecast session object.
*/
function castDeviceReadyCallback(session) {
var message = new Message('setup', {
uid: flickr_userId,
apikey: flickr_apikey
});
cast.sendMessage(message);
watchPhotoset();
}
/**
* Called when all photosets required have been pulled from the Flickr API and elements have been built and
* injected into the DOM.
* This method binds up event listeners.
*/
function watchPhotoset() {
var albums = document.querySelectorAll('article.album');
addEventListenerToElements(albums, 'click', clickedAlbumHandler);
}
/**
* Called when an album is clicked.
* Gets the ID of the album from the attributes on the clicked album and then builds a message to tell the
* receiver what to display.
* Calls the Flickr API wrapper to tell it to build the thumbnails view.
* @param {Event} e - The JS event fired.
*/
function clickedAlbumHandler(e) {
var article = e.target;
while(article.tagName !== 'ARTICLE') {
article = article.parentElement
}
var flickr_id = article.attributes['data-flickr-id'].value;
var message = new Message('showalbum', flickr_id);
cast.sendMessage(message);
flickrMagic.getAlbumThumbs(flickr_id, watchImageThumbnails);
}
/**
* Called when all image thumbnails required have been pulled from the Flickr API and elements have been built and
* injected into the DOM.
* This method binds up event listeners and injects the close button to return to album view.
*/
function watchImageThumbnails() {
var imagethumbs = document.querySelectorAll('img.thumb');
addEventListenerToElements(imagethumbs, 'click', clickedThumbnailHandler);
var closeBtn = document.createElement('button');
closeBtn.innerHTML = "Close";
closeBtn.classList.add('close');
document.getElementById('flickr-container').appendChild(closeBtn);
closeBtn.addEventListener('click', clickedCloseButtonHandler);
}
/**
* Called when an image thumbnail is clicked.
* Gets the ID of the image from the attributes on the clicked image and then builds a message to tell the
* receiver what to display.
* @param {Event} e - The JS event fired.
*/
function clickedThumbnailHandler(e) {
var img = e.target;
while(img.tagName !== 'IMG') {
img = img.parentElement
}
var flickr_id = img.attributes['data-flickr-id'].value;
var message = new Message('showimage', flickr_id);
cast.sendMessage(message);
}
/**
* Handles a click event on the close button.
* Gets the album images and passes the `watchPhotoset` function as a callback.
*/
function clickedCloseButtonHandler() {
flickrMagic.getPhotosets(watchPhotoset);
}
</script>
</body>
</html>