MediaWiki:Tooltip Tests.js
Jump to navigation
Jump to search
Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: press Ctrl-F5, Mozilla: hold down Shift while clicking Reload (or press Ctrl-Shift-R), Opera/Konqueror: press F5, Safari: hold down Shift + Alt while clicking Reload, Chrome: hold down Shift while clicking Reload.
 |
Documentation for this user script can be added at MediaWiki:Tooltip Tests. |
// Test script for the page [[MediaWiki:Tooltips.js/Documentation/Examples]]
// <source lang="javascript">
importScript( "MediaWiki:Tooltips.js" );
//importScript("User:Lupo/lapi.js");
var dynamicTooltip = {
toggle : false,
doTip : function (evt)
{
x = evt.pageX ||
evt.clientX + ((document.documentElement ? document.documentElement.scrollLeft : 0)
|| document.body.scrollLeft || 0);
y = evt.pageY ||
evt.clientY + ((document.documentElement ? document.documentElement.scrollTop : 0)
|| document.body.scrollTop || 0);
var tip = document.createElement ('div');
var text = document.createTextNode ('Initial mouse coordinates: x = ' + x + ', y = ' + y);
if (this.tt_toggle) {
// Make the whole stuff a dummy link every second time.
var lk = document.createElement ('a');
lk.appendChild (text);
lk.setAttribute ('href', '#');
tip.appendChild (lk);
} else {
tip.appendChild (text);
}
this.tt_toggle = !this.tt_toggle;
/*
// Test stuff trying to track down an ugly bug on Opera.
var editor = new LAPI.Edit (
"Foo" , 40, 6
, {save : 'Save', cancel : 'Cancel', nullsave : 'Delete'}
, {
onsave : function () {dynamicTooltip.editor.setText (dynamicTooltip.editor.getText () + '\nSave'); alert (dynamicTooltip.editor.getText ());},
oncancel : function () {dynamicTooltip.editor.setText (dynamicTooltip.editor.getText () + '\nCancel'); alert (dynamicTooltip.editor.getText ());}
}
);
tip.appendChild (editor.getView ());
dynamicTooltip.editor = editor;
*/
return tip;
}
}
var dynamicContent =
{
theTooltip : null,
setup : function (evt)
{
var content = document.getElementById ('test12_tip');
// Now add a link that will toggle hidden content
if (content.lastChild.id != 'test12link') {
var lk = document.createElement ('a');
lk.id = 'test12link';
lk.appendChild (document.createTextNode ('Toggle'));
lk.setAttribute ('href', '#');
lk.onclick = dynamicContent.clicked;
content.appendChild (lk);
}
// if (is_IE) {
// content.onpropertychange = function () {dynamicContent.evtHandler (window.event);};
// } else {
// content.onDOMAttrModified = dynamicContent.evtHandler;
// }
return content;
},
clicked : function (evt)
{
var to_toggle = document.getElementById ('test12toggle');
// Kill the event
EvtHandler.killEvt (evt || window.event);
if (to_toggle.style.display == 'none' || to_toggle.style.display == null)
to_toggle.style.display = "";
else
to_toggle.style.display = 'none';
if (dynamicContent.theTooltip) dynamicContent.theTooltip.size_change ();
return false;
},
evtHandler: function (evt)
{
if (evt) {
if (false) {
} else {
if (!evt.relatedNode) { alert ("No related node"); return; }
if (evt.attChange == 1)
alert (evt.attrName + ' was modified, old=' + evt.prevValue + ', new=' + evt.newValue);
else if (evt.attrChange == 2)
alert (evt.attrName + ' was added, val=' + evt.newValue);
else
alert (evt.attrName + ' was deleted');
}
} else
alert ('Handler called without event');
}
}
function setTooltips ()
{
//Tooltips.debug = true;
var tt1 = new Tooltip
( document.getElementById ('test1')
, document.getElementById ('test1_tip')
, null // No options
, { border : "1px solid red"
,background : "pink"
,padding : "0.5em"
}
);
var tt2 = new Tooltip
( document.getElementById ('test2')
, document.getElementById ('test2_tip')
, { mouse_offset : {dy: -1}
,hide_delay : 0
}
, { border : "1px solid red"
,background : "pink"
,padding : "0.5em"
,opacity : "0.9"
,filter : "alpha(Opacity=90)" // for IE
}
);
var tt3 = new Tooltip
( document.getElementById ('test3')
, document.getElementById ('test3_tip')
, { fixed_offset : {x: -200, y: -20, dx : 1, dy: -1}
,anchor : Tooltip.TOP_RIGHT
,mode: Tooltip.FIXED
,hide_delay : 0
}
, { border : "1px solid black"
,background : "#DDDDDD"
,padding : "0.5em"
,opacity : "0.9"
,filter : "alpha(Opacity=90)" // for IE
}
);
var tt4 = new Tooltip
( document.getElementById ('test4')
, document.getElementById ('test4_tip')
, { mouse_offset : {dy: -1}
,hide_delay : 0
}
, { border : "1px solid red"
,background : "pink"
,padding : "0.5em"
}
);
var tt5 = new Tooltip
( document.getElementById ('test5')
, document.getElementById ('test5_tip')
, { mode : Tooltip.MOUSE
,activate: Tooltip.CLICK
,deactivate: Tooltip.CLICK_ELEM | Tooltip.CLICK_TIP
}
, { border : "1px solid red"
,background : "pink"
,padding : "0.5em"
,opacity : "0.9"
,filter : "alpha(Opacity=90)" // for IE
}
);
// A little more complex...
var test6 = document.getElementById ('test6');
var test6_tip = document.getElementById ('test6_tip');
var test6_button = document.getElementById ('test6_button');
if (test6 && test6_tip && test6_button) {
var img = test6_button.getElementsByTagName ('img')[0];
var width = parseInt (img.getAttribute ('width'), 10);
var height = parseInt (img.getAttribute ('height'), 10);
var button = Buttons.makeButton ([img], 'test6__button', "#");
var button_container = document.createElement ('div');
button_container.style.cssFloat = 'right';
button_container.style.position = 'relative'; // For IE...
button_container.style.display = 'inline'; // For IE again...
button_container.style.styleFloat = 'right'; // IE!!!
button_container.style.marginRight = '-' + (width + 5) + 'px';
button_container.style.width = width + 'px';
button_container.appendChild (button);
var container = button_container;
test6.style.position = 'relative';
test6.insertBefore (container, test6.firstChild);
var tt6 = new Tooltip
( button
, test6_tip
, { mode : Tooltip.FIXED
,fixed_offset: {x: 20, y:-10, dx:1, dy:1}
,anchor : Tooltip.BOTTOM_LEFT
,target : test6
,activate: Tooltip.CLICK
,deactivate: Tooltip.CLICK_ELEM | Tooltip.CLICK_TIP
}
);
} // end if
var tt7 = new Tooltip
( document.getElementById ('test7')
, document.getElementById ('test7_tip')
, { mouse_offset : {dy: -1}
,hide_delay : 0
}
, { border : "1px solid red"
,background : "pink"
,padding : "0.5em"
,opacity : "0.9"
,filter : "alpha(Opacity=90)" // for IE
}
);
// Dynamic tooltip
var tt8 = new Tooltip
( document.getElementById ('test8')
, function (evt) {return dynamicTooltip.doTip (evt);}
, { mode: Tooltip.TRACK
,open_delay : 0
,hide_delay : 0}
, { border : "2px solid green"
,background : "#EEEEEE"
,padding : "0.5em"
}
);
// tooltip with close button.
var test_9_imgs = document.getElementById ('test9_button').getElementsByTagName ('img');
if (test_9_imgs) {
var tt9 = new Tooltip
( document.getElementById ('test9')
, document.getElementById ('test9_tip')
, { mode : Tooltip.TRACK
,close_button : test_9_imgs
,deactivate : 0
}
);
var tt10 = new Tooltip
( document.getElementById ('test10')
, document.getElementById ('test10_tip')
, { mode : Tooltip.TRACK
,close_button : test_9_imgs
,deactivate : 0
}
, { border : "1px solid red"
,background : "pink"
,padding : "0.5em"
,opacity : "0.9"
,filter : "alpha(Opacity=90)" // for IE
}
);
var tt11 = new Tooltip
( document.getElementById ('test11_link').firstChild
, document.getElementById ('test11_tip')
, { mode : Tooltip.TRACK
,close_button : test_9_imgs
,activate: Tooltip.CLICK
,deactivate : 0
}
, { border : "1px solid red"
,background : "pink"
,padding : "0.5em"
,opacity : "0.9"
,filter : "alpha(Opacity=90)" // for IE
}
);
// Tooltip with dynamic content
var tt12 = new Tooltip
( document.getElementById ('test12')
, function (evt) {return dynamicContent.setup (evt);}
, { mode: Tooltip.TRACK
,deactivate : Tooltip.ESCAPE
,open_delay : 0
,hide_delay : 0}
, { border : "2px solid green"
,background : "#EEEEEE"
,padding : "0.5em"
}
);
dynamicContent.theTooltip = tt12;
}
}
$(function () {
setTimeout(function () {
setTooltips();
}, 2000);
});
// <source />