From c792e0bedced4103b22fd42b56dba6098e52b41f Mon Sep 17 00:00:00 2001 From: gumumjhb025 Date: Tue, 21 Oct 2025 17:03:22 +0200 Subject: [PATCH 1/2] created base card --- modules/widgets/card/base_card.js | 44 +++++++++++++++++++ modules/widgets/card/base_card.tsx | 65 +++++++++++++++++++++++++++++ modules/widgets/card/image_card.tsx | 12 ++++++ modules/widgets/card/text_card.tsx | 12 ++++++ 4 files changed, 133 insertions(+) create mode 100644 modules/widgets/card/base_card.js create mode 100644 modules/widgets/card/base_card.tsx create mode 100644 modules/widgets/card/image_card.tsx create mode 100644 modules/widgets/card/text_card.tsx diff --git a/modules/widgets/card/base_card.js b/modules/widgets/card/base_card.js new file mode 100644 index 0000000..c7fdb31 --- /dev/null +++ b/modules/widgets/card/base_card.js @@ -0,0 +1,44 @@ +'use strict'; +Object.defineProperty(exports, '__esModule', { value: true }); +var Card = /** @class */ (function () { + function Card(renderContent, heading, styles, onclick) { + this.renderContent = renderContent; + this.heading = heading; + this.styles = styles; + this.onclick = onclick; + } + Card.prototype.render = function () { + var _a; + var head = this.heading.toString(); + return { + tagName: 'div', + className: 'dom-wizard-card', + children: [this.title(head), this.renderContent], + heading: this.heading, + options: { + onclick: this.onclick, + style: + (_a = this.styles) !== null && _a !== void 0 + ? _a + : { + position: 'relative', + backgroundColor: '#e4e4e4', + padding: '10px 10px', + 'border-radius': '5px', + 'box-shadow': '0px 0px 5px #00000052', + cursor: 'pointer', + }, + }, + }; + }; + Card.prototype.title = function (text) { + return { + tagName: 'h2', + options: { + textContent: text, + }, + }; + }; + return Card; +})(); +exports.default = Card; diff --git a/modules/widgets/card/base_card.tsx b/modules/widgets/card/base_card.tsx new file mode 100644 index 0000000..76bc018 --- /dev/null +++ b/modules/widgets/card/base_card.tsx @@ -0,0 +1,65 @@ +import { Label } from '../label'; + +class Card { + renderContent: Function; + heading?: String; + styles?: Object; + onclick?: Function; + imageSrc?: string; + imageAlt?: string; + imageStyles?: Object; + + constructor( + renderContent: Function, + heading?: string, + styles?: Object, + onclick?: Function, + imageSrc?: string, + imageStyles?: Object, + imageAlt?: string, + ) { + this.renderContent = renderContent; + this.heading = heading; + this.styles = styles; + this.onclick = onclick; + this.imageSrc = imageSrc; + this.imageAlt = imageAlt; + this.imageStyles = imageStyles; + } + + render() { + var head = this.heading?.toString() ?? ''; + return { + tagName: 'div', + className: 'dom-wizard-card', + children: [this.title(head), this.renderContent], + heading: this.heading, + options: { + onclick: this.onclick, + style: this.styles ?? { + position: 'relative', + backgroundColor: '#e4e4e4', + padding: '10px 10px', + 'border-radius': '5px', + 'box-shadow': '0px 0px 5px #00000052', + cursor: 'pointer', + }, + }, + }; + } + private title(text: string) { + return { + tagName: 'h2', + options: { + textContent: text, + }, + }; + } + private image(src: string, alt?: string, style?: string) { + return { + tagName: 'img', + }; + } +} + +export default Card; diff --git a/modules/widgets/card/image_card.tsx b/modules/widgets/card/image_card.tsx new file mode 100644 index 0000000..06309f6 --- /dev/null +++ b/modules/widgets/card/image_card.tsx @@ -0,0 +1,12 @@ +import Card from './base_card'; + +export default function ImageCard( + renderContent: Function, + heading?: string, + styles?: Object, + onclick?: Function, +) { + let card = new Card(renderContent, heading, styles, onclick); + + return card.render(); +} diff --git a/modules/widgets/card/text_card.tsx b/modules/widgets/card/text_card.tsx new file mode 100644 index 0000000..75d0a75 --- /dev/null +++ b/modules/widgets/card/text_card.tsx @@ -0,0 +1,12 @@ +import Card from './base_card'; + +export default function ContentCard( + renderContent: Function, + heading?: string, + styles?: Object, + onclick?: Function, +) { + let card = new Card(renderContent, heading, styles, onclick); + + return card.render(); +} From 513d2dfd2a9701bf895c214d61397cbf8a4997cc Mon Sep 17 00:00:00 2001 From: gumumjhb025 Date: Tue, 21 Oct 2025 22:05:06 +0200 Subject: [PATCH 2/2] created card widget with and without image and package all widgets --- modules/widgets/card/base_card.js | 75 ++++++++++++++---- modules/widgets/card/base_card.ts | 77 +++++++++++++++++++ modules/widgets/card/base_card.tsx | 65 ---------------- modules/widgets/card/content_card.js | 33 ++++++++ .../card/{text_card.tsx => content_card.ts} | 0 modules/widgets/card/image_card.js | 41 ++++++++++ modules/widgets/card/image_card.ts | 40 ++++++++++ modules/widgets/card/image_card.tsx | 12 --- modules/widgets/card/text_card.js | 8 ++ 9 files changed, 258 insertions(+), 93 deletions(-) create mode 100644 modules/widgets/card/base_card.ts delete mode 100644 modules/widgets/card/base_card.tsx create mode 100644 modules/widgets/card/content_card.js rename modules/widgets/card/{text_card.tsx => content_card.ts} (100%) create mode 100644 modules/widgets/card/image_card.js create mode 100644 modules/widgets/card/image_card.ts delete mode 100644 modules/widgets/card/image_card.tsx create mode 100644 modules/widgets/card/text_card.js diff --git a/modules/widgets/card/base_card.js b/modules/widgets/card/base_card.js index c7fdb31..0911560 100644 --- a/modules/widgets/card/base_card.js +++ b/modules/widgets/card/base_card.js @@ -1,33 +1,61 @@ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var Card = /** @class */ (function () { - function Card(renderContent, heading, styles, onclick) { + function Card( + renderContent, + heading, + styles, + onclick, + imageSrc, + imageStyles, + imageAlt, + ) { + this.heading = ' '; + this.imageSrc = ' '; + this.preimageStyle = { + width: '100%', + heigth: '100%', + }; + this.styles = { + position: 'relative', + backgroundColor: '#e4e4e4', + padding: '10px 10px', + 'border-radius': '5px', + 'box-shadow': '0px 0px 5px #00000052', + cursor: 'pointer', + }; this.renderContent = renderContent; this.heading = heading; - this.styles = styles; + this.styles = styles !== null && styles !== void 0 ? styles : this.styles; this.onclick = onclick; + this.imageSrc = imageSrc; + this.imageAlt = imageAlt; + this.preimageStyle = + imageStyles !== null && imageStyles !== void 0 + ? imageStyles + : this.preimageStyle; } Card.prototype.render = function () { - var _a; - var head = this.heading.toString(); + var _a, _b; + var head = + (_b = + (_a = this.heading) === null || _a === void 0 + ? void 0 + : _a.toString()) !== null && _b !== void 0 + ? _b + : ''; return { tagName: 'div', className: 'dom-wizard-card', - children: [this.title(head), this.renderContent], + children: [ + this.title(head), + this.renderContent, + this.image(this.imageSrc, this.imageAlt, this.preimageStyle), + ], heading: this.heading, options: { onclick: this.onclick, - style: - (_a = this.styles) !== null && _a !== void 0 - ? _a - : { - position: 'relative', - backgroundColor: '#e4e4e4', - padding: '10px 10px', - 'border-radius': '5px', - 'box-shadow': '0px 0px 5px #00000052', - cursor: 'pointer', - }, + style: this.styles, }, }; }; @@ -39,6 +67,21 @@ var Card = /** @class */ (function () { }, }; }; + Card.prototype.image = function (src, alt, imgStyle) { + return src + ? { + tagName: 'img', + options: { + src: src, + alt: alt, + style: + imgStyle !== null && imgStyle !== void 0 + ? imgStyle + : this.preimageStyle, + }, + } + : {}; + }; return Card; })(); exports.default = Card; diff --git a/modules/widgets/card/base_card.ts b/modules/widgets/card/base_card.ts new file mode 100644 index 0000000..63a5ea1 --- /dev/null +++ b/modules/widgets/card/base_card.ts @@ -0,0 +1,77 @@ +class Card { + renderContent: Function; + heading?: String = ' '; + onclick?: Function; + imageSrc?: string = ' '; + imageAlt?: string; + preimageStyle: Object = { + width: '100%', + heigth: '100%', + }; + styles: Object = { + position: 'relative', + backgroundColor: '#e4e4e4', + padding: '10px 10px', + 'border-radius': '5px', + 'box-shadow': '0px 0px 5px #00000052', + cursor: 'pointer', + }; + + constructor( + renderContent: Function, + heading?: string, + styles?: Object, + onclick?: Function, + imageSrc?: string, + imageStyles?: Object, + imageAlt?: string, + ) { + this.renderContent = renderContent; + this.heading = heading; + this.styles = styles ?? this.styles; + this.onclick = onclick; + this.imageSrc = imageSrc; + this.imageAlt = imageAlt; + this.preimageStyle = imageStyles ?? this.preimageStyle; + } + + render() { + var head = this.heading?.toString() ?? ''; + return { + tagName: 'div', + className: 'dom-wizard-card', + children: [ + this.title(head), + this.renderContent, + this.image(this.imageSrc, this.imageAlt, this.preimageStyle), + ], + heading: this.heading, + options: { + onclick: this.onclick, + style: this.styles, + }, + }; + } + private title(text: string) { + return { + tagName: 'h2', + options: { + textContent: text, + }, + }; + } + private image(src?: string, alt?: string, imgStyle?: Object) { + return src + ? { + tagName: 'img', + options: { + src: src, + alt: alt, + style: imgStyle ?? this.preimageStyle, + }, + } + : {}; + } +} + +export default Card; diff --git a/modules/widgets/card/base_card.tsx b/modules/widgets/card/base_card.tsx deleted file mode 100644 index 76bc018..0000000 --- a/modules/widgets/card/base_card.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Label } from '../label'; - -class Card { - renderContent: Function; - heading?: String; - styles?: Object; - onclick?: Function; - imageSrc?: string; - imageAlt?: string; - imageStyles?: Object; - - constructor( - renderContent: Function, - heading?: string, - styles?: Object, - onclick?: Function, - imageSrc?: string, - imageStyles?: Object, - imageAlt?: string, - ) { - this.renderContent = renderContent; - this.heading = heading; - this.styles = styles; - this.onclick = onclick; - this.imageSrc = imageSrc; - this.imageAlt = imageAlt; - this.imageStyles = imageStyles; - } - - render() { - var head = this.heading?.toString() ?? ''; - return { - tagName: 'div', - className: 'dom-wizard-card', - children: [this.title(head), this.renderContent], - heading: this.heading, - options: { - onclick: this.onclick, - style: this.styles ?? { - position: 'relative', - backgroundColor: '#e4e4e4', - padding: '10px 10px', - 'border-radius': '5px', - 'box-shadow': '0px 0px 5px #00000052', - cursor: 'pointer', - }, - }, - }; - } - private title(text: string) { - return { - tagName: 'h2', - options: { - textContent: text, - }, - }; - } - private image(src: string, alt?: string, style?: string) { - return { - tagName: 'img', - }; - } -} - -export default Card; diff --git a/modules/widgets/card/content_card.js b/modules/widgets/card/content_card.js new file mode 100644 index 0000000..bef1012 --- /dev/null +++ b/modules/widgets/card/content_card.js @@ -0,0 +1,33 @@ +'use strict'; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.default = ContentCard; +var base_card_1 = require('./base_card'); +/** + * Create and render a content-only card component. + * + * Wraps the `Card` class from `./base_card`, forwarding the provided + * render function and optional presentation parameters, then returns the + * rendered node produced by the `Card` instance. + * + * @param {Function} renderContent - A function responsible for populating the + * card body. It receives the card's content container as an argument. + * @param {string} [heading] - Optional heading/title text for the card. + * @param {Object} [styles] - Optional style object to apply to the card container (CSS properties as keys). + * @param {Function} [onclick] - Optional click handler for the card; receives the click event. + * + * @returns {*} The rendered card node returned by `Card.prototype.render()` (depends on `Card` implementation). + * + * @example + * import ContentCard from './content_card'; + * + * function renderBody(container) { + * container.textContent = 'Hello, world!'; + * } + * + * const node = ContentCard(renderBody, 'Greeting', { padding: '8px' }); + * document.body.appendChild(node); + */ +function ContentCard(renderContent, heading, styles, onclick) { + var card = new base_card_1.default(renderContent, heading, styles, onclick); + return card.render(); +} diff --git a/modules/widgets/card/text_card.tsx b/modules/widgets/card/content_card.ts similarity index 100% rename from modules/widgets/card/text_card.tsx rename to modules/widgets/card/content_card.ts diff --git a/modules/widgets/card/image_card.js b/modules/widgets/card/image_card.js new file mode 100644 index 0000000..ca93522 --- /dev/null +++ b/modules/widgets/card/image_card.js @@ -0,0 +1,41 @@ +'use strict'; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.default = ImageCard; +var base_card_1 = require('./base_card'); +/** + * Create and render an image card component. + * + * This factory wraps the `Card` class from `./base_card`, passing image-related + * arguments to the constructor and returning the rendered DOM/node output. + * + * @param {Function} renderContent - A function used to render the inner content of the card. It + * will be called by the `Card` instance when building the card body. + * @param {string} imageSrc - The source URL of the image to display in the card. + * @param {string} [imageAlt] - Optional alt text for the image. Defaults to an empty string if omitted. + * @param {Object} [imageStyles] - Optional style object to apply to the image element (CSS properties as keys). + * @param {string} [heading] - Optional heading text for the card. + * @param {Object} [styles] - Optional style object to apply to the card container. + * @param {Function} [onclick] - Optional click handler for the card. Receives the click event as an argument. + * + * @returns {*} The rendered card node returned by `Card.prototype.render()` (type depends on `Card` implementation). + */ +function ImageCard( + renderContent, + imageSrc, + imageAlt, + imageStyles, + heading, + styles, + onclick, +) { + var card = new base_card_1.default( + renderContent, + heading, + styles, + onclick, + imageSrc, + imageStyles, + imageAlt, + ); + return card.render(); +} diff --git a/modules/widgets/card/image_card.ts b/modules/widgets/card/image_card.ts new file mode 100644 index 0000000..9ae5ecc --- /dev/null +++ b/modules/widgets/card/image_card.ts @@ -0,0 +1,40 @@ +import Card from './base_card'; + +/** + * Create and render an image card component. + * + * This factory wraps the `Card` class from `./base_card`, passing image-related + * arguments to the constructor and returning the rendered DOM/node output. + * + * @param {Function} renderContent - A function used to render the inner content of the card. It + * will be called by the `Card` instance when building the card body. + * @param {string} imageSrc - The source URL of the image to display in the card. + * @param {string} [imageAlt] - Optional alt text for the image. Defaults to an empty string if omitted. + * @param {Object} [imageStyles] - Optional style object to apply to the image element (CSS properties as keys). + * @param {string} [heading] - Optional heading text for the card. + * @param {Object} [styles] - Optional style object to apply to the card container. + * @param {Function} [onclick] - Optional click handler for the card. Receives the click event as an argument. + * + * @returns {*} The rendered card node returned by `Card.prototype.render()` (type depends on `Card` implementation). + */ +export default function ImageCard( + renderContent: Function, + imageSrc: string, + imageAlt?: string, + imageStyles?: Object, + heading?: string, + styles?: Object, + onclick?: Function, +) { + let card = new Card( + renderContent, + heading, + styles, + onclick, + imageSrc, + imageStyles, + imageAlt, + ); + + return card.render(); +} diff --git a/modules/widgets/card/image_card.tsx b/modules/widgets/card/image_card.tsx deleted file mode 100644 index 06309f6..0000000 --- a/modules/widgets/card/image_card.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import Card from './base_card'; - -export default function ImageCard( - renderContent: Function, - heading?: string, - styles?: Object, - onclick?: Function, -) { - let card = new Card(renderContent, heading, styles, onclick); - - return card.render(); -} diff --git a/modules/widgets/card/text_card.js b/modules/widgets/card/text_card.js new file mode 100644 index 0000000..2cb33b3 --- /dev/null +++ b/modules/widgets/card/text_card.js @@ -0,0 +1,8 @@ +'use strict'; +Object.defineProperty(exports, '__esModule', { value: true }); +exports.default = ContentCard; +var base_card_1 = require('./base_card'); +function ContentCard(renderContent, heading, styles, onclick) { + var card = new base_card_1.default(renderContent, heading, styles, onclick); + return card.render(); +}