sqlui 0.1.58 → 0.1.60
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.release-version +1 -1
- data/app/server.rb +57 -13
- data/app/sqlui.rb +1 -1
- data/app/views/sqlui.erb +28 -22
- data/client/resources/sqlui.css +55 -35
- data/client/resources/sqlui.js +357 -103
- metadata +2 -2
data/client/resources/sqlui.js
CHANGED
@@ -1514,10 +1514,11 @@
|
|
1514
1514
|
/**
|
1515
1515
|
Create a selection range.
|
1516
1516
|
*/
|
1517
|
-
static range(anchor, head, goalColumn) {
|
1518
|
-
let
|
1519
|
-
|
1520
|
-
|
1517
|
+
static range(anchor, head, goalColumn, bidiLevel) {
|
1518
|
+
let flags = ((goalColumn !== null && goalColumn !== void 0 ? goalColumn : 33554431 /* RangeFlag.NoGoalColumn */) << 5 /* RangeFlag.GoalColumnOffset */) |
|
1519
|
+
(bidiLevel == null ? 3 : Math.min(2, bidiLevel));
|
1520
|
+
return head < anchor ? SelectionRange.create(head, anchor, 16 /* RangeFlag.Inverted */ | 8 /* RangeFlag.AssocAfter */ | flags)
|
1521
|
+
: SelectionRange.create(anchor, head, (head > anchor ? 4 /* RangeFlag.AssocBefore */ : 0) | flags);
|
1521
1522
|
}
|
1522
1523
|
/**
|
1523
1524
|
@internal
|
@@ -4346,6 +4347,26 @@
|
|
4346
4347
|
}
|
4347
4348
|
}
|
4348
4349
|
}
|
4350
|
+
function scrollableParent(dom) {
|
4351
|
+
let doc = dom.ownerDocument;
|
4352
|
+
for (let cur = dom.parentNode; cur;) {
|
4353
|
+
if (cur == doc.body) {
|
4354
|
+
break;
|
4355
|
+
}
|
4356
|
+
else if (cur.nodeType == 1) {
|
4357
|
+
if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
|
4358
|
+
return cur;
|
4359
|
+
cur = cur.assignedSlot || cur.parentNode;
|
4360
|
+
}
|
4361
|
+
else if (cur.nodeType == 11) {
|
4362
|
+
cur = cur.host;
|
4363
|
+
}
|
4364
|
+
else {
|
4365
|
+
break;
|
4366
|
+
}
|
4367
|
+
}
|
4368
|
+
return null;
|
4369
|
+
}
|
4349
4370
|
class DOMSelectionState {
|
4350
4371
|
constructor() {
|
4351
4372
|
this.anchorNode = null;
|
@@ -7544,22 +7565,30 @@
|
|
7544
7565
|
this.compositionFirstChange = null;
|
7545
7566
|
this.compositionEndedAt = 0;
|
7546
7567
|
this.mouseSelection = null;
|
7568
|
+
let handleEvent = (handler, event) => {
|
7569
|
+
if (this.ignoreDuringComposition(event))
|
7570
|
+
return;
|
7571
|
+
if (event.type == "keydown" && this.keydown(view, event))
|
7572
|
+
return;
|
7573
|
+
if (this.mustFlushObserver(event))
|
7574
|
+
view.observer.forceFlush();
|
7575
|
+
if (this.runCustomHandlers(event.type, view, event))
|
7576
|
+
event.preventDefault();
|
7577
|
+
else
|
7578
|
+
handler(view, event);
|
7579
|
+
};
|
7547
7580
|
for (let type in handlers) {
|
7548
7581
|
let handler = handlers[type];
|
7549
|
-
view.contentDOM.addEventListener(type,
|
7550
|
-
if (
|
7551
|
-
|
7552
|
-
if (type == "keydown" && this.keydown(view, event))
|
7553
|
-
return;
|
7554
|
-
if (this.mustFlushObserver(event))
|
7555
|
-
view.observer.forceFlush();
|
7556
|
-
if (this.runCustomHandlers(type, view, event))
|
7557
|
-
event.preventDefault();
|
7558
|
-
else
|
7559
|
-
handler(view, event);
|
7582
|
+
view.contentDOM.addEventListener(type, event => {
|
7583
|
+
if (eventBelongsToEditor(view, event))
|
7584
|
+
handleEvent(handler, event);
|
7560
7585
|
}, handlerOptions[type]);
|
7561
7586
|
this.registeredEvents.push(type);
|
7562
7587
|
}
|
7588
|
+
view.scrollDOM.addEventListener("mousedown", (event) => {
|
7589
|
+
if (event.target == view.scrollDOM)
|
7590
|
+
handleEvent(handlers.mousedown, event);
|
7591
|
+
});
|
7563
7592
|
if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
|
7564
7593
|
// On Chrome 102, viewport updates somehow stop wheel-based
|
7565
7594
|
// scrolling. Turning off pointer events during the scroll seems
|
@@ -7716,12 +7745,18 @@
|
|
7716
7745
|
const EmacsyPendingKeys = "dthko";
|
7717
7746
|
// Key codes for modifier keys
|
7718
7747
|
const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
|
7748
|
+
function dragScrollSpeed(dist) {
|
7749
|
+
return dist * 0.7 + 8;
|
7750
|
+
}
|
7719
7751
|
class MouseSelection {
|
7720
7752
|
constructor(view, startEvent, style, mustSelect) {
|
7721
7753
|
this.view = view;
|
7722
7754
|
this.style = style;
|
7723
7755
|
this.mustSelect = mustSelect;
|
7756
|
+
this.scrollSpeed = { x: 0, y: 0 };
|
7757
|
+
this.scrolling = -1;
|
7724
7758
|
this.lastEvent = startEvent;
|
7759
|
+
this.scrollParent = scrollableParent(view.contentDOM);
|
7725
7760
|
let doc = view.contentDOM.ownerDocument;
|
7726
7761
|
doc.addEventListener("mousemove", this.move = this.move.bind(this));
|
7727
7762
|
doc.addEventListener("mouseup", this.up = this.up.bind(this));
|
@@ -7737,11 +7772,24 @@
|
|
7737
7772
|
}
|
7738
7773
|
}
|
7739
7774
|
move(event) {
|
7775
|
+
var _a;
|
7740
7776
|
if (event.buttons == 0)
|
7741
7777
|
return this.destroy();
|
7742
7778
|
if (this.dragging !== false)
|
7743
7779
|
return;
|
7744
7780
|
this.select(this.lastEvent = event);
|
7781
|
+
let sx = 0, sy = 0;
|
7782
|
+
let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
|
7783
|
+
|| { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
|
7784
|
+
if (event.clientX <= rect.left)
|
7785
|
+
sx = -dragScrollSpeed(rect.left - event.clientX);
|
7786
|
+
else if (event.clientX >= rect.right)
|
7787
|
+
sx = dragScrollSpeed(event.clientX - rect.right);
|
7788
|
+
if (event.clientY <= rect.top)
|
7789
|
+
sy = -dragScrollSpeed(rect.top - event.clientY);
|
7790
|
+
else if (event.clientY >= rect.bottom)
|
7791
|
+
sy = dragScrollSpeed(event.clientY - rect.bottom);
|
7792
|
+
this.setScrollSpeed(sx, sy);
|
7745
7793
|
}
|
7746
7794
|
up(event) {
|
7747
7795
|
if (this.dragging == null)
|
@@ -7751,19 +7799,41 @@
|
|
7751
7799
|
this.destroy();
|
7752
7800
|
}
|
7753
7801
|
destroy() {
|
7802
|
+
this.setScrollSpeed(0, 0);
|
7754
7803
|
let doc = this.view.contentDOM.ownerDocument;
|
7755
7804
|
doc.removeEventListener("mousemove", this.move);
|
7756
7805
|
doc.removeEventListener("mouseup", this.up);
|
7757
7806
|
this.view.inputState.mouseSelection = null;
|
7758
7807
|
}
|
7808
|
+
setScrollSpeed(sx, sy) {
|
7809
|
+
this.scrollSpeed = { x: sx, y: sy };
|
7810
|
+
if (sx || sy) {
|
7811
|
+
if (this.scrolling < 0)
|
7812
|
+
this.scrolling = setInterval(() => this.scroll(), 50);
|
7813
|
+
}
|
7814
|
+
else if (this.scrolling > -1) {
|
7815
|
+
clearInterval(this.scrolling);
|
7816
|
+
this.scrolling = -1;
|
7817
|
+
}
|
7818
|
+
}
|
7819
|
+
scroll() {
|
7820
|
+
if (this.scrollParent) {
|
7821
|
+
this.scrollParent.scrollLeft += this.scrollSpeed.x;
|
7822
|
+
this.scrollParent.scrollTop += this.scrollSpeed.y;
|
7823
|
+
}
|
7824
|
+
else {
|
7825
|
+
this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
|
7826
|
+
}
|
7827
|
+
if (this.dragging === false)
|
7828
|
+
this.select(this.lastEvent);
|
7829
|
+
}
|
7759
7830
|
select(event) {
|
7760
7831
|
let selection = this.style.get(event, this.extend, this.multiple);
|
7761
7832
|
if (this.mustSelect || !selection.eq(this.view.state.selection) ||
|
7762
7833
|
selection.main.assoc != this.view.state.selection.main.assoc)
|
7763
7834
|
this.view.dispatch({
|
7764
7835
|
selection,
|
7765
|
-
userEvent: "select.pointer"
|
7766
|
-
scrollIntoView: true
|
7836
|
+
userEvent: "select.pointer"
|
7767
7837
|
});
|
7768
7838
|
this.mustSelect = false;
|
7769
7839
|
}
|
@@ -7954,23 +8024,15 @@
|
|
7954
8024
|
function basicMouseSelection(view, event) {
|
7955
8025
|
let start = queryPos(view, event), type = getClickType(event);
|
7956
8026
|
let startSel = view.state.selection;
|
7957
|
-
let last = start, lastEvent = event;
|
7958
8027
|
return {
|
7959
8028
|
update(update) {
|
7960
8029
|
if (update.docChanged) {
|
7961
8030
|
start.pos = update.changes.mapPos(start.pos);
|
7962
8031
|
startSel = startSel.map(update.changes);
|
7963
|
-
lastEvent = null;
|
7964
8032
|
}
|
7965
8033
|
},
|
7966
8034
|
get(event, extend, multiple) {
|
7967
|
-
let cur;
|
7968
|
-
if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
|
7969
|
-
cur = last;
|
7970
|
-
else {
|
7971
|
-
cur = last = queryPos(view, event);
|
7972
|
-
lastEvent = event;
|
7973
|
-
}
|
8035
|
+
let cur = queryPos(view, event);
|
7974
8036
|
let range = rangeForClick(view, cur.pos, cur.bias, type);
|
7975
8037
|
if (start.pos != cur.pos && !extend) {
|
7976
8038
|
let startRange = rangeForClick(view, start.pos, start.bias, type);
|
@@ -16967,7 +17029,7 @@
|
|
16967
17029
|
*/
|
16968
17030
|
const defaultHighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
16969
17031
|
{ tag: tags.meta,
|
16970
|
-
color: "#
|
17032
|
+
color: "#404740" },
|
16971
17033
|
{ tag: tags.link,
|
16972
17034
|
textDecoration: "underline" },
|
16973
17035
|
{ tag: tags.heading,
|
@@ -17898,7 +17960,7 @@
|
|
17898
17960
|
function extendSel(view, how) {
|
17899
17961
|
let selection = updateSel(view.state.selection, range => {
|
17900
17962
|
let head = how(range);
|
17901
|
-
return EditorSelection.range(range.anchor, head.head, head.goalColumn);
|
17963
|
+
return EditorSelection.range(range.anchor, head.head, head.goalColumn, head.bidiLevel || undefined);
|
17902
17964
|
});
|
17903
17965
|
if (selection.eq(view.state.selection))
|
17904
17966
|
return false;
|
@@ -20091,6 +20153,7 @@
|
|
20091
20153
|
closeOnBlur: true,
|
20092
20154
|
maxRenderedOptions: 100,
|
20093
20155
|
defaultKeymap: true,
|
20156
|
+
tooltipClass: () => "",
|
20094
20157
|
optionClass: () => "",
|
20095
20158
|
aboveCursor: false,
|
20096
20159
|
icons: true,
|
@@ -20101,6 +20164,7 @@
|
|
20101
20164
|
defaultKeymap: (a, b) => a && b,
|
20102
20165
|
closeOnBlur: (a, b) => a && b,
|
20103
20166
|
icons: (a, b) => a && b,
|
20167
|
+
tooltipClass: (a, b) => c => joinClass(a(c), b(c)),
|
20104
20168
|
optionClass: (a, b) => c => joinClass(a(c), b(c)),
|
20105
20169
|
addToOptions: (a, b) => a.concat(b)
|
20106
20170
|
});
|
@@ -20179,14 +20243,17 @@
|
|
20179
20243
|
key: this
|
20180
20244
|
};
|
20181
20245
|
this.space = null;
|
20246
|
+
this.currentClass = "";
|
20182
20247
|
let cState = view.state.field(stateField);
|
20183
20248
|
let { options, selected } = cState.open;
|
20184
20249
|
let config = view.state.facet(completionConfig);
|
20185
20250
|
this.optionContent = optionContent(config);
|
20186
20251
|
this.optionClass = config.optionClass;
|
20252
|
+
this.tooltipClass = config.tooltipClass;
|
20187
20253
|
this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
|
20188
20254
|
this.dom = document.createElement("div");
|
20189
20255
|
this.dom.className = "cm-tooltip-autocomplete";
|
20256
|
+
this.updateTooltipClass(view.state);
|
20190
20257
|
this.dom.addEventListener("mousedown", (e) => {
|
20191
20258
|
for (let dom = e.target, match; dom && dom != this.dom; dom = dom.parentNode) {
|
20192
20259
|
if (dom.nodeName == "LI" && (match = /-(\d+)$/.exec(dom.id)) && +match[1] < options.length) {
|
@@ -20207,12 +20274,25 @@
|
|
20207
20274
|
var _a, _b, _c;
|
20208
20275
|
let cState = update.state.field(this.stateField);
|
20209
20276
|
let prevState = update.startState.field(this.stateField);
|
20277
|
+
this.updateTooltipClass(update.state);
|
20210
20278
|
if (cState != prevState) {
|
20211
20279
|
this.updateSel();
|
20212
20280
|
if (((_a = cState.open) === null || _a === void 0 ? void 0 : _a.disabled) != ((_b = prevState.open) === null || _b === void 0 ? void 0 : _b.disabled))
|
20213
20281
|
this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!((_c = cState.open) === null || _c === void 0 ? void 0 : _c.disabled));
|
20214
20282
|
}
|
20215
20283
|
}
|
20284
|
+
updateTooltipClass(state) {
|
20285
|
+
let cls = this.tooltipClass(state);
|
20286
|
+
if (cls != this.currentClass) {
|
20287
|
+
for (let c of this.currentClass.split(" "))
|
20288
|
+
if (c)
|
20289
|
+
this.dom.classList.remove(c);
|
20290
|
+
for (let c of cls.split(" "))
|
20291
|
+
if (c)
|
20292
|
+
this.dom.classList.add(c);
|
20293
|
+
this.currentClass = cls;
|
20294
|
+
}
|
20295
|
+
}
|
20216
20296
|
positioned(space) {
|
20217
20297
|
this.space = space;
|
20218
20298
|
if (this.info)
|
@@ -20473,13 +20553,13 @@
|
|
20473
20553
|
if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
|
20474
20554
|
active = this.active;
|
20475
20555
|
let open = this.open;
|
20556
|
+
if (open && tr.docChanged)
|
20557
|
+
open = open.map(tr.changes);
|
20476
20558
|
if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
|
20477
20559
|
!sameResults(active, this.active))
|
20478
|
-
open = CompletionDialog.build(active, state, this.id,
|
20560
|
+
open = CompletionDialog.build(active, state, this.id, open, conf);
|
20479
20561
|
else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
|
20480
20562
|
open = null;
|
20481
|
-
else if (open && tr.docChanged)
|
20482
|
-
open = open.map(tr.changes);
|
20483
20563
|
if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
|
20484
20564
|
active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* State.Inactive */) : a);
|
20485
20565
|
for (let effect of tr.effects)
|
@@ -24310,6 +24390,7 @@
|
|
24310
24390
|
let drag = new Drag();
|
24311
24391
|
|
24312
24392
|
document.addEventListener('mousedown', (event) => {
|
24393
|
+
if (event.button !== 0) return
|
24313
24394
|
if (!event.target.classList.contains('col-resizer')) return
|
24314
24395
|
|
24315
24396
|
drag = new Drag();
|
@@ -24366,10 +24447,11 @@
|
|
24366
24447
|
});
|
24367
24448
|
|
24368
24449
|
class ResizeTable extends HTMLTableElement {
|
24369
|
-
constructor (columns, rows, cellRenderer) {
|
24450
|
+
constructor (columns, rows, headerRenderer, cellRenderer) {
|
24370
24451
|
super();
|
24371
24452
|
|
24372
24453
|
this.columns = columns;
|
24454
|
+
this.headerRenderer = headerRenderer;
|
24373
24455
|
this.cellRenderer = cellRenderer;
|
24374
24456
|
|
24375
24457
|
this.style.tableLayout = 'auto';
|
@@ -24408,7 +24490,11 @@
|
|
24408
24490
|
resizerElement.dataset.colId = colElement.dataset.colId;
|
24409
24491
|
contentWrapperElement.appendChild(resizerElement);
|
24410
24492
|
|
24411
|
-
|
24493
|
+
if (headerRenderer) {
|
24494
|
+
nameElement.appendChild(headerRenderer(headerElement, index, column));
|
24495
|
+
} else {
|
24496
|
+
nameElement.innerText = column;
|
24497
|
+
}
|
24412
24498
|
});
|
24413
24499
|
|
24414
24500
|
headerTrElement.appendChild(document.createElement('th'));
|
@@ -24456,8 +24542,6 @@
|
|
24456
24542
|
|
24457
24543
|
containerMutationObserver.resizeObserver = containerResizeObserver;
|
24458
24544
|
containerMutationObserver.containerElement = this.parentElement;
|
24459
|
-
console.log('observing');
|
24460
|
-
console.log(this.parentElement);
|
24461
24545
|
containerMutationObserver.observe(this.parentElement, { childList: true });
|
24462
24546
|
}.bind(this));
|
24463
24547
|
tableResizeObserver.observe(this);
|
@@ -24477,21 +24561,21 @@
|
|
24477
24561
|
this.tbodyElement = tbodyElement;
|
24478
24562
|
|
24479
24563
|
let highlight = false;
|
24480
|
-
rows.forEach(function (row) {
|
24564
|
+
rows.forEach(function (row, rowIndex) {
|
24481
24565
|
const rowElement = document.createElement('tr');
|
24482
24566
|
if (highlight) {
|
24483
24567
|
rowElement.classList.add('highlighted-row');
|
24484
24568
|
}
|
24485
24569
|
highlight = !highlight;
|
24486
24570
|
tbodyElement.appendChild(rowElement);
|
24487
|
-
row.forEach(function (value,
|
24571
|
+
row.forEach(function (value, columnIndex) {
|
24572
|
+
const cellElement = document.createElement('td');
|
24488
24573
|
if (cellRenderer) {
|
24489
|
-
cellRenderer(
|
24574
|
+
cellElement.appendChild(cellRenderer(cellElement, rowIndex, columnIndex, value));
|
24490
24575
|
} else {
|
24491
|
-
const cellElement = document.createElement('td');
|
24492
24576
|
cellElement.innerText = value;
|
24493
|
-
rowElement.appendChild(cellElement);
|
24494
24577
|
}
|
24578
|
+
rowElement.appendChild(cellElement);
|
24495
24579
|
});
|
24496
24580
|
rowElement.appendChild(document.createElement('td'));
|
24497
24581
|
});
|
@@ -24504,9 +24588,99 @@
|
|
24504
24588
|
|
24505
24589
|
customElements.define('resize-table', ResizeTable, { extends: 'table' });
|
24506
24590
|
|
24591
|
+
function styleInject(css, ref) {
|
24592
|
+
if ( ref === void 0 ) ref = {};
|
24593
|
+
var insertAt = ref.insertAt;
|
24594
|
+
|
24595
|
+
if (!css || typeof document === 'undefined') { return; }
|
24596
|
+
|
24597
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
24598
|
+
var style = document.createElement('style');
|
24599
|
+
style.type = 'text/css';
|
24600
|
+
|
24601
|
+
if (insertAt === 'top') {
|
24602
|
+
if (head.firstChild) {
|
24603
|
+
head.insertBefore(style, head.firstChild);
|
24604
|
+
} else {
|
24605
|
+
head.appendChild(style);
|
24606
|
+
}
|
24607
|
+
} else {
|
24608
|
+
head.appendChild(style);
|
24609
|
+
}
|
24610
|
+
|
24611
|
+
if (style.styleSheet) {
|
24612
|
+
style.styleSheet.cssText = css;
|
24613
|
+
} else {
|
24614
|
+
style.appendChild(document.createTextNode(css));
|
24615
|
+
}
|
24616
|
+
}
|
24617
|
+
|
24618
|
+
var css_248z = ".popup_popup-wrapper__huCTg {\n position: absolute;\n background: rgba(0, 0, 0, 0.3);\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.popup_popup-content__iGYws {\n position: absolute;\n top: 50px;\n left: 50px;\n height: calc(100% - 100px);\n width: calc(100% - 100px);\n background: #fff;\n border: 1px solid #888;\n}\n\n.popup_popup-pre__gF3-Q {\n position: absolute;\n top: 40px;\n left: 0;\n height: calc(100% - 112px);\n width: calc(100% - 20px);\n overflow: auto;\n font-size: 18px;\n border-top: 1px solid #ddd;\n border-bottom: 1px solid #ddd;\n margin: 0px;\n padding: 10px;\n background: #fff;\n font-family: monospace;\n}\n\n.popup_popup-pre__gF3-Q:focus {\n outline: none;\n}\n.popup_popup-close__3GBw3 {\n position: absolute;\n right: 20px;\n bottom: 10px;\n width: 100px;\n height: 30px;\n cursor: pointer;\n font-family: Helvetica, sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n color: #333;\n border: 1px solid #888;\n background: #fff;\n}\n\n.popup_popup-close__3GBw3:active {\n background-color: #e6e6e6;\n}\n\n.popup_popup-title__W2N2J {\n position: absolute;\n left: 60px;\n top: 60px;\n font-family: Helvetica, sans-serif;\n font-size: 18px;\n color: #333;\n font-weight: bold;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: calc(100% - 120px);\n}\n";
|
24619
|
+
var styles = {"popup-wrapper":"popup_popup-wrapper__huCTg","popup-content":"popup_popup-content__iGYws","popup-pre":"popup_popup-pre__gF3-Q","popup-close":"popup_popup-close__3GBw3","popup-title":"popup_popup-title__W2N2J"};
|
24620
|
+
styleInject(css_248z);
|
24621
|
+
|
24622
|
+
function createPopup (title, text) {
|
24623
|
+
const wrapperElement = document.createElement('div');
|
24624
|
+
wrapperElement.id = 'popup';
|
24625
|
+
wrapperElement.classList.add(styles['popup-wrapper']);
|
24626
|
+
document.body.appendChild(wrapperElement);
|
24627
|
+
|
24628
|
+
const contentElement = document.createElement('div');
|
24629
|
+
contentElement.classList.add(styles['popup-content']);
|
24630
|
+
wrapperElement.appendChild(contentElement);
|
24631
|
+
|
24632
|
+
const closeElement = document.createElement('input');
|
24633
|
+
closeElement.id = 'popup-close';
|
24634
|
+
closeElement.classList.add(styles['popup-close']);
|
24635
|
+
closeElement.type = 'button';
|
24636
|
+
closeElement.value = 'Close';
|
24637
|
+
contentElement.appendChild(closeElement);
|
24638
|
+
|
24639
|
+
closeElement.addEventListener('click', (event) => {
|
24640
|
+
document.body.removeChild(wrapperElement);
|
24641
|
+
});
|
24642
|
+
|
24643
|
+
const titleElement = document.createElement('div');
|
24644
|
+
titleElement.classList.add(styles['popup-title']);
|
24645
|
+
titleElement.innerText = title;
|
24646
|
+
wrapperElement.appendChild(titleElement);
|
24647
|
+
|
24648
|
+
const preElement = document.createElement('pre');
|
24649
|
+
preElement.id = 'popup-pre';
|
24650
|
+
preElement.classList.add(styles['popup-pre']);
|
24651
|
+
contentElement.appendChild(preElement);
|
24652
|
+
preElement.innerText = text;
|
24653
|
+
|
24654
|
+
wrapperElement.addEventListener('click', () => {
|
24655
|
+
document.body.removeChild(wrapperElement);
|
24656
|
+
});
|
24657
|
+
|
24658
|
+
contentElement.addEventListener('click', (event) => {
|
24659
|
+
event.stopPropagation();
|
24660
|
+
});
|
24661
|
+
|
24662
|
+
closeElement.focus();
|
24663
|
+
}
|
24664
|
+
|
24665
|
+
document.addEventListener('keydown', (event) => {
|
24666
|
+
if (event.code === 'Escape') {
|
24667
|
+
const wrapperElement = document.getElementById('popup');
|
24668
|
+
if (wrapperElement) {
|
24669
|
+
event.preventDefault();
|
24670
|
+
document.body.removeChild(wrapperElement);
|
24671
|
+
}
|
24672
|
+
} else if (event.code === 'Tab') {
|
24673
|
+
const wrapperElement = document.getElementById('popup');
|
24674
|
+
if (wrapperElement) {
|
24675
|
+
event.preventDefault();
|
24676
|
+
document.getElementById('popup-close').focus();
|
24677
|
+
}
|
24678
|
+
}
|
24679
|
+
});
|
24680
|
+
|
24507
24681
|
/* global google */
|
24508
24682
|
|
24509
|
-
const PAGE_SIZE =
|
24683
|
+
const PAGE_SIZE = 100;
|
24510
24684
|
|
24511
24685
|
function getSqlFromUrl (url) {
|
24512
24686
|
const params = url.searchParams;
|
@@ -24526,15 +24700,18 @@
|
|
24526
24700
|
}
|
24527
24701
|
|
24528
24702
|
function init (parent, onSubmit, onShiftSubmit) {
|
24529
|
-
|
24530
|
-
|
24531
|
-
|
24532
|
-
|
24533
|
-
|
24534
|
-
|
24703
|
+
addEventListener('#query-tab-button', 'click', (event) => selectTab(event, 'query'));
|
24704
|
+
addEventListener('#saved-tab-button', 'click', (event) => selectTab(event, 'saved'));
|
24705
|
+
addEventListener('#structure-tab-button', 'click', (event) => selectTab(event, 'structure'));
|
24706
|
+
addEventListener('#graph-tab-button', 'click', (event) => selectTab(event, 'graph'));
|
24707
|
+
addEventListener('#cancel-button', 'click', () => clearResult());
|
24708
|
+
|
24709
|
+
addEventListener('#query-box', 'click', () => {
|
24710
|
+
focus();
|
24711
|
+
});
|
24535
24712
|
const dropdownContent = document.getElementById('submit-dropdown-content');
|
24536
24713
|
const dropdownButton = document.getElementById('submit-dropdown-button');
|
24537
|
-
|
24714
|
+
addEventListener(dropdownButton, 'click', () => dropdownContent.classList.toggle('submit-dropdown-content-show'));
|
24538
24715
|
|
24539
24716
|
const isMac = navigator.userAgent.includes('Mac');
|
24540
24717
|
const runCurrentLabel = `run selection (${isMac ? '⌘' : 'Ctrl'}-Enter)`;
|
@@ -24542,54 +24719,68 @@
|
|
24542
24719
|
|
24543
24720
|
const submitButtonCurrent = document.getElementById('submit-button-current');
|
24544
24721
|
submitButtonCurrent.value = runCurrentLabel;
|
24545
|
-
|
24722
|
+
addEventListener(submitButtonCurrent, 'click', (event) => submitCurrent(event.target, event));
|
24546
24723
|
|
24547
24724
|
const submitButtonAll = document.getElementById('submit-button-all');
|
24548
24725
|
submitButtonAll.value = runAllLabel;
|
24549
|
-
|
24726
|
+
addEventListener(submitButtonAll, 'click', (event) => submitAll(event.target, event));
|
24550
24727
|
|
24551
24728
|
const dropdownButtonCurrent = document.getElementById('submit-dropdown-button-current');
|
24552
24729
|
dropdownButtonCurrent.value = runCurrentLabel;
|
24553
|
-
|
24730
|
+
addEventListener(dropdownButtonCurrent, 'click', (event) => submitCurrent(event.target, event));
|
24554
24731
|
|
24555
24732
|
const dropdownAllButton = document.getElementById('submit-dropdown-button-all');
|
24556
24733
|
dropdownAllButton.value = runAllLabel;
|
24557
|
-
|
24734
|
+
addEventListener(dropdownAllButton, 'click', (event) => submitAll(event.target, event));
|
24558
24735
|
|
24559
24736
|
const dropdownToggleButton = document.getElementById('submit-dropdown-button-toggle');
|
24560
|
-
|
24737
|
+
addEventListener(dropdownToggleButton, 'click', () => {
|
24561
24738
|
submitButtonCurrent.classList.toggle('submit-button-show');
|
24562
24739
|
submitButtonAll.classList.toggle('submit-button-show');
|
24563
24740
|
focus(getSelection());
|
24564
24741
|
});
|
24565
24742
|
|
24566
|
-
|
24743
|
+
addEventListener('#submit-dropdown-button-copy-csv', 'click', () => {
|
24567
24744
|
if (window.sqlFetch?.result) {
|
24568
24745
|
copyTextToClipboard(toCsv(window.sqlFetch.result.columns, window.sqlFetch.result.rows));
|
24569
24746
|
}
|
24570
24747
|
});
|
24571
|
-
|
24748
|
+
addEventListener('#submit-dropdown-button-copy-tsv', 'click', () => {
|
24572
24749
|
if (window.sqlFetch?.result) {
|
24573
24750
|
copyTextToClipboard(toTsv(window.sqlFetch.result.columns, window.sqlFetch.result.rows));
|
24574
24751
|
}
|
24575
24752
|
});
|
24576
|
-
|
24753
|
+
addEventListener('#first-button', 'click', () => {
|
24577
24754
|
window.sqlFetch.page = 0;
|
24578
24755
|
displaySqlFetch(window.sqlFetch);
|
24579
24756
|
});
|
24580
|
-
|
24757
|
+
addEventListener('#prev-button', 'click', () => {
|
24581
24758
|
window.sqlFetch.page -= 1;
|
24582
24759
|
displaySqlFetch(window.sqlFetch);
|
24583
24760
|
});
|
24584
|
-
|
24761
|
+
document.querySelectorAll('.jump-button').forEach((button) => {
|
24762
|
+
addEventListener(button, 'click', (event) => {
|
24763
|
+
const jump = parseInt(event.target.dataset.jump);
|
24764
|
+
let page = 1 + window.sqlFetch.page;
|
24765
|
+
if (jump < 0) {
|
24766
|
+
page -= (page % jump) === 0 ? Math.abs(jump) : page % jump;
|
24767
|
+
} else {
|
24768
|
+
page += jump;
|
24769
|
+
page -= page % jump;
|
24770
|
+
}
|
24771
|
+
window.sqlFetch.page = Math.max(0, Math.min(window.sqlFetch.pageCount - 1, page - 1));
|
24772
|
+
displaySqlFetch(window.sqlFetch);
|
24773
|
+
});
|
24774
|
+
});
|
24775
|
+
addEventListener('#next-button', 'click', () => {
|
24585
24776
|
window.sqlFetch.page += 1;
|
24586
24777
|
displaySqlFetch(window.sqlFetch);
|
24587
24778
|
});
|
24588
|
-
|
24779
|
+
addEventListener('#last-button', 'click', () => {
|
24589
24780
|
window.sqlFetch.page = window.sqlFetch.pageCount - 1;
|
24590
24781
|
displaySqlFetch(window.sqlFetch);
|
24591
24782
|
});
|
24592
|
-
|
24783
|
+
addEventListener('#submit-dropdown-button-download-csv', 'click', () => {
|
24593
24784
|
if (!window.sqlFetch?.result) return
|
24594
24785
|
|
24595
24786
|
const url = new URL(window.location);
|
@@ -24605,21 +24796,26 @@
|
|
24605
24796
|
focus(getSelection());
|
24606
24797
|
});
|
24607
24798
|
|
24608
|
-
|
24799
|
+
addEventListener(document, 'click', (event) => {
|
24609
24800
|
if (event.target !== dropdownButton) {
|
24610
24801
|
dropdownContent.classList.remove('submit-dropdown-content-show');
|
24611
24802
|
}
|
24612
24803
|
});
|
24613
|
-
|
24804
|
+
addEventListener(dropdownContent, 'focusout', (event) => {
|
24614
24805
|
if (!dropdownContent.contains(event.relatedTarget)) {
|
24615
24806
|
dropdownContent.classList.remove('submit-dropdown-content-show');
|
24616
24807
|
}
|
24617
24808
|
});
|
24809
|
+
|
24618
24810
|
window.editorView = createEditor(parent, window.metadata, onSubmit, onShiftSubmit);
|
24619
24811
|
}
|
24620
24812
|
|
24621
|
-
function
|
24622
|
-
|
24813
|
+
function addEventListener (elementOrSelector, type, func) {
|
24814
|
+
if (typeof elementOrSelector === 'string') {
|
24815
|
+
document.querySelector(elementOrSelector).addEventListener(type, func);
|
24816
|
+
} else {
|
24817
|
+
elementOrSelector.addEventListener(type, func);
|
24818
|
+
}
|
24623
24819
|
}
|
24624
24820
|
|
24625
24821
|
function getSelection () {
|
@@ -24651,9 +24847,9 @@
|
|
24651
24847
|
});
|
24652
24848
|
}
|
24653
24849
|
|
24654
|
-
function focus (selection) {
|
24850
|
+
function focus (selection = null) {
|
24655
24851
|
window.editorView.focus();
|
24656
|
-
setSelection(selection);
|
24852
|
+
if (selection) setSelection(selection);
|
24657
24853
|
}
|
24658
24854
|
|
24659
24855
|
function getValue () {
|
@@ -24838,13 +25034,11 @@
|
|
24838
25034
|
}
|
24839
25035
|
rows.push(row);
|
24840
25036
|
}
|
24841
|
-
const cellRenderer = function (
|
24842
|
-
const cellElement = document.createElement('td');
|
25037
|
+
const cellRenderer = function (cellElement, _rowIndex, _columnIndex, value) {
|
24843
25038
|
cellElement.style.textAlign = (typeof value) === 'string' ? 'left' : 'right';
|
24844
|
-
|
24845
|
-
rowElement.appendChild(cellElement);
|
25039
|
+
return document.createTextNode(value)
|
24846
25040
|
};
|
24847
|
-
columnsElement.appendChild(new ResizeTable(columns, rows, cellRenderer));
|
25041
|
+
columnsElement.appendChild(new ResizeTable(columns, rows, null, cellRenderer));
|
24848
25042
|
}
|
24849
25043
|
|
24850
25044
|
const indexEntries = Object.entries(table.indexes);
|
@@ -24864,13 +25058,11 @@
|
|
24864
25058
|
rows.push(row);
|
24865
25059
|
}
|
24866
25060
|
}
|
24867
|
-
const cellRenderer = function (
|
24868
|
-
const cellElement = document.createElement('td');
|
25061
|
+
const cellRenderer = function (cellElement, _rowIndex, _columnIndex, value) {
|
24869
25062
|
cellElement.style.textAlign = (typeof value) === 'string' ? 'left' : 'right';
|
24870
|
-
|
24871
|
-
rowElement.appendChild(cellElement);
|
25063
|
+
return document.createTextNode(value)
|
24872
25064
|
};
|
24873
|
-
indexesElement.appendChild(new ResizeTable(columns, rows, cellRenderer));
|
25065
|
+
indexesElement.appendChild(new ResizeTable(columns, rows, null, cellRenderer));
|
24874
25066
|
}
|
24875
25067
|
});
|
24876
25068
|
window.structureLoaded = true;
|
@@ -24921,7 +25113,7 @@
|
|
24921
25113
|
viewLinkElement.classList.add('view-link');
|
24922
25114
|
viewLinkElement.innerText = 'view';
|
24923
25115
|
viewLinkElement.href = viewUrl.pathname + viewUrl.search;
|
24924
|
-
|
25116
|
+
addEventListener(viewLinkElement, 'click', (event) => {
|
24925
25117
|
clearResult();
|
24926
25118
|
route(event.target, event, viewUrl, true);
|
24927
25119
|
});
|
@@ -24935,7 +25127,7 @@
|
|
24935
25127
|
runLinkElement.classList.add('run-link');
|
24936
25128
|
runLinkElement.innerText = 'run';
|
24937
25129
|
runLinkElement.href = runUrl.pathname + runUrl.search;
|
24938
|
-
|
25130
|
+
addEventListener(runLinkElement, 'click', (event) => {
|
24939
25131
|
clearResult();
|
24940
25132
|
route(event.target, event, viewUrl, true);
|
24941
25133
|
route(event.target, event, runUrl, true);
|
@@ -25111,6 +25303,9 @@
|
|
25111
25303
|
}
|
25112
25304
|
}
|
25113
25305
|
displaySqlFetch(sqlFetch);
|
25306
|
+
}).catch(function (error) {
|
25307
|
+
setSqlFetchError(sqlFetch, error);
|
25308
|
+
displaySqlFetch(sqlFetch);
|
25114
25309
|
});
|
25115
25310
|
} else {
|
25116
25311
|
response.text().then((result) => {
|
@@ -25118,20 +25313,28 @@
|
|
25118
25313
|
sqlFetch.errorMessage = 'failed to execute query';
|
25119
25314
|
sqlFetch.errorDetails = result;
|
25120
25315
|
displaySqlFetch(sqlFetch);
|
25316
|
+
}).catch(function (error) {
|
25317
|
+
setSqlFetchError(sqlFetch, error);
|
25318
|
+
displaySqlFetch(sqlFetch);
|
25121
25319
|
});
|
25122
25320
|
}
|
25123
25321
|
})
|
25124
25322
|
.catch(function (error) {
|
25125
|
-
|
25126
|
-
sqlFetch.endedAt = window.performance.now();
|
25127
|
-
sqlFetch.state = 'error';
|
25128
|
-
sqlFetch.errorMessage = 'failed to execute query';
|
25129
|
-
sqlFetch.errorDetails = error;
|
25130
|
-
}
|
25323
|
+
setSqlFetchError(sqlFetch, error);
|
25131
25324
|
displaySqlFetch(sqlFetch);
|
25132
25325
|
});
|
25133
25326
|
}
|
25134
25327
|
|
25328
|
+
function setSqlFetchError (sqlFetch, error) {
|
25329
|
+
// Ignore the error unless pending since the error may be the result of aborting.
|
25330
|
+
if (sqlFetch.state === 'pending') {
|
25331
|
+
sqlFetch.endedAt = window.performance.now();
|
25332
|
+
sqlFetch.state = 'error';
|
25333
|
+
sqlFetch.errorMessage = 'failed to execute query';
|
25334
|
+
sqlFetch.errorDetails = error;
|
25335
|
+
}
|
25336
|
+
}
|
25337
|
+
|
25135
25338
|
function parseSqlVariables (params) {
|
25136
25339
|
return Object.fromEntries(
|
25137
25340
|
Array.from(params).filter(([key]) => {
|
@@ -25253,10 +25456,17 @@
|
|
25253
25456
|
return abbrElement
|
25254
25457
|
};
|
25255
25458
|
|
25256
|
-
const resultCellRenderer = function (
|
25459
|
+
const resultCellRenderer = function (cellElement, rowIndex, columnIndex, value) {
|
25257
25460
|
const column = window.sqlFetch.result.columns[columnIndex];
|
25258
25461
|
const columnType = window.sqlFetch.result.column_types[columnIndex];
|
25259
25462
|
|
25463
|
+
cellElement.dataset.column = columnIndex.toString();
|
25464
|
+
cellElement.dataset.row = rowIndex.toString();
|
25465
|
+
|
25466
|
+
if (typeof value === 'string' && value.indexOf('\n') >= 0) {
|
25467
|
+
value = value.replaceAll('\n', '¶');
|
25468
|
+
}
|
25469
|
+
|
25260
25470
|
if (value && window.metadata.columns[column]?.links?.length > 0) {
|
25261
25471
|
const linksElement = document.createElement('div');
|
25262
25472
|
window.metadata.columns[column].links.forEach((link) => {
|
@@ -25273,17 +25483,22 @@
|
|
25273
25483
|
wrapperElement.appendChild(linksElement);
|
25274
25484
|
wrapperElement.appendChild(textElement);
|
25275
25485
|
|
25276
|
-
|
25277
|
-
columnElement.appendChild(wrapperElement);
|
25278
|
-
rowElement.appendChild(columnElement);
|
25486
|
+
return wrapperElement
|
25279
25487
|
} else {
|
25280
|
-
const cellElement = document.createElement('td');
|
25281
25488
|
cellElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
|
25282
|
-
|
25283
|
-
rowElement.appendChild(cellElement);
|
25489
|
+
return document.createTextNode(value)
|
25284
25490
|
}
|
25285
25491
|
};
|
25286
25492
|
|
25493
|
+
function resultHeaderRenderer (headerElement, columnIndex, value) {
|
25494
|
+
headerElement.dataset.column = columnIndex.toString();
|
25495
|
+
|
25496
|
+
if (typeof value === 'string' && value.indexOf('\n') >= 0) {
|
25497
|
+
value = value.replaceAll('\n', '¶');
|
25498
|
+
}
|
25499
|
+
return document.createTextNode(value)
|
25500
|
+
}
|
25501
|
+
|
25287
25502
|
function displaySqlFetchInResultTab (fetch) {
|
25288
25503
|
if (fetch.state === 'pending' || fetch.spinner === 'always') {
|
25289
25504
|
clearResultBox();
|
@@ -25333,13 +25548,45 @@
|
|
25333
25548
|
} else {
|
25334
25549
|
clearResultBox();
|
25335
25550
|
const resultBoxElement = document.getElementById('result-box');
|
25336
|
-
tableElement = new ResizeTable(fetch.result.columns, rows, resultCellRenderer);
|
25551
|
+
tableElement = new ResizeTable(fetch.result.columns, rows, resultHeaderRenderer, resultCellRenderer);
|
25337
25552
|
tableElement.id = 'result-table';
|
25553
|
+
registerTableCellPopup(tableElement);
|
25338
25554
|
resultBoxElement.appendChild(tableElement);
|
25339
25555
|
}
|
25340
25556
|
tableElement.setAttribute('data-page', fetch.page);
|
25341
25557
|
}
|
25342
25558
|
|
25559
|
+
function registerTableCellPopup (tableElement) {
|
25560
|
+
const listener = (event) => {
|
25561
|
+
if (event.which === 1 && event.detail === 2) {
|
25562
|
+
let node = event.target;
|
25563
|
+
while (!['td', 'th', 'table'].includes(node.tagName.toLowerCase()) && node.parentNode) {
|
25564
|
+
node = node.parentNode;
|
25565
|
+
}
|
25566
|
+
if (node.tagName.toLowerCase() === 'td') {
|
25567
|
+
if (event.type === 'mousedown') {
|
25568
|
+
const row = parseInt(node.dataset.row);
|
25569
|
+
const column = parseInt(node.dataset.column);
|
25570
|
+
const title = window.sqlFetch.result.columns[column].replaceAll('\n', '¶');
|
25571
|
+
createPopup(title, window.sqlFetch.result.rows[row][column]);
|
25572
|
+
}
|
25573
|
+
event.preventDefault();
|
25574
|
+
} else if (node.tagName.toLowerCase() === 'th') {
|
25575
|
+
if (event.type === 'mousedown') {
|
25576
|
+
const column = parseInt(node.dataset.column);
|
25577
|
+
const value = window.sqlFetch.result.columns[column];
|
25578
|
+
const title = value.replaceAll('\n', '¶');
|
25579
|
+
createPopup(title, value);
|
25580
|
+
}
|
25581
|
+
event.preventDefault();
|
25582
|
+
}
|
25583
|
+
}
|
25584
|
+
};
|
25585
|
+
// We only open the popup on mouseup but we need to preventDefault on mousedown to avoid the clicked text from
|
25586
|
+
// being highlighted.
|
25587
|
+
addEventListener(tableElement, 'mouseup', listener);
|
25588
|
+
addEventListener(tableElement, 'mousedown', listener);
|
25589
|
+
}
|
25343
25590
|
function disableDownloadButtons () {
|
25344
25591
|
document.getElementById('submit-dropdown-button-download-csv').classList.add('disabled');
|
25345
25592
|
document.getElementById('submit-dropdown-button-copy-csv').classList.add('disabled');
|
@@ -25370,15 +25617,10 @@
|
|
25370
25617
|
}
|
25371
25618
|
|
25372
25619
|
function displaySqlFetchError (message, details) {
|
25373
|
-
let statusMessage = 'error: ' + message;
|
25374
|
-
if (statusMessage.length > 90) {
|
25375
|
-
statusMessage = statusMessage.substring(0, 90) + '…';
|
25376
|
-
}
|
25377
25620
|
if (details) {
|
25378
|
-
console.log(
|
25379
|
-
statusMessage += ' (check console)';
|
25621
|
+
console.log(details);
|
25380
25622
|
}
|
25381
|
-
setStatus(
|
25623
|
+
setStatus(message);
|
25382
25624
|
}
|
25383
25625
|
|
25384
25626
|
function clearSpinner () {
|
@@ -25486,14 +25728,14 @@
|
|
25486
25728
|
const elapsed = Math.round(100 * (sqlFetch.getDuration() / 1000.0)) / 100;
|
25487
25729
|
|
25488
25730
|
let message;
|
25489
|
-
if (result.
|
25490
|
-
message =
|
25731
|
+
if (result.rows.length === 1) {
|
25732
|
+
message = `1 row returned after ${elapsed}s`;
|
25491
25733
|
} else {
|
25492
|
-
message = `${result.
|
25734
|
+
message = `${result.rows.length.toLocaleString()} rows returned after ${elapsed}s`;
|
25493
25735
|
}
|
25494
25736
|
|
25495
25737
|
if (result.total_rows > result.rows.length) {
|
25496
|
-
message += ` (truncated
|
25738
|
+
message += ` (truncated from ${result.total_rows.toLocaleString()})`;
|
25497
25739
|
}
|
25498
25740
|
setStatus(message);
|
25499
25741
|
|
@@ -25515,6 +25757,18 @@
|
|
25515
25757
|
document.getElementById('last-button').style.display = 'none';
|
25516
25758
|
document.getElementById('first-button').style.display = 'none';
|
25517
25759
|
}
|
25760
|
+
|
25761
|
+
document.querySelectorAll('.jump-button').forEach((button) => {
|
25762
|
+
const jump = parseInt(button.dataset.jump);
|
25763
|
+
if (jump < 0) {
|
25764
|
+
button.disabled = sqlFetch.page === 0;
|
25765
|
+
} else {
|
25766
|
+
button.disabled = sqlFetch.page === sqlFetch.pageCount - 1;
|
25767
|
+
}
|
25768
|
+
const min = button.dataset.min ? parseInt(button.dataset.min) : 0;
|
25769
|
+
const max = button.dataset.max ? parseInt(button.dataset.max) : Infinity;
|
25770
|
+
button.style.display = sqlFetch.pageCount >= min && sqlFetch.pageCount <= max ? '' : 'none';
|
25771
|
+
});
|
25518
25772
|
}
|
25519
25773
|
|
25520
25774
|
window.addEventListener('popstate', function (event) {
|