Skip to content

Commit

Permalink
Merge pull request #3 from livecomponents/v0.0.2
Browse files Browse the repository at this point in the history 
[v0.0.2] Updates docs, demo & events
  • Loading branch information
@Nevraeka
Nevraeka authored Mar 22, 2020
2 parents cf811d1 + 350bcfa commit 838932c
Show file tree
Hide file tree
Showing 4 changed files with 233 additions and 167 deletions.
52 changes: 33 additions & 19 deletions README.md
View file
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
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

0 comments on commit 838932c

Please sign in to comment.