select

commit

4d435f7bc66e4f9c47fe14fe284959d5b165233a

parent

a23b7af67a09d7320cc69a8df9b41cecd8aaafc3

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-08-08 15:18

inline createMeasure

Diffstat

1 files changed, 10 insertions, 15 deletions

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

@@ -1,28 +1,20 @@
    1     1 import { create } from './utils.js';
    2     2 
    3    -1 var createMeasure = function(target) {
    4    -1 	var wrapper = create('<div class="select__measure" aria-hidden="true">');
    5    -1 	var span = document.createElement('span');
    6    -1 	target.after(wrapper);
    7    -1 	wrapper.append(span);
    8    -1 
    9    -1 	return text => {
   10    -1 		span.textContent = text;
   11    -1 		var rect = span.getBoundingClientRect();
   12    -1 		return rect.width;
   13    -1 	};
   14    -1 };
   15    -1 
   16     3 export class Values {
   17     4 	constructor(input, valueClass) {
   18     5 		this.gap = 4;
   19     6 		this.input = input;
   20     7 		this.valueClass = valueClass || 'select__value';
   21     8 
   22    -1 		this.measure = createMeasure(input);
   23     9 		this.el = create('<ul class="select__values" aria-live="polite">');
   24    10 		input.before(this.el);
   25    11 
   -1    12 		var measureWrapper = create('<div class="select__measure" aria-hidden="true">');
   -1    13 		input.after(measureWrapper);
   -1    14 
   -1    15 		this.measure = document.createElement('span');
   -1    16 		measureWrapper.append(this.measure);
   -1    17 
   26    18 		input.addEventListener('input', this.updateSize.bind(this));
   27    19 		window.addEventListener('resize', this.updateSize.bind(this));
   28    20 	}
@@ -48,7 +40,10 @@ export class Values {
   48    40 				? last.right - first.left
   49    41 				: first.right - last.left;
   50    42 
   51    -1 			if (width + this.gap + this.measure(this.input.value) < this.el.clientWidth) {
   -1    43 			this.measure.textContent = this.input.value;
   -1    44 			var text = this.measure.getBoundingClientRect();
   -1    45 
   -1    46 			if (width + this.gap + text.width < this.el.clientWidth) {
   52    47 				this.input.style.paddingTop = `${paddingTop + height}px`;
   53    48 				this.input.style.textIndent = `${width + this.gap}px`;
   54    49 			} else {