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 133 134 135 136 137 138 139 140 141 142 | 1x 1x 1x 176x 1x 176x 182x 182x 32x 26x 26x 3x 3x 3x 3x 182x 178x 178x 178x 178x 178x 178x 178x 174x 178x 58x 178x 50x 178x 19x 178x 4x 174x 1x | var
mfExtend = require( './mfExtend' ),
util = require( './util' ),
View = require( './View' );
/**
* A wrapper for creating an icon.
*
* @class Icon
* @extends View
*
* @param {Object} options Configuration options
*/
function Icon( options ) {
View.call( this, options );
}
mfExtend( Icon, View, {
/**
* @inheritdoc
* @memberof Icon
* @instance
*/
preRender() {
this.options._iconClasses = this.getIconClasses();
},
/**
* Internal method that sets the correct rotation class for the icon
* based on the value of rotation
*
* @memberof Icon
* @instance
* @private
*/
getRotationClass() {
var rotationClass = '';
if ( this.options.rotation ) {
switch ( this.options.rotation ) {
case -180:
case 180:
rotationClass = 'mf-icon-rotate-flip';
break;
case -90:
rotationClass = 'mf-icon-rotate-anti-clockwise';
break;
case 90:
rotationClass = 'mf-icon-rotate-clockwise';
break;
case 0:
break;
default:
throw new Error( 'Bad value for rotation given. Must be ±90, 0 or ±180.' );
}
}
return rotationClass;
},
/**
* Set icon glyph class and icon type class
*
* @memberof Icon
* @instance
* @private
*/
getIconClasses() {
var base = this.options.base;
var icon = this.options.icon;
var isSmall = this.options.isSmall;
var rotationClasses = this.getRotationClass();
var additionalClassNames = this.options.additionalClassNames;
var classes = base + ' ';
if ( icon ) {
classes += this.getGlyphClassName() + ' ';
}
if ( isSmall ) {
classes += 'mf-icon--small ';
}
if ( additionalClassNames ) {
classes += additionalClassNames + ' ';
}
return classes + rotationClasses;
},
/**
* @inheritdoc
* @memberof Icon
* @instance
*/
isTemplateMode: true,
/**
* @memberof Icon
* @instance
* @mixes View#defaults
* @property {string} defaults.base Base icon class.
* Defaults to 'mf-icon'.
* @property {string} defaults.glyphPrefix Prefix for the icon class
* Defaults to 'mf'.
* @property {string} defaults.icon Name of the icon.
* @property {boolean} defaults.rotation will rotate the icon by a certain number
* of degrees. Must be ±90, 0 or ±180 or will throw exception.
* @property {boolean} defaults.isSmall If icon is small.
* @property {string} defaults.addtionalClassNames Additional classes to be added to the icon.
*/
defaults: {
base: 'mf-icon',
glyphPrefix: null,
icon: '',
rotation: 0,
isSmall: false,
additionalClassNames: null
},
/**
* Return the full class name that is required for the icon to render
*
* @memberof Icon
* @instance
* @return {string}
*/
getClassName() {
return this.$el.attr( 'class' );
},
/**
* Return the class that relates to the icon glyph
*
* @memberof Icon
* @instance
* @return {string}
*/
getGlyphClassName() {
if ( this.options.glyphPrefix ) {
return 'mf-icon-' + this.options.glyphPrefix + '-' + this.options.icon;
}
return 'mf-icon-' + this.options.icon;
},
template: util.template(
'<span class="{{_iconClasses}}"> </span>'
)
} );
module.exports = Icon;
|