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 143 144 145 146 147 | 1x 1x 1x 133x 7x 133x 60x 133x 133x 133x 133x 109x 109x 134x 134x 134x 134x 134x 134x 134x 34x 134x 134x 134x 134x 134x 24x 134x 114x 134x 133x 133x 18x 18x 266x 1x | const
util = require( './util' ),
View = require( './View' ),
Icon = require( './Icon' );
/**
* A wrapper for creating an icon button.
*/
class IconButton extends View {
/**
* @param {Object} options Configuration options
*/
constructor( options ) {
if ( options.href ) {
options.tagName = 'a';
}
if ( options.tagName === 'button' ) {
options.isTypeButton = true;
}
super( options );
}
/**
* @inheritdoc
*/
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 ';
}
Eif ( size ) {
classes += `cdx-button--size-${ size } `;
}
Eif ( weight ) {
classes += `cdx-button--weight-${ weight } `;
}
if ( action ) {
classes += `cdx-button--action-${ action } `;
}
if ( isIconOnly ) {
classes += 'cdx-button--icon-only ';
}
return classes + additionalClassNames;
}
/**
* @inheritdoc
*/
get isTemplateMode() {
return true;
}
/**
* @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.
*/
get defaults() {
return {
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
*
* @return {string}
*/
getClassName() {
return this.$el.attr( 'class' );
}
getIcon() {
return this._icon;
}
get template() {
return 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;
|