Skip to content

Commit f0dd12d

Browse files
backspacesbackspaces
committed
Update layouts, add to gitignore
1 parent 995a19f commit f0dd12d

34 files changed

+776
-119
lines changed

‎.eslintrc.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// .eslintrc.js
2+
// Also see .prettierrc.js
3+
module.exports = {
4+
env: {
5+
browser: true,
6+
es6: true,
7+
node: true,
8+
},
9+
extends: 'eslint:recommended',
10+
parserOptions: {
11+
ecmaVersion: 2017,
12+
sourceType: 'module',
13+
},
14+
rules: {
15+
curly: ['error', 'multi-line', 'consistent'],
16+
'prefer-const': ['error'],
17+
'no-console': ['error', { allow: ['log', 'warn', 'error'] }],
18+
19+
// Prettier prefers no space after function
20+
// 'space-before-function-paren': 'error',
21+
// 'space-before-function-paren': ['error', 'never'],
22+
23+
// Here to match our Prettier options
24+
semi: ['error', 'never'],
25+
quotes: ['error', 'single'],
26+
indent: ['error', 4],
27+
'comma-dangle': ['error', 'always-multiline'],
28+
'arrow-parens': ['error', 'as-needed'],
29+
},
30+
}

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
# ignore these in the repo
22
node_modules/
3+
notes.txt
4+
package-lock.json
5+
test.html
6+
test1.html

‎.prettierrc.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// .prettierrc.js
2+
// Also see .eslintrc.js
3+
module.exports = {
4+
semi: false,
5+
singleQuote: true,
6+
tabWidth: 4,
7+
trailingComma: 'es5',
8+
arrowParens: 'avoid',
9+
}

‎Attic/root.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// function addCssLink(url) {
2+
// const link = document.createElement('link')
3+
// link.setAttribute('rel', 'stylesheet')
4+
// link.setAttribute('href', url)
5+
// document.head.appendChild(link)
6+
// }
7+
// async function fetchCssStyle(url) {
8+
// const response = await fetch(url)
9+
// if (!response.ok) throw Error(`fetchCssStyle: Not found: ${url}`)
10+
// const css = await response.text()
11+
// addCssStyle(css)
12+
// return css
13+
// }
14+
// if (document.getElementsByClassName('max-width:measure').length === 0) {
15+
// console.log('loading ./root.css')
16+
// await fetchCssStyle('./root.css')
17+
// } else {
18+
// console.log('./root.css already loadedd')
19+
// }
20+
21+
function addCssStyle(css) {
22+
const style = document.createElement('style')
23+
style.id = 'layout-root-styles'
24+
style.innerHTML = css
25+
document.head.appendChild(style)
26+
}
27+
function isLoaded() {
28+
return document.getElementById('layout-root-styles') !== null
29+
}
30+
31+
const css = await fetch('./root.css').then(resp => resp.text())
32+
if (!isLoaded()) {
33+
console.log('loading ...')
34+
addCssStyle(css)
35+
console.log('lowded', isLoaded())
36+
}
37+
38+
// export default isLoaded

‎BoxLayout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ customElements.define(
2424
</style>
2525
<slot></slot>
2626
`
27-
console.log('box:', this.shadowRoot.innerHTML)
27+
// console.log('box:', this.shadowRoot.innerHTML)
2828
}
2929

3030
connectedCallback() {

‎CenterLayout.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,21 @@ customElements.define(
1111
this.shadowRoot.innerHTML = `
1212
<style>
1313
:host {
14-
${ this.intrinsic ? `
14+
${this.intrinsic ? `
1515
display: flex;
1616
flex-direction: column;
17-
align-items: center;` : `display: block;`
17+
align-items: center;` : `display: block;`
1818
}
1919
2020
box-sizing: content-box;
2121
margin-inline: auto;
22-
max-inline-size: var(--measure);
22+
/* max-inline-size: var(--measure); */
2323
2424
max-width: ${this.max};
2525
2626
${ this.gutters ? `
2727
padding-inline-start: ${this.gutters};
28-
padding-inline-end: ${this.gutters};` : ''
28+
padding-inline-end: ${this.gutters};` : ''
2929
}
3030
3131
${this.andText ? `text-align: center;` : ''}
@@ -35,7 +35,7 @@ customElements.define(
3535
</style>
3636
<slot></slot>
3737
`
38-
console.log('center', this.shadowRoot.innerHTML)
38+
// console.log('center', this.shadowRoot.innerHTML)
3939
}
4040

4141
connectedCallback() {

‎ClusterLayout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ customElements.define(
2121
</style>
2222
<slot></slot>
2323
`
24-
console.log('box:', this.shadowRoot.innerHTML)
24+
// console.log('box:', this.shadowRoot.innerHTML)
2525
}
2626

2727
connectedCallback() {

‎CoverLayout.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ customElements.define(
3434
</style>
3535
<slot></slot>
3636
`
37-
console.log('cover:', this.shadowRoot.innerHTML)
38-
console.log('children:', this.childElementCount)
37+
// console.log('cover:', this.shadowRoot.innerHTML)
38+
// console.log('children:', this.childElementCount)
3939
}
4040

4141
connectedCallback() {

‎FrameLayout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ customElements.define(
3333
</style>
3434
<slot></slot>
3535
`
36-
console.log('frame:', this.shadowRoot.innerHTML)
36+
// console.log('frame:', this.shadowRoot.innerHTML)
3737
}
3838

3939
connectedCallback() {

‎GridLayout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ customElements.define(
2020
</style>
2121
<slot></slot>
2222
`
23-
console.log('grid:', this.shadowRoot.innerHTML)
23+
// console.log('grid:', this.shadowRoot.innerHTML)
2424
}
2525

2626
connectedCallback() {

‎ImposterLayout.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
customElements.define(
2+
'imposter-layout',
3+
class extends HTMLElement {
4+
constructor() {
5+
super()
6+
this.attachShadow({ mode: 'open' })
7+
}
8+
9+
render() {
10+
// prettier-ignore
11+
this.shadowRoot.innerHTML = `
12+
<style>
13+
:host {
14+
${ this.fixed ? `position: fixed;` : 'position: absolute;' }
15+
16+
inset-block-start: 50%;
17+
inset-inline-start: 50%;
18+
transform: translate(-50%, -50%);
19+
20+
${ !this.breakout ? `
21+
max-inline-size: calc(100% - (${this.margin} * 2));
22+
max-block-size: calc(100% - (${this.margin} * 2));
23+
overflow: auto;` : ''
24+
}
25+
}
26+
</style>
27+
<slot></slot>
28+
`
29+
console.log('imposter:', this.shadowRoot.innerHTML)
30+
}
31+
32+
connectedCallback() {
33+
this.render()
34+
}
35+
attributeChangedCallback() {
36+
this.render()
37+
}
38+
39+
static get observedAttributes() {
40+
return ['breakout', 'margin', 'fixed']
41+
}
42+
get breakout() {
43+
return this.hasAttribute('breakout')
44+
}
45+
set breakout(val) {
46+
if (val) {
47+
return this.setAttribute('breakout', '')
48+
} else {
49+
return this.removeAttribute('breakout')
50+
}
51+
}
52+
get fixed() {
53+
return this.hasAttribute('fixed')
54+
}
55+
set fixed(val) {
56+
if (val) {
57+
return this.setAttribute('fixed', '')
58+
} else {
59+
return this.removeAttribute('fixed')
60+
}
61+
}
62+
get margin() {
63+
return this.getAttribute('margin') || '0px'
64+
}
65+
set margin(val) {
66+
return this.setAttribute('margin', val)
67+
}
68+
}
69+
)
70+
71+
/*
72+
73+
stack-l {
74+
display: flex;
75+
flex-direction: column;
76+
justify-content: flex-start;
77+
}
78+
stack-l > * + * {
79+
margin-block-start: var(--s1);
80+
}
81+
82+
[data-id="${id}"] ${this.recursive ? '' : ' > '} * + * {
83+
margin-block-start: ${this.space};
84+
}
85+
86+
${
87+
this.splitAfter
88+
? `
89+
[data-id="${id}"] :only-child {
90+
block-size: 100%;
91+
}
92+
93+
[data-id="${id}"] > :nth-child(${this.splitAfter}) {
94+
margin-block-end: auto;
95+
}`
96+
: ''
97+
}
98+
99+
*/

‎README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
# New Repo
1+
# Layouts
2+
3+
This contains web components derived from the great every-layout
4+
project.
5+
6+
This differes in that it uses the shadowDom, thus being self contained.

0 commit comments

Comments
 (0)