sqlite-wasm-viewer 1.0.5 → 1.0.7
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.
|
@@ -13,8 +13,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
|
|
|
13
13
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
14
14
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
15
15
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
16
|
+
var EXPANDED_EXPLORER_ITEMS_KEY = 'expanded_explorer_items';
|
|
16
17
|
var ExplorerView = /*#__PURE__*/function () {
|
|
17
18
|
function ExplorerView(rootEl) {
|
|
19
|
+
var _localStorage$getItem;
|
|
18
20
|
_classCallCheck(this, ExplorerView);
|
|
19
21
|
_defineProperty(this, "expandedItems", {});
|
|
20
22
|
_defineProperty(this, "selectedItem", null);
|
|
@@ -26,60 +28,102 @@ var ExplorerView = /*#__PURE__*/function () {
|
|
|
26
28
|
this.containerEl = document.createElement('div');
|
|
27
29
|
this.containerEl.id = 'explorer_tree';
|
|
28
30
|
rootEl.appendChild(this.containerEl);
|
|
31
|
+
this.expandedItems = JSON.parse((_localStorage$getItem = localStorage.getItem(EXPANDED_EXPLORER_ITEMS_KEY)) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : '{}');
|
|
29
32
|
}
|
|
30
33
|
_createClass(ExplorerView, [{
|
|
31
34
|
key: "addDatabaseItem",
|
|
32
35
|
value: function addDatabaseItem(databaseItem) {
|
|
33
36
|
this.dbs.push(databaseItem);
|
|
34
|
-
this.
|
|
37
|
+
this.buildDom();
|
|
35
38
|
if (this.selectedItem === null) {
|
|
36
|
-
var firstTable = document.querySelector('#explorer_tree
|
|
39
|
+
var firstTable = document.querySelector('#explorer_tree .table');
|
|
37
40
|
if (firstTable) {
|
|
38
41
|
this.selectTable(firstTable, databaseItem);
|
|
39
42
|
}
|
|
40
43
|
}
|
|
41
44
|
}
|
|
42
45
|
}, {
|
|
43
|
-
key: "
|
|
44
|
-
value: function
|
|
46
|
+
key: "buildDom",
|
|
47
|
+
value: function buildDom() {
|
|
45
48
|
var _this = this;
|
|
49
|
+
this.containerEl.innerHTML = '';
|
|
50
|
+
this.dbs.forEach(function (db) {
|
|
51
|
+
_this.buildDbGroupDom(db);
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
}, {
|
|
55
|
+
key: "buildDbGroupDom",
|
|
56
|
+
value: function buildDbGroupDom(db) {
|
|
57
|
+
var _this2 = this;
|
|
46
58
|
var dbRoot = document.createDocumentFragment();
|
|
47
59
|
var dbItem = document.createElement('div');
|
|
48
|
-
dbItem.innerText =
|
|
60
|
+
dbItem.innerText = db.filename;
|
|
49
61
|
dbItem.className = 'db';
|
|
62
|
+
var tablesContainer = document.createElement('div');
|
|
63
|
+
var isExpanded = !(this.expandedItems[db.filename] === false);
|
|
64
|
+
this.buildExpandArrowDom(dbItem, tablesContainer, db, isExpanded);
|
|
65
|
+
dbRoot.appendChild(dbItem);
|
|
66
|
+
db.tables.forEach(function (table) {
|
|
67
|
+
_this2.buildTableDom(tablesContainer, table, db);
|
|
68
|
+
});
|
|
69
|
+
tablesContainer.style.display = isExpanded ? 'block' : 'none';
|
|
70
|
+
dbRoot.appendChild(tablesContainer);
|
|
71
|
+
this.containerEl.appendChild(dbRoot);
|
|
72
|
+
}
|
|
73
|
+
}, {
|
|
74
|
+
key: "buildExpandArrowDom",
|
|
75
|
+
value: function buildExpandArrowDom(itemElem, tablesContainer, db, isExpanded) {
|
|
76
|
+
var _this3 = this;
|
|
50
77
|
var expandArrow = document.createElement('div');
|
|
51
78
|
expandArrow.className = 'expand';
|
|
52
79
|
expandArrow.innerText = '>';
|
|
53
80
|
expandArrow.style.cursor = 'pointer';
|
|
81
|
+
if (isExpanded) {
|
|
82
|
+
expandArrow.classList.add('expanded');
|
|
83
|
+
}
|
|
54
84
|
expandArrow.onclick = function () {
|
|
55
|
-
|
|
85
|
+
_this3.expandedItems[db.filename] = !_this3.expandedItems[db.filename];
|
|
86
|
+
|
|
87
|
+
// eslint-disable-next-line no-param-reassign
|
|
88
|
+
tablesContainer.style.display = _this3.expandedItems[db.filename] ? 'block' : 'none';
|
|
56
89
|
expandArrow.classList.toggle('expanded');
|
|
90
|
+
localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this3.expandedItems));
|
|
57
91
|
};
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
92
|
+
itemElem.appendChild(expandArrow);
|
|
93
|
+
}
|
|
94
|
+
}, {
|
|
95
|
+
key: "buildTableDom",
|
|
96
|
+
value: function buildTableDom(tablesContainer, tableName, db) {
|
|
97
|
+
var _this4 = this,
|
|
98
|
+
_this$selectedItem,
|
|
99
|
+
_this$selectedItem2;
|
|
100
|
+
var tableItem = document.createElement('div');
|
|
101
|
+
tableItem.className = 'table';
|
|
102
|
+
tableItem.onclick = function () {
|
|
103
|
+
_this4.selectTable(tableItem, db);
|
|
104
|
+
};
|
|
105
|
+
if (((_this$selectedItem = this.selectedItem) === null || _this$selectedItem === void 0 ? void 0 : _this$selectedItem.tableName) === tableName && ((_this$selectedItem2 = this.selectedItem) === null || _this$selectedItem2 === void 0 ? void 0 : _this$selectedItem2.dbName) === db.filename) {
|
|
106
|
+
this.selectedItem.tableElem = tableItem;
|
|
107
|
+
tableItem.classList.add('selected');
|
|
108
|
+
}
|
|
109
|
+
var tableItemInner = document.createElement('div');
|
|
110
|
+
tableItemInner.innerText = tableName;
|
|
111
|
+
tableItem.appendChild(tableItemInner);
|
|
112
|
+
tablesContainer.appendChild(tableItem);
|
|
73
113
|
}
|
|
74
114
|
}, {
|
|
75
115
|
key: "selectTable",
|
|
76
116
|
value: function selectTable(tableEl, databaseItem) {
|
|
77
117
|
if (tableEl) {
|
|
78
|
-
var _this$
|
|
118
|
+
var _this$selectedItem3;
|
|
79
119
|
var tableName = tableEl.innerText;
|
|
80
|
-
(_this$
|
|
120
|
+
(_this$selectedItem3 = this.selectedItem) === null || _this$selectedItem3 === void 0 ? void 0 : _this$selectedItem3.tableElem.classList.remove('selected');
|
|
81
121
|
tableEl.classList.add('selected');
|
|
82
|
-
this.selectedItem =
|
|
122
|
+
this.selectedItem = {
|
|
123
|
+
dbName: databaseItem.filename,
|
|
124
|
+
tableName: tableEl.innerText,
|
|
125
|
+
tableElem: tableEl
|
|
126
|
+
};
|
|
83
127
|
var databasePath = databaseItem.filename;
|
|
84
128
|
_viewerState.ViewerState.instance.setSelectedTable({
|
|
85
129
|
tableName: tableName,
|
|
@@ -16,24 +16,24 @@
|
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: 0;
|
|
18
18
|
left: -15px;
|
|
19
|
-
transition: all .
|
|
19
|
+
transition: all .1s ease-in;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
#explorer_tree .expanded {
|
|
23
23
|
transform: rotate(90deg);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
#explorer_tree
|
|
26
|
+
#explorer_tree .table {
|
|
27
27
|
margin-left: 20px;
|
|
28
28
|
height: 20px;
|
|
29
29
|
cursor: pointer;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
#explorer_tree
|
|
32
|
+
#explorer_tree .table > div {
|
|
33
33
|
text-overflow: ellipsis;
|
|
34
34
|
overflow-x: hidden;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
#explorer_tree
|
|
37
|
+
#explorer_tree .table.selected {
|
|
38
38
|
background-color: rgb(128, 128, 128);
|
|
39
39
|
}
|