Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | 1x 1x 1x 1x 5x 37x 37x 37x 37x 22x 16x 22x 22x 22x 22x 22x 21x 22x 2x 9x 9x 9x 9x 9x 9x 1x | 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.
*
* @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.
*
* @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.
*
* @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
*
* @return {IconButton}
*/
error() {
return new icons.IconButton( {
icon: 'alert-invert',
additionalClassNames: 'load-fail-msg-icon'
} );
},
/**
* Gets a non-filled watch star icon.
*
* @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.
*
* @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;
|