@phun-ky/speccer
Version:
A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
127 lines (122 loc) • 4.52 kB
TypeScript
type SpeccerFunctionType = () => void;
type SpeccerFeatureType = 'pin' | 'grid' | 'mark' | 'typography' | 'measure' | 'spacing';
type SpeccerPositionType = 'top' | 'left' | 'right' | 'bottom';
interface SpeccerOptionsInterface {
slug: string;
position: SpeccerPositionType;
type: SpeccerFeatureType;
pin?: {
bracket: boolean;
enclose: boolean;
subtle: boolean;
parent: boolean;
text: boolean;
useSVGLine: boolean;
useCurlyBrackets: boolean;
};
measure?: {
slim: boolean;
height: boolean;
width: boolean;
};
typography?: {
useSyntaxHighlighting: boolean;
};
spacing?: {
margin?: boolean;
padding?: boolean;
both?: boolean;
bound?: boolean;
};
grid?: {
toggle: string;
both?: boolean;
rows?: boolean;
columns?: boolean;
};
}
/**
* Extends the global Window interface to add custom properties.
*/
declare global {
interface Window {
/**
* Represents the DrawSVGCurlyBracket class for drawing curly brackets.
*/
DrawSVGCurlyBracket: any;
/**
* Represents the DrawCircle class for drawing circles.
*/
DrawCircle: any;
/**
* Represents the DrawSVGLine class for drawing lines.
*/
DrawSVGLine: any;
/**
* Represents the speccer object for additional functionality.
*/
speccer: any;
/**
* Represents the custom literals to be used.
* 
* @example
* ```js
* window.SPECCER_LITERALS = [あ,い,う,え,お,か,き,く,け,こ,さ,し,す,せ,そ,た,ち,つ,て,と,な,に,ぬ,ね,の,は,ひ,ふ,へ,ほ,ま,み,む,め,も,や,ゆ,よ,ら,り,る,れ,ろ,わ,を];
* speccer();
* ```
*/
SPECCER_LITERALS: string[];
}
}
//# sourceMappingURL=global.d.ts.map
/**
* Remove a speccer element by removing associated elements and SVG paths.
*
* This function removes any speccer elements linked to the specified element and
* also removes any SVG paths that might be associated with it.
*
* @param {HTMLElement} el - The HTML element to unpin.
* @returns {void} This function does not return a value.
*
* @example
* ```ts
* const element = document.getElementById('my-element');
* if (element) {
* removeSpeccerElement(element);
* }
* ```
*/
declare const removeSpeccerElement: (el: HTMLElement) => void;
declare const grid: {
create: (targetElement: HTMLElement, styles: Partial<CSSStyleDeclaration>, options: SpeccerOptionsInterface) => Promise<void>;
element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
};
declare const spacing: {
create: (text?: string | number, tag?: string) => HTMLElement;
element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
};
declare const pin: {
createPinElement: (content: string | undefined, options: SpeccerOptionsInterface, id?: string, n?: string) => HTMLElement;
pinElement: (targetElement: HTMLElement, parentElement: HTMLElement, content: string, options: SpeccerOptionsInterface) => Promise<string | void>;
pinElements: (sectionElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
};
declare const measure: {
create: (text: string | number | undefined, options: SpeccerOptionsInterface, id: string, tag?: string) => HTMLElement;
element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
};
declare const mark: {
create: (id: string, n?: string) => HTMLElement;
element: (targetElement: HTMLElement) => Promise<void>;
};
declare const typography: {
create: (html: string, options: SpeccerOptionsInterface, id: string) => HTMLElement;
element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface | undefined) => Promise<void>;
};
declare const modes: {
dom: (speccer: SpeccerFunctionType) => void;
lazy: () => void;
manual: (speccer: SpeccerFunctionType) => void;
activate: (speccer: SpeccerFunctionType) => void;
};
declare const speccer: () => void;
export { speccer as default, grid, mark, measure, modes, pin, removeSpeccerElement, spacing, typography };