Merge pull request #1806 from SemanticMediaWiki/browse

Use prototype instead of ES6 class construct, refs #1756

i18n/en.json

@@ -229,6 +229,7 @@
 	"smw_browse_no_incoming": "No properties link to this page.",
 	"smw-browse-subject-invalid": "The subject validation returned with a \"$1\" error.",
 	"smw-browse-api-subject-serialization-invalid" : "The subject has an invalid serialization format.",
+	"smw-browse-js-disabled": "It is suspected that JavaScript is disabled or not available and we recommended to use a browser where this is supported. Other options maybe discussed on the [https://www.semantic-mediawiki.org/wiki/Help:$smwgBrowseByApi $smwgBrowseByApi] settings page.",
 	"smw_inverse_label_default": "$1 of",
 	"smw_inverse_label_property": "Inverse property label",
 	"pageproperty": "Page property search",

res/smw/special/ext.smw.special.browse.js

@@ -6,36 +6,47 @@
  */
 
 /*global jQuery, mediaWiki, mw, smw */
+( function ( $, mw ) {
+
+	'use strict';
 
-// (ES6), see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
-class Browse {
+	// http://monc.se/kitchen/152/avoiding-flickering-in-jquery
+	// DOM ready is too late and will cause flashing of content while this
+	// method will hide the element immediately when JS is available
+	document.write( '<style type="text/css">.smw-nojs{display:none}</style>' );
 
 	/**
-	 * @since 2.5
+	 * @since  2.5.0
 	 * @constructor
 	 *
-	 * @param {Object} api
+	 * @param {Object} mwApi
+	 * @param {Object} util
+	 *
+	 * @return {this}
 	 */
-	constructor ( api ) {
-		this.VERSION = "2.5";
-		this.api = api;
-	}
+	var browse = function ( mwApi ) {
+
+		this.VERSION = "2.5.0";
+		this.api = mwApi;
+
+		return this;
+	};
 
 	/**
 	 * @since 2.5
 	 * @method
 	 *
 	 * @param {Object} context
 	 */
-	setContext ( context ) {
+	browse.prototype.setContext = function( context ) {
 		this.context = context;
 	}
 
 	/**
 	 * @since 2.5
 	 * @method
 	 */
-	doApiRequest () {
+	browse.prototype.doApiRequest = function() {
 
 		var self = this,
 			subject = self.context.data( 'subject' ),
@@ -76,7 +87,7 @@ class Browse {
 	 *
 	 * @param {string} error
 	 */
-	reportError ( error ) {
+	browse.prototype.reportError = function( error ) {
 		this.context.find( '.smwb-status' ).append( error ).addClass( 'smw-callout smw-callout-error' );
 	}
 
@@ -86,17 +97,12 @@ class Browse {
 	 *
 	 * @param {string} content
 	 */
-	appendContent ( content ) {
+	browse.prototype.appendContent = function( content ) {
 
 		var self = this;
 
 		self.context.find( '.smwb-content' ).replaceWith( content );
 
-		// Re-apply JS-component instances on new content
-		mw.loader.using( 'ext.smw.tooltips' ).done( function () {
-			smw.Factory.newTooltip().initFromContext( self.context );
-		} );
-
 		mw.loader.using( 'ext.smw.browse' ).done( function () {
 			self.context.find( '#smwb-page-search' ).smwAutocomplete( { search: 'page', namespace: 0 } );
 		} );
@@ -105,26 +111,22 @@ class Browse {
 			self.context.find( '.smwb-modules' ).data( 'modules' )
 		);
 
+		// Re-apply JS-component instances on new content
 		// Trigger an event
 		$( document ).trigger( 'SMW::Browse::ApiParseComplete' , {
 			'context': self.context
 		} );
 	}
-}
-
-( function ( $, mw ) {
-
-	'use strict';
 
-	var browse = new Browse(
+	var instance = new browse(
 		new mw.Api()
 	);
 
 	$( document ).ready( function() {
 
 		$( '.smwb-container' ).each( function() {
-			browse.setContext( $( this ) );
-			browse.doApiRequest();
+			instance.setContext( $( this ) );
+			instance.doApiRequest();
 		} );
 
 		$( '#smwb-page-search' ).smwAutocomplete( { search: 'page', namespace: 0 } );

res/smw/util/ext.smw.util.tooltip.js

@@ -216,17 +216,22 @@
 					eventPrefs = mw.user.options.get( 'smw-prefs-tooltip-option-click' ) ? 'click' : undefined,
 					state      = $this.data( 'state' ),
 					title      = $this.data( 'title' ),
+					content    = $this.data( 'content' ),
 					type       = $this.data( 'type' );
 
 				// Assign sub-class
 				// Inline mostly used for special properties and quantity conversions
 				// Persistent extends interactions for service links, info, and error messages
 				$this.addClass( state === 'inline' ? 'smwttinline' : 'smwttpersist' );
 
+				// Remove title content which is supposed to be used when nojs is enabled
+				// and the "real" tooltip cannot show the ccontent
+				$this.removeAttr( "title" );
+
 				// Call instance
 				self.show( {
 					context: $this,
-					content: $this.find( '.smwttcontent' ),
+					content: content !== undefined ? content : $this.find( '.smwttcontent' ),
 					title  : title !== undefined ? title : mw.msg( self.getTitleMsg( type ) ),
 					event  : eventPrefs,
 					button : type === 'warning' || state === 'inline' ? false /* false = no close button */ : true
@@ -245,6 +250,22 @@
 		this.render( context.find( '.smw-highlighter' ) );
 	};
 
+	/**
+	 * @since 2.5
+	 * @method
+	 */
+	smw.util.tooltip.prototype.registerEventListeners = function() {
+
+		var self = this;
+
+		// Listen to the Special:Browse event
+		$ ( document ).on( 'SMW::Browse::ApiParseComplete', function( event, opts ) {
+			 self.initFromContext( opts.context );
+		} );
+
+		return self;
+	};
+
 	/**
 	 * Factory
 	 * @since 2.5
@@ -255,15 +276,16 @@
 		}
 	}
 
+	// Register addEventListeners early on
+	var instance = Factory.newTooltip().registerEventListeners();
+
 	/**
 	 * Implementation of a tooltip instance
 	 * @since 1.8
 	 * @ignore
 	 */
 	$( document ).ready( function() {
-		Factory.newTooltip().render(
-			$( '.smw-highlighter' )
-		);
+		instance.initFromContext( $( this ) );
 	} );
 
 	smw.Factory = smw.Factory || {};

src/MediaWiki/Specials/SpecialBrowse.php

@@ -128,6 +128,13 @@ private function getHtml( $webRequest ) {
 				'div',
 				array(
 					'class' => 'smwb-status'
+				),
+					Html::rawElement(
+					'div',
+					array(
+						'class' => 'smw-nojs smw-callout smw-callout-error',
+					),
+					Message::get( 'smw-browse-js-disabled', Message::PARSE )
 				)
 			) . Html::rawElement(
 				'div',
@@ -191,7 +198,7 @@ private function addExternalHelpLinks() {
 		if ( $this->getRequest()->getVal( 'printable' ) === 'yes' ) {
 			return null;
 		}
-		
+
 		// FIXME with SMW 3.0, allow to be used with MW 1.25-
 		if ( !method_exists( $this, 'addHelpLink' ) ) {
 			return null;