From a70e634c26efa28a481f7d09ced134216ab19813 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Thu, 17 Nov 2022 22:02:50 +0100 Subject: [PATCH 1/6] Bump version number --- composer.json | 2 +- package-lock.json | 10 +++++----- package.json | 2 +- packages/docs/package.json | 2 +- packages/tests/package.json | 2 +- packages/ui/package.json | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/composer.json b/composer.json index c928fff8..30082749 100644 --- a/composer.json +++ b/composer.json @@ -1,6 +1,6 @@ { "name": "studiometa/ui", - "version": "0.2.22", + "version": "0.2.23", "description": "A set of opiniated, unstyled and accessible components.", "license": "MIT", "require": { diff --git a/package-lock.json b/package-lock.json index d9ba8544..0562274d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@studiometa/ui-workspace", - "version": "0.2.22", + "version": "0.2.23", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@studiometa/ui-workspace", - "version": "0.2.22", + "version": "0.2.23", "hasInstallScript": true, "workspaces": [ "packages/*" @@ -15713,7 +15713,7 @@ }, "packages/docs": { "name": "@studiometa/ui-docs", - "version": "0.2.22", + "version": "0.2.23", "dependencies": { "@bytebase/vue-kbar": "^0.1.7", "@studiometa/js-toolkit": "^2.6.3" @@ -15831,7 +15831,7 @@ }, "packages/tests": { "name": "@studiometa/ui-tests", - "version": "0.2.22", + "version": "0.2.23", "license": "MIT", "dependencies": { "@jest/globals": "^29.2.1", @@ -16069,7 +16069,7 @@ }, "packages/ui": { "name": "@studiometa/ui", - "version": "0.2.22", + "version": "0.2.23", "license": "MIT", "dependencies": { "@studiometa/js-toolkit": "^2.6.3", diff --git a/package.json b/package.json index d94b6151..4d4877de 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@studiometa/ui-workspace", - "version": "0.2.22", + "version": "0.2.23", "private": true, "workspaces": [ "packages/*" diff --git a/packages/docs/package.json b/packages/docs/package.json index 5e7909e0..959ae0bb 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@studiometa/ui-docs", - "version": "0.2.22", + "version": "0.2.23", "private": true, "type": "module", "scripts": { diff --git a/packages/tests/package.json b/packages/tests/package.json index ee936aae..70a2f28d 100644 --- a/packages/tests/package.json +++ b/packages/tests/package.json @@ -1,6 +1,6 @@ { "name": "@studiometa/ui-tests", - "version": "0.2.22", + "version": "0.2.23", "private": true, "type": "module", "scripts": { diff --git a/packages/ui/package.json b/packages/ui/package.json index ff8297f3..d4587610 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@studiometa/ui", - "version": "0.2.22", + "version": "0.2.23", "description": "A set of opiniated, unstyled and accessible components", "publishConfig": { "access": "public" From a3480cad29591fcd9bd677975aa4dde13f29ae6a Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Thu, 17 Nov 2022 22:07:24 +0100 Subject: [PATCH 2/6] Fix a bug where image were loaded multiple times --- packages/ui/atoms/Figure/Figure.ts | 9 ++++++++- packages/ui/atoms/Figure/FigureTwicpics.ts | 21 ++++++++++++++------- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/ui/atoms/Figure/Figure.ts b/packages/ui/atoms/Figure/Figure.ts index 704d21d9..fa661e82 100644 --- a/packages/ui/atoms/Figure/Figure.ts +++ b/packages/ui/atoms/Figure/Figure.ts @@ -52,6 +52,13 @@ export class Figure extends withMountWhenInView this.$refs.img.src = value; } + /** + * Get the original source. + */ + get original() { + return this.$refs.img.dataset.src; + } + /** * Load on mount. */ @@ -66,7 +73,7 @@ export class Figure extends withMountWhenInView throw new Error('[Figure] The `img` ref must be an `` element.'); } - const { src } = img.dataset; + const src = this.original; if (this.$options.lazy && src && src !== this.src) { let tempImg = new Image(); diff --git a/packages/ui/atoms/Figure/FigureTwicpics.ts b/packages/ui/atoms/Figure/FigureTwicpics.ts index 2063150c..e67f5cef 100644 --- a/packages/ui/atoms/Figure/FigureTwicpics.ts +++ b/packages/ui/atoms/Figure/FigureTwicpics.ts @@ -54,7 +54,7 @@ export class FigureTwicpics extends Figure< /** * Get the Twicpics path. */ - get path():string { + get path(): string { return withoutTrailingSlash(withoutLeadingSlash(this.$options.path)); } @@ -67,15 +67,22 @@ export class FigureTwicpics extends Figure< } /** - * Add Twicpics transforms, path and domain to the URL. + * Get formattted original source. */ - set src(value: string) { - const url = new URL(value, 'https://localhost'); + get original() { + return this.formatSrc(super.original); + } + + /** + * Format the source for Twicpics. + */ + formatSrc(src: string): string { + const url = new URL(src, 'https://localhost'); url.host = this.domain; url.port = ''; if (this.path) { - url.pathname = `/${this.path}${url.pathname}` + url.pathname = `/${this.path}${url.pathname}`; } const width = normalizeSize(this, 'offsetWidth'); @@ -90,14 +97,14 @@ export class FigureTwicpics extends Figure< url.search = decodeURIComponent(url.search); - super.src = url.toString(); + return url.toString(); } /** * Reassign the source from the original on resize. */ resized() { - this.src = this.$refs.img.dataset.src; + this.src = this.original; } /** From e10257ba159f209d64d6e5a766508ddb657253fe Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Thu, 17 Nov 2022 22:21:23 +0100 Subject: [PATCH 3/6] Fix dead links in the docs preventing build --- packages/docs/components/atoms/FigureTwicpics/js-api.md | 2 +- packages/docs/components/atoms/FigureTwicpics/twig-api.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/components/atoms/FigureTwicpics/js-api.md b/packages/docs/components/atoms/FigureTwicpics/js-api.md index 3cbaa960..a88e9a50 100644 --- a/packages/docs/components/atoms/FigureTwicpics/js-api.md +++ b/packages/docs/components/atoms/FigureTwicpics/js-api.md @@ -5,7 +5,7 @@ outline: deep # JS API -The `FigureTwicpics` class extends the [`Figure` class](/atoms/Figure/js-api.html) and adds support for TwicPics API. +The `FigureTwicpics` class extends the [`Figure` class](/components/atoms/Figure/js-api.html) and adds support for TwicPics API. ## Options diff --git a/packages/docs/components/atoms/FigureTwicpics/twig-api.md b/packages/docs/components/atoms/FigureTwicpics/twig-api.md index ec952065..f8d1b562 100644 --- a/packages/docs/components/atoms/FigureTwicpics/twig-api.md +++ b/packages/docs/components/atoms/FigureTwicpics/twig-api.md @@ -5,7 +5,7 @@ outline: deep # Twig API -The `FigureTwicpics` template extends the [`Figure` template](/atoms/Figure/twig-api.html) and adds support for TwicPics API. +The `FigureTwicpics` template extends the [`Figure` template](/components/atoms/Figure/twig-api.html) and adds support for TwicPics API. ## Parameters From 6c55dbec0d6795e52973c950854e2548a16165e5 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Thu, 17 Nov 2022 22:26:19 +0100 Subject: [PATCH 4/6] Add support for Twicpics placeholders --- packages/ui/atoms/Figure/FigureTwicpics.twig | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/ui/atoms/Figure/FigureTwicpics.twig b/packages/ui/atoms/Figure/FigureTwicpics.twig index 8a239f36..a5a24f9c 100644 --- a/packages/ui/atoms/Figure/FigureTwicpics.twig +++ b/packages/ui/atoms/Figure/FigureTwicpics.twig @@ -9,6 +9,8 @@ * The Twicpics path to use. * @param object $twic_transform * Custom transforms for Twicpics. + * @param string $twic_placeholder + * Define how the placeholder should be treated. Possible values: meancolor, maincolor, preview. */ #} @@ -37,3 +39,7 @@ {% set src = src.withPath(twic_path ~ src.getPath()) %} {% set attr = (attr ?? {})|merge({ data_option_path: twic_path }) %} {% endif %} + +{% if twic_placeholder is defined %} + {% set placeholder = src.withQueryParameter('twic', '%s/output=%s'|format(twic_param, twic_placeholder)) %} +{% endif %} From d2b37ae0930b0d1ead4a6356cac7b5a34a651af5 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Thu, 17 Nov 2022 22:26:55 +0100 Subject: [PATCH 5/6] Update demo --- .../atoms/FigureTwicpics/stories/twicpics/app.twig | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/docs/components/atoms/FigureTwicpics/stories/twicpics/app.twig b/packages/docs/components/atoms/FigureTwicpics/stories/twicpics/app.twig index 7a28d0c3..235bc380 100644 --- a/packages/docs/components/atoms/FigureTwicpics/stories/twicpics/app.twig +++ b/packages/docs/components/atoms/FigureTwicpics/stories/twicpics/app.twig @@ -6,17 +6,20 @@ lazy: false, twic_domain: 'studiometa.twic.pics', twic_path: 'ui', - twic_transform: { focus: 'auto', crop: '300x300', placeholder: 'auto' } + twic_transform: { focus: 'auto', crop: '300x300', placeholder: 'auto' }, + twic_placeholder: 'maincolor' } %} {% include '@ui/atoms/Figure/FigureTwicpics.twig' with { src: '/-/image-2.jpg', width: '500', height: '500', + twic_placeholder: 'meancolor' } %} {% include '@ui/atoms/Figure/FigureTwicpics.twig' with { src: '/-/image-3.jpg', width: '500', height: '500', - twic_transform: { focus: 'auto', crop: '300x300', placeholder: 'auto' } + twic_transform: { focus: 'auto', crop: '300x300', placeholder: 'auto' }, + twic_placeholder: 'preview' } %} From 27c6de08821a58c6b1405b36d6baa8eb48df4bb3 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Thu, 17 Nov 2022 22:28:21 +0100 Subject: [PATCH 6/6] Update changelog --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a3d7b5d..056e1022 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +## v0.2.23 (2022-11-17) + +### Added +- **FigureTwicpics:** + - Add support for Twicpics placeholders ([6c55dbe](https://github.com/studiometa/ui/commit/6c55dbe)) + +### Fixed +- Fix dead links in the docs preventing build ([e10257b](https://github.com/studiometa/ui/commit/e10257b)) +- **FigureTwicpics:** + - Fix a bug where image were loaded multiple times ([a3480ca](https://github.com/studiometa/ui/commit/a3480ca)) + ## v0.2.22 (2022-11-17) ### Fixed