No Description

text-limit.js 6.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. 'use strict';
  2. ( function() {
  3. /**
  4. * Predefine hint text to display.
  5. *
  6. * @since 1.5.6
  7. * @since 1.6.4 Added a new macros - {remaining}.
  8. *
  9. * @param {string} hintText Hint text.
  10. * @param {number} count Current count.
  11. * @param {number} limit Limit to.
  12. *
  13. * @returns {string} Predefined hint text.
  14. */
  15. function renderHint( hintText, count, limit ) {
  16. return hintText.replace( '{count}', count ).replace( '{limit}', limit ).replace( '{remaining}', limit - count );
  17. }
  18. /**
  19. * Create HTMLElement hint element with text.
  20. *
  21. * @since 1.5.6
  22. *
  23. * @param {number} formId Form id.
  24. * @param {number} fieldId Form field id.
  25. * @param {string} text Text to hint element.
  26. *
  27. * @returns {object} HTMLElement hint element with text.
  28. */
  29. function createHint( formId, fieldId, text ) {
  30. var hint = document.createElement( 'div' );
  31. hint.classList.add( 'wpforms-field-limit-text' );
  32. hint.id = 'wpforms-field-limit-text-' + formId + '-' + fieldId;
  33. hint.textContent = text;
  34. return hint;
  35. }
  36. /**
  37. * Keyup/Keydown event higher order function for characters limit.
  38. *
  39. * @since 1.5.6
  40. *
  41. * @param {object} hint HTMLElement hint element.
  42. * @param {number} limit Max allowed number of characters.
  43. *
  44. * @returns {Function} Handler function.
  45. */
  46. function checkCharacters( hint, limit ) {
  47. return function( e ) {
  48. hint.textContent = renderHint(
  49. window.wpforms_settings.val_limit_characters,
  50. this.value.length,
  51. limit
  52. );
  53. };
  54. }
  55. /**
  56. * Count words in the string.
  57. *
  58. * @since 1.6.2
  59. *
  60. * @param {string} string String value.
  61. *
  62. * @returns {number} Words count.
  63. */
  64. function countWords( string ) {
  65. if ( typeof string !== 'string' ) {
  66. return 0;
  67. }
  68. if ( ! string.length ) {
  69. return 0;
  70. }
  71. [
  72. /([A-Z]+),([A-Z]+)/gi,
  73. /([0-9]+),([A-Z]+)/gi,
  74. /([A-Z]+),([0-9]+)/gi,
  75. ].forEach( function( pattern ) {
  76. string = string.replace( pattern, '$1, $2' );
  77. } );
  78. return string.split( /\s+/ ).length;
  79. }
  80. /**
  81. * Keyup/Keydown event higher order function for words limit.
  82. *
  83. * @since 1.5.6
  84. *
  85. * @param {object} hint HTMLElement hint element.
  86. * @param {number} limit Max allowed number of characters.
  87. *
  88. * @returns {Function} Handler function.
  89. */
  90. function checkWords( hint, limit ) {
  91. return function( e ) {
  92. var value = this.value.trim(),
  93. words = countWords( value );
  94. hint.textContent = renderHint(
  95. window.wpforms_settings.val_limit_words,
  96. words,
  97. limit
  98. );
  99. // We should prevent the keys: Enter, Space, Comma.
  100. if ( [ 13, 32, 188 ].indexOf( e.keyCode ) > -1 && words >= limit ) {
  101. e.preventDefault();
  102. }
  103. };
  104. }
  105. /**
  106. * Get passed text from clipboard.
  107. *
  108. * @since 1.5.6
  109. *
  110. * @param {ClipboardEvent} e Clipboard event.
  111. *
  112. * @returns {string} Text from clipboard.
  113. */
  114. function getPastedText( e ) {
  115. if ( window.clipboardData && window.clipboardData.getData ) { // IE
  116. return window.clipboardData.getData( 'Text' );
  117. } else if ( e.clipboardData && e.clipboardData.getData ) {
  118. return e.clipboardData.getData( 'text/plain' );
  119. }
  120. }
  121. /**
  122. * Paste event higher order function for characters limit.
  123. *
  124. * @since 1.6.7.1
  125. *
  126. * @param {number} limit Max allowed number of characters.
  127. *
  128. * @returns {Function} Event handler.
  129. */
  130. function pasteText( limit ) {
  131. return function( e ) {
  132. e.preventDefault();
  133. var pastedText = getPastedText( e ),
  134. newPosition = this.selectionStart + pastedText.length,
  135. newText = this.value.substring( 0, this.selectionStart ) + pastedText + this.value.substring( this.selectionStart );
  136. this.value = newText.substring( 0, limit );
  137. this.setSelectionRange( newPosition, newPosition );
  138. };
  139. }
  140. /**
  141. * Limit string length to a certain number of words, preserving line breaks.
  142. *
  143. * @since 1.6.8
  144. *
  145. * @param {string} text Text.
  146. * @param {number} limit Max allowed number of words.
  147. *
  148. * @returns {string} Text with the limited number of words.
  149. */
  150. function limitWords( text, limit ) {
  151. var separators,
  152. newTextArray,
  153. result = '';
  154. // Regular expression pattern: match any space character.
  155. var regEx = /\s+/g;
  156. // Store separators for further join.
  157. separators = text.trim().match( regEx ) || [];
  158. // Split the new text by regular expression.
  159. newTextArray = text.split( regEx );
  160. // Limit the number of words.
  161. newTextArray.splice( limit, newTextArray.length );
  162. // Join the words together using stored separators.
  163. for ( var i = 0; i < newTextArray.length; i++ ) {
  164. result += newTextArray[ i ] + ( separators[ i ] || '' );
  165. }
  166. return result.trim();
  167. }
  168. /**
  169. * Paste event higher order function for words limit.
  170. *
  171. * @since 1.5.6
  172. *
  173. * @param {number} limit Max allowed number of words.
  174. *
  175. * @returns {Function} Event handler.
  176. */
  177. function pasteWords( limit ) {
  178. return function( e ) {
  179. e.preventDefault();
  180. var pastedText = getPastedText( e ),
  181. newPosition = this.selectionStart + pastedText.length,
  182. newText = this.value.substring( 0, this.selectionStart ) + pastedText + this.value.substring( this.selectionStart );
  183. this.value = limitWords( newText, limit );
  184. this.setSelectionRange( newPosition, newPosition );
  185. };
  186. }
  187. /**
  188. * Array.form polyfill.
  189. *
  190. * @since 1.5.6
  191. *
  192. * @param {object} el Iterator.
  193. *
  194. * @returns {object} Array.
  195. */
  196. function arrFrom( el ) {
  197. return [].slice.call( el );
  198. }
  199. /**
  200. * DOMContentLoaded handler.
  201. *
  202. * @since 1.5.6
  203. */
  204. function ready() {
  205. arrFrom( document.querySelectorAll( '.wpforms-limit-characters-enabled' ) )
  206. .map(
  207. function( e ) {
  208. var limit = parseInt( e.dataset.textLimit, 10 ) || 0;
  209. e.value = e.value.slice( 0, limit );
  210. var hint = createHint(
  211. e.dataset.formId,
  212. e.dataset.fieldId,
  213. renderHint(
  214. window.wpforms_settings.val_limit_characters,
  215. e.value.length,
  216. limit
  217. )
  218. );
  219. var fn = checkCharacters( hint, limit );
  220. e.parentNode.appendChild( hint );
  221. e.addEventListener( 'keydown', fn );
  222. e.addEventListener( 'keyup', fn );
  223. e.addEventListener( 'paste', pasteText( limit ) );
  224. }
  225. );
  226. arrFrom( document.querySelectorAll( '.wpforms-limit-words-enabled' ) )
  227. .map(
  228. function( e ) {
  229. var limit = parseInt( e.dataset.textLimit, 10 ) || 0;
  230. e.value = limitWords( e.value, limit );
  231. var hint = createHint(
  232. e.dataset.formId,
  233. e.dataset.fieldId,
  234. renderHint(
  235. window.wpforms_settings.val_limit_words,
  236. countWords( e.value.trim() ),
  237. limit
  238. )
  239. );
  240. var fn = checkWords( hint, limit );
  241. e.parentNode.appendChild( hint );
  242. e.addEventListener( 'keydown', fn );
  243. e.addEventListener( 'keyup', fn );
  244. e.addEventListener( 'paste', pasteWords( limit ) );
  245. }
  246. );
  247. }
  248. if ( document.readyState === 'loading' ) {
  249. document.addEventListener( 'DOMContentLoaded', ready );
  250. } else {
  251. ready();
  252. }
  253. }() );