--- /dev/null
+/*!
+ * MediaWiki Widgets - MediaSearchWidget class.
+ *
+ * @copyright 2011-2016 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+( function ( $, mw ) {
+
+ /**
+ * Creates an mw.widgets.MediaSearchWidget object.
+ *
+ * @class
+ * @extends OO.ui.SearchWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @param {number} [size] Vertical size of thumbnails
+ */
+ mw.widgets.MediaSearchWidget = function MwWidgetsMediaSearchWidget( config ) {
+ // Configuration initialization
+ config = $.extend( {
+ placeholder: mw.msg( 'mw-widgets-mediasearch-input-placeholder' )
+ }, config );
+
+ // Parent constructor
+ mw.widgets.MediaSearchWidget.super.call( this, config );
+
+ // Properties
+ this.providers = {};
+ this.lastQueryValue = '';
+ this.searchQueue = new mw.widgets.MediaSearchQueue( {
+ limit: this.constructor.static.limit,
+ threshold: this.constructor.static.threshold
+ } );
+
+ this.queryTimeout = null;
+ this.itemCache = {};
+ this.promises = [];
+ this.lang = config.lang || 'en';
+ this.$panels = config.$panels;
+
+ this.externalLinkUrlProtocolsRegExp = new RegExp(
+ '^(' + mw.config.get( 'wgUrlProtocols' ) + ')',
+ 'i'
+ );
+
+ // Masonry fit properties
+ this.rows = [];
+ this.rowHeight = config.rowHeight || 200;
+ this.layoutQueue = [];
+ this.numItems = 0;
+ this.currentItemCache = [];
+
+ this.resultsSize = {};
+
+ this.selected = null;
+
+ this.noItemsMessage = new OO.ui.LabelWidget( {
+ label: mw.msg( 'mw-widgets-mediasearch-noresults' ),
+ classes: [ 'mw-widget-mediaSearchWidget-noresults' ]
+ } );
+ this.noItemsMessage.toggle( false );
+
+ // Events
+ this.$results.on( 'scroll', this.onResultsScroll.bind( this ) );
+ this.$query.append( this.noItemsMessage.$element );
+ this.results.connect( this, {
+ change: 'onResultsChange',
+ remove: 'onResultsRemove'
+ } );
+
+ this.resizeHandler = OO.ui.debounce( this.afterResultsResize.bind( this ), 500 );
+
+ // Initialization
+ this.$element.addClass( 'mw-widget-mediaSearchWidget' );
+ };
+
+ /* Inheritance */
+
+ OO.inheritClass( mw.widgets.MediaSearchWidget, OO.ui.SearchWidget );
+
+ /* Static properties */
+
+ mw.widgets.MediaSearchWidget.static.limit = 10;
+
+ mw.widgets.MediaSearchWidget.static.threshold = 5;
+
+ /* Methods */
+
+ /**
+ * Respond to window resize and check if the result display should
+ * be updated.
+ */
+ mw.widgets.MediaSearchWidget.prototype.afterResultsResize = function () {
+ var items = this.currentItemCache;
+
+ if (
+ items.length > 0 &&
+ (
+ this.resultsSize.width !== this.$results.width() ||
+ this.resultsSize.height !== this.$results.height()
+ )
+ ) {
+ this.resetRows();
+ this.itemCache = {};
+ this.processQueueResults( items );
+ if ( this.results.getItems().length > 0 ) {
+ this.lazyLoadResults();
+ }
+
+ // Cache the size
+ this.resultsSize = {
+ width: this.$results.width(),
+ height: this.$results.height()
+ };
+ }
+ };
+
+ /**
+ * Teardown the widget; disconnect the window resize event.
+ */
+ mw.widgets.MediaSearchWidget.prototype.teardown = function () {
+ $( window ).off( 'resize', this.resizeHandler );
+ };
+
+ /**
+ * Setup the widget; activate the resize event.
+ */
+ mw.widgets.MediaSearchWidget.prototype.setup = function () {
+ $( window ).on( 'resize', this.resizeHandler );
+ };
+
+ /**
+ * Query all sources for media.
+ *
+ * @method
+ */
+ mw.widgets.MediaSearchWidget.prototype.queryMediaQueue = function () {
+ var search = this,
+ value = this.getQueryValue();
+
+ if ( value === '' ) {
+ return;
+ }
+
+ this.query.pushPending();
+ search.noItemsMessage.toggle( false );
+
+ this.searchQueue.setSearchQuery( value );
+ this.searchQueue.get( this.constructor.static.limit )
+ .then( function ( items ) {
+ if ( items.length > 0 ) {
+ search.processQueueResults( items );
+ search.currentItemCache = search.currentItemCache.concat( items );
+ }
+
+ search.query.popPending();
+ search.noItemsMessage.toggle( search.results.getItems().length === 0 );
+ if ( search.results.getItems().length > 0 ) {
+ search.lazyLoadResults();
+ }
+
+ } );
+ };
+
+ /**
+ * Process the media queue giving more items
+ *
+ * @method
+ * @param {Object[]} items Given items by the media queue
+ */
+ mw.widgets.MediaSearchWidget.prototype.processQueueResults = function ( items ) {
+ var i, len, title,
+ resultWidgets = [],
+ inputSearchQuery = this.getQueryValue(),
+ queueSearchQuery = this.searchQueue.getSearchQuery();
+
+ if ( inputSearchQuery === '' || queueSearchQuery !== inputSearchQuery ) {
+ return;
+ }
+
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ title = new mw.Title( items[ i ].title ).getMainText();
+ // Do not insert duplicates
+ if ( !Object.prototype.hasOwnProperty.call( this.itemCache, title ) ) {
+ this.itemCache[ title ] = true;
+ resultWidgets.push(
+ new mw.widgets.MediaResultWidget( {
+ data: items[ i ],
+ rowHeight: this.rowHeight,
+ maxWidth: this.results.$element.width() / 3,
+ minWidth: 30,
+ rowWidth: this.results.$element.width()
+ } )
+ );
+ }
+ }
+ this.results.addItems( resultWidgets );
+
+ };
+
+ /**
+ * Get the sanitized query value from the input
+ *
+ * @return {string} Query value
+ */
+ mw.widgets.MediaSearchWidget.prototype.getQueryValue = function () {
+ var queryValue = this.query.getValue().trim();
+
+ if ( queryValue.match( this.externalLinkUrlProtocolsRegExp ) ) {
+ queryValue = queryValue.match( /.+\/([^/]+)/ )[ 1 ];
+ }
+ return queryValue;
+ };
+
+ /**
+ * Handle search value change
+ *
+ * @param {string} value New value
+ */
+ mw.widgets.MediaSearchWidget.prototype.onQueryChange = function () {
+ // Get the sanitized query value
+ var queryValue = this.getQueryValue();
+
+ if ( queryValue === this.lastQueryValue ) {
+ return;
+ }
+
+ // Parent method
+ mw.widgets.MediaSearchWidget.super.prototype.onQueryChange.apply( this, arguments );
+
+ // Reset
+ this.itemCache = {};
+ this.currentItemCache = [];
+ this.resetRows();
+
+ // Empty the results queue
+ this.layoutQueue = [];
+
+ // Change resource queue query
+ this.searchQueue.setSearchQuery( queryValue );
+ this.lastQueryValue = queryValue;
+
+ // Queue
+ clearTimeout( this.queryTimeout );
+ this.queryTimeout = setTimeout( this.queryMediaQueue.bind( this ), 350 );
+ };
+
+ /**
+ * Handle results scroll events.
+ *
+ * @param {jQuery.Event} e Scroll event
+ */
+ mw.widgets.MediaSearchWidget.prototype.onResultsScroll = function () {
+ var position = this.$results.scrollTop() + this.$results.outerHeight(),
+ threshold = this.results.$element.outerHeight() - this.rowHeight * 3;
+
+ // Check if we need to ask for more results
+ if ( !this.query.isPending() && position > threshold ) {
+ this.queryMediaQueue();
+ }
+
+ this.lazyLoadResults();
+ };
+
+ /**
+ * Lazy-load the images that are visible.
+ */
+ mw.widgets.MediaSearchWidget.prototype.lazyLoadResults = function () {
+ var i, elementTop,
+ items = this.results.getItems(),
+ resultsScrollTop = this.$results.scrollTop(),
+ position = resultsScrollTop + this.$results.outerHeight();
+
+ // Lazy-load results
+ for ( i = 0; i < items.length; i++ ) {
+ elementTop = items[ i ].$element.position().top;
+ if ( elementTop <= position && !items[ i ].hasSrc() ) {
+ // Load the image
+ items[ i ].lazyLoad();
+ }
+ }
+ };
+
+ /**
+ * Reset all the rows; destroy the jQuery elements and reset
+ * the rows array.
+ */
+ mw.widgets.MediaSearchWidget.prototype.resetRows = function () {
+ var i, len;
+
+ for ( i = 0, len = this.rows.length; i < len; i++ ) {
+ this.rows[ i ].$element.remove();
+ }
+
+ this.rows = [];
+ this.itemCache = {};
+ };
+
+ /**
+ * Find an available row at the end. Either we will need to create a new
+ * row or use the last available row if it isn't full.
+ *
+ * @return {number} Row index
+ */
+ mw.widgets.MediaSearchWidget.prototype.getAvailableRow = function () {
+ var row;
+
+ if ( this.rows.length === 0 ) {
+ row = 0;
+ } else {
+ row = this.rows.length - 1;
+ }
+
+ if ( !this.rows[ row ] ) {
+ // Create new row
+ this.rows[ row ] = {
+ isFull: false,
+ width: 0,
+ items: [],
+ $element: $( '<div>' )
+ .addClass( 'mw-widget-mediaResultWidget-row' )
+ .css( {
+ overflow: 'hidden'
+ } )
+ .data( 'row', row )
+ .attr( 'data-full', false )
+ };
+ // Append to results
+ this.results.$element.append( this.rows[ row ].$element );
+ } else if ( this.rows[ row ].isFull ) {
+ row++;
+ // Create new row
+ this.rows[ row ] = {
+ isFull: false,
+ width: 0,
+ items: [],
+ $element: $( '<div>' )
+ .addClass( 'mw-widget-mediaResultWidget-row' )
+ .css( {
+ overflow: 'hidden'
+ } )
+ .data( 'row', row )
+ .attr( 'data-full', false )
+ };
+ // Append to results
+ this.results.$element.append( this.rows[ row ].$element );
+ }
+
+ return row;
+ };
+
+ /**
+ * Respond to change results event in the results widget.
+ * Override the way SelectWidget and GroupElement append the items
+ * into the group so we can append them in groups of rows.
+ *
+ * @param {mw.widgets.MediaResultWidget[]} items An array of item elements
+ */
+ mw.widgets.MediaSearchWidget.prototype.onResultsChange = function ( items ) {
+ var search = this;
+
+ if ( !items.length ) {
+ return;
+ }
+
+ // Add method to a queue; this queue will only run when the widget
+ // is visible
+ this.layoutQueue.push( function () {
+ var i, j, ilen, jlen, itemWidth, row, effectiveWidth,
+ resizeFactor,
+ maxRowWidth = search.results.$element.width() - 15;
+
+ // Go over the added items
+ row = search.getAvailableRow();
+ for ( i = 0, ilen = items.length; i < ilen; i++ ) {
+
+ // Check item has just been added
+ if ( items[ i ].row !== null ) {
+ continue;
+ }
+
+ itemWidth = items[ i ].$element.outerWidth( true );
+
+ // Add items to row until it is full
+ if ( search.rows[ row ].width + itemWidth >= maxRowWidth ) {
+ // Mark this row as full
+ search.rows[ row ].isFull = true;
+ search.rows[ row ].$element.attr( 'data-full', true );
+
+ // Find the resize factor
+ effectiveWidth = search.rows[ row ].width;
+ resizeFactor = maxRowWidth / effectiveWidth;
+
+ search.rows[ row ].$element.attr( 'data-effectiveWidth', effectiveWidth );
+ search.rows[ row ].$element.attr( 'data-resizeFactor', resizeFactor );
+ search.rows[ row ].$element.attr( 'data-row', row );
+
+ // Resize all images in the row to fit the width
+ for ( j = 0, jlen = search.rows[ row ].items.length; j < jlen; j++ ) {
+ search.rows[ row ].items[ j ].resizeThumb( resizeFactor );
+ }
+
+ // find another row
+ row = search.getAvailableRow();
+ }
+
+ // Add the cumulative
+ search.rows[ row ].width += itemWidth;
+
+ // Store reference to the item and to the row
+ search.rows[ row ].items.push( items[ i ] );
+ items[ i ].setRow( row );
+
+ // Append the item
+ search.rows[ row ].$element.append( items[ i ].$element );
+
+ }
+
+ // If we have less than 4 rows, call for more images
+ if ( search.rows.length < 4 ) {
+ search.queryMediaQueue();
+ }
+ } );
+ this.runLayoutQueue();
+ };
+
+ /**
+ * Run layout methods from the queue only if the element is visible.
+ */
+ mw.widgets.MediaSearchWidget.prototype.runLayoutQueue = function () {
+ var i, len;
+
+ if ( this.$element.is( ':visible' ) ) {
+ for ( i = 0, len = this.layoutQueue.length; i < len; i++ ) {
+ this.layoutQueue.pop()();
+ }
+ }
+ };
+
+ /**
+ * Respond to removing results event in the results widget.
+ * Clear the relevant rows.
+ *
+ * @param {OO.ui.OptionWidget[]} items Removed items
+ */
+ mw.widgets.MediaSearchWidget.prototype.onResultsRemove = function ( items ) {
+ if ( items.length > 0 ) {
+ // In the case of the media search widget, if any items are removed
+ // all are removed (new search)
+ this.resetRows();
+ this.currentItemCache = [];
+ }
+ };
+
+ /**
+ * Set language for the search results.
+ *
+ * @param {string} lang Language
+ */
+ mw.widgets.MediaSearchWidget.prototype.setLang = function ( lang ) {
+ this.lang = lang;
+ };
+
+ /**
+ * Get language for the search results.
+ *
+ * @return {string} lang Language
+ */
+ mw.widgets.MediaSearchWidget.prototype.getLang = function () {
+ return this.lang;
+ };
+}( jQuery, mediaWiki ) );
scripts.mit.edu / autoinstallsdev / mediawiki.git / blobdiff