diff options
author | João Cunha <j.a.cunha@gmail.com> | 2019-02-26 10:33:32 +0000 |
---|---|---|
committer | João Cunha <j.a.cunha@gmail.com> | 2019-02-26 10:33:32 +0000 |
commit | ed7065bbdb6f6fad3cc8fb369267fa811767c8a5 (patch) | |
tree | b3fda377c51504a6d21da1742cac3de7fd668ef0 /app/assets/javascripts/emoji/no_emoji_validator.js | |
parent | 26c7d04cd06d1126e4a4a7a1c9308d12de77172e (diff) | |
parent | 094d740886eaf62fd219dacd11aa9a966758a962 (diff) | |
download | gitlab-ce-ed7065bbdb6f6fad3cc8fb369267fa811767c8a5.tar.gz |
Merge branch 'master' into 56937-edit-knative-domain-after-it-has-been-deployed56937-edit-knative-domain-after-it-has-been-deployed
Diffstat (limited to 'app/assets/javascripts/emoji/no_emoji_validator.js')
-rw-r--r-- | app/assets/javascripts/emoji/no_emoji_validator.js | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/app/assets/javascripts/emoji/no_emoji_validator.js b/app/assets/javascripts/emoji/no_emoji_validator.js new file mode 100644 index 00000000000..0fd4dd74953 --- /dev/null +++ b/app/assets/javascripts/emoji/no_emoji_validator.js @@ -0,0 +1,63 @@ +import { __ } from '~/locale'; +import emojiRegex from 'emoji-regex'; + +const invalidInputClass = 'gl-field-error-outline'; + +export default class NoEmojiValidator { + constructor(opts = {}) { + const container = opts.container || ''; + this.noEmojiEmelents = document.querySelectorAll(`${container} .js-block-emoji`); + + this.noEmojiEmelents.forEach(element => + element.addEventListener('input', this.eventHandler.bind(this)), + ); + } + + eventHandler(event) { + this.inputDomElement = event.target; + this.inputErrorMessage = this.inputDomElement.nextSibling; + + const { value } = this.inputDomElement; + + this.validatePattern(value); + this.setValidationStateAndMessage(); + } + + validatePattern(value) { + const pattern = emojiRegex(); + this.hasEmojis = new RegExp(pattern).test(value); + + if (this.hasEmojis) { + this.inputDomElement.setCustomValidity(__('Invalid input, please avoid emojis')); + } else { + this.inputDomElement.setCustomValidity(''); + } + } + + setValidationStateAndMessage() { + if (!this.inputDomElement.checkValidity()) { + this.setInvalidState(); + } else { + this.clearFieldValidationState(); + } + } + + clearFieldValidationState() { + this.inputDomElement.classList.remove(invalidInputClass); + this.inputErrorMessage.classList.add('hide'); + } + + setInvalidState() { + this.inputDomElement.classList.add(invalidInputClass); + this.setErrorMessage(); + } + + setErrorMessage() { + if (this.hasEmojis) { + this.inputErrorMessage.innerHTML = this.inputDomElement.validationMessage; + } else { + this.inputErrorMessage.innerHTML = this.inputDomElement.title; + } + this.inputErrorMessage.classList.remove('hide'); + } +} |