javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

set button css by attrs

Browse Source
This commit is contained in:
Adam Bradley
2015-12-06 20:44:56 -06:00
parent 4025a01fe0
commit 3d3eae1e4f
8 changed files with 273 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
ionic/components/button/button.ts
View File

@@ -1,16 +1,12 @@
import {Directive, ElementRef, Renderer, Attribute} from 'angular2/angular2';
import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/angular2';
import {Config} from '../../config/config';
import {Toolbar} from '../toolbar/toolbar';
/**
* @name Button
* @module ionic
* @property [primary] - sets button color to default primary
* @property [secondary] - sets button color to default secondary
* @property [danger] - sets button color to default danger
* @property [light] - sets button color to default light
* @property [dark] - sets button color to default dark
* @property [outline] - for an unfilled outline button
* @property [clear] - for a transparent button that only shows text and icons
* @property [round] - for a button with rounded corners
@@ -36,10 +32,14 @@ export class Button {
constructor(
config: Config,
elementRef: ElementRef,
renderer: Renderer,
@Attribute('type') type: string
private elementRef: ElementRef,
private renderer: Renderer
) {
this._role = 'button'; // bar-button
this._size = null; // large
this._style = null; // outline
this._display = null; // block
this._colors = []; // primary
let element = elementRef.nativeElement;
@@ -49,16 +49,11 @@ export class Button {
if (element.hasAttribute('ion-item')) {
// no need to put on these classes for an ion-item
this._role = null;
return;
}
renderer.setElementClass(elementRef, 'button', true);
this.attrToClass(renderer, elementRef);
if (type) {
renderer.setElementAttribute(elementRef, type, '');
}
this._readAttrs(element);
// figure out if and where the icon lives in the button
let childNodes = element.childNodes;
@@ -98,47 +93,65 @@ export class Button {
}
attrToClass(renderer, elementRef) {
// looping through native dom attributes, eww
// https://github.com/angular/angular/issues/1818
afterContentInit() {
this._assignCss(true);
}
let element = elementRef.nativeElement;
let attrs = element.attributes;
let btnAttrs = [];
BUTTON_SIZE_ATTRS.forEach(buttonAttr => {
if (element.hasAttribute(buttonAttr)) {
renderer.setElementClass(elementRef, 'button-' + buttonAttr, true);
}
});
BUTTON_TYPE_ATTRS.forEach(buttonAttr => {
if (element.hasAttribute(buttonAttr)) {
renderer.setElementClass(elementRef, 'button-' + buttonAttr, true);
btnAttrs.push(buttonAttr);
}
});
setRole(val) {
this._role = val;
}
_readAttrs(element) {
let elementAttrs = element.attributes;
let attrName;
for (let i = 0, l = attrs.length; i < l; i++) {
attrName = attrs[i].name;
if (attrs[i].value === '' && COMMON_HTML_ATTR.test(attrName) !== true && BUTTON_TYPE_ATTRS.indexOf(attrName) < 0 && BUTTON_SIZE_ATTRS.indexOf(attrName) < 0) {
if (btnAttrs.length) {
btnAttrs.forEach(buttonAttr => {
renderer.setElementClass(elementRef, 'button-' + buttonAttr + '-' + attrName, true);
});
} else {
renderer.setElementClass(elementRef, 'button-' + attrName, true);
}
for (let i = 0, l = elementAttrs.length; i < l; i++) {
if (elementAttrs[i].value !== '') continue;
attrName = elementAttrs[i].name;
if (BUTTON_STYLE_ATTRS.indexOf(attrName) > -1) {
this._style = attrName;
} else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) {
this._display = attrName;
} else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) {
this._size = attrName;
} else if (!(IGNORE_ATTRS.test(attrName))) {
this._colors.push(attrName);
}
}
}
_assignCss(assignCssClass) {
let setElementClass = this.renderer.setElementClass;
let elementRef = this.elementRef;
let role = this._role;
if (role) {
setElementClass(elementRef, role, assignCssClass); // button
if (this._style) setElementClass(elementRef, role + '-' + this._style, assignCssClass); // button-clear
if (this._display) setElementClass(elementRef, role + '-' + this._display, assignCssClass); // button-full
if (this._size) setElementClass(elementRef, role + '-' + this._size, assignCssClass); // button-small
this._colors.forEach(color => {
setElementClass(elementRef, role + '-' + color, assignCssClass); // button-secondary
});
}
}
static setRoles(contentButtonChildren, role) {
let buttons = contentButtonChildren.toArray();
buttons.forEach(button => {
button.setRole(role);
});
}
}
const COMMON_HTML_ATTR = /id|class|type|href|ng-/;
const BUTTON_TYPE_ATTRS = ['block', 'full', 'round', 'clear', 'outline'];
const BUTTON_SIZE_ATTRS = ['large', 'small'];
const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab'];
const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
const IGNORE_ATTRS = /_ng/;
const TEXT = 1;
const ICON = 2;