-
Notifications
You must be signed in to change notification settings - Fork 45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding character counter to Text input textfield/textarea component #1081
base: dev
Are you sure you want to change the base?
Changes from 3 commits
2b00e4d
21cde69
8acc75f
ac60e87
085e6e0
889a471
2337585
62430be
0bb473d
673c434
b4c86b6
2537a79
f9a0b80
0e7ad4d
ad40c16
6393c43
732680e
0c1ab18
17bab3b
f1290d2
aa297b7
b6759bc
c589f3f
df7962b
1c9d73b
09df3a7
3bf7da4
2216f1d
aaa0e82
8b30f3b
2f42ece
d8582a5
a691188
d82c48a
b033ae8
f36a80e
bb75aa9
4ca06a5
6211ea7
153bb51
5b6b623
06a45eb
1698e4e
edb58a8
329470f
5673b3f
5acedfe
6a0d76f
0df92b5
decce62
4fd7884
7cb0512
5178163
83db0b4
6d3891c
4102846
34745a3
cf28b4a
0a0af40
6420043
e7c0f94
a00b189
11c266b
ddc4a05
202ce83
8537778
38b3632
0bc19f0
3bbcab8
9194b6a
d03fefe
b98b18b
f6397bc
8a7fa0d
f27ef30
79aae63
0332753
445c9a5
3d5660f
481c325
e934413
3c16b4b
8256fea
1b6c861
56f7e00
47ace60
b4c7939
06405e5
2f1d0d3
b75f18d
57470fb
3da4062
63860c9
d747f69
03a2c7e
83e64f6
4a4ac39
0ea9c98
f45756b
8b6822c
50467cc
f85bdaf
82ad244
c1f9f64
79d10c0
5bcd97a
836686a
2a492b1
96de53a
c6c05d0
235355d
ff38864
97ae8d3
e20aa1b
2a51a94
32a5943
4ee8fbd
0d19b37
0507008
5748651
fb63127
c04bd85
9a0aeaa
b1c5c7b
95a7d3d
204c2c4
ce2db60
e7d0363
4c6eab5
1f2c288
436594e
127f0ee
9faabb5
c04b276
11efa62
9d99500
20b9784
92ec8b9
9c531fd
210dd66
7b47ad4
29df65c
f72b5d5
4a10c34
1a550a3
b82d86a
3a7851b
2502e28
8dad4ac
75972ad
e6d9709
467fbc9
daebbbe
c85c19f
5d245d5
e5a03fe
427563e
9d59062
33648d1
394cc4f
f5da9f9
3860224
56a17aa
7ec4d30
b552c9d
a60c0a1
ea5bc19
f3a9e36
6ecacf3
5318820
03cb6b8
ac1f567
ce5ea5e
f17ec3a
1a8688f
b0f07e5
6ae3e38
06109ba
5d5cf47
d8d58f5
681833e
a66d993
9eccd28
15251a6
44dc04a
463d31f
b952b6e
d6fbfd0
ceb4af9
2144380
c7aa6a7
fff0683
e4205a9
b77baa7
7f22a2e
2432c3f
3942e02
ee7fbea
e19cbc7
7991d8f
8e71f29
404540d
465ed81
51f4ea2
11f662b
9e45e75
1f19bd4
ef5335e
cf215a2
e88c6bf
ac6f9b7
41e891e
67bfdf4
ae88d9f
c289f0c
05f1e31
b9c6fa3
bd0aab0
510d021
f0b5391
cfac452
a36ceeb
ccb2daf
153ca33
4967387
5c19a65
ab496c7
fa4651c
c58343d
f0f6fae
ad0490c
ad4f690
d825c78
7f470d9
95b4549
089ec60
37bcd1d
cffd65f
23a3ed1
78dbcf7
c70e6b8
e770ddf
90e89e9
5b16fb3
4726a38
41c53c0
4269c73
bac2502
a367389
0a40f26
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<template data-sly-template.characterCounter="${@ componentId, showCharCounter, maxLength, bemBlock}"> | ||
<div data-sly-test="${showCharCounter}" class="${bemBlock}__charcounter" aria-label="Character Counter"> | ||
<span class="${bemBlock}__charcount" aria-label="Current Character Count"></span> | ||
<span data-sly-test="${maxLength}" class="${bemBlock}__maxchar" aria-label="Maximum Character Count">/${maxLength @ i18n}</span> | ||
</div> | ||
</template> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -213,6 +213,14 @@ | |
jcr:primaryType="nt:unstructured" | ||
sling:resourceType="granite/ui/components/coral/foundation/container"> | ||
<items jcr:primaryType="nt:unstructured"> | ||
<showCharCounter | ||
jcr:primaryType="nt:unstructured" | ||
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" | ||
checked="{Boolean}false" | ||
fieldLabel="Show Character Counter?" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Include Documentation team (Khushwant Singh) to get this string reviewed. |
||
name="./showCharCounter" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should be available for localization in dictionary |
||
text="Show Character Counter?" | ||
sakshi-arora1 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
value="true"/> | ||
<maxLength | ||
jcr:primaryType="nt:unstructured" | ||
wrapperClass="cmp-adaptiveform-textinput__maxlength" | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -34,7 +34,8 @@ | |
description: `.${TextInput.bemBlock}__longdescription`, | ||
qm: `.${TextInput.bemBlock}__questionmark`, | ||
errorDiv: `.${TextInput.bemBlock}__errormessage`, | ||
tooltipDiv: `.${TextInput.bemBlock}__shortdescription` | ||
tooltipDiv: `.${TextInput.bemBlock}__shortdescription`, | ||
counterSpan: `.${TextInput.bemBlock}__charcount` | ||
}; | ||
|
||
constructor(params) { | ||
|
@@ -64,6 +65,9 @@ | |
getQuestionMarkDiv() { | ||
return this.element.querySelector(TextInput.selectors.qm); | ||
} | ||
getCounterSpan() { | ||
return this.element.querySelector(TextInput.selectors.counterSpan); | ||
} | ||
|
||
setModel(model) { | ||
super.setModel(model); | ||
|
@@ -77,6 +81,19 @@ | |
this.widget.addEventListener('focus', (e) => { | ||
this.setActive(); | ||
}); | ||
this.setupCharacterCounter(); | ||
} | ||
|
||
setupCharacterCounter() { | ||
const counterSpan = this.getCounterSpan(); | ||
const updateCharacterCounter = () => { | ||
const charCount = this.widget.value.length; | ||
if (counterSpan) { | ||
counterSpan.textContent = Granite.I18n.getMessage(charCount); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. for localizing the number at runtime, you can't use Granite.I18n. You will need to do what is done at https://github.com/adobe/aem-core-forms-components/blob/dev/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js#L1013 |
||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Also do the same for max character count, as authour can write a rule to modify that and then the modified value should show up and also will need to be localized. |
||
}; | ||
this.widget.addEventListener('input', updateCharacterCounter); | ||
updateCharacterCounter(); // Set the initial character count | ||
} | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -50,6 +50,8 @@ describe('Page - Authoring', function () { | |
// Check If Dialog Options Are Visible | ||
cy.get("[name='./multiLine']") | ||
.should("exist"); | ||
cy.get("[name='./showCharCounter']") | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Also add test if the input is updated, count is also updated. |
||
.should("exist"); | ||
cy.get("[name='./autocomplete']") | ||
.should("exist"); | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Localize these like:
${'Character Counter' @ i18n, locale=request.locale}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Similarly localize: