Page MenuHomeWickedGov Phorge
Files F4057151

Column.js
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

Column.js
View Options

const ColumnItem = require( './ColumnItem.js' );
/**
* @class
* @extends OO.ui.PanelLayout
*
* @constructor
* @param {Object} [config] Configuration options.
*/
function Column( config ) {
config = Object.assign( {
expanded: false,
framed: true
}, config );
Column.super.call( this, config );
OO.ui.mixin.PendingElement.call( this, config );
OO.EventEmitter.call( this );
this.$element.addClass( 'ext-templatedata-ColumnGroup-Column' );
this.dataStore = config.dataStore;
this.items = [];
this.data = {};
}
/* Setup */
OO.inheritClass( Column, OO.ui.PanelLayout );
OO.mixinClass( Column, OO.ui.mixin.PendingElement );
OO.mixinClass( Column, OO.EventEmitter );
/* Events */
/**
* When an item in this column is selected.
*
* @event select
* @param {Column} column
* @param {ColumnItem} columnItem
*/
/**
* When a "load more" item is clicked.
*
* @event loadmore
* @param {Column} column
* @param {string} cmcontinue
*/
/**
* When a template is chosen.
*
* @event choose
* @param {Object} The template data of the chosen template.
*/
/** Methods */
/**
* @param {string} columnTitle
* @param {string} cmcontinue
* @return {Promise}
*/
Column.prototype.loadItems = function ( columnTitle, cmcontinue ) {
this.data.columnTitle = columnTitle;
this.scrollElementIntoView();
this.pushPending();
return this.dataStore.getColumnData( columnTitle, cmcontinue )
.then( ( data ) => {
for ( const itemData of data ) {
const columnItem = new ColumnItem( itemData );
columnItem.connect( this, {
select: this.onSelect,
loadmore: this.onLoadmore
} );
this.items.push( columnItem );
this.$element.append( columnItem.$element );
}
if ( data.length === 0 ) {
this.$element.addClass( 'ext-templatedata-column-info' );
this.$element.append( mw.message( 'templatedata-category-column-empty', columnTitle ).parse() );
}
this.popPending();
} ).catch( ( err ) => {
this.$element.addClass( 'ext-templatedata-column-info ext-templatedata-column-error' );
this.$element.text( mw.msg( 'templatedata-category-column-error' ) + mw.msg( 'colon-separator' ) + err );
this.popPending();
} );
// @todo popPending should be moved to .finally(), when we can use that.
};
Column.prototype.showTemplateDetails = function ( catTitle, info ) {
this.$element.empty();
this.$element.addClass( 'ext-templatedata-column-info' );
const $link = $( '<a>' )
.addClass( 'ext-templatedata-column-info-title' )
.attr( 'title', info.templatedata.title )
.attr( 'href', mw.util.getUrl( info.templatedata.title ) )
.append( info.templatedata.title );
const $description = $( '<span>' )
.addClass( 'ext-templatedata-description' )
.append( $( '<bdi>' ).text( info.templatedata.description || '' ) );
const button = new OO.ui.ButtonWidget( {
label: mw.msg( 'templatedata-category-use-template' ),
flags: 'progressive'
} );
button.connect( this, { click: () => {
this.emit( 'choose', info.templatedata );
} } );
const $cats = $( '<p>' ).addClass( 'ext-templatedata-categories' );
const catsLabel = mw.msg( 'templatedata-category-categories' ) + mw.msg( 'colon-separator' );
$cats.append( $( '<em>' ).text( catsLabel ) );
// Exclude the currently-selected category.
const otherCats = info.categories.categories
.filter( ( c ) => c.title !== catTitle && !c.hidden );
otherCats.forEach( ( catData, catIndex ) => {
const $cat = $( '<span>' ).text( new mw.Title( catData.title ).getMainText() );
$cats.append( $cat );
if ( catIndex !== otherCats.length - 1 ) {
$cats.append( mw.message( 'semicolon-separator' ).escaped() );
}
} );
// If the template is in no other categories, say so.
if ( otherCats.length === 0 ) {
$cats.append( mw.message( 'templatedata-category-no-cats' ).escaped() );
}
this.$element.append( $link, $description, button.$element, $cats );
};
Column.prototype.getData = function () {
return this.data;
};
Column.prototype.getItem = function ( index ) {
return this.items[ index ];
};
Column.prototype.onSelect = function ( columnItem ) {
// Unhighlight all other items.
this.items
.filter( ( i ) => i !== columnItem )
.forEach( ( i ) => i.setHighlighted( false ) );
this.emit( 'select', this, columnItem );
};
Column.prototype.onLoadmore = function ( columnItem, cmcontinue ) {
columnItem.$element.remove();
this.items.splice( this.items.indexOf( columnItem ), 1 );
this.emit( 'loadmore', this, cmcontinue );
};
module.exports = Column;

File Metadata

Mime Type
text/plain
Expires
Aug 16 2026, 03:52 (12 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
fa/a8/53e2cdef4de7f0a1a86aa38074bd
Default Alt Text
Column.js (4 KB)

Event Timeline