@phun-ky/speccer / measure

Variable: measure

const measure: {
  create: (
    text: string | number,
    options: SpeccerOptionsInterface,
    id: string,
    tag: string
  ) => HTMLElement;
  element: (
    targetElement: HTMLElement,
    options?: SpeccerOptionsInterface
  ) => Promise<void>;
};

Defined in: main.ts:159

This feature measures given element

Type Declaration

create()

create: (
  text: string | number,
  options: SpeccerOptionsInterface,
  id: string,
  tag: string
) => (HTMLElement = measureCreate);

Create a measurement element with optional text, area, and element type.

Parameters

text

The text to display on the element.

string | number

options

SpeccerOptionsInterface

The options.

id

string

The element id.

tag

string = 'span'

The element type.

Returns

HTMLElement

• The created measurement element.

Example

const measurement = create(100, 'width bottom', 'div');
document.body.appendChild(measurement);

element()

element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface) =>
  (Promise<void> = measureElement);

Create a measurement element and add it to the body with styles matching a specified target element based on the attribute values from data-speccer.

Parameters

targetElement

HTMLElement

The target element to match styles with.

options?

SpeccerOptionsInterface

Options.

Returns

Promise<void>

• A promise that resolves after creating and styling the measurement element.

Example

Height to the right

const targetElement = document.getElementById('target');
const options = {
  position: 'right',
  measure: {
    height: true
  }
};

measure(targetElement, options);

Slim width to the bottom

const targetElement = document.getElementById('target');
const options = {
  position: 'bottom',
  measure: {
    slim: true,
    width: true
  }
};

measure(targetElement, options);

Example

Use the following code, either for html or js:

<div
  data-speccer="measure [height left|right] | [width top|bottom]"
  class="..."
>
  …
</div>

const targetElement = document.getElementById('target');
const options = {
  position: 'right',
  measure: {
    height: true
  }
};

measure(targetElement, options);