X-Git-Url: https://git.nubati.net/cgi-bin/gitweb.cgi?p=phpfspot.git;a=blobdiff_plain;f=phpfspot.js;h=ebe124225f169a182530acda770bdccc46c22f72;hp=4bd321f4ebc782037ec434fc2bf6e4ad1c662182;hb=dcc26041d1dd86d47516e143fd5e475e588180cf;hpb=b808ecb188d4745f7b72c71311a0b03964298372;ds=sidebyside diff --git a/phpfspot.js b/phpfspot.js index 4bd321f..ebe1242 100644 --- a/phpfspot.js +++ b/phpfspot.js @@ -1,80 +1,246 @@ -function showImage(id) +/*************************************************************************** + * + * 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. + * + ***************************************************************************/ + +/** + * show photo + * + * 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 showPhoto(id, scrollup) { - var image_div = document.getElementById("content"); - image_div.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=showphoto&id=' + id)); -} + /* is phpfspot skeleton really displayed? */ + if(!document.getElementById('content')) + return; + + var content = document.getElementById('content'); + + /* blank the screen */ + if(scrollup != undefined) { + content.innerHTML = ""; + } + /* 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) { + window.scrollTo(0,0); + } + + /* delete some global vars */ + delete(origHeight); origHeight = undefined; + delete(origWidth); origWidth = undefined; + delete(photo_details_pos); photo_details_pos = undefined; + +} // showPhoto() + +/** + * 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, 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(); + if(mode == "add") { - // add the tag to users session - HTML_AJAX.grab(encodeURI('rpc.php?action=addtag&id=' + id)); + // add tag to users session + objTemp['action'] = 'addtag'; + objTemp['id'] = id; } else if(mode == "del") { - // del the tag from users session - HTML_AJAX.grab(encodeURI('rpc.php?action=deltag&id=' + id)); + // del tag from users session + objTemp['action'] = 'deltag'; + objTemp['id'] = id; } else if(mode == "condition") { setCheckedValue(id, id.value); - HTML_AJAX.grab(encodeURI('rpc.php?action=tagcondition&mode=' + id.value)); + objTemp['action'] = 'tagcondition'; + objTemp['mode'] = id.value; } - refreshAvailableTags(); - refreshSelectedTags(); - refreshPhotoIndex(); + var retr = HTML_AJAX.post(web_path + '/rpc.php', objTemp); + if(retr == "ok") { + refreshAvailableTags(); + refreshSelectedTags(); + refreshPhotoIndex(); + } + else { + 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')); + } -function showPhotoIndex(begin_with) -{ - if(begin_with == undefined) - HTML_AJAX.replace(document.getElementById("content"), encodeURI('rpc.php?action=show_photo_index')); - else - HTML_AJAX.replace(document.getElementById("content"), encodeURI('rpc.php?action=show_photo_index&begin_with=' + begin_with)); -} +} // refreshSelectedTags() -// if photo index is currently shown, refresh it +/** + * 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 = web_path + "/rpc.php?action=show_photo_index"; + if(begin_with != undefined) + url = url + '&begin_with=' + begin_with; + if(last_photo != undefined) + url = url + '&last_photo=' + last_photo; + + HTML_AJAX.replace(document.getElementById("content"), encodeURI(url)); + +} // showPhotoIndex() + +/** + * 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; @@ -88,12 +254,17 @@ 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() { - var searchfor = document.getElementsByName('searchfor')[0].value - from_year = document.getElementById('fromyear').value; from_month = document.getElementById('frommonth').value; from_day = document.getElementById('fromday').value; @@ -103,24 +274,46 @@ function startSearch() to_day = document.getElementById('today').value; to = to_year +"-"+ to_month +"-"+ to_day; - var request = 'rpc.php?action=search'; + var objTemp = new Object(); + objTemp['action'] = 'search'; - if(searchfor != "") { - request = request + '&for=' + searchfor; + if(document.getElementsByName('searchfor_tag')[0] != undefined && + document.getElementsByName('searchfor_tag')[0].value != "") { + objTemp['for_tag'] = document.getElementsByName('searchfor_tag')[0].value; } - - if(document.getElementsByName('consider_date')[0].checked == true) { - request = request + '&from='+ from +'&to='+ to; + if(document.getElementsByName('searchfor_name')[0] != undefined && + document.getElementsByName('searchfor_name')[0].value != "") { + objTemp['for_name'] = document.getElementsByName('searchfor_name')[0].value; + } + if(document.getElementsByName('consider_date')[0] != undefined && + document.getElementsByName('consider_date')[0].checked == true) { + objTemp['from'] = from; + objTemp['to'] = to; + } + if(document.getElementsByName('consider_rate')[0] != undefined && + document.getElementsByName('consider_rate')[0].checked == true) { + objTemp['rate_from'] = rate_search['from']; + objTemp['rate_to'] = rate_search['to']; } - HTML_AJAX.grab(encodeURI(request)); + var retr = HTML_AJAX.post(web_path + '/rpc.php', objTemp); + if(retr == "ok") { + refreshAvailableTags(); + refreshSelectedTags(); + showPhotoIndex(); + } + else { + window.alert("Server message: "+ retr); + } - refreshAvailableTags(); - refreshSelectedTags(); - showPhotoIndex(); - -} +} // startSearch() +/** + * enable/disable date search + * + * this function will either enable or disable the + * input fields for the date-search + */ function datesearch() { var mode = true; @@ -136,34 +329,82 @@ function datesearch() document.getElementById('tomonth').disabled = mode; document.getElementById('today').disabled = mode; -} - -function setViewMode(mode) +} // datesearch() + +/** + * set view mode + * + * called for photo-index export. will return the + * selected mode via AJAX from the server. + */ +function setViewMode(srv_webpath, mode) { + if(srv_webpath != undefined) + web_path = srv_webpath; + else + web_path = ''; + 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')[0].value = ''; + if(document.getElementsByName('searchfor_tag')[0] != undefined) + document.getElementsByName('searchfor_tag')[0].value = ''; + if(document.getElementsByName('searchfor_name')[0] != undefined) + document.getElementsByName('searchfor_name')[0].value = ''; - if(document.getElementsByName('consider_date')[0].checked == true) { + if(document.getElementsByName('consider_date')[0] != undefined && + document.getElementsByName('consider_date')[0].checked == true) { document.getElementsByName('consider_date')[0].checked = false; datesearch(); - } -} + } + if(document.getElementsByName('consider_rate')[0] != undefined && + document.getElementsByName('consider_rate')[0].checked == true) { + document.getElementsByName('consider_rate')[0].checked = false; + } + +} // 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(); @@ -177,12 +418,16 @@ function init_phpfspot(mode) } if(whattodo == 'show_photo') { if(photo = getPhotoToShow()) { - showImage(photo) + showPhoto(photo); refreshSelectedTags(); } } + } // init_phpfspot() +/** + * change background-color on mouse-over + */ function setBackGrdColor(item, color) { if(color == 'mouseover') @@ -191,20 +436,108 @@ 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; + + /* 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; + if(origHeight == undefined) + origHeight = photo.height; + + if(mod != 0) { + new_w = photo.width * (1 + mod/100); + new_h = photo.height * (1 + mod/100); + photo.width = new_w; + photo.height = new_h; + + if(photo_details_pos == undefined) { + photo_details_pos = findPos(document.getElementById('photo_details'),'left'); + } + + if((photo.offsetLeft + new_w) >= photo_details_pos-20) { + hidePhotoDetails('true'); + } + else { + hidePhotoDetails('false'); + } + } + else { + photo.width = origWidth; + photo.height = origHeight; + hidePhotoDetails('false'); + } + } + +} // 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'; + photo_details.style.display = 'none'; + } + else { + photo_details.style.visibility = 'visible'; + photo_details.style.display = ''; + } + } +} // hidePhotoDetails() + +/** + * show calendar + */ function showCalendar(date_box, click_obj) { var calendar = document.getElementById('calendar'); @@ -226,14 +559,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'); @@ -241,32 +578,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(); @@ -295,67 +647,104 @@ function WSR_getElementsByClassName(oElm, strTagName, oClassNames){ } } return (arrReturnElements) -} - -function preloadPhotos(lbImg) { +} // WSR_getElementsByClassName() - var d=document; - if(d.images) - if(!d.photos) - d.photos=new Array(); +/** + * javascript based photo preloading + */ +function preloadPhotos(image_url) { - 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