From 075ef569a05e7c34f12b5d4912ba20165ca4f3f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mauro=20Mascarenhas=20de=20Ara=C3=BAjo?= Date: Wed, 14 Jun 2023 19:16:36 -0300 Subject: [PATCH 1/3] feat(charactercounter): replace "data-length" attr - CharacterCounter accepts "maxlength" attr instead of "data-length"; - "data-length" attribute has been deprecated. --- src/characterCounter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/characterCounter.ts b/src/characterCounter.ts index 029fd11290..8cdcf54901 100644 --- a/src/characterCounter.ts +++ b/src/characterCounter.ts @@ -60,7 +60,7 @@ export class CharacterCounter extends Component { } updateCounter = () => { - let maxLength = parseInt(this.el.getAttribute('data-length')), + let maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = (this.el as HTMLInputElement).value.length; this.isValidLength = actualLength <= maxLength; From c5c9e9fcf39a8b3a3acb01562fc51c26c478e941 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mauro=20Mascarenhas=20de=20Ara=C3=BAjo?= Date: Wed, 14 Jun 2023 19:19:08 -0300 Subject: [PATCH 2/3] docs(charactercounter): replace "data-length" attr - Replaced references to "data-length" by "maxlength"; - Added "change warning" to CharacterCounter section; - Fixed component initialization in docs init script; - Updated "initialization" samples. --- docs/js/init.js | 2 +- pug/contents/text_inputs_content.html | 20 ++++++++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/docs/js/init.js b/docs/js/init.js index 57bebebcc8..aac48b7eb1 100644 --- a/docs/js/init.js +++ b/docs/js/init.js @@ -226,7 +226,7 @@ document.addEventListener("DOMContentLoaded", function() { M.FormSelect.init(document.querySelectorAll('select:not(.disabled)'), {}); - M.CharacterCounter.init(document.querySelectorAll('input[data-length], textarea[data-length]'), {}); + M.CharacterCounter.init(document.querySelectorAll('input[maxlength], textarea[maxlength]'), {}); const autocompleteDemoData = [ {id: 12, text: "Apple"}, diff --git a/pug/contents/text_inputs_content.html b/pug/contents/text_inputs_content.html index 9e535ba1f5..8e27f104e6 100644 --- a/pug/contents/text_inputs_content.html +++ b/pug/contents/text_inputs_content.html @@ -404,17 +404,24 @@

File Input

Character Counter

Use a character counter in fields where a character restriction is in place.

+
+
+
+ Important: The "data-length" attribute has been depracated in favour of "maxlength" in v2.x. +
+
+
- +
- +
@@ -425,13 +432,13 @@

Character Counter

<form class="col s12"> <div class="row"> <div class="input-field col s6"> - <input id="input_text" type="text" data-length="10"> + <input id="input_text" type="text" maxlength="10"> <label for="input_text">Input text</label> </div> </div> <div class="row"> <div class="input-field col s12"> - <textarea id="textarea2" class="materialize-textarea" data-length="120"></textarea> + <textarea id="textarea2" class="materialize-textarea" maxlength="120"></textarea> <label for="textarea2">Textarea</label> </div> </div> @@ -443,8 +450,9 @@

Character Counter

Initialization

There are no options for this plugin, but if you are adding these dynamically, you can use this to initialize them.


-  $(document).ready(function() {
-    $('input#input_text, textarea#textarea2').characterCounter();
+  document.addEventListener('DOMContentLoaded', function() {
+    var elems = document.querySelectorAll('input#input_text, textarea#textarea2');
+    var instances = M.CharacterCounter.init(elems);
   });
From 920e7c1e5656b188fb15e623136c4cbbdc1849b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mauro=20Mascarenhas=20de=20Ara=C3=BAjo?= Date: Wed, 14 Jun 2023 19:23:07 -0300 Subject: [PATCH 3/3] test(charactercounter): add tests - Added tests to cover "CharacterCounter" component: - Updated HTML fixture (forms); - Added initialization test; - Added "counter" exhibition test. --- tests/spec/forms/formsFixture.html | 4 ++++ tests/spec/forms/formsSpec.js | 21 ++++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/tests/spec/forms/formsFixture.html b/tests/spec/forms/formsFixture.html index 43c503ea62..0616137598 100644 --- a/tests/spec/forms/formsFixture.html +++ b/tests/spec/forms/formsFixture.html @@ -2,6 +2,10 @@
+
+ + +
diff --git a/tests/spec/forms/formsSpec.js b/tests/spec/forms/formsSpec.js index 0753daa208..ddbc9bcf60 100644 --- a/tests/spec/forms/formsSpec.js +++ b/tests/spec/forms/formsSpec.js @@ -1,6 +1,7 @@ describe('Forms:', function() { beforeEach(async function() { await XloadFixtures(['forms/formsFixture.html']); + M.CharacterCounter.init(document.querySelector("#character-counter")); }); afterEach(function(){ @@ -11,10 +12,28 @@ describe('Forms:', function() { beforeEach(function() { inputs = document.querySelectorAll('input'); - inputs.forEach(input => input.blur()) + inputs.forEach((input) => { + input.focus(); + input.blur(); + }); window.location.hash = ""; }); + describe("CharacterCounter", () => { + + it("Should initialize", () => { + let el = document.querySelector("#character-counter"); + expect(() => M.CharacterCounter.getInstance(el)).not.toThrow(); + expect(M.CharacterCounter.getInstance(el)).toBeTruthy(); + }); + + it("Should exhibit counter", () => { + let counter = document.querySelector("#character-counter ~ .character-counter"); + expect(counter.textContent).toBe("0/10"); + }); + + }); + // No active class added, because it is now a css feature only /* it("should keep label active while focusing on input", function () {