select

Better select widgets in vanilla javascript.  https://p.ce9e.org/select/demo/
git clone https://git.ce9e.org/select.git

commit
4ac5822dd4b490e57bc17edcb33c3fa5bcbf1de8
parent
3f6ac292a2009b3db61dba9ccb301d55e5d29787
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2023-08-09 18:11
refactor constructor arguments

Diffstat

M README.md 1 -
M select.js 14 +++++++++-----
M tags.js 15 +++++++++------

3 files changed, 18 insertions, 12 deletions


diff --git a/README.md b/README.md

@@ -22,7 +22,6 @@ use this on desktop.
   22    22 
   23    23 ## Roadmap
   24    24 
   25    -1 -	refactor constructor args
   26    25 -	allowClear
   27    26 
   28    27 ## Inspiration

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

@@ -2,9 +2,13 @@ import { KEYS, randomString, create } from './utils.js';
    2     2 import { Values } from './values.js';
    3     3 
    4     4 export class Select {
    5    -1 	constructor(id, original) {
    6    -1 		this.id = id;
   -1     5 	constructor(original, options = {}) {
    7     6 		this.original = original;
   -1     7 
   -1     8 		this.id = options.id || randomString(8);
   -1     9 		this.inputClass = options.inputClass || original.dataset.selectInputClass;
   -1    10 		this.valueClass = options.valueClass || original.dataset.selectValueClass;
   -1    11 
    8    12 		this.focus = -1;
    9    13 		this.indexMap = [];
   10    14 		this.inputDirty = false;
@@ -24,7 +28,7 @@ export class Select {
   24    28 		if (this.original.multiple) {
   25    29 			var inputWrapper = create('<div class="select__input">');
   26    30 			inputWrapper.append(this.input);
   27    -1 			this.values = new Values(this.input, this.original.dataset.selectValueClass);
   -1    31 			this.values = new Values(this.input, this.valueClass);
   28    32 			this.wrapper.append(inputWrapper);
   29    33 		} else {
   30    34 			this.wrapper.append(this.input);
@@ -32,7 +36,7 @@ export class Select {
   32    36 
   33    37 		this.wrapper.append(this.dropdown);
   34    38 
   35    -1 		this.input.className = this.original.dataset.selectInputClass || '';
   -1    39 		this.input.className = this.inputClass || '';
   36    40 		this.input.disabled = this.original.disabled;
   37    41 
   38    42 		var labels = Array.from(this.original.labels).map(label => {
@@ -257,5 +261,5 @@ export class Select {
  257   261 }
  258   262 
  259   263 Array.from(document.querySelectorAll('[data-select]')).forEach(el => {
  260    -1 	new Select(randomString(8), el);
   -1   264 	new Select(el);
  261   265 });

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

@@ -2,10 +2,13 @@ import { KEYS, randomString, create } from './utils.js';
    2     2 import { Values } from './values.js';
    3     3 
    4     4 export class TagInput {
    5    -1 	constructor(id, original) {
    6    -1 		this.id = id;
   -1     5 	constructor(original, options = {}) {
    7     6 		this.original = original;
    8    -1 		this.separators = (original.dataset.tagsSeparators || 'Enter').split(/\s+/)
   -1     7 
   -1     8 		this.id = options.id || randomString(8);
   -1     9 		this.inputClass = options.inputClass || original.dataset.tagsInputClass;
   -1    10 		this.valueClass = options.valueClass || original.dataset.tagsValueClass;
   -1    11 		this.separators = options.separators || (original.dataset.tagsSeparators || 'Enter').split(/\s+/);
    9    12 
   10    13 		this.createElements();
   11    14 		original.hidden = true;
@@ -18,7 +21,7 @@ export class TagInput {
   18    21 		this.wrapper = create('<div class="select__input">');
   19    22 
   20    23 		this.input = document.createElement('input');
   21    -1 		this.input.className = this.original.dataset.tagsInputClass || '';
   -1    24 		this.input.className = this.inputClass || '';
   22    25 		var labels = Array.from(this.original.labels).map(label => {
   23    26 			label.id = label.id || randomString(8);
   24    27 			return label.id;
@@ -26,7 +29,7 @@ export class TagInput {
   26    29 		this.input.setAttribute('aria-labelledby', labels);
   27    30 		this.wrapper.append(this.input);
   28    31 
   29    -1 		this.values = new Values(this.input, this.original.dataset.tagsValueClass);
   -1    32 		this.values = new Values(this.input, this.valueClass);
   30    33 
   31    34 		this.datalist = document.createElement('datalist');
   32    35 		this.datalist.innerHTML = this.original.innerHTML;
@@ -99,5 +102,5 @@ export class TagInput {
   99   102 }
  100   103 
  101   104 Array.from(document.querySelectorAll('[data-tags]')).forEach(el => {
  102    -1 	new TagInput(randomString(8), el);
   -1   105 	new TagInput(el);
  103   106 });