*/
_createUI: function(element, options) {
var list = elCreate('ol');
- list.className = 'inputItemList';
+ list.className = 'inputItemList' + (element.disabled ? ' disabled' : '');
elData(list, 'element-id', element.id);
list.addEventListener(WCF_CLICK_EVENT, function(event) {
if (event.target === list) {
elData(content, 'object-id', value.objectId);
if (value.type) elData(content, 'type', value.type);
content.textContent = value.value;
-
- var button = elCreate('a');
- button.className = 'icon icon16 fa-times';
- button.addEventListener(WCF_CLICK_EVENT, _callbackRemoveItem);
listItem.appendChild(content);
- listItem.appendChild(button);
+
+ if (!data.element.disabled) {
+ var button = elCreate('a');
+ button.className = 'icon icon16 fa-times';
+ button.addEventListener(WCF_CLICK_EVENT, _callbackRemoveItem);
+ listItem.appendChild(button);
+ }
data.list.insertBefore(listItem, data.listItem);
data.suggestion.addExcludedValue(value.value);
data.element.value = '';
- this._handleLimit(elementId);
+ if (!data.element.disabled) {
+ this._handleLimit(elementId);
+ }
var values = this._syncShadow(data);
if (typeof data.options.callbackChange === 'function') {
*/
_createUI: function(element, options) {
var list = elCreate('ol');
- list.className = 'inputItemList';
+ list.className = 'inputItemList' + (element.disabled ? ' disabled' : '');
elData(list, 'element-id', element.id);
list.addEventListener(WCF_CLICK_EVENT, function(event) {
if (event.target === list) {
content.className = 'content';
elData(content, 'object-id', value.objectId);
content.textContent = value.value;
-
- var button = elCreate('a');
- button.className = 'icon icon16 fa-times';
- button.addEventListener(WCF_CLICK_EVENT, _callbackRemoveItem);
listItem.appendChild(content);
- listItem.appendChild(button);
+
+ if (!data.element.disabled) {
+ var button = elCreate('a');
+ button.className = 'icon icon16 fa-times';
+ button.addEventListener(WCF_CLICK_EVENT, _callbackRemoveItem);
+ listItem.appendChild(button);
+ }
data.list.insertBefore(listItem, data.listItem);
data.element.value = '';
- this._handleLimit(elementId);
+ if (!data.element.disabled) {
+ this._handleLimit(elementId);
+ }
var values = this._syncShadow(data);
if (typeof data.options.callbackChange === 'function') {
color: $wcfInputTextActive;
}
- &[disabled] {
+ &[disabled],
+ &.disabled {
background-color: $wcfInputDisabledBackground !important;
border-color: $wcfInputDisabledBorder !important;
color: $wcfInputDisabledText !important;
color: inherit;
}
- &.active,
- &:hover {
+ &.active {
+ background-color: $wcfButtonBackgroundActive;
+ color: $wcfButtonTextActive;
+ }
+ }
+
+ &:not(.disabled) {
+ > item:hover {
background-color: $wcfButtonBackgroundActive;
color: $wcfButtonTextActive;
}
-
}
> .input > input {