Skip to content

Added an option to make the Token Field read only, preventing the add… #61

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

Open
jchaager wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added an option to make the Token Field read only, preventing the add… #61

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
39 changes: 37 additions & 2 deletions dist/tokenfield.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,8 @@ function makeDefaultsAndOptions() {
suggestedItems: [],
setItems: [],
events: {},
delimiters: {}
delimiters: {},
readOnly: false
};

var _options = {
Expand Down Expand Up @@ -279,7 +280,9 @@ function makeDefaultsAndOptions() {
itemValue: 'id', // Value that will be taken out of the results and inserted into itemAttr.
newItemValue: 'name', // Value that will be taken out of the results and inserted into itemAttr.
itemData: 'name', // Which property to search for.
validateNewItem: null // Run a function to test if new item is valid and can be added.
validateNewItem: null, // Run a function to test if new item is valid and can be added.

readOnly: false // Whether the token field is in readOnly mode
};
return { _defaults: _defaults, _options: _options };
}
Expand Down Expand Up @@ -386,6 +389,11 @@ var Tokenfield = function (_EventEmitter) {
html.items = html.container.querySelector('.tokenfield-set > ul');
html.input = html.container.querySelector('.tokenfield-input');
html.input.setAttribute('type', o.inputType);
if ( o.readOnly ) {
html.input.setAttribute('readonly', 'true');
} else {
html.input.removeAttribute('readonly');
}
if (o.mode === 'tokenfield') {
html.input.placeholder = this._vars.setItems.length ? '' : o.placeholder;
} else {
Expand Down Expand Up @@ -1539,6 +1547,12 @@ var Tokenfield = function (_EventEmitter) {
itemHtml.classList.add('focused');
}

if ( o.readOnly ) {
remove.style.display = "none";
} else {
remove.style.display = null;
}

return itemHtml;
}
}, {
Expand Down Expand Up @@ -1790,6 +1804,27 @@ var Tokenfield = function (_EventEmitter) {
return this;
}
}, {
key: 'setReadOnly',
value: function setReadOnly(value) {
var o = this._options;
o.readOnly = value;

// Set input field read only attribute
if (o.readOnly) {
this._html.input.setAttribute('readonly', 'true');
} else {
this._html.input.removeAttribute('readonly');
}

// Show/Hide the remove buttons on the tags.
var itemRemoves = this._html.items.getElementsByClassName("item-remove")
for ( var index = 0 ; index < itemRemoves.length ; index++ ) {
itemRemoves[index].style.display = (o.readOnly ? 'none' : null);
}

return this;
}
}, {
key: 'emptyItems',
value: function emptyItems() {
this._vars.setItems = [];
Expand Down