tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
342 lines • 10.2 kB
text/typescript
export default TinyAnalogClock;
/**
* Configuration object for the Analog Clock.
*/
export type ClockConfig = {
/**
* - The background color of the clock face (e.g., '#ffffff', 'rgb(0,0,0)').
*/
bgColor: string;
/**
* - The color of the clock's outer border.
*/
borderColor: string;
/**
* - The thickness of the outer border in pixels.
*/
borderWidth: number;
/**
* - The color of the minute/hour tick marks.
*/
markColor: string;
/**
* - The color of the hour hand.
*/
hourHandColor: string;
/**
* - The color of the minute hand.
*/
minuteHandColor: string;
/**
* - The color of the second hand.
*/
secondHandColor: string;
/**
* - The color of the numbers on the clock face.
*/
textColor: string;
/**
* - The URL of an image to use as the clock face background. Set to null to use bgColor.
*/
skinUrl: string | null;
/**
* - Whether to render the numbers (1-12) on the clock face.
*/
showNumbers: boolean;
/**
* - Whether to display the second hand.
*/
showSeconds: boolean;
/**
* - The total width and height of the clock in pixels.
*/
size: number;
/**
* - Scale factor for the font size of the numbers relative to the clock size.
*/
sizeAdjust: number;
/**
* - Padding in pixels between the clock edge and the tick marks.
*/
padding: number;
/**
* - Distance multiplier (0-1) for placing numbers relative to the radius.
*/
angleDistance: number;
/**
* - Hour tick width as a percentage of clock size (0.0 to 1.0).
*/
pwH: number;
/**
* - Hour tick height as a percentage of clock size (0.0 to 1.0).
*/
phH: number;
/**
* - Minute tick width as a percentage of clock size (0.0 to 1.0).
*/
pwM: number;
/**
* - Minute tick height as a percentage of clock size (0.0 to 1.0).
*/
phM: number;
};
/**
* Configuration object for the Analog Clock.
* @typedef {Object} ClockConfig
* @property {string} bgColor - The background color of the clock face (e.g., '#ffffff', 'rgb(0,0,0)').
* @property {string} borderColor - The color of the clock's outer border.
* @property {number} borderWidth - The thickness of the outer border in pixels.
* @property {string} markColor - The color of the minute/hour tick marks.
* @property {string} hourHandColor - The color of the hour hand.
* @property {string} minuteHandColor - The color of the minute hand.
* @property {string} secondHandColor - The color of the second hand.
* @property {string} textColor - The color of the numbers on the clock face.
* @property {string|null} skinUrl - The URL of an image to use as the clock face background. Set to null to use bgColor.
* @property {boolean} showNumbers - Whether to render the numbers (1-12) on the clock face.
* @property {boolean} showSeconds - Whether to display the second hand.
* @property {number} size - The total width and height of the clock in pixels.
* @property {number} sizeAdjust - Scale factor for the font size of the numbers relative to the clock size.
* @property {number} padding - Padding in pixels between the clock edge and the tick marks.
* @property {number} angleDistance - Distance multiplier (0-1) for placing numbers relative to the radius.
* @property {number} pwH - Hour tick width as a percentage of clock size (0.0 to 1.0).
* @property {number} phH - Hour tick height as a percentage of clock size (0.0 to 1.0).
* @property {number} pwM - Minute tick width as a percentage of clock size (0.0 to 1.0).
* @property {number} phM - Minute tick height as a percentage of clock size (0.0 to 1.0).
*/
declare class TinyAnalogClock {
/**
* Creates an instance of TinyAnalogClock.
* Initializes the DOM structure and starts the animation loop.
* @param {Partial<ClockConfig>} [options] - Optional configuration overrides.
*/
constructor(options?: Partial<ClockConfig>);
/**
* Retrieves the current date and extracts the specific hour, minute, and second components.
* @returns {{ now: Date, s: number, m: number, h: number }}
* @private
*/
private _getDate;
/**
* Applies the current configuration to the DOM elements (colors, sizes, visibility).
* @private
*/
private _applyConfig;
/**
* Renders the clock face, including tick marks and numbers, based on the current size and config.
* Uses trigonometry to position elements perfectly from the center.
* @private
*/
private _renderFace;
/**
* Starts the RequestAnimationFrame loop to update hand positions.
* @private
*/
private _startTicker;
/**
* Gets the main HTML element of the clock.
* @returns {HTMLElement} The clock container.
*/
get element(): HTMLElement;
/**
* Sets the size of the clock.
* @param {number} value - The new size in pixels. Must be a positive number.
* @throws {Error} If value is not a positive number.
*/
set size(value: number);
/** * Gets the clock size in pixels.
* @returns {number}
*/
get size(): number;
/**
* Sets the background image (skin) of the clock.
* @param {string|null} url - The URL string of the image, or null to remove the skin.
* @throws {Error} If value is not a string or null.
*/
set skinUrl(url: string | null);
/**
* Gets the skin URL.
* @returns {string|null}
*/
get skinUrl(): string | null;
/**
* Sets the primary border color.
* @param {string} color - A valid CSS color string.
* @throws {Error} If value is not a non-empty string.
*/
set borderColor(color: string);
/**
* Gets the border color.
* @returns {string}
*/
get borderColor(): string;
/**
* Sets the primary marks color.
* @param {string} color - A valid CSS color string.
* @throws {Error} If value is not a non-empty string.
*/
set markColor(color: string);
/**
* Gets the tick marks color.
* @returns {string}
*/
get markColor(): string;
/**
* Sets the primary text color.
* @param {string} color - A valid CSS color string.
* @throws {Error} If value is not a non-empty string.
*/
set textColor(color: string);
/**
* Gets the text color.
* @returns {string}
*/
get textColor(): string;
/**
* Toggles the visibility of numbers on the clock face.
* @param {boolean} value - True to show numbers, false to hide.
* @throws {Error} If value is not a boolean.
*/
set showNumbers(value: boolean);
/**
* Gets numbers visibility.
* @returns {boolean}
*/
get showNumbers(): boolean;
/**
* Sets the background color.
* @param {string} value
*/
set bgColor(value: string);
/**
* Gets the background color.
* @returns {string}
*/
get bgColor(): string;
/**
* Sets the border thickness in pixels.
* @param {number} value
*/
set borderWidth(value: number);
/**
* Gets the border thickness.
* @returns {number}
*/
get borderWidth(): number;
/**
* Sets the hour hand color.
* @param {string} value
*/
set hourHandColor(value: string);
/**
* Gets the hour hand color.
* @returns {string}
*/
get hourHandColor(): string;
/**
* Sets the minute hand color.
* @param {string} value
*/
set minuteHandColor(value: string);
/**
* Gets the minute hand color.
* @returns {string}
*/
get minuteHandColor(): string;
/**
* Sets the second hand color.
* @param {string} value
*/
set secondHandColor(value: string);
/**
* Gets the second hand color.
* @returns {string}
*/
get secondHandColor(): string;
/**
* Toggle second hand visibility.
* @param {boolean} value
*/
set showSeconds(value: boolean);
/**
* Gets second hand visibility.
* @returns {boolean}
*/
get showSeconds(): boolean;
/**
* Sets the font size adjustment factor.
* @param {number} value - Positive number.
*/
set sizeAdjust(value: number);
/**
* Gets the font size adjustment factor.
* @returns {number}
*/
get sizeAdjust(): number;
/**
* Sets the padding from edge to ticks.
* @param {number} value - Non-negative number in pixels.
*/
set padding(value: number);
/**
* Gets the padding.
* @returns {number}
*/
get padding(): number;
/**
* Sets the angle distance multiplier for numbers placement.
* @param {number} value - Positive number.
*/
set angleDistance(value: number);
/**
* Gets the angle distance multiplier.
* @returns {number}
*/
get angleDistance(): number;
/**
* Sets the Hour tick width percentage.
* @param {number} value - Positive number.
*/
set pwH(value: number);
/**
* Gets the Hour tick width percentage.
* @returns {number}
*/
get pwH(): number;
/**
* Sets the Hour tick height percentage.
* @param {number} value - Positive number.
*/
set phH(value: number);
/**
* Gets the Hour tick height percentage.
* @returns {number}
*/
get phH(): number;
/**
* Sets the Minute tick width percentage.
* @param {number} value - Positive number.
*/
set pwM(value: number);
/**
* Gets the Minute tick width percentage.
* @returns {number}
*/
get pwM(): number;
/**
* Sets the Minute tick height percentage.
* @param {number} value - Positive number.
*/
set phM(value: number);
/**
* Gets the Minute tick height percentage.
* @returns {number}
*/
get phM(): number;
/**
* Destroys the clock instance, stops animations, and removes the element from DOM.
* @returns {void}
*/
destroy(): void;
#private;
}
//# sourceMappingURL=TinyAnalogClock.d.mts.map