|
| 1 | +import Setting from './map.js'; |
| 2 | +import SettingType from './setting.js'; |
| 3 | +import { getSettingType, isSettingType } from '../settingRegistry.js'; |
| 4 | + |
| 5 | +const mapTypes = new Set(); |
| 6 | +let baseRegistered = false; |
| 7 | + |
| 8 | +export default class AdvancedMap extends Setting { |
| 9 | + /** |
| 10 | + * @type {SettingType} |
| 11 | + */ |
| 12 | + #keyType; |
| 13 | + /** |
| 14 | + * @type {SettingType} |
| 15 | + */ |
| 16 | + #valueType; |
| 17 | + #name; |
| 18 | + |
| 19 | + constructor(keyType = 'text', valueType = keyType) { |
| 20 | + super('advancedMap'); |
| 21 | + this.#keyType = getSettingType(keyType); |
| 22 | + this.#valueType = getSettingType(valueType); |
| 23 | + if (!isSettingType(this.#keyType) || !isSettingType(this.#valueType)) throw new Error('AdvancedMap requires setting types'); |
| 24 | + const uniqueTypes = [...new Set([this.#keyType, this.#valueType])]; |
| 25 | + // const invalidTypes = uniqueTypes.filter((type) => !type.isBasic); |
| 26 | + // if (invalidTypes.length) throw new Error(`AdvancedMap can only use basic setting types. (invalid: ${invalidTypes.join(', ')})`); |
| 27 | + this.#name = uniqueTypes.join('_').replaceAll(' ', '-'); |
| 28 | + if (baseRegistered) { |
| 29 | + this.name += `_${this.#name}`; |
| 30 | + } |
| 31 | + } |
| 32 | + |
| 33 | + /** |
| 34 | + * @param {Map<any, any>} val |
| 35 | + */ |
| 36 | + element(val, update, { |
| 37 | + container, data: { keyData, valueData, leftData, rightData } = {}, disabled, key, name, untilClose, |
| 38 | + } = {}) { |
| 39 | + // TODO: validate that disabled propagates properly |
| 40 | + const data = [...val.entries()]; |
| 41 | + let entries = data.length; |
| 42 | + const add = (lineValue, id) => { |
| 43 | + function save(remove) { |
| 44 | + if (remove) data.splice(data.indexOf(lineValue), 1); |
| 45 | + const ret = data.filter(([_]) => _); |
| 46 | + update(ret); |
| 47 | + } |
| 48 | + const line = $('<div class="item">'); |
| 49 | + const options = { container: $('<div>'), name, disabled, remove: false, removeSetting() {}, key: `${key}.${id}`, child: true }; |
| 50 | + const dataKey = keyData || leftData; |
| 51 | + const left = $(this.#keyType.element(this.#keyValue(lineValue[0], dataKey), (newValue) => { |
| 52 | + // TODO: validate this is how it's supposed to work |
| 53 | + const isInvalid = newValue !== lineValue[0] && data.some(([keyValue]) => keyValue === newValue); |
| 54 | + line.toggleClass('error', isInvalid); |
| 55 | + if (isInvalid || newValue === lineValue[0]) return; |
| 56 | + lineValue[0] = newValue; |
| 57 | + save(); |
| 58 | + }, { |
| 59 | + ...options, |
| 60 | + data: dataKey, |
| 61 | + })); |
| 62 | + const dataValue = valueData || rightData; |
| 63 | + const right = $(this.#valueType.element(this.#value(lineValue[1], dataValue), (newValue) => { |
| 64 | + if (newValue === lineValue[1]) return; |
| 65 | + lineValue[1] = newValue; |
| 66 | + save(); |
| 67 | + }, { |
| 68 | + ...options, |
| 69 | + data: dataValue, |
| 70 | + })); |
| 71 | + const button = $('<button class="btn btn-danger glyphicon glyphicon-trash">').on('click', () => { |
| 72 | + save(true); |
| 73 | + line.remove(); |
| 74 | + }); |
| 75 | + const warning = $('<div class="warning clickable">') |
| 76 | + .text('Duplicate value, not updated! Click here to reset.') |
| 77 | + .on('click', () => left.val(this.#keyValue(lineValue[0], dataKey)) |
| 78 | + .parent().removeClass('error')); |
| 79 | + function refresh() { |
| 80 | + left.prop('disabled', disabled); |
| 81 | + right.prop('disabled', disabled); |
| 82 | + button.prop('disabled', disabled); |
| 83 | + } |
| 84 | + refresh(); |
| 85 | + untilClose(`refresh:${key}`, refresh, `create:${key}`); |
| 86 | + container.append(line.append(left, ' : ', right, button, warning)); |
| 87 | + }; |
| 88 | + data.forEach(add); |
| 89 | + return $('<button class="btn btn-success glyphicon glyphicon-plus">').on('click', () => { |
| 90 | + const item = [ |
| 91 | + this.#keyType.default(keyData) ?? '', |
| 92 | + this.#valueType.default(valueData) ?? '', |
| 93 | + ]; |
| 94 | + data.push(item); |
| 95 | + add(item, entries); |
| 96 | + entries += 1; |
| 97 | + }); |
| 98 | + } |
| 99 | + |
| 100 | + encode(value = []) { |
| 101 | + if (value instanceof Map) { |
| 102 | + return super.encode(this.#encodeEntries([...value.entries()])); |
| 103 | + } |
| 104 | + return super.encode(this.#encodeEntries(value)); |
| 105 | + } |
| 106 | + |
| 107 | + styles() { |
| 108 | + return [...new Set([ |
| 109 | + ...super.styles(), |
| 110 | + ...this.#keyType.styles(), |
| 111 | + ...this.#valueType.styles(), |
| 112 | + ]).values()]; |
| 113 | + } |
| 114 | + |
| 115 | + #keyValue(value, data) { |
| 116 | + return this.#keyType.value(value, data); |
| 117 | + } |
| 118 | + |
| 119 | + #value(value, data) { |
| 120 | + return this.#valueType.value(value, data); |
| 121 | + } |
| 122 | + |
| 123 | + #encodeEntries(data = []) { |
| 124 | + return data.map(([key, val]) => ([ |
| 125 | + this.#keyType.encode(key), |
| 126 | + this.#valueType.encode(val), |
| 127 | + ])); |
| 128 | + } |
| 129 | + |
| 130 | + get isRegistered() { |
| 131 | + const registered = mapTypes.has(this.#name); |
| 132 | + if (!registered) { |
| 133 | + mapTypes.add(this.#name); |
| 134 | + baseRegistered = true; |
| 135 | + } |
| 136 | + return registered; |
| 137 | + } |
| 138 | +} |
0 commit comments