pinokiod 3.47.0 → 3.49.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.
Files changed (23) hide show
  1. package/kernel/environment.js +6 -0
  2. package/package.json +1 -1
  3. package/server/index.js +37 -13
  4. package/server/public/common.js +85 -8
  5. package/server/public/style.css +15 -27
  6. package/server/public/urldropdown.css +174 -0
  7. package/server/public/urldropdown.js +396 -0
  8. package/server/public/window_storage.js +30 -0
  9. package/server/views/app.ejs +19 -27
  10. package/server/views/columns.ejs +53 -21
  11. package/server/views/connect.ejs +21 -1
  12. package/server/views/container.ejs +21 -1
  13. package/server/views/download.ejs +2 -0
  14. package/server/views/index.ejs +20 -1
  15. package/server/views/init/index.ejs +4 -0
  16. package/server/views/net.ejs +21 -1
  17. package/server/views/network.ejs +21 -1
  18. package/server/views/review.ejs +8 -0
  19. package/server/views/rows.ejs +48 -16
  20. package/server/views/screenshots.ejs +21 -1
  21. package/server/views/settings.ejs +22 -2
  22. package/server/views/setup.ejs +2 -0
  23. package/server/views/tools.ejs +21 -1
package/server/views/connect.ejs CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="/markdown.css" rel="stylesheet"/>
11
11
  <link href="/noty.css" rel="stylesheet"/>
12
12
  <link href="/style.css" rel="stylesheet"/>
13
+ <link href="/urldropdown.css" rel="stylesheet" />
13
14
  <% if (agent === "electron") { %>
14
15
  <link href="/electron.css" rel="stylesheet"/>
15
16
  <% } %>
@@ -732,12 +733,14 @@ body.dark .profile td {
732
733
  padding: 5px;
733
734
  }
734
735
 
736
+ /*
735
737
  @media only screen and (max-width: 800px) {
736
738
  body {
737
739
  display: flex !important;
738
740
  flex-direction: row !important;
739
741
  }
740
742
  }
743
+ */
741
744
  @media only screen and (max-width: 600px) {
742
745
  aside {
743
746
  width: unset;
@@ -785,6 +788,7 @@ body.dark .profile td {
785
788
  }
786
789
  }
787
790
  </style>
791
+ <script src="/window_storage.js"></script>
788
792
  <script src="/popper.min.js"></script>
789
793
  <script src="/tippy-bundle.umd.min.js"></script>
790
794
  <script src="/hotkeys.min.js"></script>
@@ -792,16 +796,32 @@ body.dark .profile td {
792
796
  <script src="/common.js"></script>
793
797
  <script src="/opener.js"></script>
794
798
  <script src="/nav.js"></script>
799
+ <script src="/urldropdown.js"></script>
800
+ <script>
801
+ // Initialize URL Dropdown with empty behavior for connect page
802
+ document.addEventListener('DOMContentLoaded', function() {
803
+ initUrlDropdown({
804
+ clearBehavior: 'empty'
805
+ });
806
+ });
807
+ </script>
795
808
  </head>
796
809
  <body class='<%=theme%>' data-agent="<%=agent%>">
797
810
  <header class='navheader grabbable'>
798
811
  <h1>
799
812
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
813
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
800
814
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
801
815
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
802
816
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
803
817
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
804
- <div class='flexible'></div>
818
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
819
+ <form class='urlbar'>
820
+ <div class='url-input-container'>
821
+ <input type='url' placeholder='enter a local url'>
822
+ <div class='url-dropdown' id='url-dropdown'></div>
823
+ </div>
824
+ </form>
805
825
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
806
826
  <div><i class="fa-solid fa-table-columns"></i></div>
807
827
  </a>
package/server/views/container.ejs CHANGED
@@ -11,6 +11,7 @@
11
11
  <link href="/markdown.css" rel="stylesheet"/>
12
12
  <link href="/noty.css" rel="stylesheet"/>
13
13
  <link href="/style.css" rel="stylesheet"/>
14
+ <link href="/urldropdown.css" rel="stylesheet" />
14
15
  <% if (agent === "electron") { %>
15
16
  <link href="/electron.css" rel="stylesheet"/>
16
17
  <% } %>
@@ -290,12 +291,14 @@ iframe {
290
291
  border: none;
291
292
  width: 100%;
292
293
  }
294
+ /*
293
295
  @media only screen and (max-width: 800px) {
294
296
  body {
295
297
  display: flex !important;
296
298
  flex-direction: row !important;
297
299
  }
298
300
  }
301
+ */
299
302
  </style>
300
303
  <script src="/popper.min.js"></script>
301
304
  <script src="/tippy-bundle.umd.min.js"></script>
@@ -323,11 +326,18 @@ iframe {
323
326
  <header class='navheader grabbable'>
324
327
  <h1>
325
328
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
329
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
326
330
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
327
331
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
328
332
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
329
333
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
330
- <form class='urlbar'><input type='url' placeholder='enter a local url' value="<%=src%>"></form>
334
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
335
+ <form class='urlbar'>
336
+ <div class='url-input-container'>
337
+ <input type='url' placeholder='enter a local url' value="<%=src%>">
338
+ <div class='url-dropdown' id='url-dropdown'></div>
339
+ </div>
340
+ </form>
331
341
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
332
342
  <div><i class="fa-solid fa-table-columns"></i></div>
333
343
  </a>
@@ -353,5 +363,15 @@ iframe {
353
363
  </h1>
354
364
  </header>
355
365
  <iframe src="<%=src%>"></iframe>
366
+ <script src="/urldropdown.js"></script>
367
+ <script>
368
+ // Initialize URL Dropdown with restore behavior
369
+ document.addEventListener('DOMContentLoaded', function() {
370
+ initUrlDropdown({
371
+ clearBehavior: 'restore',
372
+ defaultValue: '<%=src%>'
373
+ });
374
+ });
375
+ </script>
356
376
  </body>
357
377
  </html>
package/server/views/download.ejs CHANGED
@@ -88,12 +88,14 @@ body.frozen {
88
88
  .timestamp {
89
89
  color: rgba(0,0,0,0.5);
90
90
  }
91
+ /*
91
92
  @media only screen and (max-width: 800px) {
92
93
  body {
93
94
  display: flex !important;
94
95
  flex-direction: row !important;
95
96
  }
96
97
  }
98
+ */
97
99
  </style>
98
100
  <script src="/popper.min.js"></script>
99
101
  <script src="/tippy-bundle.umd.min.js"></script>
package/server/views/index.ejs CHANGED
@@ -14,6 +14,7 @@
14
14
  <link href="/filepond-plugin-image-preview.min.css" rel="stylesheet" />
15
15
  <link href="/filepond-plugin-image-edit.min.css" rel="stylesheet" />
16
16
  <link href="/style.css" rel="stylesheet"/>
17
+ <link href="/urldropdown.css" rel="stylesheet" />
17
18
  <% if (agent === "electron") { %>
18
19
  <link href="/electron.css" rel="stylesheet"/>
19
20
  <% } %>
@@ -316,12 +317,14 @@ body.dark aside .current.selected {
316
317
  .container {
317
318
  margin-left: 20px;
318
319
  }
320
+ /*
319
321
  @media only screen and (max-width: 800px) {
320
322
  body {
321
323
  display: flex !important;
322
324
  flex-direction: row !important;
323
325
  }
324
326
  }
327
+ */
325
328
  @media only screen and (max-width: 600px) {
326
329
  aside {
327
330
  width: unset;
@@ -368,6 +371,7 @@ body.dark aside .current.selected {
368
371
  }
369
372
  }
370
373
  </style>
374
+ <script src="/window_storage.js"></script>
371
375
  <script src="/hotkeys.min.js"></script>
372
376
  <script src="/sweetalert2.js"></script>
373
377
  <script src="/noty.js"></script>
@@ -394,6 +398,7 @@ body.dark aside .current.selected {
394
398
  <script src="/filepond.min.js"></script>
395
399
  <script src="/fscreator.js"></script>
396
400
  <script src="/fseditor.js"></script>
401
+ <script src="/urldropdown.js"></script>
397
402
  </head>
398
403
  <body class='<%=theme%>' data-agent="<%=agent%>">
399
404
  <% if (error) { %>
@@ -410,11 +415,18 @@ body.dark aside .current.selected {
410
415
  <h1>
411
416
  <% if (ishome) { %>
412
417
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
418
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
413
419
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
414
420
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
415
421
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
416
422
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
417
- <form class='urlbar'><input type='url' placeholder='enter a local url'></form>
423
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
424
+ <form class='urlbar'>
425
+ <div class='url-input-container'>
426
+ <input type='url' placeholder='enter a local url'>
427
+ <div class='url-dropdown' id='url-dropdown'></div>
428
+ </div>
429
+ </form>
418
430
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
419
431
  <div><i class="fa-solid fa-table-columns"></i></div>
420
432
  </a>
@@ -1493,6 +1505,13 @@ if (document.querySelector("#cloudflare")) {
1493
1505
  }
1494
1506
  <% } %>
1495
1507
 
1508
+ // Initialize URL Dropdown with empty behavior
1509
+ document.addEventListener('DOMContentLoaded', function() {
1510
+ initUrlDropdown({
1511
+ clearBehavior: 'empty'
1512
+ });
1513
+ });
1514
+
1496
1515
  </script>
1497
1516
  <script src="/opener.js"></script>
1498
1517
  </body>
package/server/views/init/index.ejs CHANGED
@@ -1405,12 +1405,14 @@ aside .tab.selected {
1405
1405
  body.dark .ace-editor {
1406
1406
  border: 1px solid rgba(255,255,255,0.1);
1407
1407
  }
1408
+ /*
1408
1409
  @media only screen and (max-width: 800px) {
1409
1410
  body {
1410
1411
  display: flex !important;
1411
1412
  flex-direction: row !important;
1412
1413
  }
1413
1414
  }
1415
+ */
1414
1416
  @media only screen and (max-width: 600px) {
1415
1417
  aside {
1416
1418
  width: unset;
@@ -1482,6 +1484,7 @@ body.dark .ace-editor {
1482
1484
  <link href="/app.css" rel="stylesheet"/>
1483
1485
  <link href="/xterm.min.css" rel="stylesheet" />
1484
1486
  <script src="/hotkeys.min.js"></script>
1487
+ <script src="/window_storage.js"></script>
1485
1488
  <script src="/ace/ace.js"></script>
1486
1489
  <script src="/sweetalert2.js"></script>
1487
1490
  <script src="/nav.js"></script>
@@ -1514,6 +1517,7 @@ body.dark .ace-editor {
1514
1517
  <header class='navheader grabbable'>
1515
1518
  <h1>
1516
1519
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
1520
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
1517
1521
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
1518
1522
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
1519
1523
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
package/server/views/net.ejs CHANGED
@@ -14,6 +14,7 @@
14
14
  <link href="/filepond-plugin-image-preview.min.css" rel="stylesheet" />
15
15
  <link href="/filepond-plugin-image-edit.min.css" rel="stylesheet" />
16
16
  <link href="/style.css" rel="stylesheet"/>
17
+ <link href="/urldropdown.css" rel="stylesheet" />
17
18
  <% if (agent === "electron") { %>
18
19
  <link href="/electron.css" rel="stylesheet"/>
19
20
  <% } %>
@@ -428,12 +429,14 @@ body.dark .net .mark {
428
429
  color: silver !important;
429
430
  }
430
431
 
432
+ /*
431
433
  @media only screen and (max-width: 800px) {
432
434
  body {
433
435
  display: flex !important;
434
436
  flex-direction: row !important;
435
437
  }
436
438
  }
439
+ */
437
440
  @media only screen and (max-width: 600px) {
438
441
  aside {
439
442
  width: unset;
@@ -481,6 +484,7 @@ body.dark .net .mark {
481
484
  }
482
485
  }
483
486
  </style>
487
+ <script src="/window_storage.js"></script>
484
488
  <script src="/popper.min.js"></script>
485
489
  <script src="/tippy-bundle.umd.min.js"></script>
486
490
  <script src="/hotkeys.min.js"></script>
@@ -496,6 +500,15 @@ body.dark .net .mark {
496
500
  <script src="/common.js"></script>
497
501
  <script src="/opener.js"></script>
498
502
  <script src="/nav.js"></script>
503
+ <script src="/urldropdown.js"></script>
504
+ <script>
505
+ // Initialize URL Dropdown with empty behavior for net page
506
+ document.addEventListener('DOMContentLoaded', function() {
507
+ initUrlDropdown({
508
+ clearBehavior: 'empty'
509
+ });
510
+ });
511
+ </script>
499
512
  <script src="/fuse.js"></script>
500
513
  <script src="/report.js"></script>
501
514
  <script src="/filepond-plugin-file-validate-type.min.js"></script>
@@ -520,11 +533,18 @@ body.dark .net .mark {
520
533
  <header class='navheader grabbable'>
521
534
  <h1>
522
535
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
536
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
523
537
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
524
538
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
525
539
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
526
540
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
527
- <div class='flexible'></div>
541
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
542
+ <form class='urlbar'>
543
+ <div class='url-input-container'>
544
+ <input type='url' placeholder='enter a local url'>
545
+ <div class='url-dropdown' id='url-dropdown'></div>
546
+ </div>
547
+ </form>
528
548
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
529
549
  <div><i class="fa-solid fa-table-columns"></i></div>
530
550
  </a>
package/server/views/network.ejs CHANGED
@@ -11,6 +11,7 @@
11
11
  <link href="/markdown.css" rel="stylesheet"/>
12
12
  <link href="/noty.css" rel="stylesheet"/>
13
13
  <link href="/style.css" rel="stylesheet"/>
14
+ <link href="/urldropdown.css" rel="stylesheet" />
14
15
  <script src="/sweetalert2.js"></script>
15
16
  <script src="/commander.js"></script>
16
17
  <% if (agent === "electron") { %>
@@ -953,12 +954,14 @@ body.dark .troubleshoot {
953
954
  color: silver !important;
954
955
  }
955
956
 
957
+ /*
956
958
  @media only screen and (max-width: 800px) {
957
959
  body {
958
960
  display: flex !important;
959
961
  flex-direction: row !important;
960
962
  }
961
963
  }
964
+ */
962
965
  @media only screen and (max-width: 600px) {
963
966
  aside {
964
967
  width: unset;
@@ -1006,6 +1009,7 @@ body.dark .troubleshoot {
1006
1009
  }
1007
1010
  }
1008
1011
  </style>
1012
+ <script src="/window_storage.js"></script>
1009
1013
  <script src="/popper.min.js"></script>
1010
1014
  <script src="/tippy-bundle.umd.min.js"></script>
1011
1015
  <script src="/hotkeys.min.js"></script>
@@ -1013,16 +1017,32 @@ body.dark .troubleshoot {
1013
1017
  <script src="/common.js"></script>
1014
1018
  <script src="/opener.js"></script>
1015
1019
  <script src="/nav.js"></script>
1020
+ <script src="/urldropdown.js"></script>
1021
+ <script>
1022
+ // Initialize URL Dropdown with empty behavior for network page
1023
+ document.addEventListener('DOMContentLoaded', function() {
1024
+ initUrlDropdown({
1025
+ clearBehavior: 'empty'
1026
+ });
1027
+ });
1028
+ </script>
1016
1029
  </head>
1017
1030
  <body class='<%=theme%>' data-agent="<%=agent%>">
1018
1031
  <header class='navheader grabbable'>
1019
1032
  <h1>
1020
1033
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
1034
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
1021
1035
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
1022
1036
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
1023
1037
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
1024
1038
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
1025
- <div class='flexible'></div>
1039
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
1040
+ <form class='urlbar'>
1041
+ <div class='url-input-container'>
1042
+ <input type='url' placeholder='enter a local url'>
1043
+ <div class='url-dropdown' id='url-dropdown'></div>
1044
+ </div>
1045
+ </form>
1026
1046
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
1027
1047
  <div><i class="fa-solid fa-table-columns"></i></div>
1028
1048
  </a>
package/server/views/review.ejs CHANGED
@@ -864,6 +864,14 @@ body.minimized #collapse {
864
864
  display: block;
865
865
  }
866
866
  }
867
+ @media only screen and (max-width: 800px) {
868
+ .mode-selector .btn2 {
869
+ width: unset;
870
+ }
871
+ .mode-selector .btn2 .caption {
872
+ display: none;
873
+ }
874
+ }
867
875
 
868
876
  @media only screen and (max-width: 480px) {
869
877
  nav .btn2 {
package/server/views/rows.ejs CHANGED
@@ -54,6 +54,7 @@ body.resizing {
54
54
  .gutter:hover::before, body.resizing .gutter::before { background: #9e9e9e; }
55
55
  .gutter:focus { outline: none; box-shadow: inset 0 0 0 2px #90caf9; }
56
56
  </style>
57
+ <script src="/window_storage.js"></script>
57
58
  </head>
58
59
  <body class='<%=theme%>'>
59
60
  <iframe id='row0' data-src="<%=src%>"></iframe>
@@ -105,7 +106,7 @@ body.resizing {
105
106
  const total = computeTotal();
106
107
  if (total > 0) {
107
108
  const ratio = clamp(topPx / total, 0, 1);
108
- try { sessionStorage.setItem(splitKey, String(ratio)); } catch (_) {}
109
+ windowStorage.setItem(splitKey, String(ratio));
109
110
  }
110
111
  }
111
112
 
@@ -121,7 +122,7 @@ body.resizing {
121
122
  function restorePaneURL(pane) {
122
123
  const key = urlKeyFor(pane.name);
123
124
  try {
124
- const saved = sessionStorage.getItem(key);
125
+ const saved = windowStorage.getItem(key);
125
126
  const fallback = pane.getAttribute('data-src') || pane.getAttribute('src') || '';
126
127
  const target = (saved && typeof saved === 'string') ? saved : fallback;
127
128
  if (target && pane.src !== target) pane.src = target;
@@ -134,7 +135,7 @@ body.resizing {
134
135
  const cw = pane.contentWindow;
135
136
  if (!cw) return;
136
137
  const notify = () => {
137
- try { sessionStorage.setItem(key, cw.location.href); } catch (_) {}
138
+ windowStorage.setItem(key, cw.location.href);
138
139
  };
139
140
  // Hook SPA navigations
140
141
  const _ps = cw.history.pushState;
@@ -147,7 +148,7 @@ body.resizing {
147
148
  else notify();
148
149
  } catch (err) {
149
150
  // Cross-origin: fall back to saving src only
150
- try { sessionStorage.setItem(key, pane.src); } catch (_) {}
151
+ windowStorage.setItem(key, pane.src);
151
152
  }
152
153
  }
153
154
 
@@ -174,8 +175,9 @@ body.resizing {
174
175
  let overlay = null;
175
176
 
176
177
  function refreshLayout (splitKey) {
177
- let val = sessionStorage.getItem(splitKey)
178
+ let val = windowStorage.getItem(splitKey)
178
179
  let id = splitKey.replace("splitRatio:", "")
180
+ console.log({ id, val })
179
181
  if (val === "1" || val === "0") {
180
182
  if (val === "1") {
181
183
  id_to_hide = id + ".1"
@@ -184,8 +186,24 @@ body.resizing {
184
186
  }
185
187
  const el = document.querySelector(`iframe[name='${id_to_hide}']`)
186
188
  el.remove()
187
- document.body.className = "single"
188
- document.querySelector("#gutter").remove()
189
+ if (document.querySelector("#gutter")) {
190
+ document.querySelector("#gutter").remove()
191
+ }
192
+ let existing_iframe = document.querySelector("iframe")
193
+ if (existing_iframe) {
194
+ debugger
195
+ document.body.className = "single"
196
+ } else {
197
+ if (window.parent) {
198
+ // if all child iframes have been removed, remove self
199
+ window.parent.postMessage({
200
+ e: "close"
201
+ }, "*")
202
+ } else {
203
+ // if this is the top window, everything has been removed, so just redirect to home
204
+ location.href = "/"
205
+ }
206
+ }
189
207
  }
190
208
  }
191
209
 
@@ -267,7 +285,7 @@ body.resizing {
267
285
 
268
286
  // Initialize from saved ratio if available and set ARIA
269
287
  try {
270
- const saved = parseFloat(sessionStorage.getItem(splitKey) || '');
288
+ const saved = parseFloat(windowStorage.getItem(splitKey) || '');
271
289
  console.log({ saved })
272
290
  if (!Number.isNaN(saved) && saved > 0 && saved < 1) {
273
291
  console.log("< 1")
@@ -285,7 +303,7 @@ body.resizing {
285
303
  // Re-apply on window resize to keep ratio
286
304
  window.addEventListener('resize', () => {
287
305
  try {
288
- const saved = parseFloat(sessionStorage.getItem(splitKey) || '');
306
+ const saved = parseFloat(windowStorage.getItem(splitKey) || '');
289
307
  if (!Number.isNaN(saved) && saved > 0 && saved < 1) {
290
308
  applyFromRatio(saved);
291
309
  } else {
@@ -304,11 +322,17 @@ body.resizing {
304
322
 
305
323
  let sourceFrameId = null;
306
324
 
307
- if (event.source === row0.contentWindow) {
325
+ if (row0 && event.source === row0.contentWindow) {
308
326
  sourceFrameId = 'row0';
309
- } else if (event.source === row1.contentWindow) {
327
+ } else if (row1 && event.source === row1.contentWindow) {
310
328
  sourceFrameId = 'row1';
311
329
  }
330
+
331
+ if (!sourceFrameId) {
332
+ windowStorage.removeItem(splitKey)
333
+ location.href = "/"
334
+ return
335
+ }
312
336
 
313
337
  console.log('Message received from iframe:', sourceFrameId);
314
338
 
@@ -317,16 +341,13 @@ body.resizing {
317
341
  console.log({ splitKey })
318
342
  for (let iframe of iframes) {
319
343
  if (event.source === iframe.contentWindow) {
320
- // const splitKey = `splitRatio:${iframe.name}`
321
344
  if (iframe.id === "row0") {
322
345
  // hide row0 => ratio:; 0
323
- // row0.src = "about:blank"
324
- try { sessionStorage.setItem(splitKey, "0"); } catch (_) { console.log("> e", _)}
346
+ windowStorage.setItem(splitKey, "0");
325
347
  refreshLayout(splitKey)
326
348
  } else if (iframe.id === "row1") {
327
349
  // hide row1 => ratio:; 1
328
- // row1.src = "about:blank"
329
- try { sessionStorage.setItem(splitKey, "1"); } catch (_) {console.log(">>> e", _)}
350
+ windowStorage.setItem(splitKey, "1");
330
351
  refreshLayout(splitKey)
331
352
  }
332
353
  console.log('Message from iframe with id:', iframe.id);
@@ -336,6 +357,17 @@ body.resizing {
336
357
  }
337
358
  })
338
359
  })();
360
+ if (document.querySelector("#collapse") && window.windowStorage) {
361
+ document.querySelector("#collapse").addEventListener("click", (e) => {
362
+ document.body.classList.toggle("minimized")
363
+ let frame_key = window.frameElement?.name || "";
364
+ if (document.body.classList.contains("minimized")) {
365
+ windowStorage.setItem(frame_key + ":window_mode", "minimized")
366
+ } else {
367
+ windowStorage.setItem(frame_key + ":window_mode", "full")
368
+ }
369
+ })
370
+ }
339
371
  </script>
340
372
  </body>
341
373
  </html>
package/server/views/screenshots.ejs CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="/markdown.css" rel="stylesheet"/>
11
11
  <link href="/noty.css" rel="stylesheet"/>
12
12
  <link href="/style.css" rel="stylesheet"/>
13
+ <link href="/urldropdown.css" rel="stylesheet" />
13
14
  <% if (agent === "electron") { %>
14
15
  <link href="/electron.css" rel="stylesheet"/>
15
16
  <% } %>
@@ -544,12 +545,14 @@ body.dark .gallery-item-timestamp {
544
545
  justify-content: center;
545
546
  }
546
547
 
548
+ /*
547
549
  @media only screen and (max-width: 800px) {
548
550
  body {
549
551
  display: flex !important;
550
552
  flex-direction: row !important;
551
553
  }
552
554
  }
555
+ */
553
556
  @media only screen and (max-width: 768px) {
554
557
  .gallery-grid {
555
558
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -610,6 +613,7 @@ body.dark .gallery-item-timestamp {
610
613
  }
611
614
  }
612
615
  </style>
616
+ <script src="/window_storage.js"></script>
613
617
  <script src="/popper.min.js"></script>
614
618
  <script src="/tippy-bundle.umd.min.js"></script>
615
619
  <script src="/hotkeys.min.js"></script>
@@ -625,6 +629,15 @@ body.dark .gallery-item-timestamp {
625
629
  <script src="/common.js"></script>
626
630
  <script src="/opener.js"></script>
627
631
  <script src="/nav.js"></script>
632
+ <script src="/urldropdown.js"></script>
633
+ <script>
634
+ // Initialize URL Dropdown with empty behavior for screenshots page
635
+ document.addEventListener('DOMContentLoaded', function() {
636
+ initUrlDropdown({
637
+ clearBehavior: 'empty'
638
+ });
639
+ });
640
+ </script>
628
641
  <script src="/report.js"></script>
629
642
  </head>
630
643
  <body class='<%=theme%>' data-agent="<%=agent%>">
@@ -636,11 +649,18 @@ body.dark .gallery-item-timestamp {
636
649
  <header class='navheader grabbable'>
637
650
  <h1>
638
651
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
652
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
639
653
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
640
654
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
641
655
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
642
656
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
643
- <form class='urlbar'><input type='url' placeholder='enter a local url'></form>
657
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
658
+ <form class='urlbar'>
659
+ <div class='url-input-container'>
660
+ <input type='url' placeholder='enter a local url'>
661
+ <div class='url-dropdown' id='url-dropdown'></div>
662
+ </div>
663
+ </form>
644
664
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
645
665
  <div><i class="fa-solid fa-table-columns"></i></div>
646
666
  </a>