@lvce-editor/settings-view 1.20.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/settingsViewWorkerMain.js +320 -88
- package/package.json +1 -1
|
@@ -477,7 +477,8 @@ const splitLines = lines => {
|
|
|
477
477
|
return lines.split(NewLine);
|
|
478
478
|
};
|
|
479
479
|
const getCurrentStack = () => {
|
|
480
|
-
const
|
|
480
|
+
const stackLinesToSkip = 3;
|
|
481
|
+
const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
|
|
481
482
|
return currentStack;
|
|
482
483
|
};
|
|
483
484
|
const getNewLineIndex = (string, startIndex = undefined) => {
|
|
@@ -748,6 +749,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
|
|
|
748
749
|
return invokeHelper(ipc, method, params, true);
|
|
749
750
|
};
|
|
750
751
|
|
|
752
|
+
class CommandNotFoundError extends Error {
|
|
753
|
+
constructor(command) {
|
|
754
|
+
super(`Command not found ${command}`);
|
|
755
|
+
this.name = 'CommandNotFoundError';
|
|
756
|
+
}
|
|
757
|
+
}
|
|
751
758
|
const commands = Object.create(null);
|
|
752
759
|
const register = commandMap => {
|
|
753
760
|
Object.assign(commands, commandMap);
|
|
@@ -758,7 +765,7 @@ const getCommand = key => {
|
|
|
758
765
|
const execute = (command, ...args) => {
|
|
759
766
|
const fn = getCommand(command);
|
|
760
767
|
if (!fn) {
|
|
761
|
-
throw new
|
|
768
|
+
throw new CommandNotFoundError(command);
|
|
762
769
|
}
|
|
763
770
|
return fn(...args);
|
|
764
771
|
};
|
|
@@ -914,6 +921,33 @@ const terminate = () => {
|
|
|
914
921
|
globalThis.close();
|
|
915
922
|
};
|
|
916
923
|
|
|
924
|
+
const computeScrollBar = (height, totalItemCount, itemHeight, scrollOffset, scrollBarMinHeight) => {
|
|
925
|
+
const totalHeight = totalItemCount * itemHeight;
|
|
926
|
+
const scrollable = Math.max(0, totalHeight - height);
|
|
927
|
+
const thumbTrack = Math.max(0, height);
|
|
928
|
+
const thumbHeight = totalHeight > 0 ? Math.max(scrollBarMinHeight, Math.floor(height / Math.max(totalHeight, 1) * height)) : height;
|
|
929
|
+
const thumbMaxTop = Math.max(0, thumbTrack - thumbHeight);
|
|
930
|
+
const thumbTop = scrollable > 0 ? Math.min(thumbMaxTop, Math.floor(scrollOffset / scrollable * thumbMaxTop)) : 0;
|
|
931
|
+
return {
|
|
932
|
+
thumbHeight,
|
|
933
|
+
thumbTop
|
|
934
|
+
};
|
|
935
|
+
};
|
|
936
|
+
|
|
937
|
+
const computeVisibleItems = (items, height, scrollOffset, itemHeight) => {
|
|
938
|
+
const safeItemHeight = itemHeight <= 0 ? 1 : itemHeight;
|
|
939
|
+
const totalItems = items.length;
|
|
940
|
+
const minLineY = Math.max(0, Math.floor(scrollOffset / safeItemHeight));
|
|
941
|
+
const itemsPerViewport = Math.max(1, Math.ceil(height / safeItemHeight));
|
|
942
|
+
const maxLineY = Math.min(totalItems, minLineY + itemsPerViewport);
|
|
943
|
+
const visibleItems = items.slice(minLineY, maxLineY);
|
|
944
|
+
return {
|
|
945
|
+
visibleItems,
|
|
946
|
+
minLineY,
|
|
947
|
+
maxLineY
|
|
948
|
+
};
|
|
949
|
+
};
|
|
950
|
+
|
|
917
951
|
const filterBySearch = (items, searchValue) => {
|
|
918
952
|
if (!searchValue || !searchValue.trim()) {
|
|
919
953
|
return items;
|
|
@@ -933,6 +967,7 @@ const filterByTab = (items, tabs) => {
|
|
|
933
967
|
const isItemModified = (item, preferences) => {
|
|
934
968
|
return item.id in preferences;
|
|
935
969
|
};
|
|
970
|
+
|
|
936
971
|
const validateSettings = (items, modifiedSettings, preferences) => {
|
|
937
972
|
return items.map(item => {
|
|
938
973
|
const value = preferences[item.id] ?? item.value;
|
|
@@ -971,17 +1006,37 @@ const clear$1 = state => {
|
|
|
971
1006
|
items,
|
|
972
1007
|
tabs,
|
|
973
1008
|
modifiedSettings,
|
|
974
|
-
preferences
|
|
1009
|
+
preferences,
|
|
1010
|
+
height,
|
|
1011
|
+
itemHeight,
|
|
1012
|
+
scrollBarMinHeight
|
|
975
1013
|
} = state;
|
|
976
1014
|
const newSearchValue = '';
|
|
977
1015
|
const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
|
|
1016
|
+
const nextScrollOffset = 0;
|
|
1017
|
+
const {
|
|
1018
|
+
visibleItems,
|
|
1019
|
+
minLineY,
|
|
1020
|
+
maxLineY
|
|
1021
|
+
} = computeVisibleItems(filteredItems, height, nextScrollOffset, itemHeight);
|
|
1022
|
+
const {
|
|
1023
|
+
thumbHeight,
|
|
1024
|
+
thumbTop
|
|
1025
|
+
} = computeScrollBar(height, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
|
|
978
1026
|
return {
|
|
979
1027
|
...state,
|
|
980
1028
|
filteredItems,
|
|
1029
|
+
visibleItems,
|
|
1030
|
+
minLineY,
|
|
1031
|
+
maxLineY,
|
|
1032
|
+
deltaY: 0,
|
|
1033
|
+
scrollOffset: nextScrollOffset,
|
|
981
1034
|
focus: FocusSettingsInput,
|
|
982
1035
|
focusSource: Script,
|
|
983
1036
|
inputSource: Script,
|
|
984
|
-
searchValue: newSearchValue
|
|
1037
|
+
searchValue: newSearchValue,
|
|
1038
|
+
scrollBarThumbHeight: thumbHeight,
|
|
1039
|
+
scrollBarThumbTop: thumbTop
|
|
985
1040
|
};
|
|
986
1041
|
};
|
|
987
1042
|
|
|
@@ -1013,6 +1068,8 @@ const create$1 = (id, uri, x, y, width, height) => {
|
|
|
1013
1068
|
y,
|
|
1014
1069
|
width,
|
|
1015
1070
|
height,
|
|
1071
|
+
deltaY: 0,
|
|
1072
|
+
itemHeight: 100,
|
|
1016
1073
|
tabs: [],
|
|
1017
1074
|
items: [],
|
|
1018
1075
|
searchValue: '',
|
|
@@ -1020,11 +1077,18 @@ const create$1 = (id, uri, x, y, width, height) => {
|
|
|
1020
1077
|
preferences: {},
|
|
1021
1078
|
inputSource: 0,
|
|
1022
1079
|
scrollOffset: 0,
|
|
1080
|
+
minLineY: 0,
|
|
1081
|
+
maxLineY: 0,
|
|
1082
|
+
visibleItems: [],
|
|
1023
1083
|
filteredItemsCount: 0,
|
|
1024
1084
|
history: [],
|
|
1025
1085
|
historyIndex: -1,
|
|
1026
1086
|
modifiedSettings: {},
|
|
1027
|
-
focusSource: 0
|
|
1087
|
+
focusSource: 0,
|
|
1088
|
+
scrollBarMinHeight: 0,
|
|
1089
|
+
scrollBarThumbHeight: 0,
|
|
1090
|
+
scrollBarThumbTop: 0,
|
|
1091
|
+
highlightsEnabled: false
|
|
1028
1092
|
};
|
|
1029
1093
|
set$1(id, state, state);
|
|
1030
1094
|
};
|
|
@@ -1034,15 +1098,15 @@ const isEqual$4 = (oldState, newState) => {
|
|
|
1034
1098
|
};
|
|
1035
1099
|
|
|
1036
1100
|
const isEqual$3 = (oldState, newState) => {
|
|
1037
|
-
return oldState.filteredItems === newState.filteredItems;
|
|
1101
|
+
return oldState.filteredItems === newState.filteredItems && oldState.deltaY === newState.deltaY;
|
|
1038
1102
|
};
|
|
1039
1103
|
|
|
1040
1104
|
const isEqual$2 = (oldState, newState) => {
|
|
1041
|
-
return
|
|
1105
|
+
return true;
|
|
1042
1106
|
};
|
|
1043
1107
|
|
|
1044
1108
|
const isEqual$1 = (oldState, newState) => {
|
|
1045
|
-
return oldState.filteredItems === newState.filteredItems;
|
|
1109
|
+
return oldState.filteredItems === newState.filteredItems && oldState.visibleItems === newState.visibleItems;
|
|
1046
1110
|
};
|
|
1047
1111
|
|
|
1048
1112
|
const RenderItems = 1;
|
|
@@ -1117,7 +1181,7 @@ const P = 50;
|
|
|
1117
1181
|
const Ul = 60;
|
|
1118
1182
|
const Select$1 = 63;
|
|
1119
1183
|
const Option = 64;
|
|
1120
|
-
const Label = 66;
|
|
1184
|
+
const Label$1 = 66;
|
|
1121
1185
|
const VirtualDomElements = {
|
|
1122
1186
|
__proto__: null,
|
|
1123
1187
|
Aside,
|
|
@@ -1126,7 +1190,7 @@ const VirtualDomElements = {
|
|
|
1126
1190
|
H1,
|
|
1127
1191
|
H3,
|
|
1128
1192
|
Input,
|
|
1129
|
-
Label,
|
|
1193
|
+
Label: Label$1,
|
|
1130
1194
|
Option,
|
|
1131
1195
|
P,
|
|
1132
1196
|
Select: Select$1,
|
|
@@ -1186,14 +1250,34 @@ const handleClickTab = (state, name) => {
|
|
|
1186
1250
|
tabs,
|
|
1187
1251
|
searchValue,
|
|
1188
1252
|
modifiedSettings,
|
|
1189
|
-
preferences
|
|
1253
|
+
preferences,
|
|
1254
|
+
height,
|
|
1255
|
+
itemHeight,
|
|
1256
|
+
scrollOffset
|
|
1190
1257
|
} = state;
|
|
1191
1258
|
const updatedTabs = getUpdatedTabs(tabs, name);
|
|
1192
1259
|
const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings, preferences);
|
|
1260
|
+
const {
|
|
1261
|
+
visibleItems,
|
|
1262
|
+
minLineY,
|
|
1263
|
+
maxLineY
|
|
1264
|
+
} = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
|
|
1265
|
+
const {
|
|
1266
|
+
scrollBarMinHeight
|
|
1267
|
+
} = state;
|
|
1268
|
+
const {
|
|
1269
|
+
thumbHeight,
|
|
1270
|
+
thumbTop
|
|
1271
|
+
} = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
|
|
1193
1272
|
return {
|
|
1194
1273
|
...state,
|
|
1195
1274
|
tabs: updatedTabs,
|
|
1196
|
-
filteredItems
|
|
1275
|
+
filteredItems,
|
|
1276
|
+
visibleItems,
|
|
1277
|
+
minLineY,
|
|
1278
|
+
maxLineY,
|
|
1279
|
+
scrollBarThumbHeight: thumbHeight,
|
|
1280
|
+
scrollBarThumbTop: thumbTop
|
|
1197
1281
|
};
|
|
1198
1282
|
};
|
|
1199
1283
|
|
|
@@ -1264,9 +1348,25 @@ const handleInput = (state, value, inputSource = User) => {
|
|
|
1264
1348
|
tabs,
|
|
1265
1349
|
history,
|
|
1266
1350
|
modifiedSettings,
|
|
1267
|
-
preferences
|
|
1351
|
+
preferences,
|
|
1352
|
+
height,
|
|
1353
|
+
itemHeight
|
|
1268
1354
|
} = state;
|
|
1269
1355
|
const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings, preferences);
|
|
1356
|
+
// Reset scroll when filter value changes so the user sees results from the top
|
|
1357
|
+
const nextScrollOffset = 0;
|
|
1358
|
+
const {
|
|
1359
|
+
visibleItems,
|
|
1360
|
+
minLineY,
|
|
1361
|
+
maxLineY
|
|
1362
|
+
} = computeVisibleItems(filteredItems, height, nextScrollOffset, itemHeight);
|
|
1363
|
+
const {
|
|
1364
|
+
scrollBarMinHeight
|
|
1365
|
+
} = state;
|
|
1366
|
+
const {
|
|
1367
|
+
thumbHeight,
|
|
1368
|
+
thumbTop
|
|
1369
|
+
} = computeScrollBar(height, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
|
|
1270
1370
|
const {
|
|
1271
1371
|
newHistory,
|
|
1272
1372
|
newHistoryIndex
|
|
@@ -1275,9 +1375,16 @@ const handleInput = (state, value, inputSource = User) => {
|
|
|
1275
1375
|
...state,
|
|
1276
1376
|
searchValue: value,
|
|
1277
1377
|
filteredItems,
|
|
1378
|
+
visibleItems,
|
|
1379
|
+
minLineY,
|
|
1380
|
+
maxLineY,
|
|
1381
|
+
deltaY: 0,
|
|
1382
|
+
scrollOffset: nextScrollOffset,
|
|
1278
1383
|
history: newHistory,
|
|
1279
1384
|
historyIndex: newHistoryIndex,
|
|
1280
|
-
inputSource
|
|
1385
|
+
inputSource,
|
|
1386
|
+
scrollBarThumbHeight: thumbHeight,
|
|
1387
|
+
scrollBarThumbTop: thumbTop
|
|
1281
1388
|
};
|
|
1282
1389
|
};
|
|
1283
1390
|
|
|
@@ -1375,6 +1482,64 @@ const handleSettingSelect = (state, name, value, source = User) => {
|
|
|
1375
1482
|
return handleSettingUpdate(state, name, value, source);
|
|
1376
1483
|
};
|
|
1377
1484
|
|
|
1485
|
+
const clamp = (value, min, max) => {
|
|
1486
|
+
if (Number.isNaN(value)) {
|
|
1487
|
+
return min;
|
|
1488
|
+
}
|
|
1489
|
+
if (max < min) {
|
|
1490
|
+
return min;
|
|
1491
|
+
}
|
|
1492
|
+
if (value < min) {
|
|
1493
|
+
return min;
|
|
1494
|
+
}
|
|
1495
|
+
if (value > max) {
|
|
1496
|
+
return max;
|
|
1497
|
+
}
|
|
1498
|
+
return value;
|
|
1499
|
+
};
|
|
1500
|
+
|
|
1501
|
+
const handleWheel = (state, eventDeltaY, inputSource = User) => {
|
|
1502
|
+
const {
|
|
1503
|
+
deltaY: deltaY,
|
|
1504
|
+
filteredItems,
|
|
1505
|
+
height,
|
|
1506
|
+
itemHeight = 1
|
|
1507
|
+
} = state;
|
|
1508
|
+
const itemCount = filteredItems.length;
|
|
1509
|
+
const stepLimit = itemCount === 0 ? 10 : Number.POSITIVE_INFINITY;
|
|
1510
|
+
const limitedEventDelta = Math.max(-stepLimit, Math.min(stepLimit, eventDeltaY));
|
|
1511
|
+
const total = deltaY + limitedEventDelta;
|
|
1512
|
+
// Prevent scrolling beyond the available content height. If content is smaller
|
|
1513
|
+
// than the viewport, the maximum scroll is zero.
|
|
1514
|
+
const totalContentHeight = itemCount * itemHeight;
|
|
1515
|
+
const maxScrollable = Math.max(0, totalContentHeight - height);
|
|
1516
|
+
const clampedDeltaY = clamp(total, 0, maxScrollable);
|
|
1517
|
+
const scrollOffset = clampedDeltaY;
|
|
1518
|
+
const {
|
|
1519
|
+
visibleItems,
|
|
1520
|
+
minLineY,
|
|
1521
|
+
maxLineY
|
|
1522
|
+
} = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
|
|
1523
|
+
const {
|
|
1524
|
+
scrollBarMinHeight
|
|
1525
|
+
} = state;
|
|
1526
|
+
const {
|
|
1527
|
+
thumbHeight,
|
|
1528
|
+
thumbTop
|
|
1529
|
+
} = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
|
|
1530
|
+
return {
|
|
1531
|
+
...state,
|
|
1532
|
+
deltaY: clampedDeltaY,
|
|
1533
|
+
scrollOffset,
|
|
1534
|
+
visibleItems,
|
|
1535
|
+
minLineY,
|
|
1536
|
+
maxLineY,
|
|
1537
|
+
inputSource,
|
|
1538
|
+
scrollBarThumbHeight: thumbHeight,
|
|
1539
|
+
scrollBarThumbTop: thumbTop
|
|
1540
|
+
};
|
|
1541
|
+
};
|
|
1542
|
+
|
|
1378
1543
|
const initialize = async () => {
|
|
1379
1544
|
// TODO
|
|
1380
1545
|
};
|
|
@@ -1475,7 +1640,7 @@ const sendMessagePortToEditorWorker = async (port, rpcId) => {
|
|
|
1475
1640
|
await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
|
|
1476
1641
|
};
|
|
1477
1642
|
const sendMessagePortToErrorWorker = async (port, rpcId) => {
|
|
1478
|
-
const command = '
|
|
1643
|
+
const command = 'Errors.handleMessagePort';
|
|
1479
1644
|
// @ts-ignore
|
|
1480
1645
|
await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
|
|
1481
1646
|
};
|
|
@@ -1674,6 +1839,14 @@ const getAllPreferences = async () => {
|
|
|
1674
1839
|
// @ts-ignore
|
|
1675
1840
|
return invoke$3('Preferences.getAll');
|
|
1676
1841
|
};
|
|
1842
|
+
const showSaveFilePicker = async () => {
|
|
1843
|
+
// @ts-ignore
|
|
1844
|
+
return invoke$3('FilePicker.showSaveFilePicker');
|
|
1845
|
+
};
|
|
1846
|
+
const getLogsDir = async () => {
|
|
1847
|
+
// @ts-ignore
|
|
1848
|
+
return invoke$3('PlatformPaths.getLogsDir');
|
|
1849
|
+
};
|
|
1677
1850
|
const RendererWorker = {
|
|
1678
1851
|
__proto__: null,
|
|
1679
1852
|
activateByEvent,
|
|
@@ -1699,6 +1872,7 @@ const RendererWorker = {
|
|
|
1699
1872
|
getFolderSize,
|
|
1700
1873
|
getIcons,
|
|
1701
1874
|
getKeyBindings,
|
|
1875
|
+
getLogsDir,
|
|
1702
1876
|
getMarkdownDom,
|
|
1703
1877
|
getNodeVersion,
|
|
1704
1878
|
getPreference,
|
|
@@ -1745,6 +1919,7 @@ const RendererWorker = {
|
|
|
1745
1919
|
showContextMenu,
|
|
1746
1920
|
showErrorDialog,
|
|
1747
1921
|
showMessageBox,
|
|
1922
|
+
showSaveFilePicker,
|
|
1748
1923
|
uninstallExtension,
|
|
1749
1924
|
unregisterWebViewInterceptor,
|
|
1750
1925
|
writeClipBoardImage,
|
|
@@ -3966,9 +4141,28 @@ const loadContent = async (state, savedState) => {
|
|
|
3966
4141
|
const preferences = await getPreferences();
|
|
3967
4142
|
const modifiedSettings = getModifiedSettings(preferences);
|
|
3968
4143
|
const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings, preferences);
|
|
4144
|
+
const {
|
|
4145
|
+
height,
|
|
4146
|
+
itemHeight
|
|
4147
|
+
} = state;
|
|
4148
|
+
const {
|
|
4149
|
+
visibleItems,
|
|
4150
|
+
minLineY,
|
|
4151
|
+
maxLineY
|
|
4152
|
+
} = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
|
|
4153
|
+
const {
|
|
4154
|
+
scrollBarMinHeight
|
|
4155
|
+
} = state;
|
|
4156
|
+
const {
|
|
4157
|
+
thumbHeight,
|
|
4158
|
+
thumbTop
|
|
4159
|
+
} = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
|
|
3969
4160
|
return {
|
|
3970
4161
|
...state,
|
|
3971
4162
|
filteredItems,
|
|
4163
|
+
visibleItems,
|
|
4164
|
+
minLineY,
|
|
4165
|
+
maxLineY,
|
|
3972
4166
|
inputSource: Script,
|
|
3973
4167
|
items,
|
|
3974
4168
|
modifiedSettings,
|
|
@@ -3977,7 +4171,9 @@ const loadContent = async (state, savedState) => {
|
|
|
3977
4171
|
searchValue,
|
|
3978
4172
|
tabs: newTabs,
|
|
3979
4173
|
history,
|
|
3980
|
-
historyIndex
|
|
4174
|
+
historyIndex,
|
|
4175
|
+
scrollBarThumbHeight: thumbHeight,
|
|
4176
|
+
scrollBarThumbTop: thumbTop
|
|
3981
4177
|
};
|
|
3982
4178
|
};
|
|
3983
4179
|
|
|
@@ -4002,6 +4198,7 @@ const CheckBox = 'CheckBox';
|
|
|
4002
4198
|
const ErrorMessage = 'ErrorMessage';
|
|
4003
4199
|
const InputBox = 'InputBox';
|
|
4004
4200
|
const InputBoxError = 'InputBoxError';
|
|
4201
|
+
const Label = 'Label';
|
|
4005
4202
|
const MaskIcon = 'MaskIcon';
|
|
4006
4203
|
const MaskIconClearAll = 'MaskIconClearAll';
|
|
4007
4204
|
const ModifiedIndicator = 'ModifiedIndicator';
|
|
@@ -4014,9 +4211,14 @@ const SettingsHeader = 'SettingsHeader';
|
|
|
4014
4211
|
const SettingsInputWrapper = 'SettingsInputWrapper';
|
|
4015
4212
|
const SettingsItem = 'SettingsItem';
|
|
4016
4213
|
const SettingsItemCheckBox = 'SettingsItemCheckBox';
|
|
4214
|
+
const SettingsItemHeading = 'SettingsItemHeading';
|
|
4017
4215
|
const SettingsItems = 'SettingsItems';
|
|
4216
|
+
const SettingsItemWrapper = 'SettingsItemWrapper';
|
|
4018
4217
|
const SettingsMain = 'SettingsMain';
|
|
4019
4218
|
const SettingsNoResults = 'SettingsNoResults';
|
|
4219
|
+
const SettingsScrollBar = 'ScrollBar';
|
|
4220
|
+
const SettingsScrollBarSmall = 'ScrollBarSmall';
|
|
4221
|
+
const SettingsScrollBarThumb = 'ScrollBarThumb';
|
|
4020
4222
|
const SettingsSearchInput = 'SettingsSearchInput';
|
|
4021
4223
|
const SettingsSideBar = 'SettingsSideBar';
|
|
4022
4224
|
const SettingsTabs = 'SettingsTabs';
|
|
@@ -4041,7 +4243,7 @@ const HandleClickTab = 'handleClickTab';
|
|
|
4041
4243
|
const HandleInput = 'handleInput';
|
|
4042
4244
|
const HandleSettingInput = 'handleSettingInput';
|
|
4043
4245
|
const HandleSettingChecked = 'handleSettingChecked';
|
|
4044
|
-
const
|
|
4246
|
+
const HandleWheel = 'handleWheel';
|
|
4045
4247
|
const HandleSettingSelect = 'handleSettingSelect';
|
|
4046
4248
|
const HandleInputFocus = 'handleInputFocus';
|
|
4047
4249
|
|
|
@@ -4077,6 +4279,10 @@ const getSettingsInputDom = () => {
|
|
|
4077
4279
|
type: VirtualDomElements.Input,
|
|
4078
4280
|
className: mergeClassNames(InputBox, SettingsSearchInput, 'MultilineInputBox'),
|
|
4079
4281
|
placeholder,
|
|
4282
|
+
autocomplete: 'off',
|
|
4283
|
+
autocorrect: 'off',
|
|
4284
|
+
autocapitalize: 'off',
|
|
4285
|
+
spellcheck: false,
|
|
4080
4286
|
childCount: 0,
|
|
4081
4287
|
name: SettingsSearch,
|
|
4082
4288
|
onInput: HandleInput,
|
|
@@ -4100,6 +4306,29 @@ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
|
|
|
4100
4306
|
}, ...getSettingsInputDom(), ...getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue), ...getSettingsInputButtonsDom(hasSearchValue)];
|
|
4101
4307
|
};
|
|
4102
4308
|
|
|
4309
|
+
const getContentHeadingDom = headerText => {
|
|
4310
|
+
return [{
|
|
4311
|
+
type: VirtualDomElements.H1,
|
|
4312
|
+
className: SettingsContentHeading,
|
|
4313
|
+
childCount: 1
|
|
4314
|
+
}, text(headerText)];
|
|
4315
|
+
};
|
|
4316
|
+
|
|
4317
|
+
const parentNode$1 = {
|
|
4318
|
+
type: VirtualDomElements.Div,
|
|
4319
|
+
className: mergeClassNames(SettingsScrollBar, SettingsScrollBarSmall),
|
|
4320
|
+
childCount: 1
|
|
4321
|
+
};
|
|
4322
|
+
const getScrollBarDom = (thumbHeight, thumbTop) => {
|
|
4323
|
+
return [parentNode$1, {
|
|
4324
|
+
type: VirtualDomElements.Div,
|
|
4325
|
+
className: SettingsScrollBarThumb,
|
|
4326
|
+
childCount: 0,
|
|
4327
|
+
height: `${thumbHeight}px`,
|
|
4328
|
+
top: `${thumbTop}px`
|
|
4329
|
+
}];
|
|
4330
|
+
};
|
|
4331
|
+
|
|
4103
4332
|
const getErrorMessageDom = errorMessage => {
|
|
4104
4333
|
if (!errorMessage) {
|
|
4105
4334
|
return [];
|
|
@@ -4115,6 +4344,24 @@ const getInputId = id => {
|
|
|
4115
4344
|
return id.replaceAll('.', '\\.');
|
|
4116
4345
|
};
|
|
4117
4346
|
|
|
4347
|
+
const parent = {
|
|
4348
|
+
type: VirtualDomElements.H3,
|
|
4349
|
+
className: SettingsItemHeading,
|
|
4350
|
+
childCount: 1
|
|
4351
|
+
};
|
|
4352
|
+
const getItemHeadingDom = heading => {
|
|
4353
|
+
return [parent, text(heading)];
|
|
4354
|
+
};
|
|
4355
|
+
|
|
4356
|
+
const getItemLabelDom = (domId, label) => {
|
|
4357
|
+
return [{
|
|
4358
|
+
type: VirtualDomElements.Label,
|
|
4359
|
+
htmlFor: domId,
|
|
4360
|
+
childCount: 1,
|
|
4361
|
+
className: Label
|
|
4362
|
+
}, text(label)];
|
|
4363
|
+
};
|
|
4364
|
+
|
|
4118
4365
|
const getItemCheckBoxVirtualDom = item => {
|
|
4119
4366
|
const {
|
|
4120
4367
|
heading,
|
|
@@ -4130,13 +4377,10 @@ const getItemCheckBoxVirtualDom = item => {
|
|
|
4130
4377
|
return [{
|
|
4131
4378
|
type: VirtualDomElements.Div,
|
|
4132
4379
|
className: SettingsItem,
|
|
4133
|
-
childCount:
|
|
4380
|
+
childCount: 2 + errorChildCount,
|
|
4134
4381
|
role: AriaRoles.Group,
|
|
4135
4382
|
'data-modified': modified
|
|
4136
|
-
}, {
|
|
4137
|
-
type: VirtualDomElements.H3,
|
|
4138
|
-
childCount: 1
|
|
4139
|
-
}, text(heading), {
|
|
4383
|
+
}, ...getItemHeadingDom(heading), {
|
|
4140
4384
|
type: VirtualDomElements.Div,
|
|
4141
4385
|
className: SettingsItemCheckBox,
|
|
4142
4386
|
childCount: 2
|
|
@@ -4148,28 +4392,7 @@ const getItemCheckBoxVirtualDom = item => {
|
|
|
4148
4392
|
inputType: 'checkbox',
|
|
4149
4393
|
name: id,
|
|
4150
4394
|
onChange: HandleSettingChecked
|
|
4151
|
-
},
|
|
4152
|
-
type: VirtualDomElements.Label,
|
|
4153
|
-
childCount: 1,
|
|
4154
|
-
htmlFor: domId
|
|
4155
|
-
}, text(description), ...getErrorMessageDom(errorMessage)];
|
|
4156
|
-
};
|
|
4157
|
-
|
|
4158
|
-
const parent = {
|
|
4159
|
-
type: VirtualDomElements.H3,
|
|
4160
|
-
childCount: 1
|
|
4161
|
-
};
|
|
4162
|
-
const getItemHeadingDom = heading => {
|
|
4163
|
-
return [parent, text(heading)];
|
|
4164
|
-
};
|
|
4165
|
-
|
|
4166
|
-
const getItemLabelDom = (domId, label) => {
|
|
4167
|
-
return [{
|
|
4168
|
-
type: VirtualDomElements.Label,
|
|
4169
|
-
htmlFor: domId,
|
|
4170
|
-
childCount: 1,
|
|
4171
|
-
className: 'Label'
|
|
4172
|
-
}, text(label)];
|
|
4395
|
+
}, ...getItemLabelDom(domId, description), ...getErrorMessageDom(errorMessage)];
|
|
4173
4396
|
};
|
|
4174
4397
|
|
|
4175
4398
|
const getItemColorVirtualDom = item => {
|
|
@@ -4306,6 +4529,7 @@ const getItemStringVirtualDom = item => {
|
|
|
4306
4529
|
hasError,
|
|
4307
4530
|
errorMessage
|
|
4308
4531
|
} = item;
|
|
4532
|
+
const domId = getInputId(id);
|
|
4309
4533
|
const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
|
|
4310
4534
|
const errorChildCount = hasError ? 1 : 0;
|
|
4311
4535
|
return [{
|
|
@@ -4313,18 +4537,13 @@ const getItemStringVirtualDom = item => {
|
|
|
4313
4537
|
className: SettingsItem,
|
|
4314
4538
|
childCount: 3 + errorChildCount,
|
|
4315
4539
|
role: AriaRoles.Group
|
|
4316
|
-
}, {
|
|
4317
|
-
type: VirtualDomElements.H3,
|
|
4318
|
-
childCount: 1
|
|
4319
|
-
}, text(heading), {
|
|
4320
|
-
type: VirtualDomElements.P,
|
|
4321
|
-
childCount: 1
|
|
4322
|
-
}, text(description), {
|
|
4540
|
+
}, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
|
|
4323
4541
|
type: VirtualDomElements.Input,
|
|
4324
4542
|
className: inputClassName,
|
|
4325
4543
|
inputType: 'text',
|
|
4326
4544
|
placeholder: stringValue(),
|
|
4327
4545
|
childCount: 0,
|
|
4546
|
+
id: domId,
|
|
4328
4547
|
name: id,
|
|
4329
4548
|
onInput: HandleSettingInput
|
|
4330
4549
|
}, ...getErrorMessageDom(errorMessage)];
|
|
@@ -4369,26 +4588,28 @@ const getItemUrlVirtualDom = item => {
|
|
|
4369
4588
|
}, ...getErrorMessageDom(errorMessage)];
|
|
4370
4589
|
};
|
|
4371
4590
|
|
|
4372
|
-
const
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
|
|
4384
|
-
|
|
4385
|
-
|
|
4386
|
-
|
|
4387
|
-
|
|
4388
|
-
if (item.type === Url) {
|
|
4389
|
-
return getItemUrlVirtualDom(item);
|
|
4591
|
+
const getItemRender = type => {
|
|
4592
|
+
switch (type) {
|
|
4593
|
+
case Number$1:
|
|
4594
|
+
return getItemNumberVirtualDom;
|
|
4595
|
+
case Boolean$1:
|
|
4596
|
+
return getItemCheckBoxVirtualDom;
|
|
4597
|
+
case String:
|
|
4598
|
+
return getItemStringVirtualDom;
|
|
4599
|
+
case Enum:
|
|
4600
|
+
return getItemSelectVirtualDom;
|
|
4601
|
+
case Color:
|
|
4602
|
+
return getItemColorVirtualDom;
|
|
4603
|
+
case Url:
|
|
4604
|
+
return getItemUrlVirtualDom;
|
|
4605
|
+
default:
|
|
4606
|
+
return getItemUnknownVirtualDom;
|
|
4390
4607
|
}
|
|
4391
|
-
|
|
4608
|
+
};
|
|
4609
|
+
|
|
4610
|
+
const getItemVirtualDom = item => {
|
|
4611
|
+
const fn = getItemRender(item.type);
|
|
4612
|
+
return fn(item);
|
|
4392
4613
|
};
|
|
4393
4614
|
|
|
4394
4615
|
const getSettingsNoResultsDom = searchValue => {
|
|
@@ -4414,19 +4635,19 @@ const getSettingsItemsDom = (items, searchValue) => {
|
|
|
4414
4635
|
}, ...items.flatMap(getItemVirtualDom)];
|
|
4415
4636
|
};
|
|
4416
4637
|
|
|
4417
|
-
const getSettingsContentDom = (
|
|
4638
|
+
const getSettingsContentDom = (visibleItems, tabs, searchValue, thumbHeight, thumbTop) => {
|
|
4418
4639
|
const selectedTab = tabs.find(tab => tab.selected);
|
|
4419
4640
|
const headerText = selectedTab ? selectedTab.label : settingsContent();
|
|
4420
4641
|
return [{
|
|
4421
4642
|
type: VirtualDomElements.Div,
|
|
4422
4643
|
className: SettingsContent,
|
|
4423
4644
|
childCount: 2,
|
|
4424
|
-
|
|
4425
|
-
}, {
|
|
4426
|
-
type: VirtualDomElements.
|
|
4427
|
-
className:
|
|
4428
|
-
childCount:
|
|
4429
|
-
},
|
|
4645
|
+
onWheel: HandleWheel
|
|
4646
|
+
}, ...getContentHeadingDom(headerText), {
|
|
4647
|
+
type: VirtualDomElements.Div,
|
|
4648
|
+
className: SettingsItemWrapper,
|
|
4649
|
+
childCount: 2
|
|
4650
|
+
}, ...getSettingsItemsDom(visibleItems, searchValue), ...getScrollBarDom(thumbHeight, thumbTop)];
|
|
4430
4651
|
};
|
|
4431
4652
|
|
|
4432
4653
|
const getTabClassName = tab => {
|
|
@@ -4464,27 +4685,31 @@ const getSettingsSideBarDom = tabs => {
|
|
|
4464
4685
|
}, ...getSettingsTabsDom(tabs)];
|
|
4465
4686
|
};
|
|
4466
4687
|
|
|
4467
|
-
const getSettingsMainDom = (tabs,
|
|
4688
|
+
const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue, thumbHeight, thumbTop) => {
|
|
4468
4689
|
return [{
|
|
4469
4690
|
type: VirtualDomElements.Div,
|
|
4470
4691
|
className: SettingsMain,
|
|
4471
4692
|
childCount: 2
|
|
4472
|
-
}, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(
|
|
4693
|
+
}, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(visibleItems, tabs, searchValue, thumbHeight, thumbTop)];
|
|
4473
4694
|
};
|
|
4474
4695
|
|
|
4696
|
+
const parentNode = {
|
|
4697
|
+
type: VirtualDomElements.Div,
|
|
4698
|
+
childCount: 2,
|
|
4699
|
+
className: mergeClassNames(Viewlet, Settings)
|
|
4700
|
+
};
|
|
4475
4701
|
const getSettingsDom = state => {
|
|
4476
4702
|
const {
|
|
4477
4703
|
tabs,
|
|
4478
4704
|
filteredItems,
|
|
4479
|
-
|
|
4705
|
+
visibleItems,
|
|
4706
|
+
searchValue,
|
|
4707
|
+
scrollBarThumbHeight,
|
|
4708
|
+
scrollBarThumbTop
|
|
4480
4709
|
} = state;
|
|
4481
4710
|
const hasSearchValue = searchValue.trim().length > 0;
|
|
4482
4711
|
const filteredItemsCount = filteredItems.length;
|
|
4483
|
-
return [
|
|
4484
|
-
type: VirtualDomElements.Div,
|
|
4485
|
-
childCount: 2,
|
|
4486
|
-
className: mergeClassNames(Viewlet, Settings)
|
|
4487
|
-
}, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
|
|
4712
|
+
return [parentNode, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, visibleItems, filteredItemsCount, searchValue, scrollBarThumbHeight, scrollBarThumbTop)];
|
|
4488
4713
|
};
|
|
4489
4714
|
|
|
4490
4715
|
const renderItems = (oldState, newState) => {
|
|
@@ -4586,9 +4811,15 @@ const renderEventListeners = () => {
|
|
|
4586
4811
|
}, {
|
|
4587
4812
|
name: HandleSettingChecked,
|
|
4588
4813
|
params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
|
|
4589
|
-
},
|
|
4590
|
-
|
|
4591
|
-
|
|
4814
|
+
},
|
|
4815
|
+
// {
|
|
4816
|
+
// name: DomEventListenerFunctions.HandleScroll,
|
|
4817
|
+
// params: ['handleScroll', 'event.target.scrollTop'],
|
|
4818
|
+
// passive: true,
|
|
4819
|
+
// },
|
|
4820
|
+
{
|
|
4821
|
+
name: HandleWheel,
|
|
4822
|
+
params: ['handleWheel', 'event.deltaY'],
|
|
4592
4823
|
passive: true
|
|
4593
4824
|
}, {
|
|
4594
4825
|
name: HandleSettingSelect,
|
|
@@ -4682,6 +4913,7 @@ const commandMap = {
|
|
|
4682
4913
|
'Settings.handleInputBlur': wrapCommand(handleInputBlur),
|
|
4683
4914
|
'Settings.handleInput': wrapCommand(handleInput),
|
|
4684
4915
|
'Settings.handleScroll': wrapCommand(handleScroll),
|
|
4916
|
+
'Settings.handleWheel': wrapCommand(handleWheel),
|
|
4685
4917
|
'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
|
|
4686
4918
|
'Settings.handleSettingInput': wrapCommand(handleSettingInput),
|
|
4687
4919
|
'Settings.handleInputFocus': wrapCommand(handleInputFocus),
|