Mwjames has uploaded a new change for review. https://gerrit.wikimedia.org/r/65353
Change subject: Clean-up smw.util.tooltip constructor, improve jsduck, and add test ...................................................................... Clean-up smw.util.tooltip constructor, improve jsduck, and add test Change-Id: I4139f787a27d7a0d5d5a3e587726e25f6a9886bd --- M resources/smw/util/ext.smw.util.tooltip.css M resources/smw/util/ext.smw.util.tooltip.js M tests/qunit/smw/util/ext.smw.util.tooltip.test.js 3 files changed, 140 insertions(+), 147 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/SemanticMediaWiki refs/changes/53/65353/1 diff --git a/resources/smw/util/ext.smw.util.tooltip.css b/resources/smw/util/ext.smw.util.tooltip.css index ded46da..dcec955 100644 --- a/resources/smw/util/ext.smw.util.tooltip.css +++ b/resources/smw/util/ext.smw.util.tooltip.css @@ -1,4 +1,4 @@ -/** +/*! * This file is part of the Semantic MediaWiki Tooltip/Highlighter module * @see https://semantic-mediawiki.org/ * @@ -13,106 +13,74 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * - * You should have received a copy of the GNU General Public License - * along with this program; if not, write to the Free Software - * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + * http://www.gnu.org/copyleft/gpl.html * * @since 1.8 * * @file - * @ignore - * * @ingroup SMW * * @licence GNU GPL v2+ * @author mwjames */ -/** - * Tooltips, style for content of the bubble - * @ignore - */ +/* Tooltips, style for content of the bubble */ div.smwtt { color: #000000; } -/** - * Tooltips, show persistent tooltips for non-JavaScript clients - * @ignore - */ +/* Tooltips, show persistent tooltips for non-JavaScript clients */ span.smwttpersist span.smwttcontent { color: #888888; font-style: italic; font-size: 90%; } -/** - * Tooltips, hide inline tooltips for non-JavaScript clients - * @ignore - */ +/* Tooltips, hide inline tooltips for non-JavaScript clients */ span.smwttinline span.smwttcontent { display: none; speak: none; } -/** - * Tooltips, style for image anchor for persistent tooltips - * @ignore - */ +/* Tooltips, style for image anchor for persistent tooltips */ span.smwtticon { display: none; } -/** - * Tooltips, colored anchors? - * @ignore - */ +/* Tooltips, colored anchors? */ span.smwttactivepersist { cursor: help; color: #0000C8; } -/** - * Tooltips, colored anchors - * @ignore - */ +/* Tooltips, colored anchors */ span.smwttactiveinline { color: #BB7700; text-decoration: none; } -/** - * Tooltips, images for tooltip icons - * @ignore - */ +/* Tooltips, images for tooltip icons */ img.smwttimg { padding-right: 5px; padding-left: 4px; } -/** - * New tooltip content is always hidden - * @ignore - */ +/* New tooltip content is always hidden */ .smwttcontent { display:none; } -/** - * New tooltip icon defaults - * @ignore - */ +/* New tooltip icon defaults */ .smwtticon { padding:14px 12px 0 0; white-space:nowrap; margin-bottom: -1px; } -/** - * New tooltip, Individual assigned icons ( inline-block is important - * because the icon <span> is empty) - * @ignore - */ +/* New tooltip, Individual assigned icons ( inline-block is important because the icon <span> is empty) */ .smwtticon.info { display:inline-block; /* @embed */ background: url(../../images/info.png) no-repeat left bottom; diff --git a/resources/smw/util/ext.smw.util.tooltip.js b/resources/smw/util/ext.smw.util.tooltip.js index f533730..4261607 100644 --- a/resources/smw/util/ext.smw.util.tooltip.js +++ b/resources/smw/util/ext.smw.util.tooltip.js @@ -1,4 +1,4 @@ -/** +/*! * This file is part of the Semantic MediaWiki Tooltip/Highlighter module * @see https://semantic-mediawiki.org/wiki/Help:Tooltip * @@ -13,16 +13,15 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * - * You should have received a copy of the GNU General Public License - * along with this program; if not, write to the Free Software - * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + * http://www.gnu.org/copyleft/gpl.html * * @since 1.8 - * @revision 0.3.2 + * @revision 0.3.4 * * @file - * @ignore - * * @ingroup SMW * * @licence GNU GPL v2+ @@ -32,7 +31,7 @@ 'use strict'; /** - * Helper variable + * Support variable * @ignore */ var h = mw.html; @@ -41,21 +40,38 @@ * Inheritance class for the smw.util constructor * * @since 1.9 - * * @class - * @abstract */ smw.util = smw.util || {}; /** - * Default options + * Class constructor * - * viewport => $(window) keeps the tooltip on-screen at all times - * 'top center' + 'bottom center' => Position the tooltip above the link - * solo => true shows only one tooltip at a time + * @since 1.8 * + * @class + * @constructor */ - var defaults = { + smw.util.tooltip = function( settings ) { + $.extend( this, this.defaults, settings ); + }; + + /* Public methods */ + + smw.util.tooltip.prototype = { + + /** + * Default options + * + * viewport => $(window) keeps the tooltip on-screen at all times + * 'top center' + 'bottom center' => Position the tooltip above the link + * solo => true shows only one tooltip at a time + * + * @since 1.8 + * + * @property + */ + defaults: { qtip: { position: { viewport: $( window ), @@ -79,73 +95,54 @@ contentClass: 'smwttcontent', contextClass: 'smwttpersist' } - }; - - /** - * Build a html element - * - * @var object - * @return string - */ - function _getHTMLElement( options ){ - return h.element( 'span', { 'class' : options.contextClass, 'data-type': options.type }, - new h.Raw( - h.element( 'span', { 'class' : options.targetClass }, null ) + - h.element( 'span', { 'class' : options.contentClass }, new h.Raw( options.content ) ) ) - ); - } - - /** - * Get title message - * - * @var type - * @return string - */ - function _getTitle( type ){ - switch( type ){ - case 'quantity': return 'smw-ui-tooltip-title-quantity'; - case 'property': return 'smw-ui-tooltip-title-property'; - case 'service' : return 'smw-ui-tooltip-title-service'; - case 'warning' : return 'smw-ui-tooltip-title-warning'; - default: return 'smw-ui-tooltip-title-info'; - } - } - - /** - * Class constructor - * - * @since 1.8 - * - * @class - * @constructor - * @extends smw.util - */ - smw.util.tooltip = function( settings ) { - $.extend( this, defaults, settings ); - }; - - /* Public methods */ - - smw.util.tooltip.prototype = { + }, /** - * Init method initializes the qtip2 instance + * Get title message + * + * @since 1.8 + * + * @param {string} key + * + * @return string + */ + getTitleMsg: function( key ){ + switch( key ){ + case 'quantity': return 'smw-ui-tooltip-title-quantity'; + case 'property': return 'smw-ui-tooltip-title-property'; + case 'service' : return 'smw-ui-tooltip-title-service'; + case 'warning' : return 'smw-ui-tooltip-title-warning'; + default: return 'smw-ui-tooltip-title-info'; + } + }, + + /** + * Initializes the qtip2 instance * * Example: * tooltip = new smw.util.tooltip(); - * tooltip.show ( { title: ..., type: ..., content: ..., button: ..., event: ... } ); + * tooltip.show ( { + * title: ..., + * type: ..., + * content: ..., + * button: ..., + * event: ... + * } ); * * @since 1.8 + * + * @param {Object} options */ show: function( options ) { + var self = this; // Check context if ( options.context === undefined ){ - return $.error( 'smw.util.tooltip show method is missing a context object' ); + return $.error( 'smw.util.tooltip.show() is missing a context object' ); } return options.context.each( function() { - $( this ).qtip( $.extend( {}, defaults.qtip, { + $( this ).qtip( $.extend( {}, self.defaults.qtip, { hide: options.button ? 'unfocus' : undefined, show: { event: options.event, solo: true }, content: { @@ -164,26 +161,39 @@ * with immediate instantiation * * @since 1.8 + * + * @param {Object} options */ - add : function( options ) { + add: function( options ) { + var self = this; + // Defaults - var option = $.extend( true, defaults.classes, options ); + var option = $.extend( true, self.defaults.classes, options ); // Check context if ( option.context === undefined ){ - return $.error( 'smw.util.tooltip add method is missing a context object' ); + return $.error( 'smw.util.tooltip.add() is missing a context object' ); + } + + // Build a html element + function buildHtml( options ){ + return h.element( 'span', { 'class' : options.contextClass, 'data-type': options.type }, + new h.Raw( + h.element( 'span', { 'class' : options.targetClass }, null ) + + h.element( 'span', { 'class' : options.contentClass }, new h.Raw( options.content ) ) ) + ); } // Assign context var $this = option.context; // Append element - $this.prepend( _getHTMLElement( option ) ); + $this.prepend( buildHtml( option ) ); // Ensure that the right context is used as hoover/click element // The class [] selector is not the fastest but the safest otherwise if // spaces are used in the class definition it will break the selection - this.show.call( this, + self.show.call( this, $.extend( true, options, { context: $this.find( "[class='" + option.targetClass + "']" ), content: $this.find( "[class='" + option.contentClass + "']" ) @@ -199,10 +209,10 @@ */ $( document ).ready( function() { - // Class reference - var tooltip = new smw.util.tooltip(); - $( '.smw-highlighter' ).each( function() { + + // Class reference + var tooltip = new smw.util.tooltip(); // Get configuration var $this = $( this ), @@ -220,7 +230,7 @@ tooltip.show( { context: $this, content: $this.find( '.smwttcontent' ), - title : title !== undefined ? title : mw.msg( _getTitle( type ) ), + title : title !== undefined ? title : mw.msg( tooltip.getTitleMsg( type ) ), event : eventPrefs, button : type === 'warning' || state === 'inline' ? false /* false = no close button */ : true } ); diff --git a/tests/qunit/smw/util/ext.smw.util.tooltip.test.js b/tests/qunit/smw/util/ext.smw.util.tooltip.test.js index c80e182..d590a13 100644 --- a/tests/qunit/smw/util/ext.smw.util.tooltip.test.js +++ b/tests/qunit/smw/util/ext.smw.util.tooltip.test.js @@ -1,4 +1,4 @@ -/** +/*! * This file is part of the Semantic MediaWiki QUnit test suite * @see https://semantic-mediawiki.org/wiki/QUnit * @@ -13,44 +13,34 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * - * You should have received a copy of the GNU General Public License - * along with this program; if not, write to the Free Software - * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + * http://www.gnu.org/copyleft/gpl.html * * @since 1.9 * * @file - * @ignore - * * @ingroup SMW * @ingroup Test * * @licence GNU GPL v2+ * @author mwjames */ - -/** - * Tests methods provided by ext.smw.util.tooltip.js - * @ignore - */ ( function ( $, mw, smw ) { 'use strict'; QUnit.module( 'ext.smw.util.tooltip', QUnit.newMwEnvironment() ); - - var pass = 'Passes because '; /** * Test initialization and accessibility * * @since: 1.9 */ - QUnit.test( 'init', 1, function ( assert ) { - var tooltip; + QUnit.test( 'instance', 1, function ( assert ) { + var tooltip = new smw.util.tooltip(); - tooltip = new smw.util.tooltip(); - - assert.ok( tooltip instanceof Object, pass + 'the smw.util.tooltip instance was accessible' ); + assert.ok( tooltip instanceof Object, 'smw.util.tooltip instance was accessible' ); } ); @@ -59,13 +49,11 @@ * * @since: 1.9 */ - QUnit.test( '.show()', 2, function ( assert ) { - var tooltip; + QUnit.test( 'show', 2, function ( assert ) { + var tooltip = new smw.util.tooltip(); var fixture = $( '#qunit-fixture' ); - tooltip = new smw.util.tooltip(); - - assert.equal( $.type( tooltip.show ), 'function', pass + '.show() was accessible' ); + assert.equal( $.type( tooltip.show ), 'function', '.show() was accessible' ); tooltip.show( { context: fixture, @@ -74,7 +62,34 @@ button: false } ); - assert.ok( fixture.data( 'hasqtip' ), pass + '.data( "hasqtip" ) was accessible' ); + assert.ok( fixture.data( 'hasqtip' ), '.data( "hasqtip" ) was accessible' ); + + } ); + + /** + * Test .add() function + * + * @since: 1.9 + */ + QUnit.test( 'add', 3, function ( assert ) { + var tooltip = new smw.util.tooltip(); + var fixture = $( '#qunit-fixture' ); + + assert.equal( $.type( tooltip.add ), 'function', '.add() was accessible' ); + + tooltip.add( { + contextClass: 'test', + contentClass: 'test-content', + targetClass : 'test-target', + context: fixture, + content: 'Test 2', + title: 'Test 2', + type: 'info', + button: true + } ); + + assert.ok( fixture.find( '.test' ), 'created context class' ); + assert.ok( fixture.data( 'hasqtip' ), '.data( "hasqtip" ) was accessible' ); } ); -- To view, visit https://gerrit.wikimedia.org/r/65353 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I4139f787a27d7a0d5d5a3e587726e25f6a9886bd Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/SemanticMediaWiki Gerrit-Branch: master Gerrit-Owner: Mwjames <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
