diff rhodecode/public/js/rhodecode.js @ 2971:2bfcec6a3985 beta

new tooltip implementation - added lazy loading of changeset tooltips for journal data
author Marcin Kuzminski <marcin@python-works.com>
date Mon, 29 Oct 2012 21:18:14 +0100
parents 9812e617c564
children 8f5e2206e326
line wrap: on
line diff
--- a/rhodecode/public/js/rhodecode.js	Sun Oct 28 22:56:48 2012 +0100
+++ b/rhodecode/public/js/rhodecode.js	Mon Oct 29 21:18:14 2012 +0100
@@ -250,6 +250,24 @@
 	
 };
 
+var ajaxGET = function(url,success) {
+	// Set special header for ajax == HTTP_X_PARTIAL_XHR
+	YUC.initHeader('X-PARTIAL-XHR',true);
+
+    var sUrl = url;
+    var callback = {
+        success: success,
+        failure: function (o) {
+            alert("error");
+        },
+    };
+
+    var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
+    return request;
+};
+
+
+
 var ajaxPOST = function(url,postData,success) {
 	// Set special header for ajax == HTTP_X_PARTIAL_XHR
 	YUC.initHeader('X-PARTIAL-XHR',true);
@@ -282,27 +300,8 @@
  * tooltip activate
  */
 var tooltip_activate = function(){
-    function toolTipsId(){
-        var ids = [];
-        var tts = YUQ('.tooltip');
-        for (var i = 0; i < tts.length; i++) {
-            // if element doesn't not have and id 
-        	//  autogenerate one for tooltip 
-            if (!tts[i].id){
-                tts[i].id='tt'+((i*100)+tts.length);
-            }
-            ids.push(tts[i].id);
-        }
-        return ids
-    };
-    var myToolTips = new YAHOO.widget.Tooltip("tooltip", {
-        context: [[toolTipsId()],"tl","bl",null,[0,5]],
-        monitorresize:false,
-        xyoffset :[0,0],
-        autodismissdelay:300000,
-        hidedelay:5,
-        showdelay:20,
-    });
+	yt = YAHOO.yuitip.main;
+	YUE.onDOMReady(yt.init);
 };
 
 /**
@@ -316,6 +315,140 @@
     });
 };
 
+/**
+ * show changeset tooltip
+ */
+var show_changeset_tooltip = function(){
+	YUE.on(YUD.getElementsByClassName('lazy-cs'), 'mouseover', function(e){
+		var target = e.currentTarget;
+		var rid = YUD.getAttribute(target,'raw_id');
+		var repo_name = YUD.getAttribute(target,'repo_name');
+		var ttid = 'tt-'+rid;
+		var success = function(o){
+			console.log(o.responseText);
+			var json = JSON.parse(o.responseText);
+			YUD.addClass(target,'tooltip')
+			YUD.setAttribute(target, 'title',json['message']);
+			YAHOO.yuitip.main.show_yuitip(e, target);
+		}
+		if(rid && !YUD.hasClass(target, 'tooltip')){
+			YUD.setAttribute(target,'id',ttid);
+			ajaxGET('/changeset_info/{0}/{1}'.format(repo_name,rid), success)
+		}
+	});
+};
+
+
+/**
+ * TOOLTIP IMPL.
+ */
+YAHOO.namespace('yuitip');
+YAHOO.yuitip.main = {
+
+	YE:			YAHOO.util.Event,
+	Dom:		YAHOO.util.Dom,
+	$:			YAHOO.util.Dom.get,
+
+	bgColor:	'#000',
+	speed:		0.3,
+	opacity:	0.9,
+	offset:		[15,15],
+	useAnim:	false,
+	maxWidth:	200,
+	add_links:	true,
+
+	init: function(){
+		yt._tooltip = '';
+		yt.tipBox = yt.$('tip-box');
+		if(!yt.tipBox){
+			yt.tipBox = document.createElement('div');
+			document.body.appendChild(yt.tipBox);
+			yt.tipBox.id = 'tip-box';
+		}
+
+		yt.Dom.setStyle(yt.tipBox, 'display', 'none');
+		yt.Dom.setStyle(yt.tipBox, 'position', 'absolute');
+		if(yt.maxWidth !== null){
+			yt.Dom.setStyle(yt.tipBox, 'max-width', yt.maxWidth+'px');
+		}
+
+		var yuitips = yt.Dom.getElementsByClassName('tooltip');
+
+		if(yt.add_links === true){
+			var links = document.getElementsByTagName('a');
+			var linkLen = links.length;
+			for(i=0;i<linkLen;i++){
+				yuitips.push(links[i]);
+			}
+		}
+
+		var yuiLen = yuitips.length;
+
+		for(i=0;i<yuiLen;i++){
+			yt.YE.on(yuitips[i], 'mouseover', yt.show_yuitip, yuitips[i]);
+			yt.YE.on(yuitips[i], 'mousemove', yt.move_yuitip, yuitips[i]);
+			yt.YE.on(yuitips[i], 'mouseout', yt.close_yuitip, yuitips[i]);
+		}
+	},
+
+	show_yuitip: function(e, el){
+		yt.YE.stopEvent(e);
+		if(el.tagName.toLowerCase() === 'img'){
+			yt.tipText = el.alt ? el.alt : '';
+		} else {
+			yt.tipText = el.title ? el.title : '';
+		}
+
+		
+		if(yt.tipText !== ''){
+			// save org title
+			yt._tooltip = yt.tipText;
+			// reset title to not show org tooltips
+			YUD.setAttribute(el, 'title', '');
+
+			var newTipText = yt.tipText.split(' - ');
+			var tipLen = newTipText.length;
+			yt.tipText = '';
+			for(var i=0;i<tipLen;i++){
+				yt.tipText+= newTipText[i]+"<br/>";
+			}
+			yt.tipBox.innerHTML = yt.tipText;
+			yt.Dom.setStyle(yt.tipBox, 'display', 'block');
+			if(yt.useAnim === true){
+				yt.Dom.setStyle(yt.tipBox, 'opacity', '0');
+				var newAnim = new YAHOO.util.Anim(yt.tipBox,
+					{
+						opacity: { to: yt.opacity }
+					}, yt.speed, YAHOO.util.Easing.easeOut
+				);
+				newAnim.animate();
+			}
+		}
+	},
+
+	move_yuitip: function(e, el){
+		yt.YE.stopEvent(e);
+		var movePos = yt.YE.getXY(e);
+		yt.Dom.setStyle(yt.tipBox, 'top', (movePos[1] + yt.offset[1]) + 'px');
+		yt.Dom.setStyle(yt.tipBox, 'left', (movePos[0] + yt.offset[0]) + 'px');
+	},
+
+	close_yuitip: function(e, el){
+		yt.YE.stopEvent(e);
+	
+		if(yt.useAnim === true){
+			var newAnim = new YAHOO.util.Anim(yt.tipBox,
+				{
+					opacity: { to: 0 }
+				}, yt.speed, YAHOO.util.Easing.easeOut
+			);
+			newAnim.animate();
+		} else {
+			yt.Dom.setStyle(yt.tipBox, 'display', 'none');
+		}
+		YUD.setAttribute(el,'title', yt._tooltip);
+	}
+}
 
 /**
  * Quick filter widget