Move the image component and directive into texture

src/plugins/muc-views/templates/muc-head.js

@@ -4,7 +4,7 @@ import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless";
 import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
 import 'shared/components/dropdown.js';
-import 'shared/texture/component.js';
+import 'shared/texture/components/texture.js';
 
 /** @param {import('../heading').default} el} */
 export default (el) => {

src/shared/chat/message-body.js

@@ -2,7 +2,7 @@ import { api } from "@converse/headless";
 import 'shared/registry.js';
 import 'shared/modals/image.js';
 import { CustomElement } from 'shared/components/element.js';
-import renderTexture from 'shared/texture/directive.js';
+import renderTexture from 'shared/texture/directives/texture.js';
 
 import './styles/message-body.scss';
 

src/shared/chat/templates/unfurl.js

@@ -1,7 +1,7 @@
 import { u } from '@converse/headless';
 import { isDomainAllowed } from 'utils/url.js';
 import { html } from 'lit';
-import 'shared/components/image.js';
+import 'shared/texture/components/image.js';
 
 const { getURI, isGIFURL } = u;
 
@@ -22,10 +22,10 @@ const tplUrlWrapper = (o, wrapped_template) =>
         ? html`<a href="${o.url}" target="_blank" rel="noopener">${wrapped_template(o)}</a>`
         : wrapped_template(o);
 
-const tplImage = o =>
+const tplImage = (o) =>
     html`<converse-image class="card-img-top hor_centered" href="${o.url}" src="${o.image}" .onImgLoad=${o.onload}></converse-image>`;
 
-export default o => {
+export default (o) => {
     const show_image = isValidImage(o.image);
     const has_body_info = o.title || o.description || o.url;
     if (show_image || has_body_info) {

src/shared/texture/README.md

@@ -1,3 +1,7 @@
 # Texture
 
-Converse's library for showing rich, multi-media messages based on text
+Converse's library for turning text into rich multimedia content.
+
+Includes various web components for rendering media.
+
+

src/shared/components/image.js → src/shared/texture/components/image.js

@@ -1,7 +1,7 @@
 import { api, u } from "@converse/headless";
+import { CustomElement } from "shared/components/element";
 import tplGif from 'shared/texture/templates/gif.js';
-import tplImage from 'shared/texture/templates/image.js';
-import { CustomElement } from './element.js';
+import tplImage from '../templates/image.js';
 import { shouldRenderMediaFromURL } from 'utils/url.js';
 
 const { filterQueryParamsFromURL, isGIFURL } = u;
@@ -11,10 +11,10 @@ export default class Image extends CustomElement {
 
     static get properties () {
         return {
-            'src': { type: String },
-            'onImgLoad': { type: Function },
+            src: { type: String },
+            onImgLoad: { type: Function },
             // If specified, image is wrapped in a hyperlink that points to this URL.
-            'href': { type: String },
+            href: { type: String },
         }
     }
 

src/shared/texture/component.js → src/shared/texture/components/texture.js

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
-import renderTexture from "./directive.js";
+import renderTexture from "../directives/texture.js";
 
-import "./texture.scss";
+import "../styles/texture.scss";
 
 /**
  * The Texture custom element allows you to parse transform text into rich DOM elements.

src/shared/texture/directive.js → src/shared/texture/directives/texture.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { until } from "lit/directives/until.js";
 import { Directive, directive } from "lit/directive.js";
-import { Texture } from "./texture.js";
+import { Texture } from "../texture.js";
 
 class TextureRenderer {
     /**

src/shared/texture/templates/image.js

@@ -1,4 +1,4 @@
 import { html } from "lit";
-import { renderImage } from "shared/directives/image.js";
+import { renderImage } from "../directives/image.js";
 
 export default (o) => html`${renderImage(o.src || o.url, o.href, o.onLoad, o.onClick)}`;

src/types/shared/texture/components/image.d.ts

@@ -0,0 +1,20 @@
+export default class Image extends CustomElement {
+    static get properties(): {
+        src: {
+            type: StringConstructor;
+        };
+        onImgLoad: {
+            type: FunctionConstructor;
+        };
+        href: {
+            type: StringConstructor;
+        };
+    };
+    src: any;
+    href: any;
+    onImgClick: any;
+    onImgLoad: any;
+    render(): import("lit").TemplateResult<1>;
+}
+import { CustomElement } from "shared/components/element";
+//# sourceMappingURL=image.d.ts.map

src/types/shared/texture/components/texture.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The Texture custom element allows you to parse transform text into rich DOM elements.
+ * @example <converse-texture text="*_hello_ world!*"></converse-texture>
+ */
+export default class Texture extends LitElement {
+    static get properties(): {
+        embed_audio: {
+            type: BooleanConstructor;
+        };
+        embed_videos: {
+            type: BooleanConstructor;
+        };
+        mentions: {
+            type: ArrayConstructor;
+        };
+        nick: {
+            type: StringConstructor;
+        };
+        offset: {
+            type: NumberConstructor;
+        };
+        onImgClick: {
+            type: FunctionConstructor;
+        };
+        onImgLoad: {
+            type: FunctionConstructor;
+        };
+        render_styling: {
+            type: BooleanConstructor;
+        };
+        show_images: {
+            type: BooleanConstructor;
+        };
+        hide_media_urls: {
+            type: BooleanConstructor;
+        };
+        show_me_message: {
+            type: BooleanConstructor;
+        };
+        text: {
+            type: StringConstructor;
+        };
+    };
+    createRenderRoot(): this;
+    nick: any;
+    onImgClick: any;
+    onImgLoad: any;
+    text: any;
+    embed_audio: boolean;
+    embed_videos: boolean;
+    hide_media_urls: boolean;
+    mentions: any[];
+    offset: number;
+    render_styling: boolean;
+    show_image_urls: boolean;
+    show_images: boolean;
+    show_me_message: boolean;
+    render(): import("lit/directive.js").DirectiveResult<{
+        new (_partInfo: import("lit/directive.js").PartInfo): {
+            render(text: string, offset: number, options: object, callback?: Function): import("lit").TemplateResult<1>;
+            readonly _$isConnected: boolean;
+            update(_part: import("lit").Part, props: Array<unknown>): unknown;
+        };
+    }>;
+}
+import { LitElement } from "lit";
+//# sourceMappingURL=texture.d.ts.map

src/types/shared/texture/directives/image.d.ts

@@ -0,0 +1,39 @@
+/**
+ * lit directive which attempts to render an <img> element from a URL.
+ * It will fall back to rendering an <a> element if it can't.
+ *
+ * @param { String } src - The value that will be assigned to the `src` attribute of the `<img>` element.
+ * @param { String } href - The value that will be assigned to the `href` attribute of the `<img>` element.
+ * @param { Function } onLoad - A callback function to be called once the image has loaded.
+ * @param { Function } onClick - A callback function to be called once the image has been clicked.
+ */
+export const renderImage: (src: string, href?: string, onLoad?: Function, onClick?: Function) => import("lit/async-directive.js").DirectiveResult<typeof ImageDirective>;
+declare class ImageDirective extends AsyncDirective {
+    /**
+     * @param {string} src - The source URL of the image.
+     * @param {string} [href] - The optional hyperlink for the image.
+     * @param {Function} [onLoad] - Callback function to be called once the image has loaded.
+     * @param {Function} [onClick] - Callback function to be called once the image has been clicked.
+     * @returns {import('lit').TemplateResult}
+     */
+    render(src: string, href?: string, onLoad?: Function, onClick?: Function): import("lit").TemplateResult;
+    /**
+     * @param {string} src - The source URL of the image.
+     * @param {string} [href] - The optional hyperlink for the image.
+     * @param {Function} [onLoad] - Callback function to be called once the image has loaded.
+     * @param {Function} [onClick] - Callback function to be called once the image has been clicked.
+     * @returns {import('lit').TemplateResult}
+     */
+    renderImage(src: string, href?: string, onLoad?: Function, onClick?: Function): import("lit").TemplateResult;
+    /**
+     * Handles errors that occur during image loading.
+     * @param {string} src - The source URL of the image that failed to load.
+     * @param {string} [href] - The optional hyperlink for the image.
+     * @param {Function} [onLoad] - Callback function to be called once the image has loaded.
+     * @param {Function} [onClick] - Callback function to be called once the image has been clicked.
+     */
+    onError(src: string, href?: string, onLoad?: Function, onClick?: Function): void;
+}
+import { AsyncDirective } from 'lit/async-directive.js';
+export {};
+//# sourceMappingURL=image.d.ts.map

src/types/shared/texture/directives/texture.d.ts

@@ -0,0 +1,13 @@
+export default renderTexture;
+declare const renderTexture: (text: string, offset: number, options: any, callback?: Function) => import("lit/directive.js").DirectiveResult<typeof TextureDirective>;
+declare class TextureDirective extends Directive {
+    /**
+     * @param {string} text
+     * @param {number} offset
+     * @param {object} options
+     * @param {Function} [callback]
+     */
+    render(text: string, offset: number, options: object, callback?: Function): import("lit").TemplateResult<1>;
+}
+import { Directive } from "lit/directive.js";
+//# sourceMappingURL=texture.d.ts.map

src/types/utils/html.d.ts

@@ -9,28 +9,24 @@ export function getNameAndValue(field: HTMLInputElement | HTMLSelectElement): {
 export function getFileName(url: any): any;
 /**
  * Has an element a class?
- * @method u#hasClass
  * @param { string } className
  * @param { Element } el
  */
 export function hasClass(className: string, el: Element): boolean;
 /**
  * Add a class to an element.
- * @method u#addClass
  * @param { string } className
  * @param { Element } el
  */
 export function addClass(className: string, el: Element): Element;
 /**
  * Remove a class from an element.
- * @method u#removeClass
  * @param { string } className
  * @param { Element } el
  */
 export function removeClass(className: string, el: Element): Element;
 /**
  * Remove an element from its parent
- * @method u#removeElement
  * @param { Element } el
  */
 export function removeElement(el: Element): Element;
@@ -46,7 +42,6 @@ export function ancestor(el: HTMLElement, selector: string): HTMLElement;
 export function getHyperlinkTemplate(url: string): TemplateResult | string;
 /**
  * Shows/expands an element by sliding it out of itself
- * @method slideOut
  * @param {HTMLElement} el - The HTML string
  * @param {Number} duration - The duration amount in milliseconds
  */

src/utils/html.js

@@ -169,7 +169,6 @@ function getNextElement (el, selector = '*') {
 
 /**
  * Has an element a class?
- * @method u#hasClass
  * @param { string } className
  * @param { Element } el
  */
@@ -179,7 +178,6 @@ export function hasClass (className, el) {
 
 /**
  * Add a class to an element.
- * @method u#addClass
  * @param { string } className
  * @param { Element } el
  */
@@ -190,7 +188,6 @@ export function addClass (className, el) {
 
 /**
  * Remove a class from an element.
- * @method u#removeClass
  * @param { string } className
  * @param { Element } el
  */
@@ -201,7 +198,6 @@ export function removeClass (className, el) {
 
 /**
  * Remove an element from its parent
- * @method u#removeElement
  * @param { Element } el
  */
 export function removeElement (el) {
@@ -248,7 +244,6 @@ export function ancestor (el, selector) {
 
 /**
  * Return the element's siblings until one matches the selector.
- * @method u#nextUntil
  * @param {HTMLElement} el
  * @param {String} selector
  */
@@ -265,7 +260,6 @@ function nextUntil (el, selector) {
 /**
  * Helper method that replace HTML-escaped symbols with equivalent characters
  * (e.g. transform occurrences of '&' to '&')
- * @method u#unescapeHTML
  * @param {String} string - a String containing the HTML-escaped symbols.
  */
 function unescapeHTML (string) {
@@ -275,7 +269,6 @@ function unescapeHTML (string) {
 }
 
 /**
- * @method u#escapeHTML
  * @param {string} string
  */
 function escapeHTML (string) {
@@ -305,7 +298,6 @@ export function getHyperlinkTemplate (url) {
 
 /**
  * Shows/expands an element by sliding it out of itself
- * @method slideOut
  * @param {HTMLElement} el - The HTML string
  * @param {Number} duration - The duration amount in milliseconds
  */