Mount standalone API via new Wikilookup global (#10)

* This starts the decoupling process by separating the jQuery plugin from the standalone Wikilookup API. An alias is kept for compatibility (verified by unit tests which I intentionally left unmodified in this commit). * Update ESLint config to only whitelist "jQuery", and not "$". This project uses file closures to map from one to the other, which is presumably to support WordPress themes that might have other legacy libraries occupying the $ global (e.g. via jQuery.noConflict etc). Enforce this to avoid mistakes from slipping in by only whitelisting the one we want to use globally. No violations were found by ESLint :) * Update some of the public-facing titles to refer to the library as Wikilookup instead of jQuery.wikilookup, jQuery.Wikilookup or $.wikilookup. Ref #6.
mooeypoo · Apr 11, 2020 · cf4bd5c · cf4bd5c
1 parent d7e76e8
commit cf4bd5c
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 61 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -6,7 +6,7 @@
         "browser": true
     },
     "globals": {
-        "$": false,
-        "jQuery": false
+        "jQuery": false,
+        "Wikilookup": false
     }
 }
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
-# jQuery.wikilookup
-jQuery.wikilookup is a configurable jQuery extension that enables you to add quick information from Wikipedia and other wikis.
+# Wikilookup
+Wikilookup is a JavaScript library that enables you to add quick information from Wikipedia and other wikis.
 
 **Are you looking for the Wordpress plugin? [It's here!](https://github.com/mooeypoo/wikilookup-wordpress)**
 
 ## Use the plugin
-To use jQuery.wikilookup, include it in your page:
+To use Wikilookup, include it in your page:
 ```
 	<script src="../dist/jquery.wikilookup-1.0.0.js"></script>
 	<link rel="stylesheet" href="jquery.wikilookup-1.0.0.min.css">
@@ -21,7 +21,7 @@ You can change that property by providing an alternative selector:
 
 ## Showing the data
 
-jQuery.wikilookup manages the operation of fetching the data and creating a display, but it is agnostic as to where that display is placed. Deciding where the results appear is up to you.
+Wikilookup manages the operation of fetching the data and creating a display, but it is agnostic as to where that display is placed. Deciding where the results appear is up to you.
 
 The view for each lookup word is stored in the `data-wl-widget` data attribute of that node. The presentation jQuery object is stored in the `$element` property of that object. You can call for it and display it wherever you want.
 
@@ -31,7 +31,7 @@ See the demos for an example.
 For information about the configuration, [visit the demo page](https://mooeypoo.github.io/jquery.wikilookup/).
 
 ## Contribute and help!
-jQuery.Wikilookup is an open source project. Please feel free to submit issues and/or pull requests.
+Wikilookup is an open source project. Please feel free to submit issues and/or pull requests.
 
 ## Changelog
 See [CHANGELOG](CHANGELOG.md)

diff --git a/demo/index.html b/demo/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
 <head>
 	<meta charset="UTF-8">
-	<title>$.wikilookup Demo</title>
+	<title>Wikilookup Demo</title>
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
 	<script src="jquery-3.4.1.min.js"></script>
 	<script src="jquery.wikilookup.min.js"></script>
@@ -29,7 +29,7 @@
 </head>
 <body>
 	<div class="wl-header">
-		<h1>jQuery Wikilookup</h1>
+		<h1>Wikilookup</h1>
 		<h2>Add the power of Wikipedia to your website</h2>
 	</div>
 	<div class="wl-menu">

diff --git a/demo/popup-ooui.html b/demo/popup-ooui.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
 <head>
 	<meta charset="UTF-8">
-	<title>$.wikilookup Demo</title>
+	<title>Wikilookup Demo</title>
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
 	<script src="jquery-3.4.1.min.js"></script>
 	<script src="jquery.wikilookup.min.js"></script>
@@ -22,7 +22,7 @@
 </head>
 <body>
 	<div class="wl-header">
-		<h1>jQuery Wikilookup</h1>
+		<h1>Wikilookup</h1>
 		<h2>Add the power of Wikipedia to your website</h2>
 	</div>
 	<div class="wl-menu">
@@ -36,7 +36,7 @@ <h2>Add the power of Wikipedia to your website</h2>
 
 	<div class="wl-content">
 		<div id="lookup">
-			<p>This is a demo for the popup implementation of <code class="language-js">jQuery.wikilookup</code>. This is the implementation used for the WordPress plugin.</p>
+			<p>This is a demo of the Wikilookup for OOUI adapter.</p>
 			<p>There are several popups you can go through to see how they render:</p>
 			<ul>
 				<li><span data-wikilookup data-demo='enwiki' data-wl-title="Mountain">Content from English Wikipedia</span></li>

diff --git a/demo/popup.html b/demo/popup.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
 <head>
 	<meta charset="UTF-8">
-	<title>$.wikilookup Demo</title>
+	<title>Wikilookup Demo</title>
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
 	<script src="jquery-3.4.1.min.js"></script>
 	<script src="jquery.wikilookup.min.js"></script>
@@ -24,7 +24,7 @@
 </head>
 <body>
 	<div class="wl-header">
-		<h1>jQuery Wikilookup</h1>
+		<h1>Wikilookup for Bootstrap</h1>
 		<h2>Add the power of Wikipedia to your website</h2>
 	</div>
 	<div class="wl-menu">
@@ -38,7 +38,7 @@ <h2>Add the power of Wikipedia to your website</h2>
 
 	<div class="wl-content">
 		<div id="lookup">
-			<p>This is a demo for the popup implementation of <code class="language-js">jQuery.wikilookup</code>. This is the implementation used for the WordPress plugin.</p>
+			<p>This is a demo of the Wikilookup for Bootstrap adapter. This is the implementation used for the WordPress plugin.</p>
 			<p>There are several popups you can go through to see how they render:</p>
 			<ul>
 				<li><span data-wikilookup data-demo='enwiki' data-wl-title="Mountain">Content from English Wikipedia</span></li>

diff --git a/demo/visual.html b/demo/visual.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
 <head>
 	<meta charset="UTF-8">
-	<title>$.wikilookup Demo</title>
+	<title>Wikilookup Demo</title>
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
 	<script src="jquery-3.4.1.min.js"></script>
 	<script src="jquery.wikilookup.min.js"></script>
@@ -133,8 +133,8 @@ <h2>Waiting to fetch</h2>
 	</script>
 	<script>
 	$( document ).ready( function () {
-		var pendingWidget = new $.wikilookup.PageInfoWidget(),
-			dataWidget = new $.wikilookup.PageInfoWidget(),
+		var pendingWidget = new Wikilookup.PageInfoWidget(),
+			dataWidget = new Wikilookup.PageInfoWidget(),
 			offlineData = {
 				title: 'Physics',
 				content: 'Physics (from Ancient Greek: \u03c6\u03c5\u03c3\u03b9\u03ba\u03ae (\u1f10\u03c0\u03b9\u03c3\u03c4\u03ae\u03bc\u03b7), romanized: physik\u1e17 (epist\u1e17m\u0113), lit. \'knowledge of nature\', from \u03c6\u03cd\u03c3\u03b9\u03c2 ph\u00fdsis \"nature\") is the natural science that studies matter, its motion and behavior through space and time, and that studies the related entities of energy and force. Physics is one of the most fundamental scientific disciplines, and its main goal is to understand how the universe behaves.Physics is one of the oldest academic disciplines and, through its inclusion of astronomy, perhaps the oldest. Over much of the past two millennia, physics, chemistry, biology, and certain branches of mathematics, were a part of natural philosophy, but during the Scientific Revolution in the 17th century these natural sciences emerged as unique research endeavors in their own right. Physics intersects with many interdisciplinary areas of research, such as biophysics and quantum chemistry, and the boundaries of physics are not rigidly defined. New ideas in physics often explain the fundamental mechanisms studied by other sciences and suggest new avenues of research in academic disciplines such as mathematics and philosophy.\nAdvances in physics often enable advances in new technologies. For example, advances in the understanding of electromagnetism, solid-state physics, and nuclear physics led directly to the development of new products that have dramatically transformed modern-day society, such as television, computers, domestic appliances, and nuclear weapons; advances in thermodynamics led to the development of industrialization; and advances in mechanics inspired the development of calculus.',

diff --git a/src/js/Api.js b/src/js/Api.js
@@ -2,7 +2,7 @@
 	/**
 	 * API class to fetch page information from the API, either by mediawiki api or restbase
 	 *
-	 * @class $.wikilookup.Api
+	 * @class Wikilookup.Api
 	 *
 	 * @constructor
 	 * @param {Object} [config] Configuration options
@@ -149,7 +149,7 @@
 		}
 
 		// Use the base mediawiki API
-		pages = $.wikilookup.tools.getPropValue( apiResult, [ 'query', 'pages' ] );
+		pages = Wikilookup.tools.getPropValue( apiResult, [ 'query', 'pages' ] );
 		data = pages[ Object.keys( pages )[ 0 ] ];
 
 		if ( !data ) {
@@ -260,5 +260,5 @@
 	};
 
 	// Export to namespace
-	$.wikilookup.Api = Api;
+	Wikilookup.Api = Api;
 }( jQuery ) );
diff --git a/src/js/PageInfoWidget.js b/src/js/PageInfoWidget.js
@@ -2,7 +2,7 @@
 	/**
 	 * Page info widget
 	 *
-	 * @class $.wikilookup.PageInfoWidget
+	 * @class Wikilookup.PageInfoWidget
 	 *
 	 * @constructor
 	 * @param {Object} config Configuration options
@@ -15,7 +15,7 @@
 	 *    links back to the page's origins
 	 * @param {boolean} [dark] Toggle presentation in dark mode
 	 */
-	var PageInfoWidget = function ( config ) {
+	function PageInfoWidget( config ) {
 		config = config || {};
 
 		this.$element = config.$element || $( '<div>' );
@@ -46,7 +46,7 @@
 				this.$view,
 				this.$creditBar
 			);
-	};
+	}
 
 	/**
 	 * Toggle the widget to present in dark or light mode
@@ -251,5 +251,5 @@
 	};
 
 	// Export to namespace
-	$.wikilookup.PageInfoWidget = PageInfoWidget;
+	Wikilookup.PageInfoWidget = PageInfoWidget;
 }( jQuery ) );
diff --git a/src/js/Processor.js b/src/js/Processor.js
@@ -35,7 +35,7 @@
 	 *    links back to the page's origins
 	 * @param {boolean} [dark] Set the widget to dark mode
 	 */
-	var Processor = function ( $container, config ) {
+	function Processor( $container, config ) {
 		config = config || {};
 
 		this.$container = $container;
@@ -60,7 +60,7 @@
 		if ( config.prefetch ) {
 			this.updateAllNodes();
 		}
-	};
+	}
 
 	/**
 	 * Go over all nodes and trigger their update process.
@@ -94,7 +94,7 @@
 			$( this ).attr( 'data-wl-title', pageName.trim() );
 
 			// Create a view object and store it in a reference
-			widget = new $.wikilookup.PageInfoWidget( {
+			widget = new Wikilookup.PageInfoWidget( {
 				messages: self.messages,
 				hideThumb: self.hideThumb,
 				dark: self.dark
@@ -109,7 +109,7 @@
 	 * the default source.
 	 *
 	 * @param  {string} sourceName Requested source name
-	 * @return {$.wikilookup.Api} Source
+	 * @return {Wikilookup.Api} Source
 	 */
 	Processor.prototype.getSource = function ( sourceName ) {
 		sourceName = sourceName || 'default';
@@ -134,11 +134,11 @@
 
 		// Start with the default (this can be overridden, which is fine)
 		this.sources = {
-			'default': new $.wikilookup.Api()
+			'default': new Wikilookup.Api()
 		};
 
 		for ( def in sources ) {
-			this.sources[ def ] = new $.wikilookup.Api( sources[ def ] );
+			this.sources[ def ] = new Wikilookup.Api( sources[ def ] );
 		}
 	};
 
@@ -265,5 +265,5 @@
 	};
 
 	// Export to namespace
-	$.wikilookup.Processor = Processor;
+	Wikilookup.Processor = Processor;
 }( jQuery ) );
diff --git a/src/js/namespace.js b/src/js/namespace.js
@@ -1,5 +1,3 @@
-( function ( $ ) {
-	if ( !$.wikilookup ) {
-		$.wikilookup = {};
-	}
-}( jQuery ) );
+// Support: Wikilookup 0.2.3 and earlier
+// Also expose Wikilookup via $.wikilookup
+jQuery.wikilookup = window.Wikilookup = {};
diff --git a/src/js/tools.js b/src/js/tools.js
@@ -1,24 +1,22 @@
-( function ( $ ) {
-	$.wikilookup.tools = {
-		/**
-		 * Get the value of a nested property in an object,
-		 * if it exists, safely. If, at any point, the chain
-		 * breaks, the method safely stops and returns undefined.
-		 *
-		 * @param  {Object} obj Object to fetch the property from
-		 * @param  {string[]} props An array of nested properties
-		 * @return {Mixed} Value of the nested property chain
-		 */
-		getPropValue: function ( obj, props ) {
-			var val = obj || {},
-				counter = 0;
+Wikilookup.tools = {
+	/**
+	 * Get the value of a nested property in an object,
+	 * if it exists, safely. If, at any point, the chain
+	 * breaks, the method safely stops and returns undefined.
+	 *
+	 * @param  {Object} obj Object to fetch the property from
+	 * @param  {string[]} props An array of nested properties
+	 * @return {Mixed} Value of the nested property chain
+	 */
+	getPropValue: function ( obj, props ) {
+		var val = obj || {},
+			counter = 0;
 
-			do {
-				val = val[ props[ counter ] ];
-				counter++;
-			} while ( val && counter < props.length );
+		do {
+			val = val[ props[ counter ] ];
+			counter++;
+		} while ( val && counter < props.length );
 
-			return val;
-		}
-	};
-}( jQuery ) );
+		return val;
+	}
+};
diff --git a/src/js/wikilookup.js b/src/js/wikilookup.js
@@ -3,10 +3,10 @@
 	 * jQuery plugin for wikilookup
 	 *
 	 * @param {Object} [options] Configuration options
-	 *  See $.wikilookup.Processor for configuration options
+	 *  See Wikilookup.Processor for configuration options
 	 */
 	$.fn.wikilookup = function ( options ) {
-		var processor = new $.wikilookup.Processor( $( this ), options );
+		var processor = new Wikilookup.Processor( $( this ), options );
 
 		// Store instance
 		$( this ).data( 'wl-processor', processor );