All files Icon.js

45.83% Statements 11/24
25% Branches 3/12
66.67% Functions 4/6
45.83% Lines 11/24

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  1x 1x                   1x     1x     1x     1x             1x                   1x 1x                                                                                                                                                                     1x         1x  
var
	mfExtend = require( './mfExtend' ),
	View = require( './View' );
 
/**
 * A wrapper for creating an icon.
 * @class Icon
 * @extends View
 *
 * @param {Object} options Configuration options
 */
function Icon( options ) {
	Iif ( options.hasText ) {
		options.modifier = 'mw-ui-icon-before';
	}
	Iif ( options.href ) {
		options.tagName = 'a';
	}
	View.call( this, options );
}
 
mfExtend( Icon, View, {
	/**
	 * @inheritdoc
	 * @memberof Icon
	 * @instance
	 */
	preRender: function () {
		this.setRotationClass();
	},
	/**
	 * Internal method that sets the correct rotation class for the icon
	 * based on the value of rotation
	 * @memberof Icon
	 * @instance
	 * @private
	 */
	setRotationClass: function () {
		var options = this.options;
		Iif ( options.rotation ) {
			switch ( options.rotation ) {
				case -180:
				case 180:
					options._rotationClass = 'mf-mw-ui-icon-rotate-flip';
					break;
				case -90:
					options._rotationClass = 'mf-mw-ui-icon-rotate-anti-clockwise';
					break;
				case 90:
					options._rotationClass = 'mf-mw-ui-icon-rotate-clockwise';
					break;
				case 0:
					break;
				default:
					throw new Error( 'Bad value for rotation given. Must be ±90, 0 or ±180.' );
			}
		}
	},
	/**
	 * @inheritdoc
	 * @memberof Icon
	 * @instance
	 */
	isTemplateMode: true,
	/**
	 * @memberof Icon
	 * @instance
	 * @mixes View#defaults
	 * @property {Object} defaults Default options hash.
	 * @property {boolean} defaults.hasText Whether the icon has text.
	 * @property {boolean} defaults.isSmall Whether the icon should be small.
	 * @property {string} [defaults.href] value of href attribute,
	 *  when set tagName will default to anchor tag
	 * @property {string} defaults.tagName The name of the tag in which the icon is wrapped.
	 *  Defaults to 'a' when href option present.
	 * @property {string} defaults.base String used as a base for generating class names.
	 * Defaults to 'mw-ui-icon'.
	 * @property {string} defaults.name Name of the icon.
	 * @property {string} defaults.modifier Additional class name.
	 * Defaults to 'mw-ui-icon-element'.
	 * @property {string} defaults.title Tooltip text.
	 * @property {boolean} defaults.rotation will rotate the icon by a certain number
	 *  of degrees.
	 *  Must be ±90, 0 or ±180 or will throw exception.
	 */
	defaults: {
		rotation: 0,
		hasText: false,
		href: undefined,
		glyphPrefix: 'mf',
		tagName: 'div',
		isSmall: false,
		base: 'mw-ui-icon',
		name: '',
		modifier: 'mw-ui-icon-element',
		title: ''
	},
	/**
	 * Return the full class name that is required for the icon to render
	 * @memberof Icon
	 * @instance
	 * @return {string}
	 */
	getClassName: function () {
		return this.$el.attr( 'class' );
	},
	/**
	 * Return the class that relates to the icon glyph
	 * @memberof Icon
	 * @instance
	 * @return {string}
	 */
	getGlyphClassName: function () {
		return this.options.base + '-' + this.options.glyphPrefix + '-' + this.options.name;
	},
	/**
	 * Return the HTML representation of this view
	 * @memberof Icon
	 * @instance
	 * @return {string}
	 */
	toHtmlString: function () {
		return this.parseHTML( '<div>' ).append( this.$el ).html();
	},
	template: mw.template.get( 'mobile.startup', 'icon.hogan' )
} );
 
module.exports = Icon;