Committer: dpetrov
LJSUP-6573: added js support for post and comment pagesU trunk/htdocs/js/fb-select-image.js
Modified: trunk/htdocs/js/fb-select-image.js =================================================================== --- trunk/htdocs/js/fb-select-image.js 2010-09-13 04:04:04 UTC (rev 9494) +++ trunk/htdocs/js/fb-select-image.js 2010-09-13 07:40:42 UTC (rev 9495) @@ -1,9 +1,215 @@ jQuery(function() { - jQuery("a[href*=#select-fb-thumbnail]").click(function(e) { - e.preventDefault(); - var url = window.prompt("enter picture url"); - if (url != null) { - jQuery("#repost_facebook_thumbnail").val(url); - } - }); + var fbInput = $('repost_facebook'), + thumb = $('repost_facebook_thumbnail'), + selectUpdate = $('select-fb-thumbnail'), + selectComments = $('select-fb-thumbnail-comments'), + userPic = $('userpic_preview_image'), + selectWindow = $('fbimg_select_window'), + selectNav = $('fbimg_select_window_nav'), + select = selectUpdate || selectComments; + + var noThumb = "nothumb"; + var userpicVal = "userpic"; + + if(select == null) { + return; + } + + var options = {}; + if(selectUpdate) { + options = { + getText: function() { + return getPostText('draft'); + }, + getUserPic: function() { + return (userPic) ? userPic.src : ""; + } + }; + } + else { + options = { + getText: function() { + var txtArea = $('commenttext') || $('body'); + return txtArea.value; + }, + getUserPic: function() { + var upicSelect = jQuery('#userpics > [name=prop_picture_keyword]'); + if(upicSelect.length == 0) { + upicSelect = jQuery('#prop_picture_keyword'); + } + + if(upicSelect.length == 0) { + return ""; + } + + var val = upicSelect.val(); + + if(val in userpicmap) { + return userpicmap[val]; + } + + return defaultpicurl || ""; + } + }; + } + + var selectPopup = { + init: function() { + this.opened = false; + this.page = 1; + this.totalImages = 1; + this.pager = { + prev: jQuery(selectNav).children('.i-repost-nav-prev'), + next: jQuery(selectNav).children('.i-repost-nav-next'), + counter: jQuery(selectNav).children('.i-repost-nav-counter') + }; + this.listWrapper = jQuery(selectWindow).children('.b-repost-pics-wrapper'); + this.list = this.listWrapper.children('.b-repost-pics-items'); + this.pagerSize = 4; + this.pagesNum = 1; + this.cellWidth = 0; + + this.pager.prev.click(function(){ selectPopup.changePage(-1)}); + this.pager.next.click(function(){ selectPopup.changePage(1)}); + + this.firstLi = this.list.children('span:first').click(function() { + selectPopup.setPicture(noThumb); + }); + }, + + setPicture: function(url) { + thumb.value = url; + this.close(); + }, + + updatePager: function() { + selectNav.style.display = (this.totalImages < this.pagerSize)?"none":"block"; + this.pager.prev[(this.page == 1)?"addClass":"removeClass"]('i-repost-nav-prev-dis'); + this.pager.next[(this.page == this.pagesNum)?"addClass":"removeClass"]('i-repost-nav-next-dis'); + + this.pager.counter.html(this.page + '/' + this.pagesNum); + }, + + makeListItem: function(url, value, selected) { + var selClass = (selected)?"b-repost-pics-active":""; + + return jQuery('<span>') + .addClass(selClass) + .append ( jQuery('<img>').attr('src', url) ) + .click(function () { selectPopup.setPicture(value) }); + }, + + open: function(imgList) { + this.list.children('span:gt(0)').remove(); + this.totalImages = imgList.length; + this.page = 1; + + if((imgList.length == 0 || !jQuery.inArray(thumb.value, imgList)) && thumb.value != userpicVal && thumb.value != noThumb) { + thumb.value = ""; + } + + var upicurl = options.getUserPic(); + if(upicurl.length > 0) { + var userPicImg = upicurl; + this.makeListItem(userPicImg, userpicVal, userpicVal == thumb.value).appendTo(this.list); + this.totalImages++; + } + this.pagesNum = Math.ceil((this.totalImages + 1) / this.pagerSize); + + if(this.totalImages > 1 && thumb.value == "") { + thumb.value = imgList[0]; + } + + var selected = "", + currentPageNum = 1; + for(var i=0; i < imgList.length; ++i) { + if( imgList[i] == thumb.value ) { + currentPageNum = Math.floor( (i + 1 + ((upicurl.length > 0)? 1 : 0)) / this.pagerSize ) + 1; + } + this.makeListItem(imgList[i], imgList[i], imgList[i] == thumb.value).appendTo(this.list); + } + + this.firstLi[((this.totalImages <= 1 && thumb.value == "") || thumb.value == noThumb)?"addClass":"removeClass"]("b-repost-pics-active"); + + selectWindow.style.display = 'block'; + this.opened = true; + + this.firstLi.each(function() { + selectPopup.cellWidth = this.offsetWidth + this.offsetLeft; //calc cell width there because it's not visible on init + }); + + var wrapperWidth = (this.pagerSize > this.totalImages) ? (this.cellWidth * (this.totalImages + 1)) + "px" : ""; + this.listWrapper.css('width', wrapperWidth); + this.changePage(currentPageNum - 1); // default page is number one, subtracting + }, + + changePage: function(num) + { + this.page += num; + this.page = (this.page < 1)? 1: + ((this.page > this.pagesNum) ? this.pagesNum : this.page); + + var offset = - this.cellWidth * (this.page - 1) * this.pagerSize; + this.list.css('left', offset + "px"); + + this.updatePager(); + }, + + close: function() { + selectWindow.style.display = 'none'; + this.opened = false; + } + } + + selectPopup.init(); + selectWindow.onmousedown = function(event) { + event = event || window.event; + if (event.stopPropagation) event.stopPropagation(); else event.cancelBubble = true; + }; + + function extractImageUrls(arr, text) + { + jQuery('<div>' + text + "</div>").find("img").each(function() { + arr.push(this.src); + }); + } + + function closeSelWindow(ev) + { + selectPopup.close(); + } + + select.onmousedown = function(ev) { + ev = ev || window.event; + + if(!selectPopup.opened) { + return; + } + + if (ev.stopPropagation) ev.stopPropagation(); else ev.cancelBubble = true; + }; + + select.onclick = function(ev) { + ev = ev || window.event; + var urls = []; + + if(fbInput.getAttribute('disabled') === null || fbInput.getAttribute('disabled') === false) { + if(selectPopup.opened) { + closeSelWindow(); + } + else { + urls.length=0; + extractImageUrls(urls, options.getText()); + selectPopup.open(urls); + setTimeout(function() { DOM.addEventListener(document, 'mousedown', closeSelWindow, false); }, 0); + } + } + + if(ev.preventDefault) { + ev.preventDefault(); + } + else { + ev.returnValue = false; + } + } });