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 | 1x 1x 1x 1x 133x 7x 133x 60x 133x 1x 133x 133x 133x 109x 109x 134x 134x 134x 134x 134x 134x 134x 34x 134x 134x 134x 134x 134x 24x 134x 114x 134x 18x 18x 1x | var
mfExtend = require( './mfExtend' ),
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
*/
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() {
var additionalClassNames = this.options.additionalClassNames;
var size = this.options.size;
var weight = this.options.weight;
var action = this.options.action;
var isIconOnly = this.options.isIconOnly;
var 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
* @memberof IconButton
* @instance
*/
isTemplateMode: true,
/**
* @memberof IconButton
* @instance
* @mixes 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;
|