Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[v0.0.2] Updates docs, demo & events #3

Merged
merged 1 commit into from
Mar 22, 2020
Merged

[v0.0.2] Updates docs, demo & events #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 33 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,54 +11,71 @@ To initialize this component for all supported browsers, you must add scripts to
<script crossorigin type="module" src="https://somecdn.com/@livecomponents/panel-set/master/panel-set.mjs"></script>

<!-- OPTIONAL: fallback module if BASIC STYLING and MINIMAL FUNCTIONAL SUPPORT for older browsers -->
<script crossorigin nomodule type="text/javascript" src="https://somecdn.com/@livecomponents/panel-set/master/panel-set.js"></script>
<script crossorigin nomodule type="text/javascript" src="https://somecdn.com/livecomponents/panel-set/master/panel-set.js"></script>
```

#### Minimal HTML Content (for SEO)*
This is the HTML required to be on page before Google can scan the page for their indexing algorithm. This is usually achieved via `prerendering` or `server side rendering (SSR)`. None of the JavaScript or CSS for the `<panel-set />` is necessary for the page to be indexed.
#### HTML Content (for SEO)*
This is the HTML required to be on page before Google/Bing can scan the page for their indexing algorithms. This is usually achieved via 'prerendering' or 'server side rendering (SSR)'. None of the JavaScript or CSS for the `<panel-set />` is necessary for the page to be indexed. No content is required by default to be indexed by search engines but here is an HTML example of how you can add content that will be indexed.

```html
<panel-set active-index="0">
<a href="" slot="ps:tab-1">First Item Title</a>
<a href="" slot="ps:tab-1">panel title </a>
<div slot="ps:panel-1">
First Item content
panel content
</div>
</panel-set>
```

### Theming
Set these values to get different themes.

**Custom Properties**
| **Variable Name** | **Default Value** |
| --- | --- |
| `--ps-thang` | `var(--blah, #3777bc)` |
| `--ps--border-color` | `#bcbcbc` |
| `--ps--tab-border-color` | `rgba(255, 255, 255, 0)` |
| `--ps--tab-border-color--active` | `rgba(255, 255, 255, 1)` |
| `--ps--tab-text-color` | `inherit` |

**Shadow Parts (*)**
| **Part Name** | **Summary** |
| --- | --- |
| `ps-summary` | |
| `ps-details` | |
| `ps-tabs` | |
| `ps-panels` | |

(*) Not Supported in Webkit based browsers

### Attributes
| **name** | **summary** | **expected value** |
| --- | --- | --- |
| `active-index` | 'active-index' is something cool | an integer as a string |
none
<!-- | **name** | **summary** | **expected value** |
| --- | --- | --- | -->

### Slots
| **name** | **summary** | **type** | **SEO Requirement** |
| --- | --- | --- | --- |
| `ps:tab-*` | These are the main navigation links | dynamic | ✅ |
| `ps:panel-*` | These are the main navigation links | dynamic | ✅ or ❌ |
| `ps:tab-*` | These are the panel tab links | dynamic | ❌ |
| `ps:panel-*` | These are panel tab content areas | dynamic | ❌ |
*(*) can be multiple elements - each incremented by an integer starting with `1`*

<!-- ✅ or ❌ -->

### Custom Event Hooks
| **name** | **detail data** | **summary** |
| --- | --- | --- |
| `ps:activeElementChanged` | `{ activeIndex: number, activeTab: DOMNode, activePanel: DOMNode }` | triggers when 'active-index' attribute is updated |
| `ps:tabchange` | `{ activeIndex: number, activeTab: DOMNode, activePanel: DOMNode }` | triggers when 'active' attribute is updated on any slot |

## Dependencies
| **name** | **location** | **type** | **reason** | **swappable** |
npne
<!-- | **name** | **location** | **type** | **reason** | **swappable** |
| --- | --- | --- | --- | --- |
| `<no-element>` | `https://somecdn.com/jkjlkjlkjl` | External Custom Element | provides something cool | ✅ or ❌ |
| `<no-element>` | `https://somecdn.com/jkjlkjlkjl` | External Custom Element | provides something cool | ✅ or ❌ | -->

## Customization

### Hiding Slots
There might be times where you want to hide a slot but remove the default value. To do this you must add the slot as normal but add an additional `hidden` attribute to it.
There might be times where you want to hide a slot but remove the default value. To do this you must add the slot as normal but add an additional 'hidden' attribute to it.
```html
<panel-set>
<!-- other slots can go here ... -->
Expand All @@ -67,10 +84,7 @@ There might be times where you want to hide a slot but remove the default value.
```

#### Current SEO Requirements
| **url** | **text** |
| --- | --- |
| | |

none

## Base CSS
Please note that some CSS is injected to the head of the document on initialization of this codebase (ONLY once). This is done to insure that some styling for slots does not get broken by any CSS reset the application.
Expand Down
27 changes: 18 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,29 @@
<title>panel-set demo</title>
<script async type="module" src="panel-set.mjs"></script>
<style>
body {
margin: 0;
}
/*
test: MacBook pro (mojave v10.14.1)
Desktop Safari v12.0.1
result: "::part()" does not work in webkit
*/
#my-panel-set::part(ps-details) {
/* #my-panel-set::part(ps-details) {
min-height: 16px;
background-color: red;
}
#my-panel-set::part(ps-summary) {
} */
/* #my-panel-set::part(ps-summary) {
min-height: 16px;
background-color: gray;
}
#my-panel-set::part(ps-tabs) {
} */
/* #my-panel-set::part(ps-tabs) {
color: red;
}
#my-panel-set::part(ps-panels) {
} */
/* #my-panel-set::part(ps-panels) {
min-height: 16px;
background-color: yellow;
}
} */
</style>
</head>
<body>
Expand All @@ -47,7 +50,7 @@ <h3>Lentil Soup</h3>
<li>basil (2 tsp)</li>
<li>oregano (2 tbsp)</li>
</ul>
<a href="" id="tab-2" slot="ps:tab-2">Directions</a>
<a href="" active id="tab-2" slot="ps:tab-2">Directions</a>
<ol active aria-labelledby="tab-2" slot="ps:panel-2">
<li>In a large pot, heat extra virgin olive oil over medium heat</li>
<li>Stir in the onions, carrots, and celery</li>
Expand Down Expand Up @@ -100,5 +103,11 @@ <h3>Lentil Soup</h3>
ESHA Research, Inc. All Rights Reserved
</div>
</panel-set>
<script>
const panelSet = document.querySelector('#my-panel-set');
panelSet.addEventListener('ps:activeChanged', function(evt){
console.log(evt.detail);
});
</script>
</body>
</html>
Loading