Page MenuHomeWickedGov Phorge
Files F4131749

Icon.js
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

Icon.js
View Options

const
mfExtend = require( './mfExtend' ),
util = require( './util' ),
View = require( './View' );
/**
* @class module:mobile.startup/Icon
* @classdesc A wrapper for creating an icon.
* @extends module:mobile.startup/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() {
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
*
* @memberof Icon
* @instance
* @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
* @memberof Icon
* @instance
*/
isTemplateMode: true,
/**
* @memberof Icon
* @instance
* @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.
*/
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;

File Metadata

Mime Type
text/plain
Expires
Wed, Aug 19, 11:11 (3 w, 11 h ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
67/de/2020bb0c1f4b3c3898968213cd13
Default Alt Text
Icon.js (3 KB)

Event Timeline