Merge tag '0.2.23' into develop

v0.2.23

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

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": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "private": true,
   "workspaces": [
     "packages/*"

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
 

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'
   } %}
 </div>

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
 

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": {

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": {

packages/ui/atoms/Figure/Figure.ts

@@ -52,6 +52,13 @@ export class Figure<T extends BaseProps = BaseProps> 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<T extends BaseProps = BaseProps> extends withMountWhenInView
       throw new Error('[Figure] The `img` ref must be an `<img>` element.');
     }
 
-    const { src } = img.dataset;
+    const src = this.original;
 
     if (this.$options.lazy && src && src !== this.src) {
       let tempImg = new Image();

packages/ui/atoms/Figure/FigureTwicpics.ts

@@ -54,7 +54,7 @@ export class FigureTwicpics<T extends BaseProps = BaseProps> 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<T extends BaseProps = BaseProps> 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<T extends BaseProps = BaseProps> 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;
   }
 
   /**

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 %}

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"