From 60e2d57a7562e22065ff2e431aabac74af5a4490 Mon Sep 17 00:00:00 2001 From: Thibault Zanini Date: Wed, 23 Jul 2025 14:15:00 +0200 Subject: [PATCH 1/5] feat: migrate image to ES6 --- ui/image.mod/image.js | 82 +++++++++++++++++++++---------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/ui/image.mod/image.js b/ui/image.mod/image.js index e11258e6b..0b3d4bece 100644 --- a/ui/image.mod/image.js +++ b/ui/image.mod/image.js @@ -1,48 +1,48 @@ /** - @module "mod/ui/native/image.mod" - @requires mod/ui/component - @requires mod/ui/native-control -*/ -var Component = require("ui/component").Component; + * @module "mod/ui/native/image.mod" + * @requires mod/ui/component + * @requires mod/ui/native-control + */ +const { Component } = require("ui/component"); /** * Wraps the a <img> element with binding support for its standard attributes. - @class module:"mod/ui/native/image.mod".Image - @extends module:mod/ui/control.Control + * @class module:"mod/ui/native/image.mod".Image + * @extends module:mod/ui/control.Control */ -exports.Image = Component.specialize({ - hasTemplate: {value: true } +const Image = class Image extends Component { + hasTemplate = true; +}; + +/** @lends module:"mod/ui/native/image.mod".Image */ +Image.addAttributes({ + /** + * A text description to display in place of the image. + * @type {string} + * @default null + */ + alt: null, + + /** + * The height of the image in CSS pixels. + * @type {number} + * @default null + */ + height: null, + + /** + * The URL where the image is located. + * @type {string} + * @default null + */ + src: null, + + /** + * The width of the image in CSS pixels. + * @type {number} + * @default null + */ + width: null, }); -exports.Image.addAttributes(/** @lends module:"mod/ui/native/image.mod".Image */{ - -/** - A text description to display in place of the image. - @type {string} - @default null -*/ - alt: null, - -/** - The height of the image in CSS pixels. - @type {number} - @default null -*/ - height: null, - -/** - The URL where the image is located. - @type {string} - @default null -*/ - src: null, - -/** - The width of the image in CSS pixels. - @type {number} - @default null -*/ - width: null - - -}); +exports.Image = Image; From d5a15febfe3334a86328a861a3feb3dc328a96d3 Mon Sep 17 00:00:00 2001 From: Thibault Zanini Date: Wed, 23 Jul 2025 14:15:21 +0200 Subject: [PATCH 2/5] feat: Added teach for Image component --- index.html | 1 + ui/image.mod/teach/assets/banana.svg | 1 + ui/image.mod/teach/index.html | 20 ++++++++++ ui/image.mod/teach/package.json | 10 +++++ ui/image.mod/teach/ui/main.mod/main.css | 51 ++++++++++++++++++++++++ ui/image.mod/teach/ui/main.mod/main.html | 38 ++++++++++++++++++ ui/image.mod/teach/ui/main.mod/main.js | 5 +++ 7 files changed, 126 insertions(+) create mode 100644 ui/image.mod/teach/assets/banana.svg create mode 100644 ui/image.mod/teach/index.html create mode 100644 ui/image.mod/teach/package.json create mode 100644 ui/image.mod/teach/ui/main.mod/main.css create mode 100644 ui/image.mod/teach/ui/main.mod/main.html create mode 100644 ui/image.mod/teach/ui/main.mod/main.js diff --git a/index.html b/index.html index b26159d51..951090dea 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,7 @@

Components:

Toggle TreeList VirtualList + Image

Managers:

Drag & Drop diff --git a/ui/image.mod/teach/assets/banana.svg b/ui/image.mod/teach/assets/banana.svg new file mode 100644 index 000000000..8b4bd2c8f --- /dev/null +++ b/ui/image.mod/teach/assets/banana.svg @@ -0,0 +1 @@ + diff --git a/ui/image.mod/teach/index.html b/ui/image.mod/teach/index.html new file mode 100644 index 000000000..ad0d6c62b --- /dev/null +++ b/ui/image.mod/teach/index.html @@ -0,0 +1,20 @@ + + + + + + Teach SegmentControl Mod + + + + + + + + diff --git a/ui/image.mod/teach/package.json b/ui/image.mod/teach/package.json new file mode 100644 index 000000000..98815d77d --- /dev/null +++ b/ui/image.mod/teach/package.json @@ -0,0 +1,10 @@ +{ + "name": "teach-segmented-bar-mod", + "private": true, + "dependencies": { + "mod": "*" + }, + "mappings": { + "mod": "../../../" + } +} diff --git a/ui/image.mod/teach/ui/main.mod/main.css b/ui/image.mod/teach/ui/main.mod/main.css new file mode 100644 index 000000000..b382bbae7 --- /dev/null +++ b/ui/image.mod/teach/ui/main.mod/main.css @@ -0,0 +1,51 @@ +body { + font-family: -apple-system, Roboto, sans-serif; + background-color: #fafafa; + max-width: 800px; + margin: 0 auto; + padding: 20px; + + .card { + margin: 40px 0; + padding: 16px; + background: white; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + gap: 24px; + + h2 { + margin: 0; + color: #333; + } + + label { + min-width: 128px; + font-weight: 500; + } + } + + .row { + display: flex; + align-items: center; + gap: 24px; + } + + .column { + display: flex; + flex-direction: column; + gap: 24px; + align-items: flex-start; + + &.stretch { + align-items: stretch; + } + } + + .grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + } +} diff --git a/ui/image.mod/teach/ui/main.mod/main.html b/ui/image.mod/teach/ui/main.mod/main.html new file mode 100644 index 000000000..b1bd25d11 --- /dev/null +++ b/ui/image.mod/teach/ui/main.mod/main.html @@ -0,0 +1,38 @@ + + + + + Teach Image Mod + + + + +
+

Image

+ + +
+

Basic Usage

+
+ +
+
+
+
+ + diff --git a/ui/image.mod/teach/ui/main.mod/main.js b/ui/image.mod/teach/ui/main.mod/main.js new file mode 100644 index 000000000..15dfb7465 --- /dev/null +++ b/ui/image.mod/teach/ui/main.mod/main.js @@ -0,0 +1,5 @@ +const { Component } = require("mod/ui/component"); + +exports.Main = class Main extends Component { + +}; From 9e0ef42de24313dfb92ef068bed316b91891c172 Mon Sep 17 00:00:00 2001 From: Thibault Zanini Date: Fri, 25 Jul 2025 14:39:13 +0200 Subject: [PATCH 3/5] feat: add loading attribute to Image component --- ui/image.mod/image.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/ui/image.mod/image.js b/ui/image.mod/image.js index 0b3d4bece..010e25d56 100644 --- a/ui/image.mod/image.js +++ b/ui/image.mod/image.js @@ -43,6 +43,17 @@ Image.addAttributes({ * @default null */ width: null, + + /** + * The loading strategy for the image. + * @type {string} + * @default "eager" + * @values ["eager", "lazy"] + */ + loading: { + dataType: "string", + value: "eager", + }, }); exports.Image = Image; From cb48c3218edde215e0a886379d54d9e010ef38ad Mon Sep 17 00:00:00 2001 From: Thibault Zanini Date: Thu, 14 Aug 2025 16:54:54 +0200 Subject: [PATCH 4/5] chore: minor improvements --- ui/image.mod/image.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/ui/image.mod/image.js b/ui/image.mod/image.js index 010e25d56..ed3c6f3a0 100644 --- a/ui/image.mod/image.js +++ b/ui/image.mod/image.js @@ -3,7 +3,7 @@ * @requires mod/ui/component * @requires mod/ui/native-control */ -const { Component } = require("ui/component"); +const Component = require("ui/component").Component; /** * Wraps the a <img> element with binding support for its standard attributes. @@ -11,7 +11,11 @@ const { Component } = require("ui/component"); * @extends module:mod/ui/control.Control */ const Image = class Image extends Component { - hasTemplate = true; + static { + Montage.defineProperties(this.prototype, { + hasTemplate: { value: true }, + }); + } }; /** @lends module:"mod/ui/native/image.mod".Image */ From 9ed3dbef0f1c703e061acf2e425ac5488ff73bc0 Mon Sep 17 00:00:00 2001 From: Thibault Zanini Date: Fri, 15 Aug 2025 14:53:48 +0200 Subject: [PATCH 5/5] fix: missing imports --- ui/image.mod/image.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/image.mod/image.js b/ui/image.mod/image.js index ed3c6f3a0..f2f7b93a8 100644 --- a/ui/image.mod/image.js +++ b/ui/image.mod/image.js @@ -4,6 +4,7 @@ * @requires mod/ui/native-control */ const Component = require("ui/component").Component; +const Montage = require("core/core").Montage; /** * Wraps the a <img> element with binding support for its standard attributes.