X-Git-Url: https://git.nubati.net/cgi-bin/gitweb.cgi?p=phpfspot.git;a=blobdiff_plain;f=phpfspot.js;h=ae202a0c004f69d0e7eb792c19f62711d787b571;hp=c4b39b55a5cac2ff95228b927856dd6f3cd589b1;hb=6a5756a7ced1e064e6d7c3cb8b67723e01951612;hpb=6bab49d7bcc40cf1ca56b2ef93484a8a64f19f6c diff --git a/phpfspot.js b/phpfspot.js index c4b39b5..ae202a0 100644 --- a/phpfspot.js +++ b/phpfspot.js @@ -1,13 +1,48 @@ +/*************************************************************************** + * + * phpfspot, presents your F-Spot photo collection in Web browsers. + * + * Copyright (c) by Andreas Unterkircher + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA. + * + ***************************************************************************/ + +/** + * display image + * + * this function will be called by client and fetches + * the single-photo view via AJAX from the server. + * Furthermore it will scrollup the browser to the top + * position so the image become visibile immediatley. + */ function showImage(id, scrollup) { - content = document.getElementById("content"); + /* is phpfspot skeleton really displayed? */ + if(!document.getElementById('content')) + return; + + var content = document.getElementById('content'); /* blank the screen */ if(scrollup != undefined) { content.innerHTML = ""; } - HTML_AJAX.replace(content, encodeURI('rpc.php?action=showphoto&id=' + id)); + /* fetch single-photo view from server */ + HTML_AJAX.replace(content, encodeURI(web_path + '/rpc.php?action=showphoto&id=' + id)); /* scroll the window up to the top */ if(scrollup != undefined) { @@ -15,28 +50,72 @@ function showImage(id, scrollup) } /* delete some global vars */ - delete(origHeight); - delete(origWidth); - delete(photo_details_pos); -} - + delete(origHeight); origHeight = undefined; + delete(origWidth); origWidth = undefined; + delete(photo_details_pos); photo_details_pos = undefined; + +} // showImage() + +/** + * scroll browser to the last shown photo + * + * this function will be called when user returns from single-photo + * to the photo index. It will scroll down the window (if possible) + * to the position of the last shown photo. + */ function moveToThumb(thumb_id) { if(thumb_id == undefined) return; if(thumbimg = document.getElementById('thumbimg' + thumb_id)) { - window.scrollTo(0, thumbimg.offsetTop-100); + window.scrollTo(0, findPos(thumbimg,'top')-100); } } // moveToThumb() +/** + * return position of object + * + * this function returns the position of an object. + * depending on the parameter 'direction' it will either + * return the X or Y position. + */ +function findPos(obj, direction) { + var cur = 0; + if (obj.offsetParent) { + do { + if(direction == 'left') + cur += obj.offsetLeft; + if(direction == 'top') + cur += obj.offsetTop; + } while (obj = obj.offsetParent); + } + return [cur]; + +} // findPos() + +/** + * opens the credits page + */ function showCredits() { var credits = document.getElementById("content"); - credits.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=showcredits')); -} - + credits.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=showcredits')); + +} // showCredits() + +/** + * tag-selection handling + * + * this function is getting called by client to either + * - add + ∗ - delete + * - modify tag-match condition + * + * It will then fetch the result from the server via AJAX + * and updates the tag-selection. + */ function Tags(mode, id) { var objTemp = new Object(); @@ -57,37 +136,63 @@ function Tags(mode, id) objTemp['mode'] = id.value; } - var retr = HTML_AJAX.post('rpc.php', objTemp); + var retr = HTML_AJAX.post(web_path + '/rpc.php', objTemp); if(retr == "ok") { refreshAvailableTags(); refreshSelectedTags(); refreshPhotoIndex(); } else { - window.alert(retr); + window.alert("Server message: "+ retr); } } // Tags() +/** + * update available-tags tag-cloud + * + * this function queries an actual version of the tag-cloud + * for the available (not-selected) tags from the server via + * AJAX. + */ function refreshAvailableTags() { // update available tags var avail_tags = document.getElementById('available_tags'); - avail_tags.innerHTML = "Loading..."; - avail_tags.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=show_available_tags')); -} + if(avail_tags != undefined) { + avail_tags.innerHTML = "Loading..."; + avail_tags.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=show_available_tags')); + } +} // refreshAvailableTags() + +/** + * update selected-tags list + * + * this function queries an actual version of the tag-list + * for the selected tags from the server via AJAX. + */ function refreshSelectedTags() { // update selected tags var selected_tags = document.getElementById("selected_tags"); - selected_tags.innerHTML = "Loading..."; - selected_tags.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=show_selected_tags')); -} + if(selected_tags != undefined) { + selected_tags.innerHTML = "Loading..."; + selected_tags.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=show_selected_tags')); + } + +} // refreshSelectedTags() +/** + * show photo index + * + * this function will fetch the photo-index view from + * the server via AJAX. It's also used to browse through + * the photo-index pages + */ function showPhotoIndex(begin_with, last_photo) { - var url = "rpc.php?action=show_photo_index"; + var url = web_path + "/rpc.php?action=show_photo_index"; if(begin_with != undefined) url = url + '&begin_with=' + begin_with; if(last_photo != undefined) @@ -97,26 +202,45 @@ function showPhotoIndex(begin_with, last_photo) } // showPhotoIndex() -// if photo index is currently shown, refresh it +/** + * update photo index + * + * this function will be called, to request a refresh of the + * photo index. this, for example, can be caused, when changing + * the tag-selection. + */ function refreshPhotoIndex() { + /* only invoke showPhotoIndex(), if photo-index is really shown */ if(document.getElementById("index") != undefined || startup == 1) { showPhotoIndex(); startup = 0; } -} +} // refreshPhotoIndex() + +/** + * blur cursor focus + * + * this function removes the focus-rectangle which may appear + * when click on a link. Not always beautiful. + */ function click(object) { if(object.blur) object.blur(); -} - -// set the radio button with the given value as being checked -// do nothing if there are no radio buttons -// if the given value does not exist, all the radio buttons -// are reset to unchecked +} // click() + +/** + * change current radio-button setting + * + * This function will check the radio-button with the given value. + * If no radio-button is currently displayed, this function will do + * nothing. + * If the given value does not exist, the existing radio buttons will + * be reseted. + */ function setCheckedValue(condition, value) { var count = condition.length; @@ -130,8 +254,15 @@ function setCheckedValue(condition, value) { condition[i].checked = true; } } -} +} // setCheckedValue() + +/** + * Invoke a search + * + * This function will be invoked by starting + * any kind of search (tag-name, photo-name, date, ...). + */ function startSearch() { from_year = document.getElementById('fromyear').value; @@ -157,18 +288,24 @@ function startSearch() objTemp['to'] = to; } - var retr = HTML_AJAX.post('rpc.php', objTemp); + var retr = HTML_AJAX.post(web_path + '/rpc.php', objTemp); if(retr == "ok") { refreshAvailableTags(); refreshSelectedTags(); showPhotoIndex(); } else { - window.alert(retr); + window.alert("Server message: "+ retr); } } // startSearch() +/** + * enable/disable date search + * + * this function will either enable or disable the + * input fields for the date-search + */ function datesearch() { var mode = true; @@ -184,15 +321,25 @@ function datesearch() document.getElementById('tomonth').disabled = mode; document.getElementById('today').disabled = mode; -} - +} // datesearch() + +/** + * set view mode + * + * called for photo-index export. will return the + * selected mode via AJAX from the server. + */ function setViewMode(mode) { var exprt = document.getElementById('output'); exprt.innerHTML = "Loading..."; - exprt.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_export&mode=' + mode)); -} + exprt.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=get_export&mode=' + mode)); + +} // setViewMode() +/** + * reset all search-fields + */ function clearSearch() { document.getElementsByName('searchfor_tag')[0].value = ''; @@ -202,17 +349,42 @@ function clearSearch() document.getElementsByName('consider_date')[0].checked = false; datesearch(); } -} +} // clearSearch() + +/** + * if the client is planless, ask the server what to do + * next. + */ function AskServerWhatToDo() { - return HTML_AJAX.grab(encodeURI('rpc.php?action=what_to_do')); -} - -function init_phpfspot(mode) + return HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=what_to_do')); + +} // AskServerWhatToDo() + +/** + * init phpfspot + * + * this function will be called when the browser opens phpfspot + * the first time. It will fetch the tag-lists and will then + * switch to the right view, which the browser got told from + * the server (maybe someone hit the refresh button...). + * + * as parameter the server can set the correct webpath. + * espacialley when using user-friendly url's, the browser + * does not know the correct URLs to address images, stylesheets, + * ... then. + */ +function init_phpfspot(srv_webpath) { + if(srv_webpath != undefined) + web_path = srv_webpath; + else + web_path = ''; + /* always load list of available tags */ - refreshAvailableTags(); + //this should not be more necessary since 4.5.08 + //refreshAvailableTags(); /* ask the server what we are currently displaying */ whattodo = AskServerWhatToDo(); @@ -230,8 +402,12 @@ function init_phpfspot(mode) refreshSelectedTags(); } } + } // init_phpfspot() +/** + * change background-color on mouse-over + */ function setBackGrdColor(item, color) { if(color == 'mouseover') @@ -240,26 +416,51 @@ function setBackGrdColor(item, color) item.style.backgroundColor='#eeeeee'; if(color == 'mouseclick') item.style.backgroundColor='#93A8CA'; -} +} // setBackGrdColor() + +/** + * ask server, which photo needs to be shown + * + * when user press the refresh-button in a single-photo + * view or maybe enters the link via an external URL, the + * client does not know, what photo will be shown (dimensions...). + * But the server can tell this the browser. + */ function getPhotoToShow() { - // update selected tags - var photo_to_show = HTML_AJAX.grab(encodeURI('rpc.php?action=get_photo_to_show')); + var photo_to_show = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=get_photo_to_show')); // if no image needs to be shown, return false from here if(photo_to_show == "") return false; return photo_to_show; -} +} // getPhotoToShow() + +/** + * a fake-zoom for photo + * + * a quick to let the browser do some zooming on + * photos. + */ function zoom(mod) { + var photo; + if(mod == undefined) return; - if(photo = document.getElementById('photo')) { + /* internet explorer */ + if(document.images['photo'].width) + photo = document.images['photo']; + + /* all others */ + if(photo == undefined && document.getElementById('photo').width) + photo = document.getElementById('photo'); + + if(photo != undefined) { if(origWidth == undefined) origWidth = photo.width; @@ -273,7 +474,7 @@ function zoom(mod) photo.height = new_h; if(photo_details_pos == undefined) { - photo_details_pos = document.getElementById('photo_details').offsetLeft; + photo_details_pos = findPos(document.getElementById('photo_details'),'left'); } if((photo.offsetLeft + new_w) >= photo_details_pos-20) { @@ -292,8 +493,16 @@ function zoom(mod) } // zoom() +/** + * hides the photo details layin + * + * if the photo is getting zoomed quiet large, this will + * auto-hide (and also restore) the photo-details-box. + */ function hidePhotoDetails(mode) { + var photo_details; + if(photo_details = document.getElementById('photo_details')) { if(mode == 'true') { photo_details.style.visibility = 'hidden'; @@ -301,11 +510,14 @@ function hidePhotoDetails(mode) } else { photo_details.style.visibility = 'visible'; - photo_details.style.display = 'inline'; + photo_details.style.display = ''; } } } // hidePhotoDetails() +/** + * show calendar + */ function showCalendar(date_box, click_obj) { var calendar = document.getElementById('calendar'); @@ -327,14 +539,18 @@ function showCalendar(date_box, click_obj) if(calendar.style.visibility == "" || calendar.style.visibility == 'hidden') { calendar.style.visibility = 'visible'; calendar.innerHTML = "Loading..."; - calendar.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_calendar_matrix&year=' + year + '&month=' + month)); + calendar.innerHTML = HTML_AJAX.grab(encodeURI(web_path +'/rpc.php?action=get_calendar_matrix&year=' + year + '&month=' + month)); calendar_shown = 1; } else { hideCalendar(); } -} +} // showCalendar() + +/** + * hide calendar + */ function hideCalendar() { var calendar = document.getElementById('calendar'); @@ -342,32 +558,47 @@ function hideCalendar() calendar.style.visibility = 'hidden'; calendar_shown = 0; } -} +} // hideCalendar() +/** + * switch month in calendar + */ function setMonth(year, month, day) { var calendar = document.getElementById('calendar'); calendar.innerHTML = "Loading..."; - calendar.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_calendar_matrix&year='+ year +'&month='+ month +'&day='+ day)); + calendar.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=get_calendar_matrix&year='+ year +'&month='+ month +'&day='+ day)); } +/** + * get the user-selected date from the calendar and + * put it into the date-search boxes + */ function setCalendarDate(year, month, day) { document.getElementById(calendar_mode+'year').value = year; document.getElementById(calendar_mode+'month').value = month; document.getElementById(calendar_mode+'day').value = day; hideCalendar(); -} +} // setCalendarDate() + +/** + * reset phpfspot complelely and move to the begining + */ function resetAll() { - HTML_AJAX.grab(encodeURI('rpc.php?action=reset')); + HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=reset')); clearSearch(); refreshAvailableTags(); refreshSelectedTags(); refreshPhotoIndex(); -} +} // resetAll() + +/** + * find objects with their class-name + */ function WSR_getElementsByClassName(oElm, strTagName, oClassNames){ var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); @@ -396,67 +627,99 @@ function WSR_getElementsByClassName(oElm, strTagName, oClassNames){ } } return (arrReturnElements) -} +} // WSR_getElementsByClassName() -function preloadPhotos(lbImg) { +/** + * javascript based photo preloading + */ +function preloadPhotos(image_url) { - var d=document; - if(d.images) - if(!d.photos) - d.photos=new Array(); - - var i, j=d.photos.length; + var i; + var timeout = 1000; + var waiting = 100; + var counting; lbImg=WSR_getElementsByClassName(document,"img","thumb"); for(i=0;i