-
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(drawer): add mdc-deprecated-list
fixes #55
- Loading branch information
1 parent
1de730a
commit 50cab88
Showing
20 changed files
with
612 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
...list/src/mdc-deprecated-list/mdc-deprecated-list-divider/mdc-deprecated-list-divider.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <template role="separator" | ||
| class="mdc-deprecated-list-divider ${padded ? 'mdc-deprecated-list-divider--padded' : ''} ${inset ? 'mdc-deprecated-list-divider--inset' : ''}"> | ||
| </template> |
18 changes: 18 additions & 0 deletions
18
...s/list/src/mdc-deprecated-list/mdc-deprecated-list-divider/mdc-deprecated-list-divider.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { customElement, useView, PLATFORM } from 'aurelia-framework'; | ||
| import { bindable } from 'aurelia-typed-observable-plugin'; | ||
|
|
||
| /** | ||
| * Optional, for list divider element | ||
| * @selector mdc-deprecated-list-divider | ||
| */ | ||
| @useView(PLATFORM.moduleName('./mdc-deprecated-list-divider.html')) | ||
| @customElement('mdc-deprecated-list-divider') | ||
| export class MdcDeprecatedListDivider { | ||
| /** To make a divider match the padding of list items */ | ||
| @bindable.booleanAttr | ||
| padded: boolean; | ||
|
|
||
| /** Increases the leading margin of the divider so that it does not intersect the avatar column */ | ||
| @bindable.booleanAttr | ||
| inset: boolean; | ||
| } |
25 changes: 25 additions & 0 deletions
25
packages/list/src/mdc-deprecated-list/mdc-deprecated-list-group.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { inlineView, customElement, children, customAttribute, inject } from 'aurelia-framework'; | ||
|
|
||
| /** | ||
| * Optional. Wrapper around two or more mdc-list elements to be grouped together. | ||
| * @selector mdc-deprecated-list-group | ||
| */ | ||
| @inlineView('<template class="mdc-deprecated-list-group"><slot></slot></template>') | ||
| @customElement('mdc-deprecated-list-group') | ||
| export class MdcDeprecatedListGroup { | ||
| @children('h1,h2,h3,h4,h5,h6') | ||
| headers: HTMLElement[]; | ||
| headersChanged() { | ||
| this.headers.forEach(x => x.classList.add('mdc-deprecated-list-group__subheader')); | ||
| } | ||
| } | ||
|
|
||
| @inject(Element) | ||
| @customAttribute('mdc-deprecated-list-group-subheader') | ||
| export class MdcDeprecatedListGroupSubheader { | ||
| constructor(private root: HTMLElement) { } | ||
|
|
||
| attached() { | ||
| this.root.classList.add('mdc-deprecated-list-group__subheader'); | ||
| } | ||
| } |
15 changes: 15 additions & 0 deletions
15
packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item-graphic.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { customAttribute, inject } from 'aurelia-framework'; | ||
|
|
||
| /** | ||
| * Optional. The first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image. | ||
| * @selector [mdc-deprecated-list-item-graphic] | ||
| */ | ||
| @inject(Element) | ||
| @customAttribute('mdc-deprecated-list-item-graphic') | ||
| export class MdcDeprecatedListItemGraphic { | ||
| constructor(private root: HTMLElement) { } | ||
|
|
||
| attached() { | ||
| this.root.classList.add('mdc-deprecated-list-item__graphic'); | ||
| } | ||
| } |
15 changes: 15 additions & 0 deletions
15
packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item-meta.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { customAttribute, inject } from 'aurelia-framework'; | ||
|
|
||
| /** | ||
| * Optional. The last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image. | ||
| * @selector [mdc-deprecated-list-item-meta] | ||
| */ | ||
| @inject(Element) | ||
| @customAttribute('mdc-deprecated-list-item-meta') | ||
| export class MdcDeprecatedListItemMeta { | ||
| constructor(private root: HTMLElement) { } | ||
|
|
||
| attached() { | ||
| this.root.classList.add('mdc-deprecated-list-item__meta'); | ||
| } | ||
| } |
9 changes: 9 additions & 0 deletions
9
packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item-primary-text.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { inlineView, customElement } from 'aurelia-framework'; | ||
|
|
||
| /** | ||
| * Optional, primary text for the list item | ||
| * @selector mdc-deprecated-list-item-primary-text | ||
| */ | ||
| @inlineView('<template class="mdc-deprecated-list-item__primary-text"><slot></slot></template>') | ||
| @customElement('mdc-deprecated-list-item-primary-text') | ||
| export class MdcDeprecatedListItemPrimaryText { } |
9 changes: 9 additions & 0 deletions
9
packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item-secondary-text.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { inlineView, customElement } from 'aurelia-framework'; | ||
|
|
||
| /** | ||
| * Optional, secondary text for the list item. Displayed below the primary text. | ||
| * @selector mdc-deprecated-list-item-secondary-text | ||
| */ | ||
| @inlineView('<template class="mdc-deprecated-list-item__secondary-text"><slot></slot></template>') | ||
| @customElement('mdc-deprecated-list-item-secondary-text') | ||
| export class MdcDeprecatedListItemPrimaryText { } |
11 changes: 11 additions & 0 deletions
11
...list/src/mdc-deprecated-list/mdc-deprecated-list-item/enhance-mdc-deprecated-list-item.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { viewEngineHooks } from 'aurelia-framework'; | ||
|
|
||
| @viewEngineHooks | ||
| export class EnhanceMdcDeprecatedListItem { | ||
| beforeCompile(template: DocumentFragment) { | ||
| const actions = template.querySelectorAll('[mdc-deprecated-list-item]'); | ||
| for (const i of Array.from(actions)) { | ||
| i.setAttribute('as-element', 'mdc-deprecated-list-item'); | ||
| } | ||
| } | ||
| } |
8 changes: 8 additions & 0 deletions
8
packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <template class="mdc-deprecated-list-item | ||
| ${disabled ? 'mdc-deprecated-list-item--disabled' : ''} | ||
| ${activated ? 'mdc-deprecated-list-item--activated' : ''} | ||
| " id="mdc-deprecated-list-item-${id}" mdc-ripple="disabled.bind: disabled || disableRipple" keydown.trigger="onKeydown($event)" | ||
| click.trigger="onClick()"> | ||
| <div class="mdc-deprecated-list-item__ripple"></div> | ||
| <slot></slot> | ||
| </template> |
97 changes: 97 additions & 0 deletions
97
packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { inject, useView, customElement, processContent, ViewCompiler, ViewResources } from 'aurelia-framework'; | ||
| import { PLATFORM } from 'aurelia-pal'; | ||
| import { bindable } from 'aurelia-typed-observable-plugin'; | ||
|
|
||
| let listItemId = 0; | ||
|
|
||
| const ENTER = 13; | ||
| const SPACE = 32; | ||
| const LIST_ITEM_ACTION = 'mdclistitem:action'; | ||
|
|
||
| /** | ||
| * @selector mdc-deprecated-list-item | ||
| */ | ||
| @inject(Element) | ||
| @useView(PLATFORM.moduleName('./mdc-deprecated-list-item.html')) | ||
| @customElement('mdc-deprecated-list-item') | ||
| @processContent(MdcDeprecatedListItem.processContent) | ||
| export class MdcDeprecatedListItem { | ||
| constructor(public root: HTMLElement) { } | ||
|
|
||
| static processContent(_viewCompiler: ViewCompiler, _resources: ViewResources, element: Element) { | ||
| const graphic = element.querySelector('mdc-checkbox:not([mdc-deprecated-list-item-meta]),[mdc-deprecated-list-item-graphic]'); | ||
| if (graphic) { | ||
| element.removeChild(graphic); | ||
| } | ||
| const meta = element.querySelector('[mdc-deprecated-list-item-meta]'); | ||
| if (meta) { | ||
| element.removeChild(meta); | ||
| } | ||
| const itemText = document.createElement('span'); | ||
| itemText.classList.add('mdc-deprecated-list-item__text'); | ||
| const children = [].slice.call(element.childNodes) as ChildNode[]; | ||
| for (let i = 0; i < children.length; ++i) { | ||
| itemText.appendChild(children[i]); | ||
| } | ||
| if (graphic) { | ||
| element.appendChild(graphic); | ||
| } | ||
| element.appendChild(itemText); | ||
| if (meta) { | ||
| element.appendChild(meta); | ||
| } | ||
| return true; | ||
| } | ||
|
|
||
| id = ++listItemId; | ||
|
|
||
| /** Disables the list item */ | ||
| @bindable.booleanAttr | ||
| disabled: boolean; | ||
|
|
||
| /** Styles the row in an activated state */ | ||
| @bindable.booleanAttr | ||
| activated: boolean; | ||
|
|
||
| /** Random data associated with the list item. Passed in events payload. */ | ||
| @bindable | ||
| value: unknown; | ||
|
|
||
| /** Disables ripple effect */ | ||
| @bindable.booleanAttr | ||
| disableRipple: boolean; | ||
|
|
||
| onKeydown(evt: KeyboardEvent) { | ||
| if ((evt.keyCode === ENTER || evt.keyCode === SPACE) && !this.disabled) { | ||
| this.root.dispatchEvent(new CustomEvent(LIST_ITEM_ACTION, { detail: { item: this, data: this.value }, bubbles: true })); | ||
| } | ||
| return true; | ||
| } | ||
|
|
||
| onClick() { | ||
| if (!this.disabled) { | ||
| this.root.dispatchEvent(new CustomEvent(LIST_ITEM_ACTION, { detail: { item: this, data: this.value }, bubbles: true })); | ||
| } | ||
| return true; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| /** @hidden */ | ||
| export interface IMdcListItemElement extends HTMLElement { | ||
| au: { | ||
| controller: { | ||
| viewModel: MdcDeprecatedListItem; | ||
| }; | ||
| }; | ||
| } | ||
|
|
||
| export interface IMdcListActionEventDetail { | ||
| index: number; | ||
| data: unknown; | ||
| } | ||
|
|
||
| /** @hidden */ | ||
| export interface IMdcListActionEvent extends Event { | ||
| detail: IMdcListActionEventDetail; | ||
| } |
Oops, something went wrong.