Page MenuHomeWickedGov Phorge
Files F1429883

IconButton.js
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

IconButton.js
View Options

const
mfExtend = require( './mfExtend' ),
util = require( './util' ),
View = require( './View' ),
Icon = require( './Icon' );
/**
* A wrapper for creating an icon button.
*
* @class IconButton
* @extends module:mobile.startup/View
*
* @param {Object} options Configuration options
*/
function IconButton( options ) {
if ( options.href ) {
options.tagName = 'a';
}
if ( options.tagName === 'button' ) {
options.isTypeButton = true;
}
View.call( this, options );
}
mfExtend( IconButton, View, {
/**
* @inheritdoc
* @memberof IconButton
* @instance
*/
preRender() {
this.options._buttonClasses = this.getButtonClasses();
this.options._iconHTML = '';
if ( this.options.icon ) {
this._icon = new Icon( {
base: this.options.base,
glyphPrefix: this.options.glyphPrefix,
icon: this.options.icon,
rotation: this.options.rotation,
isSmall: this.options.isSmall
} );
this.options._iconHTML = this._icon.$el.get( 0 ).outerHTML;
}
},
getButtonClasses() {
const additionalClassNames = this.options.additionalClassNames;
const size = this.options.size;
const weight = this.options.weight;
const action = this.options.action;
const isIconOnly = this.options.isIconOnly;
let classes = 'cdx-button ';
if ( this.options.tagName !== 'button' ) {
classes += 'cdx-button--fake-button cdx-button--fake-button--enabled ';
}
if ( size ) {
classes += `cdx-button--size-${ size } `;
}
if ( weight ) {
classes += `cdx-button--weight-${ weight } `;
}
if ( action ) {
classes += `cdx-button--action-${ action } `;
}
if ( isIconOnly ) {
classes += 'cdx-button--icon-only ';
}
return classes + additionalClassNames;
},
/**
* @inheritdoc
* @memberof IconButton
* @instance
*/
isTemplateMode: true,
/**
* @memberof IconButton
* @instance
* @mixes module:mobile.startup/View#defaults
* @property {Object} defaults Default options hash.
* @property {string} defaults.tagName The name of the tag in which the button is wrapped.
* Defaults to 'a' when href option present.
* @property {string} [defaults.href] value of href attribute,
* when set tagName will default to anchor tag
* @property {string} defaults.additionalClassNames Additional classes to be added to the button
* @property {string} defaults.title Tooltip text.
* @property {string} defaults.size Button size.
* Defaults to 'large'.
* @property {boolean} defaults.weight Button weight.
* Defaults to 'quiet'.
* @property {boolean} defaults.action Button action.
* @property {boolean} defaults.isIconOnly Whether button is an icon only button
* Defaults to true.
* @property {boolean} defaults.disabled should only be used with tagName button
* @property {string} defaults.base String used as a base for generating class names.
* Defaults to 'mf-icon'.
* @property {string} defaults.glyphPrefix Prefix for the icon class
* @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 Whether the icon should be small.
*/
defaults: {
tagName: 'button',
href: undefined,
additionalClassNames: '',
title: '',
size: 'large',
weight: 'quiet',
action: '',
isIconOnly: true,
disabled: false,
base: 'mf-icon',
icon: '',
rotation: 0,
isSmall: false
},
/**
* Return the full class name that is required for the icon to render
*
* @memberof IconButton
* @instance
* @return {string}
*/
getClassName() {
return this.$el.attr( 'class' );
},
getIcon() {
return this._icon;
},
template: util.template( `
<{{tagName}}
type="button"
{{#isTypeButton}}{{#disabled}}disabled{{/disabled}}{{/isTypeButton}}
class="{{_buttonClasses}}"
{{#id}}id="{{id}}"{{/id}}
{{#href}}href="{{href}}"{{/href}}
{{#title}}title="{{title}}"{{/title}}>
{{{_iconHTML}}}
<span>{{label}}</span>
</{{tagName}}>
` )
} );
module.exports = IconButton;

File Metadata

Mime Type
text/plain
Expires
Sat, May 16, 18:09 (7 h, 52 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
39/9a/d42fd77973e489a44d210068f799
Default Alt Text
IconButton.js (3 KB)

Event Timeline