Jdrewniak has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/366849 )

Change subject: Combining API calls in Explore Similar widget
......................................................................

Combining API calls in Explore Similar widget

Combing categories and langlinks API calls
for Explore similar widget and assuring that
API call to morelike is cacheable and uses same
format as Related Pages extension.

Bug: T169565
Change-Id: I999d76b6abecc5b1d96ef7d27a874bc90040270f
---
M resources/ext.cirrus.explore-similar.js
1 file changed, 74 insertions(+), 20 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CirrusSearch 
refs/changes/49/366849/1

diff --git a/resources/ext.cirrus.explore-similar.js 
b/resources/ext.cirrus.explore-similar.js
index 21ffba8..37a2880 100644
--- a/resources/ext.cirrus.explore-similar.js
+++ b/resources/ext.cirrus.explore-similar.js
@@ -100,35 +100,60 @@
                                        }
                                }, userConf ),
                                ajaxCallRequired = true,
+                               responseData,
                                deferred = $.Deferred();
 
                        /**
                         * @param {Object} templateData - filtered API response 
data to populat template.
-                        * @return {Element} - A compiled mustache template 
ready for DOM insertion.
+                        * @return {jQuery} - A jQuery object containing the 
compiled mustache template,
+                        *                    as well as a 
$.data('responseData') property with the API response
+                        *                    used to generate the template.
                         */
                        function compileTemplate( templateData ) {
 
                                var compiledTemplate = mw.template.compile(
                                        conf.template( templateData ),
-                                       'mustache' );
+                                       'mustache' ),
+                                       $renderedTemplate;
 
                                if ( $.isEmptyObject( templateData ) ) { return 
''; }
 
-                               return compiledTemplate.render( templateData );
+                               $renderedTemplate = $( compiledTemplate.render( 
templateData ) );
+                               $renderedTemplate.data( 'responseData', 
responseData );
+                               return $renderedTemplate;
+                       }
+
+                       function setResponseData( data ) {
+                               return responseData = data;
                        }
 
                        /**
                         * Creates and executes AJAX request based on user 
config.
                         * Opting for $.get instead of mw.Api().get() for 
possibility of using RESTbase API.
+                        *
+                        * @param {Object} data - optional param to use 
existing data to generate the template
+                        *                        instead of an API call.
+                        *
+                        * @return {jQuery} a jQuery Deferred object.
                         */
-                       function getData() {
+                       function getData( data ) {
 
-                               if ( ajaxCallRequired ) {
+                               if ( data ) {
+
+                                       var filteredResponse = 
conf.filterApiResponse( data ),
+                                               compiledTemplate = 
compileTemplate( filteredResponse );
+
+                                       ajaxCallRequired  = false;
+                                       responseData = data,
+                                       deferred.resolve( compiledTemplate );
+
+                               } else if ( ajaxCallRequired ) {
 
                                        ajaxCallRequired = false; // makes sure 
ajax is only called once
                                        conf.apiConfig.params.origin = '*'; // 
enables cross-origin requests
 
                                        $.get( conf.apiConfig.url, 
conf.apiConfig.params )
+                                               .then( setResponseData )
                                                .then( conf.filterApiResponse )
                                                .then( compileTemplate )
                                                .then( function ( 
compiledTemplate ) {
@@ -138,6 +163,7 @@
                                                        deferred.fail();
                                                } );
                                }
+
                                return deferred.promise();
                        }
 
@@ -158,14 +184,16 @@
                        var config = {
                                apiConfig: {
                                        params: {
+                                               // Following params combine 
langlinks and categories
                                                action: 'query',
-                                               format: 'json',
-                                               prop: 'info',
                                                titles: articleTitle,
-                                               generator: 'categories',
-                                               inprop: 'url',
-                                               gclshow: '!hidden',
-                                               gcllimit: 10
+                                               prop: 'categories|langlinks',
+                                               clshow: '!hidden',
+                                               cllimit: 10,
+                                               llprop: 'url|autonym',
+                                               lllimit: 500,
+                                               format: 'json',
+                                               formatversion: 2
                                        }
                                },
                                filterApiResponse: function ( reqResponse ) {
@@ -177,7 +205,7 @@
                                                cssClasses: cssClasses,
                                                pageCategories: $.map( 
queryPages, function ( page ) {
                                                                                
var humanTitle = page.title.replace( /.*:/, '' ),
-                                                                               
        url = page.fullurl;
+                                                                               
        url = mw.util.getUrl( page.title );
                                                                                
return {
                                                                                
        humanTitle: humanTitle,
                                                                                
        url: url
@@ -220,16 +248,19 @@
                        var config = {
                                apiConfig: {
                                        params: {
-                                               format: 'json',
+                                               // Following params combine 
langlinks and categories
                                                action: 'query',
                                                titles: articleTitle,
-                                               prop: 'langlinks',
+                                               prop: 'categories|langlinks',
+                                               clshow: '!hidden',
+                                               cllimit: 10,
                                                llprop: 'url|autonym',
-                                               lllimit: '500'
+                                               lllimit: 500,
+                                               format: 'json',
+                                               formatversion: 2
                                        }
                                },
                                filterApiResponse: function ( reqResponse ) {
-
                                        var prefLangs = 
mw.uls.getFrequentLanguageList(),
                                                templateData = {
                                                        langLinks: $.map( 
reqResponse.query.pages, function ( page ) {
@@ -261,7 +292,7 @@
                                                                '<div 
class="{{cssClasses.langLink}}" data-lang={{lang}}>' +
                                                                        
'<div>{{autonym}}</div>' +
                                                                        '<a 
href="{{url}}">' +
-                                                                               
'{{*}}' +
+                                                                               
'{{title}}' +
                                                                        '</a>' +
                                                                '</div>' +
                                                        '{{/langLinks}}' +
@@ -282,10 +313,12 @@
                        var config = {
                                apiConfig: {
                                        params: {
+                                               // these API params should be 
identical to those
+                                               // used in the Related Pages 
Extension for caching purposes.
                                                action: 'query',
                                                format: 'json',
                                                formatversion: 2,
-                                               prop: 
'pageimages|pageterms|info',
+                                               prop: 'pageimages|pageterms',
                                                piprop: 'thumbnail',
                                                pithumbsize: 160,
                                                pilimit: 3,
@@ -295,7 +328,6 @@
                                                gsrnamespace: 0,
                                                gsrlimit: 3,
                                                gsrqiprofile: 
'classic_noboostlinks',
-                                               inprop: 'url',
                                                uselang: 'content',
                                                smaxage: 86400,
                                                maxage: 86400
@@ -308,6 +340,11 @@
                                        if ( typeof reqResponse.query !== 
'undefined' &&
                                                reqResponse.query.pages.length
                                        ) {
+
+                                               
reqResponse.query.pages.forEach( function( page ){
+                                                       page.url = 
mw.util.getUrl( page.title )
+                                               } );
+
                                                templateData = {
                                                        cssClasses: cssClasses,
                                                        sectionTitle: 
l10n.relatedSectionTitle,
@@ -329,7 +366,7 @@
                                                                
'{{sectionTitle}}' +
                                                        '</strong>' +
                                                        '{{#relatedPages}}' +
-                                                               '<a 
href="{{fullurl}}" title="{{title}}" class="{{cssClasses.relatedPage}}">' +
+                                                               '<a 
href="{{url}}" title="{{title}}" class="{{cssClasses.relatedPage}}">' +
                                                                        
'{{#thumbnail}}' +
                                                                                
'<div class="{{cssClasses.relatedPageThumb}}" 
style="background-image:url({{thumbnail.source}});"></div>' +
                                                                        
'{{/thumbnail}}' +
@@ -520,6 +557,22 @@
 
                                animateButton( $button, delay );
 
+                               /** Since API response is the same for 
categories and languages
+                                * widgets, the template from one widget can be 
used to load the other.
+                                *
+                                * @param {jQuery} $template - the template 
resulting from a widget.getData() call
+                                *
+                                * @return {jQuery} - returns the same template 
that was passed into it.
+                                */
+                               function loadSiblingButtonData( $template ) {
+                                       if ( $template.hasClass( 
cssClasses.content + '--languages' ) ) {
+                                               contentWidgets[ 'categories' 
].getData( $template.data( 'reqResponse' ) );
+                                       } else if ( $template.hasClass( 
cssClasses.content + '--categories' ) ) {
+                                               contentWidgets[ 'languages' 
].getData( $template.data( 'reqResponse' ) );
+                                       }
+                                       return $template;
+                               }
+
                                // item is pushed to the timeout queue even if 
the delay is 0.
                                window.ExploreSimilarTimeoutQueue.push(
                                                window.setTimeout( function () {
@@ -529,6 +582,7 @@
                                                                $button.data( 
'es-content' )
                                                        ]
                                                        .getData()
+                                                       .done( 
loadSiblingButtonData )
                                                        .done( 
replaceTemplateContent )
                                                        .done( showContent )
                                                        .done( 
activateSearchResult )

-- 
To view, visit https://gerrit.wikimedia.org/r/366849
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I999d76b6abecc5b1d96ef7d27a874bc90040270f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/CirrusSearch
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to