Палсеич— (lusever) wrote in changelog,
Палсеич—
lusever
changelog

[livejournal] r16084: LJSV-593: Delete comment popup out of sc...

Committer: pkornilov
LJSV-593: Delete comment popup out of screen border.
U   trunk/htdocs/js/commentmanage.js
U   trunk/htdocs/js/contextualhover.js
U   trunk/htdocs/stc/contextualhover.css
Modified: trunk/htdocs/js/commentmanage.js
===================================================================
--- trunk/htdocs/js/commentmanage.js	2010-01-12 09:44:26 UTC (rev 16083)
+++ trunk/htdocs/js/commentmanage.js	2010-01-12 09:54:22 UTC (rev 16084)
@@ -60,15 +60,6 @@
     }
 }
 
-// push new element 'ne' after sibling 'oe' old element
-function addAfter (oe, ne) {
-    if (oe.nextSibling) {
-        oe.parentNode.insertBefore(ne, oe.nextSibling);
-    } else {
-        oe.parentNode.appendChild(ne);
-    }
-}
-
 // hsv to rgb
 // h, s, v = [0, 1), [0, 1], [0, 1]
 // r, g, b = [0, 255], [0, 255], [0, 255]
@@ -242,29 +233,28 @@
             var canAdmin = LJ_cmtinfo["canAdmin"];
 			
 			var pos_offset = jQuery(ae).position(),
-				offset = jQuery(ae).offset();
-			var pos_x = e.pageX - offset.left + pos_offset.left;
-			var pos_y = e.pageY - offset.top + pos_offset.top;
-			var lx = Math.max(pos_x + 5 - 250, 5);
-            var de;
-
-            if (curPopup && curPopup_id == dItemid) {
-                de = curPopup;
-                de.style.left = lx + "px";
-				de.style.top = pos_y + 5 + 'px';
-                return Event.stop(e);
-            }
-
-            de = document.createElement("div");
-            de.style.textAlign = "left";
-            de.className = 'ljcmtmanage';
-            de.style.height = "10px";
-            de.style.overflow = "hidden";
-            de.style.position = "absolute";
-            de.style.left = lx + "px";
-            de.style.top = pos_y + 5 + 'px';
-            de.style.width = "250px";
-            de.style.zIndex = 3;
+				offset = jQuery(ae).offset(),
+				pos_x = e.pageX + pos_offset.left - offset.left,
+				top = e.pageY + pos_offset.top - offset.top + 5,
+				left = Math.max(pos_x + 5 - 250, 5),
+				$window = jQuery(window);
+			
+			//calc with viewport
+			if ($window.scrollLeft() > left + offset.left - pos_offset.left) {
+				left = $window.scrollLeft() + pos_offset.left - offset.left;
+			}
+			
+			if (curPopup && curPopup_id == dItemid) {
+				//calc with viewport
+				top = Math.min(top, $window.height() + $window.scrollTop() - jQuery(curPopup).outerHeight() + pos_offset.top - offset.top);
+				curPopup.style.left = left + 'px';
+				curPopup.style.top = top + 'px';
+				
+				return Event.stop(e);
+			}
+			
+			var de = jQuery('<div class="ljcmtmanage" style="text-align:left;position:absolute;visibility:hidden;width:250px;left:0;top:0;z-index:3"></div>');
+			
             DOM.addEventListener(de, 'click', function (e) {
                 Event.stopPropagation(e);
                 return true;
@@ -300,30 +290,37 @@
             }
 
             inHTML += "<input type='button' value='Delete' onclick='deleteComment(" + dItemid + ");' /> <input type='button' value='Cancel' onclick='killPopup()' /></span><br /><span style='font-face: Arial; font-size: 8pt'><i>shift-click to delete without options</i></span></form>";
-            de.innerHTML = inHTML;
-
-            // we do this so keyboard tab order is correct:
-            addAfter(ae, de);
-
-            curPopup = de;
-            curPopup_id = dItemid;
-
-            var height = 10;
-            var grow = function () {
-                height += 7;
-                if (height > finalHeight) {
-                    de.style.height = "";
-                    de.style.filter = "";
-                    de.style.opacity = 1.0;
-                } else {
-                    de.style.height = height + "px";
-                    window.setTimeout(grow, 20);
-                }
-            };
-            grow();
-        }
-        Event.stop(e);
-    }
+			
+			de.html(inHTML).insertAfter(ae);
+			
+			//calc with viewport
+			top = Math.min(top, $window.height() + $window.scrollTop() - de.outerHeight() + pos_offset.top - offset.top);
+			
+			de.css({
+				left: left,
+				top: top,
+				height: 10,
+				visibility: 'visible',
+				overflow: 'hidden'
+			});
+			
+			curPopup = de[0];
+			curPopup_id = dItemid;
+			
+			var height = 10;
+			var grow = function () {
+				height += 7;
+				if (height > finalHeight) {
+					de.height('auto');
+				} else {
+					de.height(height);
+					window.setTimeout(grow, 20);
+				}
+			}
+			grow();
+		}
+		Event.stop(e);
+	}
 }
 
 function poofAt (pos) {

Modified: trunk/htdocs/js/contextualhover.js
===================================================================
--- trunk/htdocs/js/contextualhover.js	2010-01-12 09:44:26 UTC (rev 16083)
+++ trunk/htdocs/js/contextualhover.js	2010-01-12 09:54:22 UTC (rev 16084)
@@ -374,7 +374,7 @@
 					alias_value = document.createElement('span');
 					alias_value.className = 'alias-value';
 					alias_value[/*@cc_on'innerText'||@*/'textContent'] = ' — ' + data.res.alias;
-					ljuser_node.parentNode[ljuser_node.nextSibling ? 'insertBefore' : 'appendChild'](alias_value);
+					ljuser_node.parentNode.insertBefore(alias_value, ljuser_node.nextSibling);
 				}
 				alias_value[/*@cc_on'innerText'||@*/'textContent'] = ' — ' + data.res.alias;
 			} else if (alias_value) { // delete
@@ -586,6 +586,28 @@
 		ContextualPopup.hidePopup();
 	},
 	
+	constructIPPU: function (ctxPopupId)
+	{
+		if (ContextualPopup.ippu) {
+			ContextualPopup.ippu.hide();
+			ContextualPopup.ippu = null;
+		}
+		ContextualPopup.ippu =
+		{
+			element: jQuery('<div class="ContextualPopup"></div>'),
+			show: function()
+			{
+				document.body.appendChild(this.element[0]);
+			},
+			hide: function()
+			{
+				this.element.remove();
+			}
+		}
+		
+		ContextualPopup.renderPopup(ctxPopupId);
+	},
+	
 	showPopup: function(ctxPopupId, ele)
 	{
 		ContextualPopup.current_target = ele;
@@ -596,9 +618,7 @@
 		
 		ContextualPopup.constructIPPU(ctxPopupId);
 		var ippu = ContextualPopup.ippu;
-		// default is to auto-center, don't want that
-		ippu.setAutoCenter(false, false);
-	
+		
 		// pop up the box right under the element
 		ele = jQuery(ele);
 		var ele_offset = ele.offset(),
@@ -608,29 +628,30 @@
 		// hide the ippu content element, put it on the page,
 		// get its bounds and make sure it's not going beyond the client
 		// viewport. if the element is beyond the right bounds scoot it to the left.
-		var pop_ele = ippu.getElement();
-		pop_ele.style.visibility = 'hidden';
+		var pop_ele = ippu.element;
+		pop_ele.css('visibility', 'hidden');
 		
 		// put the content element on the page so its dimensions can be found
 		ippu.show();
 		
-		var win_width = jQuery(document).width(),
-			win_height = jQuery(document).height(),
-			pop_width = jQuery(pop_ele).outerWidth(true),
-			pop_height = jQuery(pop_ele).outerHeight(true);
+		ContextualPopup.calcPosition(pop_ele, left, top);
 		
-		if (left + pop_width > win_width) {
-			left = win_width - pop_width;
-		}
+		// finally make the content visible
+		pop_ele.css('visibility', 'visible');
+	},
+	
+	//calc with viewport
+	calcPosition: function(pop_ele, left, top)
+	{
+		var $window = jQuery(window);
 		
-		if (top + pop_height > win_height) {
-			top = win_height - pop_height;
-		}
+		left = Math.min(left,  $window.width() + $window.scrollLeft() - pop_ele.outerWidth(true));
+		top = Math.min(top, $window.height() + $window.scrollTop() - pop_ele.outerHeight(true));
 		
-		ippu.setLocation(left, top);
-		
-		// finally make the content visible
-		pop_ele.style.visibility = 'visible';
+		pop_ele.css({
+			left: left,
+			top: top
+		});
 	}
 }
 
@@ -639,26 +660,6 @@
     ContextualPopup.mouseOut();
 }
 
-ContextualPopup.constructIPPU = function (ctxPopupId) {
-    if (ContextualPopup.ippu) {
-        ContextualPopup.ippu.hide();
-        ContextualPopup.ippu = null;
-    }
-
-    var ippu = new IPPU();
-    ippu.init();
-    ippu.setTitlebar(false);
-    ippu.setFadeOut(true);
-    ippu.setFadeIn(true);
-    ippu.setFadeSpeed(15);
-    ippu.setDimensions("auto", "auto");
-    ippu.addClass("ContextualPopup");
-    ippu.setCancelledCallback(ContextualPopup.popupClosed);
-    ContextualPopup.ippu = ippu;
-
-    ContextualPopup.renderPopup(ctxPopupId);
-}
-
 ContextualPopup.renderPopup = function (ctxPopupId) {
     var ippu = ContextualPopup.ippu;
 
@@ -669,7 +670,7 @@
         var data = ContextualPopup.cachedResults[ctxPopupId];
 
         if (!data) {
-            ippu.setContent("<div class='Inner'>Loading...</div>");
+			ippu.element.append('<div class="Inner">Loading...</div>');
             return;
         } else if (!data.username || !data.success || data.noshow) {
             ippu.hide();
@@ -678,8 +679,12 @@
 
         var username = data.display_username;
 
-        var inner = document.createElement("div");
-        DOM.addClassName(inner, "Inner");
+		var inner = jQuery('<div class="Inner"></div>')[0];
+		if (ippu.element[0].firstChild) {
+			var last_inner_height = ippu.element[0].firstChild.offsetHeight;
+			ippu.element.height(ippu.element.height());
+			ippu.element.css('overflow', 'hidden');
+		}
 
         var content = document.createElement("div");
         DOM.addClassName(content, "Content");
@@ -1027,7 +1032,18 @@
         clearingDiv.innerHTML = "&nbsp;";
         content.appendChild(clearingDiv);
 
-        ippu.setContentElement(inner);
+		ippu.element.html(inner);
+		
+		//calc position with viewport
+		if (ippu.element[0].style.overflow == 'hidden') {
+			inner = jQuery(inner);
+			var $window = jQuery(window),
+				top = parseInt(ippu.element[0].style.top),
+				diff = ippu.element[0].firstChild.offsetHeight - last_inner_height,
+				new_top = Math.min(top, $window.height() + $window.scrollTop() - ippu.element.outerHeight(true) - diff);
+			top != new_top && ippu.element.css('top', new_top);
+			ippu.element.css('overflow', 'visible');
+		}
     }
 }
 
@@ -1073,7 +1089,7 @@
 ContextualPopup.showNote = function (note, ele) {
     if (ContextualPopup.ippu) {
         // pop up the box right under the element
-        ele = ContextualPopup.ippu.getElement();
+        ele = ContextualPopup.ippu.element[0];
     }
 
     LJ_IPPU.showNote(note, ele);

Modified: trunk/htdocs/stc/contextualhover.css
===================================================================
--- trunk/htdocs/stc/contextualhover.css	2010-01-12 09:44:26 UTC (rev 16083)
+++ trunk/htdocs/stc/contextualhover.css	2010-01-12 09:54:22 UTC (rev 16084)
@@ -1,5 +1,8 @@
 div.ContextualPopup {
-    position: relative;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1000;
     margin: 5px 0 0 20px;
     font: normal 11px "Arial", "Verdana", sans-serif !important;
     text-align: left;

Tags: css, js, livejournal, lusever
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments