Widget card #75

modules/widgets/card/base_card.js

@@ -0,0 +1,87 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var Card = /** @class */ (function () {
+  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 !== 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, _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,
+        this.image(this.imageSrc, this.imageAlt, this.preimageStyle),
+      ],
+      heading: this.heading,
+      options: {
+        onclick: this.onclick,
+        style: this.styles,
+      },
+    };
+  };
+  Card.prototype.title = function (text) {
+    return {
+      tagName: 'h2',
+      options: {
+        textContent: text,
+      },
+    };
+  };
+  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;

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;

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();
+}

modules/widgets/card/content_card.ts

@@ -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();
+}

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();
+}

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();
+}

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();
+}