diff --git a/.gitignore b/.gitignore index f61b8a6..6bc8ff3 100644 --- a/.gitignore +++ b/.gitignore @@ -17,7 +17,7 @@ coverage # tests test-results -src/components/*-snapshots/*-darwin.png +src/components/countdown/*-snapshots/*-darwin.png # nyc test coverage .nyc_output diff --git a/development.ts b/development.ts index 01c1a12..c49285b 100644 --- a/development.ts +++ b/development.ts @@ -1,4 +1,4 @@ -import { Countdown } from './src/components/countdown.ts'; +import { Countdown } from './src/components/countdown/countdown.ts'; import xanadu from './src/index.ts'; xanadu(); diff --git a/eslint.config.js b/eslint.config.js index 2c84859..b0e246a 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -17,7 +17,8 @@ export default [ 'no-ternary': 'off', 'no-undef': 'off', 'one-var': 'off', - 'sort-imports': ['error', { ignoreCase: true }] + 'sort-imports': ['error', { ignoreCase: true }], + 'no-console': ['error', { allow: ['warn', 'error'] }] } }, eslintPluginUnicorn.configs['flat/recommended'], @@ -53,7 +54,7 @@ export default [ 'wc/file-name-matches-element': 'error', 'wc/guard-define-call': 'error', 'wc/max-elements-per-file': 'error', - 'wc/no-constructor': 'error', + 'wc/no-constructor': 'warn', 'wc/no-exports-with-element': 'error', 'wc/no-method-prefixed-with-on': 'error', 'wc/tag-name-matches-class': 'error' diff --git a/index.html b/index.html index 5549d7a..d563b34 100644 --- a/index.html +++ b/index.html @@ -9,30 +9,10 @@ -
-

Vite + Web Components

-
-
- - - - - - - - -
+

Vite + Web Components

+ Countdown + Zine + Story + Folio diff --git a/jsr.json b/jsr.json index f96033f..f58e38d 100644 --- a/jsr.json +++ b/jsr.json @@ -7,7 +7,7 @@ "LICENSE", "README.md", "./mod.ts", - "src/components/*.ts", + "src/components/**/*.ts", "src/constants.ts" ] } diff --git a/mod.ts b/mod.ts index 5262c94..e45e213 100644 --- a/mod.ts +++ b/mod.ts @@ -1,2 +1,2 @@ /* eslint-disable unicorn/prevent-abbreviations */ -export { Countdown } from "./src/components/countdown.ts"; +export { Countdown } from './src/components/countdown/countdown.ts'; diff --git a/package.json b/package.json index 1a41127..38e1359 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "dev": "vite", "lint": "npm run lint:code && npm run lint:styles && npm run lint:slowtypes", "lint:code": "eslint --cache --cache-location ./node_modules/.cache/eslint ./src ./stories", - "lint:styles": "stylelint src/**/*.{css,styles.js}", + "lint:styles": "stylelint src/components/**/*.css", "lint:slowtypes": "jsr publish --dry-run --allow-dirty", "storybook": "storybook dev -p 6006", "test": "playwright test", diff --git a/src/components/countdown.css b/src/components/countdown/countdown.css similarity index 100% rename from src/components/countdown.css rename to src/components/countdown/countdown.css diff --git a/src/components/countdown.spec.ts b/src/components/countdown/countdown.spec.ts similarity index 94% rename from src/components/countdown.spec.ts rename to src/components/countdown/countdown.spec.ts index e4b76ef..db23d84 100644 --- a/src/components/countdown.spec.ts +++ b/src/components/countdown/countdown.spec.ts @@ -1,10 +1,10 @@ -import { expect, test } from '../../e2e/baseFixtures.ts'; +import { expect, test } from '../../../e2e/baseFixtures.ts'; import AxeBuilder from '@axe-core/playwright'; -import { ONE } from '../constants.ts'; +import { ONE } from '../../constants.ts'; import type { Page } from '@playwright/test'; test.beforeEach(async ({ page }: { page: Page }) => { - await page.goto('/'); + await page.goto('/www/countdown'); }); const runCountdownTests = () => { diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-Mobile-Chrome-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-Mobile-Chrome-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-Mobile-Chrome-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-Mobile-Chrome-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-Mobile-Safari-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-Mobile-Safari-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-Mobile-Safari-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-Mobile-Safari-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-chromium-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-chromium-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-chromium-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-chromium-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-firefox-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-firefox-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-firefox-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-firefox-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-webkit-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-webkit-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-webkit-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-1-webkit-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-Mobile-Chrome-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-Mobile-Chrome-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-Mobile-Chrome-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-Mobile-Chrome-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-Mobile-Safari-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-Mobile-Safari-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-Mobile-Safari-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-Mobile-Safari-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-chromium-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-chromium-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-chromium-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-chromium-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-firefox-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-firefox-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-firefox-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-firefox-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-webkit-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-webkit-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-webkit-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-2-webkit-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-Mobile-Chrome-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-Mobile-Chrome-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-Mobile-Chrome-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-Mobile-Chrome-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-Mobile-Safari-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-Mobile-Safari-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-Mobile-Safari-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-Mobile-Safari-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-chromium-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-chromium-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-chromium-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-chromium-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-firefox-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-firefox-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-firefox-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-firefox-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-webkit-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-webkit-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-webkit-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-dark-mode-should-match-variants-screenshots-3-webkit-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-Mobile-Chrome-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-Mobile-Chrome-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-Mobile-Chrome-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-Mobile-Chrome-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-Mobile-Safari-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-Mobile-Safari-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-Mobile-Safari-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-Mobile-Safari-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-chromium-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-chromium-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-chromium-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-chromium-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-firefox-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-firefox-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-firefox-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-firefox-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-webkit-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-webkit-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-webkit-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-1-webkit-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-Mobile-Chrome-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-Mobile-Chrome-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-Mobile-Chrome-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-Mobile-Chrome-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-Mobile-Safari-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-Mobile-Safari-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-Mobile-Safari-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-Mobile-Safari-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-chromium-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-chromium-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-chromium-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-chromium-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-firefox-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-firefox-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-firefox-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-firefox-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-webkit-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-webkit-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-webkit-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-2-webkit-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-Mobile-Chrome-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-Mobile-Chrome-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-Mobile-Chrome-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-Mobile-Chrome-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-Mobile-Safari-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-Mobile-Safari-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-Mobile-Safari-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-Mobile-Safari-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-chromium-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-chromium-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-chromium-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-chromium-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-firefox-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-firefox-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-firefox-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-firefox-linux.png diff --git a/src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-webkit-linux.png b/src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-webkit-linux.png similarity index 100% rename from src/components/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-webkit-linux.png rename to src/components/countdown/countdown.spec.ts-snapshots/Countdown-in-light-mode-should-match-variants-screenshots-3-webkit-linux.png diff --git a/src/components/countdown.ts b/src/components/countdown/countdown.ts similarity index 99% rename from src/components/countdown.ts rename to src/components/countdown/countdown.ts index 5f8c76d..7909d7f 100644 --- a/src/components/countdown.ts +++ b/src/components/countdown/countdown.ts @@ -11,7 +11,7 @@ import { THOUSAND, TWO, ZERO -} from '../constants.ts'; +} from '../../constants.ts'; /** * A class to represent the StopWatch element diff --git a/src/components/countdown.types.ts b/src/components/countdown/countdown.types.ts similarity index 100% rename from src/components/countdown.types.ts rename to src/components/countdown/countdown.types.ts diff --git a/src/components/folio/folio.css b/src/components/folio/folio.css new file mode 100644 index 0000000..f530a07 --- /dev/null +++ b/src/components/folio/folio.css @@ -0,0 +1,37 @@ +:host { + display: flex; + background-color: hotpink; + flex-direction: column; + justify-content: center; + align-items: center; + + & label { + position: absolute; + cursor: pointer; + } + + & input[type='file'] { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: auto; + position: absolute; + z-index: -1; + } + + & [type='file']:focus + label { + /* keyboard navigation */ + /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ + outline: 1px dotted #000; + outline: -webkit-focus-ring-color auto 5px; + } + + & [type='file'] + label * { + pointer-events: none; + } + + & img { + width: 100%; + height: 100%; + } +} diff --git a/src/components/folio/folio.ts b/src/components/folio/folio.ts new file mode 100644 index 0000000..239cb39 --- /dev/null +++ b/src/components/folio/folio.ts @@ -0,0 +1,86 @@ +import { folioTemplate } from './templates.ts'; +import XanaduElement from '../../xanadu-element.ts'; + +/** + * A class to represent the Folio web component + */ +export class Folio extends XanaduElement { + imageInput: HTMLInputElement | undefined; + previewImage: HTMLImageElement | null | undefined; + labelElement: HTMLLabelElement | null | undefined; + imageInputHandler: () => void; + + constructor() { + super(); + if (!this.shadowRoot) { + const template = Folio.prepareTemplate(folioTemplate({})); + this.attachShadow({ mode: 'open' }).append(template); + } + this.#prepareElements(); + this.imageInputHandler = this.#createImageInputChangeHandler(); + } + + connectedCallback() { + this.imageInput?.addEventListener('change', this.imageInputHandler); + } + + disconnectedCallback() { + this.imageInput?.removeEventListener('change', this.imageInputHandler); + } + + #prepareElements() { + Folio.assert( + this.shadowRoot instanceof ShadowRoot, + 'A ShadowRoot needs to be declared in the DOM.' + ); + this.imageInput = this.shadowRoot.querySelector( + '#file' + ) as HTMLInputElement; + this.previewImage = this.shadowRoot.querySelector('img'); + /* istanbul ignore if -- @preserve */ + if (!this.previewImage) { + this.previewImage = document.createElement('img'); + } + this.labelElement = this.shadowRoot.querySelector('label'); + } + + #createImageInputChangeHandler() { + return () => { + this.previewSelectedImage(); + }; + } + + previewSelectedImage() { + Folio.assert( + this.shadowRoot instanceof ShadowRoot, + 'A ShadowRoot needs to be declared in the DOM.' + ); + const imageInput = this.shadowRoot.querySelector( + '#file' + ) as HTMLInputElement; + const [file] = imageInput.files || []; + if (file) { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.addEventListener('load', (event) => { + Folio.assert( + this.previewImage instanceof HTMLImageElement, + 'A ShadowRoot needs to be declared in the DOM.' + ); + Folio.assert( + typeof event.target?.result === 'string', + 'Event.target.result needs to be a string.' + ); + this.previewImage.src = event.target.result; + }); + Folio.assert( + this.labelElement instanceof HTMLLabelElement, + 'A ShadowRoot needs to be declared in the DOM.' + ); + this.labelElement.after(this.previewImage as Node); + this.labelElement.remove(); + } + } +} + +export default Folio; diff --git a/src/components/folio/templates.ts b/src/components/folio/templates.ts new file mode 100644 index 0000000..624433b --- /dev/null +++ b/src/components/folio/templates.ts @@ -0,0 +1,26 @@ +type FolioTemplateType = { + css?: string; + preview?: string; + dsd?: boolean; +}; + +export const folioTemplate = ({ + css = '', + preview = '', + dsd = false +}: FolioTemplateType) => { + const styles = css ? `` : ''; + const shadowrootmode = dsd ? 'shadowrootmode="open"' : ''; + const previewImage = preview + ? `Preview` + : ''; + + return ``; +}; + +export default folioTemplate; diff --git a/src/components/story/templates.ts b/src/components/story/templates.ts new file mode 100644 index 0000000..ef50de5 --- /dev/null +++ b/src/components/story/templates.ts @@ -0,0 +1,39 @@ +export const storyTemplate = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `; diff --git a/src/components/story/zine.css b/src/components/story/zine.css new file mode 100644 index 0000000..2683339 --- /dev/null +++ b/src/components/story/zine.css @@ -0,0 +1,70 @@ +:host { + color: blue; + min-block-size: 100vh; + display: grid; + place-items: center; + font-family: system-ui; + margin: 0; + background: hsl(200deg 15% 93%); + + & > .is-stories { + inline-size: 100vw; + block-size: 100vh; + box-shadow: + 0 5px 2.5px hsl(200deg 95% 3% / 3.7%), + 0 12px 6.5px hsl(200deg 95% 3% / 5.3%), + 0 22.5px 13px hsl(200deg 95% 3% / 6.5%), + 0 40.2px 24px hsl(200deg 95% 3% / 7.7%), + 0 75.2px 44px hsl(200deg 95% 3% / 9.3%), + 0 180px 80px hsl(200deg 95% 3% / 13%); + + @media (hover: hover) { + border-radius: 3ch; + } + + /* desktop constraint */ + @media (hover: hover) and (width >= 480px) { + max-inline-size: 480px; + max-block-size: 848px; + } + + /* smaller desktop constraint */ + @media (hover: hover) and (height <= 880px) and (width >= 720px) { + max-inline-size: 320px; + max-block-size: 568px; + } + } + + & .is-stories { + /* asdf */ + display: grid; + grid: 1fr / auto-flow 100%; + gap: 1ch; + overflow-x: auto; + scroll-snap-type: x mandatory; + overscroll-behavior: contain; + touch-action: pan-x; + } + + & .is-user { + scroll-snap-align: start; + scroll-snap-stop: always; + display: grid; + grid: [story] 1fr / [story] 1fr; + } + + & .is-story { + grid-area: story; + background-size: cover; + background-image: var(--bg), + linear-gradient(to top, lch(98% 0 0deg), lch(90% 0 0deg)); + user-select: none; + touch-action: manipulation; + transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1); + + &.is-seen { + opacity: 0; + pointer-events: none; + } + } +} diff --git a/src/components/story/zine.ts b/src/components/story/zine.ts new file mode 100644 index 0000000..3fe53fb --- /dev/null +++ b/src/components/story/zine.ts @@ -0,0 +1,157 @@ +/* eslint-disable unicorn/no-abusive-eslint-disable */ +/* eslint-disable */ +// @ts-nocheck +import { zineTemplate } from './templates.ts'; +const testTemplate = `I am still empty `; + +/** + * A class to represent the Zine web component + */ +export class Zine extends HTMLElement { + /** + * Web component can be registered with as `` + */ + static register(tagName?: string) { + globalThis.window.customElements.define(tagName || 'x-zine', Zine); + } + + /** + * The list of attributes which will call the an `attributeChangedCallback` + */ + static get observedAttributes(): string[] { + return ['days', 'hours', 'minutes', 'seconds']; + } + + /** + * Give this element its own encapsulated DOM + */ + #shadowRoot: ShadowRoot = this.attachShadow({ mode: 'open' }); + + // Initialize private state + + static #qwerEventDispatcher = (element: HTMLElement) => () => { + element.dispatchEvent(new CustomEvent('myEvent')); + }; + + static #myEventHandler = (element: HTMLElement) => () => { + element.innerHTML = 'button has been clicked'; + }; + + static #cloneTemplates(templates: string[]) { + const stencils: DocumentFragment[] = []; + for (const template of templates) { + const blueprint = document.createElement( + 'template' + ) as HTMLTemplateElement; + blueprint.innerHTML = template; + const stencil = blueprint.content.cloneNode(true) as DocumentFragment; + stencils.push(stencil); + } + return stencils; + } + + static #render() { + const [asdf, zineStencil] = Zine.#cloneTemplates([ + testTemplate, + zineTemplate + ]); + const newDiv = document.createElement('div'); + + const span = asdf.querySelector('#hi'); + const button = asdf.querySelector('#aloha'); + + Zine.assert( + button instanceof HTMLButtonElement, + "A + + %VITE_XANADU_COMPONENT_ZINE_DSD% + + + +