Page MenuHomeWickedGov Phorge
Files F4119834

icons.js
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

icons.js
View Options

const
CANCEL_GLYPH = 'close',
Icon = require( './Icon' ),
IconButton = require( './IconButton' );
/**
* A set of shared icons.
*
* Factory methods are used to keep separate features that use the same icons
* from accidentally manipulating one another's DOM when calling methods like
* `remove`.
*
* @class icons
* @singleton
* @uses Icon
*/
const icons = {
CANCEL_GLYPH,
// Exported to support testing and stubbing
Icon,
IconButton,
/**
* Gets a back icon
*
* The icon should be used to inform the user that the front-end is
* communicating with the back-end.
*
* @memberof icons
* @instance
* @return {IconButton}
*/
back() {
return new icons.IconButton( {
tagName: 'button',
icon: 'previous',
additionalClassNames: 'back',
label: mw.msg( 'mobile-frontend-overlay-close' )
} );
},
/**
* Gets a cancel icon
*
* The icon should be used to inform the user that the front-end is
* communicating with the back-end.
*
* @memberof icons
* @instance
* @param {string} [variant]
* @param {Object} [props] to extend
* @return {IconButton}
*/
cancel( variant, props = {} ) {
const glyph = variant ? `${ CANCEL_GLYPH }-${ variant }` : `${ CANCEL_GLYPH }`;
props.additionalClassNames = props.additionalClassNames || '';
props.additionalClassNames += ' cancel';
return new icons.IconButton( Object.assign( {
tagName: 'button',
icon: glyph,
label: mw.msg( 'mobile-frontend-overlay-close' )
}, props ) );
},
/**
* Gets a spinner icon. This uses IconButton but should never actually
* be a button or have full button styles, as its purely presentational
*
* The icon should be used to inform the user that the front-end is
* communicating with the back-end.
*
* @memberof icons
* @instance
* @param {Object} [props] See `Icon` for more details
* @return {IconButton}
*/
spinner( props = {} ) {
if ( props.additionalClassNames === undefined ) {
props.additionalClassNames = 'spinner loading';
}
const spinner = new icons.IconButton( Object.assign( {
tagName: 'span',
icon: 'spinner',
label: mw.msg( 'mobile-frontend-loading-message' )
}, props ) );
// Update the element to not use button classes or attributes
spinner.$el.removeClass();
// eslint-disable-next-line mediawiki/class-doc
spinner.$el.addClass( props.additionalClassNames );
spinner.$el.attr( 'type', '' );
if ( spinner.options.isIconOnly ) {
spinner.$el.addClass( 'mf-spinner-icon-element' );
}
return spinner;
},
/**
* Gets a failure (error) icon
*
* @memberof icons
* @instance
* @return {IconButton}
*/
error() {
return new icons.IconButton( {
icon: 'alert-invert',
additionalClassNames: 'load-fail-msg-icon'
} );
},
/**
* Gets a non-filled watch star icon.
*
* @memberof icons
* @instance
* @param {Object} props
* @return {IconButton}
*/
watch( props = {} ) {
props.additionalClassNames = props.additionalClassNames || '';
props.additionalClassNames += ' watch-this-article';
return new icons.IconButton( Object.assign( {
icon: 'star-subtle'
}, props ) );
},
/**
* Gets a filled watch star icon.
*
* @memberof icons
* @instance
* @param {Object} props
* @return {IconButton}
*/
watched( props = {} ) {
props.additionalClassNames = props.additionalClassNames || '';
props.additionalClassNames += ' watch-this-article watched';
return new icons.IconButton( Object.assign( {
icon: 'unStar-progressive'
}, props ) );
}
};
module.exports = icons;

File Metadata

Mime Type
text/plain
Expires
Wed, Aug 19, 03:41 (1 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
d9/7f/8bab85308ca65d359470c331d0ad
Default Alt Text
icons.js (3 KB)

Event Timeline