nfreear/countable-js.html

## countable-js.html
<!doctype html> <title> * Countable </title>
<style>
  body { background: #fdfdfd; color: #333; font: 1em sans-serif; margin: 1em auto; width: 45em; }
  h1 { font-weight: normal; }
  textarea, [ type = submit ] { font-size: 1em; }
  textarea { border-color: #ccc; border-radius: 5px; color: #222; height: 16em; padding: 1em; width: 99%; }
  [ name = counts ] { width: 100%; letter-spacing: .06em; }
  [ type = submit ] { height: 3em; width: 8em; }

  :invalid { border-color: red; }
</style>


<h1> Countable test </h1>


<form method="post">
  <!--<p><input name="test_1" required minlength="20" />-->

  <p><label for="area"> Text area  <i id="words">-</i> </label>
  <p><textarea id="area" name="text" data-maxlength="200" required="required">
Project Gutenberg’s Alice’s Adventures in Wonderland, by Lewis Carroll

This eBook is for the use of anyone anywhere at no cost and with
almost no restrictions whatsoever.You may copy it, give it away or
re-use it under the terms of the Project Gutenberg License included
with this eBook or online at www.gutenberg.org


Title: Alice’s Adventures in Wonderland

Author: Lewis Carroll

Posting Date: June 25, 2008 [EBook #11]
Release Date: March, 1994
Last Updated: October 6, 2016

Language: English

Character set encoding: UTF-8

*** START OF THIS PROJECT GUTENBERG EBOOK ALICE’S ADVENTURES IN WONDERLAND ***


ALICE’S ADVENTURES IN WONDERLAND

Lewis Carroll

THE MILLENNIUM FULCRUM EDITION 3.0


CHAPTER I. Down the Rabbit-Hole

Alice was beginning to get very tired of sitting by her sister on the
bank, and of having nothing to do: once or twice she had peeped into the
book her sister was reading, but it had no pictures or conversations in
it, ‘and what is the use of a book,’ thought Alice ‘without pictures or
conversations?’

... </textarea>

  <p><input name="counts" title="** TO HIDE ! **" readonly="readonly" />

  <p><input type="submit" />
</form>


<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/countable@^3/Countable.min.js"></script>
<script>
(function (W, D) {

  var $textEl = D.querySelector( '[ name = text ]' );
  var $countsEl = D.querySelector( '[ name = counts ]' );
  var $wordsEl = D.querySelector( '#words' );

  W.Countable.on($textEl, function (counter) {
    console.warn('Counts:', counter);

    $countsEl.value = JSON.stringify(counter);
    $wordsEl.textContent = '(%s words)'.replace(/%s/, counter.words);
  },
  { hardReturns: true });

})(window, window.document);


window.jQuery(function ($) {

  var $form = $('form');
  var $area = $form.find('textarea');
  var $counts = $form.find('[ name = counts ]');

  $form.on('submit', function (ev) {
    var maxlength = $area.data('maxlength'); // $area.attr('maxlength');
    var length = $area.val().length;
    var error_msg = 'Error. Text is longer than the %L character limit. Please shorten. (%s chars)'
      .replace(/%L/, maxlength).replace(/%s/, length);

    console.warn('textarea:', maxlength, length, length > maxlength);

    console.warn('counts size:', $counts.val().length, JSON.parse($counts.val()) );

    if (length > maxlength) {
      $area.get(0).setCustomValidity(error_msg);

      console.error(error_msg);

      ev.preventDefault();

      alert(error_msg);
    }

    // ev.preventDefault();
  });

})
</script>


<pre>


© Nick Freear, 26-Jan-2018 | https://gist.github.com/nfreear/471723e9c25290e5a233dc9734038e63

* https://npmjs.com/package/countable
* https://sacha.me/Countable/#demo
* https://gutenberg.org/ebooks/11
* https://gutenberg.org/files/11/11-0.txt

</pre>


<hr><pre>


* TWIG ~~ https://twig.symfony.com/doc/2.x/tags/set.html


  {% set foo = 'bar' %}

  {# displays bar #}
  {{ foo }}

  {% set foo = {'foo': 'bar'} %}

</pre>
	<!doctype html> <title> * Countable </title>
	<style>
	body { background: #fdfdfd; color: #333; font: 1em sans-serif; margin: 1em auto; width: 45em; }
	h1 { font-weight: normal; }
	textarea, [ type = submit ] { font-size: 1em; }
	textarea { border-color: #ccc; border-radius: 5px; color: #222; height: 16em; padding: 1em; width: 99%; }
	[ name = counts ] { width: 100%; letter-spacing: .06em; }
	[ type = submit ] { height: 3em; width: 8em; }

	:invalid { border-color: red; }
	</style>


	<h1> Countable test </h1>


	<form method="post">
	<!--<p><input name="test_1" required minlength="20" />-->

	<p><label for="area"> Text area <i id="words">-</i> </label>
	<p><textarea id="area" name="text" data-maxlength="200" required="required">
	Project Gutenberg’s Alice’s Adventures in Wonderland, by Lewis Carroll

	This eBook is for the use of anyone anywhere at no cost and with
	almost no restrictions whatsoever.You may copy it, give it away or
	re-use it under the terms of the Project Gutenberg License included
	with this eBook or online at www.gutenberg.org


	Title: Alice’s Adventures in Wonderland

	Author: Lewis Carroll

	Posting Date: June 25, 2008 [EBook #11]
	Release Date: March, 1994
	Last Updated: October 6, 2016

	Language: English

	Character set encoding: UTF-8

	* START OF THIS PROJECT GUTENBERG EBOOK ALICE’S ADVENTURES IN WONDERLAND *



	ALICE’S ADVENTURES IN WONDERLAND

	Lewis Carroll

	THE MILLENNIUM FULCRUM EDITION 3.0



	CHAPTER I. Down the Rabbit-Hole

	Alice was beginning to get very tired of sitting by her sister on the
	bank, and of having nothing to do: once or twice she had peeped into the
	book her sister was reading, but it had no pictures or conversations in
	it, ‘and what is the use of a book,’ thought Alice ‘without pictures or
	conversations?’

	... </textarea>

	<p><input name="counts" title=" TO HIDE ! " readonly="readonly" />

	<p><input type="submit" />
	</form>


	<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.slim.min.js"></script>
	<script src="https://unpkg.com/countable@^3/Countable.min.js"></script>
	<script>
	(function (W, D) {

	var $textEl = D.querySelector( '[ name = text ]' );
	var $countsEl = D.querySelector( '[ name = counts ]' );
	var $wordsEl = D.querySelector( '#words' );

	W.Countable.on($textEl, function (counter) {
	console.warn('Counts:', counter);

	$countsEl.value = JSON.stringify(counter);
	$wordsEl.textContent = '(%s words)'.replace(/%s/, counter.words);
	},
	{ hardReturns: true });

	})(window, window.document);


	window.jQuery(function ($) {

	var $form = $('form');
	var $area = $form.find('textarea');
	var $counts = $form.find('[ name = counts ]');

	$form.on('submit', function (ev) {
	var maxlength = $area.data('maxlength'); // $area.attr('maxlength');
	var length = $area.val().length;
	var error_msg = 'Error. Text is longer than the %L character limit. Please shorten. (%s chars)'
	.replace(/%L/, maxlength).replace(/%s/, length);

	console.warn('textarea:', maxlength, length, length > maxlength);

	console.warn('counts size:', $counts.val().length, JSON.parse($counts.val()) );

	if (length > maxlength) {
	$area.get(0).setCustomValidity(error_msg);

	console.error(error_msg);

	ev.preventDefault();

	alert(error_msg);
	}

	// ev.preventDefault();
	});

	})
	</script>


	<pre>


	© Nick Freear, 26-Jan-2018 \| https://gist.github.com/nfreear/471723e9c25290e5a233dc9734038e63

	* https://npmjs.com/package/countable
	* https://sacha.me/Countable/#demo
	* https://gutenberg.org/ebooks/11
	* https://gutenberg.org/files/11/11-0.txt

	</pre>


	<hr><pre>


	* TWIG ~~ https://twig.symfony.com/doc/2.x/tags/set.html


	{% set foo = 'bar' %}

	{# displays bar #}
	{{ foo }}

	{% set foo = {'foo': 'bar'} %}

	</pre>