rynex
Version:
A minimalist TypeScript framework for building reactive web applications with no virtual DOM
94 lines • 2.46 kB
JavaScript
/**
* Rynex Media Elements
* Media and embedded content elements
*/
import { createElement } from '../dom.js';
/**
* Video player
*/
export function video(props, ...children) {
return createElement('video', props, ...children);
}
/**
* Audio player
*/
export function audio(props, ...children) {
return createElement('audio', props, ...children);
}
/**
* Canvas element
*/
export function canvas(props) {
return createElement('canvas', props);
}
/**
* SVG container - creates proper SVG element with namespace
*/
export function svg(props, innerHTML) {
const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
// Apply props
if (props) {
for (const [key, value] of Object.entries(props)) {
if (value === null || value === undefined)
continue;
if (key === 'style' && typeof value === 'object') {
Object.assign(svgElement.style, value);
}
else if (key === 'class' || key === 'className') {
svgElement.setAttribute('class', value);
}
else if (key.startsWith('on') && typeof value === 'function') {
const eventName = key.slice(2).toLowerCase();
svgElement.addEventListener(eventName, value);
}
else {
svgElement.setAttribute(key, String(value));
}
}
}
// Set innerHTML if provided (for SVG paths)
if (innerHTML) {
svgElement.innerHTML = innerHTML;
}
return svgElement;
}
/**
* Create SVG path element
*/
export function svgPath(d, props) {
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', d);
if (props) {
for (const [key, value] of Object.entries(props)) {
if (value !== null && value !== undefined) {
path.setAttribute(key, String(value));
}
}
}
return path;
}
/**
* Iframe element
*/
export function iframe(props) {
return createElement('iframe', props);
}
/**
* Picture element
*/
export function picture(props, ...children) {
return createElement('picture', props, ...children);
}
/**
* Media source
*/
export function source(props) {
return createElement('source', props);
}
/**
* Media track
*/
export function track(props) {
return createElement('track', props);
}
//# sourceMappingURL=media.js.map