משתמש:Ori229/monobook.js

//
// Popup script   [[User:ori229]]  july,2007
// Show popups on specific words, when the mouse is placed on them
// Based on ideas from [[User:Lupin/popups.js]]
//
var t_stop_listen; var t_hide; var t_show;
var now_showing; var was_now_showing;
function Close()
{

	// this.style.filter='alpha(opacity=50)'; // "this" doesn't work?

	clearTimeout(t_show);
	// bad when want to press on link:  listen_to_mouse_on();
	var all_span = document.getElementsByTagName("span");
	for (var i=0;i<all_span.length;i++)		{ 
		if (all_span[i].id == 'word_with_explain') { 
			all_span[i].style.borderBottom ="#aaaadd 1px dotted"; // nice to have...
			all_span[i].style.color ="#000000"; // nice to have...
		}
		if (all_span[i].id == 'the_explain') {
			all_span[i].style.filter='alpha(opacity=70)'; // nice to have...
		}
	}

	//alert ("close: now_showing="+now_showing);
	var temp_now_showing = now_showing;
	t_hide=window.setTimeout(function () {Hide(temp_now_showing); }, 1500); // Hide after 1.5 second
}


function Hide(was_now_showing) {
	//alert ("hide: was_now_showing="+was_now_showing+" now_showing="+now_showing);
	var all_span=document.getElementsByTagName("span");
	for (var i=0;i<all_span.length;i++)		{ 
		if (all_span[i].id == 'the_explain') {
		    if (i==was_now_showing) {
			// Hide this specifc popup
			all_span[i].style.visibility='hidden';
		    }
		    all_span[i].style.filter=";"; // back to normal
		}
	}
	listen_to_mouse_on();
}


function Show(was_now_showing) {
	//alert ("Show: was_now_showing="+was_now_showing+" now_showing="+now_showing);
	if (now_showing==was_now_showing) { // if after a 0.5 second the mouse is still on this word
	    var all_span=document.getElementsByTagName("span");
	    for (var i=0;i<all_span.length;i++)		{ 
		if (all_span[i].id == 'the_explain') {
		    if (i==was_now_showing) {
			// Hide this specifc popup
			all_span[i].style.visibility='visible';
		    } else {
			all_span[i].style.visibility='hidden';
		    }
		}
	    }
	}
}


function listen_to_mouse_on() {
	clearTimeout(t_stop_listen); // clear other timers that will call this func
	var all_span = document.getElementsByTagName("span");
	for (var i=0;i<all_span.length;i++)		{ 
		if (all_span[i].id == 'word_with_explain') { 
			all_span[i].onmouseover = mouse_on_explained_word;
		}
	}
}

function mouse_on_explained_word(e) {
	this.onmouseover = null; // we don't want the popup to move after it was displayed
	clearTimeout(t_stop_listen);
	t_stop_listen=window.setTimeout('listen_to_mouse_on()',2000); // only after 2 seconds

	this.style.borderBottom ="#ffffff 1px dotted"; // nice to have...
	this.style.color ="#555555"; // nice to have...

	var span_inside=this.getElementsByTagName("span");
	//span_inside[0].style.visibility='visible';

	// remember the number of what is showing now
	var all_span=document.getElementsByTagName("span");
	for (var i=0;i<all_span.length;i++)		{ 
		if (all_span[i].id == 'the_explain') {
		    if (all_span[i] == span_inside[0]) {
			now_showing = i;
		    }
		}
	}

	var temp_now_showing = now_showing;
	t_show=window.setTimeout(function () {Show(temp_now_showing); }, 500); // Show after 0.5 sec of mouse-over

	// window.setTimeout('Hide()',5000); // we hide only after mouseout

	var e=(e)?e:event; // fix for IE
	var x, y;  	   // locating the popup below the cursor:
	if (e) {
		if (e.pageX) {
			x=e.pageX; y=e.pageY;
			x=x-30; y=y-25;  // fix the position (in FireFox)
			// span_inside[0].innerHTML="pageX x="+x+" y="+y;  // for debugging
		} else if (typeof e.clientX!='undefined') {
			var left, top, docElt = window.document.documentElement;

			if (docElt) { left=docElt.scrollLeft; }
			left = left || window.document.body.scrollLeft || window.document.scrollLeft || 0;

			if (docElt) { top=docElt.scrollTop; }
			top = top || window.document.body.scrollTop || window.document.scrollTop || 0;

			left = 0;  // ...I think it is better without it...
			x=e.clientX + left;
			y=e.clientY + top;
			x=x-70; y=y-20; // fix the position (in IE7)
			// span_inside[0].innerHTML="left="+left+" top="+top + " x="+x+" y="+y;  // for debugging
		} else {
			return;
		}
		span_inside[0].style.left = x+"px";
		span_inside[0].style.top  = y+"px";
	}
}
 
function explain_popup() { 
	var all_span = document.getElementsByTagName("span");
	for (var i=0;i<all_span.length;i++)		{ 
		if (all_span[i].id == 'word_with_explain') {
			// listen to events on this object:
			all_span[i].onmouseover = mouse_on_explained_word;
			all_span[i].onmouseout  = Close;  // Hide after a moment
		}
	}
} 

function hookEvent(hookName, hookFunct) {
	if (window.addEventListener) {
		window.addEventListener(hookName, hookFunct, false);
	} else if (window.attachEvent) {
		window.attachEvent("on" + hookName, hookFunct);
	}
}	

hookEvent("load", explain_popup);