Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

morebits: Remove tipsy dependency, use jQuery UI for tooltips #971

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Gadget.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
* Twinkle[ResourceLoader|dependencies=ext.gadget.morebits,ext.gadget.select2,mediawiki.api,mediawiki.language|rights=autoconfirmed|type=general|peers=Twinkle-pagestyles]|Twinkle.js|Twinkle.css|twinklearv.js|twinklewarn.js|twinkleblock.js|friendlywelcome.js|friendlyshared.js|friendlytalkback.js|twinklespeedy.js|twinkleprod.js|twinklexfd.js|twinkleimage.js|twinkleprotect.js|friendlytag.js|twinklediff.js|twinkleunlink.js|twinklefluff.js|twinkledeprod.js|twinklebatchdelete.js|twinklebatchprotect.js|twinklebatchundelete.js|twinkleconfig.js
* morebits[ResourceLoader|dependencies=mediawiki.user,mediawiki.util,mediawiki.Title,jquery.ui,jquery.tipsy|hidden]|morebits.js|morebits.css
* morebits[ResourceLoader|dependencies=mediawiki.user,mediawiki.util,mediawiki.Title,jquery.ui|hidden]|morebits.js|morebits.css
* Twinkle-pagestyles[hidden|skins=vector]|Twinkle-pagestyles.css
* select2[ResourceLoader|hidden]|select2.min.js|select2.min.css
18 changes: 9 additions & 9 deletions morebits.css
Original file line number Diff line number Diff line change
Expand Up @@ -114,18 +114,18 @@ form.quickform .quickformSubgroup
margin-left: 3em;
}

form.quickform .tooltipButtonContainer
/* The tooltip button and the content itself */
form.quickform .morebits-tooltipButton
{
position: relative;
width: 100%;
}

form.quickform .tooltipButton
{
color: blue;
color: mediumblue;
font-weight: bold;
cursor: help;
padding: .2em;
padding: .3em;
}
.morebits-ui-tooltip
{
padding: 4px 6px 4px 6px;
font-size: 13px;
}


Expand Down
31 changes: 14 additions & 17 deletions morebits.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,11 @@
* Dependencies:
* - The whole thing relies on jQuery. But most wikis should provide this by default.
* - Morebits.quickForm, Morebits.simpleWindow, and Morebits.status rely on the "morebits.css" file for their styling.
* - Morebits.simpleWindow relies on jquery UI Dialog (from ResourceLoader module name 'jquery.ui').
* - Morebits.quickForm tooltips rely on Tipsy (ResourceLoader module name 'jquery.tipsy').
* For external installations, Tipsy is available at [http://onehackoranother.com/projects/jquery/tipsy].
* - Morebits.simpleWindow and Morebits.quickForm tooltips rely on jquery UI Dialog (from ResourceLoader module name 'jquery.ui').
* - To create a gadget based on morebits.js, use this syntax in MediaWiki:Gadgets-definition:
* * GadgetName[ResourceLoader|dependencies=mediawiki.user,mediawiki.util,mediawiki.Title,jquery.ui,jquery.tipsy]|morebits.js|morebits.css|GadgetName.js
* * GadgetName[ResourceLoader|dependencies=mediawiki.user,mediawiki.util,mediawiki.Title,jquery.ui]|morebits.js|morebits.css|GadgetName.js
* - Alternatively, you can configure morebits.js as a hidden gadget in MediaWiki:Gadgets-definition:
* * morebits[ResourceLoader|dependencies=mediawiki.user,mediawiki.util,mediawiki.Title,jquery.ui,jquery.tipsy|hidden]|morebits.js|morebits.css
* * morebits[ResourceLoader|dependencies=mediawiki.user,mediawiki.util,mediawiki.Title,jquery.ui|hidden]|morebits.js|morebits.css
* and then load ext.gadget.morebits as one of the dependencies for the new gadget
*
* All the stuff here works on all browsers for which MediaWiki provides JavaScript support.
Expand Down Expand Up @@ -707,21 +705,20 @@ Morebits.quickForm.element.autoNWSW = function() {
};

/**
* Create a jquery.tipsy-based tooltip.
* @requires jquery.tipsy
* Create a jquery.ui-based tooltip.
* @requires jquery.ui
* @param {HTMLElement} node - the HTML element beside which a tooltip is to be generated
* @param {Object} data - tooltip-related configuration data
*/
Morebits.quickForm.element.generateTooltip = function QuickFormElementGenerateTooltip(node, data) {
$('<span/>', {
'class': 'ui-icon ui-icon-help ui-icon-inline morebits-tooltip'
}).appendTo(node).tipsy({
'fallback': data.tooltip,
'fade': true,
'gravity': data.type === 'input' || data.type === 'select' ?
Morebits.quickForm.element.autoNWSW : $.fn.tipsy.autoWE,
'html': true,
'delayOut': 250
var tooltipButton = node.appendChild(document.createElement('span'));
tooltipButton.className = 'morebits-tooltipButton';
tooltipButton.title = data.tooltip; // Provides the content for jQuery UI
tooltipButton.appendChild(document.createTextNode('?'));
$(tooltipButton).tooltip({
position: { my: 'left top', at: 'center bottom', collision: 'flipfit' },
// Deprecated in UI 1.12, but MW stuck on 1.9.2 indefinitely; see #398 and T71386
tooltipClass: 'morebits-ui-tooltip'
});
};

Expand Down Expand Up @@ -926,7 +923,7 @@ Morebits.quickForm.setElementVisibility = function QuickFormSetElementVisibility
* @param {boolean} [visibility] Skip this to toggle visibility
*/
Morebits.quickForm.setElementTooltipVisibility = function QuickFormSetElementTooltipVisibility(element, visibility) {
$(Morebits.quickForm.getElementContainer(element)).find('.morebits-tooltip').toggle(visibility);
$(Morebits.quickForm.getElementContainer(element)).find('.morebits-tooltipButton').toggle(visibility);
};


Expand Down