Skip to content
This repository has been archived by the owner on Feb 2, 2019. It is now read-only.

Commit

Permalink
feat(tabs): add ink ripple to tab buttons
Browse files Browse the repository at this point in the history
 - add Ink.canApply function to determine if an element has no-ink specified on it.
 - update button and tabs to use Ink.canApply.
 - add click handler to tab buttons for applying ink ripples.
  • Loading branch information
justindujardin committed Dec 19, 2015
1 parent 2284af5 commit 3636925
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 17 deletions.
7 changes: 2 additions & 5 deletions ng2-material/components/button/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,7 @@ export class MdButton {
/** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */
isKeyboardFocused: boolean = false;

private _noInk: boolean = false;

constructor(private _element: ElementRef, @Attribute('md-no-ink') mdNoInk: string) {
this._noInk = isPresent(mdNoInk);
constructor(private _element: ElementRef) {
}

onMousedown(event) {
Expand All @@ -46,7 +43,7 @@ export class MdButton {
this.isMouseDown = false
}, 100);

if (!this._noInk) {
if (Ink.canApply(this._element.nativeElement)) {
Ink.rippleEvent(this._element.nativeElement, event);
}
}
Expand Down
2 changes: 1 addition & 1 deletion ng2-material/components/tabs/tabs.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<md-pagination-wrapper>
<md-tab-item tabindex="-1"
class="md-tab"
(click)="select(pane)"
(click)="clickTabButton(pane,$event)"
[class.md-active]="selected == pane"
[style.max-width]="maxTabWidth + 'px'"
*ngFor="#pane of panes"
Expand Down
44 changes: 33 additions & 11 deletions ng2-material/components/tabs/tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,22 @@ import {Component, Directive, Input, QueryList,
ViewContainerRef, TemplateRef, ContentChildren} from 'angular2/core';
import {AfterContentInit} from "angular2/core";
import {Attribute} from "angular2/core";
import {isPresent} from "angular2/src/facade/lang";
import {OnChanges} from "angular2/core";
import {Ink} from "../../core/util/ink";
import {ElementRef} from "angular2/core";
@Directive({
selector: '[md-tab]'
})
export class MdTab {
@Input() label: string;
@Input() disabled: boolean = false;
private _active: boolean = false;

constructor(public viewContainer: ViewContainerRef,
@Attribute('disabled') disabled: string,
public templateRef: TemplateRef) {
this.disabled = isPresent(disabled);
}

@Input() set active(active: boolean) {
Expand All @@ -31,10 +38,14 @@ export class MdTab {
selector: 'md-tabs',
templateUrl: 'ng2-material/components/tabs/tabs.html'
})
export class MdTabs implements AfterContentInit {
export class MdTabs implements AfterContentInit, OnChanges {
@ContentChildren(MdTab) panes: QueryList<MdTab>;

constructor(@Attribute('mdNoScroll') private _mdNoScroll: string) {
@Input() mdNoScroll: boolean = false;

constructor(private _element: ElementRef,
@Attribute('mdNoScroll') noScroll: string) {
this.mdNoScroll = isPresent(noScroll);
}

private _selectedIndex: number = -1;
Expand All @@ -50,14 +61,6 @@ export class MdTabs implements AfterContentInit {
}
}

ngAfterContentInit(): any {
setTimeout(()=> {
if (this._selectedIndex === -1) {
this.select(this.panes.toArray()[0]);
}
}, 0);
}

get selected(): MdTab {
let result = null;
this.panes.toArray().forEach((p: MdTab) => {
Expand All @@ -68,8 +71,27 @@ export class MdTabs implements AfterContentInit {
return result;
}


select(pane: MdTab) {
this.panes.toArray().forEach((p: MdTab) => p.active = p == pane);
}

clickTabButton(pane: MdTab, event?) {
if (event && Ink.canApply(event.target)) {
Ink.rippleEvent(event.target, event);
}
this.select(pane);
}

ngAfterContentInit(): any {
setTimeout(()=> {
if (this._selectedIndex === -1) {
this.select(this.panes.toArray()[0]);
}
}, 0);
}

ngOnChanges(changes: {}): any {

}

}
8 changes: 8 additions & 0 deletions ng2-material/core/util/ink.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@ import {Animate} from "./animate";
*/
export class Ink {

/**
* Determine if ink can be applied to a given element.
* @param element The element to check
*/
static canApply(element: HTMLElement): boolean {
return !DOM.hasAttribute(element, 'md-no-ink');
}

/**
* Ink ripples are equal in height/width, so get the scalar size
* of the container.
Expand Down

0 comments on commit 3636925

Please sign in to comment.