Skip to content

Commit 9ffcd7c

Browse files
igorlogiusigorlogius
committed
fix(#18,#19): external cell editor is automatically depending on value size
1 parent fe56e08 commit 9ffcd7c

File tree

4 files changed

+128
-67
lines changed

4 files changed

+128
-67
lines changed

‎sources/localstorage-editor/background.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ browser.browserAction.setPopup({
2222
browser.browserAction.onClicked.addListener(async (tab, clickData) => {
2323
if (clickData.button === 1) {
2424
browser.windows.create({
25-
height: 460,
25+
height: 640,
2626
width: 840,
2727
titlePreface: new URL(tab.url).hostname,
2828
type: "popup",

‎sources/localstorage-editor/popup.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ body {
22
background: lightgray;
33
min-width: 640px;
44
min-height: 480px;
5-
padding: 3px;
5+
padding: 0px;
6+
overflow: hidden;
67
}
78

89
button {

‎sources/localstorage-editor/popup.html‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,39 @@
77
<body>
88
<dialog id="editDialog" style="width: 99%; height: 99%">
99
<form>
10-
<div style="float: right">
11-
<button value="cancel" formmethod="dialog">Discard</button>
12-
<button id="confirmBtn" value="default">Save</button>
13-
</div>
10+
<fieldset>
11+
<div style="float: right">
12+
<button value="cancel" formmethod="dialog">Discard</button>
13+
<button id="confirmBtn" value="default">Save</button>
14+
</div>
1415

15-
<p>
16-
<label>
17-
Storage:
18-
<select disabled>
19-
<option value="Local">Local</option>
20-
<option value="Session">Session</option>
21-
</select>
22-
</label>
23-
</p>
16+
<p>
17+
<label>
18+
Storage:
19+
<select disabled>
20+
<option value="Local">Local</option>
21+
<option value="Session">Session</option>
22+
</select>
23+
</label>
24+
</p>
2425

25-
<p>
26-
<label>
27-
Key:
28-
<input style="width: 100%" value="" disabled />
29-
</label>
30-
</p>
26+
<p>
27+
<label>
28+
Key:
29+
<input style="width: 100%" value="" disabled />
30+
</label>
31+
</p>
3132

32-
<p>
33-
<label>
34-
Value:
35-
<textarea
36-
style="width: 100%; min-height: 20em; height: 100%"
37-
spellcheck="false"
38-
></textarea>
39-
</label>
40-
</p>
33+
<p>
34+
<label>
35+
Value:
36+
<textarea
37+
style="width: 100%; height: 380px"
38+
spellcheck="false"
39+
></textarea>
40+
</label>
41+
</p>
42+
</fieldset>
4143
</form>
4244
</dialog>
4345

@@ -57,7 +59,7 @@
5759
<fieldset>
5860
<div id="log"></div>
5961
</fieldset>
60-
<div id="mainTable" border="0" style="width: 98%"></div>
62+
<div id="mainTable" border="0" style="width: 99%"></div>
6163
<fieldset>
6264
<div id="tip"></div>
6365
</fieldset>

‎sources/localstorage-editor/popup.js‎

Lines changed: 94 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -329,12 +329,30 @@ var uniqueKey = function (cell, value, parameters) {
329329

330330
/*
331331
//custom formatter definition
332-
var printIcon = function (cell, formatterParams, onRendered) {
332+
var editValueButton = function (cell, formatterParams, onRendered) {
333333
//plain text value
334-
return "<i class='fa fa-print'></i>";
334+
//return "<i class='fa fa-print'></i>";
335+
return '<button title="open value edit view">&#9998;</button>';
336+
};
337+
338+
339+
var editValueTextarea = function (cell, formatterParams, onRendered) {
340+
//plain text value
341+
//return "<i class='fa fa-print'></i>";
342+
const lines = cell.getValue().split(/\r\n|\r|\n/);
343+
if (lines.length < 10) {
344+
return cell.getValue().replaceAll(/\r\n|\r|\n/g,"");
345+
}
346+
return cell.getValue();
335347
};
336348
*/
337349

350+
var editCheck = function (cell) {
351+
//cell - the cell component for the editable cell
352+
const lines = cell.getValue().split(/\r\n|\r|\n/);
353+
return lines.length < 10;
354+
};
355+
338356
async function onDOMContentLoaded() {
339357
if (isNaN(TABID)) {
340358
TABID = (await browser.tabs.query({ currentWindow: true, active: true }))[0]
@@ -345,18 +363,25 @@ async function onDOMContentLoaded() {
345363

346364
table = new Tabulator("#mainTable", {
347365
autoColumns: true,
348-
/*height: "460px",*/
366+
height: "460px",
349367
//virtualDomBuffer:99999, //set virtual DOM buffer to 300px
350368
//renderVertical:"basic", //disable virtual DOM rendering
351369
//virtualDom:false, // also disable virtual DOM rending ??? wtf
352-
height: "100%",
353-
maxHeight: "100%",
370+
//renderVertical:"basic", //disable virtual DOM rendering
371+
//maxheight: "50em",
372+
//maxHeight: "100%",
354373
//virtualDom: false,
374+
//resizableRowGuide:true,
375+
//resizableColumnGuide:true,
376+
columnDefaults: {
377+
resizable: false,
378+
},
355379
placeholder: "No items found",
356380
layout: "fitDataStretch",
357381
pagination: false,
358382
movableRows: true,
359383
validationMode: "highlight",
384+
headerSortClickElement: "icon",
360385
initialSort: [
361386
{ column: "key", dir: "asc" },
362387
{ column: "store", dir: "asc" },
@@ -369,6 +394,7 @@ async function onDOMContentLoaded() {
369394
frozen: true,
370395
width: 30,
371396
minWidth: 30,
397+
headerSort: false,
372398
},
373399
{
374400
formatter: "rowSelection",
@@ -413,6 +439,7 @@ async function onDOMContentLoaded() {
413439
{
414440
title: "Key",
415441
field: "key",
442+
headerSort: true,
416443
validator: [
417444
"required",
418445
{
@@ -450,18 +477,54 @@ async function onDOMContentLoaded() {
450477
},
451478
},
452479

480+
{
481+
title: "Value",
482+
field: "value",
483+
//width: "42%",
484+
headerFilter: "input",
485+
headerFilterPlaceholder: "Filter",
486+
editor: "textarea",
487+
editable: editCheck,
488+
editorParams: {
489+
elementAttributes: {
490+
spellcheck: "false",
491+
},
492+
verticalNavigation: "editor",
493+
variableHeight: true,
494+
shiftEnterSubmit: true,
495+
},
496+
//formatter: "textarea",
497+
formatter: "plaintext",
498+
//formatter: editValueTextarea,
499+
500+
cellClick: function (e, cell) {
501+
const rowData = cell.getRow().getData();
502+
503+
if (!(rowData.value.split(/\r\n|\r|\n/).length < 10)) {
504+
editorTempCell = cell;
505+
textareaEl.value = rowData.value;
506+
selectEl.value = rowData.store;
507+
inputEl.value = rowData.key;
508+
editDialog.showModal();
509+
textareaEl.focus();
510+
textareaEl.setSelectionRange(0, 0);
511+
//textareaEl.style.height = "";
512+
//textareaEl.style.height = textareaEl.scrollHeight + "px";
513+
}
514+
},
515+
},
516+
453517
/*
454518
{
455-
formatter: printIcon,
456-
width: 40,
519+
title: "&#9998;",
520+
formatter: editValueButton,
521+
headerSort: false,
522+
headerHozAlign: "center",
523+
width: 0,
457524
hozAlign: "center",
458525
cellClick: function (e, cell) {
459-
//alert("Printing row data for: " + cell.getRow().getData().name);
460-
461526
const row = cell.getRow();
462-
463527
const value_cell = row.getCell(5);
464-
465528
editorTempCell = value_cell;
466529
const rowData = row.getData();
467530
textareaEl.value = rowData.value;
@@ -470,25 +533,12 @@ async function onDOMContentLoaded() {
470533
editDialog.showModal();
471534
textareaEl.focus();
472535
textareaEl.setSelectionRange(0, 0);
536+
we want to keep the buttons visible so no
537+
//textareaEl.style.height = "";
538+
//textareaEl.style.height = textareaEl.scrollHeight + "px";
473539
},
474540
},
475541
*/
476-
{
477-
title: "Value",
478-
field: "value",
479-
headerFilter: "input",
480-
headerFilterPlaceholder: "Filter",
481-
editor: "textarea",
482-
editorParams: {
483-
elementAttributes: {
484-
spellcheck: "false",
485-
},
486-
verticalNavigation: "editor",
487-
variableHeight: true,
488-
shiftEnterSubmit: true,
489-
},
490-
formatter: "plaintext",
491-
},
492542
],
493543
});
494544

@@ -534,24 +584,32 @@ async function onDOMContentLoaded() {
534584
*/
535585
});
536586

537-
table.on("cellDblClick", function (e, cell) {
587+
/**/
588+
/*
589+
table.on("cellClick", function (e, cell) {
538590
//e - the click event object
539591
//cell - cell component
540592
//e - the click event object
541593
//row - row component
542594
const field = cell.getField();
543595
544596
if (field === "value") {
545-
editorTempCell = cell;
546-
const rowData = cell.getRow().getData();
547-
textareaEl.value = rowData.value;
548-
selectEl.value = rowData.store;
549-
inputEl.value = rowData.key;
550-
editDialog.showModal();
551-
textareaEl.focus();
552-
textareaEl.setSelectionRange(0, 0);
597+
console.debug(cell.getValue());
598+
if (cell.getValue().split(/\r\n|\r|\n/).length > 5) {
599+
editorTempCell = cell;
600+
const rowData = cell.getRow().getData();
601+
textareaEl.value = rowData.value;
602+
selectEl.value = rowData.store;
603+
inputEl.value = rowData.key;
604+
editDialog.showModal();
605+
textareaEl.focus();
606+
textareaEl.setSelectionRange(0, 0);
607+
textareaEl.style.height = "";
608+
textareaEl.style.height = textareaEl.scrollHeight + "px";
609+
}
553610
}
554611
});
612+
*/
555613

556614
// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.
557615
/*

0 commit comments

Comments
 (0)