Skip to content
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.

Sign up for GitHub

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 latinize-tags flag to ignore accents #128

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Adding latinize-tags flag to ignore accents #128

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4e91082
Adding latinize-tags flag to ignore accents.
carlosabcs Mar 9, 2021
ee08193
Merging.
carlosabcs Mar 24, 2021
4194084
Fixing conflicts.
carlosabcs Mar 26, 2021
8291f3a
Fixing conflicts.
carlosabcs Mar 26, 2021
14875ef
Stopping ignoring accents when adding new tags.
carlosabcs Apr 8, 2021
784b04d
Restoring master versions of dist/ files.
carlosabcs Apr 24, 2021
fc21062
Restoring line.
carlosabcs Apr 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@ limit | Number | 0 | Limit the number of tags that can be chosen. 0 = no limit.
hide-input-on-limit | Boolean | false | Hide the input field when the tags limit is reached.
only-existing-tags | Boolean | false | Only existing tags can be added/chosen. New tags won't be created.
case-sensitive-tags | Boolean | false | Determines whether tags are case sensitive. Setting this to `true` would allow tags like `php`, `PHP`, `PhP`, and so on to be added at the same time.
latinize-tags | Boolean | false | Determines whether the accents in words are ignored or not. Setting this to `true` would ignore the differences between words like `voila` and `voilà`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the prop should be called ignore-diacritics as this would be a more general term. The word "latinize" doesn't have anything to do with accents according to Google.

delete-on-backspace | Boolean | true | Whether deleting tags by pressing Backspace is allowed.
allow-duplicates | Boolean | false | Allow users to add the same tags multiple times.
validate | Function | `text => true` | Callback to validate tags' text with.
Expand Down
13 changes: 13 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,15 @@ <h2 class="is-size-4" style="margin-bottom: 1rem;">Options</h2>
</div>
</div>

<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" v-model="latinizeTags">
Tags are latinized (ignore accents)
</label>
</div>
</div>

<div class="field">
<div class="control">
<label class="checkbox">
Expand Down Expand Up @@ -203,13 +212,15 @@ <h2 class="is-size-4" style="margin-bottom: 1rem;">Options</h2>
:existing-tags="[
{ key: 'children-of-bodom', value: 'Children of Bodom' },
{ key: 'epica', value: 'Epica' },
{ key: 'epica', value: 'Épica' },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In real life "Epica" and "Épica" could be two different words with different meanings, right? So the keys should also be different so you would be able to select both words. Please fix your examples here or think of different words.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I'll add just one little example of an accentuated word.

{ key: 'emperor', value: 'Emperor' },
{ key: 'shape-of-despair', value: 'Shape of Despair' },
{ key: 'protest-the-hero', value: 'Protest the Hero' },
{ key: 'my-dying-bride', value: 'My Dying Bride' },
{ key: 'ne-obliviscaris', value: 'Ne Obliviscaris' },
{ key: 'belakor', value: 'Be\'lakor' },
{ key: 'dark-lunacy', value: 'Dark Lunacy' },
{ key: 'dark-lunacy', value: 'Dark Lunâcy' },
{ key: 'dominia', value: 'Dominia' },
{ key: 'jason-becker', value: 'Jason Becker' },
{ key: 'jeff-loomis', value: 'Jeff Loomis' },
Expand All @@ -226,6 +237,7 @@ <h2 class="is-size-4" style="margin-bottom: 1rem;">Options</h2>
:limit="limit"
:only-existing-tags="onlyExistingTags"
:case-sensitive-tags="caseSensitiveTags"
:latinize-tags="latinizeTags"
:delete-on-backspace="deleteOnBackspace"
:allow-duplicates="allowDuplicates"
:add-tags-on-comma="addTagsOnComma"
Expand Down Expand Up @@ -284,6 +296,7 @@ <h2 class="is-size-5" style="margin-top: 1rem;">Data Events (new at the top)</h2
limit: 0,
onlyExistingTags: false,
caseSensitiveTags: false,
latinizeTags: false,
deleteOnBackspace: true,
allowDuplicates: false,
addTagsOnComma: false,
Expand Down
5 changes: 5 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {},
"dependencies": {
"latinize": "^0.5.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
Expand Down
33 changes: 23 additions & 10 deletions src/VoerroTagsInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,8 @@
</template>

<script>
import latinize from 'latinize';

export default {
props: {
elementId: String,
Expand Down Expand Up @@ -243,6 +245,11 @@ export default {
default: false
},

latinizeTags: {
type: Boolean,
default: false
},

beforeAddingTag: {
type: Function,
default: () => true
Expand Down Expand Up @@ -400,17 +407,19 @@ export default {
value: text,
};

const queryTerm = this.latinizeTags ? latinize(newTag[this.textField]) : newTag[this.textField];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need to remove diacritics here when checking for whether a tag has been added already. As I mentioned above, there could be two words "Epica" and "Épica" with completely different meanings and because of this code here we won't be able to add them both.

const searchQuery = this.escapeRegExp(
this.caseSensitiveTags
? newTag[this.textField]
: newTag[this.textField].toLowerCase()
? queryTerm
: queryTerm.toLowerCase()
);

for (let tag of this.typeaheadTags) {
const compareableTerm = this.latinizeTags ? latinize(tag[this.textField]) : tag[this.textField];
const compareable = this.escapeRegExp(
this.caseSensitiveTags
? tag[this.textField]
: tag[this.textField].toLowerCase()
? compareableTerm
: compareableTerm.toLowerCase()
);

if (searchQuery === compareable) {
Expand Down Expand Up @@ -548,8 +557,9 @@ export default {

if ((input.length && input.length >= this.typeaheadActivationThreshold) || this.typeaheadActivationThreshold == 0 || this.typeaheadAlwaysShow) {
// Find all the existing tags which include the search text
const queryTerm = this.latinizeTags ? latinize(input) : input;
const searchQuery = this.escapeRegExp(
this.caseSensitiveTags ? input : input.toLowerCase()
this.caseSensitiveTags ? queryTerm : queryTerm.toLowerCase()
);

// AJAX search
Expand Down Expand Up @@ -587,9 +597,10 @@ export default {
*/
doSearch(searchQuery) {
for (let tag of this.typeaheadTags) {
const compareableTerm = this.latinizeTags ? latinize(tag[this.textField]) : tag[this.textField];
const compareable = this.caseSensitiveTags
? tag[this.textField]
: tag[this.textField].toLowerCase();
? compareableTerm
: compareableTerm.toLowerCase();

if (compareable.search(searchQuery) > -1 && ! this.tagSelected(tag)) {
this.searchResults.push(tag);
Expand Down Expand Up @@ -728,14 +739,16 @@ export default {
return false;
}

const queryTerm = this.latinizeTags ? latinize(tag[this.textField]) : tag[this.textField];
const searchQuery = this.escapeRegExp(
this.caseSensitiveTags ? tag[this.textField] : tag[this.textField].toLowerCase()
this.caseSensitiveTags ? queryTerm : queryTerm.toLowerCase()
);

for (let selectedTag of this.tags) {
const compareableTerm = this.latinizeTags ? latinize(selectedTag[this.textField]) : selectedTag[this.textField];
const compareable = this.caseSensitiveTags
? selectedTag[this.textField]
: selectedTag[this.textField].toLowerCase();
? compareableTerm
: compareableTerm.toLowerCase();

if (selectedTag[this.idField] === tag[this.idField] && this.escapeRegExp(compareable).length == searchQuery.length && compareable.search(searchQuery) > -1) {
return true;
Expand Down