select

commit

f58e4f62abddd65707c39fcedb2ff22f13498c7a

parent

6bd483bc565e076e60588d578b416daff98d017f

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-08-08 10:17

refactor: align select and tags

Diffstat

2 files changed, 27 insertions, 28 deletions

diff --git a/select.js b/select.js

@@ -91,13 +91,13 @@ export class Select {
   91    91 			this.inputDirty = false;
   92    92 			this.updateValidity();
   93    93 			this.values.innerHTML = '';
   94    -1 			Array.from(this.original.options).forEach((op, i) => {
   -1    94 			Array.from(this.original.options).forEach(op => {
   95    95 				if (op.selected && op.label) {
   96    -1 					var li = create('<li>');
   -1    96 					var li = document.createElement('li');
   97    97 					li.textContent = op.label;
   98    98 					li.className = this.original.dataset.selectValueClass || 'select__value';
   99    99 					li.onclick = () => {
  100    -1 						this.original.options[i].selected = false;
   -1   100 						op.selected = false;
  101   101 						this.updateValue();
  102   102 						this.input.focus();
  103   103 					};
@@ -232,7 +232,7 @@ export class Select {
  232   232 				op.selected = false;
  233   233 				this.updateValue();
  234   234 				this.input.value = op.label;
  235    -1 				this.oninput();
   -1   235 				this.input.dispatchEvent(new Event('input'));
  236   236 			}
  237   237 		}
  238   238 	}

diff --git a/tags.js b/tags.js

@@ -1,4 +1,4 @@
    1    -1 import { KEYS, randomString } from './utils.js';
   -1     1 import { KEYS, randomString, create } from './utils.js';
    2     2 
    3     3 export class TagInput {
    4     4 	constructor(id, original) {
@@ -14,9 +14,7 @@ export class TagInput {
   14    14 	createElements() {
   15    15 		this.wrapper = document.createElement('div');
   16    16 
   17    -1 		this.values = document.createElement('ul');
   18    -1 		this.values.className = 'select__values';
   19    -1 		this.values.setAttribute('aria-live', 'polite');
   -1    17 		this.values = create('<ul class="select__values" aria-live="polite">');
   20    18 		this.wrapper.append(this.values);
   21    19 
   22    20 		this.input = document.createElement('input');
@@ -45,6 +43,26 @@ export class TagInput {
   45    43 		this.updateValue();
   46    44 	}
   47    45 
   -1    46 	updateValue() {
   -1    47 		this.input.value = '';
   -1    48 		this.values.innerHTML = '';
   -1    49 		Array.from(this.original.options).forEach(op => {
   -1    50 			if (op.selected && op.label) {
   -1    51 				var li = document.createElement('li');
   -1    52 				li.textContent = op.label;
   -1    53 				li.className = this.original.dataset.tagsValueClass || 'select__value';
   -1    54 				li.onclick = () => {
   -1    55 					op.selected = false;
   -1    56 					this.updateValue();
   -1    57 					this.input.focus();
   -1    58 				};
   -1    59 				this.values.append(li);
   -1    60 			} else if (!op.selected && op.hasAttribute('data-tag-custom')) {
   -1    61 				op.remove();
   -1    62 			}
   -1    63 		});
   -1    64 	}
   -1    65 
   48    66 	setValue(value) {
   49    67 		var option = Array.from(this.original.options).find(op => op.value === value);
   50    68 		if (!option) {
@@ -69,6 +87,7 @@ export class TagInput {
   69    87 					op.selected = false;
   70    88 					this.updateValue();
   71    89 					this.input.value = op.value;
   -1    90 					this.input.dispatchEvent(new Event('input'));
   72    91 				}
   73    92 			}
   74    93 		} else if (this.separators.includes(event.key)) {
@@ -84,26 +103,6 @@ export class TagInput {
   84   103 			this.setValue(this.input.value.trim());
   85   104 		}
   86   105 	}
   87    -1 
   88    -1 	updateValue() {
   89    -1 		this.input.value = '';
   90    -1 		this.values.innerHTML = '';
   91    -1 		Array.from(this.original.options).forEach((op, i) => {
   92    -1 			if (op.selected) {
   93    -1 				var li = document.createElement('li');
   94    -1 				li.textContent = op.label;
   95    -1 				li.className = this.original.dataset.tagsValueClass || 'select__value';
   96    -1 				li.onclick = () => {
   97    -1 					op.selected = false;
   98    -1 					this.updateValue();
   99    -1 					this.input.focus();
  100    -1 				};
  101    -1 				this.values.append(li);
  102    -1 			} else if (op.hasAttribute('data-tag-custom')) {
  103    -1 				op.remove();
  104    -1 			}
  105    -1 		});
  106    -1 	}
  107   106 }
  108   107 
  109   108 Array.from(document.querySelectorAll('[data-tags]')).forEach(el => {