0byt3m1n1
Path:
/
data
/
applications
/
aps
/
gallery
/
3.0.2-6
/
standard
/
htdocs
/
themes
/
greydragon
/
js
/
[
Home
]
File: demo.js
// 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); }