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 | 1x 1x 166x 166x 172x 172x 29x 23x 23x 3x 3x 3x 3x 172x 168x 168x 168x 168x 168x 168x 168x 164x 168x 48x 168x 40x 168x 166x 166x 19x 168x 4x 164x 332x 1x | const
util = require( './util' ),
View = require( './View' );
/**
* A wrapper for creating an icon.
*/
class Icon extends View {
/**
* @param {Object} options Configuration options
*/
constructor( options ) {
super( options );
}
/**
* @inheritdoc
*/
preRender() {
this.options._iconClasses = this.getIconClasses();
}
/**
* Internal method that sets the correct rotation class for the icon
* based on the value of rotation
*
* @private
*/
getRotationClass() {
let 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
*
* @private
*/
getIconClasses() {
const base = this.options.base;
const icon = this.options.icon;
const isSmall = this.options.isSmall;
const rotationClasses = this.getRotationClass();
const additionalClassNames = this.options.additionalClassNames;
let classes = base + ' ';
if ( icon ) {
classes += this.getGlyphClassName() + ' ';
}
if ( isSmall ) {
classes += 'mf-icon--small ';
}
if ( additionalClassNames ) {
classes += additionalClassNames + ' ';
}
return classes + rotationClasses;
}
/**
* @inheritdoc
*/
get isTemplateMode() {
return true;
}
/**
* @mixes module:mobile.startup/View#defaults
* @property {Object} 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.
*/
get defaults() {
return {
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
*
* @return {string}
*/
getClassName() {
return this.$el.attr( 'class' );
}
/**
* Return the class that relates to the icon glyph
*
* @return {string}
*/
getGlyphClassName() {
if ( this.options.glyphPrefix ) {
return 'mf-icon-' + this.options.glyphPrefix + '-' + this.options.icon;
}
return 'mf-icon-' + this.options.icon;
}
get template() {
return util.template(
'<span class="{{_iconClasses}}"> </span>'
);
}
}
module.exports = Icon;
|