[ljcom] r9495: LJSUP-6573: added js support for post an...

U   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;
+		}
+	}
 });