251 lines
9.3 KiB
JavaScript
251 lines
9.3 KiB
JavaScript
![]() |
// some configuration "constants"
|
||
|
var DEFAULT_FLICKR_RESULTS_PER_PAGE = 24;
|
||
|
var DEFAULT_SEARCH_TERM = "sunset";
|
||
|
var DEBUG = false;
|
||
|
|
||
|
function Debug(s) {
|
||
|
if (DEBUG) {
|
||
|
try {
|
||
|
console.log("DEBUG: " + s);
|
||
|
} catch (e) {
|
||
|
// console does not exist...do nothing
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function encodeHTML(s) {
|
||
|
return s.replace("&", "&").replace("<", "<").replace(">", ">");
|
||
|
}
|
||
|
|
||
|
var nJSONRequests = 0;
|
||
|
|
||
|
function SendJSONRequest(url) {
|
||
|
var head = document.getElementsByTagName("head").item(0);
|
||
|
var script = document.createElement("script");
|
||
|
script.setAttribute("type", "text/javascript");
|
||
|
script.setAttribute("src", url);
|
||
|
script.setAttribute("id", "dynamicScript" + ++nJSONRequests);
|
||
|
head.appendChild(script);
|
||
|
}
|
||
|
|
||
|
var currentSearchTermEncoded = "";
|
||
|
|
||
|
// api documented at http://www.flickr.com/services/api/flickr.photos.search.html
|
||
|
function ExecuteFlickrSearch(term) {
|
||
|
currentSearchTermEncoded = encodeHTML(term);
|
||
|
document.getElementById("gallery").innerHTML = "<p class='loading'>Searching for photos of “" + currentSearchTermEncoded + "”...</p>";
|
||
|
document.getElementById("displayingN").innerHTML = "";
|
||
|
|
||
|
var requestUrl = "http://api.flickr.com/services/rest/?" +
|
||
|
[
|
||
|
"jsoncallback=" + "HandleFlickrSearchResult",
|
||
|
"method=" + "flickr.photos.search",
|
||
|
"api_key=" + "afaf235416e5cb2fb406b7cae3caa43c",
|
||
|
"text=" + term,
|
||
|
"sort=" + "relevance", // "interestingness-desc", //
|
||
|
"safe_search=" + "1",
|
||
|
"content_type=" + "1",
|
||
|
"license=" + "4,6,7",
|
||
|
"per_page=" + DEFAULT_FLICKR_RESULTS_PER_PAGE,
|
||
|
"page=" + 1,
|
||
|
"extras=" + "owner_name,tags,url_sq,url_t,url_s,url_m,url_o",
|
||
|
"format=" + "json"
|
||
|
].join("&");
|
||
|
|
||
|
Debug("sending request: " + requestUrl);
|
||
|
SendJSONRequest(requestUrl);
|
||
|
}
|
||
|
|
||
|
function formatTemplate() {
|
||
|
var template =
|
||
|
'<div id="pw{3}" class="photoWrapper" onmouseover="overPhoto(this,event)" onmouseout="outPhoto(this,event)" ' +
|
||
|
'onfocus="overPhoto(this,event)" onblur="outPhoto(this,event)" onclick="clickPhoto(this,event)" ' +
|
||
|
'onkeydown="keyDownPhoto(this,event)" ' +
|
||
|
'flickrPageUrl="http://www.flickr.com/photos/{5}/{3}" title="Ctrl-click to view photo on Flickr.com" tabindex="{6}" >' +
|
||
|
'<div class="innerWrapper">' +
|
||
|
'<img alt="{2}" src="{0}" onload="animateOpacity(document.getElementById(\'pw{3}\'), 1, 1000)" />' +
|
||
|
'<span class="creditWrapper">' +
|
||
|
'<span class="photoCredit">from {1}</span>' +
|
||
|
'</span>' +
|
||
|
'</div>' +
|
||
|
'<p class="photoCaption">{2}</p>' +
|
||
|
'<p class="photoTags">{4}</p>' +
|
||
|
'</div>';
|
||
|
|
||
|
for (var i = 0; i < arguments.length; ++i) {
|
||
|
template = template.replace(new RegExp('\\{' + i + '\\}', 'gm'), encodeHTML(arguments[i].toString()));
|
||
|
}
|
||
|
|
||
|
return template;
|
||
|
}
|
||
|
|
||
|
function HandleFlickrSearchResult(data) {
|
||
|
if (data.stat != "ok") {
|
||
|
var msg = "Flickr returned error " + data.code + ": " + data.message + ".";
|
||
|
Debug(msg);
|
||
|
document.getElementById("gallery").innerHTML = "<p class=\"xhrerror\">" + encodeHTML(msg) + "</p>";
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var nPhotos = data.photos.photo.length;
|
||
|
Debug("Got an \"ok\" response with " + nPhotos.toString() + " photos");
|
||
|
|
||
|
if (nPhotos == 0) {
|
||
|
document.getElementById("gallery").innerHTML = "<p class=\"nophotos\">Flickr returned no photos for “" + currentSearchTermEncoded + "”.</p>";
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var gallery = "";
|
||
|
for (var i = 0; i < nPhotos; i++) {
|
||
|
var photo = data.photos.photo[i];
|
||
|
gallery += formatTemplate(photo.url_m, photo.ownername, photo.title, photo.id, photo.tags, photo.owner, 20 + i);
|
||
|
}
|
||
|
|
||
|
document.getElementById("gallery").innerHTML = gallery;
|
||
|
document.getElementById("displayingN").innerHTML = "Displaying " + nPhotos + " of " + data.photos.total.replace(/^(\d{1,3})(\d{3})/, "$1,$2") + " photos";
|
||
|
|
||
|
// restore messiness if enabled
|
||
|
if (document.getElementById("cbMessyLayout").checked)
|
||
|
messyLayout(true);
|
||
|
}
|
||
|
|
||
|
function colorGalleryBackgroundClicked() {
|
||
|
if (document.getElementById("cbColorGallery").checked) {
|
||
|
document.getElementById("gallery").style.backgroundImage = "";
|
||
|
}
|
||
|
else {
|
||
|
document.getElementById("gallery").style.backgroundImage = "none";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function rotateImagesTo(nDeg, duration) {
|
||
|
if (typeof duration == 'undefined')
|
||
|
duration = 100;
|
||
|
|
||
|
var photos = document.getElementsByClassName("photoWrapper");
|
||
|
for (var i = 0; i < photos.length; i++) {
|
||
|
animateTransformRotate(photos[i], nDeg, duration);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function rotateImagesBy(nDeg, duration) {
|
||
|
if (typeof duration == 'undefined')
|
||
|
duration = 100;
|
||
|
|
||
|
var photos = document.getElementsByClassName("photoWrapper");
|
||
|
for (var i = 0; i < photos.length; i++) {
|
||
|
animateTransformRotate(photos[i], getCurrentTransformRotate(photos[i]) + nDeg, duration);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function messyLayout(messy) {
|
||
|
var photos = document.getElementsByClassName("photoWrapper");
|
||
|
for (var i = 0; i < photos.length; i++) {
|
||
|
if (messy) {
|
||
|
photos[i].style.zIndex = 1 + Math.floor(Math.random() * photos.length);
|
||
|
animateTransformRotateAndScale(photos[i], -30 + Math.floor(Math.random() * 61), 1.2, 0);
|
||
|
}
|
||
|
else {
|
||
|
photos[i].style.zIndex = "auto";
|
||
|
animateTransformRotateAndScale(photos[i], 0, 1, 0);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
HTMLElement.prototype.isOrIsADescendantOf = function(ancestor) {
|
||
|
for (var n = this; n != null; n = n.parentNode)
|
||
|
if (n == ancestor)
|
||
|
return true;
|
||
|
|
||
|
return false;
|
||
|
};
|
||
|
|
||
|
function entering(eventObj, targetElement) {
|
||
|
var fromElement = eventObj.relatedTarget;
|
||
|
return fromElement == null || !(fromElement instanceof HTMLElement) || !fromElement.isOrIsADescendantOf(targetElement);
|
||
|
}
|
||
|
|
||
|
function leaving(eventObj, targetElement) {
|
||
|
var toElement = eventObj.relatedTarget;
|
||
|
return toElement == null || !(toElement instanceof HTMLElement) || !toElement.isOrIsADescendantOf(targetElement);
|
||
|
}
|
||
|
|
||
|
var zoomFactors = [ 3, 2.5, 2 ];
|
||
|
|
||
|
function overPhoto(wrapperElement, eventObj) {
|
||
|
if (entering(eventObj, wrapperElement)) {
|
||
|
wrapperElement.setAttribute("oldzIndex", getCurrentStringValue(wrapperElement, "zIndex"));
|
||
|
wrapperElement.setAttribute("oldrotate", getCurrentTransformRotate(wrapperElement).toString());
|
||
|
wrapperElement.setAttribute("oldscale", getCurrentTransformScale(wrapperElement).toString());
|
||
|
wrapperElement.style.zIndex = 25;
|
||
|
var zoomFactor = zoomFactors[document.getElementById("thumbnails").selectedIndex];
|
||
|
|
||
|
animateTransformRotateAndScale(wrapperElement, -6, zoomFactor, 200);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function clickPhoto(wrapperElement, eventObj) {
|
||
|
var url = wrapperElement.getAttribute("flickrPageUrl");
|
||
|
if (url && eventObj.ctrlKey) {
|
||
|
location.href = url;
|
||
|
}
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
function keyDownPhoto(wrapperElement, eventObj) {
|
||
|
var url = wrapperElement.getAttribute("flickrPageUrl");
|
||
|
if (url && eventObj.keyCode == KEY_ENTER && eventObj.ctrlKey) {
|
||
|
location.href = url;
|
||
|
}
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
function outPhoto(wrapperElement, eventObj) {
|
||
|
if (leaving(eventObj, wrapperElement)) {
|
||
|
if (document.getElementById("cbMessyLayout").checked) {
|
||
|
wrapperElement.style.zIndex = wrapperElement.getAttribute("oldzIndex");
|
||
|
animateTransformRotateAndScale(wrapperElement,
|
||
|
parseFloat(wrapperElement.getAttribute("oldrotate")),
|
||
|
parseFloat(wrapperElement.getAttribute("oldscale")), 200);
|
||
|
}
|
||
|
else {
|
||
|
wrapperElement.style.zIndex = "auto";
|
||
|
animateTransformRotateAndScale(wrapperElement, 0, 1, 200);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function doSearch() {
|
||
|
var searchText = document.getElementById("searchText").value;
|
||
|
if (searchText != "") {
|
||
|
ExecuteFlickrSearch(searchText);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function makeThumbnails(size) {
|
||
|
var gal = document.getElementById('gallery');
|
||
|
gal.className = gal.className.replace(/\b(small|medium|large)\b/, size);
|
||
|
}
|
||
|
|
||
|
function showTags(show) {
|
||
|
var gal = document.getElementById('gallery');
|
||
|
gal.className = gal.className.replace(/\s*showtags\b/, '') + ((show == "true") ? ' showtags' : '');
|
||
|
}
|
||
|
|
||
|
function init() {
|
||
|
|
||
|
// this depends on initialization that has already been done in animation.js
|
||
|
// we just set the class on a div to the script element property name for CSS3 2D Transforms
|
||
|
document.getElementById("TransformNote").className = window.transformName;
|
||
|
|
||
|
// kill text selection in IE
|
||
|
document.getElementById("gallery").onselectstart = function() {return false;};
|
||
|
|
||
|
// re-init the background color or image
|
||
|
colorGalleryBackgroundClicked();
|
||
|
|
||
|
// start with a default search (or the old one if this is a refresh)
|
||
|
var searchTerm = document.getElementById("searchText").value;
|
||
|
ExecuteFlickrSearch(searchTerm != "" ? searchTerm : DEFAULT_SEARCH_TERM);
|
||
|
}
|