Skip to main content

JavaScript

docs-source

camelize​

Returns a camel-cased string.

  • @param string string Add string to convert.

Usage:

import { checkAttr } from '@eightshift/frontend-libs/scripts/helpers';

camelize('New super Test-title');

Output:

newSuperTestTitle

checkAttr​

Checks whether the attributes exist in the attributes list. If the value is not set, it checks for the default value. If the default value is not set, it adds a fallback value depending on the type, or if undefinedAllowed is set to true, it sets it to undefined.

  • @param string key Key to check.
  • @param array attributes Array of attributes.
  • @param array manifest Array of default attributes from manifest.json.
  • @param string componentName The real component name.
  • @param boolean undefinedAllowed Allowed detection of undefined values.

Usage:

	import { checkAttr } from '@eightshift/frontend-libs/scripts/helpers';

	checkAttr('buttonUse', attributes, manifest, componentName, undefinedAllowed);

checkAttrResponsive​

Map and check attributes for responsive object from responsiveAttributes property from manifest.

  • @param string keyName Key name to find in responsiveAttributes object.
  • @param array attributes Array of attributes.
  • @param array manifest Array of default attributes from manifest.json.
  • @param string componentName The real component name.
  • @param boolean undefinedAllowed Allowed detection of undefined values.
  • @throws \Exception If missing responsiveAttributes or keyName in responsiveAttributes.
  • @throws \Exception If missing keyName in responsiveAttributes.
  • @return mixed

Manifest:

{
	"attributes": {
		"headingContentSpacingLarge": {
			"type": "integer",
			"variable": "default",
			"default": 10,
		},
		"headingContentSpacingDesktop": {
			"type": "integer",
			"variable": "default",
			"default": 5,
		},
		"headingContentSpacingTablet": {
			"type": "integer",
			"variable": "default",
			"default": 3,
		},
		"headingContentSpacingMobile": {
			"type": "integer",
			"variable": "default",
			"default": 1,
		}
	},
	"responsiveAttributes": {
		"headingContentSpacing": {
			"large": "headingContentSpacingLarge",
			"desktop": "headingContentSpacingDesktop",
			"tablet": "headingContentSpacingTablet",
			"mobile": "headingContentSpacingMobile"
		}
	}
}

Usage:

	import { checkAttrResponsive } from '@eightshift/frontend-libs/scripts/helpers';

	checkAttrResponsive('headingContentSpacing', attributes, manifest, componentName, undefinedAllowed);

Output:

[
	large: 10,
	desktop: 5,
	tablet: 3,
	mobile: 1,
]

cookies​

Used to set and get cookie values.

Usage:

	import { cookies } from '@eightshift/frontend-libs/scripts/helpers';

	cookies.setCookie('gdpr', '2', cookies.setOneDay(), '/');

	cookies.getCookie('gdpr');

debounce​

Debounces the provided function. For more information, check this blog post.

  • @param func Provided function to apply debounce.
  • @param int wait Wait time for debounce.

Usage:

	import { debounce } from '@eightshift/frontend-libs/scripts/helpers';

	debounce(() => {
		// callback function.
	}, 250);

devices​

Checks if your browser's navigator is a specific device.

Usage:

	import { device } from '@eightshift/frontend-libs/scripts/helpers';

	device.iPhone();

dynamicImport​

Used to get (require) all the files using the require.context method. It will find all files recursively in the folder using a regex. The following example will require all assets/index.js files inside the custom folder, so there is no need to manually add the files to the build.

  • @param object paths All require.context patch to iterate.

Usage:

	import { dynamicImport } from '@eightshift/frontend-libs/scripts/helpers';

	dynamicImport(require.context('./../../custom', true, /assets\/index.js$/));

elementChildrenHeight​

Returns the height of the element measured by the height of its children.

  • @param object element DOM element

Usage:

import { dynamicImport } from '@eightshift/frontend-libs/scripts/helpers';

elementChildrenHeight('.js-item');

Output:

<div class="js-item" style="height: 100px"></div>
<div class="js-item" style="height: 100px"></div>
<div class="js-item" style="height: 100px"></div>

escape-string​

Takes the provided string and removes special characters. Characters that will be removed: ([;&,.+*~':"!^#$%@[\]()=>|].

  • @param string $key Key to check.

Usage:

	import { escapeString } from '@eightshift/frontend-libs/scripts/helpers';

	escapeString.escapeString('Special string');

responsiveSelectors​

Create responsive selectors used for responsive attributes.

Useful if you want to show how the responsive behavior looks in the editor.

  • @param array items Array of breakpoints.
  • @param string selector Selector for this breakpoint.
  • @param string parent Parent block selector.
  • @param boolean use_modifier If false, you can use this selector for visibility.

Usage:

	import { responsiveSelectors } from '@eightshift/frontend-libs/scripts/helpers';

	responsiveSelectors($attributes['width'], 'width', $blockClass);

Output:

	.block-column__width-large--4

selector​

Returns BEM selector for HTML class and checks if the condition part is set.

  • @param boolean condition Check condition.
  • @param string block BEM Block selector.
  • @param string element BEM Element selector.
  • @param string modifier BEM Modifier selector.
  • @return string

Usage:

	import { selector } from '@eightshift/frontend-libs/scripts/helpers';

	selector(!(buttonContent && buttonUrl), `${componentClass}-placeholder`);

	selector(test, componentClass, elementClass);

	selector(!newTest, componentClass, elementClass, modifierClass);

Equivalent:

	!(buttonContent && buttonUrl) ? `${componentClass}-placeholder` : '';

	test ? `${componentClass}__${elementClass}` : '';

	!(newTest) ? `${componentClass}__${elementClass}--${modifierClass}` : '';

getOptionsColor​

Use this hook to filter the global colors out of the component or block manifest

  • @param array colors Array of colors to filter.

Usage:

import { getOptions } from '@eightshift/frontend-libs/scripts/editor';

<ColorPaletteCustom
		label={
			<>
				<Icon icon={icons.color} />
				{__('Color', 'eightshift-frontend-libs')}
			</>
		}
		colors={getOptionColors(getOptions(manifest, componentName, 'color', options))}
		value={headingColor}
		onChange={(value) => setAttributes({ [`${componentName}Color`]: value })}
/>

getOptions​

Provides the ability to override component options from the parent block/component. The components must have the same option names as attribute standard with componentName prefix.

  • @param object manifest Original manifest from the component.
  • @param string componentName Current componentName. This is changed depending on the passed componentName.
  • @param string attribute Attribute name to check without componentName prefix. Value is auto camelCased.
  • @param object options Options provided by the parent block/component.

Usage:

import { getOptions } from '@eightshift/frontend-libs/scripts/editor';

<SelectControl
	label={
		<>
			<Icon icon={icons.size} />
			{__('Type', 'eightshift-frontend-libs')}
		</>
	}
	value={buttonType}
	options={getOptions(manifest, componentName, 'type', options)}
	onChange={(value) => setAttributes({ [`${componentName}Type`]: value })}
/>

getPaletteColors​

Use this hook to read editor-color-palette colors directly from WP built-in store.

  • Requires WP => 5.3

Usage:

	import { getPaletteColors } from '@eightshift/frontend-libs/scripts/editor';

	getPaletteColors();

outputCssVariablesGlobal​

Get global manifest.json and return globalVariables as CSS variables.

  • @param array globalManifest Array of global variables data.

Data:

const manifestGlobal = {
	"globalVariables": {
		"maxCols": 12,
		"breakpoints": {
			"mobile": 479,
			"tablet": 1279,
			"desktop": 1919,
			"large": 1920
		},
		"containers": {
			"default": "1330px"
		},
		"gutters": {
			"none": "0",
			"default": "25px",
			"big": "50px"
		},
		"sectionSpacing": {
			"min":  -300,
			"max":  300,
			"step": 10
		},
		"sectionInSpacing": {
			"min":  0,
			"max":  300,
			"step": 10
		},
		"colors": [
			{
				"name": "Infinum",
				"slug": "infinum",
				"color": "#D8262C"
			},
			{
				"name": "Black",
				"slug": "black",
				"color": "#111111"
			}
		]
	}
};

Usage:

import { getUnique } from '@eightshift/frontend-libs/scripts/editor';
import globalSettings from './../../manifest.json';

outputCssVariablesGlobal(globalSettings);

Output:

<style>
	:root {
		--global-max-cols: 12;
		--global-breakpoints-mobile: 479;
		--global-breakpoints-tablet: 1279;
		--global-breakpoints-desktop: 1919;
		--global-breakpoints-large: 1920;
		--global-containers-default: 1330px;
		--global-gutters-none: 0;
		--global-gutters-default: 25px;
		--global-gutters-big: 50px;
		--global-section-spacing-min: -300;
		--global-section-spacing-max: 300;
		--global-section-spacing-step: 10;
		--global-section-in-spacing-min: 0;
		--global-section-in-spacing-max: 300;
		--global-section-in-spacing-step: 10;
		--global-colors-infinum: #D8262C;
		--global-colors-black: #111111;
		--global-colors-white: #FFFFFF;
	}
</style>

outputCssVariables​

Get component/block options and process them in CSS variables.

For detailed usage check block styles;

  • @param array $attributes Built attributes.
  • @param array $manifest Component/block manifest data.
  • @param string $unique Unique key.
  • @param array $globalManifest Global manifest array.

getUnique​

Return unique ID for block processing.

Usage:

import { getUnique } from '@eightshift/frontend-libs/scripts/editor';

getUnique();

Output:

891273981374b98127419287

overrideInnerBlockAttributes​

Used to set attributes on all innerBlocks. This value will be stored in the block editor store and set to a block.

Usage:

	import { useSelect } from '@wordpress/data';
	import { overrideInnerBlockAttributes } from '@eightshift/frontend-libs/scripts/editor';

	useSelect((select) => {
		overrideInnerBlockAttributes(
			select,
			props.clientId,
			{
				wrapperDisable: true,
			}
		);
	});

overrideInnerBlockSimpleWrapperAttributes​

Used to set attributes on all innerBlocks preset only for simple wrapper setup. This value will be stored in the block editor store and set to a block.

Usage:

	import { useSelect } from '@wordpress/data';
	import { overrideInnerBlockSimpleWrapperAttributes } from '@eightshift/frontend-libs/scripts/editor';

	useSelect((select) => {
		overrideInnerBlockSimpleWrapperAttributes(
			select,
			props.clientId,
		);
	});

props​

Output only attributes that are used in the component and remove everything else.

  • @param object attributes Object of attributes from block/component.
  • @param string realName Old key to use, generally this is the name of the block/component.
  • @param string newName New key to use to rename attributes.
  • @param boolean isBlock Check if helper is used on block or component.
  • @param string globalManifestData If global manifest is not provided use the default path.

Data:

const attributes = {
	buttonColor: 'red',
	buttonSize: 'big',
	buttonIcon: 'blue',
	blockName: 'button',
	wrapperSize: 'big',
	wrapperType: 'normal',
};

const blockName = 'button';
const componentName = 'button';

Usage:

import { props } from '@eightshift/frontend-libs/scripts/editor';

{...props(attributes, blockName, '', true)}

{...props(attributes, componentName)}

{...props(attributes, 'typography', componentName)}

Output:

{
	buttonColor: 'red',
	buttonSize: 'big',
	buttonIcon: 'blue',
	blockName: 'button',
};

{
	buttonColor: 'red',
	buttonSize: 'big',
	buttonIcon: 'blue',
	blockName: 'button',
};

{
	typographyColor: 'red',
	typographySize: 'big',
	typographyIcon: 'blue',
};

ucfirst​

Converts the first letter of a string to uppercase.

Usage:

	import { ucfirst } from '@eightshift/frontend-libs/scripts/editor';

	ucfirst('custom');
Made with ❤️ by Infinum team.