-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Layouts: Cluster, Cover, Frame, Grid Reel, SideBar
Modify: Box, Center, Stack and all *.html files Add: notes.txt
- Loading branch information
1 parent
a548dc6
commit 995a19f
Showing
25 changed files
with
2,331 additions
and
78 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| customElements.define( | ||
| 'cluster-layout', | ||
| class extends HTMLElement { | ||
| constructor() { | ||
| super() | ||
| this.attachShadow({ mode: 'open' }) | ||
| } | ||
|
|
||
| render() { | ||
| // prettier-ignore | ||
| this.shadowRoot.innerHTML = ` | ||
| <style> | ||
| :host { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: ${this.justify}; | ||
| align-items: ${this.align}; | ||
| gap: ${this.space}; | ||
| } | ||
| </style> | ||
| <slot></slot> | ||
| ` | ||
| console.log('box:', this.shadowRoot.innerHTML) | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| this.render() | ||
| } | ||
| attributeChangedCallback() { | ||
| this.render() | ||
| } | ||
|
|
||
| static get observedAttributes() { | ||
| return ['justify', 'align', 'space'] | ||
| } | ||
| get justify() { | ||
| return this.getAttribute('justify') || 'flex-start' | ||
| } | ||
| set justify(val) { | ||
| return this.setAttribute('justify', val) | ||
| } | ||
| get align() { | ||
| return this.getAttribute('align') || 'flex-start' | ||
| } | ||
| set align(val) { | ||
| return this.setAttribute('align', val) | ||
| } | ||
| get space() { | ||
| return this.getAttribute('space') || 'var(--s1)' | ||
| } | ||
| set space(val) { | ||
| return this.setAttribute('space', val) | ||
| } | ||
| } | ||
| ) |
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,153 @@ | ||
| customElements.define( | ||
| 'cover-layout', | ||
| class extends HTMLElement { | ||
| constructor() { | ||
| super() | ||
| this.attachShadow({ mode: 'open' }) | ||
| } | ||
|
|
||
| render() { | ||
| // prettier-ignore | ||
| this.shadowRoot.innerHTML = ` | ||
| <style> | ||
| :host { | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-block-size: ${this.minHeight}; | ||
| min-height: ${this.minHeight}; | ||
| padding: ${this.noPad ? '0' : this.space }; | ||
| } | ||
| ::slotted(:firstChild) { | ||
| margin-block-start: 0; | ||
| } | ||
| ::slotted(:lastChild) { | ||
| margin-block-end: 0; | ||
| } | ||
| ::slotted(:nth-Child(2)) { | ||
| margin-block: auto; | ||
| } | ||
| </style> | ||
| <slot></slot> | ||
| ` | ||
| console.log('cover:', this.shadowRoot.innerHTML) | ||
| console.log('children:', this.childElementCount) | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| this.render() | ||
| } | ||
| attributeChangedCallback() { | ||
| this.render() | ||
| } | ||
|
|
||
| static get observedAttributes() { | ||
| return ['centered', 'space', 'minHeight', 'noPad'] | ||
| } | ||
| get centered() { | ||
| return this.getAttribute('centered') || 'h1' | ||
| } | ||
| set centered(val) { | ||
| return this.setAttribute('centered', val) | ||
| } | ||
| get space() { | ||
| return this.getAttribute('space') || 'var(--s1)' | ||
| } | ||
| set space(val) { | ||
| return this.setAttribute('space', val) | ||
| } | ||
| get minHeight() { | ||
| return this.getAttribute('minHeight') || '100vh' | ||
| } | ||
| set minHeight(val) { | ||
| return this.setAttribute('minHeight', val) | ||
| } | ||
| get noPad() { | ||
| return this.hasAttribute('noPad') | ||
| } | ||
| set noPad(val) { | ||
| if (val) { | ||
| return this.setAttribute('noPad', '') | ||
| } else { | ||
| return this.removeAttribute('noPad') | ||
| } | ||
| } | ||
| } | ||
| ) | ||
|
|
||
| /* | ||
| ::slotted(*) { | ||
| margin-block: ${this.space}; | ||
| } | ||
| cover-l { | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-block-size: 100vh; | ||
| padding: var(--s1); | ||
| } | ||
| styleEl.innerHTML = ` | ||
| [data-i="${this.i}"] { | ||
| min-height: ${this.minHeight}; | ||
| padding: ${!this.noPad ? this.space : '0'}; | ||
| } | ||
| [data-i="${this.i}"] > * { | ||
| margin-block: ${this.space}; | ||
| } | ||
| [data-i="${this.i}"] > :first-child:not(${this.centered}) { | ||
| margin-block-start: 0; | ||
| } | ||
| [data-i="${this.i}"] > :last-child:not(${this.centered}) { | ||
| margin-block-end: 0; | ||
| } | ||
| [data-i="${this.i}"] > ${this.centered} { | ||
| margin-block: auto; | ||
| } | ||
| ` | ||
| <style> | ||
| :host { | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-block-size: 100vh; | ||
| min-height: ${this.minHeight}; | ||
| padding: ${!this.noPad ? this.space : '0'}; | ||
| } | ||
| ::slotted(*) { | ||
| margin-block: ${this.space}; | ||
| } | ||
| ::slotted(:firstChild:not(${this.centered}) ) { | ||
| margin-block-start: 0; | ||
| } | ||
| ::slotted(:lastChild:not(${this.centered}) ) { | ||
| margin-block-end: 0; | ||
| } | ||
| ::slotted((${this.centered}) ) { | ||
| margin-block-end: auto; | ||
| } | ||
| </style> | ||
| <slot></slot> | ||
| ` | ||
| */ |
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,56 @@ | ||
| customElements.define( | ||
| 'frame-layout', | ||
| class extends HTMLElement { | ||
| constructor() { | ||
| super() | ||
| this.attachShadow({ mode: 'open' }) | ||
| } | ||
|
|
||
| render() { | ||
| if (this.children.length !== 1) { | ||
| console.warn('<frame-layout> can have just one child element') | ||
| } | ||
|
|
||
| let ratio = this.ratio.split(':') | ||
| // prettier-ignore | ||
| this.shadowRoot.innerHTML = ` | ||
| <style> | ||
| :host { | ||
| aspect-ratio: ${ratio[0]} / ${ratio[1]}; | ||
| overflow: hidden; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| ::slotted(img), | ||
| ::slotted(video){ | ||
| inline-size: 100%; | ||
| block-size: 100%; | ||
| object-fit: cover; | ||
| } | ||
| </style> | ||
| <slot></slot> | ||
| ` | ||
| console.log('frame:', this.shadowRoot.innerHTML) | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| this.render() | ||
| } | ||
| attributeChangedCallback() { | ||
| this.render() | ||
| } | ||
|
|
||
| static get observedAttributes() { | ||
| return ['ratio'] | ||
| } | ||
| get ratio() { | ||
| return this.getAttribute('ratio') || '16:9' | ||
| } | ||
| set ratio(val) { | ||
| return this.setAttribute('ratio', val) | ||
| } | ||
| } | ||
| ) |
Oops, something went wrong.