README

为在LIN3S风格中构建视图提供基本CSS和JS文件。

安装

推荐且最合适的安装方式是通过Yarn

$ yarn add lin3s-front-foundation

或通过NPM

$ npm install --save lin3s-front-foundation

用法 - 可用功能

异步

此包将提供所有与异步相关的实现。例如，与Promise相关的实现。

Async.cancelablePromise( promise )

此方法将包装一个Promise对象，并提供一个cancel()方法来取消内部Promise。我们将通过promise属性访问原始Promise。

import {Async} from 'lin3s-front-foundation';
 
const aPromise = new Promise((resolve, reject) => {
  // ...
});
 
const aCancelablePromise = Async.cancelablePromise(aPromise);
 
aCancelablePromise.promise.then(resolvedObject => {
  // ...
});
 
aCancelablePromise.cancel();
// aCancelablePromise.promise has been rejected right after calling the cancel() method.

浏览器

此包将提供所有与浏览器相关的实现。

Browser.isIE11()

此方法将告诉我们浏览器是否为Internet Explorer 11。

import {Browser} from 'lin3s-front-foundation';
 
const isIE11 = Browser.isIE11();

Dom

此包将提供所有与Dom相关的实现。

import {Dom} from 'lin3s-front-foundation';

const currentHtmlLang = Dom.getHtmlLang();

console.log(currentHtmlLang);

Dom.getHtmlLang()

此方法将返回html标签的lang属性。

Dom.loadScript( scriptPath )

此方法将通过提供的scriptPath加载脚本，并返回一个Promise对象。当脚本加载完成后，此Promise将被解析。

import {Dom} from 'lin3s-front-foundation';
 
const scriptPath = 'https://yourdomain.com/script-path.js';
 
const scriptLoadPromise = Dom.loadScript(scriptPath);

scriptLoadPromise.then(() => {
  // Our script has been loaded!
});

Dom.injectScript( scriptCode, domNode = document.body )

此方法将在传递的domNode中注入指定的scriptCode。默认情况下，domNode将是文档的主体。提供的scriptCode将被一个IIFE包装。

import {Dom} from 'lin3s-front-foundation';
 
const 
  mainDomNode = document.querySelector('.main'),
  testScriptA = `console.log('This is the injected script A');`,
  testScriptB = `console.log('This is the injected script B');`;

Dom.injectScript(testScriptA);
Dom.injectScript(testScriptB, mainDomNode);

Dom.waitImagesLoadInDomNode( domNode )

此方法将返回一个Promise对象，当提供的domNode中包含的所有图片都加载完成后，此Promise将被解析。

import {Dom} from 'lin3s-front-foundation';
 
const imagesCollection = document.querySelector('.images__collection');
 
const imagesLoadPromise = Dom.waitImagesLoadInDomNode(imagesCollection);
 
imagesLoadPromise.then(() => {
  // All images have been loaded!
});

Dom.scrollToElement( selector, {duration = 500, offset = 0, callback = null} )

此方法将在指定的时间内滚动到给定元素的位置减去偏移量。可以提供一个回调，在动画完成后触发。

import {Dom} from 'lin3s-front-foundation';

const callback = () => console.log('Scroll to element done!');

Dom.scrollToElement('.some-selector', {duration: 2000, offset: 10, callback});

Dom - 工具/辅助函数

Dom.isDomNodeDescendantOfDomNode( needleDomNode, mainDomNode )

如果传递的needleDomNode是mainDomNode的子节点，则此方法将返回true。

Dom.getDomNodeIndex( domNode, selector = null )

此方法将返回提供的domNode的索引，可选地通过CSS选择器过滤。这是一个原生替代jQuery的.index()方法。

Dom.removeDomNodes( domNodes )

此方法将从它们的父节点中删除传递的domNodes。它可以与单个节点一起工作。这是一个原生替代jQuery的.remove()方法。

Dom.addSelectorFilteredEventListener( domNode, eventName, selector, event => {} )

此方法将为传递的domNode添加一个eventName事件监听器，通过定义的selector过滤事件的目标。这是一个原生替代jQuery的.on(eventName, selector, callback)方法，当通过选择器过滤目标时。

Dom.dispatchNativeEvent( domNode, eventName )

此方法将分派一个DOMElement原生事件。这是一个原生替代jQuery的.trigger(eventName)方法。

Dom.scrollToElement( selector, {duration = 500, offset = 0, callback = null} )

此方法可以帮助我们滚动到文档节点的位置。它允许定义一个持续时间（默认500毫秒）、一个偏移量（默认0）和一个完整的回调（默认null）。

import {Dom} from 'lin3s-front-foundation';
  
const links = document.querySelectorAll('.menu__list .menu__link');
  
const handleClick = event => Dom.scrollToElement(event.target.hash, {duration: 250, offset: 10});
  
Array.from(links, link => {
  link.addEventListener('click', handleClick, false);
});

Cookie

此包将提供所有与document.cookie相关的实现。

Cookies.read

此方法将返回指定名称的cookie值。

import {Cookies} from 'lin3s-front-foundation';

const cookieValue = Cookies.read('some-name');

Cookies.write

此方法将写入一个cookie。接受一个对象，其中包含名称、值、过期时间、域名和路径的参数。

import {Cookies} from 'lin3s-front-foundation';

Cookies.write({
  name: 'some-name',
  value: 'my value',
  expiration: 3600000, // 1 hour in milliseconds
  domain: 'example.com',
  path: '/'
});

以下列出了可用参数、它们的数据类型和默认值：

* 将设置cookie过期时间为'Session'。

Cookies - EventBus事件

Cookies.write将通过EventBus发布CookieWrittenEvent。我们将使用一些导出的辅助方法来订阅此事件。

import {EventBus} from 'lin3s-front-foundation';

EventBus.onCookieWritten(({cookie}) => {
  const myCookieName = cookie.name;
  const myCookieValue = cookie.value;
});

使用 - 可用UI组件

GMap

此组件将提供显示Google地图、设置标记、设置聚类器、使用Google地图的地理编码功能和显示MarkerDetail视图的所有必要实现。

GMap - 样式

GMap组件附带一些默认样式。您必须包含它们才能正确渲染。

@import './node_modules/lin3s-front-foundation/dist/scss/ui/components/gmap';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/components/gmap-marker-detail';

GMap - 基本设置

为了设置GMap组件，我们将在包含twig模板时定义每个必需的参数。它将自动获取所需的js文件，并将初始化Google Maps地图实例。

以下列出了可用参数、它们的数据类型和默认值：

** 为了生成自定义的Google地图样式，我们可以使用任何可用的工具。例如，snazzy maps在线平台。

标记图像需要以.png和.svg格式提供服务。

标记路径必须不包含文件扩展名，因为GMap组件将根据客户端浏览器获取.png或.svg文件。

这是一个基本设置的示例

{% include '@lin3s_front_foundation/components/gmap.html.twig' with {
    gmap_api_key: 'AIzaSyDQaCE_7C5iAmpwr_y1C1DHbtZsqag74Sk',
    gmap_center_lat: '43.2631394',
    gmap_center_lng: '-2.9275847',
    gmap_initial_zoom: 12,
    gmap_max_zoom: 16,
    gmap_marker_default_path: '/images/gmap/marker-default',
    gmap_marker_selected_path: '/images/gmap/marker-selected',
    gmap_marker_group_path: '/images/gmap/marker-group',
    gmap_marker_width: 40,
    gmap_marker_height: 60,
    gmap_cluster_enabled: 1,
    gmap_cluster_text_size: 14,
    gmap_cluster_text_color: '#222222'
} %}

GMap - JS API

这些是GMap组件实例上可用的大部分方法。

GMap - EventBus事件

每个GMap实例将通过EventBus发布这些事件。我们将使用一些导出的辅助方法来订阅这些事件。

import {EventBus} from 'lin3s-front-foundation';

const domNode = document.querySelector('.my-map');

EventBus.onGMapInitialized(domNode, gmapInitializedEvent => {
  const gmapInstance = gmapInitializedEvent.gmapInstance;
});

EventBus.onGMapGeocode(domNode, gmapGeocodeEvent => {
  console.log(gmapGeocodeEvent.status);
  console.log(gmapGeocodeEvent.results);
});

EventBus.onGMapMarkerSelected(domNode, gmapMarkerSelectedEvent => {
  const selectedMarker = gmapMarkerSelectedEvent.marker;
});

GMap - 高级功能

如果我们需要与初始化的GMap组件实例一起工作，我们必须订阅GMapInitializedEvent，该事件将在gmap组件初始化后通过事件总线发布。

import {EventBus} from 'lin3s-front-foundation';

const domNode = document.querySelector('.my-map');

EventBus.onGMapInitialized(domNode, gmapInitializedEvent => {
  const gmapInstance = gmapInitializedEvent.gmapInstance;
  // whatever...
});

我们将通过调用setMarkers(markers)方法设置GMap组件的标记。

如果我们想使用内置的地理编码功能，我们将调用GMap实例的geocodeAddress(address)。

GMap组件还附带显示/隐藏标记详细视图的方法（showMarkerDetailView(markerId, markerDetailContentHtml)和hideMarkerDetailView()）。

这是组件功能的完整示例

import {EventBus} from 'lin3s-front-foundation';

class GMapTest {
  constructor(domNode) {
    this.domNode = domNode;
  
    EventBus.onGMapInitialized(this.domNode, gmapInitializedEvent => {
      const gmapInstance = gmapInitializedEvent.gmap;
      this.setupMarkers();
      this.init();
    });
  }
  
  setupMarkers() {
    const markers = [{
      id: 0,
      lat: 43.2631394,
      lng: -2.9275847
    }];

    this.gmapInstance.setMarkers(markers);
  }
  
  init() {
    this.filterInput = document.querySelector('.my-input-class'); 
    this.filterInput.addEventListener('input', () => {
      this.gmapInstance.geocodeAddress(this.filterInput.value);
    });
    
    EventBus.onGMapGeocode(this.domNode, gmapGeocodeEvent => {
      console.log(gmapGeocodeEvent.status);
      console.log(gmapGeocodeEvent.results);
    });
    
    EventBus.onGMapMarkerSelected(this.domNode, gmapMarkerSelectedEvent => {
      this.onMarkerSelected(gmapMarkerSelectedEvent.marker);
    });
  }
  
  onMarkerSelected(marker) {
    if (marker === undefined) {
      this.gmapInstance.hideMarkerDetailView();
    } else {
      this.gmapInstance.showMarkerDetailView(
        marker.id,
        `<h3>This is the marker detail's inner html content</h3>
         <p>Marker <b>lat</b>: ${marker.lat}</p>
         <p>Marker <b>lng</b>: ${marker.lng}</p>`
      );
    }
  }
}

onDomReady(() => {
  new GMapTest();
});

FormGroupInput

该组件由FormLabel、FormInput和FormError原子组成。

FormGroupInput - 样式

FormGroupInput组件及其相关原子附带一些默认样式。您必须包含它们才能正确渲染。

@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-label';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-error';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-input';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/components/form-group-input';

FormGroupInput - 基本设置

为了设置FormGroupInput组件，我们将在包含twig模板时定义每个必需的参数。

以下列出了可用参数、它们的数据类型和默认值：

这是一个常见的设置示例

{% include '@lin3s_front_foundation/components/form_group_input.html.twig' with {
    input_id: 'my-form-user-name',
    input_required: 1,
    input_validate: 1,
    input_validation_type: 'phone',
    input_type: 'text',
    input_placeholder: 'Enter some data...',
    input_label_content: 'Your user name',
    input_errors: [{
        content: 'This field is required',
        modifiers: 'form-error--not-filled'
    }, {
        content: 'Entered phone is not a 9 digit valid phone',
        modifiers: 'form-error--not-valid'
    }],
    input_spinner: 1
} %}

FormGroupSelect

此组件及其相关的FormSelect原子将构建一个自定义的丰富选择组件。该组件由FormSelect、FormLabel、FormInput和FormError原子组成。

FormGroupSelect / FormSelect - 样式

FormGroupSelect组件及其相关原子附带一些默认样式。您必须包含它们才能正确渲染。

@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-label';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-error';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-input';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-select';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/components/form-group-select';

FormGroupSelect - 基本设置

为了设置FormGroupSelect组件，我们将在包含twig模板时定义每个必需的参数。

以下列出了可用参数、它们的数据类型和默认值：

这是一个完整的设置示例

{% set my_select_options = [{
    label: Male,
    value: 0,
    selected: 1
}, {
    label: Female,
    value: 1
}] %}

{% include '@lin3s_front_foundation/components/form_group_select.html.twig' with {
    select_id: 'my-select',
    select_required: 1,
    select_validate: 1,
    select_validation_pattern: '^(?!.*--).*$',
    select_mobile_breakpoint: 768,
    select_max_height_mobile: 260,
    select_max_height_desktop: 420,
    select_is_filterable: 1,
    select_filter_placeholder: 'Type to filter...',
    select_filter_order_by: 'label',
    select_label_modifiers: null,
    select_label_content: 'My select\'s label',
    select_errors: [{
        content: 'This field is required',
        modifiers: 'form-error--not-filled'
    }, {
        content: 'You cannot select the default value',
        modifiers: 'form-error--not-valid'
    }],
    select_select_modifiers: null,
    select_no_selection_label: '--',
    select_no_selection_value: '--',
    select_options: my_select_options
} %}

FormSelect - JS API

这些是FormSelect原子实例上可用的大部分方法。

FormSelect - EventBus事件

每个FormSelect实例将通过EventBus发布这些事件。我们将使用一些导出的辅助方法来订阅这些事件。

import {EventBus} from 'lin3s-front-foundation';

const domNode = document.querySelector('.my-form-select');

EventBus.onFormSelectInitialized(domNode, formSelectInitializedEvent => {
  const formSelectInstance = formSelectInitializedEvent.formSelectInstance;
});

EventBus.onFormSelectOptionSelected(domNode, formSelectOptionSelectedEvent => {
  const selectedValue = formSelectOptionSelectedEvent.optionValue;
});

EventBus.onFormSelectStateChanged(domNode, formSelectStateChangedEvent => {
  const formSelectState = formSelectStateChangedEvent.state;
});

FormGroupTextarea

该组件由FormTextarea、FormLabel和FormError原子组成。

FormGroupTextarea - 样式

FormGroupTextarea组件及其关联的原子附带一些默认样式。您必须包含它们才能正确渲染。

@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-label';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-error';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-textarea';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/components/form-group-textarea';

FormGroupTextarea - 设置

为了设置FormGroupTextarea组件，我们将在包含twig模板时定义每个必需的参数。

以下列出了可用参数、它们的数据类型和默认值：

这是一个完整的设置示例

{% include '@lin3s_front_foundation/components/form_group_textarea.html.twig' with {
    textarea_id: 'palindrome',
    textarea_required: 1,
    textarea_validate: 1,
    textarea_validation_pattern: '\\b(\\w)?(\\w)\\w?\\2\\1', {# Note that backslashes must be escaped (\ -> \\) #},
    textarea_label_content: '2-5 letter palindrome',
    textarea_errors: [{
        content: 'This field is required',
        modifiers: 'form-error--not-filled'
    }, {
        content: 'Entered text does not include a valid 2-5 letter palindrome',
        modifiers: 'form-error--not-valid'
    }],
    textarea_spinner: 1
} %}

FormGroupCheckbox

该组件由FormCheckbox、FormLabel和FormError原子组成。

FormGroupCheckbox - 样式

FormGroupCheckbox组件及其关联的原子附带一些默认样式。您必须包含它们才能正确渲染。

@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-label';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-error';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-checkbox';
@import './node_modules/lin3s-front-foundation/dist/scss/ui/components/form-group-checkbox';

FormGroupCheckbox - 设置

为了设置FormGroupCheckbox组件，我们将在包含twig模板时定义每个必需的参数。

以下列出了可用参数、它们的数据类型和默认值：

这是一个完整的设置示例

{% include '@lin3s_front_foundation/components/form_group_checkbox.html.twig' with {
    checkbox_id: 'palindrome',
    checkbox_required: 1,
    checkbox_validate: 1,
    checkbox_content: 'I hace read and accept the terms and conditions',
    textarea_errors: [{
        content: 'Yout must accept the terms and conditions',
        modifiers: 'form-error--not-filled'
    }]
} %}

用法 - 可用的UI（React）组件

FormGroupSelect（React）组件

此React组件将构建一个FormGroupSelect（vanilla）对应物。

FormGroupSelect（React）- 基本设置

这是一个受控组件。对于完整的初始化示例，请参阅提供的初始化和FormGroupSelect用法。

用法 - 可用的UI原子

FormLabel

此原子将渲染带有一些自定义属性的html <label>。

以下列出了可用参数、它们的数据类型和默认值：

这是一个常见的设置示例

{% include '@lin3s_front_foundation/atoms/form_label.html.twig' with {
    label_for: 'user-email',
    label_required: 1,
    label_content: 'Email:'
} %}

FormLabel - 自定义化

为了自定义原子的外观，您应该在导入相关的scss文件之前定义这些变量。

$form-label-text-color: #222 !default;
$form-label-text-color-required: #f00 !default;
$form-label-font-family: sans-serif !default;
$form-label-font-size: 16px !default;
$form-label-font-weight: bold !default;
$form-label-line-height: 20px !default;

@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-label';

FormError

此原子将渲染与表单输入关联的错误。

以下列出了可用参数、它们的数据类型和默认值：

这是一个常见的设置示例

{% include '@lin3s_front_foundation/atoms/form_error.html.twig' with {
    error_content: 'This field is required.'
} %}

FormError - 自定义化

为了自定义原子的外观，您应该在导入相关的scss文件之前定义这些变量。

$form-error-background-color: #f2b8c2 !default;
$form-error-text-color: #b20008 !default;
$form-error-border-color: rgba($form-error-text-color, .5) !default;
$form-error-animation: $animation-vertical-node-in !default;
$form-error-font-family: sans-serif !default;
$form-error-font-size: 14px !default;
$form-error-font-weight: normal !default;
$form-error-line-height: 18px !default;

@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-error';

FormInput

此原子将渲染表单输入。

以下列出了可用参数、它们的数据类型和默认值：

这是一个常见的设置示例

{% include '@lin3s_front_foundation/atoms/form_input.html.twig' with {
    input_placeholder: 'Enter some data...'
} %}

FormInput - 自定义化

为了自定义原子的外观，您应该在导入相关的scss文件之前定义这些变量。

$form-input-border-color: #d1d1d1 !default;
$form-input-border-color-hover: #0e8fff !default;
$form-input-placeholder-text-color: rgba(#444, .8) !default;
$form-input-font-family: sans-serif !default;
$form-input-font-size: 16px !default;
$form-input-font-size-small: 14px !default;
$form-input-font-weight: normal !default;
$form-input-line-height: 20px !default;
$form-input-line-height-small: 18px !default;

@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-input';

FormSelect

此原子将渲染一个自定义丰富表单选择。

以下列出了可用参数、它们的数据类型和默认值：

这是一个常见的设置示例

{% set my_select_options = [{
    label: Male,
    value: 0,
    selected: 1
}, {
    label: Female,
    value: 1
}] %}

{% include '@lin3s_front_foundation/atoms/form_select.html.twig' with {
    select_class_name: 'form-select-demo',
    select_id: 'form-select-1',
    select_required: 1,
    select_filter_placeholder: 'Type to filter...',
    select_outside_click_to_close_enabled: 1,
    select_options: my_select_options
} %}

FormSelect - 自定义化

为了自定义原子的外观，您应该在导入相关的scss文件之前定义这些变量。

$form-select-background-color: #fff !default;
$form-select-background-color-disabled: #eee !default;
$form-select-border-color: #d1d1d1 !default;
$form-select-font-family: sans-serif !default;
$form-select-font-size: 16px !default;
$form-select-font-weight: normal !default;
$form-select-line-height: 20px !default;
$form-select-label-text-color: #222 !default;
$form-select-label-text-color-opened: rgba($form-select-label-text-color, .5) !default;
$form-select-options-box-shadow: 0 5px 30px -10px rgba(#222, .25) !default;
$form-select-option-text-color: #222 !default;
$form-select-option-text-color-active: #fff !default;
$form-select-option-background-color-active: #0e8fff !default;
$form-select-option-background-color-hover: #eee !default;
$form-select-option-background-color-hover-and-active: rgba($form-select-option-background-color-active, .8) !default;

@import './node_modules/lin3s-front-foundation/dist/scss/ui/atoms/form-select';

图片

此原子将根据浏览器大小和方向渲染一个具有不同源的照片元素。

以下列出了可用参数、它们的数据类型和默认值：

这是一个常见的设置示例

{% embed '@lin3s_front_foundation/atoms/picture.html.twig' with {
    picture_class_name: 'my-picture',
    picture_image_class_name: 'my-picture__image',
    picture_alt: 'Some alt text',
    picture_src_small: 'http://mydomain.com/small-image.jpg',
    picture_src_medium: 'http://mydomain.com/medium-image.jpg',
    picture_src_large: 'http://mydomain.com/large-image.jpg',
    picture_src_xlarge: 'http://mydomain.com/xlarge-image.jpg',
    picture_src_xxlarge: 'http://mydomain.com/xxlarge-image.jpg',
    picture_small_breakpoint: 768,
} %}
    {% block custom_srcset %}
        <source srcset="http://mydomain.com/xsmall-image.jpg" media="(max-width: 540px)">
    {% endblock %}
{% endembed %}

用法 - 可用的宏

该库提供了一些有见地的宏，用于使用预定义参数渲染表单组件。

原子 - form_inputs

{% macro required(type, id, placeholder, name) %}
{% macro email(id, placeholder, name) %}
{% macro requiredEmail(id, placeholder, name) %}
{% macro phone(id, placeholder, name) %}
{% macro requiredPhone(id, placeholder, name) %}

组件 - form_group_checkboxes

{% macro required(id, label, content, errors) %}

组件 - form_group_inputs

{% macro required(type, id, placeholder, label, errors, name) %}
{% macro email(id, placeholder, label, errors, name) %}
{% macro requiredEmail(id, placeholder, label, errors, name) %}
{% macro phone(id, placeholder, label, errors, name) %}
{% macro requiredPhone(id, placeholder, label, errors, name) %}

组件 - form_group_selects

{% macro required(id, filter_placeholder, label, options, errors) %}
{% macro requiredAndNot(id, filter_placeholder, label, not_valid_value, options, errors) %}

组件 - form_group_textareas

{% macro required(id, placeholder, label, errors) %}
{% macro requiredWithPattern(id, placeholder, label, pattern, errors) %}

验证器

FrontFoundation提供了js和scss实用/辅助代码，以与validatory库一起工作，以便更容易地初始化或自定义样式。

Validatory - initWithEvents & EventBus订阅

FrontFoundation库提供了一个实用方法EventBus.validatory.initWithEvents，用于初始化validatory库，与lin3s-event-bus库结合使用，因此我们的应用程序可以通过公开的EventBus.validatory.onFormStateChanged和EventBus.validatory.onFormElementStateChanged订阅来通知表单或其任何元素的验证状态发生变化。

import {EventBus} from 'lin3s-front-foundation';

EventBus.validatory.initWithEvents({
  formSelector: '#validatory-form',
  formElementSelector: '#validatory-form input, #validatory-form select, #validatory-form textarea'
});

// Event subscriptions through the event-bus

const myForm = document.getElementById('validatory-form');

EventBus.validatory.onFormStateChanged(myForm, stateChangedEvent => {
  // Do what you want with the provided payload object
  console.log(stateChangedEvent.formValidatorInstance);
});

const myFormElement = document.querySelector('#validatory-form .zip-code');

EventBus.validatory.onFormElementStateChanged(myFormElement, stateChangedEvent => {
  // Do what you want with the provided payload object
  console.log(stateChangedEvent.formElementValidatorInstance);
});

Validatory - 自定义验证器和UI自定义

为了构建和附加自定义验证器，我们首先必须准备twig标记，然后编写我们的自定义验证器，并添加一些需要的scss。

请注意，我们正在添加一些自定义验证错误消息/标记（form-error--not-valid-zip-code、form-error--not-valid-no-service）。这些自定义错误将与自定义验证器的解析errorCode相匹配。

{% include '@lin3s_front_foundation/components/form_group_input.html.twig' with {
    input_id: 'zip-code',
    input_required: 1,
    input_validate: 1,
    input_validation_type: 'phone',
    input_placeholder: 'Enter your zip code',
    input_label_content: 'Zip code',
    input_errors: [{
        content: 'This field is required',
        modifiers: 'form-error--not-filled'
    }, {
        content: 'The entered value does not seem ot be a valid zip code',
        modifiers: 'form-error--not-valid-zip-code'
    }, , {
        content: 'Sorry, we are not providing service in the entered zip code's area.',
        modifiers: 'form-error--not-valid-no-service'
    }],
    input_spinner: 1
} %}

import debounce from 'es6-promise-debounce';
import {validatorRegistry, Validator, asyncValidation} from 'validatory';

const
  debouncedValidation = debounce(node => {
    console.log('Asynchronous validation started');

    const validZipCode = /^\d{5}$/.test(node.value); // zip code format validation

    if (!validZipCode) {
      return {valid: false, errorCode: 'zip-code'}; // will match the DOM markup's .form-error--not-valid-zip-code
    }

    return asyncValidation(fetch('https://jsonplaceholder.typicode.com/posts/1'), response => {
      const valid = node.value === '01005';

      return valid ? {valid} : {valid: false, errorCode: 'no-service'}; // will match the DOM markup's .form-error--not-valid-no-service
    });
  }, 500),
  asyncValidator = new Validator({
    supports: node => node.id === 'async',
    isEmpty: node => node.value === '',
    isValid: node => debouncedValidation(node),
  });

validatorRegistry.add(asyncValidator);

@import './../../node_modules/lin3s-front-foundation/dist/scss/_mixins/form-validation';

@include form_group_custom_error('.form-group-input__errors', 'zip-code');
@include form_group_custom_error('.form-group-input__errors', 'no-service');