Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
556 additions
and
10 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| # ebay-tab | ||
|
|
||
| ## ebay-tab Usage | ||
|
|
||
| ```marko | ||
| <ebay-tab> | ||
| <ebay-tab-heading>Tab 1</ebay-tab-heading> | ||
| <ebay-tab-heading>Tab 2</ebay-tab-heading> | ||
| <ebay-tab-heading>Tab 3</ebay-tab-heading> | ||
| <ebay-tab-panel>Panel 1</ebay-tab-panel> | ||
| <ebay-tab-panel>Panel 2</ebay-tab-panel> | ||
| <ebay-tab-panel>Panel 3</ebay-tab-panel> | ||
| </ebay-tab> | ||
| ``` | ||
|
|
||
| ## ebay-tab Attributes | ||
|
|
||
| Name | Type | Stateful | Description | ||
| --- | --- | --- | --- | ||
| `index` | String | Yes | 0-based index of selected tab heading and panel | ||
| `fake` | Boolean | No | Whether to use link behavior for tab headings | ||
|
|
||
| ## ebay-tab Events | ||
|
|
||
| Event | Data | Description | ||
| --- | --- | --- | ||
| `tab-select` | `{ index }` | | ||
|
|
||
| ## ebay-tab-heading Tag | ||
|
|
||
| ### ebay-tab-heading Usage | ||
|
|
||
| ```marko | ||
| <ebay-tab-heading>Tab 1</ebay-tab-heading> | ||
| ``` | ||
|
|
||
| ## ebay-tab-heading Attributes | ||
|
|
||
| Name | Type | Stateful | Description | ||
| --- | --- | --- | --- | ||
| `href` | String | No | For use with `fake` tab component | ||
|
|
||
| ## ebay-tab-panel Tag | ||
|
|
||
| ### ebay-tab-panel Usage | ||
|
|
||
| ```marko | ||
| <ebay-tab-panel>Panel 1</ebay-tab-panel> | ||
| ``` |
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,10 @@ | ||
| { | ||
| "dependencies": [ | ||
| { | ||
| "if-not-flag": "ebayui-no-skin", | ||
| "path": "@ebay/skin/tab" | ||
| }, | ||
| "require: marko-widgets", | ||
| "require: ./index.js" | ||
| ] | ||
| } |
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,17 @@ | ||
| <ebay-tab> | ||
| <ebay-tab-heading>Tab 1</ebay-tab-heading> | ||
| <ebay-tab-heading>Tab 2</ebay-tab-heading> | ||
| <ebay-tab-heading>Tab 3</ebay-tab-heading> | ||
| <ebay-tab-panel> | ||
| <h3>Panel 1</h3> | ||
| <p>1. Lorem ipsum dolor sit amet</p> | ||
| </ebay-tab-panel> | ||
| <ebay-tab-panel> | ||
| <h3>Panel 2</h3> | ||
| <p>2. Lorem ipsum dolor sit amet</p> | ||
| </ebay-tab-panel> | ||
| <ebay-tab-panel> | ||
| <h3>Panel 3</h3> | ||
| <p>3. Lorem ipsum dolor sit amet</p> | ||
| </ebay-tab-panel> | ||
| </ebay-tab> |
17 changes: 17 additions & 0 deletions
17
src/components/ebay-tab/examples/02-starting-index/template.marko
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,17 @@ | ||
| <ebay-tab index="2"> | ||
| <ebay-tab-heading>Tab 1</ebay-tab-heading> | ||
| <ebay-tab-heading>Tab 2</ebay-tab-heading> | ||
| <ebay-tab-heading>Tab 3</ebay-tab-heading> | ||
| <ebay-tab-panel> | ||
| <h3>Panel 1</h3> | ||
| <p>1. Lorem ipsum dolor sit amet</p> | ||
| </ebay-tab-panel> | ||
| <ebay-tab-panel> | ||
| <h3>Panel 2</h3> | ||
| <p>2. Lorem ipsum dolor sit amet</p> | ||
| </ebay-tab-panel> | ||
| <ebay-tab-panel> | ||
| <h3>Panel 3</h3> | ||
| <p>3. Lorem ipsum dolor sit amet</p> | ||
| </ebay-tab-panel> | ||
| </ebay-tab> |
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 @@ | ||
| <ebay-tab fake> | ||
| <ebay-tab-heading href="https://www.ebay.com/">Tab 1</ebay-tab-heading> | ||
| <ebay-tab-heading href="https://www.ebay.com/">Tab 2</ebay-tab-heading> | ||
| <ebay-tab-heading href="https://www.ebay.com/">Tab 3</ebay-tab-heading> | ||
| <ebay-tab-panel> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare, quam at lacinia pretium, lacus urna luctus nisi, eget molestie massa tortor id lacus. Aenean ac fringilla lacus. Fusce vel dui ex. Vivamus luctus egestas nulla, non hendrerit purus luctus at. Maecenas vel diam enim. Pellentesque quam neque, porttitor tincidunt vestibulum at, dapibus sit amet tortor.</p> | ||
| </ebay-tab-panel> | ||
| </ebay-tab> |
8 changes: 8 additions & 0 deletions
8
src/components/ebay-tab/examples/04-fake-with-starting-index/template.marko
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 @@ | ||
| <ebay-tab fake index="1"> | ||
| <ebay-tab-heading href="https://www.ebay.com/">Tab 1</ebay-tab-heading> | ||
| <ebay-tab-heading href="https://www.ebay.com/">Tab 2</ebay-tab-heading> | ||
| <ebay-tab-heading href="https://www.ebay.com/">Tab 3</ebay-tab-heading> | ||
| <ebay-tab-panel> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare, quam at lacinia pretium, lacus urna luctus nisi, eget molestie massa tortor id lacus. Aenean ac fringilla lacus. Fusce vel dui ex. Vivamus luctus egestas nulla, non hendrerit purus luctus at. Maecenas vel diam enim. Pellentesque quam neque, porttitor tincidunt vestibulum at, dapibus sit amet tortor.</p> | ||
| </ebay-tab-panel> | ||
| </ebay-tab> |
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,105 @@ | ||
| const markoWidgets = require('marko-widgets'); | ||
| const rovingTabindex = require('makeup-roving-tabindex'); | ||
| const emitAndFire = require('../../common/emit-and-fire'); | ||
| const eventUtils = require('../../common/event-utils'); | ||
| const processHtmlAttributes = require('../../common/html-attributes'); | ||
| const observer = require('../../common/property-observer'); | ||
| const template = require('./template.marko'); | ||
|
|
||
| function getInitialState(input) { | ||
| const fake = Boolean(input.fake); | ||
| const index = parseInt(input.index) || 0; | ||
| const headings = (input.headings || []).map(heading => ({ | ||
| renderBody: heading.renderBody, | ||
| classes: fake ? heading.class : [heading.class, 'tabs__item'], | ||
| href: heading.href, | ||
| htmlAttributes: processHtmlAttributes(heading) | ||
| })); | ||
| const panels = (input.panels || []).map(panel => ({ | ||
| renderBody: panel.renderBody, | ||
| classes: [panel.class, prefix(fake, 'tabs__panel')], | ||
| htmlAttributes: processHtmlAttributes(panel) | ||
| })); | ||
|
|
||
| return { | ||
| index, | ||
| fake, | ||
| headings, | ||
| panels, | ||
| classes: [input.class, prefix(fake, 'tabs')], | ||
| htmlAttributes: processHtmlAttributes(input) | ||
| }; | ||
| } | ||
|
|
||
| function getTemplateData(state) { | ||
| return state; | ||
| } | ||
|
|
||
| function init() { | ||
| this.headingsEl = this.getEl('headings'); | ||
| if (!this.state.fake) { | ||
| rovingTabindex.createLinear(this.headingsEl, 'div', { index: 0, autoReset: 0 }); | ||
| } | ||
| observer.observeRoot(this, ['index'], index => this.processStateChange(parseInt(index)), true); | ||
| } | ||
|
|
||
| /** | ||
| * Common processing of index change via both UI and API | ||
| * @param {Number} index | ||
| */ | ||
| function processStateChange(index) { | ||
| if (index >= 0 && index < this.state.headings.length && index !== this.state.index) { | ||
| this.setState('index', index); | ||
| emitAndFire(this, 'tab-select', { index }); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Handle mouse click on heading | ||
| * @param {MouseEvent} e | ||
| */ | ||
| function handleHeadingClick(e) { | ||
| let headingEl = e.target; | ||
| const headingClass = prefix(this.state.fake, 'tabs__item'); | ||
| while (!headingEl.classList.contains(headingClass)) { | ||
| headingEl = headingEl.parentNode; | ||
| } | ||
|
|
||
| this.processStateChange(getElementIndex(headingEl)); | ||
| } | ||
|
|
||
| /** | ||
| * Get 0-based index of element within its parent | ||
| * @param {HTMLElement} headingEl | ||
| */ | ||
| function getElementIndex(headingEl) { | ||
| return Array.prototype.slice.call(headingEl.parentNode.children).indexOf(headingEl); | ||
| } | ||
|
|
||
| /** | ||
| * Handle accessibility for heading | ||
| * https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html | ||
| * @param {KeyboardEvent} e | ||
| */ | ||
| function handleHeadingKeydown(e) { | ||
| eventUtils.handleActionKeydown(e, () => this.handleHeadingClick(e)); | ||
| } | ||
|
|
||
| /** | ||
| * Helper to prefix a class based on fake status | ||
| * @param {Boolean} fake | ||
| * @param {String} c | ||
| */ | ||
| function prefix(fake, c) { | ||
| return (fake ? 'fake-' : '') + c; | ||
| } | ||
|
|
||
| module.exports = markoWidgets.defineComponent({ | ||
| template, | ||
| getInitialState, | ||
| getTemplateData, | ||
| init, | ||
| processStateChange, | ||
| handleHeadingClick, | ||
| handleHeadingKeydown | ||
| }); |
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,6 @@ | ||
| const headings = [{}, {}, {}]; | ||
| const panels = [{}, {}, {}]; | ||
|
|
||
| const fakeHeadings = [{ href: '#' }, { href: '#' }, { href: '#' }]; | ||
|
|
||
| module.exports = { headings, panels, fakeHeadings }; |
Oops, something went wrong.